The home.html page implements a sophisticated single-page application structure using
semantic HTML5 elements and advanced CSS techniques. The page utilizes a fixed header with
dynamic styling through the .hp-header class, which transforms from
transparent to
white background using CSS transitions and JavaScript scroll detection. The hero
section employs a
full-viewport video background with HTML5 <video> element and overlay techniques
using absolute positioning and z-index layering.
The card-based navigation system is implemented using CSS Grid and Flexbox layouts,
with the
.hp-card-grid container utilizing flexible layouts that adapt to different screen
sizes. Each card uses CSS transforms and hover effects with
transform: scale()
and
filter: blur() properties to create interactive visual feedback. The styling
incorporates CSS custom properties (variables) defined in global.css
for
consistent
color theming and maintainability.
Key HTML tags include semantic elements like <header>,
<main>,
<section>, and <nav> for proper document structure. The video
element uses multiple attributes (autoplay, muted, loop,
playsinline) for cross-browser compatibility. Key CSS properties
include
position: fixed for sticky navigation, backdrop-filter: blur() for
glassmorphism effects, and transition properties with cubic-bezier timing functions for
smooth animations.
The implementation leverages global.css for foundational styles including the CSS
variable system (:root selectors), typography hierarchy, container layouts, utility
classes, and responsive breakpoints. The home-specific styles in home.css extend these
base styles with specialized components like the hero video section and interactive card grid
system.
Accessibility
The page implements several accessibility features to ensure inclusive user experience.
Semantic HTML structure uses proper heading hierarchy (<h1>,
<h2>) and landmark elements (<header>,
<main>, <nav>,<footer>) for screen reader
navigation. All interactive elements maintain keyboard accessibility through proper
focus states and hover effects that don't rely solely on color changes.
Alternative text is provided for all images using descriptive alt
attributes, including
the background team image and card images. The video element includes fallback content for browsers
that don't support video playback. Color contrast is maintained through the CSS
variable system,
ensuring sufficient contrast ratios between text and background colors as defined in the global
palette.
The responsive design ensures accessibility across different devices and screen
sizes, with
mobile-first media queries adjusting font sizes, spacing, and layout for better usability on smaller
screens. The navigation maintains consistent styling and positioning across breakpoints, and touch
targets are appropriately sized for mobile interaction.
Link to the validation page
Link to the page
Table Page
Technical Description
The table implementation utilizes semantic HTML5 structure with a <table> element
containing proper <thead>, <tbody>, and hierarchical heading
organization using <th> elements. Key structural elements include
rowspan and colspan attributes for creating merged header cells,
particularly for the logo header and grouped column headers that enhance data organization.
The CSS implementation employs CSS Grid-like flexbox layouts within the .main-container
and .data-section for responsive positioning. Critical styling techniques include CSS
custom properties (CSS variables) for consistent theming, CSS transforms for interactive hover
effects (translateY(-3px) and scale(1.02)), and CSS animations using
@keyframes for tooltip fade-ins and pulsing effects on critical impact badges.
Advanced CSS features include pseudo-elements (::before and ::after) for
creating tooltip arrows and shimmer effects on impact badges, :nth-child() selectors
for alternating row colors, and CSS gradients for visual depth. The responsive design utilizes
multiple @media queries targeting different breakpoints (768px, 480px) with adjusted
padding, font sizes, and element dimensions.
Key CSS properties include position: relative/absolute for tooltip positioning,
transform and transition for smooth animations, box-shadow
for depth effects, and border-radius for modern rounded corners. The table uses
border-collapse: collapse and strategic border: none declarations for
clean cell separation.
Accessibility
The implementation addresses accessibility through semantic HTML structure using proper table markup
with <thead>, <tbody>, and <th> elements
that provide screen reader navigation context. The alt attributes are implemented on
all images including the logo and icons to provide descriptive text for assistive technologies.
Color contrast considerations are addressed through the use of high-contrast combinations,
particularly in the gradient headers and impact badges where text maintains sufficient contrast
ratios. The interactive elements include cursor: help on thumbnails and
cursor: pointer implications for clickable elements, providing visual feedback for user
interactions.
The tooltip implementation uses data-tooltip attributes to provide additional context
information that becomes available on hover, though this could be enhanced with ARIA attributes for
better screen reader support. The table structure maintains logical reading order and uses
descriptive text content in data cells rather than relying solely on visual indicators.
Navigation accessibility is supported through the header navigation structure with proper link
semantics and the “go-to-top” button functionality. The responsive design ensures content remains
accessible across different screen sizes and devices, with appropriate scaling of interactive
elements like thumbnails and touch targets.
Link to the validation page
Link to the page
Content Page
Technical Description
The Content_ST2 page demonstrates a comprehensive educational website about UN SDG 2
(Zero Hunger) using modern HTML5 semantic structure and CSS Grid/Flexbox layouts. The HTML employs
semantic tags including <header>, <nav>,
<main>, <section>, and <footer> to create a
logical document structure that enhances both SEO and screen reader navigation.
The CSS implementation utilizes CSS Grid for complex layouts, particularly in the
.content-grid class which creates responsive two-column layouts (2fr 1fr)
that automatically stack on mobile devices. The .causes-grid uses
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) to create responsive card
layouts that adapt to different screen sizes. Flexbox is strategically used for component-level
layouts like the .target-list and .cta-buttons to handle alignment and
spacing efficiently.
The styling system employs CSS custom properties (variables) for consistent color theming throughout
the site, with properties like var(--primary-orange) and
var(--secondary-blue) ensuring brand consistency. The visual hierarchy is established
through careful typography scaling, with hero titles at 48px scaling down to
28px on mobile devices using media queries.
Interactive elements utilize CSS pseudo-elements (::after) for decorative underlines
and hover states with smooth transitions. The comparison section uses a three-column grid layout
with a centered “VS” divider, creating an engaging visual comparison between hungry and
well-nourished children. Box-shadow and border-radius properties provide
depth and modern aesthetics throughout the interface.
Accessibility
The page implements several accessibility features to ensure inclusive design. Semantic HTML5
elements provide proper document structure for screen readers, with logical heading hierarchy
(<h1>, <h2>, <h3>) that allows keyboard
navigation between sections. The internal navigation uses anchor links with
scroll-margin-top: 80px to account for the fixed header when jumping to sections.
Color contrast is maintained through the CSS variable system, ensuring sufficient contrast ratios
between text and background colors. Interactive elements like buttons and links have proper focus
states and are keyboard accessible. The responsive design ensures content remains readable across
different devices and zoom levels, with font sizes that scale appropriately.
Images include descriptive alt text attributes, and the navigation structure provides
clear context for assistive technologies. The page maintains semantic meaning through proper use of
lists, headings, and sectioning elements, making it accessible to users with various disabilities
while maintaining visual appeal for all users.
Link to the validation page
Link to the page
Challenges and Lessons Learned
One challenge was using a video background, which slowed down my home page load time. I fixed this by
using JavaScript to preload the video on the previous page, improving performance.
Another issue was my sticky header covering section headings when jumping to IDs. I solved this by
adding a scroll margin in CSS to keep the headings visible.
These challenges taught me the value of optimization, careful CSS tweaks, and good teamwork tools.
Compliance
In developing the ASDY Foundation website, I focused on creating a solid structural foundation that
would meet basic web compliance standards while prioritizing user experience and content
accessibility. I deliberately chose to implement HTML5 semantic elements throughout all pages,
ensuring proper document structure with DOCTYPE declarations, UTF-8 encoding, and logical heading
hierarchies. My approach was to build a responsive design framework using external CSS files and
proper viewport meta tags, which I knew would support both desktop and mobile users while
maintaining clean separation of content and presentation.
However, I must acknowledge that in my development process, I prioritized visual design and
functionality over comprehensive accessibility compliance. While I included alt text for images and
used semantic HTML structure, I didn't fully implement WCAG 2.1 AA standards in several key areas.
For instance, when I created the data table in table.html, I focused more on visual presentation
than on providing proper header associations and caption elements for screen readers. Similarly, my
decision to use JavaScript onclick handlers for navigation was driven by ease of implementation
rather than ensuring keyboard accessibility alternatives.
Looking back on my development choices, I realize that while I created a functional and visually
appealing website, I fell short of full regulatory compliance in crucial accessibility areas. My
focus on rapid development led me to overlook essential features like ARIA labels, proper color
contrast ratios for status indicators, and skip navigation links. If I were to rebuild this site, I
would approach it with accessibility-first principles, ensuring that every interactive element is
keyboard accessible and that all content is properly structured for assistive technologies from the
ground up, rather than treating accessibility as an afterthought.