Feedback Page
Technical Description
This page uses semantic HTML5 structure with a form layout built using Flexbox. Input and select elements are styled with subtle borders, shadows, and transitions for modern interactivity. The submit button employs hover scale effects for feedback. The layout ensures section separation using `.sub-container` divisions.
Accessibility
Form labels are provided for all input elements. Accent colors for radio buttons enhance visibility. Logical tab ordering and semantic elements improve navigation with assistive tech.
Link to the validation page
Link to the page
Team Page
Technical Description
The team section is structured with a responsive CSS Grid layout. Each profile card is animated with hover transitions that reveal descriptions. Cards use shadow, rounded corners, and gradient overlays to create a glassmorphism-inspired modern aesthetic.
Accessibility
Images include `alt` text. Headings and ARIA landmarks provide structure for screen readers. Hover effects avoid reliance on color alone for visibility.
Link to the validation page
Link to the page
Content Page
Technical Description
This page uses a structured layout built with semantic sections and floating side navigation. It uses custom tile cards, responsive image containers, and `hover`-based interactivity. The CSS employs transitions, shadow effects, and ID-targeted styles for visual segmentation.
Accessibility
Image elements include descriptive `alt` attributes. The sidebar navigation uses clear anchor tags with high contrast and hover feedback. Semantic headings (`h2`) and landmark containers improve screen reader flow.
Link to the validation page
Link to the page
Challenges and Lessons Learned
Ensuring consistent responsiveness and accessibility across varying screen sizes was a major challenge. Profile card animations required fine-tuning to balance design and usability. I learned the importance of semantic HTML and accessibility best practices for successful validation.
Compliance
All pages conform to WCAG guidelines with semantic tags, sufficient color contrast, keyboard navigation, and proper use of ARIA roles. Assets are used within copyright limits or created via ChatGPT/Unsplash. The design adheres to Janet regulations regarding web publication and accessibility.
References
- Unsplash (2025). Free stock images. Available at: https://unsplash.com/ (Accessed 5 July 2025).
- ChatGPT (2025). Generated media and markup assistance. OpenAI.