This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

One thing I've done in the past when creating is to work on the HTML structure and CSS styling simultaneously. However, Frontend Mentor suggested that I start with the structure first. Once that is completed, then move on to styling. This helped me tremendously to think about what elements I'd need to "get the job done" and from there I was able to focus solely on styling. I'll certainly continue to work this way going forward!

I recently learned about issues the CSS unit, vh, can cause. Especially when it comes to viewing on a mobile device. In this project, I tried a new approach of using the % unit, which worked perfectly! See below on how I did this:

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

• Continue using % (percentage) CSS units instead of vh
• Continue using and learning more about Flexbox, Grid, their differences

• Example resource 1 - This helped me better understand how to properly use the % CSS unit. With this I was able to fully center my card element without needing to us the vh unit.

• Website - Keith McKenna
• Frontend Mentor - @Grill3dCheese
• Twitter - @keithmckenna

Thank you, TREMENDOUSLY, Josh Comeau, for your amazing article explaining percentage based heights! This was a game changer for me!