View the live project here.

This is a site to help people learn to play poker. It is designed to be responsibe and accessible on a range of devices.

• 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 easily understand the poker rules from the shown examples
    4. As a First Time Visitor, I want to easily understand the feedback given in the quiz
    5. As a First Time Visitor, I want to be made aware of free online options for playing poker as a beginner player

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to quickly find the rules to refresh my knowledge
    2. As a Returning Visitor, I want to quickly find the quiz to test my knowledge
    3. As a Returning Visitor, I want to find the best way to get in contact with the website owner.
    4. As a Returning Visitor, I want to find useful external links.

• Design

  • Colour Scheme

    • The main colours used are black, white and red, taking inspiration from a traditional deck of playing cards. Other colours typical of publishing in the victorian era are used throughout the site, such as navy and wine. The backgrounds of the cards are an off-white of cream colour to resemble paper playing cards.

  • Typography

    • The Alice font is the main font used throughout the whole website with Garamond or failing that any Serif font as the fallback in case of any issue importing the font to the site. The fonts were chosen in keeping with a Victorian era aesthetic to match with the theme of Alice in Wonderland, written by Lewis Carroll in 1865.
    • The IM Fell English font is a more ornate serif style used for large buttons

  • Imagery

    • Original illustrations from the novel by John Tenniel are used throughout. The fact that it is inspired by a children's book with a female protagonist is intended to create a humourous and friendly quality, in contrast with the machismo often associated with card games.
    • For the deck of cards a traditional Victorian style deck was used, to match the theme

• Wireframes

  • Home Page Wireframe - View

  • Rules Page Wireframe - View

  • Quiz Page Wireframe - View

  • Resources Page Wireframe - View

  • Home Page Wireframe Mobile- - View

  • Rules Page Wireframe Mobile- - View

  • Quiz Page Wireframe Mobile- - View

  • Resources Page Wireframe Mobile- - 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 navbar.
2. Google Fonts:
   • Google fonts were used to import the 'Alice' 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 project code after being pushed from Git.
6. TinyPNG:
   • TinyPNG was used to compress images.
7. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
8. CSS Validation Service:
   • CSS validation service was used to check CSS code.
9. HTML Markup Validation Service:
   • HTML validation service was used to check HTML code
10. W3 Schools:
    • W3Schools was consulted extensively throughout the project when implementing features in all languages used.
11. Chrome developer tools:
    • Used throughout development for troubleshooting and debugging
12. JS Fiddle:
    • Used to test combinations of css classes and javascript.
13. JS Hint:
    • Used to validate javascript code.

The testing information and results for this project are documented in testing.md

• The Website was tested on Google Chrome and Microsoft Edge browsers.
• The website was viewed on a variety of devices such as Chromebook, Laptop, & OnePlus.
• 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 deployed to github pages the favicon no longer works
• Users could increment their score if they kept clicking the buttons after the inital scoring and feedback.

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

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

1. Web Dev Simplified:
   • The javascript quiz was based on the quiz tutorial and several other videos from this channel were referenced. The javascript quiz tutorial is Here

• Bootstrap4: The side Navbar is built using bootstrap code.

• W3 Schools : code for the box shadow and footer as referenced in style.css were taken from W3 Schools

• Favicon Generator : Icon was made from the letter P written in the ‘Alice’ font, created by Ksenia Erulevich and available freely on google fonts.

• All content was written by the developer.
• This readme file was adapted from a code institute template.

• All images were taken from www.alice-in-wonderland.net here
• except for the playing card image files which were free graphics from pixbay here

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.