The brief: a small business site

Seven modules of pieces. This one is the whole thing: a real site for a real kind of business, built from nothing, audited and put online.

There is a finished version to compare against — the Aarambh Yoga site — and it is there for when you are stuck, not to start from. Build yours first.

The brief

A small yoga studio in Kothrud, Pune wants a website. They have no website now; they take bookings on WhatsApp and lose track of them.

What they told you, which is roughly what a real client tells you:

We are a small studio, two teachers, classes morning and evening. People need to know what classes we run and when, what it costs, and how to find us. Most people find us on their phone. The first class is free and we want people to actually book it.

What they did not tell you, and what you have to decide:

What the four or five pages are.
What goes on the home page, and in what order.
What the one thing you want a visitor to do is.
What the timetable looks like on a 360-pixel screen.

That deciding is the work. The HTML and CSS are the easy part by now.

The constraints

These are what make it a capstone rather than a free-for-all.

HTML and CSS only. No framework, no build step, no JavaScript. You have everything you need — <details> and <dialog> for interactivity, :has() for state, container queries for components.

Four pages plus a 404. Enough to need shared navigation and consistent structure; small enough to finish.

It must pass the audit in the last lesson. WCAG AA, no horizontal scroll at 320px, keyboard-operable throughout, and it must work in dark mode.

It must be genuinely fast. Under 500 KB and under 20 requests on the first view, and usable on Slow 4G.

It must be deployed, on a URL you can send to somebody.

Decide these before writing any HTML

Half an hour with a pen saves a day of restructuring.

1. The one action

Every page of a small business site exists to make one thing likely. Here it is book a free class. So that link is in the header on every page, it is the first button in the hero, and the contact page is the form rather than a paragraph with an email address in it.

Write your one action down. If you cannot name it, the site has no job.

2. The pages, and what each is for

index.html     what this is, what you offer, when you are open, where you are
classes.html   the timetable, the fees, what to bring
about.html     who teaches, and reassurance for a nervous beginner
contact.html   the booking form and the other ways to reach you
404.html       a wrong turn, with the whole navigation on it

Four content pages. A fifth is usually a sign that two of them are thin.

3. The content, at 360 pixels

This is the mobile-first argument from module 4, done as a planning exercise rather than a CSS one. Write out what the home page says, in order, as if on a phone:

1  Who and where            Kothrud, Pune
2  The headline             Yoga that starts where you are
3  One sentence of what     small classes, morning and evening, beginners upwards
4  The action               Book a free class
5  The three class types
6  Opening hours
7  Address, phone, WhatsApp, map

Seven things. Anything you were about to add — a carousel, testimonials, a photo gallery, an Instagram feed — has to displace something on that list. Usually it cannot, and that is the point.

4. The hardest piece of content

Find it now, because it decides your layout. Here it is the timetable: six days, five time slots, thirty cells. It is genuinely two-dimensional data, so it is genuinely a <table> — and a table with six columns does not fit in 320 pixels by any arrangement.

The answer from module 1 is to wrap it and let it scroll sideways inside its own box. Not shrink the text to 9px. Not hide columns so phone users get less information.

Decide that now rather than discovering it at 11pm.

5. Your tokens

Before any component, write the values down once:

:root {
  /* the palette, named for what the colours are */
  --green-700: #1f4f3f;
  --grey-900: #1f1f1f;

  /* semantic tokens, named for what they do. Components use only these. */
  --colour-text: var(--grey-900);
  --colour-accent: var(--green-700);
  --colour-border: #767676;      /* a boundary needs 3:1 */
}

The two-layer naming from module 6, and the practical reason from module 7: a rebrand then changes six values rather than sixty.

Check the contrast as you choose them, not afterwards. Write the ratio in a comment. Choosing a brand colour that fails 4.5:1 and discovering it after building everything is a bad evening.

6. Real content, not lorem ipsum

Write the actual sentences now — badly is fine, you can improve them later. Lorem ipsum is uniform and polite and real text is neither: it is too long, or one word, or a business name of four words.

Module 7's whole argument is that the layout must survive real content. You cannot test that against placeholder text that was generated to fit.

What "finished" means

The checklist you will run in the last lesson, so you know now:

Four pages plus a 404, each with a unique specific <title>.
320px with no horizontal scroll; 400% zoom still usable.
Tab through everything, visible ring on every stop, no trap.
One <h1> per page, no skipped levels, <main> present.
Every image has an alt that replaces it, and width/height.
Contrast passes AA in light and dark mode.
Reduced motion honoured.
Under 500 KB, under 20 requests.
Deployed, and opened on a real phone.

A note on scope

You are building a brochure site. It does not take payments, does not have accounts, and the form posts somewhere you do not control. That is correct for a business like this, and it is correct for what you have learned.

If you want the version with a database, a cart and real orders, that is the Full-Stack Web Development course and a different kind of project entirely. Do not try to build it with CSS.

Check your work

What the deciding work is. The pages, the order, the one action, and the hardest piece of content — not the HTML.

The constraints. HTML and CSS only, four pages plus a 404, passes the audit, under 500 KB, deployed.

Why name the one action. Every page exists to make one thing likely; if you cannot name it, the site has no job.

Why plan the home page at 360px. Anything extra must displace something on a seven-item list.

Why find the hardest content first. It decides the layout — here, a six-column timetable that cannot fit 320px.

What to do with a table that does not fit. Wrap it and scroll it sideways. Not shrink the text, not hide columns.

Why write tokens before components. A rebrand becomes six values, and you check contrast while choosing rather than after building.

Why not lorem ipsum. It was generated to fit, so it cannot test whether your layout survives real content.

Practice

Write down your one action in a sentence.
List your pages and one sentence saying what each is for.
Write the home page's content as an ordered list, as it would appear at 360px.
Find one thing you wanted to include that did not make the list. Justify it or drop it.
Identify your hardest piece of content and decide now how it behaves at 320px.
Write your token block, with the contrast ratio in a comment on every colour.
Check every one of those ratios in devtools before continuing.
Write the real text for your home page. Include one business name of four words and one description of six lines.
Sketch the home page at 360px and at 1200px on paper. Two minutes each.
Write the finished-checklist above into your project's README, so it is in front of you.

Official documentation

W3C WAI — Planning and managing accessibility — Deciding accessibility requirements at the start, which is when they are cheap.
web.dev — Responsive web design basics — The content-out approach to planning a layout.
MDN — HTML elements reference — The page to browse while deciding which element each piece of content is.
The finished site — For comparing against when you are stuck.

Next: building it.