/afe-cards

Cards-based personal notebook site for Advanced Front End class

Primary LanguageCSS

afe-cards

Cards-based personal notebook site for Advanced Front End class

This is built from a customized version of the HTML 5 Boilerplate Responsive Design Template.

It has had some modifications:

  • Boilerplate content to start out a web development notebook with representative sections
  • Addition of a scss folder for local modifications
  • Addition of a local.scss file to begin customizations
  • Some minor tweaks to the menu using scss

Your job is to make modifications as required by assignment two and later assignments, then to use this notebook as a means of recording what you've learned as part of this class.

Iteration One

Design and Style Cards

  1. Design a “card” HTML & 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 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.

  2. Make sure you use variables, @include, @mixins and @extends directives to implement your design.

  3. 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:
    • Use the Material Design List guidelines.
    • Put a colored dot in front of the term that matches the overall topic color used in your cards.