bnmbz / Mobile-first-solution-using-CSS-Grid-and-Flexbox

Mobile-first solution using CSS Grid and Flexbox

Home Page:https://q-rcode-component-io-ekjg.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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
    • 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.)

Overview

Screenshot

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Mobile-first workflow

What I learned

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;
  }
}

Continued development

I will like to solave many challenges on Media Quary and still keep learnig the responsive designs.

Useful resources

  • (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.

Author

Acknowledgments

This is where I can give a hat tip to Free Code Camp.org they've relly helped me out on this project.

About

Mobile-first solution using CSS Grid and Flexbox

https://q-rcode-component-io-ekjg.vercel.app


Languages

Language:HTML 58.4%Language:CSS 41.6%