The Simpson's Puzzle is a game made with the intention of distracting and helping the brain solve the problem while Homer tries to eat his donut.
The choice of simple design was made because I didn't want to create a big contrast between the background and the game and I decided to choose to leave only the official colors of The Simpsons design.
The palette was defined trough search on the Image Color Picker
I used the already available and standard fonts like Arial, Helvetica, sans-serif.
-
HTML
- This project uses HTML to structure the website.
-
CSS
- This project uses CSS to style the website.
-
JavaScript
- This project uses JavaScript to execute the game functions.
-
GitHub Pages
- This project uses GitHub pages to host the website.
No errors were returned when passing through the official W3C validator.
No errors were returned when passing through the official (Jigsaw) validator.
The Lighthouse validator shows a 83% rated on Best Practices saying that 'Displays images with incorrect aspect ratio' but I can’t change without changing the whole game.
JSHint shows only seven warnings.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- On the left side menu, on the section Code and automation, click on Pages.
- From the source section drop-down menu, select the Deploy from a branch.
- From the branch section drop-down menu, select main, right on the side select /root.
- Once the the branch menus have been selected, github will create the page. It might take a few minutes. Once it is done a link will show up on the top of the page.
The live link can be found here - Homer Puzzle
- To fork this site go to its GitHub repository Hommer Puzzle
- On the top right of the page there's a button with the option Fork, click on it.
- A new page "Create a new fork" will open. If you wish, you can edit the name.
- In the end of the page click on the button "Create fork".
- Now you have a copy of the project on your repositories.
- This site was developed using Gitpod. To edit your copy on Gitpod you will need to:
- On your browser of choice install the gitpod extension/add-on.
- On GitHub open the project repository you forked before.
- On the top of the page, over the files, there is a green button on the right side of the page saying "Gitpod". Click it.
- It will open the Gitpod website. On the first time, you will select to connect with your GitHub account and Authorize gitpod-io.
- After that you'll be creating an account.
- It might take a while after that because gitpod will be creating your workspace.
- After the workspace is loaded, you're able to edit it on Gitpod.