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
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component with CSS

P
eMKa18 60

@eMKa18

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

raya 2,850

@rayaatta

Posted

Hi Emka18, congratulations on completing this challenge 🎉. I have some suggestions for you. 1 For semantic reasons change

<div class="title">
        <p>Improve your front-end skills by building projects</p>
      </div>

To

<h1 class="title">
  Improve your front-end skills by building projects
</h1>

The <h1> to<h6>tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

2 Remove the div. attribution from the main and change it to footer.attribution

3 In order to center your card, Add min-height:100vh; To your body and remove the margin properties from div.wrapper.

I hope this helps.

Happy coding ✌️

Marked as helpful

0

P
eMKa18 60

@eMKa18

Posted

Hi Raya, thanks for your tips. Point 1 & 3 were the one I was really missing! Now it seems obvious! 😊

1
Roshan 270

@Darkx-dev

Posted

Increase the font-size for the bold text

0

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