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 Component

@jmprz

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?

Finishing the challenge is satisfying and I want to learn more. This is a good start to improve my skills on web design.

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

I got hard time figuring out about the container of the image and text then I learn how to use flex, margin and padding. I'm also confused on making it responsive but then I open the Figma file (which is super useful!) to know the exact sizes of image and the spacing.

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

Does my code for the title and paragraph good? I didn't use the to perfectly center the text as seen on the preview designs. Is there other ways to improve the styling for centered text or paragraph?

Community feedback

@Ramon-Alvez

Posted

Congratulations on completing the challenge! When looking at your code I have some suggestions:

  • Make the code more user-friendly with indentation and spacing.

  • Instead of using divs to make titles and paragraphs, use the h and p tags.

  • And to center the container vertically with the flexbox you need to set the height on the container.

Answering the question about text centering, you can use Text-align to position the text wherever you want. As for the image, I prefer to use padding or margin (depending on where I'm styling it) to make it responsive in the container

Marked as helpful

1

@jmprz

Posted

@Ramon-Alvez Thank you for the feedback! Code has been updated, your feedback helps a lot to improve the design

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