Pages done by me!
I created the Feedback Page with HTML, CSS and Javascript. The page includes an interactive feedback form with real-time validation and custom form elements. I implemented data visualization components to display aggregated feedback statistics. Javascript was used to create dynamic form behavior and submission handling. The responsive design ensures optimal usability across all devices.
I ensured accessibility by using semantic HTML, high contrast colors, scalable text, and alt text for images. The page is fully responsive and screen-reader friendly.
I developed the Team Page using HTML, CSS and Javascript. The page features responsive team member profiles with hover effects and expandable bio sections. CSS Grid and Flexbox were used to create a dynamic layout that adapts to different screen sizes.
To enhance accessibility, I used semantic HTML for clear structure, ensured sufficient color contrast, implemented scalable text, and provided alt text for images. The page is also responsive and optimized for screen readers.
I developed the Content Page using HTML, CSS, and JavaScript. The page features well-structured sections with interactive elements, ensuring a user-friendly experience. CSS Grid and Flexbox were used to create a responsive layout that adapts to different screen sizes. Additionally, JavaScript enhances functionality by enabling dynamic content loading and interactive animations.
I focused on accessibility by using semantic HTML for a logical structure, ensuring high color contrast, enabling text scalability, and adding alt text for images. The page is responsive and designed to work well with screen readers.
During development, form validation on the Feedback page presented a significant challenge. Creating intuitive error messages while maintaining technical accuracy required extensive research into JavaScript validation patterns. I ultimately developed a reusable validation system that improved both code efficiency and user experience.
Responsive design across devices proved difficult, especially for the Team page with its complex grid layout. I adopted a mobile-first approach and strategically implemented CSS media queries. This process greatly improved my understanding of responsive design principles and the importance of thorough cross-device testing.
All pages developed comply with Janet regulations for web publishing by adhering to WCAG 2.1 AA accessibility standards. I implemented proper semantic HTML structure, maintained sufficient color contrast ratios, ensured keyboard navigability, and optimized screen reader compatibility. Every image includes descriptive alt text, and interactive elements have appropriate ARIA labels.
The Feedback page follows data protection requirements by including clear notices about data collection purposes. No unnecessary personal information is requested, and submission forms incorporate appropriate consent mechanisms. This approach aligns with Janet's guidelines on user privacy and data handling.
All content and resources used across the pages are either original creations or properly licensed materials. Where required, attribution is provided in compliance with Janet's intellectual property guidelines. This careful approach avoids copyright issues while maintaining academic integrity.
The pages conform to current HTML5 and CSS3 standards as verified through W3C validators. Code optimization ensures reasonable page load times even on slower connections, meeting Janet's technical performance standards. The environmental focus on "Life Below Water" supports educational objectives while adhering to content appropriateness guidelines.
Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified
style). For example: