-
<html>tag -
<head>section: title, meta tags, links -
<body>section: visible page content -
Creating a clean folder structure
Introduction to Web Development
What is Front-End Development?
How websites work (Client & Server)
Basics of Domains, Hosting & Browsers
Understanding Developer Tools
Setting up the development environment (VS Code, Extensions)
HTML5 – Structure & Content
Basics of HTML tags & structure
Headings, paragraphs, lists
Links & navigation
Images, tables, forms
Semantic HTML elements
Creating page structure
Mini Project: Personal Profile Page
0/14
CSS3 – Styling & Layouts
CSS syntax & selectors
Colors, units, typography
Box Model & display properties
Flexbox & Grid Layout
Responsive design with media queries
CSS Animations & transitions
Using Google Fonts & Icons
Mini Project: Responsive Landing Page
0/5
Bootstrap / Tailwind CSS
Bootstrap
Containers, rows, and columns
Components & utilities
Building responsive layouts
Tailwind CSS
Utility-first styling
Customizing themes
Responsive and hover states
Mini Project: Modern UI Website
JavaScript Essentials
JavaScript basics: Variables, data types
Operators & conditions
Functions & loops
Arrays & objects
DOM Manipulation
Event handling
Form validation
Mini Project: To-Do App
Advanced JavaScript Concepts
ES6+ features (let/const, arrow functions, spread, etc.)
JSON & APIs
Fetch API & AJAX
Error handling & debugging
LocalStorage
Mini Project: Weather App with API
Git & GitHub
Version control basics
Initializing a repository
Commit, push & pull
Branching & merging
Hosting websites on GitHub Pages
Mini Project: Uploading portfolio
UI/UX Basics for Developers
Design principles
Wireframes & mockups
Color psychology & typography
Layout composition
Accessibility (A11y)
Responsive Web Design
Mobile-first approach
Media queries
Fluid grids & adaptive layouts
Testing responsiveness
Mini Project: Multi-page responsive website
Front-End Framework Overview
Introduction to React.js
Components, props & states
Why modern frameworks matter
How to continue learning
Portfolio Development
Creating your personal portfolio website
Showcasing projects
Writing case studies
Freelancing & job preparation
Resume & LinkedIn optimization
Final Projects
Students must complete 2–3 full websites:
Personal Portfolio Website
Business Landing Page
JavaScript Web Application