Submitted over 1 year ago

QR Code Component

Roland Tamas• 10

@rolandtamas

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@AbdessamadLahrizi

Posted over 1 year 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

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year 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

Roland Tamas• 10

@rolandtamas

Posted over 1 year ago

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

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year 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.

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

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

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year 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! 😄

Please log in to post a comment

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