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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

I designed a responsive qr-code code website using HTML/CSS and a tiny amount of bootstrap.

Screenshot

Links

• Solution URL: GittHub repo for qr design
• Live Site URL: Add live site URL here

My process

I created a card then added head and foots body and foots div containing the image, heading, and the paragragh respectively

I intended to use card-header, car-body and card-footer of bootstrap class but it gave undesired outcome due to preset background color and other properties. So I only sticked with the bootstrap card because it adds a tiny touch of responsiveness and used media query to finetune it

I also intended to make it responsive by boostrap grid i.e row class but it turned out not so nice due to the fact that i had only one object being placed I.e only a column in a row making it seem awkward or maybe it's me who couldn't implement it right. I'll learn more about it and then try to apply it in future designs

Built with

• Semantic HTML5 markup
• CSS custom properties
• Boostrap cards
• Bootstrap shadow
• Desktop-first workflow

What I learned

I practice the use of media query to complete make website responsive, and coupling it with Bootstrap responsive nature and use of % values for sizes of images and divs which reduced in total the work I had to do to make the website reponsive

@media screen and (max-width: 600px) {
    div.card {
        width: 80%;
    }

    div.card-foot {
        text-align: center;
        margin: 0 19%;
    }
}

Continued development

I look forward to learning more about bootstrap cards and grids and using them in future challenges

Useful resources

• Example resource 1 - This helped me for adding shadow to my box. I really liked this pattern and will use it going forward.

Author

• Website - Add your name here
• Frontend Mentor - @ShegzBit
• Twitter - @feranmiawotubo1