Goal: Practice using media queries to create responsive sites, and begin noticing how sites across use them to create gracefully responsive interfaces.
flex-directionrefer to? How does changing this property's value alter a flexbox's layout?
Another increasingly popular type of site is a photo sharing or social media platform. The most popular is currently Instagram. (Instagram also relies heavily upon React, a technology you'll learn in level 3! So it's valuable to become accustomed to common types of React interfaces too).
Instagram is known for its clean, sleek interface, that gracefully resizes between desktop and mobile layouts as the viewport shrinks. Recreate this notable interface in your own code, using the concepts we've covered thus far, especially those media queries from last night!
Specifically, recreate the logged-in homepage desktop view seen at this link--but only if you're logged in!). (If either partner has an account they feel comfortable logging into, feel free. Otherwise, create a dummy account, follow a few pages so there's something in the feed, and share amongst classmates).
Then, recreate a standard profile page like this one here.
If you're up for a challenge, you can optionally attempt recreating this detail view as well.
We've referenced the National Public Radio's website, npr.org, several times in our lessons for its excellent use of relational box models and responsive media queries.
Recreate the homepage of this site in your own HTML and CSS. The exact content does not need to match (don't worry about copying headlines, specific ads, graphics, etc.) but the structure, relational box models, and media queries to reorganize those boxes as viewports shrinks should.
Then create at least one of the detail pages a user sees after clicking on a story (like this one here). Use the techniques for multi-page HTML sites discussed in last night's homework to link pages together.
Lesson 32 of 36
Last updated more than 3 months ago.