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

Screenshot

1440px view:

350px view

Links

• Solution URL: Solution URL
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
  • Only using CSS Grid make it mobile responsive.

What I learned

• Regarding the image:

  • Give it a max-width wiht px & width with percentage will make it more dynamic, instead of hard fix value.

    width: 100%;
    max-width: 288px

• Regarding the card:
  • Give the container max-width with px, width with percentage and making the height fit-content will make the card grow to a limit dynamicaly vertically by adding more contents and horizontally by changing the device wwidth.

    max-width: 320px;
    width: 90%;
    height: fit-content;

Continued development

• Adding proprties to interact with the users.
  • hover, transtion and transform.
  • focus, adding borders to make it standing out when the user interact with the card.
  • onclcik, make the card popup and add an overlay.

Author

• Website - Hussain AL-shaer
• Frontend Mentor - @hussaindev94
• |X|Twitter - @hussaindev94