Front End Web Development
Course Level
Beginner to Advanced
Duration
6 Months
1.1 Internet & Web Basics
1.2 Client-Server Architecture
1.3 HTTP vs HTTPS
1.4 Domain Names & DNS
1.2 Client-Server Architecture
1.3 HTTP vs HTTPS
1.4 Domain Names & DNS
2.1 Installing VS Code, Git, and Node.js
2.2 Understanding File Structure & Paths
2.3 Introduction to Git & Version Control
2.2 Understanding File Structure & Paths
2.3 Introduction to Git & Version Control
3.1 HTML Syntax & Document Structure (DOCTYPE html, head, body)
3.2 Common Tags (h1, p, a, img, br, hr)
3.3 HTML5 Features & Best Practices
3.2 Common Tags (h1, p, a, img, br, hr)
3.3 HTML5 Features & Best Practices
4.1 Form Elements (form, input, select, button)
4.2 Input Validations (required, pattern, min/max, maxlength)
4.3 Secure Form Handling
4.2 Input Validations (required, pattern, min/max, maxlength)
4.3 Secure Form Handling
5.1 Tables (table, tr, td, th, thead, tbody)
5.2 Semantic Elements (header, footer, article, section)
5.3 SEO & Accessibility Considerations
5.2 Semantic Elements (header, footer, article, section)
5.3 SEO & Accessibility Considerations
6.1 CSS Selectors & Properties
6.2 Box Model: margin, padding, border, content
6.3 Display Properties: inline, block, flex, grid
6.2 Box Model: margin, padding, border, content
6.3 Display Properties: inline, block, flex, grid
7.1 Flexbox: justify-content, align-items, flex-grow, flex-shrink
7.2 Grid System: Defining Columns & Rows
7.3 Responsive Design & Media Queries
7.2 Grid System: Defining Columns & Rows
7.3 Responsive Design & Media Queries
8.1 Animations (@keyframes, animation-duration)
8.2 Transitions (hover, focus, active)
8.3 CSS Preprocessors: SASS & LESS
8.2 Transitions (hover, focus, active)
8.3 CSS Preprocessors: SASS & LESS
9.1 Variables (let, const, var)
9.2 Data Types & Type Conversion
9.3 Functions & Scopes
9.2 Data Types & Type Conversion
9.3 Functions & Scopes
10.1 Selecting Elements (getElementById, querySelector)
10.2 Event Listeners (onclick, addEventListener)
10.3 Creating & Deleting Elements Dynamically
10.2 Event Listeners (onclick, addEventListener)
10.3 Creating & Deleting Elements Dynamically
11.1 ES6+ Features: Arrow Functions, Template Literals
11.2 Closures & Callback Functions
11.3 Asynchronous JavaScript (Promises, async/await)
11.2 Closures & Callback Functions
11.3 Asynchronous JavaScript (Promises, async/await)
12.1 Fetch API & Handling JSON
12.2 LocalStorage & SessionStorage
12.3 Introduction to WebSockets
12.2 LocalStorage & SessionStorage
12.3 Introduction to WebSockets
13.1 Introduction to Bootstrap 5
13.2 Grid System & Breakpoints
13.2 Grid System & Breakpoints
14.1 Navbar, Modals, Forms, Cards
14.2 Overriding Bootstrap Styles
14.2 Overriding Bootstrap Styles
15.1 Bootstrap Theming
15.2 Creating Custom Components
15.2 Creating Custom Components
16.1 Developing a Complete Responsive Website
16.2 Deployment using GitHub Pages, Netlify, or Vercel
16.3 Best Coding Practices & Documentation
16.2 Deployment using GitHub Pages, Netlify, or Vercel
16.3 Best Coding Practices & Documentation
