Skip to content
Submitted over 1 year ago

QR code Challenge using CSS Flexbox and a whole lot of them.

Anthony•10
@crossant123
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

I really found centering text vertically difficult. to describe what I mean better, The challenge has two types of text: The content topic and the content text; this challenge displays these texts closer together than just "justify-content: space-evenly/space-between". And due to this, I felt that I had to find outside-the-box solutions for this. I'm glad it turned out well but I believe I may have overcomplicated a simple problem. Please give me tips on ways to do this task with less CSS or less hassle.

Community feedback

  • dimar hanung•560
    @dimar-hanungPosted over 1 year ago

    Hi Anthony 👋, Congratulations on completing the first challenge 🎉, i have feedback opinion that might help you.

    1. maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    2. if you playing with flexbox you will find a lot of nested. alternative you can use grid, this can make you use less nested.

    3. for responsive it's ok until galaxy fold, i suggest to use combination of width:100% and max-width, it's make width dynamic and not fixed

    anyway overral is good, hope it is useful 🙌

    Marked as helpful
    1
  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code could be of interest to you.

    In order to fix the accessibility issues:

    • You need to replace <div class="container-outer"> with the <main class="container-outer"> tag and <div class="attribution"> with the <footer class="attribution"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
    <body>
  <main class="container-outer">
  </main>

  <footer class="attribution">
  </footer>
</body>
    • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <h2 class="content-topic">Improve your front-end skills by building projects</h2> element with the <h1 class="content-topic">Improve your front-end skills by building projects</h1> element.

    After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

    Hope I am helpful. :)

    1

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