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

maría 10

@mariaigle98

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


Heyy, first Frontend Mentor challenge over here. Satisfied with the result but I guess there is easier and improved code on the community solutions and I can't wait to see it.

Community feedback

JimTK16 370

@JimTK16

Posted

Nice first one Maria.

A couple things to consider are:

  • Put your .card in the <main> tag so your code look more semantic.
  • Avoid setting fixed width for your container, instead of width:300px, you can set max-width: 300px.
  • Setting the height of the container in this case is not necessary i think, you can toggle this property in the devtool and see the changes it makes.
  • There no changes in layout between mobile and desktop version, and the content can fit in just 1 column, so I think flexbox might be an easier option than grid. Hope it helps!

Jim

Marked as helpful

0

maría 10

@mariaigle98

Posted

Hi @JimTK16 thank you so much for your feedback! I'll take it all into account and improve my code.

1

@ThiagoBRG60

Posted

Hey, it looks great for a first challenge, just make sure to match the colors. Always keep learning and improving 😉.

Marked as helpful

0

maría 10

@mariaigle98

Posted

Hi @ThiagoBRG60 thank you for your feedback! I definitely need to pay more attention to colors 😅

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