Home page

Technical Description

I developed the Home Page using the shared HTML template created for the team website. The page uses semantic HTML elements such as header, nav, main, section, and footer to create a clear and accessible structure. The main content was organised using card-based sections to present the website’s purpose, mission, and key actions related to our chosen SDG.

I used the shared global CSS file to maintain consistency across the website, especially for typography, spacing, colours, buttons, and navigation styling. In addition, I used embedded CSS on the Home Page to style page-specific features such as the interactive gallery, hover effects, and section emphasis. The interactive gallery was designed to link users directly to the four individual content pages, helping users navigate the website more easily.

I also implemented the active navigation state so that the Home link is visually highlighted when the user is on this page. This improves usability and helps users understand where they are within the site structure.

Accessibility

Accessibility was considered throughout the Home Page design. All images include meaningful alternative text so screen readers can describe visual content. I used a logical heading structure to support readability and navigation, and ensured that text and background colours had sufficient contrast. Navigation links were labelled clearly, and hover states were used to provide visual feedback for interactive elements.

Link to the validation page

View Validation Report, use the marker to jump to the corresponding section of the validation page.

Link to the page

View Home Page

Gallery Page

Technical Description

I developed the Gallery Page to provide an interactive visual experience related to the website theme. The page was structured using the shared template and styled with the global CSS for consistency. I used a gallery layout with thumbnail images and labels to present visually relevant SDG-related content.

JavaScript was used to control the gallery interactivity. Event listeners were added so that when a user clicks on a thumbnail, an extended view is displayed with a larger image and additional descriptive content. I also included JavaScript functionality to allow users to close the expanded view. This ensured that the gallery interaction met the coursework requirement of using JavaScript rather than CSS-only techniques.

I also added page-specific styling to improve the visual identity of the gallery, including hover feedback, spacing, image presentation, and transitions. This helped create a more engaging and user-friendly page.

Accessibility

To improve accessibility, all gallery images include descriptive alt text. Interactive items were made visually clear through hover and focus styling, and the layout was designed with readable spacing and consistent heading structure. The page was also structured semantically to improve screen reader compatibility and general usability.

Link to the validation page

View Validation Report, use the marker to jump to the corresponding section of the validation page.

Link to the page

View Gallery Page

Content Page

Technical Description

I created my individual Content Page using the shared template and global CSS. The page was structured using semantic HTML headings and multiple clearly defined sections to present detailed information related to the chosen SDG topic. I used one main h1 heading followed by h2 and h3 headings to maintain a logical content hierarchy.

To improve navigation within the page, I added an internal navigation menu at the top using anchor links that jump to each main section of the content. Each section was assigned a unique id so users can move quickly between topics. I also implemented a fixed “Go to Top” button using HTML and CSS only, which remains visible while scrolling and allows users to return to the top of the page easily.

The page includes multiple relevant images to support the content, and CSS was used to style these images with spacing, sizing, and visual emphasis. This made the page more engaging while keeping it readable and well-organised.

Accessibility

Accessibility was addressed by using meaningful alt text for all images, a clear heading hierarchy, readable font sizes, and sufficient colour contrast. The internal navigation links were labelled clearly so users can move through the page more easily. The page structure also supports accessibility through semantic HTML and consistent content organisation.

Link to the validation page

View Validation Report, use the marker to jump to the corresponding section of the validation page.

Link to the page

View Content Page

Challenges and Lessons Learned

One challenge I faced was maintaining consistency between the shared template and the individual page requirements. Since the Home Page and Gallery Page needed page-specific features, I had to carefully separate reusable global CSS from page-specific styling. This helped avoid design conflicts across the team website.

Another challenge was implementing interactive gallery behaviour using JavaScript in a way that was both functional and user-friendly. I needed to ensure that clicking thumbnails displayed the correct extended content while keeping the code organised and easy to update.

Through this process, I improved my understanding of semantic HTML, CSS organisation, internal linking, reusable page structures, and JavaScript-based interactivity. I also learned the importance of accessibility and validation in front-end web development.

Compliance

The pages I created were designed to comply with JANET regulations for web publication. I ensured that the content is appropriate for educational use, respectful, and free from offensive or harmful material. Any externally sourced images or resources used in my pages were selected from suitable royalty-free or publicly accessible sources and are properly referenced in the References section.

I also considered responsible web publishing practices by ensuring the website content is clear, relevant, and suitable for a public academic audience. Accessibility features such as alternative text, readable structure, and clear navigation were also included to support inclusive design and responsible online communication.

Group Meetings and Individual Contribution Log

Include a Group Meetings and Contribution Log that documents your engagement with group work.

• A minimum of six (6) group meetings must be recorded.
• Each student must provide their own account of the meetings.
• The log must focus on individual contribution, not just group activity.

Feel free to follow the example table structure below:

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

• iStock (2025) iStock. Available at: https://www.istockphoto.com/ (Last accessed: 11 Feb 2025).
• Duckett, J., 2011. HTML and CSS: Design and Build Websites,John Willey&Sons. Inc. Indianappolis.
• 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).
• 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).