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 Compon - made with Flexbox

Ivano 70

@IvanoCro

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


What are you most proud of, and what would you do differently next time?

I am proud of everything.

What challenges did you encounter, and how did you overcome them?

I did not encounter any challenges.

What specific areas of your project would you like help with?

I would like to get feedback on my code.

Community feedback

@DylandeBruijn

Posted

Hi @IvanoCro,

Congratulations on your solution, it looks very close to the design specifications. Your code is clean and easy to read.

A couple of friendly suggestions:

  • Instead of using a div for your card you could use article to make it more semantic.

  • I suggest using min-height: 100vh instead of height: 100vh on your body. So you don't run into overflow issues if the card gets bigger. It's not a big problem in this example, just a good practice.

  • I suggest keeping the height of the card as auto and not setting a px value. If you add more text to the description you run into overflow issues.

  • You could try to use CSS variables to make your style guide values more reusable.

I hope you find my feedback helpful and I'll be happy to answer any other questions you have.

Marked as helpful

1

Ivano 70

@IvanoCro

Posted

Hi @DylandeBruijn Thank you for the feedback, it helps me a lot.

1

@cristianccgg

Posted

Hi @IvanoCro, Your code and design look great. The only minor detail would be to put the same padding that you have on the sides on the top. It's a minor detail but it would make the design look much cleaner visually. Other than that it looks great, good job!

0

Ivano 70

@IvanoCro

Posted

Hi @cristianccgg Thank you for the feedback! I will definitely pay attention to the padding.

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