Page for a QR code using CSS flexbox

Solution retrospective
So this was technically my first unguided project using HTML and CSS. I am brand spanking new to web development and any type of coding/programming in general and learning HTML and CSS have been my first steps. I have been using freeCodeCamp to learn so far and have applied what I learned to this project. I learned the hard way how hard it is to recall the information I learned when it is unguided like in the lessons.
I am really proud of my self for being able to solve the problems I ran into and actually make what was asked. I have never done anything like that before and it was really satisfying to sit back and look at it and go, "Well damn if that doesn't look like what they asked for". I am excited to keep going.
What challenges did you encounter, and how did you overcome them?Firstly, figuring out how to parse out the elements neatly was a real challenge for me. I seemed to over use (or maybe under use?) the <div> elements in the HTML. But once I figured out how to make it neater it made the styling part a lot easier.
The CSS was a totally different story. I could not for the life of me figure out what i was doing with the positioning and figuring out how to get the the QR code image to sit in the center relative to the text was tough. The text kept getting in the way and was confusing me and it wasn't until I styled the text that everything snapped to the center (which made me crazy because I was sitting there pulling my hair out trying to figure out why the image was staying to the left). Also, figuring out how to get the white square centered and behind the image was super confusing as well. I need to do more reading up on flexbox and positioning in CSS.
Once I got everything relatively where I wanted it I was able to start styling pretty easily. The way I did it probably could have been done simpler but everything was where I wanted it to be so I was happy.
Also google and chatgpt were my friends :D
What specific areas of your project would you like help with?To be honest I wouldn't know what to ask. Understanding how to move stuff around the page with flex box and the difference between relative and absolute positioning or how flexbox applies to other elements is what I need to get more information on my self.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Jeff Hensley's solution.
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