Documentation

Page Editor - Yaqil Badurdeen

Student 4

User Profile Page

View Page

A user profile page with avatar, personal details, biography, skills with progress bars, volunteering activities, interests, availability table, and a contact form.

Techniques Used

CSS GridProgress BarsTable StylingForm DesignResponsive LayoutGradient Backgrounds

Accessibility

  • • Semantic HTML structure
  • • Form labels
  • • Alt text for images
  • • Keyboard navigable form

Sitemap Page

View Page

An interactive sitemap visualization showing the website hierarchy with clickable nodes linked to their respective pages.

Techniques Used

SVG GraphicsInteractive LinksHierarchical LayoutLinear GradientsResponsive SVG

Accessibility

  • • Link text for SVG nodes
  • • Keyboard navigation
  • • Visual hierarchy
  • • Contrast compliance

Content Page (Success Stories)

View Page

Content page showcasing community success stories in marine conservation, including ecotourism in Indonesia and practical ways to help protect oceans.

Techniques Used

Fade-in AnimationsCSS Scroll EffectsResponsive ImagesSection Layout

Accessibility

  • • Semantic headings
  • • Alt text for all images
  • • Back to top navigation
  • • Proper text contrast

Challenges & Lessons Learned

Challenges

  • ! Creating an interactive SVG sitemap that works responsively
  • ! Styling progress bars with CSS for the skills section
  • ! Building a comprehensive profile layout with multiple sections
  • ! Ensuring the availability table is mobile-friendly

Lessons

  • ✓ SVG creation and manipulation for interactive graphics
  • ✓ CSS custom properties for progress bar styling
  • ✓ Complex page layout with CSS Grid and Flexbox
  • ✓ Responsive table design techniques

References

  • MDN Web Docs - SVG Tutorial
  • CSS-Tricks - Styling Progress Bars
  • W3Schools - CSS Grid Layout
  • Web.dev - Responsive Design