CSS Positioning: Instagram

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.

Getting Started

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

IF YOU HAVE NODE INSTALLED ALREADY and would like to use a css linter and browsersync

• Run npm install to install dependencies
• Run npm run lint:css to lint your CSS
• Run npm start to start the BrowserSync server

OTHERWISE

Ignore that mumbo jumbo and just dive in! The only files you'll need to worry about are: index.html, img folder, css folder.

Requirements

• 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-style
  • text-decoration
  • text-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-repeat on bgtile.png (the old way)
    • use CSS3 gradients (the new way)
• Get the page as close to the deliverable as possible.

Deliverable

Please find a screenshot of the expected result below. Note that from time to time, Instagram updates the look and feel of its home page. If in doubt, visit their site and make sure the screenshot is up to date. Let your instructor know if it isn't!

Additional Resources

• CSS Reference from MDN

---

Licensing

1. All content is licensed under a CC-BY-NC-SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].