Responsive page using CSS grid and flex box.

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Mirna-Latif, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written learn more, he is not confirming a form, or something like, it will be redirected to another page, to learn more about!

  To resolve do this:

  <a href="/">learn more</a>

  I noticed that you used 3 h1, this is not a good practice as there should only be one main title per html page!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Mirna-Latif•80

  @Mirna-LatifPosted almost 2 years ago

  @AdrianoEscarabote Thanks alot for your feedback, it is very helpful.

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, Mirna-Latif!

  Congratulations on finishing this challenge! 🎉

  For the height of the body of all screen sizes, let the page content controls it. There is no need to set hieght. If you need to set a height on it, use min-height instead.

  Here are some more suggestions for improvements.

  • Replace all the h1 with h2. There should not be more than one h1 on a page. Many h1 mean many titles which can confuse the users, especially the screen reader users.
  • Alternative text for images is not used to tell the image is not supported. It is used to describe the image when the images fail to load.
  • In this case, all the car icons are decorative images. So, leave the alternative text empty (alt="").
  • For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
  • button element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
  • Those "Learn More" buttons are links. If it is a real website, I am expecting those buttons are links that will navigate the users to another webpage.
  • For your information, anchor tags are for navigation. The button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
  • There should only be two layouts, a one-column layout, and a three-column layout. The two-column layout is awkward because there is one card at the bottom alone.

  It is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the README.

  Responsive 3 Column Card Component (No Media Queries) coding challenge solution

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Mirna-Latif•80

  @Mirna-LatifPosted almost 2 years ago

  @vanzasetia Thanks alot for your feedback, it is very helpful.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @Mirna-Latif Happy to hear that was helpful! 😊

  0