Goal: Focus on using Sass to make your styles as DRY and efficient as possible. Periodically review your styles to determine whether they can be further refactored with Sass functionality.
First, revisit two projects you or your partner created in class this week (your choice) and refactor their styles to use Sass. Don't move on until there are no remaining CSS rules that can be refactored to use the Sass concepts we've covered so far.
Then compare your new Sass stylesheet to the old CSS version. Is it shorter? More readable? Easier to navigate? Discuss differences, pros, and cons with your partner.
Then, begin cloning this page from the Awwwards site, making sure to use as much Sass functionality as possible. Notice also how well it moves as the viewport is resized. This could be rebuilt with flexbox. (hint, hint).
Again, don't worry about copying content. Focus recreating the site's on general structure and movement, and keeping styles DRY with Sass.
If you're able to complete projects above with time to spare, clone one of the award-winning sites featured on the Awwwards site above. Take care to select a site that's responsive, interesting to you, and will provide just the right amount of challenge for you and your partner.
As you're working with your partner, also consider and discuss why your selected user interface is award-winning. Is it highly-usable, yet still artistic? Is it responsive in a really unique way? What makes it special, and why? Beginning to consider the difference between good and great user interfaces will assist us next week, when we begin designing our own from scratch!
Recreate both its movement and structure with media queries, flexboxes, Sass, and other CSS concepts covered thus far.
Lesson 33 of 36
Last updated more than 3 months ago.