Capstone project

Project: a complete course landing page

Lesson 20 of 20 · 26 min · Module 6: Responsive systems & a second project

Build a page that introduces a course, explains its curriculum, answers questions, and offers a clear next action. Combine structure and responsive behavior deliberately.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Integrate content, forms, and responsive layout
Verify structure and behavior across viewports

The idea

Start with a sensible source order. Add a small visual system, then test the actual layout at phone and desktop widths. Native controls and clear labels provide a useful starting point for interaction.

<!-- Content plan -->
<!-- header/nav → main hero → curriculum → FAQ → signup form -->

01Turn the brief into sections

Give every content block a purpose and put it in a readable order. Fragment links depend on matching element ids.

02Design the narrow layout first

Stack cards by default. Use one media query to introduce the wider three-column arrangement, keeping content order unchanged.

03Use the checks as a review aid

Automated structure and layout checks cover the brief. Also review copy, keyboard operation, zoom, and visual contrast yourself; passing these checks is not a complete accessibility certification.

Your project brief

Build a header nav linking to #curriculum and #signup. Inside main, add an h1 saying Learn one line at a time, section#curriculum with div.modules and exactly three article.module cards headed Values, Functions, and Projects, section.faq with two details/summary answers, and form#signup with a connected email label, required input#email of type email, and submit button Join the course. Use 1 grid column below 700px and 3 equal columns from 700px, with a 16px gap. Add a parsed .join:focus-visible rule with a solid 3px outline. The whole main region must fit a 390px viewport.

What the checks look for

Main heading introduces the course
Navigation links to curriculum and signup
Exactly three curriculum cards have the required headings
Phone layout uses one grid column
Desktop layout uses three equal columns
Cards have a 16px gap
Exactly two FAQ disclosures exist
Each FAQ disclosure has a summary
Each FAQ disclosure has an answer
Signup uses a required email control
Email has a connected label
Submit button states its action
Join button declares a 3px focus outline
Join button focus outline is solid
Main content fits a phone viewport

Try it in the editor →

Take this with you

A complete page connects meaning, interaction, and layout in one consistent experience.

Go a little further

Create a second visual theme using CSS custom properties without changing the semantic structure.