Frontend Mentor | QR Code component using Flexbox and Google Fonts coding challenge solution

Solution retrospective

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

I'm most proud of successfully creating a clean, responsive QR code component that closely matches the design. It was a great opportunity to practice my skills in semantic HTML and CSS Flexbox. Next time, I would like to explore adding some animations or transitions to enhance the user experience further. Additionally, I would use a CSS preprocessor like Sass to streamline and organize my styles more efficiently.

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

One of the main challenges I encountered was ensuring the QR code component looked good on all screen sizes. Initially, the layout didn't scale well between different devices. I overcame this by adopting a mobile-first workflow and using CSS Flexbox to create a flexible, centered layout. Additionally, I made extensive use of media queries to adjust the styling for various screen widths, ensuring a consistent and responsive design across all devices.

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

I would like help with the following areas:

CSS Organization: Any tips on organizing my CSS to keep it maintainable and clean?
Responsive Design: Feedback on optimizing the layout for various screen sizes would be helpful.
Accessibility: Suggestions for improving the accessibility of the component for all users.

Community feedback

Mahmood• 1,070

@MahmoodHashem

Posted about 2 months ago

Hello there

Congratulation on completing the challenge

Your project is truly impressive

Here are a few pointers that you might find useful:

CSS Organization :
- It's recommended to use consistent units throughout your project for better maintainability and scalability.
- The most commonly recommended unit is rem (root em), as it is relative to the font size of the root element (<html>).
- To simplify the use of rem, you can set the font size of the <html> element to 10px (using font-size: 62.5%;), which makes it easier to calculate rem values. For example, 1.6rem would be equivalent to 16px.
- Using rem throughout your CSS styles will ensure that the sizes of elements scale proportionally with the base font size, making your project more responsive and accessible.
Responsive Design :
- Instead of using fixed width values for elements like cards, it's better to use max-width to make them responsive.
- This approach allows the elements to scale down as the viewport size decreases, ensuring a better layout and user experience on different screen sizes.
- By using max-width, the elements will maintain their desired maximum width, but they can also shrink down as needed, making your design more flexible and adaptable.
Accessibility :
- Proper use of HTML semantic elements, known as "landmarks," can greatly improve the accessibility of your project.
- Landmarks like <main>, <footer>, <nav>, <section>, and <aside> provide meaningful structure to your HTML document, making it easier for screen readers and other assistive technologies to navigate and understand the content.
- These semantic elements also help search engines and other automated tools better understand the purpose and hierarchy of your web page, improving its overall accessibility and SEO.
- Incorporating these landmarks in your HTML structure ensures that users with disabilities can easily navigate and understand the content of your website.
```
<nav></nav>
<main>
    <section>
    .
    .
    </section>
     <section>
    .
    .
    </section>

</main>
<footer>
```

I hope you found that helpful.

You did a great job overall!

Marked as helpful

QR Code component using Flexbox and Google Fonts

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community