Adding a page
Copy any existing file, rename it, replace the content between the main tags, and add a link to the nav in all four pages.
About
Four files, in order.
The whole site is a folder of documents and one stylesheet. This page describes where everything sits and what to change first.
index · about · contact · 404
File layout
Everything a visitor can reach lives in public.
That folder is the published site. Files beside it — the readme, the Netlify configuration — stay in the repository and are never served.
- index.html
- The landing page, served at
/. - about.html
- This page, served at
/about.html. Filenames become addresses directly. - contact.html
- Contact details, written as ordinary links.
- 404.html
- Shown for any address that does not match a file. Netlify picks this up by name.
- styles.css
- One stylesheet shared by every page, loaded from the site root.
- favicon.svg
- The tab icon, drawn as vector shapes so it stays sharp at any size.
Styling
Change the variables, and the whole site follows.
The top of styles.css holds the palette, the two typefaces, and the spacing scale. Editing --clay repaints every accent; editing --serif reletters every heading. Below that, the file runs in reading order: reset, page shell, typography, components, then the page-specific pieces.
Layout uses CSS grid with deliberately uneven columns, and the numbered list on the home page steps sideways on alternate rows. Both collapse to a single column below roughly 830 pixels wide.
Motion is limited to one entrance per page and hover feedback on links and panels. Anyone who has asked their system to reduce motion sees the finished state immediately.
Working locally
Opening a file straight from disk works. Running netlify dev is closer to production, since addresses resolve the way they will once published.
Publishing
Push the change. Netlify uploads public with no build step, so a deploy takes a few seconds.