🧩 Week 3: CSS3 Deep Dive + Responsive Web Design

🔷 Day 1: Advanced CSS Selectors

• Descendant, Child, Sibling selectors
• Attribute selectors
• Pseudo-classes and pseudo-elements (`:hover`, `:nth-child`, `::before`, `::after`)
• Practice: Styling a blog layout with advanced selectors

🔷 Day 2: Box Model + Positioning

• Box Model: content, padding, border, margin
• Overflow and visibility
• CSS Positioning: static, relative, absolute, fixed, sticky
• Practice: Card-based layout with layered elements

🔷 Day 3: Flexbox Layout System

• Flex container and items
• Flex direction, wrap, justify-content, align-items
• Creating flexible grids and layouts
• Practice: Responsive navbar and pricing cards

🔷 Day 4: CSS Grid Layout

• Grid container, columns, rows
• Grid-template-areas and item placement
• Grid gap, alignment, nesting
• Practice: Magazine-style layout using Grid

🔷 Day 5: Responsive Design Principles

• Media queries (min/max width)
• Mobile-first vs desktop-first
• Units: %, em, rem, vh, vw
• Practice: Responsive landing page

🔷 Day 6: Bootstrap Framework Introduction

• Installing Bootstrap via CDN
• Grid system, typography, and components (cards, buttons, alerts)
• Navbar, carousel, modals
• Practice: Bootstrap Portfolio Template

🔷 Day 7: Weekly Recap + Quiz + Assignment

• Quiz: CSS + Responsive Design MCQs
• Assignment: Build a responsive portfolio page using Bootstrap and CSS Grid/Flexbox

---

🧩 Week 4: Final Frontend Challenge + Mini Projects

🔷 Day 1: Review: HTML, CSS, Bootstrap Recap

• Consolidate understanding
• Analyze previous code
• Code cleanup and refactoring

🔷 Day 2: Frontend Challenge #1

• Problem: Design a responsive product landing page (using Grid + Flexbox)
• Deadline: Same day
• Peer review + feedback session

🔷 Day 3: Frontend Challenge #2

• Problem: Build a restaurant site homepage (Bootstrap only)
• Practice real-world layout structuring

🔷 Day 4: Project: Personal Portfolio (Start)

• Setup GitHub repo
• Create sections: Hero, About, Projects, Contact
• Use Flexbox or Grid manually

🔷 Day 5: Project: Personal Portfolio (Responsive Design)

• Apply media queries
• Test across devices
• Add form validations

🔷 Day 6: Portfolio Polish + Hosting

• Add animations (transitions, keyframes)
• Connect GitHub Pages or Netlify for live hosting

🔷 Day 7: Submission + Code Review

• Submit link to hosted portfolio
• Instructor + peer feedback
• Award badges for top performers

---