Cyber Safety - Staying Safe Online
Project overview
Cyber security is something everyone who uses the internet needs to think about and find the information they need to protect themselves and loved ones from harm. This website is an attractive hub of awareness, via secure information, handy tips, external resources and blog posts suitable for all ages.
User Experience Design (UX)
The site is of minimalist and consistent design over all pages, providing the user with ease of use, along with information regarding cyber safety, extra resources and a choice to subscribe to the Cyber Safety newsletter.
Through the application of agile methodologies, we started out with wireframes and discussed ideas, before we settled on one style and expanded upon that with frames for mobile, tablet and desktop.
[screenshots]
User stories were created and put into our Product Backlog Kanban board on Github, so we could monitor our progress and be clear about our assignments.
[Include some user stories?]
Features
-Navigation bar
At the top of every page within the site, the full responsive navigation bar includes the Cyber Safety logo and links to all pages on the site. Namely ‘Home’, ‘Guide’, ‘Resources’, ‘Newsletter’ and ‘Blog’. This provides ease of navigation for the user and a pleasing consistency in the design of the site.
[screenshot]
-
The landing page image
The landing page image attacts the user with it’s stunning nature and invites them to explore the site via the images warming colour glow.
[image]
-Featured blog posts
Also on the Home page are attractively boxed links to blog posts. The amount changing with sizes of screen. One for mobiles, two for tablets and three for desktops.
[screenshot]
-The footer
The footer contains links to the social media platforms for Cyber Safety and open in a new tab, allowing easy navigation for the user.
[screenshot]
- Guide section
This section allows the user to gain information on six topics within the scope of cyber safety, which is presented as individual top five tips underneath each relevant image.
[screenshot]
- Resouces section
This section includes embedded educational videos, along with links to chosen external sites to help the user find extra information should they need.
[screenshot]
- Newsletter section
This section includes a ‘call to battle’ image and an email sign up input field to afford the user a choice of keeping up with the latest information from Cyber Security.
[screenshot]
Upon subscribing, the user is taken to a ‘Thank you, be safe’ page.
[screenshot]
-Blog section
This section is accessed via the dropdown menu on the navigation bar, providing the user a choice of most recent blog post or all blog posts. In this instance created with the help of Chat GPT
[screenshot]
Features Left to Implement
• Regularly updated news section of latest related stories/guides • Training course feature added, rewarding users who pass with a certificate • Search bar for user convenience in finding the information they need
Testing
All features above have been tested on the deployed website. Navigation bars are working as intended, links to social media websites are working. The form is working as it should, and buttons perform the given actions.
Lighthouse test when finalised [screenshots]
--------------- code institute notes -------- to be removed -------- In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your project’s features and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.
In addition, you should mention in this section how your project looks and works on different browsers and screen sizes.
You should also mention in this section any interesting bugs or problems you discovered during your testing, even if you haven't addressed them yet.
If this section grows too long, you may want to split it off into a separate file and link to it from here.
Validator Testing
---------------- code institute notes --------------
- HTML
- No errors were returned when passing through the official W3C validator
- CSS
- No errors were found when passing through the official (Jigsaw) validator
Unfixed Bugs
------------ code institute notes You will need to mention unfixed bugs and why they were not fixed. This section should include shortcomings of the frameworks or technologies used. Although time can be a big variable to consider, paucity of time and difficulty understanding implementation is not a valid reason to leave bugs unfixed.
Deployment
This project was deployed on GitHub. Below are the steps we followed to be able to deploy the website:
- In the GitHub repository, navigate to the Settings tab.
- Scroll down until you see GitHub pages.
- From the source section drop-down menu, select the main branch.
- Once the main branch has been selected hit the save button.
- Finally, when the page is refreshed there will be a detailed ribbon display to indicate the successful deployment.
The live link can be found here: https://erfannajimi.github.io/hackathon-project-group-3/index.html
Credits
For royalty free images used: Freepik.com
For blog content: Chat GPT
For footer icons: Font Awesome
For coding help: Slack community w3schools.com
For colour palette: Coolers.co Video content: YouTube
[plus…]