01
HTML Document Structure
// ...DOCTYPE, head, body essentials
Understand document structureProper meta tags
UNITS
11 LESSONS
02
Semantic Elements Deep Dive
// ...Header, nav, main, article, section
Use semantic elements correctlyImprove accessibility
03
Forms & Input Validation
// ...Modern form patterns
Form accessibilityBuilt-in validationCustom validation UX
04
CSS Box Model Mastery
// ...Margin, padding, border deep dive
Box-sizingCollapsing marginsLayout debugging
05
Flexbox Layout System
// ...One-dimensional layouts
Flex container/itemsAlignmentCommon patterns
06
CSS Grid Layout System
// ...Two-dimensional layouts
Grid template areasAuto-fit/auto-fillResponsive grids
07
Responsive Design
// ...Mobile-first approach
Media queriesBreakpoint strategyFluid typography
08
CSS Custom Properties
// ...Theming and design tokens
CSS variablesTheme switchingDesign systems
09
Accessibility: Labels & ARIA
// ...WCAG fundamentals
Screen reader basicsARIA rolesAccessible forms
10
Accessibility: Keyboard Nav
// ...Keyboard-first design
Focus managementTab orderSkip links
11
CSS Animations
// ...Motion and micro-interactions
TransitionsKeyframe animationsPerformance
PROJECTS
2 BUILDS
Responsive Landing Page
6hMobile-first multi-breakpoint layout
FlexboxGridMedia Queries
REQUIREMENTS
- Mobile, tablet, desktop layouts
- CSS variables for theming
- Accessible navigation
Portfolio v1
8hPersonal static portfolio
HTML5CSSAccessibility
REQUIREMENTS
- Semantic HTML
- Responsive design
- WCAG AA compliance
INTERACTIVE
3 TOOLS
Flexbox Playground
Interactive flexbox property explorer
20 minGrid Builder
CSS Grid visual layout tool
20 minBox Model Visualizer
Interactive margin/padding editor
10 min