3 column preview card component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, responsiveness is fine but there is just a horizontal scrollbar. The mobile layout looks great as well.

  Paminos already gave great suggestions, just going to add some as well on this:

  • Do not style the html element, you don't usually style this except when adding font-size and box-sizing. That height property on tit, you don't really need that, you can just remove it as this just creates a fixed height on the whole layout making it larger than it needs to be.
  • Avoid using height: 100vh on an element especially on the body tag as this limits the element's height, use min-height: 100vh on it instead. This takes full height but lets the element expand if needed.
  • On the main tag, you don't need:

  position
  top
  

  To make it centered just add:

      align-items: center;
      display: flex;
      justify-content: center;
      min-height: 100vh;
  

  On the body tag. This will make the element always centered.

  • Each car icons should be hidden since they are just decoration so use alt="' and aria-hidden="true" attribute on it.
  • Also, when using alt avoid adding words that relates to "graphic" such as "icon, logo, images.." img is already a graphic so no need to describe it as one.
  • Avoid using multiple h1 on a page, use only 1 per page. Change those h1 to h2. But a site needs to have an h1, since there are no visible text that could be h1 in here, you will need to make it screen-reader only h1. Have a look at Grace's solution on this challenge, inspect the layout and see the usage of h1 and the stylings applied on it, copy those stylings as you will need those a lot.
  • I would use a tag instead of button since it is more likely to be a link in a real site.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Many8z•55

  @Shawn8zPosted about 3 years ago

  @pikamart I am very grateful for all the generous advices you gave out. And thank you so much for going though my css and pick out all the issues. Hope you have a nice day pikamart. I'll use your and Paminos`s advices to rework my previous solutions.

  1
• 

  Paminos•230

  @epalpamPosted about 3 years ago

  Great job! Keep up coding projects!!!

  Some comments from my side:

  • try to make use of semantic html, e.g instead of div use tags like section, main, aside etc...

  • try to make css more efficient, there is so much css code for such a small project

  but.... you are on a great start congrats!!

  Marked as helpful

  1

  ---

  

  Many8z•55

  @Shawn8zPosted about 3 years ago

  @epameinondas-paminos really appreciate the feedback, I'll keep your advice in mind in the future projects, and thank you for taking the time to leave the feedback. Big thanks :)

  0