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 challenge html css

@GiovanniPereira05

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


Need feedback on css, is it good? What needs to improve

Community feedback

P

@Islandstone89

Posted

HTML:

  • You need a <main> - apply it to the .card

  • Alt text also needs to say where the QR code leads.

  • Don't use <br> to force a new line! It's rarely used, and for good reason - all styling should be done in the CSS.

CSS:

  • It's better to not use @import, but rather link the fonts in the head of the HTML.

  • You have written align-items: center twice, I'm guessing that was not delibarate 🙂

  • Remove fixed width on the card. Fixed dimensions is the easiest way to make something "unresponsive", because it prevents the content from adapting to the screen size.

  • It's a good idea to include a CSS Reset at the top, look up the one from Andy Bell.

Hope this helps 🙂

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