Skip to content

Assignment Two Notes

Jump to bottom
Al Zimmerman edited this page Sep 16, 2015 · 3 revisions

this assignment has students style some cards according to the Google Material Design language.

Rough steps:

Prep

  1. Fork this repo and clone it to your machine: https://github.com/portlandcodeschool/afe-cards We may need to do this as a code-along in class as a review for students and to make sure everybody gets it ok.

  2. Verify that you can build the SCSS files using your tool chain's Sass preprocessor. You don't need autoprefixer yet because we only require that the site work on Chrome for now.

  3. Watch this video: https://design.google.com/videos/making-material-design/

  4. Read this introduction: https://www.google.com/design/spec/material-design/introduction.html#

  5. (Optional/Extra) Read the background information at

  1. Review the Material Design section on cards

Design and style cards

  1. Design a "card" SCSS component that has the following characteristics (We will do this as a discussion in class)
  • It must contain an image. You can use a placeholder image from https://placehold.it/, a colored banner whose color relates to the overall topic (HTML, CSS, etc.), or an image that evokes the specific topic of the card.
  • It must have a title that overlays the image/banner
  • It must have a summary that is always visible.
  • It must have a description that only appears when requested. Note Material Design does not allow flipping, so review the specification to see what sort of animation is legal within the language.
  • It must have at least one action that reveals the description.
  • It may optionally have a second action that links to an authoritative site (like MDN or sass-lang) that explains the item in more detail.
  1. Create at least three cards with real content in each topic area (HTML, CSS, JS, Tools, Learning).

Create and style glossary

  1. Update the glossary with all the terms you learned this week. Use the definition list for semantic markup. Do not add any HTML for styling whatsoever.

  2. Design and style the glossary to use the Material Design language. There is more freedom here, but be ready to defend your choices. You may want to:

Optional/Extra

You do not need to do these steps this week in Assignment 2. You should consider doing them sooner or later to make your notebook into a portfolio piece demonstrating your understanding of Material Design.

  1. Update the existing color palette to put the color values in variables and to use the new colors in the navigation menu, glossary, and footer.

  2. Convert the navigation to the Material Design language, using the button styling described here: https://www.google.com/design/spec/components/buttons.html

Other resources

For a series of videos about Material Design, see the YouTube playlist https://www.youtube.com/watch?v=p4gmvHyuZzw&list=PLOU2XLYxmsIJFcNKpAV9B_aQmz2h68fw_

To see how others are implementing Material Design, check out:

Contents of this wiki are copyright of the respective authors, used with permission by Portland Code School.

Icon pack by Icons8

Clone this wiki locally