How websites work
Nine short chapters that take you from typing an address to shipping a page of your own. No sign up, no video to sit through, just reading and trying things in your browser.
- Level
- Beginner
- Chapters
- 9 in 3 parts
- Time
- 1 h 26 min
- Format
- Reading, live demos, quizzes
- Cost
- Free, no sign up
- Updated
02What you will be able to do
- 01Explain what happens between typing an address and seeing a page
- 02Write clean, meaningful HTML and style it with CSS you understand
- 03Lay out a page that works on a phone and a wide screen
- 04Check a page for the accessibility and speed problems that matter most
- 05Put a small site live on your own domain
03Who it is for
- Marketers and founders who brief, buy or run a website and want to understand what they are asking for
- Designers who want to know what happens to their layouts once they reach the browser
- Anyone starting out in web development who wants the whole picture before the details
04Before you start
- A computer with a modern browser and a text editor
- No code experience needed
05Syllabus
9 chapters in 3 parts
Part 1
The page
- 01 What happens when you type a URLThe six steps between pressing Enter and seeing a page: DNS, connection, request, response, parsing and rendering. 11 min
- 02 Semantic HTML: structure that means somethingChoosing the element that says what content is, so browsers, screen readers and search engines understand the page. 9 min
- 03 The cascade and the CSS box modelHow CSS decides which rule wins, and how big every box really is once padding, border and margin are added. 11 min
Part 2
Layout
- 04 Flexbox vs grid: laying out a pageFlexbox lines things up in a row or a column, grid draws rows and columns at once. Learn when to use each. 11 min
- 05 Responsive web design, from phone to wide screenOne page that works on every screen: the viewport tag, mobile first media queries, fluid type and images that fit. 10 min
- 06 Progressive enhancement: what JavaScript is forMake the page work with HTML first, then let JavaScript add extras. What scripts should and should not be trusted with. 8 min
Part 3
Quality and launch
- 07 Web accessibility basics: pages everyone can useWhat WCAG asks for, and the structure, contrast and keyboard checks that catch most accessibility problems. 9 min
- 08 Website speed and Core Web Vitals explainedWhat makes a page feel slow, the three Core Web Vitals in plain terms, and the fixes that matter most on a small site. 8 min
- 09 How to launch a website on your own domainDomains, hosting, DNS records and HTTPS, then the titles, sitemap and Search Console that help people find your page. 9 min
06What you will build
A one-page site, live on the web
Each chapter ends with a Project step. Follow them in order and you finish with a small, accessible, fast page for yourself or an imaginary studio, published at an address you can share.
Need one built properly? See our brand websites service.
07FAQ
About this course
Something else on your mind? Email the studio and a designer, not a salesperson, replies within a day.
Is this course really free?
Yes. Every chapter is free to read, with no sign up and no email wall. Your progress is saved in your own browser, so nothing about you is stored on our side.
How long does the course take?
Most people finish it in two to three hours of reading, plus whatever time they spend on the project steps. The chapters are short, so it works well as one chapter a day.
Do I need to know how to code?
No. The course starts from how a browser loads a page and introduces HTML, CSS and JavaScript as it goes. Every code example is short and you can try it in your browser.
Do I get a certificate?
No. We would rather keep the course free and open than ask you to create an account. What you get instead is a working page, live on the web, that shows what you learned.
08Start a project