The splash page was implemented using semantic HTML5 with a clean, minimalist design focused on quick loading and immediate visual impact. The structure includes a full-viewport hero section with the ASDY Foundation logo and a brief introductory message, followed by a countdown timer that automatically redirects to the home page after 4 seconds.
Key HTML elements include the <header> for the logo, <main> for primary content, and <footer> for copyright information. The countdown timer was created using JavaScript's setInterval() function with CSS animations for smooth transitions. The page uses CSS Flexbox for centering content both vertically and horizontally.
Accessibility features include proper ARIA labels for the countdown timer, semantic HTML structure for screen readers, and high contrast colors that meet WCAG standards. The responsive design ensures proper display on all device sizes through media queries that adjust font sizes and spacing.
Accessibility
The splash page was designed with accessibility as a priority. The countdown timer includes ARIA live regions to announce changes to screen readers. All interactive elements have proper focus states for keyboard navigation. The color scheme was tested for sufficient contrast ratios, and the typography remains legible even when zoomed to 200%.
Semantic HTML5 elements provide proper document structure for assistive technologies. The automatic redirect includes a text alternative for users who may have JavaScript disabled. The minimal design reduces cognitive load while maintaining clear visual hierarchy through size and spacing rather than relying solely on color.
Link to the validation page
Link to the page
Volunteer Page
Technical Description
The volunteer.html page of the ASDY Foundation website was developed to showcase volunteering opportunities using semantic HTML5 and modern CSS. The structure includes a header with navigation, a hero section, scrollable volunteer cards, a table of requirements, a feedback form, and a footer. HTML tags like <section>, <table>, and <form> were used for accessibility and structure, while responsive design was achieved using Flexbox, CSS Grid, and media queries.
Cards were built with consistent design, hover effects, and optimized images. CSS was separated into global.css for shared styles and volunteer.css for page-specific design. Interactive elements like dropdown filters (static for now), rating visuals, and the feedback section were integrated. The emoji-based rating was removed based on usability testing, and the feedback form is now always visible. All content and visuals follow a clean, modular layout for readability and engagement.
Accessibility
The page uses proper heading structures, descriptive alt text for all images, keyboard-friendly navigation, readable font sizes, and high-contrast colors. All form fields are clearly labeled, and buttons are styled with visible states to meet WCAG 2.1 standards. The volunteer cards include ARIA attributes to describe their interactive nature, and the table includes proper scope attributes for column and row headers.
Form validation provides clear error messages, and all interactive elements maintain proper focus states. The responsive design ensures content remains accessible across all device sizes, with particular attention to touch target sizes on mobile devices. Color choices were tested for contrast ratios to ensure readability for users with visual impairments.
Link to the validation page
Link to the page
Content Page
Technical Description
The content page focuses on SDG 2 (Zero Hunger) with a comprehensive layout featuring statistics, infographics, and calls to action. The HTML structure uses semantic sections for different content areas, including an introduction, key facts, impact visualization, and ways to help. CSS Grid creates a responsive layout that adapts from multi-column to single-column on smaller screens.
Interactive elements include expandable statistics panels and a dynamic progress bar showing hunger reduction goals. The design uses the ASDY Foundation color palette with careful attention to visual hierarchy. SVG graphics were implemented for crisp rendering at all resolutions, with fallback PNG images for older browsers.
The page integrates with the global CSS framework while adding content-specific styles for infographics and data visualization. JavaScript enhances the experience with smooth scrolling between sections and animated transitions for statistics and charts. All interactive elements have both mouse and keyboard support.
Accessibility
The content page includes detailed ARIA labels for all infographics and charts, allowing screen reader users to understand the visual data. Text alternatives are provided for all images, and the color scheme was tested for contrast compliance. The page structure follows a logical reading order with proper heading hierarchy.
Interactive elements maintain keyboard accessibility and visible focus states. The responsive design ensures content remains usable on all devices, with particular attention to text sizing and spacing on mobile screens. Form inputs include proper labeling and error messaging that works with assistive technologies.
Link to the validation page
Link to the page
Challenges and Lessons Learned
Challenges included designing responsive grids for volunteer cards and balancing visual layout with accessibility. Removing unused components (like emoji rating) also required CSS cleanup. The splash page countdown timer needed careful implementation to work reliably across different browsers while maintaining accessibility.
Lessons learned included using semantic HTML properly, applying accessibility tags (alt, aria-label), and ensuring validation. Working with CSS Grid and Flexbox helped create more maintainable layouts. The importance of progressive enhancement was reinforced when implementing JavaScript features that needed to degrade gracefully.
Team collaboration taught valuable lessons in version control and code organization. Establishing naming conventions early helped prevent conflicts in CSS and JavaScript. Regular accessibility testing throughout development proved more efficient than trying to fix issues at the end.
Compliance
The site avoids collecting personal data, contains no advertising or copyrighted content, and promotes educational, nonprofit goals in line with JANET's acceptable use policies. All pages validate as HTML5 and use semantic markup for better accessibility and search engine optimization.
Content follows copyright guidelines with proper attribution for all external resources. The site does not use any technologies that would violate JANET policies, such as peer-to-peer networking or excessive bandwidth usage. All interactive elements are implemented with privacy in mind, avoiding unnecessary data collection.
The design meets WCAG 2.1 AA standards for accessibility, including proper contrast ratios, keyboard navigation, and screen reader compatibility. Forms include proper labeling and error handling. Media content includes text alternatives, and the site maintains functionality when styles or scripts are disabled.
References
World Health Organization. (2023). Global Hunger Statistics 2023. WHO Press.
United Nations. (2023). Sustainable Development Goal 2: Zero Hunger. UN Publications.
W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation.
MDN Web Docs. (2023). HTML5 Semantic Elements. Mozilla Developer Network.
Google Developers. (2023). Responsive Web Design Fundamentals. Google Web Fundamentals.