3 Column preview card - SCSS - Mobile First

Community feedback

• 

  Rafael Takano•180

  @rafaeltakanoPosted over 2 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!

  Marked as helpful

  2

  ---

  

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 2 years ago

  @rafaeltakano it does! Thank you very much, I'll definitly apply that to the next challenge

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 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.

  Marked as helpful

  1

  ---

  

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 2 years ago

  @Sdann26 Thank you very much, I hadn't understand why those errors were there when I first submited, but your feedback made it much clearer!

  0