Week 2 Assignment: Styling the Profile Page

Focus: CSS layouts, responsive design, accessible styling, Flexbox, Grid

Description

Take the profile page you built in Week 1 and transform it into a polished, responsive, accessible interface. You won't write new HTML, because everything you build this week lives in CSS. By the end, your page should work on a phone, a tablet, and a desktop, and pass a basic accessibility audit.

Requirements

CSS Foundation

Create an external styles.css and link it from your HTML

Add the universal box-sizing reset at the very top:

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

Set a consistent font-family on body using a system font stack or a Google Font
Use rem for all font sizes and spacing throughout — no px for typography or layout spacing
Add a fluid container: width: 90%; max-width: 1200px; margin: 0 auto;

Layout

Use CSS Grid for the overall page structure. At minimum, your desktop layout should place the header, main content, and footer in a defined grid. Use grid-template-areas so the structure is readable at a glance
Use Flexbox for at least two components inside the page: the navigation links, the header content, or the interests list are all good candidates
The contact form fields should stack vertically using Flexbox, with consistent spacing between fields using gap — no manual margins between inputs!
Your profile image should be circular (border-radius: 50%), have a fixed size, and never overflow its container

Responsive Design

The page must be built mobile-first: base styles target small screens, larger layouts are added with min-width media queries
Include the viewport meta tag in your HTML <head> if it isn't there already:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Define at least two breakpoints:
- At 600px: the header shifts from stacked to a horizontal layout (image and text side by side)
- At 900px: the main content area gains a sidebar. Move your interests list or a short "Quick Facts" section into a second column using Grid
Verify your layout at each breakpoint using DevTools' device toolbar (Ctrl/Cmd + Shift + M)

Accessible Styling

No bare outline: none anywhere in your stylesheet without a replacement. Add custom :focus-visible styles for all interactive elements (links, the submit button, form inputs):
```
:focus-visible {  outline: 3px solid #6366f1;  outline-offset: 3px;  border-radius: 4px;}
```
All text must pass WCAG AA contrast minimums: 4.5:1 for body text, 3:1 for large text. Check using DevTools' color picker or WebAIM Contrast Checker

Form inputs must have a visible focus state beyond the browser default: use border-color and box-shadow to indicate focus:

.form input:focus,.form textarea:focus {  outline: none;  border-color: #6366f1;  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);}

The dark mode class from your Week 1 JavaScript (dark-mode on body) must actually change the visual appearance. Add CSS for it:

Make sure your dark mode text still passes contrast requirements

```css
.dark-mode {  background-color: #1e293b;  color: #f1f5f9;}
```

Add prefers-reduced-motion handling for any transitions or hover effects you include:

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

Polish

Add hover states to your navigation links and the submit button — a color change or subtle background shift is enough
Add a transition to those hover states so they animate smoothly (and wrap it in a prefers-reduced-motion check)
Give the contact form a visible border or background so it reads as a distinct section on the page
Ensure nothing overflows horizontally at any viewport width. No horizontal scrollbar should appear

DevTools Validation

Open your finished page and verify the following, then take two screenshots:

Open DevTools → device toolbar → set viewport to 375px. Your page should be readable, nothing should overflow, and the layout should be single-column. Save as mobile-screenshot.png
Run the axe DevTools extension on your page. Fix any issues it flags before submitting. Take a screenshot showing zero critical errors. Save as axe-screenshot.png

Deliverables

styles.css: your complete stylesheet
Updated index.html: with viewport meta tag added if it was missing
mobile-screenshot.png
axe-screenshot.png

Hints

Build in layers: get the mobile layout right first, then add breakpoints. Trying to do mobile and desktop simultaneously leads to specificity tangles that are hard to untangle
If your grid areas aren't lining up, add a temporary border: 1px solid red to each section (seeing the boxes makes grid debugging much faster)
The dark mode styling is intentionally open-ended. As long as the contrast passes and the toggle visually does something meaningful, the implementation is yours to decide
When the axe extension flags something, read the full description — it links directly to the relevant WCAG criterion and usually suggests the exact fix

Submission

Follow the Assignment submission guide to learn how to submit the assignment

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

CC BY-NC-SA 4.0 Icons

*https://hackyourfuture.net/*

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