Projects›Extra· 120 min read
Project: Business Landing Page
A bigger, multi-section landing page for a café or shop — the kind of page clients actually pay for.
What you will learn
- Structure a realistic multi-section page
- Combine semantic layout, images, a table and a form
- Practise reading a brief and meeting requirements
The brief
Build a one-page website for a small business of your choice (café, gym, salon, bookstore). It should feel like a real landing page — just without heavy CSS for now.
Required sections
<header>with the business name and a<nav>menu that jumps to each section using#anchors.- A “Hero”
<section>with a big heading, a tagline and an image. - An “About”
<section>with a couple of paragraphs. - A “Menu” or “Services”
<section>using a<table>(item + price). - A “Gallery”
<section>with three captioned<figure>images. - A “Contact”
<section>with a working<form>(name, email, message) and a map<iframe>or address. - A
<footer>with copyright and social links.
Tip: Write all the empty section tags with their ids first (the skeleton), then fill each one. Building the outline before the detail is exactly how professionals work.
Note: Keep your code tidy and indented. When we add CSS next module, a well-structured page is dramatically easier to style.
✍️ Practice
- Build the full landing page meeting all seven section requirements.
- Make sure every nav link jumps correctly to its section.
🏠 Homework
- Write a short paragraph listing which HTML tags you used and one thing you found difficult.