Build a complete community event page

Project brief

A community group needs one page that answers practical questions before visitors travel: what the event is, when each activity happens, how to reach the venue, and what access arrangements exist. Your job is to make those answers easy to find without a registration wall or a collection of decorative cards that hides the important details.

The finished page contains a site header, a main event introduction, fragment navigation, a real schedule table, access information, frequently asked questions, and a footer. All destinations on the page work without a network request. The content uses a fictional event, so it is a learning artifact rather than an announcement of an actual public gathering.

Begin with the information hierarchy. A visitor arriving from a search result should understand the event from the h1 and first paragraph. A returning visitor should jump directly to the schedule or access section. A keyboard user should reach the main content without traversing every navigation link on each visit.

Learning objectives

Combine semantic HTML, accessible controls, clear reading order, and deliberate browser behavior in a complete small interface. Explain each structural decision, then verify the result with the acceptance checks below.

Prerequisites

Complete the linked lessons before starting. Use a text editor and a browser with developer tools. The provided solution runs entirely in the browser and uses no external libraries or assets.

Design and implementation decisions

The schedule is a table because each activity has a time and location relationship. The table caption identifies the dataset, and column headers describe the values. It is wrapped in an overflow container so a narrow viewport does not force unreadably small text.

The FAQs use details and summary because they are supplementary questions rather than a separate modal task. Essential information, including the venue and step-free entrance, remains visible outside the disclosures. The date uses time with a machine-readable datetime, while the visible wording is understandable on its own.

The page does not include a fake Book now button. Its purpose is information, and all links lead to real sections in the example. If you later add registration, define a genuine receiving workflow and confirmation state before presenting it as available.

Build it step by step

1. Write the event introduction and identify its main heading.
2. Create a skip link and a main element with the matching ID.
3. Add section navigation using unique fragment targets.
4. Mark up the schedule with a caption, header cells, and body rows.
5. Write visible access information and three FAQ disclosures.
6. Apply responsive spacing and verify the page without CSS.

Runnable solution

HTML structure

<a class="skip" href="#main">Skip to event details</a>
<header><p><strong>Northside Community</strong></p><nav aria-label="Event sections"><a href="#schedule">Schedule</a><a href="#access">Getting here</a><a href="#questions">Questions</a></nav></header>
<main id="main">
<p class="eyebrow">A day for making and sharing</p><h1>Community Makers Day</h1><p>Join local makers for practical workshops, repair demonstrations, and a shared afternoon meal.</p><p><time datetime="2026-11-14">Saturday 14 November 2026</time> · 10:00–16:00 · Northside Hall</p>
<section id="schedule" aria-labelledby="schedule-title"><h2 id="schedule-title">Plan your day</h2><div class="table-scroll"><table><caption>Workshop schedule</caption><thead><tr><th scope="col">Time</th><th scope="col">Activity</th><th scope="col">Location</th></tr></thead><tbody><tr><th scope="row">10:00</th><td>Welcome and introductions</td><td>Main hall</td></tr><tr><th scope="row">11:00</th><td>Repair a small household item</td><td>Workshop room</td></tr><tr><th scope="row">13:00</th><td>Shared lunch</td><td>Courtyard</td></tr><tr><th scope="row">14:00</th><td>Build your first web page</td><td>Learning room</td></tr></tbody></table></div></section>
<section id="access" aria-labelledby="access-title"><h2 id="access-title">Getting here and access</h2><p>Northside Hall, 18 Garden Lane. The number 4 bus stops at Garden Square, a level five-minute walk away.</p><p>The side entrance has a step-free ramp. An accessible toilet is available beside the main hall. Ask the welcome desk for a quiet seating area.</p></section>
<section id="questions" aria-labelledby="questions-title"><h2 id="questions-title">Before you arrive</h2><details><summary>Do I need to bring equipment?</summary><p>Basic tools are provided. Bring a notebook and any small item you want advice about repairing.</p></details><details><summary>Is there a charge?</summary><p>The event and workshops are free. Contributions to the shared lunch are welcome but optional.</p></details><details><summary>Can children attend?</summary><p>Yes. Children should attend with an adult, and some tool demonstrations have age restrictions explained by the facilitator.</p></details></section>
</main><footer><p>This fictional event page is an HTML learning project.</p></footer>

Styles

body{margin:0;background:#f5f8f6;color:#1c302a;font:16px/1.65 system-ui,sans-serif}main,header,footer{max-width:940px;margin:auto;padding:24px}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.12}h2{line-height:1.3}a{color:#12644d;text-underline-offset:3px}button,input,select,textarea{font:inherit}button{cursor:pointer;background:#12644d;color:white;border:0;padding:10px 16px;border-radius:6px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bc6f00;outline-offset:3px}section,article,fieldset{background:white;border:1px solid #d7e5de;padding:20px;border-radius:10px;margin:20px 0}label{display:block;margin-top:12px}input,select,textarea{padding:8px;border:1px solid #73887e;border-radius:4px;max-width:100%;box-sizing:border-box}table{border-collapse:collapse;width:100%}th,td{border:1px solid #c8d7cf;text-align:left;padding:10px}caption{text-align:left;font-weight:700;margin-bottom:10px}nav{display:flex;flex-wrap:wrap;gap:16px}summary{cursor:pointer;font-weight:650;padding:8px}footer{color:#4e665b}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;padding:8px;z-index:10}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#12644d;font-weight:700}.table-scroll{overflow:auto}section[id]{scroll-margin-top:20px}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Build a complete community event page</title>
<style>body{margin:0;background:#f5f8f6;color:#1c302a;font:16px/1.65 system-ui,sans-serif}main,header,footer{max-width:940px;margin:auto;padding:24px}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.12}h2{line-height:1.3}a{color:#12644d;text-underline-offset:3px}button,input,select,textarea{font:inherit}button{cursor:pointer;background:#12644d;color:white;border:0;padding:10px 16px;border-radius:6px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bc6f00;outline-offset:3px}section,article,fieldset{background:white;border:1px solid #d7e5de;padding:20px;border-radius:10px;margin:20px 0}label{display:block;margin-top:12px}input,select,textarea{padding:8px;border:1px solid #73887e;border-radius:4px;max-width:100%;box-sizing:border-box}table{border-collapse:collapse;width:100%}th,td{border:1px solid #c8d7cf;text-align:left;padding:10px}caption{text-align:left;font-weight:700;margin-bottom:10px}nav{display:flex;flex-wrap:wrap;gap:16px}summary{cursor:pointer;font-weight:650;padding:8px}footer{color:#4e665b}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;padding:8px;z-index:10}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#12644d;font-weight:700}.table-scroll{overflow:auto}section[id]{scroll-margin-top:20px}</style>
</head>
<body>
<a class="skip" href="#main">Skip to event details</a>
<header><p><strong>Northside Community</strong></p><nav aria-label="Event sections"><a href="#schedule">Schedule</a><a href="#access">Getting here</a><a href="#questions">Questions</a></nav></header>
<main id="main">
<p class="eyebrow">A day for making and sharing</p><h1>Community Makers Day</h1><p>Join local makers for practical workshops, repair demonstrations, and a shared afternoon meal.</p><p><time datetime="2026-11-14">Saturday 14 November 2026</time> · 10:00–16:00 · Northside Hall</p>
<section id="schedule" aria-labelledby="schedule-title"><h2 id="schedule-title">Plan your day</h2><div class="table-scroll"><table><caption>Workshop schedule</caption><thead><tr><th scope="col">Time</th><th scope="col">Activity</th><th scope="col">Location</th></tr></thead><tbody><tr><th scope="row">10:00</th><td>Welcome and introductions</td><td>Main hall</td></tr><tr><th scope="row">11:00</th><td>Repair a small household item</td><td>Workshop room</td></tr><tr><th scope="row">13:00</th><td>Shared lunch</td><td>Courtyard</td></tr><tr><th scope="row">14:00</th><td>Build your first web page</td><td>Learning room</td></tr></tbody></table></div></section>
<section id="access" aria-labelledby="access-title"><h2 id="access-title">Getting here and access</h2><p>Northside Hall, 18 Garden Lane. The number 4 bus stops at Garden Square, a level five-minute walk away.</p><p>The side entrance has a step-free ramp. An accessible toilet is available beside the main hall. Ask the welcome desk for a quiet seating area.</p></section>
<section id="questions" aria-labelledby="questions-title"><h2 id="questions-title">Before you arrive</h2><details><summary>Do I need to bring equipment?</summary><p>Basic tools are provided. Bring a notebook and any small item you want advice about repairing.</p></details><details><summary>Is there a charge?</summary><p>The event and workshops are free. Contributions to the shared lunch are welcome but optional.</p></details><details><summary>Can children attend?</summary><p>Yes. Children should attend with an adult, and some tool demonstrations have age restrictions explained by the facilitator.</p></details></section>
</main><footer><p>This fictional event page is an HTML learning project.</p></footer>
</body>
</html>

Expected output

Create a responsive event page with a schedule, access information, clear navigation, and native FAQ disclosures. The complete file above can be saved as index.html and opened locally. The embedded playground uses the same HTML, CSS, and JavaScript, with additional isolation restrictions.

Acceptance rubric

• Every navigation link reaches the intended section, and no ID is duplicated.
• The heading outline has one main event heading and clear section headings.
• The schedule remains understandable when read row by row; its headers are real th cells.
• The page can be used with keyboard only, including opening and closing every FAQ.
• At 200% zoom, text and controls remain readable and the schedule can be scrolled if needed.
• No essential information depends on color, animation, or a hidden disclosure.

Common mistakes

Check the relationships in the parsed document rather than judging only the screenshot. Repeated IDs can disconnect labels, a button without an explicit type can submit unexpectedly, and a visual heading may use the wrong semantic level. Test the supplied interaction after changing its structure instead of assuming the JavaScript selectors still find the intended controls.

Accessibility and browser notes

Use Tab and Shift+Tab through the entire interface. Focus must remain visible, and every control must have a useful accessible name. Increase browser zoom and verify that text wraps without hiding actions. Native control appearance varies by browser. A polished screenshot is not evidence that the keyboard workflow or error recovery works; exercise both separately.

Take it further

Add a printable stylesheet that removes unnecessary navigation while preserving the event details. Then replace the fictional information with a real event only after confirming the date, venue, and access arrangements with the organizer. If you add a map, keep the textual address and directions available so the page remains useful when the embed fails.

For a portfolio review, explain why the schedule uses a table and why the FAQs use native disclosures. Demonstrate the keyboard workflow live. That evidence communicates stronger understanding than merely showing a desktop screenshot.

Related lessons

• Semantic page structure
• Accessible tables
• FAQ disclosures

Reference standards

WHATWG HTML Living Standard · WAI tutorials