Problem sets

Comment box

BEM Breakdown
The Huffington Post

  • A description of the block, element, modifier naming pattern. You do not have to list every single class in your example, just some representative ones. From the above example:
    • Zone is the block for this particular article preview on the Huffington Post homepage.
    • Within the Zone block there is One __title and several __cards each containing a story.
    • Each card has an card__image__linkcard__text.
<div class="zone__title"><h2 class="zone__title__text">LATEST NEWS</h2></div>
<div class="zone__content">
<div class="card"><a class="card__image__link" aria-label="Comedic Legend And ‘Seinfeld’ Star Jerry Stiller Dies" aria-hidden="true" tabindex="-1" href="" data-ylk="g:f8b2806f-48bb-3954-9fae-a84575484d7e;itc:0;pkgt:lay-3|th-default;cpos:1;pos:1;elm:img" data-rapid_p="1" data-v9y="1"><div class="card__image" role="presentation"><div class="card__image__src img-sized img-sized--responsive"><div class="img-sized__placeholder"><div style="padding-top:56.25%"></div></div><picture><source type="image/webp" srcset=""><img class="img-sized__img landscape" loading="lazy" alt="" width="224" height="126" src=""></picture></div></div></a><div class="card__text"><div class="card__text__top"><a href="" class="card__label__link" data-rapid_p="2" data-v9y="1"><div class="card__label card__label--hide-on-phone card__label--top card__label--entertainment">Entertainment</div></a></div><div class="card__headlines"><a class="card__headline card__headline--long" href="" data-ylk="g:f8b2806f-48bb-3954-9fae-a84575484d7e;itc:0;pkgt:lay-3|th-default;cpos:1;pos:2;elm:hdln" data-rapid_p="3" data-v9y="1"><h3 class="card__headline__text">Comedic Legend And ‘Seinfeld’ Star Jerry Stiller Dies</h3></a></div></div></div>


BEM/SCSS 7-1 Architecture

Layout and typography template

  • Google font pairing for my headings: Caladea and body font: Roboto
  • My primary color is a deep shade of gold.
  • color-primary:#ad974f;
  • color-primary-light:#c6b682;
  • color-primary-dark:#8e793e;

HTML template generic page and the first component

Join the Conversation


  1. Hey thanks for hanging in there and being part of the class. And congratulations for finishing up, especially under less than ideal circumstances. Please stay in touch!!!

    1. Thank you for the years of encouragement, couldn’t have done it without you. Thanks for always overextending yourself to help your students.

      1. It’s been a pleasure for me as well! I’ve so enjoyed watching your skills evolve and interests become more honed. The work on the final project is truly exceptional hope you continue to help others solve problems that need solving. The world needs more people like you!!!

  2. Thank you for the years of encouragement, couldn’t have done it without you. Thanks for always overextending yourself to help your students.

Leave a comment

Your email address will not be published. Required fields are marked *