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 window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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-hanung

Posted over 1 year ago

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

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 )
if you playing with flexbox you will find a lot of nested. alternative you can use grid, this can make you use less nested.
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

Ecem Gokdogan• 9,380

@ecemgo

Posted 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. :)

Please log in to post a comment

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