Skip to content

Latest commit

 

History

History
59 lines (41 loc) · 1.86 KB

README.md

File metadata and controls

59 lines (41 loc) · 1.86 KB

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

The goal of this project was to manipulate CSS and HTML to display a QR code to scan, and make it simple, beautiful, accessible and responsive.

Screenshot

A screenshot of our finished project, presenting a QR code which leads to Frontend Mentor website

Links

Our process

  • Create boxes to contain both image and text, and a larger one which will be at the center of the screen
  • Center every elements inside their respectives boxes
  • Center boxes
  • Add finishing touches like fonts, border radius, colors...

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

  • CSS is really just boxes that we create and customize as we wish
  • It's possible to make a element size sensible to which size the screen is, instead of just doing it with percentage :
@media (max-width: 500px) {
    .container {
        min-width: 275px;
        max-width: 275px;
        width: 90%;
    }
}

Author