qr-code-component solution using simple HTML and CSS (divs and 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 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <p> tag; the <p> element represents paragraph-level content, usually text:

    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element.

  • Since the component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

    Popular CSS resets:

    • Normalize.css
    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  samaelWebDev•240

  @samaelwebdevPosted almost 2 years ago

  @MelvinAguilar thank you for taking the time to look at my solution and providing me with useful advice, I am somewhat familiar with semantic HTML as I am learning by following the guides on w3schools and they give you all the theory which I actually enjoy, I will take your advice into consideration in future projects and make use of proper syntax to be best of my abilities no matter how small the project may be.

  happy coding,

  samaelwebdev

  1
• 

  Ahmed Mahrous•980

  @AhmedMahroussPosted almost 2 years ago

  good jop my bro Congrats on completing your first challenge!🎊🍻If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊

  2

  ---

  

  samaelWebDev•240

  @samaelwebdevPosted almost 2 years ago

  @amahrous176 thank you my friend I appreciate your helpfulness.

  0