View the repository in GitHub here
View the live project here
Genquality is a website built as a project for September's Hackathon with Code Institute, Deloitte and Trust in Soda. The theme given was 'Closing the gender gap' and so we decided a good way to tackle this issue was with an educational and enlightening quiz, along with some resources and information on how the user can make a difference.
The goal of our website is to see how aware the user really is about the gender gap. Some users might be shocked by some of the facts and statistics, while others may not. For those with less knowledge about the topic, we want to provide resources where they can learn more and also how they can help close the gap in their workplace and their life. The overall aim of this project is to bring awareness to the inequality in workplaces, each gender being affected in different ways.
- HTML5 for the contents and structure of the website.
- CSS3 for the styling and animations.
- Balsamiq for wireframing.
- GitPod as a local IDE & repository.
- GitHub as a remote repository.
- GitHub Pages to deploy the website.
- Chrome, Firefox, Brave Browser, Edge and Opera for browser testing the responsiveness.
- Chrome Developer Tools for testing screen sizes and using Lighthouse.
- Remove Image Background to remove background from logo.
- Wave Chrome extension to check web accessibility.
- Pesticide Chrome extension during development.
- Am I Responsive for testing and to make responsive image.
- JS functions and examples.
- Visual Studio Code as a local IDE & repository.
- Favicon.io to create a favicon.
- Font Awesome for icons.
- TinyPNG to optimize images.
- Employees
- Employers
- Activists
- As a first time visitor to the website, I want to know what it's about as soon as I land on the home page.
- As a user, I want to be able to navigate the website easily and always know what page I'm on.
- As a user I want to be able to have quick access to a fun quiz from both the landing page and a dedicated area in the nav bar.
- As a user, I want to find out more information relating to the topic with ease.
- As a user, I want to find out who created the website and why it was made.
- Hero image
- User story: As a first time visitor to the website, I want to know what it's about as soon as I land on the home page.
- We chose a hero image that we felt conveys the topic of the website immediately and catches attention.
- Over the hero image, we have some text reiterating the point of the website.
- Navigation Bar
- User story: As a user, I want to be able to navigate the website easily and always know what page I'm on.
- Our nav bar includes the website title, logo and links to all main aspects of the website.
- Whichever page the user is currently on is highlighted in the nav bar.
- Quiz Button
- User story: As a user I want to be able to have quick access to a fun quiz from both the landing page and a dedicated area in the nav bar.
- We included a button that redirects the user straight to the quiz page from the landing page.
- This means the user can go straight from reading about the topic to the quiz.
- Landing Page Information & Graphic
- User story: As a first time visitor to the website, I want to know what it's about as soon as I land on the home page.
- Also included on the landing page is a colourful graphic to portray the topic.
- Beside it we also have included a small paragraph of text stating some information about the topic, so that the user has a brief idea what the website entails.
- Quiz
- Our quiz that was built using JavaScript gives a series of 8 questions.
- Should the user answer correctly, the quiz moves onto the next question.
- If the user answers incorrectly, the quiz gives an explanation as to why they are wrong.
- At the end of the quiz, it displays the user's results and the option to restart or exit.
- The exit button brings the user straight to the resources page so that they can learn more about the topic and perhaps improve their score in the future.
-
Resource Panels
- User story: As a user, I want to find out more information relating to the topic with ease.
- Because our target audiences were specifically employers, employees and activists, we included a resource section for each.
- Each section has a link to information relevant to each audience target.
-
About Us Cards
- User story: As a user, I want to find out who created the website and why it was made.
- The last thing we wanted to include was a brief introduction to the team behind our project.
- To do this we used some cards to display each team member's github profile.
- About the Project
- The final thing we included was a short informational paragraph about the project and why it was created.
- We left this until the end as we felt the main purpose of the website was more important than explaining the origin of the project.
Should we continue to work on this project, there are a number of features we would like to implement to improve the website.
- Add a scoreboard for quiz results
- Expand the questions pool
- Add images to questions
- Expand social media integration
We went into this project with the aim of being unbiased to any gender, and also making the information as clear and concise as possible.
-
Best Practices:
- HTML doc type included in the html for all pages.
-
Search Engine Optimization:
-
Semantic HTML included in all internal pages created.
-
All links have descriptive text added.
-
Alt attributes added to all images.
-
Meta-data descriptions added to each internal page created.
-
For our fonts, we decided to use 'Karla', a sans serif font, and 'Inconsolata'. We felt these two fonts complimented each other well; the simplicity of 'Inconsolata' helping us portray our information as factual and official.
Images that were used varied from stock images of co-workers, to protest signs and cartoon illustrations. We wanted to show all the different sides to this topic and we feel the images we've chosen show this.
For our colour scheme, we used coolors.co to generate a palette that we felt was neutral enough not to bias any particular gender, and was also light enough that text and other images would contrast well with the colours.
- Upon opening the site link incorrectly: 404 Page should load automatically - Tested, the 404 Page loads up.
- Upon opening the site link correctly: Homepage (start screen) should open - Tested, the site loads up.
- From Homepage pressing on the nav links:
- Home - takes the user to the Homepage - Tested works as intended.
- Quiz and Take a Quiz button - takes the user to the Quiz page - Tested works as intended.
- Resources - takes the user to the Resources Page - Tested works as intended.
- About - takes the user to the About Page - Tested works as intended.
- From Quiz page pressing on the nav links
- Home - takes the user to the Homepage - Tested works as intended.
- Quiz - takes the user to the Quiz page - Tested works as intended.
- Resources - takes the user to the Resources Page - Tested works as intended.
- About - takes the user to the About Page - Tested works as intended.
- Green Checkbox - starts the quiz - Tested works as intended.
- Green Checkbox - submit true answer to the question - Tested works as intended.
- Red X - submit false answer to the question - Tested works as intended.
- Green arrow - allows user to move to the next question before the correct answer box disappears. - Tested works as intended.
- When Quiz is finished:
- Green circle arrow - retake the quiz - Tested works as intended.
- Red right arrow - exit the quiz and open resource page - Tested works as intended.
- Red X - takes the user back to the homepage
- Resource page - relevant links in different sections takes the user to external resources.
- Home - takes the user to the Homepage - Tested works as intended.
- Quiz - takes the user to the Quiz page - Tested works as intended.
- Resources - takes the user to the Resources Page - Tested works as intended.
- About - takes the user to the About Page - Tested works as intended.
- About page:
- Home - takes the user to the Homepage - Tested works as intended.
- Quiz - takes the user to the Quiz page - Tested works as intended.
- Resources - takes the user to the Resources Page - Tested works as intended.
- About - takes the user to the About Page - Tested works as intended.
- GitHub cards links - Opens clicked GitHub profile - Tested works as intended.
-
Page behaves as expected in all browsers tested. The website was tested in Chrome, Firefox, Brave Browser, Edge and Opera.
-
On the mobile and tablet website was tested in Chrome, Firefox.
| Bug | Status |
|---|---|
| Quiz page would not scroll | Resolved |
| Focus remained on button on quiz page | Resolved |
| Quiz container moved to the corner of page | Resolved |
| CSS property error | Resolved |
| Empty heading error | Resolved |
| Nav bar error | Resolved |
External code used has caused a number of known issues, along with browsers.
- Github cards display good only as low as 330px
- Github cards lack alt tags reducing accessibility.
- On some mobile devices the logo image was misaligned in the nav bar in Firefox.
- https://github.com/petrugio
- https://github.com/Raivis80
- https://github.com/lukaszkukla
- https://github.com/Tiyko
- https://github.com/gracemcken
As this was the first group project for many of our team members, it presented a learning curve for everyone! Among the issues outside of actual bugs that we encountered as a team was:
- Some members using px vs rem/em
- Difficultly with push/pull and merging
- Min width vs max width for pages
Our main overall issues relate to the fact that each team member had different ways and habits of doing things, so to make our code across all pages consistent was a challenge. We resolved as much as we could once the majority of the code was finalised and fixed inconsistencies during final clean up before submission.
Github cards were generated using GitHub Dev Widget.
- Some images were taken from pexels.com.
- Other images were taken from freepik.com
-
Git was used as the version control software. Commands such as git add ., git status, git commit and git push were used to add, save, stage and push the code to the GitHub repository where the source code is stored.
-
GitKraken was also used for git version control when working locally from the PC.
A big shout out to Code Institute Deloitte Trust in SODA
for providing us with the opportunity to Participate in this Hackathon. Also to our facilitator Chris, whom was immensely helpful during this project.