Submitted 7 months ago

Responsive QR card with pure HTML and CSS

Pannu•30

@PannuYN

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

I think I did well by documenting key codelines. Next time, I would use other options like CSS grid instead of flexbox for layout.

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

Since I'm used to always using CSS frameworks, I did not even remember where to start for responsiveness, including viewports. I looked up necessary things and learned again.

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

I want to know more about vertical sizing and responsiveness, like viewport and how giving size to width and height works.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

hitmorecode•7,540
@hitmorecode
Posted 7 months ago
Congratulations it looks good. Just a few tips
- Make it a habit of applying CSS reset, here is a simple example of a CSS reset.
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
- You forgot the border radius on the image.
- Avoid using % as a dimension. When not used correctly this can break a page.
I hope you find this helpful. Keep it up👍👌
Marked as helpful
itunumide•70
@itunumide
Posted 7 months ago
I think you did well in documenting key code lines for clarity and future reference. For improvement, exploring CSS Grid as an alternative to Flexbox could offer more flexibility in layout management, especially for complex designs.

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