Assignment repository designed to provide resources to help students do mobile device layout research and experimentation.
In this assignment you will experiment with different ways of making mobile-friendly layouts that can be used in your card matching game. You will strive to leverage the tools included with Bootstrap and jQuery, as well as CSS media queries, to make an elegant layout that will allow you to more easily build your card-matching game.
This whole assignment is meant to make it easier to build the card matching game assignment. You should have some idea of how you want to approach the layout of your game interface before you begin here.
The starter images from the card matching game assignment have been provided in this repository under the img/ directory. You may use those for this assignment, or swap in whatever other placeholders you prefer.
The basic requirements necessary to fulfill the goals of this assignment are:
- Create a mobile-friendly header that can serve as a prototype for your card-matching game header.
- Create a mobile-friendly layout of images that can serve as the playing board for your card-matching game.
- Display metadata (title, description) for each image in a mobile-friendly way.
- Create a mobile-friendly footer to display relevant information.
- Use media queries, Bootstrap components, and jQuery to modify the layout and display of the page for at least four screen sizes: mobile (phone), tablet, desktop and television.
The resolution breakpoints we will use for these four sizes are the default Bootstrap breakpoints:
- Extra Small (xs): less than 768px wide (phones)
- Small (sm): 768px to 991px wide (tablets)
- Medium (md): 992px to 1199px wide (desktops)
- Large (lg): 1200px or more wide (televisions, large desktops, etc.)
The stretch goals for this project can allow you to prototype even more elements of your game interface. Here are some ideas:
- Populate the header with the expected score and game state information display.
- Add control buttons to start/restart the game to the interface.
- Add animations on click or hover for the images.
- Add the ability to view the images at a larger size in a modal window (like on the Flickr assignment).