Page Editor - Natheeshan Sithravel

Role: Web Developer

Completed Tasks

Technical Description

HTML Techniques Used Volanteers Page

  • HTMLSemantic5 structure: Uses header, nav, footer, section, and div for structured content.
  • Responsive Dropdown Sorting – "select" element for sorting volunteer programs dynamically
  • Card-Based Layout – Each volunteer program is structured as a "div" with an "h3", "img", and "p" tag.
  • Reviews & Testimonials – Displays user reviews using div containers for structure.
  • Interactive Star Ratings – Uses "input type="radio""" to allow users to rate experiences.
  • Form for User Reviews – "textarea" element for submitting feedback, paired with a submit button.

HTML Techniques Used Feedback Page

  • Form Structure – Uses "form" with "input", "select", and "textarea" elements to collect user feedback
  • Custom Radio & Checkbox Inputs – input type="radio" and input type="checkbox" styled using custom checkmarks.
  • Tooltip Implementation – span class="tooltip" "for additional info when hovering over form labels.
  • Live Progress Bar – div class="progress-fill" dynamically adjusts width as users fill the form.
  • Interactive Star Ratings – Uses "input type="radio""" to allow users to rate experiences.
  • Validation & Data Protection – Uses required attributes and placeholder text for user guidance.

HTML Techniques Used Splash Screen Page

  • Video Background – Implements "video" tag with autoplay, muted, and loop attributes for a dynamic effect.
  • Animated Overlay – Uses "div" with opacity and gradient effects to create a smooth fade-in effect.
  • Heading with Animated Text – "h1" with CSS animations (@keyframes) for text slide-in effects.
  • Loading Progress Bar – div class="progress-bar" with JavaScript-controlled progress tracking.
  • GSAP Library Integration – JavaScript animations using GSAP for smooth transitions and auto-page redirection.

Challenges & Lessons Learned

  • Using Media Queries & Flexbox/Grid properly to handle responsiveness.
  • Optimizing animations & images for better performance.
  • Testing across multiple devices & browsers to fix compatibility issues.
  • Improving usability & accessibility by adjusting colors, font sizes, and navigation.

Validation

All pages were validated successfully. Validation Report

Accessibility & Compliance

Implemented high contrast text, keyboard navigation, alt text for images, ARIA roles, semantic HTML, accessible forms, and avoiding auto-play media. Compliance requires maintaining proper contrast ratios, keyboard-friendly navigation, clear labels, and screen reader support.

References

↑