🧩 Week 2 – CSS3 Basics
🎯 Goal:
Understand the fundamentals of CSS3, master layout techniques using Box Model, Flexbox, and CSS Grid, and apply them in small real-world designs.
📅 Day 1: Introduction to CSS + Selectors
| Time | Topic |
|---|---|
| 00:00 – 00:15 | What is CSS? Inline, Internal, External |
| 00:15 – 00:30 | CSS Syntax and Selectors (Tag, Class, ID) |
| 00:30 – 01:00 | Practice: Color text, set background, font size |
| 01:00 – 01:30 | Hands-on: Style a sample resume webpage |
✅ Practice Task:
- Style your Day 6 resume with CSS: change colors, add spacing, apply fonts.
📅 Day 2: Colors, Fonts, and Units
| Time | Topic |
|---|---|
| 00:00 – 00:20 | Color Models: Hex, RGB, HSL |
| 00:20 – 00:40 | Web-safe fonts, Google Fonts |
| 00:40 – 01:00 | Units: px, %, em, rem, vh/vw |
| 01:00 – 01:30 | Practice: Typography style sheet |
✅ Practice Task:
- Create a typography playground with heading styles, font combinations, and spacing tests.
📅 Day 3: The Box Model & Borders
| Time | Topic |
|---|---|
| 00:00 – 00:15 | Content, Padding, Border, Margin |
| 00:15 – 00:30 | border-radius, border-style, border-color |
| 00:30 – 01:00 | box-sizing and overflow |
| 01:00 – 01:30 | Practice: Design a pricing card using box model |
✅ Practice Task:
- Make a profile card layout using padding, borders, and margin correctly.
📅 Day 4: Display, Position & Z-index
| Time | Topic |
|---|---|
| 00:00 – 00:15 | display: block, inline, inline-block, none |
| 00:15 – 00:30 | position: static, relative, absolute, fixed |
| 00:30 – 01:00 | z-index layering |
| 01:00 – 01:30 | Practice: Floating social media icons UI |
✅ Practice Task:
- Create a "sticky header" and a floating feedback button on page corner.
📅 Day 5: Flexbox Essentials
| Time | Topic |
|---|---|
| 00:00 – 00:15 | Flex container & items |
| 00:15 – 00:30 | Properties: justify-content, align-items |
| 00:30 – 01:00 | Responsive flex layouts |
| 01:00 – 01:30 | Practice: Flex-based navigation bar |
✅ Practice Task:
- Build a flex-based horizontal product card layout (image + text + price).
📅 Day 6: CSS Grid Basics
| Time | Topic |
|---|---|
| 00:00 – 00:15 | Grid container & items |
| 00:15 – 00:30 | grid-template-columns, rows, gap |
| 00:30 – 01:00 | Responsive grid layouts (auto-fit, minmax) |
| 01:00 – 01:30 | Practice: Gallery grid layout project |
✅ Mini Project:
- Create a responsive image gallery using Grid with 3-4 columns on desktop, 1-2 on mobile.
📅 Day 7: Recap + Mini Project + Quiz
| Time | Topic |
|---|---|
| 00:00 – 00:30 | Recap of all CSS concepts via quick slides |
| 00:30 – 01:00 | Final Project: Responsive Service Card Section (flex + grid) |
| 01:00 – 01:30 | Weekly Quiz (MCQs + CSS Output Questions) |
✅ Final Project:
- Build a 3-column responsive service section using Flexbox + Grid.
✅ Quiz Topics:
- Box model identification
- CSS output prediction
- Position vs Display
- Flex/Grid usage