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:
colorandbackground-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