Skip to content

Here is my best (or worst) solution for the Frontend Mentor's QR code component challenge.

Notifications You must be signed in to change notification settings

braga-git/frontendmentor-qrcode-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - QR code component solution

Wassup! 🤙

This is my solution to the QR code component challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Leia isso em Português

Table of contents

Overview

Screenshot

My solution

Links

My process

Built with

  • HTML5
  • CSS3

What I learned

As I'm too young in this world and just started to learn HTML and CSS, the hardest for me to do alone was to actually know where to start. 😅

From my point of view, this challenge is more a CSS challenge than a HTML5 one. My biggest difficulties were about alignment and the interaction between <img> and <div>, as sometimes I was trying to configurate the div's padding and the img popped out of the div.

This was very easy to fix, I simply used the overflow property with the hidden value:

div.window-qr {
  overflow: hidden;
} 

This code hiddes the content that exceeds the div.

I fixed the issue of the img getting off the div, but it still wasn't centered. It kept a left margin and was displaying higher than I wanted. To fix it I setted the img width to 100%.

.window-qr img {
        width: 100%;
}

This made the image occupy only the width of the div.

The last problem I had to solve was how to center my content either horizontally and vertically. This one I really didn't know how to do, but I searched and did found a way that worked. I used the property transform with translate value:

main {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

And I don't really know how this code works, but..

In sum, I think I handled it really good. Well, even if the code isn't the best, the design is pretty close! 🤣

Continued development

I'll keep looking for ways to center things properly because, as I said, I don't know 100% the usability and function of the transform property. But I do know that it's not ok to use a code without knowing how it works. 🤷‍♂️

Useful resources

Author

Follow me for more "solutions" 😉

Acknowledgments

Thanks to @chriscoyier for the post about the transform function. I was 6 by that time! 😂

About

Here is my best (or worst) solution for the Frontend Mentor's QR code component challenge.

Topics

Resources

Stars

Watchers

Forks