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

It was a good project for a beginner. The background colors confused me a bit and I'm still not sure I got it right.

Screenshot

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

1. I studied the project design closely.
2. I went through the docs that came with it especially instructions.
3. I designed in my head, making a mental note of the html markup, syntax and css style tools.
4. I wrote the html markup. I went ahead to style it in my css.
5. Made some changes in my html.
6. Then finished up the design in my css.
7. And then added mobile responsiveness.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Web-first workflow

What I learned

.proud-of-this-css {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

Continued development

1. Positioning.
2. Flexbbox.
3. Grid.
4. Box-shadow.

Useful resources

1. Chatgpt

Author

• Website - Oladimeji Adeyemo
• Frontend Mentor - @Holardev19
• Twitter - @0la_dev

Acknowledgments

Thank you, chatgpt.