Feedback

Technical Description

• The feedback page allows users to submit their comments and suggestions about the website.
• It includes a form with fields for name, email, subject, and message.
• Client-side validation is implemented to ensure all fields are filled out before submission.

CSS Styling Choices

• The form is styled using Flexbox to ensure a responsive layout that adapts to different screen sizes.
• Consistent color scheme and typography are used to match the overall site design.
• Hover effects on buttons enhance interactivity and user engagement.

Why These Choices Work

• The use of Flexbox allows for a responsive layout that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.
• The form's design is user-friendly, making it easy for users to provide feedback.
• Hover effects on buttons add a layer of interactivity, encouraging users to engage with the form.

Validation

" View Template Validation




Page Link

Visit Feedback

Team

Technical Description

• This page showcases the team members involved in the project.
• Each team member has a card with their name, role, image, and a brief description.
• The layout is responsive, using Flexbox to ensure proper alignment and spacing.
• Images are included for each team member to add a personal touch.



CSS Styling Choices



• Flexbox is used to create a responsive grid layout for team member cards.
• Hover effects on cards provide interactivity, revealing more information about each member.
• Consistent color scheme and typography are used to match the overall site design.

Why These Choices Work



• Flexbox allows for a flexible and responsive layout that adapts to different screen sizes.
• Hover effects enhance user engagement by providing additional information without cluttering the design.
• The use of images adds a personal touch, making the team more relatable to users.

Accessibility

• All team member images have descriptive alt text for screen readers.
• Responsive design ensures usability on mobile devices.



Validation

View Team Page Validation




Page Link

Visit Team

Content Page

Overview

• This page provides detailed information about marine biodiversity, including its importance, threats, and conservation efforts.
• It features a split layout with a large image on one side and text content on the other.
• The page uses a grid layout to present various topics related to marine biodiversity in card format.

CSS Styling Choices

• Large images and GIFs are used to create an immersive experience.
• Grid layout for cards allows for a clean and organized presentation of multiple topics.
• Split layout in the mission section effectively communicates the message while keeping the design visually appealing.
• Consistent color scheme and typography to match the overall site design.

Why These Choices Work

• Large images create an immersive experience, drawing users into the content.
• Grid layout for cards allows for a clean and organized presentation of multiple topics.
• Split layout in the mission section effectively communicates the message while keeping the design visually appealing.

Accessibility

• images have descriptive alt text to ensure screen readers can convey the content to visually impaired users.
• Headings are used semantically to structure the content, making it easier for screen readers to navigate.
• Color contrast is maintained to ensure readability for users with visual impairments.

Validation

View content Page Validation

Page Link

Visit content Page

Challenges and Lessons Learned

While using Flexbox to create different layouts, I faced challenges in keeping the styling consistent across all pages. Making the design responsive on various devices took several rounds of adjustments. Throughout the process, I gained valuable experience in using semantic HTML, following accessibility guidelines, and writing reusable CSS for better maintainability.

Compliance

During development, I followed WCAG accessibility guidelines and used semantic HTML5 to build a more user-friendly structure. To ensure everything met web publishing standards, I validated all pages using W3C tools.

References

• W3C (2024). W3C Markup Validation Service. Available at: validator.w3.org
• 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