Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code component

Dhanya 50

@dhan5a

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I struggled a little with padding, as there is a bigger white space from the bottom paragraph which differs from the padding on the other sides.

Community feedback

Adriano 34,000

@AdrianoEscarabote

Posted

Hello Dhanya, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

I noticed that you made your entire code using divs! this is not a good practice since div has no meaning, to improve the structure of your code we can use semantic elements that have meanings, not only for us who are developers, but also for screen readers, that is, a person who uses tools to browse the web, can better understand the content if our code is well written with semantic tags and some other features to improve accessibility!

The remainder is excellent.

I hope it's useful. 👍

Marked as helpful

1

@adityas24

Posted

Hi Dhanya, Great work by you. I found following irregularities in your HTML

1. Instead of writing this <div class="header"> Improve your front-end skills by building projects </div> You could have written

     <h2> Improve your front-end skills by building projects </h2>

It is semantically better code. And not necessary to use h2 tag. You can use any heading tag according to requirement

2. And you should have used paragraph tag here

     <div class="text-copy">
          Scan the QR code to visit Frontend Mentor and take your coding skills to 
           the next level
      </div

Instead of above code, you should write <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>

Here right tag to be used is paragraph tag.

Thanks, Happy coding.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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