Profile Page
Technical Description
Implemented with semantic tags such as <main>, <section>, and structured layout using CSS Grid and Flexbox. Design emphasizes clarity, with cards, badges, and form elements using custom properties (CSS variables), box shadows, and radius for a polished appearance.
Accessibility
Used proper <label> tags for forms, descriptive alt attributes for images, and responsive breakpoints for mobile accessibility.
Link to the validation page
See validation report for the profile page
Link to the page
Sitemap Page
Technical Description
Built with inline SVG for interactive and scalable visualization. Each node is grouped with <g> elements and styled using internal CSS for hover feedback and connection lines using <line>.
Accessibility
Semantic structure, responsive layout, and interactive nodes are accessible via keyboard navigation.
Link to the validation page
See validation report for the sitemap page
Link to the page
Content Page
Technical Description
Developed with CSS Grid, semantic headings, reusable cards, and responsive layout. Sections such as Hero, Conservation, Technology use .section and .cards classes for modular styling.
Accessibility
Clear structure, mobile support via media queries, and high color contrast throughout. Navigation is keyboard and screen reader friendly.
Link to the validation page
See validation report for the content page
Link to the page
Challenges and Lessons Learned
Aligning the sections of the profile page required close attention, and aligning the nodes and the connectors of the sitemap was difficult. With these challenges I learnt the importance of aligning and seperation tags, and also the knowledge required to place the tags accurately
Compliance
I made sure the pages follow the rules by keeping everything clean, clear, and easy to use. I used simple HTML and CSS to build the layout and focused on good structure and smooth navigation. All images and content were either made using ChatGPT or taken from Pinterest with care to avoid copyright issues. I didn’t use advanced accessibility tools, but I designed the site to be user-friendly and respectful for all users.
References
- ChatGPT (2025). Content and code assistance.
- Pinterest (2025). Inspiration and visual assets. Available at:https://www.pinterest.com/(Last accessed: 5 July 2025).