Build your first website
A step-by-step guide to building your own website: from a single page you write by hand, to a site with shared parts, written content and a little JavaScript, published for free with GitHub Pages.
You don’t need any experience. If you can use a computer, you can follow it, and every part ends with a working website online at its own address.
Part 1 is free to read here. It takes you from an empty folder to a two-page website that anyone can visit.
Start reading Part 1
Contents
Part 1 Get a page onlineFree to read
By the end of this part, your first web page will be online, at an address you can share with anyone. You’ll need a code editor, a web browser and a free GitHub account, which you’ll create along the way.
1 Welcome 2 Write your first web page 3 Put your page online 4 Grow your website The rest of the book Parts 2 to 7 and the appendices continue from where Part 1 ends, in the paperback, PDF and ebook editions.
Part 2 Style and structure 5 Give your website some style 6 Make your pages easier to read 7 Choose what gets styled 8 Give your pages a structure 9 Arrange your navigation 10 Make your links respond 11 Add an image 12 Find and fix mistakes Part 3 Layout and consistency 13 Arrange a few cards 14 Keep the CSS consistent 15 Decide which rule wins 16 Add a dark theme 17 Add a page of your own Part 4 Move to Astro 18 Keep a history with Git 19 Get ready to build 20 Bring your pages into Astro 21 Write the shared parts once 22 Publish the built website 23 Build a page yourself Part 5 Components and content 24 Give a component different content 25 Make cards from a list 26 Catch mistakes in component inputs 27 Give written content a home 28 Give each entry its own page 29 Make the writing comfortable to read 30 Build a collection of your own Part 6 JavaScript in the browser 31 Make something happen 32 Add places to a list 33 Keep a list of values 34 Keep the list between visits 35 Make the form comfortable to use 36 Remove one place 37 Prepare the collection for filtering 38 Filter the cards in the browser Part 7 Ready for readers 39 Check the site with other readers in mind 40 Help someone who reaches a missing page 41 Send an image that fits the job 42 Look good when you’re shared 43 Check how your website performs 44 Look after the site you’ve published 45 A site you can look after Appendices A When you’re stuck B Quick reference C Glossary D Split the stylesheet into files