3 Column Preview Card Component Challenge Solution by Zain

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout right now in desktop is smaller however it is responsive which is great and the mobile layout looks great.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Also, since you are using flexbox, you don't need the margin on the .container, you could have just set a max-width on the .container so that it's size will be contained properly. That way there won't be an extra scroll on desktop layout.
  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div and the .attribution must use footer so that all content are inside landmark element.
  • Each car icons should be hidden since they are just decorative so use alt="" and extra aria-hidden="true" attribute on the img tag.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. Have a look at Grace's solution on this one see how she used the h1 and copy the stylings applied on it as well.
  • I would use a tag instead of button since it looks more like a link to "learn more" rather than button.

  Aside from those, great work on this one.

  2

  ---

  

  Zain•90

  @ZainA11Posted about 3 years ago

  @pikamart thank you so much for these useful tips!

  0
• 

  Rafael Pinto da Silva•30

  @Rafael-doctomPosted about 3 years ago

  Very Good! I'm also doing this challenge...

  1