hungmuha/create-ig-page

Website Recreation Lab

Introduction

One of the best ways to sharpen your CSS and HTML skills is to try to recreate an existing page, so take a look at the deliverable below, 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 will be no starter code for this site. You will have to build it from scratch. If you get stuck, remember the Read, Search, Ask guidelines.

Exercise

Requirements (HTML)

• Use the standard HTML boilerplate with head and body
• Use src and alt for all img tags
• Use a footer tag
• Use an unordered list tag
• Use section tags for the main areas of the page
• Use the images provided to construct the appropriate elements on the page, for example:
  • the iPhone
  • App Store and Google Play buttons
  • Instagram Logo
  • Login button

Requirements (CSS)

• Use display, clear, and floats to position elements on the page
• Look up and use at least two CSS properties and values that may not have been covered in class, for example:
  • background: url("YOUR-LINK.COM")
  • list-style
  • text-decoration
  • text-transform
• Use a single external CSS stylesheet to style all pages

Bonus:

• The repeating background image is oldschool. Can you do it with a CSS3 gradient?
• The 'frame.png' image is also unnecessary. Can you do it with box-shadow, border-radius, and position: relative?

Starter assets

The repository contains all the images needed to create the page. You will need to make everything else from scratch.

Deliverable

Once you have submitted your assignment, please take a screenshot of your results and share them in Slack! They should look something like this:

Additional Resources

• CSS Reference from MDN

Licensing

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 [email protected].