HTML & CSS Foundations
Learn how the web works and build, style and publish your own responsive website with semantic HTML and modern CSS.
Leads to: Software Developer, UI Developer, Mobile Developer, Web / Full-Stack Developer, Back-End Developer, QA / Test Engineer, Video Game Designer, UI/UX Designer, Computer Science Teacher
Before you start
This course builds on Digital Literacy for Tech & STEM Work. Take it first if you are new to the topic.
About this course
A beginner course for anyone heading into software, UI, mobile, game or product design work, or teaching computer science. You start with what happens when a page loads and how to read HTTP, then write valid, semantic and accessible HTML: headings, lists, links, images, landmarks and labelled forms. Next you learn how CSS decides which rule wins, how the box model controls spacing, and how Flexbox, Grid and mobile-first media queries build layouts that work from phone to desktop. Along the way you build a personal homepage, style it with a type scale and colour palette, and finish by publishing it for free on the web. Every lesson has a reading, free videos, a quiz, and most have an in-browser HTML and CSS exercise that checks your work.
Course content
Module 1
How the Web Works
3 lessons · 1h 50mBrowsers, servers, URLs, DNS and HTTP, and what makes a valid HTML document.
- 28mBrowsers, servers, and the requestReading
Follow a web page from the moment you press Enter to the pixels on your screen.
- 53mHTTP in 5 minutesReading
Read a real HTTP request and response: methods, headers, status codes and bodies.
- 29mWhat is HTML, really?Reading
Learn what markup means and write a valid, minimal HTML document from scratch.
Module 2
Semantic HTML
4 lessons · 3h 5mHeadings, lists, links, images, landmarks and labelled forms: structure a real, accessible page.
- 38mTags and attributesReading
Use headings, paragraphs, lists, links and images correctly, with the attributes each one needs.
- 58mAccessibility from day oneReading
Add alt text, form labels, real buttons and landmarks so everyone can use your page.
- 45mBuild a personal homepageProject
Plan and build a one-page personal site with a header, navigation and sections, in semantic HTML only.
- 44mForms and inputsReading
Build a labelled, accessible form with the right input types and built-in validation.
Module 3
CSS Layout & Style
4 lessons · 3h 44mThe cascade and specificity, the box model, Flexbox, and a type scale and colour palette for your homepage.
- 44mThe cascade and specificityReading
Predict which CSS rule wins using the cascade, specificity, source order and inheritance.
- 1h 13mFlexbox tourReading
Lay out a navigation bar and a row of cards with Flexbox: direction, alignment, gap and wrapping.
- 58mStyle your homepageProject
Give your homepage a readable type scale and an accessible colour palette using CSS custom properties.
- 49mThe box modelReading
Control spacing and size with content, padding, border and margin, and switch to border-box sizing.
Module 4
Responsive Pages
3 lessons · 2h 30mCSS Grid page layouts, mobile-first media queries, and publishing your site for free.
- 1h 10mGrid layoutReading
Build a full page layout and a responsive gallery with CSS Grid, template areas and the fr unit.
- 31mMedia queries and mobile-firstReading
Make a layout adapt from phone to desktop with the viewport meta tag, fluid images and min-width media queries.
- 49mPublish your siteReading
Put your homepage on the public web for free with GitHub Pages, and check it like a professional.