yxlaisj / qr-code-component

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

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Live site at github page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

Learn basic use of html and css. You should start by thinking about the structure of your web page.

<div class="content">
  <div class="card">
    <img src="images/favicon-32x32.png" alt="favicon" id="icon">
    <img src="images/image-qr-code.png" alt="qr-code" id="code">
  </div>
  <h1>Improve your front-end skills by building projects</h1>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>

.content{
  margin: auto;
  width: 320px;
  height: 510px;
  background: hsl(0, 0%, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}

Continued development

How to determine the size of an element when designing a page.

Useful resources

• w3schools - As a front-end beginner, this site has helped me learn a lot about CSS usage.

Author

• Github - yxlaisj
• Frontend Mentor - @yxlaisj