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 minimal valid HTML5 document. Doctype + html(lang='en') + head with charset + title 'Hello' + body containing an h1 with text 'Hello, world'.
Doctype and why it's not optional
50 XP6 minFREE
Theory
What HTTP actually returns
When your backend returns HTMLResponse(content="<h1>Hi</h1>"), the browser tries to parse it. Without a doctype, it falls into "quirks mode" β a 1995-era compatibility layer where padding/margin calculations are wrong, flexbox can misbehave, and getBoundingClientRect() returns nonsense.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My page</title>
</head>
<body>
Hi
</body>
</html>Three things to never skip
- `<!doctype html>` β must be the very first line. Lowercase or uppercase, browsers accept both.
- `<html lang="en">` β screen readers use this to pick the right voice. SEO uses it to pick the right index.
- `<meta charset="utf-8" />` β must be in the first 1024 bytes of the document. Without it, accented characters can render as mojibake. UTF-8 is the only correct answer in 2026.
The 30-second rule
If your page boots in quirks mode, every CSS reset library on earth will fail you in subtle ways. Start every new page with the doctype. Always.
Live preview