Skip to content

Academy · Five levels

Learn HTML & CSS

Every page on the web is built with HTML and shaped with CSS. This road starts at “how the web works” and, across five levels, reaches building and leading a design system — with live practice in every lesson.

Start at level one My weekly plan
  • Taught by Mahdi Mashaal
  • html tutorial
  • css tutorial
  • learn html
  • learn css

The road: five levels to mastery

Each level is a course closed by a project; each level passed carries its own Mashaal medal. Start wherever you are.

  1. Level 1 · Beginner · Spark medal

    HTML & CSS for beginners

    From “how the web works” to your first personal page: structure, text, links, images, forms, and the basics of CSS and layout — every lesson with live practice and a quiz.

    • Start: the web and your first page
    • Links, images, lists and tables
    • Forms
    • CSS basics
    • Layout
    • The level project
    Ready to learn6 of 20 lessons readySee the course

  2. Level 2 · Intermediate · Ember medal

    Intermediate HTML & CSS

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

    • Semantic HTML and accessibility
    • Flexbox in full
    • Grid
    • Responsive design
    • Modern CSS
    • The level project
    Syllabus ready; lessons on the way16 lessons in the syllabusSee the course

  3. Level 3 · Professional · Flame medal

    Professional HTML & CSS

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

    • CSS architecture
    • Advanced CSS
    • Performance
    • Technical on-page SEO
    • The level project
    Syllabus ready; lessons on the way13 lessons in the syllabusSee the course

  4. Level 4 · Master & Senior · Brazier medal

    HTML & CSS: master and senior

    Building and keeping a design system, accessibility audits, browser compatibility, build tooling and front-end technical leadership.

    • Design systems
    • Professional accessibility
    • Front-end engineering
    • The level project
    Syllabus ready; lessons on the way9 lessons in the syllabusSee the course

  5. Level 5 · Grandmaster · Torch medal

    HTML & CSS grandmaster

    The level for those who teach: mentoring, review, front-end architecture at scale and contributing to shared knowledge.

    • Mentoring
    • Architecture at scale
    • Capstone
    Syllabus ready; lessons on the way5 lessons in the syllabusSee the course