A published page for a real business

The situation

A business you know has no website — a Facebook page at most. Build it a single page that says what it does, who it is for, how to reach it, and what it charges, publish the page on the open internet, and open it on a phone over mobile data.

One page, done properly, beats a five-page site nobody finishes.

What you'll be able to show

• Write HTML that still makes sense with the styling switched off
• Style with one font, a palette of three colours and a card class you reuse
• Make a layout that survives being narrowed to a phone
• Publish, and test on a real phone, not a resized window

What you need

• A text editor (VS Code, or Notepad if that is what you have) and a browser
• A free static host (GitHub Pages or Netlify Drop)
• One business's real details: name, what it does, opening hours, phone, three prices

Tasks

1. 1Structure first, no styling

   Write index.html with one h1 (the business name and what it does), three h2 sections — What we do, Prices, Find us — a list of at least three services, a table or list of three prices, a phone number as a tel: link, and one image with real alt text.
   A correct result: Opened with no CSS at all, the page reads top to bottom like a sensible document.

2. 2Style with restraint

   Add style.css: one font for the body, one colour for headings, one accent, and a .card class with padding, background and rounded corners used on each section. No inline styles.
   A correct result: The page looks deliberate, and every section uses the same card class.

3. 3Make it responsive

   Add the viewport meta tag, make the image scale with max-width 100%, and add one media query at 600px that stacks anything side by side. Narrow the window slowly and fix everything that breaks on the way.
   A correct result: No horizontal scrollbar at any width from 320px up.

4. 4One piece of behaviour

   Add a Show opening hours button that reveals a hidden section with classList.toggle and a CSS class. Open the browser console, cause one error on purpose, read it, fix it.
   A correct result: The button works; you can name the error you caused and the line it named.

5. 5Publish

   Put the page on a free static host. Open the live address on your phone over mobile data, not Wi-Fi. Send the link to one person and ask them what the business does.
   A correct result: A public URL, a screenshot from your phone, and the person's answer in one line.

6. 6The handover note

   Write five lines for the business: the address, how to change the phone number, how to change a price, where the image lives, and what it would take to add a second page.
   A correct result: Five lines a non-technical owner could follow.

What to hand in

The live URL, the two files (index.html and style.css), the phone screenshot, and the five-line handover note.

How it is marked