3 Column preview card - SCSS - Mobile First

Community feedback

• 

  Rafael Takano•180

  @rafaeltakano

  Posted about 3 years ago

  Hi, Luciano! 👋

  Nice work on this challenge! ✌ Your solution is responsive and looks great! 👍

  About BEM, it is a methodology that has Blocks, Elements and Modifiers (B.E.M).

  Blocks that have Elements related to it should be named [Block]__[Element]

  And only modifiers should have the double dash [Block]__[Element]--[Modifier]

  An exemple:

  //css
  .button {}
  
  .button__text {}
  
  .button--green {}
  
  .button--blue {}
  
  //html
  <button class="button button--green">
        <p class="button__text"> Green Button </p>
  </button>
  
  <button class="button button--blue">
        <p class="button__text"> Blue Button </p>
  </button>
  

  I hope this helps!

  21

  Marked as helpful
• 

  Danilo Blas•6,300

  @Sdann26

  Posted about 3 years ago

  Hello Luciano!

  By itself all projects should only have at most a single h1 per page, so I would recommend you to change all your h1 to h2. Although if you do that you will get an accessibility error that there is no h1, so to avoid that error we can do the following:

  • In the main place an h1 with the title you want.
  • Add the class sr-only.
  • To the class place the following attributes:

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0,0);
    border: 0;
  }
  

  The main reason that we will do this is so that the title does not appear in the flow and the design does not look bad but nevertheless the screen reader detects it to avoid this error. In if the sr-only is used for accessibility issues but in this case we will use it for this, if you want to know more look for accessibility on the web.

  Your project has a very good design and is responsive, the truth is that it looks pretty good, I hope my advice has helped you.

  11

  Marked as helpful