Frontend Mentor - QR code component solution

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.

Table of contents

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

Overview

For this project I put the skills I've have learned in HTML and CSS to the test. I was forced to search for my answers and solve problems on my own with no tutorial to follow. I'm very proud of the obsticles I overcame and I hope you enjoy viewing my work.

Screenshot

Links

• Solution URL:( https://www.frontendmentor.io/solutions/the-amazing-qr-code-rJ4kJVs8c)
• Live Site URL:(https://hazel-black.github.io/QR-Code-Frontend-Mentor-Project1/)

My process

I started with building out the appropppriate html tags and content that I would need. I moved into the CSS shortly after. I didnt use any frameworks or anything besides HTML and CSS since I am still fairly new to this and I dont know any frameworks yet. I will say I'm very excited to learn them though.

Built with

• HTML5
• CSS

What I learned

I learned how to convert a design into code just by looking at it. This is a skill that i have practiced in other tutorials but It a bit difficult to wrap my mind around in the very beginning. in the end i succeded and thats all that matters. i also was forced to learn how to center a div vertically and horizontally and that was supper tough. I couldnt understand what stack overflow was suggesting and no other websites were any help but i finally found hubspot and my problem was solved. I also got to practice using media queries which was really cool to see in action as i have never used them outside of a guided tutorial.

@media (max-width: 375px) {
    .QR-container{
        width: 300px;
    }
    img{
        width: 300px;
        height: 300px;
    }
    .title{
        font-size: x-large;
    }
    .sub-title{
        font-size: large;
    }
}
 
 and 

   position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

Continued development

I want to become more comfortable with using media queries and gaind some more experience with flexbox and grid.

Useful resources

• (https://blog.hubspot.com/website/center-div-css) - This is an amazing article which helped me finally understand how to properly position a div. I'd recommend it to anyone still learning this concept.

Author

• Website - Comming Soon
• Frontend Mentor - (https://www.frontendmentor.io/profile/Hazel-Black)
• Twitter - (https://twitter.com/HazelBDev)
• Youtube - (https://www.youtube.com/channel/UCCDWcbyG8rf6TC41EDGD4Rg)