Build a landing page for a real or made-up product: a hero, features, pricing, testimonials and a contact form.
The project for module 1, Foundations. It proves: layout, responsive design, accessibility and deployment.
Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.
A local café or bakery with a menu and opening hours
A mobile app launch page with app store buttons
A freelancer offering one service with 3 price plans
Two short builds that practise the skills this project needs. About 2.5 hours in total.
Build a card with your photo, name, short bio and 3 social links.
Done when: The card looks right on a phone and every link has a visible keyboard focus.
Build three pricing plans side by side, with the middle one highlighted.
Done when: The layout switches from 3 columns to 1 without any sideways scrolling.
7 steps in order. Each one ends with a clear check, so you always know when to move on.
Pick your product, write the real text for every section and sketch the layout on paper for phone and desktop.
Done when: You have all the copy in a text file and two sketches.
Write words first. A design built around lorem ipsum breaks when real text arrives.
Build every section with semantic tags: header, nav, main, section, footer. No CSS yet.
Done when: The page reads in a sensible order with CSS turned off, and there is exactly one h1.
Use headings in order (h1, then h2 per section). Screen readers use them to jump around.
Add CSS for a 360 px wide screen: spacing, colors, fonts, buttons.
Done when: Nothing scrolls sideways at 360 px and every button is at least 44 px tall.
Set CSS variables for colors and spacing at the top so the whole page stays consistent.
Add breakpoints so features and pricing become rows and columns on wider screens.
Done when: The page looks intentional at 768 px and 1440 px, not just stretched.
Use CSS Grid with repeat(auto-fit, minmax(260px, 1fr)) for cards. It often needs no media query.
Build the contact form with labels, required fields and clear error messages.
Done when: You can fill and submit it using only the keyboard.
Every input needs a label with a matching for/id. Placeholder text is not a label.
Run Lighthouse in Chrome DevTools and fix what it reports.
Done when: Accessibility scores 90 or more.
Most points are lost on color contrast and images without alt text.
Push to GitHub and deploy on GitHub Pages or Vercel. Write a short README with a screenshot.
Done when: A live URL works on your phone.
Add the live link to the GitHub repo's About box so recruiters see it first.
Tick each one when it's done. Saved to your account.
Optional. One of these makes your project stand out from the tutorial version.
Free APIs, tools and docs for this project.