TaskBuild a 3-card pricing page. <main><h1>Pricing</h1><section aria-label='Plans'>: three <article> cards, each with <h2>plan name</h2>, <p>price</p>, <ul> of 3 features, <a class='cta' href='/signup?plan=NAME'>Choose</a>. Plans: Free $0, Pro $19/mo, Team $49/mo. Mark Pro as 'Most popular' via aria-label on its article.
Capstone 5: pricing page (full Lighthouse pass)
250 XP16 min
Theory
What we're building
A pricing page with 3 tier cards. The HTML must:
- Have a single
<h1>per page. - Use proper heading hierarchy inside cards (h1 β h2 per card β no h3 skips).
- Be semantically grouped (each card is an
<article>). - Include "Most popular" as ARIA-labeled emphasis, not just styling.
- Have plain HTML CTAs that are real
<a href>(not JS-only divs).
Schema.org has a Product + Offer type β perfect for pricing pages β but for capstone 5 we stop at the HTML/semantics and skip the JSON-LD (already done in capstone 4).
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.