📅 Duration: 4 Weeks (Twice a Week) 🖥 Format: Online Live Sessions + Hands-on Assignments
📌 Session 1:
Introduction to Web Development & How Websites Work
Setting Up Development Tools (VS Code, Live Server, Browser DevTools)
Writing Basic HTML (<html>, <head>, <body>, <title>)
<html>
<head>
<body>
<title>
HTML Elements & Attributes (<h1> to <h6>, <p>, <a>, <img>)
<h1>
<h6>
<p>
<a>
<img>
Mini Project: Simple Web Page with Text and Images
📌 Session 2:
Working with Lists (<ul>, <ol>, <li>) and Tables (<table>, <tr>, <td>)
<ul>
<ol>
<li>
<table>
<tr>
<td>
Forms & Input Fields (<input>, <textarea>, <select>, <button>)
<input>
<textarea>
<select>
<button>
Semantic HTML (<header>, <nav>, <section>, <article>, <footer>)
<header>
<nav>
<section>
<article>
<footer>
Mini Project: Contact Form & Navigation Menu
📌 Session 3:
Introduction to CSS & How It Works with HTML
CSS Syntax, Selectors, and Properties (class, id, div, span)
class
id
div
span
Working with Colors, Fonts, and Text Styling (color, font-family, font-size)
color
font-family
font-size
Mini Project: Styled Blog Page
📌 Session 4:
Box Model & Layout Basics (Margins, Padding, Borders)
CSS Display & Positioning (block, inline, absolute, relative, fixed)
block
inline
absolute
relative
fixed
Floating & Aligning Elements (float, clear, flexbox)
float
clear
flexbox
Mini Project: Two-Column Layout Web Page
📌 Session 5:
Introduction to Responsive Web Design
Media Queries for Mobile-Friendly Design
Using rem, em, vh, vw for Scalable Layouts
rem
em
vh
vw
Mini Project: Responsive Portfolio Page
📌 Session 6:
Introduction to CSS Grid & Flexbox
Grid vs. Flexbox: When to Use Each
Creating Multi-Column Layouts with CSS Grid
Mini Project: Responsive Product Page with Grid & Flexbox
📌 Session 7:
CSS Transitions & Animations (@keyframes, transition, transform)
@keyframes
transition
transform
Adding Hover Effects & Interactive Elements
Introduction to CSS Frameworks (Bootstrap, Tailwind)
Mini Project: Animated Landing Page
📌 Session 8:
Final Project Implementation & Debugging
Best Practices in HTML & CSS (Clean Code, Accessibility, SEO Basics)
Final Project Showcase & Code Review
Next Steps: JavaScript, Frontend Frameworks (React, Vue), UI/UX Design
