Skip to content
Submitted 4 months ago

QR Code component using Flexbox and Google Fonts

manzii07•40
@manzii07
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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:

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

Community feedback

  • Mahmood•1,510
    @MahmoodHashemPosted 4 months ago

    Hello there

    Congratulation on completing the challenge

    Your project is truly impressive

    Here are a few pointers that you might find useful:

    1. 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.

    2. 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.

    3. 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
    0

Please log in to post a comment

Log in with GitHub

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