Front-End Web Development Training

About Course

Learn Front-End Web Development by building a fully functional Note App with Vanilla JavaScript.

Setting up a clean and scalable project structure.
Creating a responsive user interface using HTML, CSS, and Bootstrap for seamless user experience.
Implementing CRUD (Create, Read, Update, Delete) operations for complete app functionality.
Adding interactivity and dynamic features using modern JavaScript techniques.
Includes step-by-step video tutorials and exercise files for hands-on practice and reference.
Gain practical tips and best practices for JavaScript development and project structuring.
Enhance your JavaScript skills by building a real-world application.
Strengthen your understanding of DOM manipulation and front-end development techniques.
Add a professional-grade project to your portfolio to showcase your Front-End Web Development expertise.

(June 2023 – Update) Bootstrap Section Updated to Bootstrap 5.3

This course now covers the latest Bootstrap 5.3, keeping your Front-End Web Development skills up to date.
Learn the newest features, utilities, and components introduced in Bootstrap 5.3.

Course Overview: Front-End Web Development – Complete Guide (Step by Step) [Updated 2024]

This comprehensive course teaches Front-End Web Development from scratch, designed for beginners and those looking to refine their skills.

What You’ll Learn:

HTML5 & CSS3
Master the foundations of Front-End Web Development by learning to structure and style websites. Build responsive designs and layouts for modern devices.
JavaScript & ES6+
Add interactivity and dynamic features to websites using modern JavaScript techniques (ECMAScript 6 and later). Learn JavaScript step-by-step, from basics to advanced topics.
Bootstrap 5
Harness the power of Bootstrap 5, the most popular CSS framework, to design responsive, mobile-first websites.

Work on three live projects, including:
- EMS Web App: Build an Employee Management System with Bootstrap 5.
- Blog App: Create a fully functional blog platform for all levels.
- Professional Website: Design and develop a high-quality, professional-grade website.
Angular
Get started with Angular by integrating it into HTML5 and CSS3 applications. Learn components, data binding, and routing to build dynamic, single-page web applications.
React & Bootstrap
Master React with the Create React App tool. Build a practical React web application that manages user data via an API. Learn how to implement CRUD functionality (Create, Read, Update, Delete) within your React app.

Why Take This Course?

Comprehensive Curriculum: Covers everything you need to know about Front-End Web Development, from basics to advanced frameworks.
Hands-On Projects: Gain practical experience with real-world projects in HTML5, CSS3, JavaScript, Bootstrap, Angular, and React.
Step-by-Step Tutorials: Detailed and beginner-friendly explanations for every topic, making it easy to follow along.
Portfolio-Ready Projects: Build professional applications to showcase your skills.
Expert Support: Access to the Q&A section for personalized help and guidance.

Enroll now and take the first step toward mastering Front-End Web Development. Whether you’re a beginner or looking to upgrade, this course is going to equip you with the knowledge and hands-on experience to create stunning, interactive websites.

Build responsive websites using HTML5 and CSS3, mastering modern web design techniques and layout principles.
Write clean, efficient JavaScript code to create interactive web applications with a focus on ES6+ features.
Design stunning, mobile-first websites using Bootstrap 5 components, utilities, and advanced customization techniques.
Develop dynamic single-page applications using Angular, focusing on components, services, and data binding.
Create scalable and interactive user interfaces with React, mastering hooks, props, and state management.
Understand the fundamentals of web development, including semantic HTML, CSS animations, and DOM manipulation.
Optimize websites for performance and accessibility, ensuring cross-browser compatibility and SEO best practices.
Build reusable UI components and design systems with Bootstrap 5, Angular, and React for professional-grade projects.
Learn to integrate APIs and fetch real-time data in modern JavaScript frameworks like Angular and React.
Gain hands-on experience with front-end project workflows, including complex and deployment techniques.

Course Content

Introduction
Master the essentials of Front-End web development with HTML5, CSS3, Modern JavaScript, Bootstrap 5, Angular, and React

Choosing the right Browser
Choosing the right cooding editor

HTML 5 – Introduction

HTML 5 – Text Formatting in HTML

HTML Syntax
Paragraph Tag in Practical
Headings in HTML
Bolds and Italics in HTML
Lists in HTML
Types of Elements
Quotes in HTML
Date and Time in HTML
Kbd Code Pre and Br Tag
Subscript Superscript and Small Tag
Text Formatting Exercise

HTML 5 – HTML Essentials

Attributes in HTML
ARIA in HTML
Blank Spaces and Comments
Uppercase and Lowercase
Types of Tags
Non Breaking Space
Links and Anchor Tags
Absolute URLs
Relative URLs
Organizing Files
Naming Files
HTML Navigation
HTML Essentials Coding Exercise

HTML 5 – Images in HTML

HTML 5 – Multimedia in HTML

HTML 5 – Content in HTML

HTML 5 – Form Elements in HTML

Form Elements
Input Types in Forms
Phone and Password Field
URL and Number Field
Date Time Month Week and More
Radio Buttons
Checkbox Fields
Search and Upload Fields
The Color Field
Dropdown Fields in Forms
Message and Range Field
Range Fancy Button Hidden Field and Reset
Wrapping Form Fields
Coding Exercise to Create a Simple Login Page

HTML 5 – Tables in HTML

CSS 3 – Getting Started with CSS 3

CSS 3 – Essentials

CSS Core Concepts
Color Property Values
CSS Selectors
Class and ID in CSS
Live Example of Class and ID
Descendant Selectors in CSS
Grouping Selectors
Inheritance in CSS
Pseudo Classes in CSS
CSS Selectors and Pseudo Coding Exercise

CSS 3 – Understanding Box Model in CSS

CSS 3 – Typography in CSS

CSS 3 – Layouts in CSS

CSS 3 – Flexbox and Grid in CSS

Advanced CSS Selections

HTML 5 & CSS 3 Project – Building a Website

The Website Structure
Installing Google Fonts for Website
Styling The Site Header
Building The Navigation Bar
Creating a Responsive Image Slider
Styling The Content Holder
Styling The Footer
Creating and Styling Services and Products Page
Creating and Styling About Page
Creating and Styling Contact Page

HTML 5 & CSS 3 – Responsive Web Design

Modern JavaScript – Getting Started

Modern JavaScript – Variables, Scopes and More

What are Variables
The var Variable
Variable Scope
Let and Const Variables
Check Variable Scope Exercise
The Data Types
Data Types Coding Exercise 1
Assignment and Comparison Operators
Assignment and Comparison Operators Exercise
The Math Operators

Modern JavaScript – Working with Arrays

Modern JavaScript – Working with Objects

Understanding Objects
JavaScript Objects Practical
Accessing Objects
Creating Multiple Objects Coding Exercise
Accessing Object Properties
Accessing Object Properties Coding Exercise
Object Methods
Classes and Objects Blueprints
Global Objects
Creating Additional Objects with Classes

Modern JavaScript – Functions and Methods

Functions and Methods
Create Different Types of Functions Coding Exercise
Creating an Element with Modern JavaScript
Creating Elements Coding Exercise 1
The New Arrow Function
Arrow Function Scope and This
Building a Tax Calculator Function
Using a Built in JavaScript Function
Creating a HTML Output
Creating a Web Page with Modern JavaScript
Logical Operators in Modern JavaScript
Switch Case Statements
The Loops in Modern JavaScript
Loops with Objects Coding Exercise 1
The map() Array Method
Using map() Array Method Coding Exercise
Let’s Build a Complex Function

Modern JavaScript – String Outputs

Modern JavaScript – DOM Document Object Model and Events

Modern JavaScript Project – Weather App

Modern JavaScript Project – The Note App

Bootstrap 5 – Getting Started

Bootstrap 5 – Layouts

Breakpoints in Bootstrap 5
Container Types
Grid
Grid Options
Nesting Rows and Columns
Column Vertical Alignment
Column Horizontal Alignment
Column Wrapping and Column Breaks
Reordering and Offsetting Columns
Margin Utilities
Gutters
Horizontal Gutters
Vertical Gutters
Horizontal and Vertical Gutters

Bootstrap 5 – Contents

Bootstrap 5 – Forms

Forms in Bootstrap
Form Control
Checks and Radios
Range
Input Groups
Floating Labels
Form Layout
Horizontal Forms
Auto Sizing Forms
Inline Forms
Form Validation

Bootstrap 5 – Components

Accordions
Alerts
Dismissing Alerts
Badges
Breadcrumb
Buttons
Button Group
Button Toolbar
Button Group Alteration
Card
Card Sizing
Card Navigation
Card Images
Card Styles
Carousel
Carousel Controls
Carousel Indicators
Carousel Caption
Carousel Fade Effect
Carousel Timing
Disable Carousel Touch Swiping
Carousel Dark Variant
(Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method
Close Button
(Bootstrap 5.3 Update) Deprecation of “btn-close-white” & The New Method
Collapse
Horizontal Collapse
Multiple Targets
Dropdowns
Split Button
Dropdown Sizing
Dark Dropdowns
(Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method
Dropdown Directions
Dropup and Dropdown Alignment
Menu Items
Menu Alignment
Dropdown Alignment Options
Menu Contents
Dropdown Forms
Dropdown Options
Dropdown Auto Close
List Group
List Group Links and Buttons
List Group Flush
Numbered List
Horizontal List Groups
Contextual List Group Classes
List Group with Badges
List Group with Custom Content
List Group Checkboxes and Radios
List Group JavaScript Tabs
Modals
Static Backdrop
Scrolling Long Content
Vertically Centered
Modal Tooltips and Popovers
Using Grid system in Modal
Varying Modal Content
Toggle Between Modals
Optional Modal Sizes
Navbar
(Bootstrap 5.3 Update) The All New “bg-body-tertiary”
Navigation Links
Navbar Dropdown
Navbar Nested Dropdown
Navbar Forms
Navbar Input Group
Navbar Plain Text
Navbar Colors
(Bootstrap 5.3 Update) The Navbar Dark-Mode
(Bootstrap 5.3 Update) The New Navbar Color
Navbar Containers
Navbar Placement
Navbar Scrolling
Off Canvas Navbar
Navs and Tabs
Nav Flex Utilities
Nav Tabs and Pills with Dropdown
Tabs and Pills Behaviors
Offcanvas In-Depth
(Bootstrap 5.3 Update) Offcanvas Dark-Mode
Offcanvas Scrolling
Offcanvas Placement
Pagination
Placeholders
Popovers In-Depth
Popover Direction
Custom Popovers
Dismiss on next click
Enable Popover on Hover
Progress Bars
Progress bar height and Background
Stripes and Animation
(Bootstrap 5.3 Update) The New Progress Bar
(Bootstrap 5.3 Update) Progress Bar Height
(Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars
(Bootstrap 5.3 Update) Multiple Stacked Progress Bars
(Bootstrap 5.3 Update) Stripped and Animated Progress Bars
Scrollspy 11:16 Spinners
Growing Spinner
Spinner Alignment
Spinner Sizes
Spinner in Buttons
Toasts
Toast Alignment
Tooltips In-Depth
Custom Tooltip
Tooltip Directions
HTML in Tooltip
Tooltip on Disabled Elements

Bootstrap 5 – Helpers

Clearfix
Colors and Background
Colored Links
(Bootstrap 5.3 Update) Link Utilities
(Bootstrap 5.3 Update) Focus Rings
(Bootstrap 5.3 Update) Icon Links
Ratios
Positions
Stacks
Visually Hidden
Stretched Link
Text Truncate
Vertical Rule

Bootstrap 5 – Utilities

Backgrounds
(Bootstrap 5.3 Update) Additional Background Colors
Background Gradients
Background Opacity
Borders
Border Color
Border Opacity
Border Width
Border Radius
Rounded Border Sizes
Text Colors
Text Opacity
Display Inline and Block
Hiding Elements
Display in Print
Flex
Flex Direction
Flex Justify Content
Flex Align Items
Flex Align Self
Flex Fill
Flex Grow and Shrink
Flex Auto Margins
Flex with Align Items
Flex Wrap
Flex Order
Flex Align Content
Flex Media Object
Responsive Float
Interactions
(Bootstrap 5.3 Update) Link Opacity
(Bootstrap 5.3 Update) Link Underlines
(Bootstrap 5.3 Update) Colored Links
(Bootstrap 5.3 Update) Object Fit
(Bootstrap 5.3 Update) Responsive Object Fit
Opacity
Overflow
Position
Position Center Elements
Position Center Elements within Edges
Position Examples Part 1
Position Example Part 2
Shadow
Sizing
Spacing
Gap
Text Alignment
Text Wrap
Text Break
Text Transform
Font Size
Font weights and italics
Line Height
Monoscope
Reset Color
Text Decoration
Vertical Alignment
Visibility
(Bootstrap 5.3 Update) The Z-Index
Bootstrap Icons

Bootstrap 5 Project 1 -EMS APP

Introduction to EMS2.0 Project
Creating the Login Page
Creating Dash Nav and Brand Logo
Creating the Navbar Toggler
Creating Navbar Items
Creating Form Fields for Navbar
Creating Cards for Dashboard
Creating Employees List Page
Creating Employees Page Sidebar
Creating Employees List Table
Creating Add Employee Modal
Creating Add Employee Modal Form
Creating Details Modal for Employee List
Creating Edit Details for Employee List
Creating Delete Modal for Employees List
Creating Jobs List Page
Updating the Job List Page
Creating Job List Table
Creating Add Job Modal
Creating Details Modal for Job
Creating Edit Details for Job Modal
Creating Delete Modal for Job List

Bootstrap 5 Project – BLOG2.0 App

Blog Project Introduction
What’s Required for Template Building
Creating The Index File
Creating The Navbar and Brand Logo
Creating Navbar Toggler
Creating Navbar Items
Creating The Search Field
Creating The Home Banner
Creating The Subscribe Modal
Creating Home Posts Section
Creating Blog Footer
Adding Custom Effects To Navbar
Creating Default Page Header
Creating Post Loop For Default Page
Creating Sidebar Subscribe Form
Creating Categories and Archive Widgets
Creating Page and Post Content Area
Creating Comment Form for Posts
Creating The Search Page
Linking Everything Together

Bootstrap 5 Project – Professional Website

Introduction To Project
Setting Up Project Folder
Creating Navbar and Brand
Creating Navbar Toggler
Creating Nav Items
Creating Navbar Search Field
Creating Navbar Sign-Up and Login Buttons
Creating The Banner Text
Adding Banner Image
Creating Site Feature Set
Creating Course Loop Header
Creating Course Loop Filter
Creating Course Loop Header
Creating Single Course List Item
Creating Duplicates of Course Items
Creating Home Page Content
Adding Home Content Image
Creating Subscribe Area
Creating Main Footer
Creating Footer Address
Creating Link Items For Footer
Creating Social Icons
Creating Copyright Info
Creating Sticky Footer
Creating About Page Header
Creating About Content Section
Creating The Courses Page
Creating Single Course Page And Breadcrumb
Creating Course Header Description and Meta Data
Creating Course Meta Data
Adding Icons To Course Meta Data
Adding Course Buttons
Creating Single Course Image
Creating Single Course Contents
Creating FAQ Header
Creating FAQ List
Creating Post Question Form
Creating Blog Page and Header
Creating Blog Posts List
Creating Blog Sidebar
Creating Subscribe Modal
Creating The Subscribe Form
Creating Single Post Page
Creating Contact Page Header
Creating Contact Page Cards
Creating Contact Modal
Linking Everything Together

Angular – Introduction

Angular – Getting Started

Angular Components and Styles

Angular – Interpolation, Binding & Pipes

String Interpolation in Angular
[Assignment] String Interpolation
[Solution] String Interpolation Solution
Data Binding in Angular
Ng If and Else Directives in Angular
[Assignment] Ng If and Else
[Solution] Ng If and Else
Event Binding in Angular
Switchable Events in Angular
Modifying Data with Switch in Events
Pipes in Angular
Creating a Custom Pipe in Angular

Angular – Input Decorator, Services, HTTP Clients

React – Introduction

What is React ?

React – Elements

React – Components

React – State in React Components

React – React Asynchronous

React – Testing in React

React – Working with React Routers

React Project

React Project – Setting up and Installation

React Project – Developing Project

React – Setting up Sort and Search Functionality

React – Manipulation Data

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Introduction Master the essentials of Front-End web development with HTML5, CSS3, Modern JavaScript, Bootstrap 5, Angular, and React

Choosing the right Browser

Choosing the right cooding editor

HTML 5 – Introduction

Choosing the right browser

Choosing the right code editor

Download and Install VS Code

What is HTML

What’s the web made of ?

What do HTML, CSS, and JavaScript do ?

HTML 5 – Text Formatting in HTML

HTML Syntax

Paragraph Tag in Practical

Headings in HTML

Bolds and Italics in HTML

Lists in HTML

Types of Elements

Quotes in HTML

Date and Time in HTML

Kbd Code Pre and Br Tag

Subscript Superscript and Small Tag

Text Formatting Exercise

HTML 5 – HTML Essentials

Attributes in HTML

ARIA in HTML

Blank Spaces and Comments

Uppercase and Lowercase

Types of Tags

Non Breaking Space

Links and Anchor Tags

Absolute URLs

Relative URLs

Organizing Files

Naming Files

HTML Navigation

HTML Essentials Coding Exercise

HTML 5 – Images in HTML

Images in HTML

Image File Formats

Responsive Images in HTML

Responsive Images Based on Width

Responsive Picture Tag

Figure and Fig-Caption Tag

Images Coding Exercise

HTML 5 – Multimedia in HTML

Audio in HTML

Video in HTML

Video Captions and Subtitles

Embedding Videos with iFrame

Multimedia Coding Exercise

HTML 5 – Content in HTML

Languages in HTML

The Div and The Span Tag

The Document Structure

Inside the Head Tag

Inside the Body Tag

Creating a Basic Page

Content in HTML Coding Exercise

HTML 5 – Form Elements in HTML

Form Elements

Input Types in Forms

Phone and Password Field

URL and Number Field

Date Time Month Week and More

Radio Buttons

Checkbox Fields

Search and Upload Fields

The Color Field

Dropdown Fields in Forms

Message and Range Field

Range Fancy Button Hidden Field and Reset

Wrapping Form Fields

Coding Exercise to Create a Simple Login Page

HTML 5 – Tables in HTML

Tables in HTML

Working with Tables in HTML

Introduction
Master the essentials of Front-End web development with HTML5, CSS3, Modern JavaScript, Bootstrap 5, Angular, and React