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 Tailwind CSS

denisejy 10

@denisejy

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


Hi! This is my first time using Tailwind CSS for styling. I would appreciate any feedback given to improve my code.

And things I would like to know and learn:

  1. Are there any good practices when it comes to placing a div or card at the center of a page?
  2. Is there anyway to show my footer attributions without scrolling?

Thank you for any feedback and comments given!

Community feedback

@moutafatin1

Posted

Yo, Good job on completing this challenge.

1 - for the first question, it depends, some times I just "flex justify-center item-center" and other times I center with a margin left and right auto.

2- To show your footer without scrolling, you should change the height of the div holding the card to a value lower than 100vh, because the div takes the whole view, adding more height and will show the scroll, Or maybe you can wrap the div and the footer into another div and make the height of that div 100vh.

finally, try to fix the accessibility and HTML validation error, adding a lang attribute to the HTML tag and changing the div tag holding the card to the main tag, as you do in the footer using, search for semantic HTML for more info.

Sorry for my English and have a good day.

Marked as helpful

1

denisejy 10

@denisejy

Posted

@moutafatin1 Thank you very much for the feedback! It helps a lot :D Have a good day to you too!

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