View the live project here.

This is a game website World of Games. A user can choose between Guess the Number and Memory game. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for users who want to play the games.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
    3. As a First Time Visitor, I want to see links to the social media platforms.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find the content and the games the site offers.

  • Frequent User Goals

    1. As a Frequent User, I want to see the hige score tables.

• The main colours used are black, gray and purple/green for the buttons.

• The "Source Sans Pro" font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

• Imagery is important. There is a video in the header and it's purpose is to be striking and catch the user's attention.

• Wireframe - View

• Responsive on all device sizes

• Interactive elements

• HTML5
• CSS3
• JavaScript

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 'Indie Flower' font into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used to add icons for aesthetic and UX purposes.
4. jQuery:
   • jQuery was used to create Guess the Number and Memory Game.
5. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
6. 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 Markup Validator - Result
• W3C CSS Validator - Results
• JSHint - JavaScript code passed through a linter with no major issues.

• 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 the name of the website and it's purpose.
     2. Underneath there is a dropdown icon that scrolls to the section with the game descriptions and the buttons to start the games.
     3. Underneath the video there is a a navigation bar.

  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.

     1. At the top of each page there is a clean navigation bar.

  3. As a First Time Visitor, I want to see links to the social media platforms.

     1. There are links to the social media platforms in the footer of every page.
     2. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the content and the games the site offers.
     1. At the home page there are short descriptions of the games.
     2. The navigation bar clearly highlights the pages with different games.

• Frequent User Goals

  1. As a Frequent User, I want to see the hige score tables.
     1. After the user completes a game, there is a pop-up asking their username. After the user writes it, they are informed of their result and the high score table appears listing the top 5 scores for that game.
     2. There is a High score page with the high scores for both games that can be accessed through the navigation bar or with a link under the description of each game on the Home page.

• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone, Samsung and Motorola.
• 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.

• When testing responsiveness on Chrome DevTools some media queries weren't loading properly. There was more testing done on different browsers and the media queries were functioning properly.

• The project was deployed to GitHub Pages using the following steps:

1. Loged in to GitHub and located the GitHub Repository
2. At the top of the Repository, located the "Settings" Button on the menu.
3. Scrolled down the Settings page until I located the "GitHub Pages" Section.
4. Under "Source", clicked the dropdown called "None" and select "Master Branch".
5. The page automatically refreshed.
6. Scrolled back down through the page to locate the now published site World of Games in the "GitHub Pages" section.

• TEMPLATED: CSS, HTML5 & Responsive site template Full Motion by TEMPLATED used throughout the project: index.html basic design, buttons, footer.
• Bootstrap4: Bootstrap Library used throughout the project: Nav Bar, input field.
• Memory game: The code from the tutorial on Marina Ferreiras Github page was used and modified to create the Memory game.
• CSS rule how to make the scrollbar invisible in style.css line 9 found on Stack Overflow - link
• CSS rule for adjusting the background video in style.css line 17 and 23 found on JSFiddle - link
• Example code for scroll animation in scrollScript.js line 2 found on JSFiddle - link
• Example code for the function makeHighScoreTable in highScore.js line 25 found on Stack Overflow - link

• Template for the README.md found on https://github.com/Code-Institute-Solutions/SampleREADME

• All Images were taken from freely-usable source Pixabay, Vecteezy and Pexels.

  1. backgroundMemory.png - Image by VintageSnipsAndClips from Pixabay.
  2. mandala1.png - Image by Gordon Johnson from Pixabay.
  3. mandala2.png - Image by Gordon Johnson from Pixabay.
  4. mandala3.jpg - Floral Vectors by Vecteezy.
  5. mandala4.png - Image by Gordon Johnson from Pixabay.
  6. mandala5.png - Image by Anne-marie Ridderhof from Pixabay.
  7. mandala6.png - Image by Anne-marie Ridderhof from Pixabay.
  8. puzzle.jpeg - Image by Pixabay.
  9. numbers.png - Image found here

• The video was taken from freely-usable source Pixabay.

  1. Space.mp4 - Video by Vimeo-Free-Videos from Pixabay.

• My Mentor for continuous helpful feedback.
• Marina Ferreira for her tutorial how to create Memory game with JavaScript.
• TEMPLATED fot their beautiful Full Motion site template.