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!

Live wesbite

Design, Layout & Structure

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.

Wireframes

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.

Colour Scheme

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.

Fonts

Using Google Fonts, we selected 'Merriweather Sans' for the Header font and 'Asap' for the body. These default to Sans Serif where not available.

Technologies Used

Languages

• HTML

• CSS

• JavaScript

• • -

    Tools

• Git

  • Used for version control via GitPod by using the terminal to Git and Push to GitHub

• GitHub

  • Used to store the project code after being created in GitPod / Git

• Gitpod

  • Used to create, edit & preview the project's code

• Balsamiq

  • Used to develop the wireframes

• Google Fonts

  • Used to select & import the fonts to the project (Poppins & Fira Sans)

• Font Awesome

  • Used to add icons to the site

• Tiny PNG

  • Used to further optimise the images for the site and reduce file size

• ezGIF

  • Creating GIFs for the README

• AmIResponsive

  • Creating the mockup images for the README

• Favicon.io

  • Used to create and add the favicon to the browser tab

Features

Navigation Bar

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.

Callout

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.

About

Below the callout is the About section describing the reasoning behind our website and its contents.

Meet the Role Models

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.

Footer

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.

Role Models

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:

• A profile picture
• A detailed story of her life
• A timeline of important events

Role Model Quiz

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.

Future Features

---

Testing & Bugs

HTML Validation

We ran the code for all the pages through the W3C HTML Validator.

Errors

There were some small initial errors occurring on multiple pages:

Home Page

Quiz

404

Bio Pages

These included:

• A px unit included on the width of image elements - fixed by removing the px
• <a> element as the child of <li> elements - fixed by changing the structure of the HTML in the nav bar
• A missing <li> tag - fixed by adding it in
• A missing </script> closing tag - fixed by adding it in
• A missing </div> closing tag - fixed by adding it in
• A duplicate ID used on quiz.html - fixed by renaming the ID on one of the divs
• An empty src value on the quiz modal image (to be populated in the JavaScript based on results) - fixed by adding a placeholder image

HTML Validation Final Results

Home Page

Quiz

404

Bio Pages

---

CSS Validation

We ran the CSS code through the W3C CSS Validator. The CSS passed with no errors

Errors

CSS Validation Results

---

JavaScript Validation

We ran the JavaScript code through JSHint.

There were no errors but there were a number of warnings:

JSHint Results

• 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.

• • -

Performance

We ran the site through Google Chrome Dev Tools' Lighthouse to check on its performance. All scores were 90 or above.

Home Page

Quiz

404

Bio Pages (all scored the same)

---

Bugs & Fixes

During development and testing we encountered the following bugs:

1: Layout issues index.html

Screenshots

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.

2: Button hover effect on quiz

Screenshots

*Hover Effects - functioning incorrectly* *Hover Effects - functioning correctly*

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.

---

Deployment

GitHub Pages

The site was deployed to GitHub pages. The steps to deploy are as follows:

1. In the GitHub repository, navigate to the Settings tab
2. From the left hand menu select 'Pages'
3. From the source select Branch: main
4. Click 'Save'
5. A live link will be displayed when published successfully.

The live link can be found here

Forking the GitHub Repository

You can fork the repository by following these steps:

1. Go to the GitHub repository
2. Click on Fork button in upper right hand corner

Cloning the GitHub Repository

You can clone the repository to use locally by following these steps:

1. Navigate to the GitHub Repository you want to clone
2. Click on the code drop down button
3. Click on HTTPS
4. Copy the repository link to the clipboard
5. Open your IDE of choice (git must be installed for the next steps)
6. Type git clone copied-git-url into the IDE terminal

The project will now be cloned locally for you to use.

---

Credits

Code

• Small code snippets & methods taken from online searches. All relevant code is credited in JavaScript files.

• • -

    Text Content

• Susan Wojcicki: Wikipedia

• Annie Easley: NASA | 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

• • -

    Photos

• 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

• NordWood Themes on Unsplash

• ergonofis on Unsplash

• Mitchell Luo on Unsplash

• Engadget

• Capacity Media

• Shanna Camilleri on Unsplash

• • -

    Acknowledgements

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:

• Emma Hewson

• Florin Maracine

• Karolis Petrauskas

• Kelly Hutchison

• • -