3-column preview card component

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the text in each button does not need any letter-spacing using letter-spacing.

  In terms of your code, good job using the pseudo-elements :link and :visited.

  In terms of the class names for the sections, I think section-1 at first glance is not descriptive of the section that it represents. I think it would be more suitable to name it something like sedan-container etc. The focus is really on having descriptive class names so that if another developer comes across your stylesheet, automatically they would know that the css declaration for a particular ruleset is identifiable to that particular section of the webpage etc.

  Hope this helps

  Cheers

  Marked as helpful

  1

  ---

  

  Syl•750

  @sylcymPosted over 2 years ago

  @TheCoderGuru Hi, thank you so much for the feedback. I'll try to improve my solution following your advice 😊

  0
• 

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  Hey there 👋,

  Congratulations on completing the challenge 🥳! You really did amazing, especially to use semantic HTML which is a good idea to improve your SEO scores! For feedback, I have a recommendation which you can use later if needed.

  In HTML, you have given each button a class as btn-section-1, btn-section-2, and btn-section-3, however, in CSS, we can actually use selectors which helps us to select elements without specifying each element a class like btn-section-1.

  You can select elements in CSS like this:

  // Try This
  .section-1 > button {   // This apply changes to all the child buttons in Section-1
      background: red;
  }
  

  // More Cases
  
  .section-2 > button:nth-child(1) {    // This will select only the first button in Section 2 (Suppose you have 10 buttons, it will only apply changes to the first button)
      background: blue;
  }
  
  .section-3 button {    // This will select all the buttons in Section 3, and when I meant all, I meant even grandchild buttons.
      background: blue;
  }
  

  I noticed it since your hovering of each button was orange, you might want to fix that. Although, I really loved the way how you slid the attribute to the right side and made it vertically straight.

  Looking forward to seeing your amazing work in the future and hope this helps 😊

  Marked as helpful

  1

  ---

  

  Syl•750

  @sylcymPosted over 2 years ago

  @AcmeGamers Hi, thank you so much for the feedback 😊 Got it! After code refactoring, I forget to change the selectors 😅

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @sylcym It is completely alright, we improve as we all learn 😊. Best of luck with the future challenges 🥳!

  1