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 Challenge using HTML and CSS

Esther 20

@estaarrr

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


A little bit of background: This is my very first challenge in Frontend Mentor; I picked up HTML and CSS through a Udemy course last year, and currently I am studying React.js. Along the way, I realized nothing is getting internalized, as I am slowly forgetting all the basics and foundations of HTML, CSS, and JS. That is why I wanted to revisit these techniques first before I move on with the rest of React.js.

As I was working on this first challenge, I realized I did not remember the simplest thing, such as positioning and centering. There are repeated elements in CSS that need grouping but somehow doing that messes up the project. So I am submitting a rough and raw version of this challenge, to see how my first step in working on an actual project is.

Any feedback would be appreciated. Thank you.

Community feedback

Humas 250

@dolomita28

Posted

Hi Esther, You did a great job. There can be many different solutions to achieve the same. I would only suggest you avoid using px units. It's better to get used to use %, rem or em units. You could also take advantage of flexbox techniques (which I've seen you know how to use them) even for nested containers so you don't need using margins to center items. Finally, check out the report above with some accessibility issues to get extra hints. Best

1

Esther 20

@estaarrr

Posted

@dolomita28 Thank you for the feedback! For my second challenge I switched from using px to rem as you have recommended. I need to go in depth with flexbox to use the technique you have suggested. Thank you!

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