HTML and CSS Roadmap

A step-by-step HTML and CSS roadmap: what to learn in order, the related skills and the best places to learn each step.

The stack, end to end

  • Fundamentals: HTTP and HTTPS, DNS, Browsers, Client and server
  • Frontend: HTML, Semantic markup, Forms, Accessibility basics, CSS, Flexbox, CSS Grid, Responsive design, Tailwind CSS, Core Web Vitals, Accessibility, Image optimisation, Technical SEO

  1. How the internet and the web work

    Suggested pace: Start here

    Before writing code, understand what happens when you open a web page: browsers, servers, DNS, HTTP requests and responses, and what a URL is made of. Everything else you learn sits on top of this.

    Skills

    • HTTP and HTTPS
    • DNS
    • Browsers
    • Client and server

    Tips

    • Open your browser developer tools, go to the Network tab and watch the requests a page makes.

    Where to learn

  2. HTML: structure of a web page

    Suggested pace: Next

    HTML describes the content of a page: headings, paragraphs, links, images, lists, forms and tables. Learn semantic tags and accessibility basics so pages make sense to people, search engines and screen readers.

    Skills

    • HTML
    • Semantic markup
    • Forms
    • Accessibility basics

    Tips

    • Build a simple page with no styling first. If it reads well plain, the structure is right.

    Where to learn

  3. CSS: layout and design

    Suggested pace: Then

    CSS controls how a page looks: colours, fonts, spacing, Flexbox and Grid layouts and responsive design for phones and desktops. Add a utility framework such as Tailwind once the basics are clear.

    Skills

    • CSS
    • Flexbox
    • CSS Grid
    • Responsive design
    • Tailwind CSS

    Tips

    • Test every page at phone width first. Most visitors are on phones.

    Where to learn

  4. Performance, accessibility and SEO

    Suggested pace: After that

    Fast, accessible pages keep visitors and rank better. Learn Core Web Vitals, image and script loading, keyboard and screen-reader basics, and the metadata search engines read.

    Skills

    • Core Web Vitals
    • Accessibility
    • Image optimisation
    • Technical SEO

    Tips

    • Run Lighthouse in Chrome on your own project and fix the first three issues it lists.

    Where to learn

Frequently asked questions

Where should I start with HTML and CSS?

Start at step 1 and work down in order, because later steps build on earlier ones. If you are signed in, the roadmap compares your resume with each step and marks where you could start.

Is HTML and CSS worth learning?

Check how many job adverts in your area mention HTML and CSS, and whether it fits the kind of work you want. This roadmap shows what to learn; the Browse jobs page shows what employers are asking for.

How do I know I am ready to apply?

When you can build a small project from start to finish without copying a tutorial, and explain why you made your choices. Apply while you keep learning; you do not need to know everything.