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

Responsive Qr code component using html and css

@Jojo-onedev

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


This is my first challenge on Frontend Mentor, please rate, give me feedback on how we can upgrade. Thanks

Community feedback

S02K 50

@S02K

Posted

Your QR component looks great i see a couple of things that you could change

  • The color of the background and parg1 are not the same as in the example project.
  • You have your CSS in your HTML file it is considered best to make a seperate file for this.
  • The <p parg1> should be a H1 or H2 because it is a title.

i hope this helps you improve your project

Marked as helpful

1

@Jojo-onedev

Posted

@S02K Thanks for your help

1
P

@Islandstone89

Posted

To add to the tips above:

HTML:

  • You need a <main>, this is important for accessibility. Make .container a <main>.

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  • .attribution should be a <footer>.

  • Footer text needs to be wrapped in a <p>.

CSS:

  • It's good practice to include a CSS Reset at the top

  • body should have min-height, not height. Remove the width - the body is 100% wide by default.

  • Remove the fixed width and height. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Remove margin and height on image, they are not needed. Add display: block and max-width: 100%.

Marked as helpful

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