Project: Personal blog

Overview of the 5-lesson project: a personal blog page.

Project: Personal blog

In this 5-lesson project you'll style a personal blog page called Travel Diary from scratch. Each lesson adds one piece to the stylesheet, and by the end you'll have a readable, balanced blog page.

You'll work on:

Typography: font-family, font-size, font-weight, line-height
Box model: width, padding, margin, box-sizing
Color: color and background-color
Documentation with comments

Anatomy of the blog page

Our blog page has three parts: a header at the top, a few post cards in the middle, and a footer at the bottom. Each part maps to an HTML element; we'll apply CSS to these elements.

Post cards come as <article class="post"> elements. We'll style them with the .post selector. For the overall page look we'll use the body selector. The HTML is already prepared; you only write the stylesheet.

Each lesson adds one piece

In this project, each lesson adds one piece on top of the code you wrote in the previous lesson. So at the start of every lesson you have the previous lesson's finished code, and you add a new block to it.

That way, by the end of the 5 lessons you'll have a single coherent stylesheet. The first lesson opens the file with a comment; later lessons add typography, the box, color, and final touches in turn.

Exercise Add a header comment to the stylesheet

To start the project, add a comment at the top of the stylesheet. The comment should include the words Travel Diary. CSS comments use the /* ... */ syntax and are not shown by the browser; they're only visible to anyone reading the source. We'll fill this file in the next lessons.

Test yourself

How does a CSS declaration end?
- with a line break
- with a semicolon
- with a colon
- with a comma
Show answer

with a semicolon — Correct. Each declaration ends with a semicolon; otherwise the browser can't read the next one.
Match each CSS term to its meaning

selector

element to style
declaration

property: value pair
comment

note inside /* ... */
block

selector and declarations

Next lesson: Heading and typography

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies