Static Blog

Build a small multi-page blog with plain HTML and CSS, then publish it on GitHub Pages.

  • Difficulty Beginner
  • Parts 4
  • Stack HTML, CSS

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.

Open GitHub repo →

Parts in order

Work through the parts in sequence. Each lesson explains the ideas, then points you to a runnable GitHub snapshot.