Goal: Expand your understanding of both Sass and User Interface basics, by developing more complex, responsive interfaces using the advanced Sass concepts introduced last night.

Warm Up

---

• View several sites you and your partner commonly visit. Resize the width of the browser window to see how they use media queries to create a responsive design, and organize their content for mobile viewing.
  • What do you notice?
  • What changes?
  • Are there similarities in the way different sites handle responsiveness?
  • As a user, do you feel both mobile and desktop-sized versions are as accessible and usable as possible? Or is there room for improvement? Discuss.
• Give an example use case of a Sass mixin.
• When might we use mathematical operators in Sass? Give an example of how it could DRY up styles.

Code

---

E-Commerce Site

Many developers work for companies creating online stores. As such, it's a good idea to have interfaces for online stores in your own portfolio too. Select one of the following E-Commerce sites to recreate. Each has a different style, and sells a different type of product, but all have clean, accessible user interfaces that gracefully resize to adapt to all screen sizes:

• Urban Outfitters
• REI Co-Op
• Etsy
• Wildfang
• Adafruit

After completing the store's homepage, clone at least one product detail page, and link the two together using multi-page HTML techniques discussed in this week's homework.

Take special care in implementing the advanced Sass features discussed in last night's homework, too, including Mixins, mathematical operators, partials, and color manipulation.

After completing the homepage, select more of the site's other pages to create (product detail pages, etc.). After crafting 3-5 total pages you may move on to the project below.

Awwwards Clone

If you're able to complete multiple pages (at least 3-5) of an E-Commerce site clone with time remaining, go back and tackle another award-winning site featured on Awwwards, as suggested in yesterday's classwork.

If you already cloned the Awwwards site yesterday, select a different award-winning site featured by them instead. There's tons! You're bound to find something you're drawn to.

Recreate both its movement and structure with media queries, flexboxes, advanced Sass, and other CSS concepts covered thus far.

Peer Code Review

---

• Style 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.
• Styles are written in Sass and well-refactored using Sass functionality.
• Project demonstrates an understanding of this week's concepts. If prompted, you can discuss your code with an instructor using the correct terminology.