One of the best ways to sharpen your CSS and HTML skills is to try to recreate an existing spage, 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.
- Use the standard HTML boilerplate with
head
andbody
- Use
src
andalt
for allimg
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
- 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:
- Make it even better than Instagram! Throw in some animations, experiment with
hover
, make it fun.
The repository contains all the images needed to create the page. You will need to make everything else from scratch.
Once you have submitted your assignment, please take a screenshot of your results and share them in Slack! They should look something like this:
During the previous exercise, rate your progress on a scale of 1-5 (5 being the highest) for the following criteria:
- Persistence: Do you handle frustration well? Do you independently pursue understanding?
- Organization: Do you thoughtfully implement best coding patterns and practices?
- Collaboration: Do you make an effort to solve problems and share your ideas with others?
- Communication: Do you clearly convey your thoughts to others in illustrative and clear ways?
- Self-compassion: Do you make productive use of turning failures into learning opportunities?
- Resourcefulness: Do make an effort to compare and contrast new ideas with ones you already know?
All content is licensed under a CCBYNCSA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].