Skip to content
Submitted over 1 year ago

QR Code component using HTML and CSS

thiCha•10
@thicha0
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

I always end up tweaking pixels during frontend development, is it a good thing ? Should I use percentages sometimes ? Is there a rule about border-radius for example ? Here I have 20px for the container card and 15px for the image inside. I try different combinations of pixels and I leave the ones that "feel" to fit.

Community feedback

  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hey THICHA

    There is nothing wrong with tweaking the px some people are just that meticulous. People just use rem/em, % or even vh and vw to play with some measurements. It comes down to the person. I do see the use of % in resizing the site so parts can fit in parents better or just as a max-width/min-width

    For the border-radius there is no problem if its close to the design then its alright. If you go even further than this then you bordering on OCD territory which can be a time waster since the project is already almost perfect to the design.

    If you have the sketch/fig files then the measurements can just be copied from and used but working from just a photo will require you guessing a lot and not getting a perfect replica but if its close enough then thats alright.

    If you struggle with width/height try using clamp, I highly recommend it.

    Tips for the site:

    Don't use height:100vh on the body rather use min-height:100vh and min-height:100dvh the min-height makes your body's height as big as the screen but it can then increase based on the content. The dvh is for more responsiveness but put the vh before this as some browsers cant read dvh.

    body{
min-height:100vh;
min-height:100dvh;
}

    I see however that you did not add a box-sizing:border-box; to your * like:

    *{
box-sizing:border-box; 
}

    This makes working with margin and padding easier as they wont increase the width/height of your containers easily.

    Please don't use a div as a landmark without reason(like a framework). What I mean is, the DIRECT children of the body. There are a few landmarks like

    • nav
    • main
    • footer
    • aside etc.

    For your project I would just replace the direct children of the body into main and footer respectfully. The reason for this is for the developers so we don't get easily lost in the code and also screen readers use the landmarks.

    Hope this helped.

    Marked as helpful
    3
  • Talisson•190
    @talissoncostaPosted over 1 year ago

    Hello @thicha0 Congrats for the solution. It seems to be great. About your questions...

    1. Pixels is a great approach, it makes your UI more consistent. Percentages sometimes is hard to manage.
    2. There is no rule related to border-radius, at least I don't know yet. I think you made good usage of it, they are different from each other. I would just suggest you have a look on the The 8-Point Grid. It really worth to get used using this system, it will make your designs more consistents.

    Feedback

    1. You could replace your the element on your qr-code-title to be a h1 instead of a p it is the main text on the screen and using an h1 here will improve accessibility, helping the screen readers understand where is the title in your component.
    2. Take a look on how to use flexbox in your projects it will help you lot and take you to another level. (Most of places you don't need margins, you can use gap to make your layout more consistent and easy to manage).
    3. Also, use the semantic tags to improve your solution... use the tag main to wrap up your main implementation and the tag footer on the footer.
    <body>
<main>
  <div class="qr-code-card">
    <img class="qr-code-img" src="./images/image-qr-code.png" alt="QR code">
    <div class="qr-code-text">
      <h1 class="qr-code-title">Improve your front-end skills by building projects</h1>
      <p class="qr-code-subtitle">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>
</main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/thicha0">Thicha</a>.
  </footer>
</body>
    Marked as helpful
    2
  • Sheetal•190
    @sheetal1409Posted over 1 year ago

    You can use pixels, however pixels are not responsive . Pixels can be used for small ,fixed sized elements like borders and shadows. Instead of pixels try using REM .

    2

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