Column Preview Card Using Grid and Flex

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really awesome work on this one. Desktop layout looks really nice, just a bit taller. The site is responsive and the mobile state looks really nice as well.

  Others already gave feedback on this, just going to add some suggestions as well:

  • Always have a main element to wrap the main content of the site. For this use main tag on the .grid-container selector.
  • Avoid using height: 100vh on a large container like the .grid-container as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Add an extra aria-hidden="true" on the car icons since they are only decorative images. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • On a site, always have a single h1. Since there are not visible text that are suitable to be h1, the h1 would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text inside the main.Have a look at Grace's solution on this challenge inspect the layout and see the usage of h1 as well the stylings applied to it.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div to wrap the text.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  David Dyer•185

  @davidbdyerPosted almost 3 years ago

  Your solution is not responsive. Best practice is to start with mobile first.

  Marked as helpful

  1

  ---

  

  Aaron•300

  @AbsolamPosted almost 3 years ago

  @davidbdeath It should be fixed now!

  0
• 

  reza•60

  @rezaboxPosted almost 3 years ago

  hello Aaron20 this project is not responsive me today read your code and clear code and responsive code and push your githup so you can see my code and Comparison to your code .

  0