/qr-code-component

Frontend Mentor project, making a qr code card

Primary LanguageHTML

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

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Google Fonts - For font styles

What I learned

I've refreshed my knowledge of html and css, tinkered around with paddings, widths, border-radius, etc. I've got pretty comfortable using them.

I've used Flexbox in this project, which ultimately provides a clean look by centering it

<section class="card">
  <img src="./images/image-qr-code.png" alt="qr-code" />
  <p>Improve your front-end skills by building projects</p>
  <p>
    Scan the QR code to visit Frontend Mentor and take your coding skills to the
    next level
  </p>
</section>
.card {
  background-color: hsl(0, 0%, 100%);
  border: hsl(0, 0%, 100%) solid 15px;
  border-radius: 15px;
  width: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Continued development

I've found myself insufficient to give responsive units of widths and heights. I've used vh, %, and auto as the "responsive units", or so i thought, but i never really get the hang of it and just using them randomly. I need to learn more about this area.

Useful resources

  • Flexbox in MDN - This has helped me to refresh my knowledge about Flexbox and knowing what options are there when it comes to using Flexbox.
  • QR Code Component Challenge by Frontend Mentor - This is an amazing hands-on starter project on Frontend Mentor, which is why I've started this project in the first place. It helped me finally understand Flexbox layout. I'd recommend it to anyone still learning web development.

Author

Acknowledgments

All the images, design and materials are given by Frontend Mentor. Check them out on https://www.frontendmentor.io