TaskBuild the full login page. <head>: title 'Sign in — CodeMentor', meta description, viewport, canonical 'https://learnpython.academy/login'. <body><main id='main'>: <h1>Sign in</h1>, <form action='/api/login' method='post'><label for='em'>Email</label><input id='em' type='email' name='email' required autocomplete='email'><label for='pw'>Password</label><input id='pw' type='password' name='password' required minlength='8' autocomplete='current-password'><button type='submit'>Sign in</button></form>. CSS: body { font-family: system-ui, sans-serif; max-width: 360px; margin: 80px auto; padding: 24px; }.
Capstone 1: FastAPI login page end-to-end
250 XP18 min
Theory
What we're building
A login page that submits to your FastAPI /api/login endpoint. Must be:
- Semantic —
<main>with<h1>,<form>with labels. - Accessible — labeled inputs, focus styles, error messages associated.
- SEO-ready — title, description, canonical.
- Performant — no render-blocking JS in head, lazy below-fold images.
- Pydantic-compatible —
name="email",name="password", validation attributes mirroring Pydantic constraints.
This uses every concept from A1 through A7. The starter gives you the layout HTML; you add the missing meta tags, validation, ARIA, and a clean visual.
🔒
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.