Skip to content
Submitted almost 2 years ago

QR Code Component

Roland Tamas•10
@rolandtamas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, This is my first challenge. I would like to learn the concepts of HTML/CSS to broaden my knowledge for the web development field.

Please offer me some feedback on what can be improved/optimized. Thank you!

Community feedback

  • abdessamad lahrizi•140
    @AbdessamadLahriziPosted almost 2 years ago

    first <img src="images/image-qr-code.png"> ``add an alternate text to this image` second p{ font-size: 15px; padding: 15px 15px 15px 15px; } you don't need to write 15px 4 times just one time when you have the repeated sizes just like that: p{ font-size: 15px; padding: 15px; }``` third, for the div that contains all of these elements to center in the middle of the page you gave it a margin-top 100px and that's wrong you have several methods to center the div like this link will help you to know; I hope that was helpful

    Marked as helpful
    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

    I have some recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.
    • Since this 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 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.
    body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    display: grid;
    place-content: center;
}
.container {
    /* margin: auto; */
    /* margin-top: 100px; */
    . . . 
}

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

    Happy coding!

    Marked as helpful
    1
    Roland Tamas•10
    @rolandtamasPosted almost 2 years ago

    @MelvinAguilar What is the difference between <main> and <body>?

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @rolandtamas

    <main> element is a landmark element that is used to identify a section of a page as the main content of the site.

    <body> element is the page element. That is the part users can see.

    1
    Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    @vanzasetia Hi! Thank you for answering the question! Have a great day!

    1
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Roland Tamas! 👋

    You don't need to use <div> elements to finish this challenge. You can use the <main> element for the card. You can use the <body> element as the container of the card. Then, you don't need to wrap the heading, paragraph, and image elements with <div>.

    The key is to keep the HTML simple.

    I hope this helps. Happy coding! 😄

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord