- After seeing your previous projects, Super Stellar Games Inc. has decided to hire you to create their new single page website! Congratulations! The Super Stellar team is made up of game developers, so they're relying on you to know how to make a great website to showcase their games.
- Like most clients, Super Stellar has an idea of what they want, but could use your help to solidify those ideas:
- First, research and find 3 great single page web pages to show your client (played by your instructional team! - if your instructional team makes up new names and personas for themselves, just roll with it...).
- Once your client (the instructional team) picks one of the web pages you showed them, begin creating a desktop wireframe AND a mobile wireframe of the 1-page site for your client’s approval.
- Consider what do other game companies have on their sites:
- Contact information
- Game videos
- Social media buttons
- Game reviews
- Etc.
- Super Stellar Games Inc. has the following specifications you need to include:
- Should include an “About” section
- Feel free to use Lorem Ipsum
- Should include a “Games” section, where each game has an image, the name of the game and some description text
- Feel free to use placeholder content or use real game images you find online
- Should include social media links somewhere on the page
- Href can be set to “#”
- The website must be mobile ready!
- The target device is iPhone5 (320x568)
- The website must be properly hosted on GitHub
- (Optional) Can include videos
- (Optional) Can include Game Reviews
- Each review should have an image and name of the person as well as the text of their review
- Should include an “About” section
- Once done, present BOTH wireframes to your client for approval.
- If either wireframe is not approved, make any necessary revisions and try again.
- Consider what do other game companies have on their sites:
- Once approved, plan out who in your group is responsible for what
- Break down large tasks into smaller ones and assign these task accordingly
- Create a new folder called “superStellar”
- Navigate into the folder
- Create the “index.html” file
- Create a new folder called “lib”
- Within this folder, create two folders “css” and “js”
- Within the “css” folder, create a “style.css” file
- Within the “js” folder, create a “main.js” file
- Note: “lib” is short for library. As our projects get larger, we need consider staying organized and keeping like information together and different kinds of information separate. Organization like this is a standard practice.
- In your “index.html” file, make sure to properly reference the “style.css” and “main.js” file
- Note: the relative path from “index.html” now involves the “lib” folder.
- Feel free to include additional files according to your needs
- Note: If you have images and want to stay organized, create an “assets” folder to put them in!
- Navigate into the folder
- Make sure to test your website for smaller devices using Chrome Dev Tools (
Ctrl + Shift + I)
- Try using animate.css to add some cool animations to your site
- Download animate.css and for the elements you want animated, simply add “animated” to the class along with the kind of animation you want. For example:
<div class="animated jello"> … </div>
- Download animate.css and for the elements you want animated, simply add “animated” to the class along with the kind of animation you want. For example: