This project is a single-page static website designed to educate and promote understanding of British Values, Safeguarding, and the Prevent Duty in educational and childcare settings. By offering clear and relatable content, this platform helps users foster empathy, ensure safety, and navigate their responsibilities effectively. The primary objective is to create a resource that reduces misunderstandings, enhances compliance, and facilitates better communication.
- UXD (User Experience Design)
- User Stories
- Creation Process (Strategy -> Surface)
- Design
- Page Features
- Future Features
- Technologies Used
- Testing
- Credits
The website serves as an educational tool aimed at:
- Fostering awareness and understanding: Simplifying concepts like British Values and Safeguarding for broader audiences.
- Providing actionable information: Ensuring users know their responsibilities under the Prevent Duty.
- Promoting inclusivity and compliance: Supporting users to embed these principles in daily activities.
- Navigate a friendly, accessible website with intuitive design.
- Access all information through a well-structured single-page layout.
- Locate helpful resources and links throughout the site.
- Revisit information with ease for reference.
- Share resources with colleagues or community members.
- Design a resource-friendly, inviting platform for educators, parents, and organizations.
- Content must balance clarity and detail to suit a diverse audience.
- Ensure the site is mobile-responsive and accessible to all users.
- Provide essential, digestible information about British Values, Safeguarding, and Prevent.
- Maintain device responsiveness and ease of use.
- Design a single-page layout that encourages easy exploration.
- Clear, consistent navigation across sections.
- Smooth scrolling functionality for seamless transitions between sections.
- Uniform design to create a cohesive and engaging user experience.
- Navigation bar fixed at the top for seamless browsing.
- Prominent hero image to set a welcoming tone.
- Content divided into distinct sections with logical flow.
- Welcoming, calming color palette designed to appeal to all users.
- Clear, easy-to-read fonts for headings and body text.
- Imagery that feels inclusive, positive, and informative.
- Single-page layout showcasing the homepage with section scroll interactions for:
- British Values
| Wireframe | Actual |
|---|---|
 |
 |
 |
 |
|
-
Safeguarding
-
Prevent Duty
-
Reporting Concerns
-
Additional Resources
- Adapted for accessibility and visual appeal.
- Subtle, calming tones to create an inclusive environment.
- Headers: Fira Mono Bold, weight 700, imported via Google Fonts.
- Body Text: Lexend, weights 300/400, known for readability.
- Images chosen to create a safe, welcoming space.
- Illustrations and photos designed to foster empathy and clarity.
- Fixed navigation bar with smooth scrolling to sections.
- Links to key sections: British Values, Safeguarding, Prevent, Reporting Concerns, and Resources.
- Prominent, engaging hero image with welcoming text.
- Contact information and quick links for accessibility.
- Adaptive layout ensuring functionality across devices.
- Optimized for desktop, tablet, and mobile views.
- Additional sections for broader mental health topics like Autism.
- More in-depth tools and resources for educators and organizations.
- Enhanced accessibility features for neurodiverse users.
- HTML5
- CSS3
- JavaScript
- Balsamiq: Wireframe design.
- GitHub: Repository hosting.
- Git: Version control.
- Google Fonts: Typography.
- Font Awesome: Icons.
- Coolers: Color palette generation.
- Tiny PNG: Image compression.
- Google Lighthouse: Performance audits.
- W3C Validator: Code validation.
- HTML: Passed W3C Validation.
- CSS: Passed W3C Validation.
Manual Testing
-
Verify Page Load Open the website in multiple browsers (e.g., Chrome, Firefox, Edge, Safari). Confirm that all pages load without errors or delays. Ensure the website layout is consistent across browsers.
-
Test Navigation Click each navigation link and verify that it directs to the correct page. Check that internal and external links work as expected. Confirm that the "back" and "forward" browser buttons function properly.
-
Check Responsiveness Open the website on various devices (e.g., desktop, tablet, smartphone). Resize the browser window to simulate different screen sizes. Verify that all elements adjust correctly and the content remains readable.
-
Validate Forms (Not applicable) Submit forms with valid data to ensure they work as intended. Test error messages by submitting incomplete or invalid data. Verify that required fields are properly marked and enforced.
-
Inspect Visual Design Confirm that all images load correctly and are of acceptable quality. Check the alignment and spacing of text, buttons, and other elements. Verify that colors and fonts match the design specifications.
-
Test Interactive Elements Hover over buttons and links to ensure hover states work as designed. Check that dropdown menus, carousels, and other interactive elements function properly.
-
Verify Content Accuracy Proofread text for typos, grammatical errors, and formatting issues. Confirm that all media (e.g., images, videos) appear as intended. Ensure that any placeholder text or images have been replaced with final content.
-
Check Performance Monitor the website's loading time. Verify that the website works smoothly under normal usage.
-
Test Accessibility Use keyboard navigation to access all features of the website. Confirm that all images have alt attributes. Ensure the website adheres to accessibility guidelines (e.g., WCAG).
-
Test Footer and Contact Information Verify that contact information (e.g., email, phone, address) is accurate. Check that social media links direct to the correct profiles.
-
Perform Cross-Browser Testing Open the website in both modern and older versions of popular browsers. Confirm that functionality and design are consistent.
-
Test Error Pages Intentionally navigate to a non-existent URL on the website to check the 404 error page. Ensure error messages are user-friendly and informative.
-
Verify SSL/TLS Certificate Confirm that the website uses HTTPS. Check for the padlock symbol in the browser’s address bar.
-
Check for SEO Compliance Verify that each page has a unique and descriptive title tag. Check that meta descriptions are present and relevant. Ensure there are no broken links.
-
Record Findings Document any issues encountered during testing. Retest resolved issues to confirm fixes.
- Performance, accessibility, best practices, and SEO optimized.
- Images:
- Hero image and favicon: DAL-E and Photoshop.
- Acknowledgements:
- Thanks to Alexander(Code Institute liaison) , John Rearden(Code Institute SME and Coding Coach) and testers for their invaluable feedback.