Build your first website Phosphene

Chapter 1Welcome

Hi there!

In this book, you’re going to learn how to build and publish your first website.

You don’t need any previous experience. As long as you know the basics of using your computer, you’ll be fine.

We’re going to start at the beginning, and introduce new ideas when you need them. This will help you to understand what you’re doing, and why.

That said, take your time; if you need to go slow, or repeat a section, or take a break and come back later, don’t worry. This book isn’t going anywhere.

What you’ll make

You’ll build a small website about something you care about. You might choose places you want to go on holiday, bands you want to see, or TV shows you’re fanatical about. By the end, it will be online at its own address, and you’ll know how to look after it.

The book is in seven parts. Each one ends with a working website that you’ve published.

  1. Get a page online. Write your first web page and publish it for anyone to visit.

  2. Style and structure. Choose your website’s colours, type and spacing, and give every page the same easy-to-follow structure.

  3. Layout and consistency. Arrange content in layouts that adapt to the screen, and keep your design consistent as it grows.

  4. Move to Astro. Start keeping a history of your work, then use a tool called Astro to build your pages from shared parts. Change your navigation once, and every page follows.

  5. Components and content. Write your content in simple text files, and let Astro turn each one into a page.

  6. JavaScript in the browser. Make your pages respond to your visitors, with a list they can add to and a search that filters your content as they type.

  7. Ready for readers. Check that your website works for everyone, help visitors who reach a missing page, and learn how to keep the site up to date.

That’s a long way from a single page, but you won’t have to take it in all at once. Each part builds on the last, and each new tool arrives when it makes your work easier.

What you’ll need

To follow this book through, you’ll need the following:

  • A computer running Windows or macOS, with an up-to-date web browser

  • Access to the internet

  • An email address you can access

  • A free GitHub account, which you’ll create in the first part of the book

A phone or tablet is handy for checking how your website looks on a smaller screen, but you don’t need one.

You don’t need to buy any software, web hosting packages, or a domain name. Everything in this book is free.

See the finished example

While writing this book, I built the same website it describes, step by step. You can visit it at https://build-your-first-website.github.io, and see all its files at https://github.com/build-your-first-website/build-your-first-website.github.io.

On GitHub, the repository’s tags hold a snapshot of the website at the end of each chapter, named after the part and chapter, such as part2-images. If your own website isn’t behaving, comparing your files with the matching snapshot is a good way to spot the difference. Your website will have your own words and pictures, of course; it’s the structure that should match.