Documentation

Page Editor - Thilina Nimsara

Student 2

Home Page

View Page

The main landing page with a video background hero section, navigation bar, mission/values/vision sections, ocean conservation info, and interactive topic cards.

Techniques Used

Video BackgroundCSS GridFlexboxCard Hover EffectsScroll EventsGradient Overlays

Accessibility

  • • Semantic HTML5 elements
  • • Alt text for all images
  • • Keyboard navigation
  • • Proper heading hierarchy

Table Page

View Page

A comprehensive marine species catalog table displaying 12 species with their habitat, depth range, diet, lifespan, region, and conservation status.

Techniques Used

HTML TablesCSS TooltipsColor-coded StatusResponsive Table DesignTable Styling

Accessibility

  • • Table headers with scope
  • • Tooltip text alternatives
  • • Color not sole indicator
  • • Readable font sizes

Content Page (Innovation)

View Page

Content page about innovation in marine science with slide-in animations, covering marine technology, sustainable practices, and smart monitoring.

Techniques Used

Slide-in AnimationsCSS TransformsResponsive ImagesSection LayoutGradient Backgrounds

Accessibility

  • • Semantic headings
  • • Alt text for images
  • • Back to top navigation
  • • Contrast compliance

Challenges & Lessons Learned

Challenges

  • ! Implementing a smooth video background that works across browsers
  • ! Making the data table responsive on mobile devices
  • ! Creating engaging card hover effects with CSS
  • ! Optimizing large media files for web performance

Lessons

  • ✓ HTML5 video element and its cross-browser considerations
  • ✓ Advanced CSS table styling and responsive techniques
  • ✓ CSS transitions and transforms for smooth animations
  • ✓ Performance optimization for media-heavy pages

References

  • MDN Web Docs - HTML Table Element
  • CSS-Tricks - A Complete Guide to Grid
  • W3Schools - HTML5 Video
  • Web.dev - Performance Optimization