Skip to content
Contact
Back to learning library

Phase 02 · Foundations

HTML, CSS, Accessibility and Responsive Design

Create semantic, accessible and responsive websites with modern layout systems and practical quality checks.

Open repositoryWatch on YouTubeStarter branch

Company-level project

Modern Company Website

Begin from the starter branch, work through the modules and use the main branch as a completed reference after making a genuine attempt.

HTMLCSSFlexboxCSS GridAccessibility
Open starter projectView completed referenceAssessment resources

Recommended sequence

Complete the modules at your own pace.

Every module links to the exact GitHub resource folder and its stable code-reference tag.

  1. 01

    Semantic HTML and Accessible Forms

    Study the resources, complete the practical lab, validate the result and record any limitation.

    Code referencep02-module-01-semantic-html-and-accessible-forms
    ResourcesVideo
  2. 02

    CSS Cascade, Box Model and Design Systems

    Study the resources, complete the practical lab, validate the result and record any limitation.

    Code referencep02-module-02-css-cascade-box-model-and-design-systems
    ResourcesVideo
  3. 03

    Flexbox, Grid and Responsive Design

    Study the resources, complete the practical lab, validate the result and record any limitation.

    Code referencep02-module-03-flexbox-grid-and-responsive-design
    ResourcesVideo
  4. 04

    Accessibility, Testing, Performance and Deployment

    Study the resources, complete the practical lab, validate the result and record any limitation.

    Code referencep02-module-04-accessibility-testing-performance-and-deployment
    ResourcesVideo

Project review

Build first. Compare second. Explain every decision.

Build from starter
Run validation
Compare with main
Document limitations
Explain the architecture