3 column preview card component main using SASS and BEM

Community feedback

• 

  Adriano•38,310

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Alan Lopez Reyna, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn more, he is not confirming a form, or something like, it will be redirected to another page, to Learn more about!

  to solve this problem do this:

  <a href="/" class="section__button suv__button"></a>

  I noticed that you used 3 h1 tags, this is not a good practice as the h1 tag means the main title of the page! to solve replace the h1 by h2

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0
• Account deleted

  Hi @AlanLopRey! I liked your solution a lot. However, I'd like to point out a few things that can be improved:

  • Even if it's possible to use more than one, there should only be one <h1> per page.
  • In this design, those <button> tags probably would be anchors instead, which you can style to look like buttons!
  • There's no need to add a <span> tag to style the label color separately. You can specify the color: property within the element that contains the label itself. In this case that'd be your <button> tags
  • When using SASS, pseudo-classes can be nested by using the parent selector &. I noticed that you're already familiar with it, so it's a matter of practice. E.g. Instead of:

  .luxury {
    property: value;
    &__button {
      ...
    }
  }
  ...
  .luxury__button:hover {
    property: value;
  }
  

  You could use:

  .luxury {
    property: value;
    &__button {
      &:hover {
        ...
      }
    }
  }
  

  Helpful links:

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
  • https://sass-lang.com/documentation/style-rules/parent-selector

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Alan Lopez Reyna•300

  @AlanLopReyPosted almost 2 years ago

  @rwxdan thanks, I was justly looking in how to apply the hover with the nested property, you save me for next challenges

  0