Exercise Tuesday

Goal: Practice using media queries to create responsive sites, and begin noticing how sites across use them to create gracefully responsive interfaces.

Warm Up


  • View several sites you or your partner commonly use. Resize the browser window width to see how they use media queries and organize content for mobile viewing. What do you notice? Are there similarities in the way different sites handle responsiveness?
  • What does flex-direction refer to? How does changing this property's value alter a flexbox's layout?
  • What are the differences between pseudo-classes and pseudo-elements. Give an example of each.
  • With your pair, visit a few websites each of you commonly uses. Can you spot what you think are usages of pseudo-elements, or pseudo-classes? Discuss.

Code


Instagram

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.

National Public Radio Clone

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.

Peer Code Review


  • CSS rules are created and organized using "outside in" best practices.
  • Project exhibits understanding of box model best practices.
  • Flexbox is used to efficiently present groupings of similar or related elements.
  • Media queries are used to change rules based on screen size.

Lesson 32 of 36
Last updated more than 3 months ago.