3-column preview card component SOLUTION

Community feedback

• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi Ryan,

  Why write a <div class="*-btn"> element on your html and then put a <button> element inside, Just put a <button> and remove the div is unnecessary.

  Anyway, you REALLY need to learn BEM This youtube-link is useful as well . You have .sedan-btn, .suv-btn and .luxury-btn. you wrote THREE times the same code, that's nothing good

  This : ... border-radius: 15px; padding: 0.5em 1em; font-family: 'Lexend Deca', sans-serif;

  You wrote 3 times because you have 3 differents kind of cars, Can you image if you have 100 differents kind of cars?, you will write 300 lines of code when you just need 3.

  Maintaining a page that has many lines of code repeated in the future is a headache

  in the first and last class inside the main.preview-container (section.sedans and section.suvs) you used a border radius, first you can use the shorthand (to write less) second if for one reason a person change the order of you three kinds of cars , how the border-radius display will be wrong. You could remove all border-radius-* y and put .preview-container{ display: grid; display: grid; grid-template-columns: repeat(3, 250px); border-radius: 5px; overflow: hidden; }

  I put 5px because you put 5px, on my opinion I'll write on "rem" instead "px"

  Sorry for my poor english, I'm not a english native speaker . Anyway keep coding, remember that "Practice makes perfect"

  Marked as helpful

  1

  ---

  

  juanitatime•20

  @juanitatimePosted over 2 years ago

  @agusc01 wow I learned a lot from your comment though its not my solution. I'll study BEM. Thanks.

  1

  

  Ryan Truong•90

  @Ryan-TruPosted over 2 years ago

  @agusc01 thank you for the reply, there are a lot of great tips!

  1
• 

  juanitatime•20

  @juanitatimePosted over 2 years ago

  Hi @Ryan-Tru,

  I just finished posting a solution of this as well. I think we're on the same track with learning HTML, CSS and JS. :) Your solution looks great but might need a bit of alterations like: button font-size needs to be a bit smaller and the box size for mobile design is smaller than actual design file - maybe you can adjust its height so the <p> tags can wrap below. All the rest are great. Keep it up! Hope you can review mine as well :D

  0