Content

Let’s get practical

Exercise 1: Style Your Portfolio

Difficulty: Easy Concept: CSS syntax, selectors, typography, colors, spacing, external stylesheets

Take the personal portfolio page you built in Week 1 and bring it to life with CSS.

Requirements:

Create a styles.css file in the same folder and link it from your HTML with <link rel="stylesheet" href="styles.css">
Add the universal box-sizing reset at the top of your stylesheet:

*, *::before, *::after {
    box-sizing: border-box;
  }

Style the typography: set a font-family on the body, use rem units for font sizes, and give headings a different size and weight than body text
Add colors: a background color for the page, a different background for the header and footer, and a consistent text color with sufficient contrast
Use padding and margin to give your sections breathing room — nothing should feel cramped against the edge of the screen
Style your navigation links: remove the default underline, change the color, and add a hover state
Style your skills list: remove the default bullet styling (list-style: none) and add some visual treatment of your choice

Hints:

Link your stylesheet in the <head> before closing it: <link rel="stylesheet" href="styles.css">
Start with body styles (font, color, background) before moving to specific elements
Use DevTools to experiment with values live before writing them into your file
If a color looks low-contrast, click it in DevTools' Styles panel — the contrast ratio appears in the color picker

Difficulty: Easy Concept: Flexbox alignment, Grid placement

Before building layouts from scratch, spend 15 minutes getting the alignment properties into muscle memory through two games.

Requirements:

After finishing both, write down your answers to these three questions in a comment block at the top of your styles.css from Exercise 1:

Difficulty: Easy/Medium Concept: Focus states, color contrast, keyboard navigation, accessible styling

Go back to your portfolio from Exercise 1 and audit it for accessibility. Most issues take one or two lines of CSS to fix.

Requirements:

Open your portfolio and press Tab repeatedly: does a visible focus ring appear on your navigation links? If not, add one.
Show code hint (only open if you are stuck)
Open DevTools, click any text color value in the Styles panel, and check the contrast ratio that appears. Fix any that fall below 4.5:1 for body text or 3:1 for large text
Add a skip link so keyboard users can jump past the navigation:
Show code hint (only open if you are stuck)

Add prefers-reduced-motion handling if you added any transitions or hover animations in Exercise 1:

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms;
    }
  }

Install the axe DevTools extension (free) and run it on your portfolio. Fix any issues it flags

Hints:

Tab through your page before and after adding focus styles — the difference is immediately obvious
The axe extension will catch things your eyes won't: missing alt text, contrast failures, unlabeled elements
You can test prefers-reduced-motion in DevTools without changing your system settings: three-dot menu → More tools → Rendering → "Emulate CSS media feature prefers-reduced-motion"
Don't forget to add id="main-content" to your <main> element so the skip link has somewhere to jump to

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0

CC BY-NC-SA 4.0 Icons

Found a mistake or have a suggestion? Let us know in the feedback form.