A small restaurant website

The problem

Build a three-page website for a neighbourhood restaurant: a home page, a menu and a booking page, linked together.

Requirements

• Three separate documents linked with relative addresses
• A consistent header and navigation on each page
• A menu in tables, with a caption, thead and scope on every header
• A booking form with date, party size with limits, phone and a time drop-down
• A unique title and description on every page
• Open Graph tags and a canonical link on the home page

Technologies

• HTML
• Open Graph tags
• schema.org structured data

Step by step

1. Decide on the three pages and write the title and description of each.
2. Build a shared frame, with the header and navigation, and copy it to three files.
3. Write the home page with an hours table, a photo and a location section.
4. Write the menu page, with one table per category.
5. Write the booking form, choosing suitable input types and rules.
6. Add the Open Graph tags, the canonical link and structured data to the home page.
7. Follow every link, submit the form with bad values, and test everything by keyboard.

Expected result

A working three-page site you can open from your own computer, where each page has its own title and every form rule works.

How it is evaluated

• Every internal link works, and uses a relative address
• Tables are properly marked up, and are used only for data
• The form rejects bad input and is fully labelled
• Each page has a unique title and description
• Landmarks and headings are correct on every page

Ways to improve it

• Add a dialog to confirm a booking
• Add a sandboxed map iframe with a title
• Make it responsive after the CSS course