Completed Pages & Tasks

• Global Template: Designed the shared HTML structure and style.css used across the entire site.
• Home Page: (View Live | View Validation) - Created the landing page with hero banner and interactive navigation tiles.
• Gallery Page: (View Live | View Validation) - Built an image gallery with a JavaScript-powered modal overlay for extended viewing.
• Content Page (Forests): (View Live | View Validation) - Authored a detailed page about forest ecosystems with internal linking.

Technical Description: Home Page

HTML Structure

The Home Page uses the shared template structure (<header>, <main>, <footer>). Inside the <main>, I used <section> tags to separate the hero banner, the mission cards, and the interactive gallery links. I used semantic headings (<h1> to <h3>) to ensure a logical document outline.

CSS Techniques

I utilised Flexbox extensively in style.css to create responsive grids for the mission cards and gallery tiles (display: flex; flex-wrap: wrap; gap: 20px;). For the Home Page specifically, I added an embedded <style> block to style the hero banner with a linear-gradient overlay to ensure text readability against the background image. The gallery tiles feature a hover effect where a text overlay slides up using transform: translateY() and transition.

Design Rationale

The decision to use a card-based layout on the Home Page was to break down information into digestible, bite-sized pieces. The green colour palette (#2d6a4f, #95d5b2) was chosen to visually reinforce the "Life on Land" SDG 15 theme.

Technical Description: Gallery Page

HTML Structure

The Gallery consists of a main grid of thumbnails and a hidden modal <div id="galleryModal">. The modal contains an image, title, description, and select dropdowns for user customisation.

CSS Techniques

The modal overlay is styled with position: fixed; top: 0; left: 0; width: 100%; height: 100%; and a semi-transparent black background. It remains hidden (display: none;) until a specific class (.show) is added via JavaScript, which changes it to display: flex; to center the content.

JavaScript Integration

I wrote custom JavaScript to handle the click-to-expand functionality. When a thumbnail is clicked, the openModal(index) function retrieves data from a JavaScript array and populates the modal's DOM elements (image src, title, text). I also implemented two functions (changeColour() and changeFont()) that read the values from the select dropdowns and dynamically update the inline CSS properties of the modal content area.

Technical Description: Content Page (Forests)

HTML Structure

This page features a table of contents that uses anchor links (e.g., href="#threats") pointing to sections with corresponding IDs. I also included a "Go to Top" button at the bottom of the page.

CSS Techniques

The "Go to Top" button uses position: fixed; bottom: 25px; right: 25px; to ensure it remains visible as the user scrolls down the long content page.

Challenges & Lessons Learned

Challenge: Coordinating the global CSS so that it worked for all team members' pages without causing conflicts.

Resolution: I established clear rules early on regarding class naming conventions. We agreed that the global CSS would only style basic elements structured precisely as agreed (like `.card-container`), and any highly specific styling had to be done via embedded CSS on the individual pages.

Lesson Learned: I learned the importance of clear communication and modular CSS design when working in a team environment.

Accessibility Considerations

• Alt Text: Every image across my pages includes descriptive alt text to assist screen reader users.
• Colour Contrast: I verified that the white text on the dark green background (#2d6a4f) passes WCAG AA contrast requirements.
• Semantic HTML: I avoided using `div`s for text formatting, relying instead on proper heading hierarchies (`h1`, `h2`, `h3`) and list tags (`ul`, `ol`).

JANET Compliance

This website was developed in accordance with JANET regulations and University IT policies. All content is educational and directly relates to the coursework requirements. No offensive, defamatory, or commercial material is hosted. We used royalty-free placeholder images from Unsplash, ensuring we did not breach copyright laws, and we have not included any executable code that could compromise server security.

Group Meetings & Individual Contribution Log

References

• United Nations. (n.d.). Goal 15: Life on land. Sustainable Development Goals. https://sdgs.un.org/goals/goal15
• University of Westminster. (2025). 4COSC011W Web Development Lecture Notes (Weeks 1-8).
• Unsplash. (n.d.). Royalty-free photography source. https://unsplash.com/
• W3C. (n.d.). Markup Validation Service. https://validator.w3.org/
• MDN Web Docs. (n.d.). CSS Flexbox & Layout Guide. https://developer.mozilla.org/
• W3Schools. (n.d.). JavaScript Timing & Style Objects. https://www.w3schools.com/
• Image Source Assets (Unsplash IDs):
• Forest Hero Background: 1441974231531
• Lush Greenery: 1448375240586
• Forest Canopy: 1473448912268
• Hands with Seedling: 1542601906990
• Recycling Management: 1532996122724
• Conservation Volunteers: 1488521787991
• Sustainable Farming: 1500651230702
• Academic Collaboration: 1526304640581
• Desertification/Land Degradation: 1509099836639
• Tropical Biodiversity (Macaw): 1425082661705
• Natural Biodiversity (Mountain): 1454496522488
• Wild Leopard/Biodiversity facts: 1456926631375

Go top