@RohanIV
Posted
These helped my with learning flex and grid:
flexbox zombies - game
flexbox froggy - game
Grid Garden - game
Josh W Comeau - Grid, Flex and other stuff (interactive site)
What are you most proud of, and what would you do differently next time?
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.
Screenshot
Links
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
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
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
@RohanIV
Posted
These helped my with learning flex and grid:
flexbox zombies - game
flexbox froggy - game
Grid Garden - game
Josh W Comeau - Grid, Flex and other stuff (interactive site)
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