Build Your First Website with HTML and CSS

What's inside

1. Level 1: How the Web Works and Setting Up Your ToolsFree
   Learn in brief how a browser asks a server for a page by URL and gets back HTML, CSS and images, then set up VS Code and a browser to build and preview the site's first file.
2. Level 2: HTML Document StructureFree
   Build the skeleton every HTML page needs: the doctype, the html element with a lang attribute, a head with charset, viewport and title, and a body for the visible content.
3. Level 3: Headings, Paragraphs and Lists
   Fill the home page with real text, using h1 to h6 in a logical outline, paragraphs, emphasis, and ordered, unordered and description lists.
4. Level 4: Links and Images with Good Alt Text
   Connect pages with relative and absolute links and add images that have useful alt text and width and height attributes.
5. Level 5: Semantic Structure: header, nav, main, article, footer
   Give every page a meaningful structure with semantic elements, so browsers, search engines and assistive technology understand what each region is for.
6. Level 6: Accessible Data Tables
   Present tabular data such as opening hours or a price list in tables with captions, header cells and scope, and know when not to use a table.
7. Level 7: Contact Forms with Labels and Validation
   Build a contact form with properly labelled inputs, suitable input types and the browser's built-in validation.
8. Level 8: Connecting CSS and Writing Selectors
   Learn where CSS can go, link an external stylesheet to every page, and target elements with type, class, ID, attribute, descendant and pseudo-class selectors.
9. Level 9: The Cascade, Specificity and Inheritance
   Understand how the browser decides which CSS rule wins when several rules target the same element, so styles behave predictably.
10. Level 10: The Box Model: Content, Padding, Border, Margin
    Control the size and spacing of every element using the box model, box-sizing and the difference between block and inline display.
11. Level 11: Colour and CSS Units
    Choose a colour scheme with named, hex, rgb() and hsl() colours, and size things with the right units: px, rem, em, %, and the viewport units vw and vh.
12. Level 12: Typography and CSS Custom Properties
    Set the site's fonts and text styles, then store colours, fonts and spacing as reusable custom properties that make up one consistent theme.
13. Level 13: Layout with Flexbox
    Lay out the navigation bar, header and card rows with Flexbox, which arranges items along a single row or column.
14. Level 14: Layout with Grid
    Build two-dimensional page and gallery layouts with CSS Grid, and learn when to reach for Grid instead of Flexbox.
15. Level 15: Responsive Design, Mobile First
    Make the site work on phones first and then adapt it for tablets and desktops with min-width media queries and flexible layouts.
16. Level 16: Images That Load Fast
    Serve images that suit each screen and load quickly, using modern formats, srcset and sizes, the picture element and lazy loading.
17. Level 17: Accessibility Checks, Validation and DevTools Debugging
    Audit the site against WCAG basics for contrast, keyboard focus and landmarks, then find and fix errors with the W3C validator and browser DevTools.
18. Level 18: Final Challenge: Publish Your Complete Site Exam
    Bring together everything from the course by finishing, checking and publishing a complete multi-page site for free on GitHub Pages or Netlify, and see in outline how a custom domain is connected.

Access

The first 2 levels are free with a free account. Every level, the podcast edition and the AI tutor come with All Access at £4.99/month or any Creator plan — see pricing.

Start free →