Individual Technical Report

Swosti: Template & Home Page Specialist

Technical Description Accessibility JANET Compliance Meeting Log Lessons Learned

1. Technical Implementation

HTML Structure

I utilized semantic HTML5 elements like <header>, <nav>, <main>, and <footer> to create the core template as described in LO1. This ensures a logical document flow and better SEO rankings.

CSS Techniques

The layout primarily uses **CSS Flexbox** for navigation and **CSS Grid** for the homepage card layout. I established a global design system using CSS Variables (--primary-blue, etc.) to maintain consistency across all student contributions.

Gallery Logic: I implemented the gallery's modular expansion using JavaScript event listeners and CSS transitions, avoiding "checkbox hacks" for cleaner code.

2. Accessibility Considerations

I ensured that all interactive elements, specifically the homepage tiles, have visible focus states. Every image has descriptive `alt` attributes to support screen readers. The color palette meets WCAG 2.1 AA contrast standards for readability.

3. JANET Compliance

All pages published comply with the JANET Acceptable Use Policy. This includes avoiding any offensive content, ensuring academic integrity, and using only referenced, royalty-free assets. All linked content is relevant to the educational purpose of the SDG 6 project.

4. Group Meetings & Contribution Log

# Date & Time Format Objective Attended My Individual Contribution
1 [2026-03-27] Face-to-face Agree SDG, assign roles, agree folder structure Yes Agreed to take Swosti responsibilities: Home, Gallery, Content page. Contributed to choosing SDG 6 and the water crisis focus.
2 [2026-03-28] Online (Teams) Review shared template and global CSS from Swosti Yes Reviewed the shared template structure and confirmed my pages would integrate correctly. Flagged the need for a scrollable programme section on the Feedback page.
3 [2026-03-29] Online (Teams) Progress check - first drafts Yes Shared draft home.html with the group for review. Discussed JavaScript form validation approach. Received feedback on the team card layout.
4 [2026-03-30] Face-to-face Content review and consistency check Yes Presented content_ST1.html structure. Agreed on the sanitation gap topic and eight-section layout. Confirmed image placeholder naming convention with the group.
5 [2026-03-31] Hybrid Accessibility and validation review Yes Ran HTML validation on all three pages. Resolved minor validation errors. Added missing aria-label attributes and confirmed tabindex on team cards.
6 [2026-04-01] Online (Teams) Final review and submission preparation Yes Completed Page Editor and Validation page. Uploaded files to university server. Confirmed all navigation links work correctly across the full site.

5. Challenges & Lessons Learned

The primary challenge was coordinating CSS variables so that different interactive pages (like AIS and Gallery) didn't clash. I learned that modular CSS organization is vital for group success. I also gained experience in writing accessible SVG code for the sitemap integration.

6. References