Your goal
Create a responsive, accessible event page and explain its HTML structure.
PROJECT LAB / MODULE 03
Neighbourhood Swap: your first useful website
Build a small site someone could use to find a repair session or swap event.
The situation
The fictional neighbourhood has three events. Residents need to see what, when and where, then use a clear contact link. You will build a real browser page from an approved data sheet.
A first win
Open your own index.html with one working event card.
Keep this artifact
A three-event website, a written brief and a browser test checklist.
Explore the mechanism
This interactive model teaches the mechanism. It does not call a model, search your files or send messages.
Why this works
HTML carries meaning
Headings, lists, navigation and buttons tell browsers and assistive tools what content does. A visual div is not automatically an accessible control.
CSS controls presentation
Spacing and responsive rules should adapt the same content to different screens. Content should remain readable when the viewport changes or text is enlarged.
A website is an artifact
A prompt is a request for a file. The deliverable is the saved code that opens in a browser and survives your tests, not a screenshot of a chat answer.
Build it, step by step
Define the visitor job
Read swap-events.csv and choose one visitor question: which event can I attend this weekend? Write the required information and one primary action.
Check: Your brief names the visitor and an observable success action.
Need a hint?
Use only the fictional supplied events.
Build the semantic page
Ask for one index.html with header, main, three event cards and footer. Save the code as UTF-8 and open it in a browser.
Check: All three records appear without invented details.
Need a hint?
Check that the file extension is .html rather than .html.txt.
Inspect the code
Find the h1, event headings, links and media query. Explain which section contains content and which contains styling.
Check: You can edit one event title without asking AI.
Need a hint?
Use browser developer tools to inspect the rendered element.
Improve the small screen
Use a single-column layout on narrow screens, visible focus styles and comfortable tap targets. Test at 320px and 390px.
Check: No horizontal overflow or clipped event title appears.
Need a hint?
Do not hide overflow to conceal content that is too wide.
Test real actions
Use keyboard Tab to reach the contact link, check its destination and test the page with a long event name.
Check: The action works and focus remains visible.
Need a hint?
A button with no behavior is not a working signup.
Document and hand off
Save a screenshot, the source file and a short note about what the page does and does not do.
Check: A partner can open the file and identify the primary action.
Need a hint?
This first version has no backend or real booking system.
Build with a clear contract
Build a single-file responsive Neighbourhood Swap website from this fictional dataset: Repair Cafe, Saturday 10:00, community room; Book Swap, Saturday 12:00, reading corner; Seed Exchange, Sunday 11:00, covered courtyard. Use semantic HTML, clear event cards, keyboard-visible focus and a narrow-screen single-column layout. No fake signup backend. Explain where I edit content and how I test the contact action.
When it goes sideways
The browser shows code as text
The file is saved with the wrong extension or contains markdown fences.
Try: Save only the HTML content as index.html.
It looks good but the link does nothing
The generated page uses a placeholder destination.
Try: Replace the placeholder with a real approved contact link or clearly label the demo.
Mobile needs sideways scrolling
A fixed-width element exceeds the viewport.
Try: Use responsive widths and inspect the actual overflowing element.
Review your evidence
Tick a criterion only after checking your own artifact. These are self-reported checks, not an automated certification.
Make it your own
Create a repair-cafe microsite
Change the visitor job to finding a repair session. Add a FAQ and one accessibility improvement without copying the original prompt.
- All new facts come from your approved brief.
- FAQ answers unknown questions honestly.
- A partner completes the primary action.
Check the mental model
What is the real deliverable?
Which change belongs mainly to CSS?
Remember the distinction
HTML carries meaning
Headings, lists, navigation and buttons tell browsers and assistive tools what content does. A visual div is not automatically an accessible control.
CSS controls presentation
Spacing and responsive rules should adapt the same content to different screens. Content should remain readable when the viewport changes or text is enlarged.
A website is an artifact
A prompt is a request for a file. The deliverable is the saved code that opens in a browser and survives your tests, not a screenshot of a chat answer.
Go to the source
MODULE 03
MDN: Your first website
Use the primary documentation to verify this part of your build.
Apply it in the project lab