Skip to content
Submitted about 2 years ago

Simple QR code card

Miran Legin•680
@miranlegin
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 all, is there any way to fine tune my solution to closely match the design without having an access to figma/sketch files? Maybe some common letter spacing values or drop shadows throughout the challenges? I don't want to fine tune it to oblivion but small differences are driving me crazy sometimes ;)

Community feedback

  • Cornflakes•290
    @CornflakesPlusPosted about 2 years ago

    Almost Pixeled Perfect solution. Well done Man! 👍✨

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

    👾Hello @miranlegin, Congratulations on completing this challenge!

    You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

    The html structure you've used is working but the code could be cleaner. To make it clean you start by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    YOUR CURRENT CODE:

    <body cz-shortcut-listen="true">
    <main>
    <div class="card">
        <img class="card-image" src="images/image-qr-code.png" alt="QR code for Frontend Mentor">
        <h1 class="card-title">Improve your front-end skills by building projects</h1>
        <p class="card-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
</main>
</body>

    THE CODE CLEANED:

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <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.It's even better to use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

    ✌️ I hope this helps you and happy coding!

    0
    Miran Legin•680
    @miranleginPosted about 2 years ago

    @correlucas - Thank you for taking the time and evaluate my exercise.

    1. Regarding shortening html tags/classes i can see on other examples that this is common practice right here on the platform and i will take that into consideration for next challenges.

    2. I have scrolled thought my repository and only place where i can find px values are in declaring breakpoint variables in scss and using padding-inline on a body element of 28px. Is there something i am missing you are referring to?

    Cheers, Miran

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

    @miranlegin Keep it up Miran!

    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