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

First project - Frontend Mentor QR code

Nataliaโ€ข 20

@zagorxka

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


Hi ! It's one of my first projects, so there could be some mistakes. I had some troubles using flexbox and with positioning elements.

Feel free to comment on semantics, RWD and anything I could improve !

Community feedback

Luis Jimenezโ€ข 720

@LuisJimenez19

Posted

Hello, congratulations on completing the challenge.

Very well centered on the card, it is the best way to do it so far. It is very good that you think about semantics, although in this challenge it is not very important. Perhaps when displaying the description you could change the <h3> to a <p>. and in the attribution use a <footer> element and wrap the text in a <p> tag.

And in this case for a better responsiveness, you could use the width:90%; rules and give it a maximum width of max-witdh:360px; and it will look better on mobile devices.

I hope my contribution is helpful๐Ÿ‘‹๐Ÿฝ

Marked as helpful

0

Nataliaโ€ข 20

@zagorxka

Posted

Thank you!@LuisJimenez19

0
c4dr-meโ€ข 100

@c4dr-me

Posted

hi! congrats on finishing your first challenge. There are a few things you can change for example using semantic tags like <main></main> to wrap the main content of your HTML file, getting used to relative measurement units like rem, em etc.. as they will be helpful when you work on responsive designs.

Marked as helpful

0

Nataliaโ€ข 20

@zagorxka

Posted

Thanks also !@c4dr-me

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