Responsive 3-column-preview-card-component design using HTML & CSS

Community feedback

• 

  Adriano•38,080

  @AdrianoEscarabotePosted almost 2 years ago

  Hi zaheer Abbas, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  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 resolve do this:

  <a href="/" class="btn-sedans">Learn More</a>

  I noticed that you used 3 h1, prefer to use h2 since we can only have one h1 per page!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  zaheer Abbas•590

  @zahirpkPosted almost 2 years ago

  @AdrianoEscarabote Thank you for the valuable advice; it is very helpful to me. I always take note of your comments and will use them in future challenges.

  1
• 

  Mirna-Latif•80

  @Mirna-LatifPosted almost 2 years ago

  Hi, you did great job, but i think you should add the @import urls of the fonts at the top of the CSS style sheet before the variables to be applied on the page. Another thing, if you use CSS Grid instead of flex, it will be easier for you at the responsive, you will not need so many adjustments. ex: main { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));} I hope this will help you.

  0

  ---

  

  zaheer Abbas•590

  @zahirpkPosted almost 2 years ago

  @Mirna-Latif I am very happy, to see and read your valuable tips. no doubt by using grid it is easy to handle such task effectively and efficiently. JazaKallah

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @zahirpk hope you are fairing well. Well Done on completing this challenge The font-weight for the .btn is 700. Use rem for the font-size and width as well. There is no need to specify a width and a heigt for each seection, just give it a padding value. This will help with the space you want around the content in each section. section{ padding: 2em} for padding top , bottom , left and right. After you remove the padding variable you gave to the class of each section. Give the h1{margin : 1em 0; } for margin top and bottom and remove the padding values. Padding is always for inside space of an element and margin is for the outside space of an element. Make border of the .btn a little thicker. After the media query, in the main declare only display flex and width, there is no need for the rest. Aside from these, everything is good Hope Am helpful HAPPY CODING

  0

  ---

  

  zaheer Abbas•590

  @zahirpkPosted almost 2 years ago

  @Hassiai I am very happy, to see and read your valuable tips. I read someone recommended tips about Units that is html{font-size:16px}, border is pixel unit font-size: em padding and margin : rem media query em.

  JazaKallah

  0