- Introduction
- Construction
- Features
- Testing and Deployment
- AI Tool Reflection
- Future Development
- Credits
- Final Thoughts
Purpose:
Concise guides and clear emergency steps to help you protect your devices, accounts and privacy.
Audience:
Users seek simple tips, tools, and insights to protect privacy, prevent cyber threats, and build a secure digital life. Stay smart, stay safe, stay connected.
This project is a friendly, easy-to-use web page designed to help users learn about staying safe online in a supportive way. Welcome to Cyberspace Haven — your trusted space to learn, stay safe, and thrive online. We empower users with simple tips, tools, and insights to protect privacy, prevent cyber threats, and build a secure digital life. Stay smart, stay safe, stay connected. SafeNet is a small resource providing clear, privacy-first advice for individuals and small organizations. This concept focuses on essential content to help people act quickly. The calming design and clear layout—built with Bootstrap—make information easy to find for all users.
Key goals:
- Clean, welcoming layout using Bootstrap
- Clear structure and accessibility via UX principles and semantic HTML
- Validated custom code (W3C/Jigsaw)
- Responsive design for all devices
- Cloud deployment with version control and commented code
- Concise README with project purpose and value
- Reflection on AI tools’ impact on performance and user experience
User stories followed the format:
As a [user type], I want [goal] so that [benefit].
Copilot assisted with defining purpose, color palettes, layout clarity, and accessibility strategy.
Figure 1: Chosen color palette for calming aesthetics
Figure 2: Developed user stories and acceptance criteria
Tasks were organized via GitHub Project Board and prioritized using the MoSCoW method.
Figure 3: GitHub task tracking and prioritization
Wireframes were created using a mobile-first approach to ensure responsive design and user clarity.
Figure 4: Mobile and desktop wireframes
VS Code was configured with basic HTML boilerplate, Bootstrap via CDN, and organized file structure.
Figure 7: Initial coding environment and folder structure
- Semantic HTML
- ARIA labels
- Commented CSS
- Validated via W3C and Jigsaw
- Autoprefixer used for cross-browser compatibility
Figure 8: W3C validation results
Figure 5: Lighthouse Mobile
Figure 6: Lighthouse Desktop
The project was deployed via GitHub Pages, with commit history and live auditing.
Figure 9: GitHub Pages configuration and success message
- Hero section with calming visuals
- Information cards summarizing topics and tips
- Positive affirmations carousel
- Resource links to trusted organizations and helplines
- Responsive design across all devices
- Accessible navigation and smooth scrolling
- Contact form with required fields
- Footer with social links and copyright
- Semantic HTML & ARIA labels
- Validated code using official validators
- Lighthouse scores in the 90s (Accessibility, SEO, Best Practices)
- Fixed contrast issues, added alt text, and compressed images
- Meta descriptions added for SEO
- CSS processed and validated
- Site live at https://sveena25.github.io/SafeNet---CyberSafeHaven/
AI tools played a strategic role in supporting this project:
- Code Generation: semantic HTML layout, responsive Bootstrap grid, navigation logic
- Design Choices: color palette selection, accessible font pairing, layout guidance
- Debugging Assistance: helped resolve validation errors and layout spacing issues
- Optimization: improved animation performance and smooth scrolling
- Workflow Enhancement: accelerated prototyping and reduced debugging time
New user story:
Quick access to stress-management tips in a calm format.
Acceptance Criteria:
- At least 3 actionable tips with headings/icons
- Scannable layout using cards or grid
- Gentle and supportive language
Planned additions:
- Stress tips section with Bootstrap cards
- Dark mode toggle
- Resource finder for local support
- Add skip-to-content accessibility link
More future ideas...
- Expand positive affirmations section
- Add breathing exercise animations
- Integrate chatbot for personalized tips
- Newsletter opt-in via contact form
-
Frameworks & Libraries:
-
Design Tools:
- Balsamiq, Image Color Picker, Remove.bg, Simple Image Resizer
-
Utilities & Validation:
- Chrome Lighthouse, W3C/Jigsaw Validators, Autoprefixer
-
Development Support:
- GitHub Copilot – semantic structure, debugging, responsive layout, image suggestions
- VS Code and GitHub for version control
-- Imagery:
- Background images from DALL-E licensed under the Microsoft License
- All screenshots and wireframes in assets/images-readme/
This site is more than code — it's a safe place, a calm space, and a gentle nudge toward understanding. Designed with empathy, clarity, and accessibility in mind, this project aims to support users seeking online safety whether for the first time or simply needing a reminder: you are not alone.