Skip to content

HTML & CSS · Level 3 — Professional

CSS architecture, performance and on-page technical SEO

CSS that stays healthy in a team and over time; modern CSS (container queries, :has, layers); performance and technical SEO.

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

  • Taught by Mahdi Mashaal

Who it is for

  • A front-end developer working on real projects

After this course

  • Architect the CSS of a large site
  • Improve a page’s Core Web Vitals

Before you start

  • Intermediate HTML & CSS

Syllabus

  1. 1CSS architectureComing
    1. Naming: BEM and its kinComing
    2. Cascade layersComing
    3. Utilities and tokensComing
  2. 2Advanced CSSComing
    1. Container queriesComing
    2. The :has selectorComing
    3. Logical properties for left and rightComing
  3. 3PerformanceComing
    1. The critical rendering pathComing
    2. Light images and fontsComing
    3. Core Web VitalsComing
  4. 4Technical on-page SEOComing
    1. Meta tags and structureComing
    2. Structured dataComing
    3. Bilingual sites and hreflangComing
  5. 5The level projectComing
    1. Project: a bilingual siteComing

The level project

A multi-page bilingual site with high performance scores

Passing this level means: works in a team’s codebase — Flame medal