Project tutorial
Static Blog
Build a small multi-page blog with plain HTML and CSS, then publish it on GitHub Pages.
How this project works
Harbor Notes is a tiny multi-page blog built with only HTML and CSS. There is no database, no login system, and no JavaScript framework. You create ordinary files, open them in a browser, and later publish those same files on the public web.
This project assumes you are an absolute beginner. We explain what a page is, why folders matter, how links point from one file to another, and how a stylesheet changes appearance without changing your words. If a term is new, the lesson defines it before using it.
Clone fcc-static-blog. Each numbered folder is a complete snapshot of the site at that stage. You can copy a snapshot as a starting point, or build alongside the lesson and use the snapshot as an answer key when you get stuck.
Across four parts you will create a shared page layout, add an About page and a first post, improve readability with CSS, and deploy to GitHub Pages. Those skills transfer to portfolios, documentation sites, and any project that starts as static files.
Work in order. Part 1 teaches the shell. Part 2 turns one file into a small site. Part 3 makes reading comfortable. Part 4 puts Harbor Notes on the internet. When something looks wrong, check file names and relative links first—most beginner bugs live there.
Start with part 1 Open GitHub repo
Parts in order
Work through the parts in sequence. Each lesson explains the ideas in plain language, then points you to a complete runnable snapshot on GitHub for that stage.
- Part 1: LayoutCreate a home page with header, primary navigation, main content, and footer.
- Part 2: Posts and PagesAdd about.html and posts/hello-world.html, then link both from the home page.
- Part 3: StylesAdd styles.css for readable typography, spacing, and a simple content measure.
- Part 4: Deploy on GitHub PagesUse the finished static site and publish it from a GitHub repository with Pages.