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

Overview

Screenshot

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

What I learned

Developing this project really opened me to the understanding of placing divs in the middle of a layout. Truly, I am proud of this HTML & CSS codes😊:

<div class="main">
      <img src="./images/image-qr-code.png" />
      <div class="text">
        <h3>Improve your Frontend skills by building projects</h3>
        <p>
          Scan the QR code too visit Frontend Mentor and take your coding skills
          to the next
        </p>
      </div>
    </div>

.main {
  width: 300px;
  background-color: white;
  margin: 80px auto;
  padding: 16px;
  border-radius: 20px;
  box-shadow: -2px 20px 37px 3px rgba(0, 0, 0, 0.13);
}

Continued development

For me, the goal is to take on much more tasking HTML & CSS so as to get better at it before movig on to JS.

Useful resources

• Example resource 1 - This helped me when I had an issue with pushing my code to GitHub. It turned out that my README file in the local storage wasn't same in the remote one; so I had to delete the one in the local storage so they appear alike. Great resourcee though!

Acknowledgments

Grateful to Frontend Mentors for these projects - I'd keep practicing.