Skip to content
Submitted almost 3 years ago

html tailwind css

tailwind-css
stac4uo•220
@stac4uo
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

what do you think about this project

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    Hello Stac4uo, You have done a good work! 😁

    Some little tips to improve your code:

    • remove height from the section tag
    • use img element for the qr image and not a astyled div
    • use h1 for the title of card and not a simple p
    • use min-height: 100vh instead of height, otherwise the content is cut off when the browser height is less than the content

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    👾Hi @stac4uo, congratulations on your solution!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    1.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    2.Add the title of the page inserting in the <head> the tag <title> → <title>QR Code - Front End Mentor</title>

    3.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

    4.The main heading has the tag <p>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

    5.To maintain the card responsive use max-width instead of width this way you allow the content to be flexible. The difference between max-width and width is that width is fixed and max-width has a maximum size but can shrink to fit the content.

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    ✌️ I hope this helps you and happy coding!

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