Card using display flex

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi ragilbuaj, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is and follow the sequence h1-h5

  <h1>Improve your front-end skills by building projects</h1>

  To make your project more like the example photo, we can do this:

  body {
     background-color: #D6E1F0;
  }
  

  To remove the scrollbar, do this:

  body {
      margin: 0;
      padding: 0;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1
• 

  Richard Ogujawa 👨‍💻•170

  @RichardOgujawaPosted almost 2 years ago

  Hi Ragilbuaj,

  Hope you're keeping well man. Great job with the final product however, I to answer your question I would recommend using different HTML tags to allow the browser to better understand your site, it would also make your site more easily navigable for a screen reader. For example instead of using a div for the card I would recommend using an article (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), I would recommend using a picture tag instead of a div to wrap around the img (https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b), and finally I would also recommend using heading and paragraphs tags instead of divs.

  I re-wrote how I think it would be written using semantic HTML, and sent you a pull request. Check it out and let me know what you think. I didn't change any of the class names so you shouldn't have to rewrite any of the CSS:)

  Marked as helpful

  0