YOUR CHALLENGE ROUTE

From flexible components to a tested website

Work in your editor and browser. Start with the foundation challenges, then move on to repair tasks and the final project. You can spread the work across several lessons.

Use fictional details and images you own or are allowed to publish. Use your existing HTML pages or create a simple fictional club page. Keep semantic structure and logical reading order while you improve the layout.

Your checks last while this page is open. They record your self-review, not an automatic code score.

CHALLENGE 01 | FOUNDATION

Build a flexible navigation toolbar

Use 04.1 | Flexbox and alignment

Create a header containing a site name and navigation links. Use Flexbox to arrange them in a row, align them on the cross axis and distribute spare main-axis space. Let the layout wrap when needed.

Success criteria

• Apply display: flex to the parent containing the name and navigation.
• Use justify-content and align-items for their correct axes.
• Use gap for consistent gutters.
• Allow both the header and navigation to wrap.
• Keep visible focus and logical HTML order.

<header class="site-header">
  <p>Alex’s Portfolio</p>
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="projects.html">Projects</a>
    <a href="about.html">About</a>
  </nav>
</header>

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

CHALLENGE 02 | BUILD

Create a wrapping card row

Use 04.1 | Flexible items

Place at least five project articles in a shared container. Give each card a 220px basis and allow it to grow and shrink. Test with long descriptions and one large image.

Success criteria

• Articles are direct children of the flex container.
• Use wrapping and a consistent gap.
• Use flex: 1 1 220px on cards.
• Handle minimum width, long text and image sizing.
• Explain why the last row may contain wider cards.

.projects {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.project-card {
  box-sizing: border-box;
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
  border: 2px solid #24988f;
  overflow-wrap: anywhere;
}
.project-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

CHALLENGE 03 | BUILD

Build a gallery with shared columns

Use 04.2 | Grid tracks and placement

Use the same project articles in a Grid gallery. Define three flexible columns and a 16px gap, then make the first article span the explicit columns. Compare the result with your wrapped Flexbox layout.

Success criteria

• Use a grid container with direct child items.
• Define three explicit column tracks.
• Span the featured item from line 1 to the final explicit line.
• Keep the source order logical.
• Explain how columns remain aligned across rows.

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.featured {
  grid-column: 1 / -1;
}

CHALLENGE 04 | LAYOUT

Sketch and name page regions

Use 04.2 | Named grid areas

Sketch a page with a header, main content, related-resources sidebar and footer. Start with one column, then write a wider two-column layout where header and footer span the page.

Success criteria

• Use meaningful header, main, aside and footer elements.
• Define valid rectangular named areas.
• Every area-template row has the same number of cells.
• Assign each item using grid-area.
• Keep the HTML order logical even when regions sit beside each other.

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "main" "sidebar" "footer";
  gap: 20px;
}
.page-header { grid-area: header; }
.page-main { grid-area: main; }
.page-sidebar { grid-area: sidebar; }
.page-footer { grid-area: footer; }
@media (min-width: 850px) {
  .page-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
  }
}

CHALLENGE 05 | RESPONSIVE

Choose and test gallery breakpoints

Use 04.3 | Mobile-first media queries

Replace the fixed gallery from challenge 3 with one column by default, two columns at 700px and three at 1000px. Predict the layout at 699, 700, 999, 1000 and 1100 CSS pixels.

Success criteria

• Include suitable viewport metadata.
• Use narrow-layout base rules.
• Add wider-screen enhancements in the correct order.
• Record which queries match at each test width.
• Explain the overlap at 1100px using the cascade.
• Adjust the example thresholds if your content needs different ones.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.projects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 700px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

CHALLENGE 06 | ACCESSIBILITY

Repair missing keyboard access

Use 04.4 | Focus and native controls

A project page uses a clickable div to reveal information, removes all outlines and visually reverses its navigation links. Explain the problems and propose a repair.

<!-- The div has a mouse-only click handler -->
<div class="show-details">Show project details</div>

/* CSS */
*:focus { outline: none; }
nav { display: flex; flex-direction: row-reverse; }

Success criteria

• Replace the action control with a native button.
• Provide a visible focus style.
• Keep navigation in a logical source and visual order.
• Explain that the reveal action still needs behaviour code.
• Test activation, focus visibility and ability to leave the component.

<button type="button" class="show-details">Show project details</button>

nav { display: flex; flex-wrap: wrap; gap: 16px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #176c65;
  outline-offset: 3px;
}

CHALLENGE 07 | TEST

Run a small usability test

Use 04.3 and 04.4 | Responsive usability

Ask a partner to find a project and reach the About page. Repeat with keyboard navigation and a narrow layout. Check actual text/background contrast and enlarged text. Record observations without guiding the partner through each step.

Success criteria

• Define two clear visitor tasks.
• Record expected and observed results.
• Check focus, labels and navigation wording.
• Check contrast at the actual text size.
• Identify at least two specific improvements.
• Repeat affected tests after the fixes.

CHALLENGE 08 | CAPSTONE

Finish a three-page personal website

Combine 04.1 to 04.5

Complete Home, Projects and About pages for yourself or a fictional persona. Use one shared stylesheet, flexible navigation, an adaptable project gallery and appropriate accessibility features. Build on the project brief in 04.5.

Success criteria

• Three complete pages have meaningful titles, headings and working shared navigation.
• The Projects page contains at least three useful project articles.
• Flexbox or Grid is used where it suits the content.
• Breakpoints are chosen and tested with real content.
• Images load, fit their containers and have suitable alternatives.
• Keyboard focus, skip links, contrast and enlarged text have been checked.
• At least two improvements follow user feedback or testing.
• Hand-in includes source files, required assets, screenshots, test notes and reflection.

personal-site/
  index.html
  projects.html
  about.html
  css/
    styles.css
  images/
    project-robot.jpg

REFLECT AND FINISH

Show how your website improved

Record one Flexbox decision, one Grid decision, a breakpoint test and a usability improvement. Explain what you changed and what evidence showed the change helped.

Keep your files and final screenshots. You have now combined HTML structure, CSS foundations and responsive layouts into a complete small website.