Learn Complete FrontEnd Web Development Course 2023

Learn Complete FrontEnd Web Development Course 2023

What you’ll learn

You will learn complete front-end web development from scratch
You will learn to build Modern websites Angular & React JS
You will learn to build Bootstrap 5 Web Applications
You will learn HTML5 & CSS3 from scratch, & build a full working website
You will learn Complete JavaScript + ECMA Script 6 (ES6) from scratch
You will build front-end Reactive Web applications with CRUD

Requirements

All you need is a PC / Laptop
Decent internet connectivity

Description

In this Front-End Web Development – Complete Guide (Step by Step) [Updated 2023] you will learn complete front-end web development from scratch. As part of the course, You will learn complete HTML5, and CSS3 step by step.Later you will learn how to use, integrate or add user interactivity with the help of JavaScript. This course also covers the latest JavaScript version which is ECMA Script learn the modern JavaScript techniques with ECMA Script 6 or later.The next big step would be to learn Bootstrap 5 which is the latest and the most popular CSS framework available. Here you will learn to create 3 Live Projects. In the 1st project, you will learn to create an EMS Web App also known as Employee Management System.2nd the project we will see how to create a full blog for beginners to Advanced Levels. For the 3rd project, you will create a professional website.Once you have completed Bootstrap 5 the next topic would be to get started with Angular. In the Angular Topic, you will learn the beginner’s level to integrate angular to any HTML5 and CSS3 App.Then with the help of React JS, we will see how to build a Scratch Pad App from Beginner to Advanced level. After that you will learn about Create React App tool, used to build React applications. With the help of Bootstrap 5, you will learn to build a Practical web application with React.As the project, you will learn to create a web application, which will manage the user data via API. In the web application, we allow the users to create new data, Read data and also Delete data from the application itself.I will be always available in the Q & A section for any help. Please feel free to ask any doubts and queries during the course.All the best, hope you enjoy the course.

Overview

Section 1: HTML5 & CSS3 – Getting Started

Lecture 1 Introduction

Lecture 2 What you will need

Lecture 3 Installing VS Code (Code Editor)

Lecture 4 Hello World

Section 2: HTML5 – Tags

Lecture 5 Document Structure

Lecture 6 HTML5 Basics

Lecture 7 Headings & Paragraphs

Lecture 8 Text Formatting

Lecture 9 Links in HTML5

Lecture 10 HTML5 Nested Links

Lecture 11 HTML5 Lists

Lecture 12 Working with Images

Lecture 13 Tables in HTML5

Section 3: HTML5 – Forms

Lecture 14 Forms in HTML5

Lecture 15 Creating a Contact Form

Lecture 16 Creating a Login Form

Lecture 17 Creating a Registration Form

Section 4: HTML5 – Media

Lecture 18 Grouping Elements

Lecture 19 HTML5 Media Tags

Lecture 20 IFrames in HTML5

Lecture 21 Figure Tag in HTML5

Lecture 22 Collapse Elements with Details Tag

Section 5: HTML5 – Website Structure

Lecture 23 Creating The Header

Lecture 24 Creating Nav Menu

Lecture 25 Creating The Banner

Lecture 26 Adding Content to Page

Lecture 27 Creating The Sidebar

Lecture 28 Building Page Footer

Lecture 29 Adding Copyright

Section 6: CSS & CSS3 – Fundamentals

Lecture 30 Inline CSS

Lecture 31 Internal CSS

Lecture 32 External CSS

Lecture 33 Box Model in CSS

Lecture 34 Targeting Elements in CSS

Lecture 35 Designing with Box Model

Section 7: Project – HTML5 & CSS3 Website

Lecture 36 Building The Container

Lecture 37 Building The Website Header

Lecture 38 Creating The Nav Bar

Lecture 39 Making Drop-Down Menu

Lecture 40 Creating Image Slider

Lecture 41 Making Content Holder

Lecture 42 Creating Sidebar

Lecture 43 Making Footer

Lecture 44 Creating About-us Page

Lecture 45 Creating Services Pages

Lecture 46 Building The Products Page

Lecture 47 Building Contact Page

Lecture 48 Adding Nav-Menu

Lecture 49 Responsive Design (RWD) Explained

Lecture 50 Animation with CSS3

Section 8: JavaScript – Getting Started

Lecture 51 Introduction to JavaScript

Lecture 52 What you should know

Lecture 53 Hello World

Lecture 54 JavaScript Statements

Lecture 55 Placements in JavaScript Part-1

Lecture 56 Placements in JavaScript Part-2

Section 9: JavaScript – Fundamentals

Lecture 57 Variables in JavaScript

Lecture 58 Conditions in JavaScript

Lecture 59 Operators in JavaScript

Lecture 60 Working with Browser Console

Lecture 61 Loops in JavaScript

Lecture 62 Functions in JavaScript

Lecture 63 Creating Custom Loops with Functions

Section 10: JavaScript – Data Types

Lecture 64 Working with Arrays

Lecture 65 Numbers in JavaScript

Lecture 66 Strings in JavaScript

Lecture 67 Working with Dates Object

Lecture 68 Objects in JavaScript

Section 11: JavaScript DOM – Document Object Model

Lecture 69 DOM in JavaScript

Lecture 70 Element Node Types

Lecture 71 Working with DOM Elements

Lecture 72 Changing Contents of DOM

Lecture 73 Creating New Elements with JavaScript

Lecture 74 Adding Events to DOM Elements

Lecture 75 Working with Form Elements

Lecture 76 Timers in JavaScript

Section 12: JavaScript – Advanced

Lecture 77 Debugging in JavaScript

Lecture 78 Creating Modern Live Validation Forms

Lecture 79 Minify & Validate JavaScript

Lecture 80 Using JavaScript Libraries

Lecture 81 Working with Modern JavaScript

Lecture 82 Making Use Of Use Strict

Lecture 83 JavaScript Bad Practices

Lecture 84 JavaScript Regular Expressions

Section 13: ECMA Script 6 (JavaScript ES6)

Lecture 85 Introduction to ES6

Lecture 86 What you should know

Lecture 87 What is ES6

Lecture 88 Transpiling in ES6

Lecture 89 Why use Babel JS

Lecture 90 How to use Babel JS

Lecture 91 Installing Node JS

Section 14: ECMA Script 6 (ES6) – Fundamentals

Lecture 92 Let Syntax in ES6

Lecture 93 Using The Const Keyword

Lecture 94 Working with Template Strings

Lecture 95 Spread Operator in JavaScript ES6

Lecture 96 Default Function Parameters in ES6

Lecture 97 Working with Object Literals in ES6

Lecture 98 Arrow Functions in JavaScript ES6

Lecture 99 Arrow Functions with This Scope in ES6

Lecture 100 Destructuring in JavaScript ES6

Lecture 101 Generators in JavaScript ES6

Lecture 102 Working with Class Syntax in JavaScript ES6

Lecture 103 Class Inheritance in JavaScript ES6

Section 15: Bootstrap 5 – Getting Started

Lecture 104 Introduction to Bootstrap 5

Lecture 105 What you will need

Lecture 106 Hello World

Lecture 107 Bootstrap Document Structure

Section 16: Bootstrap 5 – Layouts

Lecture 108 Breakpoints in Bootstrap 5

Lecture 109 Container Types

Lecture 110 Grid

Lecture 111 Grid Options

Lecture 112 Nesting Rows and Columns

Lecture 113 Column Vertical Alignment

Lecture 114 Column Horizontal Alignment

Lecture 115 Column Wrapping and Column Breaks

Lecture 116 Reordering and Offsetting Columns

Lecture 117 Margin Utilities

Lecture 118 Gutters

Lecture 119 Horizontal Gutters

Lecture 120 Vertical Gutters

Lecture 121 Horizontal and Vertical Gutters

Section 17: Bootstrap 5 – Contents

Lecture 122 Typography

Lecture 123 Inline Text Elements

Lecture 124 Abbreviations and Blockquotes

Lecture 125 Working with Lists

Lecture 126 Images in Bootstrap

Lecture 127 Tables in Bootstrap

Lecture 128 Table Alignment, Nesting and Anatomy

Lecture 129 Figures in Bootstrap

Section 18: Bootstrap 5 – Forms

Lecture 130 Forms in Bootstrap

Lecture 131 Form Control

Lecture 132 Checks and Radios

Lecture 133 Range

Lecture 134 Input Groups

Lecture 135 Floating Labels

Lecture 136 Form Layout

Lecture 137 Horizontal Forms

Lecture 138 Auto Sizing Forms

Lecture 139 Inline Forms

Lecture 140 Form Validation

Section 19: Bootstrap 5 – Components

Lecture 141 Accordions

Lecture 142 Alerts

Lecture 143 Dismissing Alerts

Lecture 144 Badges

Lecture 145 Breadcrumb

Lecture 146 Buttons

Lecture 147 Button Group

Lecture 148 Button Toolbar

Lecture 149 Button Group Alteration

Lecture 150 Card

Lecture 151 Card Sizing

Lecture 152 Card Navigation

Lecture 153 Card Images

Lecture 154 Card Styles

Lecture 155 Carousel

Lecture 156 Carousel Controls

Lecture 157 Carousel Indicators

Lecture 158 Carousel Caption

Lecture 159 Carousel Fade Effect

Lecture 160 Carousel Timing

Lecture 161 Disable Carousel Touch Swiping

Lecture 162 Carousel Dark Variant

Lecture 163 Close Button

Lecture 164 Collapse

Lecture 165 Horizontal Collapse

Lecture 166 Multiple Targets

Lecture 167 Dropdowns

Lecture 168 Split Button

Lecture 169 Dropdown Sizing

Lecture 170 Dark Dropdowns

Lecture 171 Dropdown Directions

Lecture 172 Dropup and Dropdown Alignment

Lecture 173 Menu Items

Lecture 174 Menu Alignment

Lecture 175 Dropdown Alignment Options

Lecture 176 Menu Contents

Lecture 177 Dropdown Forms

Lecture 178 Dropdown Options

Lecture 179 Dropdown Auto Close

Lecture 180 List Group

Lecture 181 List Group Links and Buttons

Lecture 182 List Group Flush

Lecture 183 Numbered List

Lecture 184 Horizontal List Groups

Lecture 185 Contextual List Group Classes

Lecture 186 List Group with Badges

Lecture 187 List Group with Custom Content

Lecture 188 List Group Checkboxes and Radios

Lecture 189 List Group JavaScript Tabs

Lecture 190 Modals

Lecture 191 Static Backdrop

Lecture 192 Scrolling Long Content

Lecture 193 Vertically Centered

Lecture 194 Modal Tooltips and Popovers

Lecture 195 Using Grid system in Modal

Lecture 196 Varying Modal Content

Lecture 197 Toggle Between Modals

Lecture 198 Optional Modal Sizes

Lecture 199 Navbar

Lecture 200 Navigation Links

Lecture 201 Navbar Dropdown

Lecture 202 Navbar Nested Dropdown

Lecture 203 Navbar Forms

Lecture 204 Navbar Input Group

Lecture 205 Navbar Plain Text

Lecture 206 Navbar Colors

Lecture 207 Navbar Containers

Lecture 208 Navbar Placement

Lecture 209 Navbar Scrolling

Lecture 210 Off Canvas Navbar

Lecture 211 Navs and Tabs

Lecture 212 Nav Flex Utilities

Lecture 213 Nav Tabs and Pills with Dropdown

Lecture 214 Tabs and Pills Behaviors

Lecture 215 Offcanvas In-Depth

Lecture 216 Offcanvas Scrolling

Lecture 217 Offcanvas Placement

Lecture 218 Pagination

Lecture 219 Placeholders

Lecture 220 Popovers In-Depth

Lecture 221 Popover Direction

Lecture 222 Custom Popovers

Lecture 223 Dismiss on next click

Lecture 224 Enable Popover on Hover

Lecture 225 Progress Bars

Lecture 226 Progress bar height and Background

Lecture 227 Stripes and Animation

Lecture 228 Scrollspy

Lecture 229 Spinners

Lecture 230 Growing Spinner

Lecture 231 Spinner Alignment

Lecture 232 Spinner Sizes

Lecture 233 Spinner in Buttons

Lecture 234 Toasts

Lecture 235 Toast Alignment

Lecture 236 Tooltips In-Depth

Lecture 237 Custom Tooltip

Lecture 238 Tooltip Directions

Lecture 239 HTML in Tooltip

Lecture 240 Tooltip on Disabled Elements

Section 20: Bootstrap 5 – Helpers

Lecture 241 Clearfix

Lecture 242 Colors and Background

Lecture 243 Colored Links

Lecture 244 Ratios

Lecture 245 Positions

Lecture 246 Stacks

Lecture 247 Visually Hidden

Lecture 248 Stretched Link

Lecture 249 Text Truncate

Lecture 250 Vertical Rule

Section 21: Bootstrap 5 – Utilities

Lecture 251 Backgrounds

Lecture 252 Background Gradients

Lecture 253 Background Opacity

Lecture 254 Borders

Lecture 255 Border Color

Lecture 256 Border Opacity

Lecture 257 Border Width

Lecture 258 Border Radius

Lecture 259 Rounded Border Sizes

Lecture 260 Text Colors

Lecture 261 Text Opacity

Lecture 262 Display Inline and Block

Lecture 263 Hiding Elements

Lecture 264 Display in Print

Lecture 265 Flex

Lecture 266 Flex Direction

Lecture 267 Flex Justify Content

Lecture 268 Flex Align Items

Lecture 269 Flex Align Self

Lecture 270 Flex Fill

Lecture 271 Flex Grow and Shrink

Lecture 272 Flex Auto Margins

Lecture 273 Flex with Align Items

Lecture 274 Flex Wrap

Lecture 275 Flex Order

Lecture 276 Flex Align Content

Lecture 277 Flex Media Object

Lecture 278 Responsive Float

Lecture 279 Interactions

Lecture 280 Opacity

Lecture 281 Overflow

Lecture 282 Position

Lecture 283 Position Center Elements

Lecture 284 Position Center Elements within Edges

Lecture 285 Position Examples Part 1

Lecture 286 Position Example Part 2

Lecture 287 Shadow

Lecture 288 Sizing

Lecture 289 Spacing

Lecture 290 Gap

Lecture 291 Text Alignment

Lecture 292 Text Wrap

Lecture 293 Text Break

Lecture 294 Text Transform

Lecture 295 Font Size

Lecture 296 Font weights and italics

Lecture 297 Line Height

Lecture 298 Monoscope

Lecture 299 Reset Color

Lecture 300 Text Decoration

Lecture 301 Vertical Alignment

Lecture 302 Visibility

Lecture 303 Bootstrap Icons

Section 22: Bootstrap 5 Project 1 – EMS App

Lecture 304 Introduction to EMS2.0 Project

Lecture 305 Creating the Login Page

Lecture 306 Creating Dash Nav and Brand Logo

Lecture 307 Creating the Navbar Toggler

Lecture 308 Creating Navbar Items

Lecture 309 Creating Form Fields for Navbar

Lecture 310 Creating Cards for Dashboard

Lecture 311 Creating Employees List Page

Lecture 312 Creating Employees Page Sidebar

Lecture 313 Creating Employees List Table

Lecture 314 Creating Add Employee Modal

Lecture 315 Creating Add Employee Modal Form

Lecture 316 Creating Details Modal for Employee List

Lecture 317 Creating Edit Details for Employee List

Lecture 318 Creating Delete Modal for Employees List

Lecture 319 Creating Jobs List Page

Lecture 320 Updating the Job List Page

Lecture 321 Creating Job List Table

Lecture 322 Creating Add Job Modal

Lecture 323 Creating Details Modal for Job

Lecture 324 Creating Edit Details for Job Modal

Lecture 325 Creating Delete Modal for Job List

Section 23: Bootstrap 5 Project 2 – BLOG2.0 App

Lecture 326 Blog Project Introduction

Lecture 327 What’s Required for Template Building

Lecture 328 Creating The Index File

Lecture 329 Creating The Navbar and Brand Logo

Lecture 330 Creating Navbar Toggler

Lecture 331 Creating Navbar Items

Lecture 332 Creating The Search Field

Lecture 333 Creating The Home Banner

Lecture 334 Creating The Subscribe Modal

Lecture 335 Creating Home Posts Section

Lecture 336 Creating Blog Footer

Lecture 337 Adding Custom Effects To Navbar

Lecture 338 Creating Default Page Header

Lecture 339 Creating Post Loop For Default Page

Lecture 340 Creating Sidebar Subscribe Form

Lecture 341 Creating Categories and Archive Widgets

Lecture 342 Creating Page and Post Content Area

Lecture 343 Creating Comment Form for Posts

Lecture 344 Creating The Search Page

Lecture 345 Linking Everything Together

Section 24: Bootstrap 5 Project 3 – Professional Website

Lecture 346 Introduction To Project

Lecture 347 Setting Up Project Folder

Lecture 348 Creating Navbar and Brand

Lecture 349 Creating Navbar Toggler

Lecture 350 Creating Nav Items

Lecture 351 Creating Navbar Search Field

Lecture 352 Creating Navbar Sign-Up and Login Buttons

Lecture 353 Creating The Banner Text

Lecture 354 Adding Banner Image

Lecture 355 Creating Site Feature Set

Lecture 356 Creating Course Loop Header

Lecture 357 Creating Course Loop Filter

Lecture 358 Creating Course Loop Header

Lecture 359 Creating Single Course List Item

Lecture 360 Creating Duplicates of Course Items

Lecture 361 Creating Home Page Content

Lecture 362 Adding Home Content Image

Lecture 363 Creating Subscribe Area

Lecture 364 Creating Main Footer

Lecture 365 Creating Footer Address

Lecture 366 Creating Link Items For Footer

Lecture 367 Creating Social Icons

Lecture 368 Creating Copyright Info

Lecture 369 Creating Sticky Footer

Lecture 370 Creating About Page Header

Lecture 371 Creating About Content Section

Lecture 372 Creating The Courses Page

Lecture 373 Creating Single Course Page And Breadcrumb

Lecture 374 Creating Course Header Description and Meta Data

Lecture 375 Creating Course Meta Data

Lecture 376 Adding Icons To Course Meta Data

Lecture 377 Adding Course Buttons

Lecture 378 Creating Single Course Image

Lecture 379 Creating Single Course Contents

Lecture 380 Creating FAQ Header

Lecture 381 Creating FAQ List

Lecture 382 Creating Post Question Form

Lecture 383 Creating Blog Page and Header

Lecture 384 Creating Blog Posts List

Lecture 385 Creating Blog Sidebar

Lecture 386 Creating Subscribe Modal

Lecture 387 Creating The Subscribe Form

Lecture 388 Creating Single Post Page

Lecture 389 Creating Contact Page Header

Lecture 390 Creating Contact Page Cards

Lecture 391 Creating Contact Modal

Lecture 392 Linking Everything Together

Section 25: Angular – Getting Started

Lecture 393 Introduction to Angular

Lecture 394 What you should know

Lecture 395 What you need to get started

Lecture 396 Installing Node JS

Lecture 397 Installing Angular

Lecture 398 Installing Cmder for Angular

Section 26: Angular – Fundamentals

Lecture 399 Setting up Angular Project

Lecture 400 Install VS Code for Angular

Lecture 401 Creating the “Hello World” Project in Angular

Lecture 402 Angular App Directory Structure

Lecture 403 Creating New Components in Angular

Lecture 404 Creating Styles for Angular Components

Lecture 405 Adding Bootstrap & jQuery to Angular Project

Lecture 406 Interpolation in Angular

Lecture 407 Data Binding in Angular

Lecture 408 Ng If Else Directives in Angular

Lecture 409 Event Binding in Angular

Lecture 410 Pipes in Angular

Lecture 411 Input Decorator in Angular

Lecture 412 Creating Services in Angular

Lecture 413 HTTP Client Module in Angular

Section 27: React JS – Getting Started

Lecture 414 Introduction to React JS

Lecture 415 Installing Browser Tools

Lecture 416 Installing Node JS for React

Lecture 417 Install VS Code for React

Lecture 418 Hello World in React JS

Lecture 419 JSX in React JS

Section 28: React JS – Fundamentals

Lecture 420 What is a Component in React JS

Lecture 421 Create First React Component

Lecture 422 Stateless Component in React JS

Lecture 423 Props in React JS

Lecture 424 Events in React JS

Lecture 425 State in React JS

Lecture 426 Adding State to Note Component

Lecture 427 Refs in React JS

Section 29: React JS – Project: Sticky Notes

Lecture 428 Creating Board With Props in React JS

Lecture 429 Adding Child Elements to Board

Lecture 430 Updating & Deleting Notes

Lecture 431 Adding Notes

Lecture 432 Keys in React JS

Lecture 433 Mounting Components

Lecture 434 Setting Default Styles

Lecture 435 Updating Components

Lecture 436 Making React Components Draggable

Lecture 437 Setup & Install Create React App

Lecture 438 Building Scratch Pad With React JS

Section 30: Create React App – Getting Started

Lecture 439 Introduction to Create React App

Lecture 440 Prerequisites

Section 31: Create React App – What is React

Lecture 441 What is React

Lecture 442 Install React Tools on Chrome

Lecture 443 Install React Tools on Firefox

Section 32: Create React App – React Elements

Lecture 444 Install Create-React-App

Lecture 445 Project Generation

Lecture 446 Creating React Elements

Lecture 447 Using JSX to Refactor Elements

Section 33: Create React App – Components in React

Lecture 448 Creating React Components

Lecture 449 Creating Different Components

Lecture 450 Component Properties

Lecture 451 Working with Lists

Lecture 452 Adding Keys to List Items

Lecture 453 Display Images in React

Lecture 454 Working with Fragments

Section 34: Create React App – State in React Component

Lecture 455 Conditional Rendering

Lecture 456 Destructureing Arrays and Objects

Lecture 457 Working with useState Hook

Lecture 458 Working with useEffect

Lecture 459 Incorporating useReducer with React

Section 35: Create React App – React Asynchronous

Lecture 460 Using Hooks to Fetch Data

Lecture 461 Displaying Data from API with React

Lecture 462 Handling Loading States

Section 36: Create React App – Testing in React

Lecture 463 Testing Platform using Create React App

Lecture 464 Using Jest to Test Small Functions

Lecture 465 Testing Library in React

Lecture 466 Testing Hooks with React Testing Library

Section 37: Create React App – Working with React Routers

Lecture 467 Installing and Setting up React Routers

Lecture 468 React Routers Configuration

Lecture 469 Linking Components Together

Section 38: React Project – Introduction

Lecture 470 Introduction to React Project

Section 39: React Project – Setting-Up and Installation

Lecture 471 Installing Requirements

Lecture 472 Create React App Installation

Lecture 473 Clean up React Application

Lecture 474 Using External Components

Lecture 475 Installing Bootstrap CSS in React

Lecture 476 Customizing Bootstrap Components in React

Section 40: React Project – Developing Project

Lecture 477 Building your first Component

Lecture 478 Sub Component Hooks

Lecture 479 Adding Appointments into our Project

Lecture 480 Creating JSON Data for Demo Users

Lecture 481 Importing JSON Data into React Part-1

Section 41: React Project – Setting-up Sort and Search Functionality

Lecture 482 Sending Data to the Component

Lecture 483 Conditional Classes and useState Hooks

Section 42: React Project – Manipulation Data

Lecture 484 Working with useEffect and useCallback

Lecture 485 Deleting Data

Lecture 486 Searching Data with Filters

Lecture 487 Working with Sort

Lecture 488 Applying the Sort Algorithm

Lecture 489 Adding New Appointments

Anyone who is interested to learn Front-End Web development from Scratch,Anyone who wants to start career in web development

Course Information:

Udemy | English | 32h 3m | 17.74 GB
Created by: Fatah Gabrial

You Can See More Courses in the Developer >> Greetings from CourseDown.com