To celebrate International Women's Day, this month's Code Institute hackathon is paying tribute to Women in the Tech Industry.
Out of the main challenges faced by women in tech on a daily basis, we decided to focus our project around the theme of 'Lack of Representation'. It is true that women are often under-represented in technical roles, and more specifically, there are women who are completely unheard of by a large percentage of the population. These women have pushed the boundaries of science, gone where no coder or computer scientist had ever gone before, and paved the way for future generations with ground-breaking innovations that no-one has ever heard about.
We are celebrating the lives of amazing women who have changed the face of technology. Welcome to Follow her Footsteps!
Having agreed on the topic of under-represented women, we decided to build a website dedicated to the lives and achievements of six important women in the tech industry. The homepage gives a summary of all six women, and there there is a detailed overview page of each woman's life and points of interest.
To take even further inspiration from these women, there is then a quiz page where you can answer a series of questions to find out who would be your ideal female tech role model to follow and aspire to out of the six women promoted on our site.
We designed two wireframes for desktop at the start of the project. One for the main homepage, and a second one for the role model quiz. The final site varies slightly from the wireframes due to developments that occured during the creation process.
Originally we wanted to keep the color scheme very classic and simple using black and white images. Then to add a hint of color, we introduced some additional tones into the overall site color palette.
Using Google Fonts, we selected 'Merriweather Sans' for the Header font and 'Asap' for the body. These default to Sans Serif where not available.
The navigation bar contains a bespoke logo for the site on the left, which is also a link back to the homepage from any point across the site. On the right, the user can access the role model quiz, or each of the six role model's information pages.
This navbar reduces down into a hamburger menu for tablet and mobile devices.
Filling the full view height of the page is an initial hero-image and our Callout text describing the website. There is also a direct link from the hero-image to start the quiz.
Below the callout is the About section describing the reasoning behind our website and its contents.
Below the About section is an introduction card about each of the six featured women on our site. You can see a black and white profile image, and summary about each person, and a link to click through to a more detailed summary of their life.
In desktop and tablet view, there are two cards displayed on each row. For mobiles, only one card is shown per row.
The footer contains ficticious social media links, and a link to the team's GitHub repository. The footer condenses down into two rows for mobile devices.
There is a full page of information dedicated to each of the sox featured role models on our site. This is broken down into three sections:
You can answer a series of 10 questions to discover which female role model you are most suited to aspire to, and follow in their footsteps.
For each of the quiz questions, you have to choose an answer that you feel most closely relates to your personal situation or feelings.
As you go along, the site calculates which of the six role models you can relate to more closely. If, once you get to the end, you are similar to more than one role model, you must play the tie breaker round to narrow it down.
Once you have answered all ten questions, and a possible tie-breaker, the site pairs you up with your ideal role model and gives you your results.
We ran the code for all the pages through the W3C HTML Validator.
There were some small initial errors occurring on multiple pages:
These included:
<a>
element as the child of <li>
elements - fixed by changing the structure of the HTML in the nav bar<li>
tag - fixed by adding it in</script>
closing tag - fixed by adding it in</div>
closing tag - fixed by adding it insrc
value on the quiz modal image (to be populated in the JavaScript based on results) - fixed by adding a placeholder imageWe ran the CSS code through the W3C CSS Validator. The CSS passed with no errors
We ran the JavaScript code through JSHint.
There were no errors but there were a number of warnings:
Two undefined variables (these were declared in the questions and role model arrays in separate files) - no fix needed
Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. This error referred the readability of the JavaScript code - due to the time constraints of the Hackathon and the fact that the code was working correctly and it was just a readability issue rather than an error this code was left as it was.
We ran the site through Google Chrome Dev Tools' Lighthouse to check on its performance. All scores were 90 or above.
During development and testing we encountered the following bugs:
In an early version of the layout for index.html there were multiple issues on index.html relating to the layout on desktop and mobile. These were all fixed by changing the HTML & CSS structure and resizing and optimising the images. The final results of the fix can be seen in the finished website images above.
We discovered that in certain browsers/devices (in this case Windows & Chrome) the CSS hover effect on the game buttons and answers wasn't working correctly. We checked it on responsivedesignchecker.com and the hover effect was working correctly there. Due to the time restrainst of the hackathon this bug remains.
The site was deployed to GitHub pages. The steps to deploy are as follows:
The live link can be found here
You can fork the repository by following these steps:
You can clone the repository to use locally by following these steps:
The project will now be cloned locally for you to use.
Small code snippets & methods taken from online searches. All relevant code is credited in JavaScript files.
Susan Wojcicki: Wikipedia
Nikki Durkin: Medium | The Daily Mail
Hedy Lamarr: womenshistory.org | globalcitizen.org
Mary Wilkes: Wikipedia | Code Savvy | ethw.org
Ada Lovelace: Britannica | biography.com | BBC Newsround | Time Graphics | Doodle Learning
Susan Wojcicki: Tech Crunch
Annie Easley: NASA
Nikki Durkin: We Work
Hedy Lamarr: Global App Testing
Mary Wilkes: Informatica Y Mujer
Ada Lovelace: Britannica
Tie Break Images
Thanks to the amazing collaborative efforts from the following students at the Code Institute for their passion, creativity, team work and drive. Women and men alike would be proud of this website all over the world.
Collaborators: