Modern HTML5 in Production · Capstone Projects

Capstone: Audit and Fix a Landing Page

Audit a marketing landing page for accessibility, performance, SEO and security problems, prioritise them, and fix the HTML.

Scenario

Example company: a startup's landing page converts poorly on mobile and fails an enterprise customer's accessibility review. Its HTML:

<html>
<head>
  <title>Home</title>
  <script src="https://cdn.example.com/framework.js"></script>
  <script src="https://chat.example.com/widget.js"></script>
</head>
<body>
  <div class="nav"><div onclick="go('/pricing')">Pricing</div><div onclick="go('/login')">Log in</div></div>
  <img src="hero-3000.jpg" loading="lazy" class="hero">
  <div class="big">Ship faster with Acme</div>
  <input placeholder="Work email"><div class="btn" onclick="signup()">Start free trial</div>
  <iframe src="https://video.example.net/embed/123"></iframe>
</body>
</html>

Requirements

List every problem you find, grouped by accessibility, performance, SEO/sharing and security, with the user impact of each.
Prioritise them by impact and effort.
Rewrite the HTML to fix them.

Constraints

The marketing team needs the chat widget and analytics.
No framework changes; HTML and small amounts of JavaScript only.

Deliverables

The prioritised findings list.
The rewritten page.
How you'll verify the fixes: Lighthouse, axe, a keyboard-only pass, a screen-reader pass and the Rich Results Test.

Hints

Look for: missing lang, charset and viewport; a generic title and no description or Open Graph tags; parser-blocking scripts; clickable divs; a lazy-loaded hero without alt, width and height; a heading that isn't a heading; a placeholder used as a label; an iframe without title, loading or sandbox; and no frame protection header on the server.

Deliverables

Which three findings would you fix first, and why?

Model answer

For example: the inaccessible sign-up controls (clickable div and placeholder-only input block keyboard and screen-reader users from converting), render-blocking scripts plus the lazy hero (slow first view on mobile), and missing title/description/OG tags (poor search and sharing).

Rubric

Look for prioritisation by user and business impact (conversion, legal accessibility requirements) rather than a flat list.

What does the fixed head contain?

Model answer

lang on html, meta charset and viewport, a descriptive title and meta description, canonical and Open Graph tags, scripts with defer/async, the chat widget loaded later, and preconnect for unavoidable third parties.

Rubric

Strong answers cover metadata and script loading together.

How do you verify the fixes?

Model answer

Lighthouse (performance, accessibility, SEO), axe, a keyboard-only pass, a screen-reader pass, the Rich Results Test or Schema validator, and real-user monitoring after release.

Rubric

Look for automated and manual checks, including real users after release.

Open in the app to mark lessons complete, take notes and track your progress.