Page Editor - Student 1

Name:J.Ackshayan
Role: Volunteer, Splash screen & Content Page Developer

My Contributions

• Splash Page Created animated welcome screen with loader and auto-redirect.
• Volunteer Page Designed scrollable volunteer program cards, reviews, and emoji feedback form based on Life Below Water (SDG 14).
• Content Page Wrote content on Ocean Conservation with internal links, images, and “go to top” button.
• Validation Page Added screenshots showing HTML validation of all pages I created.

Techniques and Design Decisions

I used semantic HTML elements such as <section>, <header>, <nav>, and <footer> to ensure accessibility and clean layout. CSS was used to apply consistent styling, hover effects, button transitions, and a responsive layout.

On the splash screen, I used a CSS animation loader and a <meta http-equiv="refresh"> tag to automatically redirect to index.html.

The volunteer page uses flexbox and horizontal scrolling to show multiple cards, plus a feedback form using emoji icons and styled <select> and <button> elements.

The content page contains internal anchor links for navigation and a fixed “go to top” button for better user experience.

Accessibility & Validation

All pages follow accessibility principles:

• Images include descriptive alt text
• Text has clear color contrast
• Buttons are keyboard accessible
• Semantic tags improve screen reader support

Each page was validated using the W3C HTML Validator. Screenshots are provided in the Validation Page.

Challenges and What I Learned

The biggest challenge was designing a modern-looking volunteer card layout using only HTML and CSS, without external frameworks. I also had to carefully position the “go to top” button without interfering with content.

I learned how to use Flexbox, how to make pages accessible and responsive, and how to write cleaner and modular code.

References

• UN SDG 14 Life Below Water: https://sdgs.un.org/goals/goal14
• W3Schools CSS Tutorials: https://www.w3schools.com/css/