Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor.

Table of contents

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

Screenshot

Overview

This is my submission of the QR code component challenge. Within this challenge I tried to match the criteria as closely as possible. I used the w3schools how to design a product card ( https://www.w3schools.com/howto/howto_css_product_card.asp ), and what I had so far learnt from Dr Angela Yu's Web development course to complete the challenge ( https://www.udemy.com/course/the-complete-web-development-bootcamp ).

Links

• Solution URL: Github
• Live Site URL: vercel

My process

Built with

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

What I learned

This was a good revision practice in responsiveness, margins and paddings. Using web developer tools on firefox was a huge help in continuing to solidfy the differences, as well as being able to visually see the changes necessary before applying them to my code.

Continued development

I will continue to practice layout and further strengthen flexbox.

Useful resources

• w3schools.com - How to product card - This helped me to create the card component. This really helped to explain step by step what to do to achieve the effect needed, provided a clear visual example, and allowed for the demo code to be manipulated to see different effects.

• w3schools.com - How to responsive image - A great tutorial in helping to achieve a responsive image.

Author

• Frontend Mentor - @Danielle73