Page Editor Report

Dilshan D Prasanna - Student 2

1. Personal Details and Role


Name: Dilshan D Prasanna
Role: Student 2 in Level 4 Group10
Web Group: G
Module: 4COSC011C.2 Web Design and Development
IIT ID: 20240194
UoW ID: w2119857
Responsibilities: Designed and developed critical pages for our group's website themed around Sustainable Development Goal 14 – Life Below Water. Focused on creating visually engaging, user-friendly pages that educate and inspire action for ocean conservation, contributing to both the aesthetic and functional aspects of the site.

Completed Tasks/Pages: I was responsible for the following deliverables:

2. Technical Description: Home Page

Home page preview View Page

Purpose:

The homepage introduces visitors to SDG 14, aiming to captivate them with a visually striking oceanic theme and provide an overview of our mission and focus areas.

HTML Techniques:

  • Semantic Structure: Used <header>, <nav>, <main>, and <footer> to create a clear, accessible layout. The <section> tags (e.g., #hero, .why-section) organize content into distinct thematic blocks.
  • Navigation: Implemented a fixed <nav> within <header> with <ul> and <li> for consistent site-wide navigation, enhancing user experience.
  • Hero Section: Included <h1> for the title "Life Below Water" and <p> for a compelling description, paired with a <a> link (hero-button) to encourage exploration.
  • Focus Cards: Created a <div class="focus-cards-container"> with nested <div class="focus-card"> elements, each containing <h4>, <img>, and <p> to highlight key conservation areas.

CSS Techniques:

  • Background Styling: Applied a full-screen hero image (background: url('../images/Dilshan/hero-img.png')) with a dark overlay (#hero::before) to ensure text legibility against the vibrant background.
  • Theming: Leveraged CSS variables from global.css (e.g., --pacific-cyan, --alice-blue) for a cohesive color scheme reflecting the ocean's palette.
  • Interactivity: Styled the .hero-button with a ::before pseudo-element for a sliding background effect on hover, using transition: all 0.4s ease for smooth animation.
  • Glassmorphism: Used backdrop-filter: blur(5px) and rgba(255, 255, 255, 0.05) on .focus-card elements to mimic the translucent quality of water, paired with border: 1px solid rgba(255, 255, 255, 0.1) for subtle definition.
  • Animations: Added a bouncing scroll indicator (.scroll-down-indicator) with @keyframes bounce to guide users to scroll down.

Justification:

The semantic structure improves accessibility and search engine indexing. The fixed navigation ensures constant access to other pages, while the hero section's bold typography and imagery establish an emotional connection. The glassmorphism effect on focus cards aligns with the underwater theme, making the design both functional and visually appealing.

3. Technical Description: Donation Table Page

Donation table page preview View Page

Purpose:

This page motivates users to donate by presenting tiered options in an interactive, visually appealing table, emphasizing the impact of contributions on marine life.

HTML Techniques:

  • Table Structure: Utilized <table> with <thead> for headers and <tbody> for data, ensuring a logical hierarchy. Each tier uses <th> with nested <div class="tier-header"> for titles and icons.
  • Icons: Integrated Font Awesome icons (e.g., <i class="fas fa-fish">) within .tier-thumbnail to visually represent donation levels.
  • Call-to-Action: Added <a> elements with classes (e.g., .fish-saver) for donation links, styled as buttons to prompt action.
  • Semantic Elements: Wrapped content in <section> tags (e.g., #donation-hero, .donation-section) for clarity and accessibility.

CSS Techniques:

  • Table Design: Styled with border-collapse: collapse, border-radius: 8px, and box-shadow: 0 10px 30px rgba(0, 53, 102, 0.15) for a polished, elevated look.
  • Color Coding: Applied unique gradient backgrounds to tiers (e.g., .fish-saver-img { background-image: linear-gradient(135deg, #5fa8d3, #0074c2) }) to differentiate levels visually.
  • Interactivity: Used transition: all 0.3s ease for hover effects on .donate-link (e.g., transform: translateY(-3px)) and table cells (transform: scale(1.02)), enhancing user engagement.
  • Glass Effect: Styled .impact-card in the outro section with backdrop-filter: blur(10px) and background-color: rgba(255, 255, 255, 0.1) to create a frosted glass look, tying into the oceanic theme.
  • Responsiveness: Implemented media queries (e.g., @media (max-width: 768px)) to adjust padding, font sizes, and thumbnail dimensions for smaller screens.

Justification:

The table's structured layout ensures easy comparison of donation tiers, while icons and gradients make it visually engaging. Hover effects provide feedback, improving usability, and the glass effect reinforces the marine aesthetic. Responsive design ensures accessibility across devices.

4. Technical Description: Content Page

Content page preview View Page

Purpose:

Titled "Guardians of the Blue Depths," this page educates users about ocean conservation challenges (e.g., biodiversity loss, pollution) and our focus areas, using rich media and structured content.

HTML Techniques:

  • Video Background: Embedded a <video> element with autoplay, muted, and loop attributes in .video-background for an immersive hero section, with a fallback message for unsupported browsers.
  • Content Organization: Used <article> tags within .articles-container for topics like "Marine Biodiversity Loss," paired with <h3> headings and <p> descriptions.
  • Navigation: Added internal links (e.g., <a href="#our-work">) in .hero-buttons for quick access to sections, improving user flow.
  • Highlights: Included <div class="key-insight"> with <span class="insight-label"> to emphasize critical facts within articles.
  • Focus Grid: Structured focus areas in a <div class="focus-grid"> with <div class="focus-card"> elements, each containing <img>, <h3>, and <p>.

CSS Techniques:

  • Video Styling: Applied object-fit: cover to the video and an .overlay with background: rgba(0, 5, 20, 0.6) to ensure text contrast.
  • Grid Layout: Used grid-template-columns: repeat(2, 1fr) for .focus-grid to balance content presentation, with gap: 2rem for spacing.
  • Interactivity: Added hover effects on articles (transform: translateY(-5px)) and images (transform: scale(1.05)) with transition: transform 0.5s ease for a dynamic feel.
  • Typography: Styled .section-heading with font-size: 2.5rem and a ::after pseudo-element (background-color: var(--pacific-cyan)) for visual hierarchy.
  • Highlight Boxes: Designed .key-insight and .impact-stat with border-left: 4px solid (e.g., --pacific-cyan, --success) and subtle backgrounds (e.g., rgba(0, 116, 194, 0.1)) to draw attention to key points.

Justification:

The video background sets an emotional tone, while the grid and article layouts make complex information digestible. Internal navigation enhances usability, and visual highlights ensure critical data stands out, aligning with educational goals.

5. Challenges and Lessons Learned

Challenges:

Git Repository Management

I accidentally deleted the Git repository history and half of the project files by using an incorrect command. This required recreating several files and rebuilding parts of the project structure while ensuring consistency with other team members' work.

Theme Consistency (Home.html)

Matching the group's oceanic aesthetic was challenging with diverse section styles. I standardized colors via global.css variables and used consistent imagery (e.g., hero-img.png, ocean-bg.jpg).

Hover Effects (All Pages)

Ensuring hover animations were smooth yet not distracting required fine-tuning. I settled on transition: all 0.3s ease after testing longer durations.

Lessons Learned:

  • Always double-check Git commands before execution and create backups of critical files before making significant repository changes.
  • Early responsive testing prevents layout issues, particularly for complex elements like tables.
  • Consistent use of global styles fosters team cohesion and reduces redundant code.
  • Subtle animations enhance UX without overwhelming users, balancing interactivity and simplicity.

6. Accessibility

Home.html:

  • Added aria-label="Main Navigation" to <nav> and aria-current="page" to the active link for screen reader navigation.
  • Ensured high contrast (e.g., --alice-blue text on --pacific-cyan buttons, contrast ratio ~8:1) per WCAG 2.1 Level AA.
  • Used alt="Life Below Water Logo" on the logo <img> for visual impairment support.

Table.html:

  • Included descriptive <th> headers (e.g., "Donation Range") and scope="col" for table accessibility.
  • Added aria-label="Donate Now" to .donate-button for clarity on its purpose.
  • Maintained contrast (e.g., white text on #5fa8d3 background, ~4.5:1 ratio) for readability.

Content_ST2.html:

  • Provided alt attributes on all images (e.g., alt="Coral reef restoration project") for screen readers.
  • Used semantic <article> tags and <h3> headings to structure content hierarchically.
  • Ensured keyboard navigation for internal links (e.g., #our-work) with visible :focus states (outline: 2px solid var(--pacific-cyan)).

Principles Demonstrated:

These features align with WCAG principles of Perceivability (e.g., alt text), Operability (e.g., keyboard access), and Understandability (e.g., semantic structure), ensuring inclusivity.

7. Compliance

Janet Regulations Compliance:

Copyright and Intellectual Property

All images (e.g., trash_cleanup_diver.jpg) are group-created or sourced with permission, credited in the footer ("© 2023 Life Below Water"). No copyrighted code was used beyond standard libraries (e.g., Font Awesome).

Accessibility

As outlined, my pages meet WCAG 2.1 Level AA standards, fulfilling legal accessibility requirements for public web content.

Data Protection

No forms or user data collection occurs, ensuring compliance with GDPR and similar regulations.

Content Accuracy

Information (e.g., "Coral reefs support 25% of marine life") is sourced from reputable references (e.g., UN SDG 14 documentation), ensuring truthfulness.

Application:

I adhered to ethical web development by using open-source tools (e.g., Google Fonts), avoiding proprietary lock-ins, and ensuring all content is original or properly attributed.

8. References

In-Text References:

  • Accessibility features were guided by WCAG 2.1 (W3C, 2023).
  • HTML & CSS Full Course | Web Development for Beginners by smoljames.
  • SDG 14 facts (e.g., coral reef decline) were drawn from UN documentation (United Nations, 2023).
  • CSS animation techniques were informed by lecture notes (Week 5).

References Section:

W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.1. Available at: https://www.w3.org/TR/WCAG21/

Smoljames. HTML & CSS Full Course | Web Development for Beginners . Available at: https://www.youtube.com/watch?v=Eb3lOiukwAQ&t=20027s

United Nations. (2023). Sustainable Development Goal 14: Life Below Water. Available at: https://sdgs.un.org/goals/goal14

Lecture Notes, 4COSC011C.2 Web Design and Development, Week 5: CSS Transitions and Animations, University of Westminster.

9. Conclusion

This report reflects my contributions to the "Life Below Water" website, showcasing technical proficiency, problem-solving, and adherence to accessibility and compliance standards. I developed three distinct yet cohesive pages that support the site's mission of ocean conservation education and action. The Home page creates an emotional connection through immersive design, the Donation Table encourages financial support with clear value propositions, and the Content page provides in-depth educational resources.

Throughout this project, I've applied responsive design principles, accessibility best practices, and creative solutions to technical challenges. Each component was carefully crafted to balance aesthetic appeal with functional performance, ensuring an optimal user experience across devices and contexts.

View Validation Page