Mari Mems is the company behind Face match, a multi-level memory game where players must match the cards of strangers faces to win. The website features a card matching game, how to play, who are Mari Mems and information on brain training. Mari Mems is a fictional memory game company created for the purpose of this project.
Please see the deployed site here
This website is for:
- People who currently enjoy any form of brain training.
- People who want to improve their memory.
- People who struggle with faces and want to improve their ability to remember faces
- People interested games to improve recall.
- People with a specific interest in card matching games.
The website is easy to manoeuvre using buttons and the drop-down menu.
I created the back of my cards to tie in with the theme and the brand created. This presents a clean uniformed look to the player.
I created wireframes using Balsamiq
The fonts chosen for the website are:
- Fredoka One. I chose this font to be the font of the company Mari Mems. The font also doubles as the logo. It is big, bold and fun which is what the brand portrays themselves to be.
- Quicksand. I chose this font for my headings as it was clean, friendly font that was bold enough to be the heading without being too distracting near the logo, nor is it unpleasant to the eyes across various sizes.
- Open Sans. Open sans was recommended as a complimentary font Quicksand for the body. I liked how they looked together and appreciated the simplicity of the font especially in comparison to the logo and bold colours.
I used Coolers to look up suitable colour schemes. I wanted colours that complimented each other but were also bold, warm and inviting.
- As an existing player of memory games, I want to be challenged by a new game, have fun and improve my memory.
- As a potential player of memory games, I am interested in fun ways to improve my memory.
- As an existing player of memory games, I am interested in new memory game concepts
- As a potential player of memory games, I look for something I can and would want to play over and over.
- Collapsible Navigation menu – allows players to move between pages with ease regardless of the size of their device.
- Footer – features social media links to the Mari Mems social pages for direct contact with the company. Mari Mems uses their socials to provide players with updates and the newest memory games.
- Mobile First design – allows users to view the website across multiple platforms without compromising usability.
- Alternative text - All images including feature alternative text to ensure website is accessible for those with visual impairments.
- Memory game - Created using JavaScript to create a board with cards that flip over and stay up when matched
- Read more/less button - This allows players to get more information on what they are interested in rather than filling the screen with large amounts of text.
- Additional levels - The game currently has three levels
- Additional memory games - I have created a memory brand so would like to add other types of memory games.
- Points stystem - so players can see how many points they have earned over the course of the game.
- Timer - To show players how long it took them to solve the puzzle.
- Scoreboard - They are then able to challenge themselves by trying to beat their last time.
- Compatibility for Safari - Found a lont of bugs using the site on apple devices.
- HTML5
- CSS3
- Bootstrap 4.5.3
- Used to simplify layouts and create consistency of design while enabling responsiveness.
- Balsamiq
- Created Wireframes for the project prior to development
- Github & Gitpod
- Used to write, store and view code
- Google fonts
- Used to select fonts for the project
- Font awesome V5.15.2 -Used for the social media icons and the brain icon on the home page.
- Coverr
- Used for pictures of the people in shown in the game.
- Pexels
- Used for pictures of the people in shown in the game.
My Code has been checked using:
- Markup Validation Service
- CSS Validation Service
- Google developer tool, Lighthouse. The report for this can be found here
My project has responded well to testing in various browsers on across multiple devices.
- The project was tested in:
For more testing across multiple devices please see the Mari Mems Tests
My project was deployed using GitHub Pages
- Logged into my account on gitHub.com
- I located my project repository
- Selected settings
- Scrolled to find 'GitHub Pages'
- I selected Master as the source in the dropdown menu
- Pressed save
- Page is automatically refreshed.
- I scrolled down back to 'GitHub Pages' where the new link is available.
- Clicking the link takes you to the deployed website
Local Deployment, run using Gitpod
- Add the Gitpod browser extension on Google chrome
- Login to your GitHub account
- Locate the project repository and select the green Gitpod button which will open a workspace.
- I used Free code camp - Memory Game in Vanilla JavaScript to create a template for my project.
- I used parts of my Milestone 1 project to guide me when I found errors in my code.
- I used Bootstrap to help with help the logo in the Navigation Bar
- Readme template helped me write my Readme file.
- I used W3 to create the read more button
- YouTube Tutorial for building a Memory game here
- My sister a player of memory games helped me with my user stories
- My tutor for the advice before, during and at the end of this project, especialy when I made a mess of my code.
- Disclosure for making music that keeps me productive