Documentation

Page Editor - Umasha Perera

Student 3

Feedback Page

View Page

A multi-step feedback form with personal details and feedback sections, including email/phone validation, radio buttons, dropdowns, file upload, and success messaging.

Techniques Used

Multi-step FormForm ValidationRegex PatternsGlassmorphism CSSJavaScript DOM Manipulation

Accessibility

  • • Proper form labels
  • • Error messages for validation
  • • Keyboard navigation
  • • ARIA attributes

Team Page

View Page

Team member showcase with flip card animations. Each card shows a photo on the front and member details with page links on the back.

Techniques Used

3D CSS TransformsCard Flip AnimationBackface VisibilityPerspective CSSGrid Layout

Accessibility

  • • Tabindex for keyboard access
  • • Alt text for team photos
  • • Semantic list structure
  • • Focus indicators

Content Page (Marine Policies)

View Page

Educational content about government marine policies, successful conservation laws, global efforts, and the importance of policy enforcement.

Techniques Used

Fade-in AnimationsResponsive ImagesSection LayoutCSS Hover Effects

Accessibility

  • • Semantic headings
  • • Alt text for images
  • • Back to top button
  • • Readable text contrast

Challenges & Lessons Learned

Challenges

  • ! Implementing reliable multi-step form navigation
  • ! Creating smooth 3D card flip animations
  • ! Form validation with proper error messaging
  • ! Cross-browser compatibility for CSS 3D transforms

Lessons

  • ✓ Advanced form validation with JavaScript regex
  • ✓ CSS 3D transforms and perspective for card effects
  • ✓ Multi-page form state management
  • ✓ Importance of user feedback in form design

References

  • MDN Web Docs - CSS 3D Transforms
  • W3Schools - Form Validation
  • CSS-Tricks - Intro to CSS 3D Transforms
  • Web.dev - Form Best Practices