The goal of this project is to develop a simple memory match game for little kids using HTML, CSS and JavaScript. It was inspired by my three year old daughter who is obsessed with dinosaurs. The project needs to be fun, functional and simple to play.
-
To be able to navigate the site easily.
-
To have fun finding the cute dinosaurs.
-
As a young child I would like to have fun matching the cute dinosars which are easily recognisable.
-
As a parent I want a game that is simple for my child to play and understand while fun at the same time.
-
Develop a fun and simple game which is appealing to small children.
-
Add more difficult levels which will teach children to say the dinosaur names.
-
Continue to develop the game to include dinosaur facts and a quiz so parents and children can engage in the game together.
-
A fast loading time.
-
A website which is clear and easy to navigate.
-
Recognisable format, no surprises.
-
A well designed, aesthetically pleasing user interface..
I chose to use a colourful, cute design using images which are appealing to young children and toddlers.
The colours I have used are bright and engaging.
I have used two fonts througout this project. There is not a lot of text, only the heading, buttons and how tp play modal. I used Mouse Memoirs for the heading and Roboto for the text. Mouse memoirs is a very playful and fun font and Roboto goes very well with it.
I choose to use cute and colourful dinosaur images to appeal to young children. While children in the 3-5 age range love dinosaurs they can also be afraid of scary dinosaur images. I dowmloaded all my images from vectorstock https://www.vectorstock.com/free-vectors and vecteezy https://www.vecteezy.com/.
Languages used:
- Javascript
- HTML 5
- CSS
-
- Used Gitpod as my open source platform.
-
- Used Github as my code hosting platform
-
- This project uses Google fonts to style the website fonts.
-
- This project uses Bootstrap4 to simplify the structure of the website and make the website responsive
- This project also uses BootstrapCDN to provide icons from FontAwesome
-
- This project uses jQuery to reference Javascript needed for the responsive navbar.
-
- Popper.js was used to reference Javascript needed for the responsive navbar.
-
- Used WAVE to evaluate my code to ensure the content is fully accessable to individuals with disabilities.
-
- Used W3 HTMLs for HTML code valuation
-
- Used Jigsaw CSS to Validate CSS Code
-
- Used Balsamic to create WIREFRAMES
-
- Minify Code is a tool I used to minify and beautify CSS and HTML codes
Google Lighthouse was used to measure the speed and performance of the website.
WAVE Web Accessibility Evaluation Tool was used to test the sites accessibility....
- No errors were detected.
- No errors were detected
- HTML Validation
Document checking completed. No errors or warnings to show.
- CSS Validation
This project was developed using the Gitpod, committed to git, and pushed to GitHub using the Gitpod terminal.
To deploy this page to GitHub Pages from its GitHub repository, the following process was completed:
- Log into GitHub.
- Click on the account avatar in the top right corner and select "Your repositories" from the dropdown menu.
- From the list of repositories, select gbrw.
- From the menu bar at the top of the page, select Settings.
- In the menu bar on the left side of the screen, select the second menu item from the bottom, "Pages."
- In the Source section, select Master Branch from the dropdown menu, then click on Save.
- As a result, the page is refreshed and the website deployed. The website URL appears in a blue box above the Source Section.
At the moment of submitting this Milestone project the Development Branch and Master Branch are identical.
To clone this project into Gitpod you will need a Github account. Create a Github account here
Then follow these steps:
- Log into Gitpod with your gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the respository
- This will trigger a new gitpod workspace to be created based on the code in GitHub. There, you will be able to work locally.
To work on the project code within a local IDE such as VSCode, Sublime Text, etc.:
- Navigate to the Project GitHub repository
- Click the "Code" download button next to the green "Gitpod" button.
- In the Clone section, select HTTPs and copy the clone URL for the repository.
- Open your local terminal.
- Change the current working directory to the location where you want the cloned directory to be located.
- Type
git clone, and then paste the URL you copied in Step 4. - Press Enter for your local clon to be created.
// Credit to freeCodeCamp.org/ https://marina-ferreira.github.io/memory-game/
This you tube video helped me to implement the memory cards flip, match and structure.
I downloaded all the images for this site from vectorstock https://www.vectorstock.com/free-vectors and vecteezy https://www.vecteezy.com/.
I have been very short on time for this project due to unforseen circumstances, and would like to thank Alexander in student care for all his support and help when I really needed it.