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 using HTML and CSS

P

@BigO-Dev

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 thought this was a simple, straightforward project, ideal for beginners. If I had to do things differently, I would try to organize my CSS better.

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

The challenge was making sure it was responsive. I was able to achieve this by making the width of the card a percentage and by using rem units.

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

I'd appreciate any feedback on how I could improve and advice on using best practices.

Community feedback

@akmalov11c

Posted

Hi there! Great job on completing the challenge!

Your solution looks well-structured and visually appealing. Here are some suggestions to enhance your project further:

HTML:

  1. You've used appropriate HTML elements to structure your content, which is fantastic. However, consider adding semantic elements like <header>, <main>, and <footer> for better organization and accessibility.
  2. Don't forget to add descriptive alt attributes to your <img> elements for better accessibility and SEO. Instead of simply "qr-code", you could provide a brief description of what the QR code represents.

CSS:

  1. Your use of CSS variables for colors and typography is a smart approach, making it easy to update styles across your project. Consider using more descriptive variable names for better clarity and maintainability.
  2. You're applying media queries effectively to make your layout responsive. Perhaps you could fine-tune the spacing and typography for smaller screens to ensure optimal readability and usability.

Overall, your code is clean and well-structured. Keep up the good work, and don't hesitate to experiment with new techniques and seek feedback from peers to continue improving. Happy coding!

Marked as helpful

1
P
Jamie Reed 120

@jreed-11

Posted

Code attepemt and very smilimar text need to be a bit larger but all in all a god attempt

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