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
- Through this project I was able to learn a lot in CSS, like the Media Quary and much more.
- [Author](Michael Boateng)
- [Acknowledgments](I thank free code camp for thier videos.)
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
In this project I learned some CSS styles. Like how to aling center without using the text align property.
<body>
<h1 class="content">Some HTML code I'm proud of</h1>
</body>body {
display: flex;
justify-content: center;
align-items: center;
}Another way of doing this:
h1{
width: 50vw;
margin: auto 50%;
}And I also learned some Media Quary:
@media screen and (min-width: 375px) {
h1{
float: right;
color: blue;
font-size: 1.25rem;
/*And lastly I learned how to change the display of a block element.*/
display: inline;
}
}I will like to solave many challenges on Media Quary and still keep learnig the responsive designs.
- (https://www.youtub.com/freecodecamp) - This helped me when I was strugling whith the responsive design and margins. I really liked free code camp and will use it going forward.
- Frontend Mentor - @bnmbz
This is where I can give a hat tip to Free Code Camp.org they've relly helped me out on this project.