HTML5, CSS3, FLEXBOX, MEDIA QUERIES, SVG

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout looks great in desktop, however the responsive state could be improved. You don't have to wait for the 380px just to show the mobile layout, you don't. When developing websites, inspect your layout in dev tools, try to change the screen's width, if you think that the layout becomes squished or distorted, you could use that size as your breakpoint.

  Some suggestions would be:

  • I would personally suggest to use the body tag as a flexbox. You don't need the margin on the container selector to place it centered. You could have added:

  body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:0;
    min-height: 100vh;
  }
  

  This way, the content will always be centered dynamically.

  • Always have a main element that will wrap the main content of the page. For this one, the .container selector could have used main element instead of div.
  • Avoid using multiple h1 on a webpage. Only use 1 h1 per page. For this one, the h1 would be a screen-reader only text. Have a look at Grace's solution on this one, inspect the layout, see the usage of the h1 and the stylings applied on it, copy the stylings because you will use that a lot.
  • The alt for all the cars icons should be left empty like alt="". If an image is just a decoration, use alt="" and aria-hidden="true" on it, but if the image adds content, then use a meaningful alt value.
  • Do not remove the outline property. This helps user to know where they are, since this serves as a visual indicator for them. If you remove this, make sure to add some in the :focus-visible state of the element.
  • I would prefer to use anchor tags a tag on the learn more instead of button, since it looks more likely a link to "learn more" about the cars.

  Just those ones, but consider the responsive state of the site. Great work again for this one.

  1