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 - HTML, CSS

P
KN 110

@kaiens-lab

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'm proud that I finally finished this project.

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

I was confused about centering, so I searched some tutorial documentation.

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

None but any advice or suggestions are much appreciated.

Community feedback

Account Deleted

To streamline your HTML and CSS code, I suggest making some straightforward adjustments that will significantly enhance performance and organization. First, consider removing the div element with the class container if it only contains a few lines of code; this will reduce complexity. Second, for greater clarity and emphasis, it's preferable to change the heading from h3 to h1. Also, don't forget to add the alt attribute to the img tag to improve accessibility.

In your CSS file, using the universal selector * will help standardize margins and paddings, making the code more consistent and easier to read:

  • { padding: 0; margin: 0; box-sizing: border-box; }

This change will eliminate the need for many specific rules from lines 1 to 44. Additionally, for effectively centering cards, I recommend using grid over flexbox as it provides more control and is easier to use. Lastly, you can remove the width property from the card to allow for greater design flexibility, and don't forget to add border-radius to the images for a smoother appearance.

I hope you find these modifications helpful for your project!

Marked as helpful

1

P
KN 110

@kaiens-lab

Posted

@dakirzakaria

Thank you so much for your detailed suggestions! I appreciate the insights and will definitely implement these changes to improve my code.

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