HTML&CSS using Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. Layout in desktop is good and the mobile layout is good as well, just an idea for the mobile state, you could have made the cards more wider with a relative size so that it will scale along with the screen's size.

  dewslyse already said great suggestions, just going to add some little ones:

  • Since those car icons are just decorations, adding an aria-hidden="true" attribute on the svg would be really great.
  • The learn more is more likely to be a anchor tag a rather than button, because it is like a link to "learn more" about the car.

  Just those 2, great job again on this one.

  Marked as helpful

  0

  ---

  

  tarik310•230

  @tarik310Posted about 3 years ago

  @pikamart thanks very much for the advices. with all respect

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Nice work on this challenge. However, there are some few things to note:

  • Your document is missing a major landmark element main. Always remember to wrap the main / central content of your page in main. Changing your .container <div> to a <main> in your html would actually resolve all the accessibility issues raised.
  • Your page has more than one h1 (<h1>SEDANS</h1>, <h1>SUVS</h1>, <h1>LUXURY</h1>). Best practice dictates having one <h1> element on a page. You should change the current h1s to h2s and add a screen-reader only h1 element..

  Happy coding!

  Marked as helpful

  0

  ---

  

  tarik310•230

  @tarik310Posted about 3 years ago

  @dewslyse thanks very much for the advices. with all respect

  0