Template

Technical Description

• Semantic Tags: header, main, and footer are used to separate content, making it easier to read and organize.
• Navigation Bar: The nav tag helps group important page links for easier site navigation.
• Logo & Branding: The img tag adds a logo, and the alt attribute helps explain the image for accessibility.
• Lists for Links: ul and li tags are used to list helpful links in the footer area.

CSS Styling Choices (from global.css)

• Layout Control: Classes like .footer-container and .logo probably use Flexbox or Grid to align items nicely.
• Consistent Design: Classes like .footer-logo, .footer-site-name, and .profile-link help keep fonts, spacing, and colors consistent.
• Responsive Design: The meta viewport tag and CSS media queries help the layout work well on phones and tablets.

Why These Choices Work

• Clear tags make it easier for search engines and screen readers to understand the page.
• Using separate CSS files keeps design organized and easy to update.
• Reusing classes saves time and keeps your pages looking the same.

Validation

" View Template Validation

Page Link

Home Page

Technical Description

• Hero Section: Animated fish and call-to-action button.
• Cards Layout: Four sections on marine topics (Conservation, Biodiversity, Pollution, Coral Reefs).
• Mission Section: Two-column layout with content and image highlighting the ocean's importance.
• Loader: Page loader hides after 1 second for smoother UX.

CSS Styling Choices

• Flexbox layout for cards, making it responsive.
• Mission section uses a split layout for text and visuals.
• Animated background fish add engagement.

Why These Choices Work

• Engaging visuals (fish) instantly convey the ocean theme.
• Clear cards structure for easy navigation of content.
• Responsive design adapts to various screen sizes.

Accessibility

• Proper alt text for all images, ensuring accessibility.
• High color contrast for readability.
• Clear link text and accessible navigation.

Validation

View Home Page Validation

Page Link

Visit Home Page

Content Page

Overview

• Main Purpose: The content page provides an in-depth look at various topics related to ocean conservation, plastic pollution, marine biodiversity, and more.
• Structure: The page includes sections such as "Explore the Ocean," "Our Mission," and various resource links that guide the user to further content.
• Images: High-quality images and GIFs (like fish and octopus) are used to engage the user visually, connecting the theme to the content.
• Call to Action: Buttons like "Learn More" and "Meet the Team" provide the user with next steps.

CSS Styling Choices

• Use of large hero images to grab attention and support the visual storytelling.
• Cards in a grid layout for key topics, allowing easy navigation between sections.
• Mission section with a split layout to highlight both the text and visuals of ocean conservation efforts.

Why These Choices Work

• The large hero image and animations (e.g., fish swimming) provide an immersive experience, keeping users engaged from the start.
• Cards help break the content into digestible chunks, improving user experience on both mobile and desktop devices.
• Direct calls to action help guide the user to engage with the mission or learn more about various topics.

Accessibility

• All images have descriptive alt texts to improve accessibility for screen readers.
• The page is designed to be responsive, ensuring it's usable on mobile devices.
• Buttons and links are clearly marked and accessible using keyboard navigation.

Validation

View content Page Validation

Page Link

Visit content Page

Table Page

Technical Description

• Table Layout: A table showing the activity levels of ocean cleanup organizations across various regions (Pacific, Indian, Atlantic, Southern).
• Header: Includes logos for The Ocean Cleanup, Sea Shepherd, and Plastic Bank, linked to their respective websites.
• Legend: A table legend explains the meaning of the icons used to represent the activity level (✔️, ❌, ➖).
• Footer: Links to each organization’s website for more information.

CSS Styling Choices

• Table layout with a clean, simple design to prioritize readability.
• Icons used for status (✔️, ❌, ➖) with tooltips for additional information.
• Responsive design ensures the table remains accessible on different screen sizes.

Why These Choices Work

• Table format allows easy comparison of data across regions.
• Clear visual indicators (icons) for each organization’s activity level help users quickly understand the information.
• External links to organizations' websites for users to learn more.

Accessibility

• ARIA labels and descriptions for table rows, headers, and tooltips.
• Clear contrast for text and background for better readability.
• Interactive elements are keyboard accessible.

Validation

• HTML5 and CSS standards followed.
• Ensure accessibility by using W3C validation tools.

Validation

View Template Validation

Page Link

Visit Template

Challenges and Lessons Learned

Challenges were encountered in maintaining consistent styling across pages while implementing Flexbox for various layouts. Ensuring responsiveness across devices required multiple iterations. Key lessons included the application of semantic HTML, adherence to accessibility standards, and the development of reusable CSS.

Compliance

The development process adhered to WCAG guidelines for accessibility and semantic HTML5 standards. All pages were validated using W3C tools to ensure compliance with web publishing standards.

References

• Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
• W3C (2024). HTML & CSS Specifications. Available at: w3.org
• W3C Web Accessibility Initiative (2024). Web Content Accessibility Guidelines (WCAG) 2.1. Available at: w3.org/WAI
• Mozilla Developer Network (2024). CSS Flexbox. Available at: developer.mozilla.org
• AI-Generated Images (2025). Images used in the Home, Content, and Table pages were generated using an AI image generation tool to align with the ocean conservation theme. [Tool name and specific citation details should be added if available, e.g., MidJourney, DALL-E, or other AI tool documentation].