Peace & Justice

Developer Dashboard

Thasreef Mohomad  ·  Student ID: 20240991  ·  Student 1 (Global Template, Home & Gallery)

Completed Tasks & Responsibilities

As Student 1 for Team Humpty Dumpty, I held the critical responsibility of establishing the foundational architecture for our entire web application. My primary objective was to design a robust, scalable global template that my teammates could seamlessly integrate their work into, while also building key introductory pages for SDG 16. My specific deliverables included:

  • The Global Template and sitewide CSS architecture (style.css).
  • The main Home Page, serving as the central hub for our initiative (home.html).
  • The Interactive Image Gallery, utilizing dynamic layouts (gallery.html).
  • My individual Academic Content Page detailing global justice frameworks (content_ST1.html).
  • The Developer Page Editor documenting my technical process (pageEditor_ST1.html).
  • The W3C Validation Evidence page (validation_ST1.html).

Page Links

View Home Page View Gallery Page View Content Page Validation Evidence

Technical Description of Implemented Pages

The Global Template (CSS)

Before anyone could write HTML, I had to engineer a predictable design system. I achieved this by utilizing CSS Custom Properties (Variables) within the :root selector. I defined global variables for --accent-gold, --glass-bg, typography, and spacing. This ensured that regardless of which teammate built a page, the color palette and branding remained perfectly unified. Furthermore, I built the global sticky Navigation Bar and Footer, utilizing CSS Flexbox for semantic alignment. To optimize performance and reduce script dependencies, I implemented interactive elements like hover states, glassmorphism filters, and responsive navigation structures entirely through CSS.

Home Page

The Home page acts as the structural anchor for the site. I focused heavily on a semantic HTML5 outline, utilizing a <header> hero section, multiple <section> blocks for content chunks, and a definitive <footer>. To make the landing page visually engaging without relying on heavy JavaScript, I utilized modern CSS pseudo-elements (::before and ::after) to create layered, glassy background textures. The layout is fully responsive, transitioning from a multi-column desktop view to a stacked mobile view using CSS @media queries.

Interactive Gallery

Building the Gallery required fluid layout management. I engineered the gallery using CSS Multi-column layout (columns: 3 320px;). This approach automatically flows the images into distinct columns without me having to write dozens of breakpoint media queries. I also implemented a JavaScript-driven "Lightbox" feature natively inside the page. When a user clicks an image thumbnail, the script listens for the event, dynamically creates a modal overlay in the DOM, and passes the high-resolution image src into it, providing a premium viewing experience.

Academic Content Page

For my Academic Content Page detailing global justice frameworks, I prioritized a highly readable, semantic structure. I utilized HTML5 elements such as <article> and <section> to logically separate the topics, ensuring the browser accurately outlines the document for screen readers. The page fully inherits my global CSS template, specifically leveraging fluid typography (clamp() functions) and contrast-checked text colors to ensure the long-form reading experience remains comfortable across both desktop monitors and mobile devices.

Challenges and Lessons Learned

Challenge 1 — The CSS Specificity Wars

As the "Template Architect," my biggest challenge occurred during integration week. When my teammates added their individual CSS rules to my global style.css file, things started breaking everywhere. A style intended for Student 3's form would accidentally override the margins on my global navigation bar. As a beginner, it was incredibly frustrating watching my perfect layout collapse.

I learned a massive lesson about CSS Specificity and inheritance. I had to research and implement a stricter naming convention (similar to BEM - Block Element Modifier). Instead of styling generic tags like div or p globally, I refactored the entire stylesheet to use specific, scoped class names (e.g., .nav-container, .editor-section). This "sandboxed" the CSS, ensuring that global styles only applied where intended, and taught me how crucial architecture is in collaborative coding.

Challenge 2 — The Image Proportion Problem in the Gallery

When initially building the Gallery, I tested it with perfectly sized placeholder images. It looked flawless. However, when I replaced them with real photographs of varying sizes (some portrait, some landscape), the multi-column layout completely broke. The image containers stretched unevenly, and the layout looked amateurish.

I initially tried to fix this by hardcoding exact heights and widths in HTML, but that resulted in horribly squished and distorted photos. Through research, I discovered the object-fit: cover; property and combined it with min-height: 250px;. By applying these to my image tags, I forced the browser to crop the images perfectly within their uniform containers without losing their natural proportions. It was a revelation in handling unpredictable user content.

Challenge 3 — Handling Active Navigation States reliably

I wanted the global navigation bar to clearly highlight which page the user was currently viewing (adding an .active class to the link). I initially attempted to automate this with JavaScript by reading the window.location.pathname.

However, I realized that relying on JavaScript for core navigation styling caused a noticeable "flash" of unstyled content before the scripts fully loaded, and completely failed if a user had scripts disabled. To ensure the site remained robust, performant, and fully accessible, I decided the most reliable approach was to manually hardcode the class="active" into the HTML of the specific page being viewed. This taught me that sometimes manual HTML is better than over-engineering a solution with JS, ultimately leading to my decision to drop redundant global JavaScript files.

Accessibility Considerations

Establishing the global template meant I was responsible for the baseline accessibility of the entire project. I focused heavily on the WCAG (Web Content Accessibility Guidelines):

  • Color Contrast & Vision: When designing the dark theme with gold accents, I used contrast checking tools to ensure all text against the --glass-bg met the AA standard for readability. I explicitly avoided using color alone to convey information (e.g., links have hover underlines, not just color shifts).
  • Semantic Landmarks: I structured the master template using native landmarks: <nav>, <main>, and <footer>. This provides screen readers with a "table of contents" for the page layout, allowing visually impaired users to skip navigation and jump straight to the content.
  • Gallery Alt Text: Every single image within the gallery and home page includes highly descriptive alt="" attributes, explaining not just what the image is, but its context regarding the UN SDG 16 goals.

Compliance with JANET Regulations

As the structural lead, I ensured our foundation adhered to the JANET Acceptable Use Policy:

  • Asset Licensing: I sourced all global imagery, including the hero backgrounds and gallery photos, from verified royalty-free platforms (Unsplash/Pexels) under the Creative Commons Zero (CC0) license, strictly avoiding copyright infringement.
  • Code Efficiency: I optimized all CSS architecture to ensure the site consumes minimal bandwidth on university servers, aligning with the mandate for responsible network resource usage and dropping unnecessary JS dependencies.

Group Meetings and Individual Contribution Log

Date / Format Objective Attended? My Individual Contribution
12 Feb 2026 (Face-to-Face) Agree on SDG topic and assign roles. Yes Guided the decision to choose SDG 16. Volunteered for Student 1 to establish the design language, global CSS, and layout structure.
19 Feb 2026 (Discord) Finalize theme and wireframe pages. Yes Presented the digital wireframes for the Home and Gallery pages. Established the master color palette (Dark theme + Gold).
26 Feb 2026 (Hybrid) Merge core pages and test routing. Yes Distributed the final style.css template to the team. Helped Student 2 integrate the Splash Screen routing into the Home page.
05 Mar 2026 (Discord) Team code review and bug fixing. Yes Led the session on fixing CSS specificity issues. Refactored overlapping class names across the team's individual pages.
12 Mar 2026 (Face-to-Face) Content review and alignment. Yes Finalized my "Conflict to Peace" academic content page and ensured the Gallery images were properly compressed.
18 Mar 2026 (Hybrid) Final W3C validation and packaging. Yes Ran my specific pages (Home, Gallery, Template) through W3C. Fixed a missing alt tag on a gallery image. Compiled the final ZIP folder for submission.

References & Technical Bibliography

The following technical documentation and official guidelines were consulted to engineer the global architecture and my specific deliverables:

Back to Top