Skip to content
Submitted about 2 years ago

QR Code Component built from HTML, CSS

Webdevsonu•270
@Webdevsonu
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 easy to build for mobile screen size of 375px , I made that same size for desktop also. I tried to make it to look a little smaller on desktop size but there was a little issue for me to use max-width or min-width. so was there any easy way to do it.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hi @Webdevsonu, 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:

    Your solution is great and the code is working, but the HTML structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading, and paragraph.

    Here’s one example to show can be cleaner this HTML structure:

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

    To reduce the CSS you can use the direct selector for each element instead of using class this way you have a code even cleaner, for example, you can select everything using the direct selector for (img, h1, and p, main).

    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
    1
    Webdevsonu•270
    @WebdevsonuPosted about 2 years ago

    @correlucas Thanks for the feedback, Hope you're doing well. And it was helpful to know that making the code cleaner will save a lot of time on HTML and CSS codes.

    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @Webdevsonu 👋, good job completing this challenge! 🎉

    I have some suggestions you might consider to improve your code:

    • Use the <main> tag to wrap all the main content in your solution instead of using <div class="box">.
    • Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.
    • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.
    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
    • Use max-width: 375px to .box selector instead of width, this will make the container card a bit responsive on mobile and set the element's maximum width to 375px.
    • The container isn't centered correctly. You can use flexbox to center elements. You can read more about centering in CSS here.

    I hope those tips will help you! 👍

    Good job, and happy coding! 😁

    Marked as helpful
    1
    Webdevsonu•270
    @WebdevsonuPosted about 2 years ago

    @MelvinAguilar Thank you for the detailed feedback, Hope you're good. You mentioned to use the <main> tag instead of <div> tag was really problem solving for me as I was thinking for which tag to use to contain all main contents, and yes I still used pixel units for font, which was time consuming for me as I have to change it multiple times to adjust, its good to know that it will be easy with those 'rem' or 'em' units.

    0
  • Adriano•38,120
    @AdrianoEscarabotePosted about 2 years ago

    Hi Webdevsonu, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • To improve the structure of the html document, prefer to wrap all the content with the main tag, since this challenge is just a component, it needs a main tag to know what the main content of the page is!
    • to improve the code even more, wrap the .attribution with the tag footer

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
    Webdevsonu•270
    @WebdevsonuPosted about 2 years ago

    @AdrianoEscarabote Hello Adriano, I am doing great. Thanks for your feedback. it really helped.

    0
    Adriano•38,120
    @AdrianoEscarabotePosted about 2 years ago

    @Webdevsonu 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