Template Development

Technical Description

The base template was crafted using semantic HTML5 structure combined with modern design practices. It includes:

• Semantic elements: <header>, <main>, <footer>, and <section>
• Responsive navigation bar using Flexbox for alignment and mobile-first media queries for layout adjustments
• Mobile menu toggle implemented via JavaScript and controlled with CSS visibility logic
• Glassmorphism effects applied to the header and footer using backdrop-filter and rgba() transparency
• Scroll-to-top feature with smooth scrolling and animated icon interaction
• Custom font integration via Google Fonts and @font-face (e.g., "Astro" and "Helvetica Neue")

Accessibility

Accessibility considerations included:

• ARIA labels applied to interactive buttons (e.g., scroll-to-top)
• Keyboard-accessible navigation through proper HTML structure
• Clear visual hierarchy using semantic tags and contrasting text colors
• Font sizes and spacing optimized for readability across screen sizes

Validation & Page Links

Validation Report | View Template Page

Home Page

Technical Description

The home page was designed to create a modern, immersive user experience centered around climate action. It includes the following implementations:

• Hero section with full-screen autoplay background video using <video> and object-fit: cover
• Animated title and subtitle with text shadows and linear-gradient effects via -webkit-background-clip
• Fixed-position SDG badge image placed with precision using absolute positioning
• Dynamic call-to-action bar with blurred background and soft drop shadows for a glassmorphism effect
• “About SDG 13” section with responsive two-column layout using CSS Grid and embedded YouTube video in a styled container
• Mission block styled with custom typography and centered layout inside a reusable .block-section component
• Quote-style callout with centered content and thematic colors
• Content Hub with 4 interactive cards using hover overlays, animated fade-in (via Intersection Observer), and responsive design

Accessibility

Accessibility practices included:

• Meaningful alt text for all images and decorative elements
• Text contrast and font sizes compliant with WCAG 2.1 AA guidelines
• Keyboard focusability and smooth navigation through sections
• ARIA label on the scroll-to-top button for assistive technologies

Validation & Page Links

Validation Report | View Home Page

Table Page

Technical Description

The climate data page presents an interactive and accessible data table visualizing key environmental metrics across multiple countries. This implementation includes:

• Scrollable responsive table built inside a flex container with overflow-x: auto for horizontal navigation on smaller devices
• Sticky headers and sticky first column using position: sticky for enhanced readability during horizontal scrolling
• Glassmorphism effects applied to the scroll container and table cells using backdrop-filter and semi-transparent backgrounds
• Alternating row styling with nth-child(even) and hover highlights for better UX
• Flag images with country names inside a flexbox layout for visual clarity
• Table links styled with different states (hover, visited, active) and external data source citation
• Custom call-to-action section below the table encouraging user participation

Accessibility

Accessibility features ensured that the table and surrounding layout are user-friendly and compliant:

• ARIA labels on the scroll area and the table to improve screen reader compatibility
• Descriptive alt text on all country flags
• Clear visual contrast for header and cell content to meet WCAG 2.1 AA color contrast standards
• Semantic <table>, <thead>, and <tbody> structure with appropriate <th> usage

Validation & Page Links

Validation Report | View Table Page

Life on Land: Web Page Overview

Content Data Summary

• Forests cover approximately 31% of the Earth’s surface (~4.06 billion hectares).
• The world has lost over 420 million hectares of forest since 1990, primarily due to deforestation and agricultural expansion.
• Top countries with the highest forest loss since 2001 include Brazil, DR Congo, Indonesia, Russia, and France.
• Over 1 million species globally are at risk of extinction, with biodiversity declining at unprecedented rates.
• The IUCN Red List tracks over 150,000 species, with more than 42,000 classified as threatened.
• Only 15% of the world’s terrestrial ecosystems are formally protected under conservation areas.
• 25% of Earth’s total land area is significantly degraded, affecting over 1.5 billion people globally.
• Drylands cover 41% of Earth’s surface and are home to more than 2 billion people, vulnerable to desertification and land degradation.
• Data sources include: UN Biodiversity, FAO Forestry, IUCN Red List, Global Forest Watch, and the World Bank.

Page Highlights

• Dedicated hero section with thematic visuals illustrating SDG 15 priorities.
• Content segments presenting forest degradation, endangered species, and rehabilitation case studies.
• Interactive glossary for key SDG 15 terms to enhance understanding.
• Embedded educational video and animated infographics optimized for responsive display.

Accessibility & Responsive Design

• Semantic structure using header, main, section, and footer tags.
• High-contrast text and font sizes optimized for all screen types.
• Full keyboard navigation support and screen reader labels via ARIA roles.
• Mobile-first design with grid and flexbox layout adaptation.

Validation & Page Links

Validation Report | View Content Page

Challenges & Lessons Learned

Challenges Faced

• Responsive Layout Issues: Ensuring consistency across all devices was tricky, especially with sidebars and videos.
  Solved using media queries, CSS Grid/Flexbox, and wrapper containers.
• Sticky Sidebar Navigation: The sidebar overlapped content and broke anchor navigation.
  Fixed with position: sticky and scroll-margin-top.
• Glassmorphism Compatibility: Some browsers didn’t render backdrop-filter correctly.
  Added fallback styles and -webkit-backdrop-filter prefixes.
• Table Overflow on Mobile: Tables stretched beyond screen width on small devices.
  Solved using overflow-x: auto inside a responsive wrapper.

Lessons Learned

• Mobile-first design simplifies responsive adjustments later.
• CSS Grid and Flexbox provide clean, scalable layout structures.
• Accessibility (alt text, contrast, semantic tags) enhances user experience.
• Testing across browsers and devices catches layout bugs early.

Compliance

The pages adhere to Janet web publishing standards, focusing on accessibility, privacy, and responsible content delivery.

• Semantic HTML, alt text, keyboard support, and responsive design ensure WCAG 2.1 accessibility alignment.
• No personal data is collected, maintaining GDPR compliance and respecting user privacy.
• All content is educational and suitable for public academic contexts per Janet’s Acceptable Use Policy.
• Secure code practices avoid risky scripts and third-party tracking tools.
• Fonts, icons, and media are sourced with proper licensing via official CDNs.

References