Skip to content

HTML & CSS · Level 2 — Intermediate

Semantic HTML, Flexbox, Grid and responsive design

Semantic, accessible structure; professional layout with Flexbox and Grid; responsive design; variables and animation in CSS.

This course’s lessons are being written; see the syllabus and plan ahead.

  • Taught by Mahdi Mashaal

Who it is for

  • Someone past the beginner level or already building simple pages

After this course

  • Build responsive multi-section pages with Grid and Flexbox
  • Build pages screen readers and search engines understand

Before you start

  • HTML & CSS for beginners

Syllabus

  1. 1Semantic HTML and accessibilityComing
    1. Page landmarks: header, nav, main, footerComing
    2. Accessible formsComing
    3. ARIA basicsComing
  2. 2Flexbox in fullComing
    1. Axes and directionComing
    2. grow, shrink and basisComing
    3. Common flex patternsComing
  3. 3GridComing
    1. Columns, rows and gapsComing
    2. Named areasComing
    3. A responsive grid without media queriesComing
  4. 4Responsive designComing
    1. Mobile firstComing
    2. Media queriesComing
    3. Responsive images with srcsetComing
  5. 5Modern CSSComing
    1. CSS custom propertiesComing
    2. Transitions and animationComing
    3. Right-to-left and bilingual layoutsComing
  6. 6The level projectComing
    1. Project: a landing pageComing

The level project

A product landing page, responsive and accessible

Passing this level means: ships a small real project — Ember medal