Documentation

Page Editor - Methika Fernando

Student 1

Splash Screen

View Page

An animated splash screen with a jellyfish background, floating bubbles, and a loading spinner that auto-redirects to the home page.

Techniques Used

CSS AnimationsKeyframesAuto-redirectBackground ImagesResponsive Design

Accessibility

  • • Alt text for background image
  • • Semantic HTML structure
  • • Color contrast compliance

Volunteer Page

View Page

A volunteer activities page with sortable cards, customer reviews with star ratings, and a feedback form with rating system.

Techniques Used

CSS GridFlexboxCard LayoutStar Rating SystemForm ValidationJavaScript Events

Accessibility

  • • Keyboard navigable cards
  • • ARIA labels for rating
  • • Proper form labels
  • • Alt text for images

Content Page (Key Challenges)

View Page

An educational content page about SDG 14 key challenges with fade-in animations on scroll, covering ocean problems and solutions.

Techniques Used

Scroll AnimationsCSS Fade-inIntersection ObserverResponsive ImagesSection Layout

Accessibility

  • • Semantic headings
  • • Alt text for all images
  • • Back to top button
  • • Readable font sizes

Challenges & Lessons Learned

Challenges

  • ! Getting the bubble animations to look natural and performant
  • ! Implementing smooth scroll-based fade-in animations
  • ! Ensuring responsive design across all screen sizes
  • ! Star rating system interactivity with vanilla JavaScript

Lessons

  • ✓ CSS animations and keyframes for creating engaging visual effects
  • ✓ Intersection Observer API for scroll-triggered animations
  • ✓ Importance of accessibility in web design
  • ✓ Form validation techniques with JavaScript

References

  • MDN Web Docs - CSS Animations
  • W3Schools - HTML Form Validation
  • CSS-Tricks - A Complete Guide to Flexbox
  • Web.dev - Intersection Observer API