Frontend is a free bonus on CodeMentor AI — the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up — free
TaskBuild a complete head + body for a landing page about 'My SaaS': doctype, html(lang=en), charset, viewport, title 'My SaaS — workflow automation', meta description 'Automate your team's repetitive workflows. Free for 30 days.', canonical 'https://mysaas.com/', favicon '/favicon.svg', theme-color '#0D1117', and full OpenGraph 5-tag set. Body has an h1 'My SaaS' and a p 'Workflow automation that works'.
Module capstone: a Lighthouse-100 landing page
200 XP15 minFREE
Theory
Putting A1 together
You've learned the doctype, viewport, lang, charset, title, description, favicon, theme-color, resource hints, and OpenGraph. Now combine them.
A "Lighthouse-100" landing page (in the SEO + Best Practices categories) checks for:
- `<!doctype html>` ✓
- `<html lang>` ✓
- `<meta charset>` ✓
- `<meta name="viewport">` ✓
- `<title>` — non-empty, under 60 chars ✓
- `<meta name="description">` — non-empty, under 160 chars ✓
- `<link rel="canonical">` — points to the production URL
- `<link rel="icon">` — favicon present
- OpenGraph 5-tag set ✓
- `lang` on the html element ✓
The canonical tag
<link rel="canonical" href="https://learnpython.academy/blog/why-fastapi" />
Tells Google "if you found this page at ?ref=twitter or /blog/why-fastapi/ (trailing slash), index it as the URL I'm pointing at." Critical for multi-URL pages.
This lesson
Build the full landing page head + minimal body. We'll grade you on all 10 Lighthouse signals at once.
Live preview