Skip to content
Submitted about 2 years ago

html tailwind css

stac4uo•220
@stac4uo
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

what do you think about this project

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted about 2 years ago

    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
    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾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!

    0

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