Back to learning
Web development

HTML & Web Foundations

Learn how the web works and build your first real web pages using HTML and CSS, from a blank file to a published responsive page.

  • Beginner
  • About 4 weeks
  • 9 milestones
  • 36 steps
HTMLCSS
Start this journey
What you will have builtAt the end, they will have built and published a responsive multi-section web page using HTML and CSS.Start this journey

What this asks of you

Every figure below is read from the journey itself, not written about it.

BeginnerNo prior experience needed
About 4 weeksAn estimate, not a deadline
9 milestonesEach one claims a capability
36 stepsShort, and every one is built

What you will be able to do

Every milestone claims one engineering capability. You reach it by building something, not by finishing a chapter.

How the Web WorksExplain, at a beginner level, how a web page gets from a web server to a browser and how HTML fits into that process.Before writing HTML, learners need a simple mental model of what the web is, what a browser does, how a browser communicates with a web server, and why HTML is involved. This gives meaning to the code they are about to write instead of presenting HTML as an isolated language.
5 steps
Show the 5 steps
  • What Is the Web?

    Understand what the Web is and how websites, web pages, and web applications relate to one another.

  • What Is a Browser?

    Understand what a web browser does and how it turns web resources into something you can see and interact with.

  • How Websites Reach Your Browser

    How Websites Reach Your Browser

  • From Markup to a Web Page

    Understand what a markup language does and how HTML uses elements to describe the structure and meaning of content on a web page.

  • Create Your First HTML File

    Create a basic HTML file, open it in a browser, and make a change that you can see immediately on the page.

Build Your First PagesBuild a simple web page using common HTML elements to organise and present content.The learner now understands what HTML is and has created a basic HTML document. The next step is to learn the most useful HTML elements by using them to build increasingly complete pages.
5 steps
Show the 5 steps
  • Add Headings and Paragraphs

    Use headings and paragraphs to organise the content of a web page into a clear reading structure.

  • Create Links and Navigation

    Create multiple HTML pages and connect them with links so a visitor can move between pages.

  • Add More Meaning with HTML Elements

    Use common HTML elements and attributes to describe different kinds of content and give the browser additional information about those elements.

  • Organise Related Content

    Use HTML containers to group related content into clear sections and make a page easier to understand.

  • Build a Complete Information Page

    Combine headings, paragraphs, links, lists, images, attributes, and semantic grouping to build a complete, well-structured HTML page.

Make Pages More MeaningfulChoose semantic HTML elements that accurately describe the purpose and role of different parts of a web page.The learner can already build a complete page using basic HTML elements and group related content with <main> and <section>. Now they need to understand that HTML can communicate the role of different parts of a page, not just how content is grouped. This prepares them for building pages that are easier for browsers, accessibility tools, search engines, and other developers to understand.
4 steps
Show the 4 steps
  • Give the Page a Clear Structure

    Use semantic elements such as <header>, <nav>, <main>, and <footer> to describe the major parts of a web page.

  • Choose the Right Semantic Container

    Distinguish between <section>, <article>, and <aside> and choose the element that best describes a group of content.

  • Make Content Easier to Navigate

    Use semantic headings and document structure to create a clear hierarchy that helps people understand and navigate a page.

  • Check Your HTML Structure

    Review an HTML page, identify structural problems, and improve its semantic structure without changing the page's content.

Make Pages Interactive with FormsBuild a basic HTML form that collects user input using appropriate form controls and labels.The learner can now structure information-rich pages with meaningful HTML. Forms introduce a new kind of page structure: information that flows from the visitor into the page. Before CSS or JavaScript, HTML already provides the structure needed to collect names, choices, messages, and other information.
4 steps
Show the 4 steps
  • Create Your First Form

    Create a basic HTML form with labels and input fields for collecting information from a visitor.

  • Choose the Right Form Control

    Choose HTML form controls that match the kind of information you want a visitor to provide.

  • Make Form Fields Required

    Use HTML attributes to control basic form requirements and help prevent incomplete submissions.

  • Control Form Submission

    Use name, value, and button types to make form controls ready to submit meaningful data.

Style the Page with CSSUse CSS to control the appearance of an HTML page, including colours, typography, spacing, and basic visual styling.The learner can now build meaningful, structured HTML pages. They are ready to learn how CSS changes the appearance of that structure without changing the content or meaning of the HTML. This milestone introduces CSS progressively, starting with simple styling and building toward a complete styled page.
4 steps
Show the 4 steps
  • Connect HTML to CSS

    Connect a CSS stylesheet to an HTML page and use CSS rules to change the appearance of the page.

  • Select and Style Elements

    Use CSS selectors to target specific HTML elements and apply reusable styles.

  • Control Text, Colour, and Space

    Use CSS properties to control typography, colours, borders, padding, and margin so content is easier to read and visually organised.

  • Style a Complete Page

    Combine CSS selectors, classes, typography, colours, borders, padding, and margin to create a consistent visual style for a complete HTML page.

Arrange Content with CSSUnderstand how elements normally flow on a page and use Flexbox to arrange related content when normal flow is not enough.The learner can now: - build structured HTML; - create forms; - use CSS selectors and classes; - control typography, colour, borders, padding, and margin.
3 steps
Show the 3 steps
  • Understand How Elements Flow

    Understand how HTML elements normally flow through a page and recognise when a layout requirement needs more than normal flow.

  • Arrange Content with Flexbox

    Use the main Flexbox properties to control the direction, spacing, and alignment of elements inside a container.

  • Build a Flexible Layout

    Use Flexbox to build a practical layout and adjust it so related content remains usable when the available space changes.

Debug and Fix Your PageDiagnose common problems in an HTML and CSS page by observing the result, forming a hypothesis, using browser evidence to investigate, making the appropriate change, and verifying that the page now behaves as expected.The learner can now build and style a complete web page and arrange its content using Flexbox. At this point, they will inevitably encounter situations where the browser does not produce the result they expected. Instead of treating debugging as something separate from development, this milestone introduces it as part of the normal process of building a web page. The learner will practise a simple engineering habit: Observe → Describe → Investigate → Fix → Test This prepares them to work independently when something in their HTML or CSS does not behave as expected.
3 steps
Show the 3 steps
  • Describe What Went Wrong

    Identify a visible problem on a web page and describe the expected and actual behaviour before changing the code.

  • Investigate the Cause

    Use the browser and your code to investigate a visible problem, test a possible cause, and identify the rule or element responsible.

  • Fix and Explain the Problem

    Correct a real HTML or CSS problem, verify the fix in the browser, and explain what caused the problem and how the fix resolved it.

Build a Complete Web PageCombine HTML structure, navigation, images, CSS styling, cards, spacing, and Flexbox layout to build a complete, visually organised web page.The learner has learned the individual building blocks of HTML and CSS. Now they need to use those skills together in one complete page. This milestone moves from small exercises to a realistic web-page structure: a header, navigation, main content, cards, images, and footer. The learner is not being asked to learn a large amount of new theory. They are practising how the pieces they already know work together.
4 steps
Show the 4 steps
  • Build the Page Structure

    Create the HTML structure for a complete web page with a header, navigation, main content, card section, and footer.

  • The page contains a footer.

    Build reusable content cards containing an image, title, description, and link, using meaningful HTML structure.

  • Style and Arrange the Page

    Use CSS and Flexbox to turn the structured Explore page into a clear, visually organised web page with a consistent card layout.

  • Complete and Review Your Page

    Bring the Explore page together into a finished web page, check that its structure, content, navigation, images, styling, and responsive layout work correctly, and make any necessary improvements.

Ship It and Explain ItPublish a completed website to a public address, verify that the published version works correctly, and explain what you built, the decisions you made, the problems you encountered, and how you solved them.You have now built a complete web page and reviewed it carefully. The next step is to move from building locally to delivering your work. A website is not finished simply because it works on your computer. It needs to be published, checked at its public address, and explained clearly to someone who did not build it. This milestone introduces the basic delivery cycle: Prepare → Publish → Verify → Explain By the end of the milestone, the learner should have a publicly accessible website and be able to explain the work behind it.
4 steps
Show the 4 steps
  • Prepare Your Page for Publishing

    Review your completed website and make sure its structure, content, links, images, styling, and layout are ready to be published.

  • Publish Your Page

    Publish your completed website using GitHub and Netlify so that it can be accessed through a public web address.

  • Check Your Published Website

    Open your published website and verify that the deployed version works correctly, just as you tested the page on your computer.

  • Explain What You Built

    Explain your completed website, the decisions you made, the problems you encountered, how you solved them, and how the page could change if the requirements changed.

How the work is verified

  1. ReadThe context you need for this step, and why it matters. Never more than that.
  2. BuildYou produce something real. The work is yours, in your own repository.
  3. SubmitYou send it, with a note on what you chose and what you were unsure about.
  4. ReviewA senior engineer reads it and responds. They may ask for changes — that is the normal path through engineering review, not a failure.
  5. VerifiedThe capability is confirmed, it goes on your record, and the next step opens.

How you want to work

You choose when you start. Both cover the same journey and the same definition of done.

Mentor guidedReviewed by a person

A senior engineer is assigned to you. They read every submission, respond in writing, and decide when a capability is verified. Expect to be asked for changes.

Self pacedVerified by you

You work through the same journey and verify your own work against the same definition of done. Nothing is submitted to anyone, and nothing waits on anyone.

What you end up with

Counted from this journey, not described in general.

At the end, they will have built and published a responsive multi-section web page using HTML and CSS.Built by you, in your own repository.
9 verified capabilitiesEach one confirmed against its definition of done, with the name of whoever confirmed it. There is no certificate. The work is the credential.

Ready to start HTML & Web Foundations?

You will choose how you want to work on the next screen. Nothing starts until you confirm it. You can run several journeys at once, and each one is mentor-guided or self-paced on its own.

Start this journey