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 with CSS and HTML

Teoβ€’ 30

@Teo-kodehode

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


Any feedback would be greatly appreciated, and tips on how to make the padding between the picture and the white bg would be nice.

Community feedback

Aditya Singhβ€’ 460

@adityas24

Posted

Hey Teo! you did very well in your first challenge. I would like to suggest you the following....

You could have avoided the div you used to wrap the h1 and p. As you have not used any style on div. Then you can simply avoid using it. It will not affect the semantics and will also decrease the length of the code.

So you could simply write

<div class="container">
      <img src="images\image-qr-code.png" alt="QR code">
      <h1>Improve your front-end skills by building projects</h1>
      <p class="text">Scan the QR code to visit Frontend Mentor and take your coding skills to the 
         next level</p>
</div>

All the best πŸ™‚πŸ‘

Marked as helpful

1
Rio Cantreβ€’ 9,710

@RioCantre

Posted

Hello there! Awesome work with this one. Viewing your solution I would suggest the following for you...

  • Inside the h1 rule set add margin: 0; and adjust the padding into padding: 1rem 2rem 0 2rem;
  • Same goes with .text add margin:0; and adjust the padding to padding: 1rem 2rem;
  • Instead of using div, wrap the container with specific tag like main for readability

Hope this helps and Keep up the good work!

Marked as helpful

1
Ken9Codeβ€’ 30

@Ken9Kodehode

Posted

Jævla bra jobba kompis! :D

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