View the live project here.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and to test thier knowlegde in Champions League.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

• Design

  • Colour Scheme

    • The two main colours used are darkblue and white.

  • Imagery

    • This quiz has one image and it's on the game section. The reason for this image is that i wanted something to represent what the quiz is about.

• Responsive on all device sizes.

• Interactive elements.

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
4. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
5. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C CSS Validator

• W3C HTML Validator

• [Wave check]

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site.

     1. Upon entering the site, users are automatically greeted with 2 buttons, one to take the user to the questions the other to see the highscores.

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site [link](https://github.com/Gentijan/JavaScript-quiz/settings/pages in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

• I give credit to a youtuber named Brian, I did copy his html code beacuse I wanted to have the same class and id just incase I got stuck on javaScript code. I did have some problems with end.js where Brians video helped me get through. But other than that I mostly did it on my own (https://www.youtube.com/watch?v=f4fB9Xg2JEY)

• All content was written by me (Gentijan Preteni).

• Image was taken from google images (ChampionsLeague).

• I had one bug with the files, it did not work to store the css folder into the assets folder, also it did not work to store end.css file into css folder.

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.

• Youtube tutorial videos