Plan Your Design

Welcome to the last lesson of the CSS course! You now know enough CSS to design the look of a whole web page on your own, and that's exactly what you're going to do.

You can style one of two pages:

• Your own page from the HTML course. If you saved it on your computer at the end of the HTML course, you will paste its code into the editor in the next exercise. Open the file index.html in a text editor (right-click it and choose Open with; a double-click would open it in the browser), select all the code (Ctrl+A, on a Mac Cmd+A) and copy it (Ctrl+C, on a Mac Cmd+C).
• Our ready-made page of a small cat shelter, which you can see in the editor and the preview now. It has a header with navigation, a few sections, cards of the cats and a footer, but no styles yet.

Before you start writing CSS, it's worth making a short plan. Designers do it too: when you decide a few things in advance, the whole page looks consistent.

• Colors. Choose a background color, a text color and one or two accent colors, e.g. for the header, the headings or the links. Make sure the text stands out clearly from its background: dark text on a light background, or the other way round. A simple trick: choose one hue in HSL and change only the saturation and lightness.
• Font. Choose a font on Google Fonts. One font for the whole page is enough, two at most: e.g. one for the headings and another for the text.
• Layout. Think about how the parts of the page will be arranged. For example: the content in a column in the middle of the page, the links of the navigation next to each other in a row (flexbox) and the cards in a grid (CSS Grid).

The best place for the plan is a comment at the top of the stylesheet. Whenever you come back to the code, you'll see at once which colors and fonts the page uses. It can look like this:

/*
	My plan
	Colors: background #fdf6ec, text #3d2c2e, accent #b8482e
	Font: Nunito from Google Fonts, fallback sans-serif
	Layout: content in a centered column, links in a row,
	cat cards in a grid
*/

In the next exercise, you'll find a checklist of everything the stylesheet must contain. The checks look only at which CSS features you use, never at the particular colors, fonts or sizes, so how your page will look is up to you.

Tip: Your code isn't saved when you leave an exercise. So before you continue, copy your plan, and in the next exercise, paste it over our sample plan.