What are you most proud of, and what would you do differently next time?

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

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

Screenshot

Links

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

My process

First i started from observing the figma file which gave me a good idea of how to start, Then i moved to the html part from creating a div for the first container which will contain our Qr code and paragraph then created another div and container for the qr code image part then continued by creating the paragraph part at last the attribution part. Next moving to the css part i started by giving my desktop a proper margin to hold my html structure in place the continued by coloring it to match the figma and continued to the container part which will contain everything(the Qr code image and the paragraph) after giving the container a proper margin and padding which helped me to hold it in position and followed by width and height the container had been finished moving to the Qr code image which was done by width and height in addition to the border-radius. Then continuing to the paragraph part i started by giving it a proper font weight and font style which was the easy part thanks to google font then finished it by giving it the font size.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

I learned a lot of things which helped me to test my knowledge specially the Css parts.

I will show you the best parts below:

#rectangle {    
    background-color: hsl(0, 0%, 100%);
    width: 22%;
    text-align: center;
    margin: auto;
    margin-top: 11%;
    border-radius: 20px;
    box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.05);
}
#text2 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    color: hsl(220, 15%, 55%);
    font-size: 15px;
    display: inline-block;
    left: 0%;
    width: 256px;
    position: relative;
    letter-spacing: 0.19px;
}

Continued development

As my learning journey continues i will be focussing on the css part specially the css-grid and flex-box which had been a challenge for me.

Useful resources

• Resource 1 - This helped me to get great fonts reason. I really liked this website and will use it going forward.
• Resource 2 - This is an amazing website which helped me finally understand Css(flex-box and grid). I'd recommend it to anyone still learning this concept.
• Resource 3 - This is an outstanding website which helped me find some help concerning my code. I'd recommend it to anyone having the same problem.

Author

• Frontend Mentor - @Mrcoolprince
• Twitter - @Mr_cool_prince

Acknowledgments

I would like to thank FRONT-END MENTOR for helping me advance my coding knowledge and test my self .

What challenges did you encounter, and how did you overcome them?

I was challenged with placing the qr code image which I over came by the help of the community

What specific areas of your project would you like help with?

I would like to get help with understanding flex-box and CSS grid