3 column preview recreation

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout looks great but the site right now is not responsive and the mobile state is missing as well. It would be really great for you to create the mobile view and make the site as responsive as you can^^

  Some other suggestions would be:

  • Always have a main element to wrap the main content of the site. For this use main tag on the .container selector.
  • On the .container selector, it would be great to instead use min-height: 100vh rather than height: 700px so that whatever the user's screen height is, the layout will be always centered. Also instead of margin-top use paddingt-top.
  • Those cars images/svg's 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 insid the main.Have a look at Grace's solution on this one inspect the layout and see the usage of h1 as well the stylings applied to it.
  • Those learn-more is better using a tag rather than button since on a real site, that would like take a user to a page to "learn more" about a specific car.

  Aside from those, great job again on this one.

  0