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
• Acknowledgments

Overview

Seemed simple html css but actualy it is simple you just have to think around it well being a newbie of course a few things here and there are still challenging

Screenshot

Links

• Solution URL: https://github.com/MosesKipyegon/Qr-card
• Live Site URL: https://6324cde0748e56240f18cf8d--celadon-sunburst-7917f5.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS variables -Flex
• Mobile-first workflow

What I learned

Learnt to work around media queries howver my design breaks when I have the two designs together which is mobile view and desktop

And how to throw the design in the middle. using the following code

.proud-of-this-css {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Continued development

I definitely have to work around media queries as this is still a big challenge for me

Useful resources

CSS Secrets pdf file that I coped online helped me position things vertically centered

Author

• Website - Moses Kipyegon
• Frontend Mentor - @MosesKipyegon
• Twitter - @Dihmoss