CSS: making your pages look goodCreate account
Lesson 8 of 8

Project: give your website a real design

This is where your website stops looking like a document and starts looking like a website. You've learned selectors, colors, fonts, the box model, Flexbox, Grid and responsive design. In this project you'll put all of it to work on your about me page.

There's no single right answer here. It's your website, so make it look like you. The requirements below just make sure you've used the important pieces.

Start with a plan

Before writing any CSS, take five minutes to decide on a direction. Professional designers do this too.

  • Pick a feeling. Calm and minimal? Bold and colorful? Warm and personal?
  • Pick your colors. Two or three is plenty: one for text, one for the background and one accent color for links and buttons.
  • Pick your fonts. One for headings and one for body text, or just one for everything.

Looking at websites you like for inspiration is completely normal. Just don't copy them directly. Notice what you like about them, like the spacing, the colors or the layout, and use those ideas in your own way.

Work from the outside in

A good order to style a page in:

  1. The basics: box-sizing, your color variables, the body font, size and line height
  2. The overall layout: center the content with a max-width, add space between sections
  3. The header and menu with Flexbox
  4. Each section: headings, text, your image, your cards with Grid
  5. The details: link hover states, the form fields and button, the footer
  6. Phones: check every part in the device toolbar and fix what breaks

Save often and check the browser as you go. Small steps make it much easier to see which change caused a problem.

Requirements

Your styled page should have:

  1. A separate styles.css file linked from index.html
  2. Colors stored as CSS variables in :root and used with var()
  3. A font chosen on purpose, with body text in rem and a comfortable line-height
  4. The main content centered with a max-width
  5. A header laid out with Flexbox
  6. At least one grid, like your cards, using repeat(auto-fit, minmax(...))
  7. A visible :hover style on links or buttons
  8. A layout that works at phone width, with at least one media query
  9. Text with good contrast, checked with Lighthouse

Before you hand it in

  • Look at the page at phone, tablet and desktop widths in the device toolbar
  • Move through the page with the Tab key and check that you can always see the focus outline
  • Run Lighthouse and fix any contrast or accessibility issues
  • Take a screenshot at desktop width and one at phone width. You'll want them to compare with later
AssignmentAI-graded assignment

Hand in your styled website. Paste the full contents of your styles.css file, then answer in a few sentences:

  1. What feeling were you going for, and which colors and fonts did you choose to get there?
  2. How does your layout change between a phone and a desktop screen?
  3. What was the hardest part to get right, and how did you solve it?

Your design is complete when your styles.css covers all nine requirements from this lesson: a separate linked stylesheet, colors as variables in :root used with var(), body text in rem with a comfortable line-height, the main content centered with a max-width, a Flexbox header, at least one grid using repeat with auto-fit and minmax, a hover style, at least one media query and contrast checked with Lighthouse. The feedback will point out anything that's missing and suggest one or two ways to take the design further.

Resources:

  • Header not lining up? See "Flexbox" for justify-content and align-items.
  • Cards not wrapping? The auto-fit pattern is in "Grid".
  • Page scrolling sideways on a phone? Check the max-width rule for images in "Responsive design".
  • Colors hard to read? Lighthouse and the contrast checker are covered in "Colors, fonts and units".

Upload your solution

Log in to submit this assignment.