Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

qr code component using basic CSS

Taqibβ€’ 390

@taqh

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was supposed to require basic CSS but I may have gotten somethings wrong any feedback on how to reduce unnecessary code would be much appreciated

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Congratulations on completing this 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.

Alt text πŸ“·:

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. πŸ“˜.

CSS 🎨:

  • To center an element vertically, you should use a height to its container. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the graphical height. e.g.: .container { min-height: 100vh; }

I hope you find it useful! πŸ˜„ Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

2

Taqibβ€’ 390

@taqh

Posted

@MelvinAguilar Thanks for the tips I've made the necessary corrections

0
Hassia Issahβ€’ 50,650

@Hassiai

Posted

Replace <div class="container"> with the main tag to fix the accessibility issue. click here for more on web-accessibility and semantic html

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

Taqibβ€’ 390

@taqh

Posted

@Hassiai I have updated it accordingly Thank you very much

1

Please log in to post a comment

Log in with GitHub
Discord logo

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