Submitted 2 months ago

HTML5–semantic structure of the component,CSS3 – custom styling, align

Kama•110

@Kama-ds10

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'm proud of successfully building a clean, responsive QR code component that matches the design closely. I was able to center the component both vertically and horizontally using Flexbox, and I kept my code well-organized and easy to read. Seeing how small layout adjustments could make a big visual difference was also satisfying.

Next time, I would focus more on improving accessibility (like better alt text and semantic structure), and I would try using a CSS preprocessor like Sass or experiment with utility-first frameworks like Tailwind CSS. I’d also consider setting up a GitHub repository earlier to track my progress through version control.

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

One challenge I faced was vertically centering the QR code component in the viewport. At first, I tried using margin and padding, but it didn’t work well across different screen sizes. After some research, I learned how to use Flexbox to center elements both vertically and horizontally, which made the layout much cleaner and more responsive.

Another small challenge was getting the sizing and spacing just right to match the design from Frontend Mentor. I overcame this by carefully checking the design preview, using tools like the browser inspector, and adjusting my padding, margin, and font size until things aligned properly.

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

Responsiveness – Does the layout look good on different screen sizes? Are there better techniques I could’ve used to make it more flexible?

Flexbox Usage – Is my use of Flexbox optimal for centering and layout? Could it be improved or made more efficient?

Code Structure – Are there best practices I might have missed in organizing my HTML and CSS?

Accessibility – Is there anything I could do to improve accessibility (like better alt text, semantic tags, etc.)?

Styling Consistency – Does the spacing, font sizing, and alignment feel consistent with the design preview?

Code

Please log in to post a comment

Community feedback

Dany-Duran NZIGAMASABO•140
@DANY-DURAND
Posted 2 months ago
Hey, it is an overall great solution. Here are some improvements you can add:
- Change the font family to "Figtree" the one mentioned in the "style-guide.md" file. Use Google fonts to do. Google fonts link
- Use justify content to center the card and use vh(viewport height) for the height instead of % for better alignment.
```
css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(218, 44%, 22%);
  /*height: 100%;*/
  height: 100vh;
  /*margin-top: 30px; no need for this after using justify-content*/ 
}
```

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