CSS Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Avoid using uppercase text in your HTML because screen readers will read it letter by letter. You can use the text-transform property to transform the text to uppercase in CSS.

  • The <br> tag is often used to create line breaks, but it doesn't convey any semantic meaning. When a screen-reader reads the text, it will break the flow of reading at the line break tag, which can be confusing for users. More information here.

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

    Example:

    <picture>
        <source media="(max-width: 48em)" srcset="./images/image-product-mobile.jpg">
        <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
    </picture>
    

  • The alt attribute is used to provide a text description of the image which is useful for screen reader users, assistive technology users, and search engine optimization. Add the alt attribute to the <img> tag of the product.

  • It is generally not recommended to use multiple <h1> tags on a single web page because the <h1> tag is used to mark the most important heading on a web page and it is considered the top-level heading in the document outline. It should be used only once on the page, typically for the title or main heading of the page.

    You can read more about this here 📘.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. You can read more about this here 📘.

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1

  ---

  

  Ayomide Olaniyan•50

  @AyomidejhayPosted almost 2 years ago

  @MelvinAguilar Thanks a lot for the suggestions. I'll definitely put them to practice

  1