Frontend Mentor | Qr code Scanenr coding challenge solution

Rebecca Padgett• 1,760

@bccpadge

Posted about 1 year ago

Hello @akashkumaraguru. Congratulations on completing this challenge!!!🎉

I have few tips that you might be interested in to improve your solution.

HTML 📃:

Make sure you change the <title>Document</title> to <title>Frontend Mentor | QR code component</title> it tells users what the website is about.
Every website should have at least one landmark like <main> tag
Websites should have one heading tag like a h1 and HEADING TAGS must be used in chronological order. h1-h6

More info📚:

Heading Tags

HTML structured updated below:

<body>
  <main class="card">
  <img>
  <div class="content">
   <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>
  </div>
</main>
</body>

/* Add this CSS style below  */
.content{
 text-align: center;
}

/*Add the background color on the body */
body{
 background-color: hsl(212, 45%, 89%);
}

CSS 🎨:

The CSS code above implements the DRY acronym which means Don't Repeat Yourself.
You don't have to select each element selector and put text-align:center; on it
Addingwidth: 30% on the card makes your card component unresponsive.

Add this code below

I am using rem units which makes the website more accessible. Pixels are absolute unit and doesn't scale if users want to change the font size in their web browser.

Pixels to Rem

.card{
 max-width: 25rem;
 margin-inline: 1rem;  /*margin-line means left and right*/
}

/* Also you can change your border-radius on image to little smaller*/
.image{
border-radius: 0.625rem;
}

Make sure look at the design images and styleguide.md file to get the correct colors and typography.

Here is my solution if you want to check it out: QR code component

Hope this helps you and don't hesitate to reach out to me if you have any questions

Qr code Scanenr

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community