*Words in black are requirements for the assignment. Words in red are some
comments/notifications that need to be noted.
Submit an Index.html and a style.css file, and any other files needed for your website.
For this assignment, you will create a near-replica of Instagram.
You can use any tools we’ve learned in class, including Bootstrap or another CSS Framework,
as long as you fulfill the requirements for the assignment and it looks as similar to Instagram
as possible.
(Please cite the framework if using something other than Bootstrap. You’ll need to find
icon/pictures yourself for the contents.)
If you do not have an Instagram account, you can use the screenshots attached as a guide.
Requirements:
• Overall, your page should look as similar to Instagram as possible, and include the
following elements:
o Header bar with logo, search box, and icons
▪ header does not need to do shrinking effect when you scroll(Header needs to be
fixed on top of the page, without overlapping any contents)
▪ search box should include background color change on “focus” but other changes
do not need to be re-created
o Main content area
▪ Must contain 2 image posts with a caption.
▪ Must contain “suggestions for you” section
o Sidebar with profile info, stories, and footer links.
▪ Make sure sidebar is stationary while you scroll on the page (may want to look at
position: sticky, but not necessary)(stick the sidebar to right)
▪ Make sure stories area has too much content to fit and scrolls(put at least 6-8
foobar in the “Stories” area. Set a certain height for the “Stories” area. When the
height of the foobars reaches the set height, user should be able to scroll this
“Stories” area)
• Your page should have responsive behavior like Instagram, where around tablet size the
sidebar disappears and the main section is centered. This can be accomplished using
Bootstrap or your own media queries.
(Please note that on Mobile view, it only shows nav bar and image posts. No sidebar and
no “Suggestions for you” area. Refer to the screenshot at the last page.)
Main layout:
Scrolled down, “suggestions for you”:
Mobile view: