Skip to content
Submitted over 2 years ago

QR code component

LetsFrontend•500
@B1N4R1
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

This was an easy one to do, not much to say since it's a very simple and straight forward design.

I used flexbox to create 2 columns: one for the qr and the other for the text provided, nothing too fancy.

Any suggestions are as always, very much welcome!

Cheers!

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello LetsFrontend, congratulations for your new solution!

    Amazing solution here bro, the container is really good done and full responsive.

    I've two suggestions for your:

    1.Add a margin to the contaier to avoid it touching the screen edges while scaling, try a value around margin: 24px;

    .container {
margin: 24px;
}

    2.Clean your code by removing the div called <div class="desc">, theres no need to have it since you can wrap everything with the div container with:

    See the structure below:

    <body>
<div>
<img>
<h1></h1>
<p></p>
</div>
</body>

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
  • PhoenixDev22•16,950
    @PhoenixDev22Posted over 2 years ago

    Hello LetsFrontend,

    Congratulation on finishing another frontend mentor challenge. Your solution looks great. I have few suggestions regarding your solution if you don’t mind:

    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image)
    • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank”`` attribute , you can expose your site to performance and security issues.

    Hopefully this feedback helps.

    Marked as helpful
    0
  • David•8,000
    @DavidMorgadePosted over 2 years ago

    Hello man you did a pretty good job, congrats on finishing the challenge!

    I think Lucas already give you the correct path to structure your html, I would also change the div tag for main tag, to avoid the FEM validation for main tags, when you build a simple component or card for a challenge, you should wrap the main content on a main tag, cause that will surely be the pricipal content of your project!

    For larger projects where you use this little component just ignore this and wrap it around a section or just a div.

    Hope my feedback helps you ! good job!

    Marked as helpful
    0
  • LetsFrontend•500
    @B1N4R1Posted over 2 years ago

    Thanks to the three of you: Lucas, David and PhoenixDev22

    I took your suggestions into account and applied them to the challenge. Most of them are things that I already knew but forgot to apply them 😅, like the main and footer landmarks or the margin for the container.

    As Lucas pointed out, the div.desk element was clearly needless so I removed it and used flex's gap property to add some spacing between the elements.

    Again thanks for the feedback!

    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