Murder Mystery is exactly what it is named a murder mystery. All my life I have been watching TV programmes about solving murders, so I decided it would be fun to make a website and try to right my own murder mystery.

The idea to create the website for a murder mystery when I was talking to my parents, who also are really interested in murder mystery, mentioned they would like to solve their own sort of murder mystery.

This is my second of four milestone projects that make up my Full Stack Web Development course at THE CODE INSTITUTE. The main requirements are to make a responsive website with HTML5, CSS3 and Java Script.

Here is the link to my live website : https://callumhearne.github.io/7th-Gateshead-Scouts/

• To provide a fun experience for all people looking to jump into the shoes of a Dectective.
• To create a simple and responive website that can be used on all devices.
• To create a website that can be navigated easily and is not complicated to use.
• To creat a website that has a consistent menu design that is clear.

• I am a new user who was searching online to find a free game to let me experience trying to solve a murder.
• I am a new user who wanted to see if I was clever enough to solve a murder myself after watching so many TV programmes on it.

• I am a returning user who wasn't able to solve the murder first time around so I'm going to try again as I think there is bits Ive missed.

• I am a tablet user and I was able to use the website fine on my tablet.

1. Strategy plane : When deciding on making the website I knew that I wanted to make a website that was simple easy to use that was interesting for the users to be able to read through all of the information without getting bored. I also aimed to make the website look quite clear and not over complicated making it more user friendly. I started planning my UX by asking a few friends what they would like to see in a Murder Mystery website as some of them have no interest in Murder Mysterty and some do.

2. Scope plane : After I had decided what I was going to do with the Murder Mystery website, I then went on planning all of the features I would use to help achieve my goal. I had a look at what I could do with Boostrap and Jquery, I decided on making files that showed and hid the information so it did not clutter up the screen at all. I have added in a hidden code for the user to find to make the website more interactive. I've also added a user feedback page so that the user is able to give me feedback on what to improve.

3. Structure plane : Now that I knew what I wanted to include in my website I need to work out what each page was going to inlcude. My first page is going to be an introduction page that is going to give an introduction into what the website was going to be. The next page is going to be the homepage. This will be where the user will be able to access all of the different pages in the website. The next 3 pages of Evidence, Suspects and Witnesses will all have very similar and consistent layouts. These pages will have buttons to show and hide information so that information will not clutter the pages and look like a chore to read. The next page will be the convict page. Once the user thinks they know who the killer is they will go to this page to convict the suspect. If they are correct they will be congradulated and a button to a feedback page will appear, if they are incorrect they will be linked back to the welcome page and start over.

4. Skelton plane : To navigate the website there is be a simple nav bar at the top of the screen that links to all of the files and the homepage. I thought this was best because it made it easy for users to navigate the whole website easily and efficently. The homepage will be the main hub and will connect all of the pages together too via the buttons at the bottom of the screen.

5. Surface plane : For the colour scheme I decided to give for a simple red and white. Thought that they went well together and I did not want the colours to be too overpowering as that was not the main focus of the website and at the same time I did not want the website to look bland and boring.

After I had planned all of this and had a solid foundation of what I wanted to do, I then went on to figma to see what sort of colours I wanted.

After deciding on the colour scheme I needed to pick a font for my website. I went on to Google Fonts to decide a font I wanted. I went with Roboto as it is easy to read. I would rather functionality over style as this website is about a murder which is a more serious topic.

To make sure I knew what I was doing before creating my website I first created an outline and layout of what I was doing on Figma first. This allowed me to have paln of how I was going to use the tools I had and more confidence in using them because I know what it was going to look like.

Link to my Figma https://www.figma.com/file/imdVcvKZFXExd7NJi7xu4A/Interactive-Fronted-Development-Milestone-Project?node-id=0%3A1

The website will have 7 pages altogether. Each page will have a nav bar that will allow the user to be able to go to the Homepage, Evidence page, Suspects page and Witnesses page.

• Page starts with an image.
• There is some text explaining what the user will be doing on the website.
• There is a button that will take the user to the Homepage.

• Page starts with an image.
• There is more text further explaining what the user will be doing.
• After the text there is button linking to the Evidence, Witnesses, Suspects and Convict page.

• Page starts with an image.
• On this page there will be 4 sections. To open a section there will be an Notes button.
• First section is Time of Death.
• Second section is Cause of Death.
• Third Section is the victim.
• Forth Section is The diary section with has an if statement code to open it.

• Page starts with an image.
• On this page there will be 3 sections. To open a section there will be an Notes button.
• First section is James Ireland.
• Second section is Niamh Drew.
• Third Section is Amy Shepard.

• Page starts with an image.
• On this page there will be 3 sections. To open a section there will be an Notes button.
• First section is Addy Mire.
• Second section is Jim Green.
• Third Section is Glen Wright.

• This page starts with an image.
• There is a little bit of descripton on what the page is.
• This is the page the user will have the choice on what suspect to pick.
• Depending on who they pick there will be a if statement that will give them a link to either the welcome page or contact page depending on if they got the right person.

• This page starts with an image.
• There is some text.
• Followed by the feedback form.

• HTML5
  • HTML5 was used to create and add content to the website.
• CSS3
  • CSS3 was used to style all of the HTML5 to match my design on Figma.
• JavaScript
  • JaveScript was used to help make my nav bar repsonsive.
• Bootstrap framework
  • Bootstrap was used to create the nav bar and containers for the website.
• Gitpod
  • Gitpod was used as a space for me to be able to code and test my website.
• GitHub
  • GitHub was used to host my website and store all of my code
• Jquery
  • Jquery was used to help make the if statements
• EmailJS
  • EmailJS was used to make

• Figma
  • Figma was used so that I can design my website before I started to make it.
• Google Fonts
  • I used google fonts to set the fonts for my website (roboto).

The testing I have done has been documented on a different document. This is the link: https://github.com/callumhearne/MurderMystery/blob/master/Testing.md

I created my project on GitHub and coded it on Gitpod. The following link wil take you to me live project. https://callumhearne.github.io/7th-Gateshead-Scouts/

To deploy my work on GitHub I did the following:

1. I opened up my settings.
2. Scrolled down to "GitHub Pages" section.
3. From here, I selected the "master branch" as my source.
4. Then selected "save".

All of the details and information that were in my website were completely made up for the purpose of the website.

All the photos were from Unsplash here are the artists who took them:

• Bill Oxford
• Grant Durr
• Markus Winkler
• Michelle Ding
• Viktor Talashuk
• Volodymyr Hryshchenko

Link to Unsplash here : https://unsplash.com/

Thank you to the following people who helped with support and guidance at different stages in the project:

• The guidance and support of my mentor Seun Owonikoko.
• The supportive Code Institute community, including my fellow students and the tutor support team.