Learning outcome: Plan, build, test and prepare a responsive services website for handover. This is one complete project, not a claim that all 36 courses are finished.
Open the demo in a browser. No internet, paid API or account required. Form is local validation only.
LESSON 01 — Project scope and acceptance criteria
Concept and theory
A website is successful when a defined user can finish a measurable task. Requirements should distinguish must-have functionality from optional decoration.
Guided practical
Write a client brief: business name, audience, three services, contact details, target devices, accessibility needs and measurable acceptance criteria.
Expected result and verification
A written brief listing 3 services and at least 5 pass/fail acceptance tests.
Common error and solution
Vague scope leads to endless changes; confirm the brief before coding.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 02 — Semantic HTML structure
Concept and theory
Semantic elements tell browsers and assistive technologies what each part means. Use header, nav, main, section and footer for their intended purposes.
Guided practical
Open demo.html and locate header, nav, main, sections and footer. Change the brand text and one section heading, then reload.
Expected result and verification
The page retains a logical heading hierarchy and the updated text appears.
Common error and solution
Do not use multiple main elements or skip headings purely for visual size.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 03 — Navigation and section anchors
Concept and theory
A fragment link like #services targets an element with the matching id. This avoids complex routing for a single-page site.
Guided practical
Find the navigation links and matching section IDs. Add a new FAQ link and section; verify the browser scrolls to the section.
Expected result and verification
Each navigation link opens the intended section, not a different page.
Common error and solution
If a link does nothing, inspect its href and target id for mismatches.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 04 — Design tokens and consistency
Concept and theory
CSS custom properties centralize brand colors, spacing and border radius so components remain consistent.
Guided practical
In :root change --accent to another accessible color and --radius to 12px. Inspect all cards and buttons.
Expected result and verification
Cards and buttons update consistently without editing each selector.
Common error and solution
Test contrast: pale text on pale buttons can be unreadable.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 05 — Responsive layout with Grid
Concept and theory
CSS Grid distributes repeated cards into flexible columns. minmax() prevents cards becoming too narrow.
Guided practical
Resize browser from desktop to narrow phone width. Inspect the services grid and update the minmax() threshold.
Expected result and verification
Cards display in multiple columns on wide screens and one column on narrow screens.
Common error and solution
Horizontal scrolling often comes from fixed widths; use max-width and minmax.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 06 — Accessible interactive controls
Concept and theory
Buttons must have meaningful labels, visible focus and keyboard behavior. Forms need associated labels and errors.
Guided practical
Navigate the demo using Tab, Shift+Tab and Enter. Check focus outlines and descriptive field labels.
Expected result and verification
All actions can be reached without a mouse; focus is visible.
Common error and solution
Never remove outlines without replacing them with a clear focus indicator.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 07 — Input validation and user feedback
Concept and theory
Client-side validation improves usability but does not secure a server. Validate both input shape and business requirements.
Guided practical
Submit an empty form, invalid email, then valid sample data. Observe the inline status message.
Expected result and verification
Invalid input is rejected; valid input is acknowledged without claiming an email was sent.
Common error and solution
A demo form does not send messages; production requires a backend and server-side validation.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 08 — JavaScript event handling
Concept and theory
addEventListener connects user actions to logic without inline JavaScript. Prevent default submission when handling a demo locally.
Guided practical
Find the submit listener, add a console.log for the valid path, and retest.
Expected result and verification
Browser console shows the event and the UI displays a success message.
Common error and solution
If script fails, inspect console errors and ensure the element exists before binding.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 09 — Search and filtering
Concept and theory
Filtering visible cards helps users find content quickly. Normalize text with toLowerCase() and trim().
Guided practical
Type service names in the search box, including mixed case and extra spaces. Add a new card and test filtering.
Expected result and verification
Matching services remain visible and a no-results message appears when needed.
Common error and solution
Keep search scoped to relevant cards and avoid hiding essential navigation.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 10 — Metadata and basic SEO
Concept and theory
Title, description, language and meaningful headings help browsers and search engines interpret a page. SEO is not guaranteed ranking.
Guided practical
Edit title, meta description, html lang and service descriptions for a fictional local business.
Expected result and verification
Browser tab title changes; page source contains the description and correct language.
Common error and solution
Do not stuff keywords or promise rankings; measure actual indexing later.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 11 — Performance and privacy
Concept and theory
Small pages with no third-party dependencies load reliably. Data collection should be purposeful and disclosed.
Guided practical
Open DevTools Network, reload and check that demo assets are local. Review whether the form stores or transmits anything.
Expected result and verification
No third-party requests; form displays feedback without transmitting data.
Common error and solution
Never enter real customer information in training demos.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
LESSON 12 — Testing, deployment and client handover
Concept and theory
A production release needs documented checks, hosting, rollback and clear ownership. A local demo is not a production website.
Guided practical
Test at 360px and 1280px, keyboard navigation, invalid/valid form, links and search. Host a copy on a test domain and repeat checks.
Expected result and verification
Completed acceptance checklist and handover note listing known limitations.
Common error and solution
Use HTTPS, server-side validation and real contact delivery before commercial launch.
Independent practice
Repeat this task without following the instructions. Write down what changed, how you verified it and one improvement you would make for a real client.
Final project assessment
Build your own fictional digital-services site with 4 service cards, keyboard-friendly navigation, mobile layout, a search field and a clearly labelled non-sending demo form. Test at two screen widths and document every failing test before calling it complete.
Completion criteria: All links navigate correctly, no horizontal overflow at 360px, keyboard focus is visible, invalid form input is rejected, valid input never claims an email was sent, and service search behaves correctly.
Production boundary: For real deployment, add server-side validation, privacy disclosures, secure hosting, a real message delivery service and consent as needed.