Home Volunteer Table User Profile Feedback Sitemap Team

Pawani Nethmini, student 1

Splash Page

Technical Description

  • Splash Screen: A full-screen welcome page with a loading animation.
  • JavaScript Redirection: A setTimeout function redirects users to home.html after 4 seconds.
  • CSS:
    • webstyle.css applies styling for the splash screen and animations.

Accessibility

  • Loading Indicator: A visible loader informs users about page transition.
  • Screen Reader Compatibility: Proper heading structure ensures accessibility.
  • Time Delay Consideration: The 4-second wait might need an alternative for users who require more time.

    • Link to the validation page

    Include a link to the validation page, use the marker to jump to the corresponding section of the validation page.

    Link to the page

    Include a link to the actual page you describe.

    Volunteer Page

    Technical Description

  • Grid Layout: The volunteer programs are displayed in a structured grid using (div class="program-grid")
  • Dynamic Elements: Interactive buttons allow users to navigate to the application form.
  • CSS:
    • ●volunteer-card styles each program card with images and descriptions. ●Consistent layout provided by style.css, navibar.css, and footer.css.

    Accessibility

  • Alternative Text: Images have alt attributes for screen readers.
  • Clear Call-to-Action: The "Apply Now" button is prominently placed.
  • Contrast and Readability: Text and background colors ensure visibility.

    • Link to the validation page

    Include a link to the validation page, use the marker to jump to the corresponding section of the validation page.

    Link to the page

    Include a link to the actual page you describe.

    Content Page

    Technical Description

  • HTML Structure: The page is structured with semantic tags like header, section, and footer for improved readability and SEO.
  • Navigation: A navigation bar is implemented using (nav), with links styled via external stylesheets.
  • Buttons & Links: (a) elements serve as buttons to navigate between pages.
  • CSS:

    • ●Responsive design is supported using media queries (via navibar.css).
    ●Different stylesheets (content.css, navibar.css, footer.css) modularize styles for maintainability.

    Accessibility

    Readable Content: Proper heading structure (h1, h2, etc.) ensures logical content flow for screen readers.

    Link to the validation page

    Include a link to the validation page, use the marker to jump to the corresponding section of the validation page.

    Link to the page

    Include a link to the actual page you describe.

    Challenges and Solutions

    1.Ensuring Responsive Navigation Across Devices

  • Challenge: The navigation bar layout was inconsistent across different screen sizes. The desktop menu was overlapping with other elements on smaller screens.
  • Solution: Implemented a mobile menu (div class="mobile-menu") along with a hamburger button (button class="hamburger") to toggle visibility for smaller screens.

    • 2.Styling Conflicts Due to Multiple Stylesheets
  • Challenge: The use of separate CSS files (content.css, navibar.css, footer.css) led to conflicting styles, especially for fonts and margins.
  • Solution: Standardized the styles by defining global rules in a base stylesheet and ensuring specificity in other stylesheets to avoid conflicts.

    • 3.Ensuring Proper Accessibility
  • Challenge: Some images lacked alt attributes, making it difficult for screen readers to interpret them.
  • Solution: Reviewed the code and added meaningful alt text to all images to enhance accessibility.

    • Lessons learned

  • Plan and Test for Responsive Design Early.
  • Accessibility Should Be a Priority from the Beginning.
  • Modular CSS Improves Maintainability.

    Compliance

    1. Accessibility Compliance:

    ✅ Semantic HTML for structure (header, nav, section).
    ✅ Alt text for images, keyboard navigation, and readable fonts for better accessibility.
    ⚠️ Needs full keyboard navigation testing.

    2.Security:
    ✅ No sensitive data collected; HTTPS should be enforced when deployed.
    ✅ Limited JavaScript use (no security risks).
    ⚠️ Form validation needed to prevent XSS & SQL injection risks.

    3. Content & Ethics:
    ✅ Original and accurate information (no misleading claims).
    ✅ Realistic descriptions of conservation efforts.
    ⚠️ Add citations for factual claims.

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top