Please visit the website here.

I created this website to teach and inform people interested in history. Specifically people interested in WW2 history. The site is based around the casualties of WW2. With world conflicts seemingly on the rise recently, I thought it best to remind people of the consequences of war.

Watching the Numbers is made up of the following sections:

1. Home
2. Tragic Events
3. Sources
4. Register

Site owner's goals:

1. To teach those interested in history about the consequences of war.
2. Inspire users to learn about current conflicts affecting people in the world today.
3. To get users to register to recieve more information surrounding WW2.
4. To inform users about lesser known tragedies during ww2.
5. To provide reliable and unbiased sources supporting my statements.

User goals:

1. As a first-time visitor, I want to easily find information about the casualties of WW2.
2. As a first-time visitor, I want to learn about lesser known aspects of the war.
3. As a first-time visitor, I would like to be able to register. To recieve more information to my email.
4. As a recurring or first-time visitor, I would like to easily find sources to do my own research.
5. As a recurring or first-time visitor, I would like to find links to the sites social media pages.

After thinking about the strategy for my site, I came up with a target audience for my site. This also included what features they would need from the site.

1. 18 - 50 years old
2. New / Seasoned people interested in history.
3. People looking for unbiased sources on WW2 casualties.
4. People who are interested in WW2.
5. People interested in data surrounding WW2.

• Easy to understand and visually appealing graphs displaying data.
• A simple and clean site that is easy to traverse.
• A site they can register on to recieve more information on WW2.
• Learn something new about a subject that they may know a lot about.

I wanted to keep the website as visually clean as possible. The numbers that need to be included inside the graph were quite large. I did not want to take away from them by overloading the screen with other information. WIth the site having a simple layout, this really helped make it responsive for mobile and tablets.

To help the user achieve their desired experience, these features were included:

• A clean header and nav bar to navigate the website.
• A sources page to allow users to access unbiased information.
• A registration page for users to sign up for more information.
• Two graphs showing the casualties of the Asian and European theatre.
• A tragic events page to shed light on costly events during the war.
• Social media links in the footer to lead to social media pages.
• A link to return to the top of the page, as not to stop the users journey.
• A clear introduction to the site to explain its purpose.
• A response page informing the user they are registered.

This is a multi page layout; this was chosen as not to overload the user with too much information on one page. The nav bar allows the user to navigate the site to the information that they are interested in. An arrow is provided at the bottom of each page, so the user can continue their journey through the information provided. The home page provides two graphs showing European and Asian theatres of war. I wanted to separate the two because each deserved their own graphs. The Tragic Events page dives deeper into some of the more costly scenarios in WW2.

The site's goal was meant to give an overview of the war's cost and not to get to bogged down in specific details of it all. The home page would give the user an overview, which would then lead them to more specific scenarios on the tragic events page. Lastly, if the user wanted to recieve more information, they could register on the register page. As well as make use of the sources page to do some digging of their own.

Desktop Tablet Mobile

Please be aware, the wireframes may not represent the site accurately. As the site was subject to change as I was building it.

While designing the website, the original intention was to have the registration form and the sources together on the same page. This however, overloaded the page with too much information. So in the end I added another page to the nav so that the user could sign up at the end of their journey if they wanted to.

When testing on small mobile screen sizes, the nav bar became too cluttered. So I decided to create a hamburger menu to contain the nav at smaller screen sizes. This kept the screen clear and organized even on a smaller display.

I used a color palette that I always end up returning to when designing something. It consists of shades of red and pink, with a contrast of a charcoal gray. I felt this worked well with the theme, indicating all of the bloodshed that happened during this terrible time.

I created all of the image assets for the page using illustrator. I wanted to create an abstract theme for all of the humans on the page. I hoped that this would allow anyone of any background to be able to relate to the imagery.

The abstract crystals used in some of the accompanying imagery were meant to represent fragmented pieces of history that might be lost if not well documented.

Lastly I used Bebas Neue and Montserrat throughout the site. They pair together well. Bebas read like an old war-time newspaper headline. Montserrat balanced this out as well.

This website was designed with desktop in mind. However, works very well on tablet and mobile. Some mobile users may suffer when it comes to the graph on the index page. A template design was used throughout the website to make sure that the style and layout was consistent.

The nav bar is placed top right on the desktop; this keeps it out of the way of all of the imagery and information. When shrunk to a tablet size, it centers itself to adapt to the closing screen size. Lastly, it gets contained in a hamburger menu below 500px. The nav menu had too many pages to keep them all showing on smaller screen sizes. It also shows the user which page they are currently on so they don't get lost. Below on the home and events page, there is a large hero image to remind the user of the common people who lost their lives in World War Two.

This page introduces the who, what and why of the website. Then, below the introduction of the site, the user is shown two graphs. These graphs depict the losses of European and Asian theatre. The graphs contain military and civilian deaths during the war. The Asian theatre is a relatively unknown area of the war to most people, so I wanted to make sure it got its own spotlight. If I had more time and experience, I would have loved to have created an interactive graph. This would make the graphs easier to decipher on mobile. As well as allow me to show more detailed information. The end of the page has an arrow pointing up, allowing the user to return to the top of the page.

This page contains particularly costly events during the war. I wanted to include battles and scenarios that people generally would not know much about. It begins with an introduction section to explain its purpose. It then goes onto talk about the battles of Leningrad, Stalingrad, Berlin, and Shanghai. Each image has something to do with its corresponding information. I was wondering how many keen historians would notice them. This page also included an arrow to return to the top of the page.

This page was key in backing up where I got all of my information. Anyone interested in history should always be aware of where their sources come from. I included a variety of sources so that I could make my information as unbiased as possible. The page has a link to each source, as well as some text to explain the background of the course. The links are also underlined when the user hovers so they know its a link.

The register page was made so that the user would be able to sign up to recieve further information on the topic. If the website did its job, the user would be interested in learning more about the topic. The form on the page contains a first name, last name and an email input. When submitted, the user will be brought to a response page. From here they can return to other pages to continue their journey, if they wish.

The footer contains hypothetical social media links that the user could use to follow for more information.

1. Html Used to structure my webstie into basic building blocks.

2. CSS This was then used to style all of my building blocks.

3. Javascript Javascript was used to create the hamburger menu used in the mobile nav menu.

4. Google Fonts I used this to find my fonts for the web page.

5. Font Awesome I used this page to import arrow icons for the web page.

6. Google Dev Tools This was essential when designing the site, particularly with the responsiveness. As well as bug finding.

7. GitHub This was used to store all of my code safely.

8. Git This allowed me to version control my code. As well as push and commit pieces to Github when I needed.

9. Gitpod I used gitpod as my development environment.

10. Illustrator I used illustrator to create all the imagery for the site. As well as the wireframes.

11. W3 School Html Validator This validator made sure that there were no errors in my html code.

12. W3 School CSS Validator This validator made sure that there were no errors in my CSS code.

13. Colour Hunt I use this as an extension in my browser. It really helps me find great colour palettes.

14. Flex Box Flex box helped a lot when it came to the page layouts.

15. Code Institute The code institute lessons were used many times to troubleshoot.

16. Lighthouse I used google lighthouse to make sure that my page was accessable as possible.

1. As a first-time visitor, I want to easily find information about the casualties of WW2.

After being directed downwards from the introduction section of the home page. The user will come across graphs detailing the casualties of World War 2. The page is very clean and not crowded. As not to distract the user from their goal. I use the arrow to return to the top of the page to continue my journey.

2. As a first-time visitor, I want to learn about lesser known aspects of the war.

As a user I make my way to the tragic events page, listed in the navigation. After reading the introduction, I make my way through the detailing of each battle included in the events section.

3. As a first-time visitor, I would like to be able to register. To recieve more information to my email.

As the user, I navigate my way to the register page. I have been intrigued by the sites information and want to know more. I then fill in the displayed fields with my information. I press submit and I am then given a response page to let me know that I have successfully registered.

4. As a recurring or first-time visitor, I would like to easily find sources to do my own research.

As the user, I use the nav bar to find the sources page. I see all of the sources are from a variety of backgrounds. Each link underlines when I hover over it. I then follow one of the links to its page. I then delve further into the information provided.

5. As a recurring or first-time visitor, I would like to find links to the sites social media pages.

As the user I reach the bottom of a page and want to find out more about the site. I see the footer containing social media links. I click on one that leads me to a page I can now follow.

My web page scored very high on Google Lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

Using SVGs for my images really helped with the page loading time. As well as the simple and clean layout.

I validated my website during its development as not to run into many issues towards the end. Luckily there were not many errors throughout. Some warnings still remain, but this is as to the use of h1 tags.

1. I had issues with some of the images on my page. The images are made up of polygons. For an unknown reason when exported, the triangles would have a gap inbetween their edges. This would show whatever colour happened to be on the other side. This was easily fixed by returning to the illustrator file and putting another copy of the artwork behind itself. The gaps remained, but the gap colour would not be noticed anymore.

2. A strange bug kept me up at night for days. My footer had completely dissapeared and would not show back up. Turns out that one of the icons I imported from Font Awesome had also brought a bunch of CSS selectors with it. Just by pure chance one of the selectors coincided with my own for the social media icons in the footer. One of the rules in the imposter selector was display: none. It was an interesting bug to say the least. You can see it highlighted in the image below.

I deployed my website to GitPages using these steps:

1. Sign into GitHub.
2. Select your project from your repositories.
3. At the top of your project select settings.
4. Navigate your way to the pages section of settings.
5. Select source and then select "Main" (It can also show up as master for some people)
6. Click save.
7. The page will generate a url, this will be where your page is hosted. (Be aware this may take a few minutes.)

These are the sources that helped me make my way through this project. I used many pages for troubleshooting and wisdom when it came to creating my website.

• Awwwards

• The Fallen of WW2

• Behance

• Web Developer Portfolios

• Kevin Powell Tutorials

• Hamburger Menu

• FlexBox

• Web Layout Critiques

• Wikipedia

• National WW2 Mussum

• Statista

• Britanica

I would like to pass on a massive thank you to my mentor Harry Dhillon. He provided excellent adivce and was very supportive throughout the whole process. My good friend Daniel Roberts, he is a seasoned front end developer and also provided amazing tips. As well to all my family and friends who had a look at the site at my request.