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

using css to copy and make the figma sample alive

willem 20

@BarapidoWillem

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 my css skill and i think it is really improving, i want to learn more and apply it all

Community feedback

P
Kaczupinko 170

@Kaczupinko

Posted

Your solution is quite good and demonstrates a clear understanding of the task. Here’s some feedback:

Semantic HTML: The use of semantic HTML could be improved. Consider using <main>, <header>, or <section> elements instead of generic <div> tags to improve the document structure and accessibility.

Accessibility: The image lacks an alt attribute, which is essential for screen readers. Adding a descriptive alt text would enhance accessibility.

Responsiveness: The layout seems fixed with the 350px width. Consider using responsive units like percentages or max-width for better adaptability across different screen sizes.

Code Structure: The CSS could be moved to an external stylesheet for better code organization and reusability.

Design Consistency: The solution aligns well with the expected design. However, pay attention to padding and margin to ensure everything is perfectly centered.

Overall, your solution is well done, but making these adjustments will enhance its quality and usability.

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