📚 Exercises
🟦
Exercise 1 & 2 — Display Properties
block, inline, inline-block, none, visibility. Horizontal & vertical nav, dropdown, table layout.
Part A
🌊
Exercise 3 & 4 — Float Layouts
Image wrapping, 2-col & 3-col floats, clearfix, equal height, float grid, responsive floats.
Part B
📌
Exercise 5 & 6 — CSS Positioning
static, relative, absolute, fixed, sticky. Z-index, modal dialog, sticky nav, tooltips.
Part C
↔️
Exercise 7, 8 & 9 — Flexbox
flex-direction, wrap, justify-content, align-items, grow, shrink, basis, order. Navbar, cards, holy grail, form.
Part D
⊞
Exercise 10, 11 & 12 — CSS Grid
template-columns, rows, areas, gap. grid-column, grid-row, grid-area. fr, minmax, auto-fit, named lines.
Part E
📱
Exercise 13–16 — Media Queries
Breakpoints, min/max-width, orientation, hover. Mobile-first layout. Responsive images, srcset, picture. Dark mode, reduced motion, print.
Part F
🏗️ Layout Demos
📰
Magazine Float Layout
Task 2 & 11 — Multi-column magazine layout using floats. Sidebar, wrapped images. Responsive single column on mobile.
Task 2 & 11
🏆
Holy Grail Comparison
Task 7 — Same layout built 3 ways: Float, Flexbox, and CSS Grid. Side-by-side comparison with notes.
Task 7
📊
Admin Dashboard
Task 9 — CSS Grid structure with Flexbox internals. Stat cards, sidebar, responsive content area.
Task 9
💼
Portfolio — Mixed Techniques
Task 13 — Grid page structure, Flexbox galleries, CSS positioning for decorative elements.
Task 13
🔄
Responsive Demo Page
Task 10 — Live breakpoint indicator, layout changes, typography scaling, navigation pattern changes.
Task 10