Feedback Page

Technical Description

The feedback page combines a small programme directory and a feedback form in one page. I used separate sections for the volunteer opportunities, review area, and form so the content is easy to follow. The programme area uses a horizontal scroll layout with three cards, short details, and action buttons. Below that, I added a rating summary and three review cards to make the page feel active and informative.

For styling, I used CSS flex and grid layouts for spacing and alignment. JavaScript is used for the main interactive parts of the page: the live character counter, form checking, custom error messages, and the success message shown after valid submission. I also included a sort dropdown and grouped the form fields with fieldsets and legends to keep the structure clear.

Accessibility

I used clear headings, labelled form controls, readable colour contrast, and visible validation feedback to support accessibility. Each input is paired with a label so screen readers can identify fields correctly. Error messages appear close to the related input, and the character counter provides helpful feedback without replacing the main label text. Buttons use clear wording, and the page structure follows a logical reading order to make keyboard navigation easier.

Link to the validation page

View Validation Report

Link to the page

View Feedback Page

Team Page

Technical Description

The team page uses a responsive grid with four member cards. Each card includes an image, a name, a role, and an extra detail panel. The layout changes across screen sizes so the cards stack on small screens and spread across the page on larger screens.

I used hover and keyboard focus to reveal the hidden details on each card. This was done with simple positioning, opacity, and transition effects. I also added tabindex="0" to the cards so keyboard users can open the same information without using a mouse.

Accessibility

I included alt text for all member images and ensured that the hidden detail panel becomes visible on keyboard focus as well as mouse hover. Focus outlines are visible, which helps keyboard-only users understand where they are on the page. Text is grouped with headings and paragraphs rather than inserted only as decorative overlays, and the card order follows a meaningful structure. These choices improve accessibility while still keeping the design visually engaging.

Link to the validation page

View Validation Report

Link to the page

View Team Page

Content Page

Technical Description

My content page is about inclusive learning under SDG 4: Quality Education. It is written as a long page with six clear sections: introduction, tools, benefits, challenges, future, and conclusion. At the top of the page I added internal links so users can jump to each section quickly.

The page uses images with alt text, clear headings, and repeated styling through the content-image class. CSS is used for spacing, image presentation, and the small navigation menu at the top. A fixed “Go to top” link is included to make the page easier to use when scrolling through longer content.

Accessibility

The content page uses heading levels in order, meaningful link text, alt text for images, and a local navigation menu with a clear ARIA label. The internal links help users move around long content more easily, especially when they do not want to scroll through the full page. I also kept the paragraph widths readable and ensured the page remains usable on mobile devices. These choices help make the page inclusive in both topic and implementation.

Link to the validation page

View Validation Report

Link to the page

View Content Page

Challenges and Lessons Learned

The main challenge on the feedback page was fitting several features into one clear layout. I solved this by splitting the page into simple sections and keeping the form styling consistent. Another challenge was writing form validation messages that were easy to understand.

On the team page, I had to make sure the card interaction worked for both mouse and keyboard users. On the content page, the challenge was organising a long topic into sections that were easy to read. These tasks helped me improve my understanding of structure, accessibility, and clear page design.

Compliance

The pages I developed were created for an educational purpose and are based on the SDG 4 theme of the website. I kept the content appropriate, respectful, and suitable for a university coursework website. I did not include harmful, misleading, or offensive material, and I avoided adding any malicious scripts or unsafe features.

I also considered Janet guidance by using simple semantic HTML structure, clear headings, and accessible page organisation. Images used on my pages include alternative text, and the Team page was designed to support keyboard access as well as mouse interaction. On the Feedback page, the form is used only as a coursework feature, and I kept the input fields relevant to the task. I also aimed to use original writing and carefully selected supporting resources so the pages remain suitable for academic use and consistent with accessibility and copyright expectations.

Group Meetings and Individual Contribution Log

The table below records my own contribution as Student 3 during the development of the group coursework website.

References

• Duckett, J. (2011) HTML and CSS: Design and Build Websites. Indianapolis: John Wiley & Sons.
• W3C (n.d.) The W3C Markup Validation Service. Available at: https://validator.w3.org/ (Accessed: 26 March 2026).
• United Nations (n.d.) Sustainable Development Goal 4: Quality Education. Available at: https://sdgs.un.org/goals/goal4 (Accessed: 26 March 2026).
• MDN Web Docs (n.d.) HTML: HyperText Markup Language. Available at: https://developer.mozilla.org/ (Accessed: 26 March 2026).
• W3Schools (2025) HTML Tutorial. Available at: https://www.w3schools.com (Accessed: 10 March 2026).
• Google (2025) Google Flow (Image Generation Tool). Available at: https://labs.google/ (Accessed: 10 March 2026).