QR Code Project done with simple card design

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 📄:

• Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

• 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. You can read more about this here 📘.

• The width: 100% property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

• The simplest way to set the height of the .wrapper element is with min-height: 100vh, setting the height to 100% on the body and html elements can cause your component to be cut off on small screens, such as a mobile phone in landscape mode. screenshot-imgur (taking into account the scroll) 📸

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

Happy coding!

Hey whats up!

I have a few suggestions for you to improve your code:

• Dont use<div>for everything. There are many other tags whitch you can use for better accessibility.

For example insted of this:

<div class="card"></div>

Use this:

<main class="card"></main>

Whatch this video about correct use HTML semantics.

https://www.youtube.com/watch?v=kGW8Al_cga4

• I also suggest to start using rem units instead of px:

here are a video about units.

https://www.youtube.com/watch?v=N5wpD9Ov_To

• Always use alt attribute on <img> to specify an alternate text for an image, if the image cannot be displayed.

Happy coding! :)

Replace<div class="wrapper">with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

Add the alt attribute alt=" " to the img tag to fix the error issue. The value of the alt attribute is the description of the image.

There is no need to give the body a width and height value To center .wrapper on the page using flexbox, add min-height:100vh, display: flex, align-items: center, justify-content: center to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

There is no need to give .wrapper a margin value. Reduce the max-width value of .wrapper and the padding value of .container for it to be equivalent to the width and padding of the design. max-width: 320px; padding: 15px.

Give the img a max-width of 100% and a border-radius value. the rest is not needed.

Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING