Level 1 · Basic

Frontend: the website

A fast, responsive, accessible marketing site live on the student's own domain. The lead form exists but does not yet save anything; that is section 4.

9lessons
7.9 hof lessons
3.8 hhomework
8checkpoints

Start course See all lessons

Milestone

A live website on a real domain

Lessons

3.1
How web pages work
45 min + 25 home
Enough HTML, CSS and JavaScript vocabulary to read and direct Claude's work.
What the lesson covers
Prerequisites
Checkpoint lesson-2.4; the page from 0.3; a Chromium-based browser.
Covers
- HTML for structure, CSS for appearance, JavaScript for behaviour.
- Browser developer tools: inspect an element, change a style, read the console.
- Components: why sites are built from reusable pieces.
- What a framework adds on top of plain files.
Do along
Inspect the page from 0.3, change it live in developer tools, then ask Claude to make the same change permanent.
Done when
The student can find any element on a page in developer tools and name its tag and one of its styles.
Homework
Inspect the heading and main button on a similar business's site, make a second DevTools-then-Claude change to the practice page, and label five wishes for the future site as HTML, CSS or JavaScript.
Open lesson 3.1 →
3.2
Create the project
45 min + 20 home
A running Next.js project in the course repository.
What the lesson covers
Prerequisites
Checkpoint lesson-2.4.
Covers
- Scaffolding Next.js with TypeScript and Tailwind CSS.
- Project tour: pages, components, public files, configuration.
- The development server and live reload.
- Adding the run, build and check commands to CLAUDE.md.
Do along
Scaffold the project, start it locally, replace the starter page with a placeholder headline.
Done when
The placeholder shows at the local address and the production build succeeds.
Homework
Locate three key files without Claude, change the placeholder line with a self-written brief, and write a personal start-of-session checklist by restarting everything from cold.
Open lesson 3.2 →
3.3
First deployment and domain
50 min + 20 home
The site is on the internet from day one.
What the lesson covers
Prerequisites
Checkpoint lesson-3.2; the Vercel account from 0.2; a payment method for your own domain name (required; support helps with buying and connecting it).
Covers
- What hosting is; connecting the GitHub repository to Vercel.
- Automatic deployment on every push; preview links for branches.
- Buying a domain and pointing it at the site; HTTPS.
- Hosting plan terms to check before running a commercial site.
Do along
Deploy, connect a domain, push a text change and watch it go live.
Done when
The placeholder page opens at the student's own domain over HTTPS.
Homework
Record the hosting plan, registrar and renewal details in docs/architecture.md after reading the plan terms, check the domain from mobile data and through a second person, and run one more preview branch then delete it.
Open lesson 3.3 →
3.4
Layout and design system
50 min + 25 home
The shared frame every page sits in.
What the lesson covers
Prerequisites
Checkpoint lesson-3.3; docs/design.md from 2.3.
Covers
- Moving the tokens from docs/design.md into the Tailwind theme.
- Fonts, global styles, the page container.
- Header with navigation and a call-to-action button; footer.
- Reusable basics: button, section, heading.
Do along
Build the layout and a hidden style-guide page that shows every basic component.
Done when
Header and footer appear on every page and the style-guide page matches the design document.
Homework
Proofread the header and footer facts on the live site, compare the style guide with one reference site and decide what to keep or change (token values only), and collect one outside opinion on the look.
Open lesson 3.4 →
3.5
The landing page
75 min + 30 home
The complete main page with real copy.
What the lesson covers
Prerequisites
Checkpoint lesson-3.4; docs/content.md from 2.2; images the student has the right to use.
Covers
- Building section by section from docs/content.md: hero, problem, benefits, how it works, proof, FAQ, final call to action.
- Briefing one section at a time and reviewing each in the browser.
- Images and icons: formats, sizes, alternative text.
- Keeping copy in one place so it is easy to change.
Do along
Build all sections; iterate with screenshots until each matches the design direction.
Done when
The landing page contains every section from the content document with no placeholder text.
Homework
Read the live page aloud and fix weak sentences through docs/content.md, complete the image log with source, licence and alt text for every image, and run a five-second test of the hero on one person.
Open lesson 3.5 →
3.6
Mobile and accessibility
55 min + 25 home
The site works on a phone and for people using a keyboard or screen reader.
What the lesson covers
Prerequisites
Checkpoint lesson-3.5; a phone for real-device testing.
Covers
- Responsive layout: breakpoints, flexible grids, touch targets, mobile menu.
- Testing at phone, tablet and desktop widths.
- Accessibility essentials: headings in order, contrast, labels, focus states, keyboard navigation.
- Running an automated accessibility check and having Claude fix the findings.
Do along
Test three widths, complete the page using only the keyboard, fix what fails.
Done when
No horizontal scrolling at phone width, every interactive element is reachable by keyboard, and the automated check reports no serious issues.
Homework
Watch another person use the live site on a different phone, repeat the keyboard-only test on a comparable business's site, and check readability and reach on the student's own phone in bright light with one hand.
Open lesson 3.6 →
3.7
The lead form
55 min + 25 home
A form that validates input and guides the visitor, ready to be connected to the backend.
What the lesson covers
Prerequisites
Checkpoint lesson-3.6.
Covers
- Choosing fields: every extra field costs conversions.
- Validation in the browser: required fields, email and phone formats, clear error messages.
- States: idle, sending, success, error.
- A temporary fake submission so the interface can be finished now.
Do along
Build the form component and place it in the hero and final sections.
Done when
Invalid input shows helpful errors and valid input shows the success state.
Homework
Read every form message aloud and rewrite the stiff ones through docs/content.md, watch one person fill in the form unaided, and compare the field choice with three similar businesses' forms without changing the four field names.
Open lesson 3.7 →
3.8
Supporting pages
45 min + 30 home
Every page a real site needs besides the landing page.
What the lesson covers
Prerequisites
Checkpoint lesson-3.7; the business's legal name and contact details for the legal pages.
Covers
- Thank-you page: what it tells the visitor and why nothing links to it.
- Privacy policy and terms pages: what they must describe; drafting with Claude and the limits of that.
- A custom "page not found" page.
- Favicon, page titles and descriptions, link-preview image.
Do along
Build the four pages and redirect the form's success state to the thank-you page.
Done when
The privacy and terms pages are linked from the footer, a valid submission lands on the thank-you page, a wrong address shows the custom 404, and a shared link shows a correct preview.
Homework
Name a reviewer and date for the legal pages in docs/legal-review.md, compare the home page title and description with three real search results, and test the link preview in a second messaging app with one other person.
Open lesson 3.8 →
3.9
Speed and search basics
55 min + 30 home
A site that loads quickly and that search engines can read.
What the lesson covers
Prerequisites
Checkpoint lesson-3.8.
Covers
- Why speed matters for conversion and ad costs.
- Measuring with Lighthouse; the Core Web Vitals in plain language.
- Fixes: image optimisation, font loading, removing unused code.
- Search basics: titles, descriptions, sitemap, robots file, structured data.
Do along
Measure, have Claude fix the top issues, measure again; add a sitemap and robots file.
Done when
Before-and-after Lighthouse reports are saved in docs/ and the sitemap opens on the live domain.
Homework
Run Lighthouse on a second page and on a comparable business's home page and save the figures in docs/lighthouse/other-pages.md, time the live site on a phone over mobile data, and record what a search for the business shows today.
Open lesson 3.9 →