One of the best ways to sharpen your CSS skills is to try to recreate an existing style and layout, so take a look at the deliverable below, work with a partner, and build your own version of Instagram.com. Don't worry if you can't get it to look exactly as you see but try your best to get as close as possible.
There's a bit of starter code, so you can jump right into it.
The provided template contains all the files, images, and text content needed to create the page. The text is in the index.html, and the color palette is in style.css.
- Use positioning selectors and the box model to position elements on the page
- Look up and use CSS properties and values that may not have been covered in class. Be sure to use MDN or search engines for documentation. For example:
background: url("YOUR-LINK.COM")list-styletext-decorationtext-transform
- Use a single external CSS stylesheet to style all pages
- Use the images provided to construct the appropriate elements on the page:
- the iPhone
- App Store and Google Play buttons
- Instagram Logo
- Login button
- Blue gradient. There's a couple different ways to do this:
- repeat an image using
background-repeatonbgtile.png(the old way) - use CSS3 gradients (the new way)
- repeat an image using
- Get the page as close to the deliverable as possible.
Please find a screenshot of the expected result below:
Use CSS media queries to make the iphone image disappear when the screen is mobile width. (Less than 320px wide)
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.