Skip to content
Submitted about 2 years ago

QR Code Component using Tailwind CSS

denisejy•10
@denisejy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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

  • Oussama Moutafatin•380
    @moutafatin1Posted about 2 years ago

    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
    @denisejyPosted about 2 years ago

    @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

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