Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component: centered vertically and horizontally using position

P
Dilhan Bocaā€¢ 220

@dboca93

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

Feedback welcome for my first frontend mentor task. I'm new to web-dev and I'm keen to learn more. I imagine there are easier ways to complete this task using CSS Grid (which I'm currently learning) -- is this correct?

Also, could someone comment on whether the sylistic changes I made on smaller screen sizes (via media queries) are correct ? Is the read-me file ok ? All other feedback is more than welcome. Thanks !

Community feedback

Yazdunā€¢ 1,310

@Yazdun

Posted

Hey man good job on the challenge. This project doesn't need any grid so it's fine the way you've done it ( although I can argue that it doesn't need any flexbox either šŸ˜… ).

The other thing is I don't see any need for media queries in this challenge. instead of using static width for the main__container , you can use something like :

.main__container {
  width: 100%;
  max-width: 270px;
}

With the above's approach, You won't need any media queries, main__container will occupy 100% of the screen and when it reaches 270px width, It will stop growing. You can give some paddings to the parent element to prevent main__container from hitting the screen's edges on mobile devices.

Overall you did great, Keep it up.

Marked as helpful

0

P
Dilhan Bocaā€¢ 220

@dboca93

Posted

@Yazdun

Thanks so much for your feedback ! I really appreciate it.

All the best :)

1
Ahmed Bayoumiā€¢ 6,760

@Bayoumi-dev

Posted

Hey! Congratulations on completing this challenge... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.
<main>
   <div class="main__container">
      //...
   </div>
</main>
  • All page content should be contained by landmarks, Contain the attribution with <footer>.
<footer>
   <div class="attribution">
      //...
   </div>
</footer>
  • I suggest you use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.

See this article ---> CSS REM ā€“ What is REM in CSS?

I hope this is helpful to you... Amazing work. Keep it up! šŸ‘

Marked as helpful

0

P
Dilhan Bocaā€¢ 220

@dboca93

Posted

@Bayoumi-dev

Thanks so much for your feedback ! I really appreciate it.

All the best!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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