Submitted over 1 year ago

QR Code CSS practice

Emma• 10

@emmy-codes

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

I really struggle with responsiveness but I think this went alright. I know I end up mixing rem, % and em all over the place! Would happily take tips on the best/easiest way to keep contunity with my responsive settings.

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,240

@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.

There should be an <html> tag that wraps the <body> and <head> tags. The <html> tag is the root element of an HTML document. It is used to define the beginning and end of an HTML document.

The corrected code would be:
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>QR Code CSS practice</title>
    . . . 
  </head>
  <body>
    . . .
  </body>
</html>
```

Metadata 🗃️:

The lang attribute is used to declare the language of the webpage. Add the lang attribute to the <html> tag with the value en.

The viewport meta tag is missing. the viewport meta tag is used to control the layout of the page on mobile devices. Add the viewport meta tag to the <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML 📄:

Wrap the page's whole main content in the <main> tag.

Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

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

I hope you find it useful! 😄

Happy coding!

Marked as helpful

Hassia Issah• 50,690

@Hassiai

Posted over 1 year ago

<div class="outer-div> with the main tag to fix the accessibility issues and add the language attribute to the html tag `<html lang="en">` to fix the error issues.

To center .outer-div on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

To center .outer-div on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

For a responsive content, give the max-width a fixed value and replace the height value with a padding value for all the sides. max-width: 20rem which is 320px padding: 1rem .

Give the img a max-width of 100%.

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

Marked as helpful

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