QR Code Component using CSS flexbox.

Solution retrospective
I'm proud of managing to get the design looking right mostly on my own. I didn't use the Figma files as I haven't learned to use Figma yet, but I think that might be next on my to-do list.
I felt unsure as to whether I got the sizing correctly, as I did it mostly by looking at the design and testing things out. It looked alright in the end, but I would like to learn more ways of doing this to provide a more accurate result.
I'm pround of figuring out how to use flexbox for this project and problem solving along the way.
What challenges did you encounter, and how did you overcome them?My most difficult challenge was to get the design centered on the page. It would center horizontally, but not vertically, despite me using the proper coding for flexbox.
However, after quite a bit of googling, I came across a forum post of someone who had struggled with the same issue and one of the responses helped me out. I needed to add a height to my component. So I learned a bit about viewport units and added "height: 100vh" to my body and that solved the issue. I still need to learn more about this to completely understand it.
What specific areas of your project would you like help with?I was unsure if I needed to add a <section> tag within my <main> for correct semantic html since this was all one section. I decided not to because I needed to use a <div> anyway, but should I have used a <section>?
Am I missing any important parts of the semantic html?
How should I have managed the sizing? Is there a better way than eyeballing it? The project does come with sizing, but I was unsure of how to use these, as they seemed to be the screen sizes and not the size of the elements.
Is there a better way to center an element than the way I used? Would grid have been better or was flexbox a good option?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @domdem-dev
ok
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