Skip to content
Submitted about 2 years ago

media queries

Precious Aziken•510
@Azikenp
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

Community feedback

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

    Hello Precious, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • remove the <div id="container">
    • use class to styling element and not id because it's must be unique in all the page
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • remove all margin from #content id
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh and margin: 0 to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

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

    Hope this help 😉 and Happy coding!

    Marked as helpful
    1
    Precious Aziken•510
    @AzikenpPosted about 2 years ago

    @denielden Thanks a lot. Your corrections are highly appreciated.

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

    @Azikenp You are welcome and keep it up :)

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi @Azikenp, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    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.Something I've noticed in your code is that on many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, which can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

    <body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    2.Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

    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!

    Marked as helpful
    0
    Precious Aziken•510
    @AzikenpPosted about 2 years ago

    @correlucas Thanks a lot. This was more helpful than you could have imagined.

    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