Skip to content

EcePJD/frontendMentor_qrCode_Challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

This challenge was checking my knowledge in basic html and css. My original plan was just to use flex box and be done with it. But I wanted to try using the calc function of the css.

The first thing I did was to input all the html elements that will be used to recreate the design. I used the 'div', 'span', and 'a' elements and added classes and ids to be used in the css design.

Since the color, and font was indicated in the styles guide of the challenge, I just followed it and used photoshop to accurately get the messurements of the div and image size. I centered the container using the calc function since based on the design guide, the size of the container and its children are fixed.

Built with

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

What I learned

I've been fairly knowledgeable in website development and have work experience in it. I've self studied programming and the problem with it is that I only studied and implemented the 'Things' that interest me. That's why even this basic challenge took me almost an hour. I never knew that you could use calc inside css and that's what I learned in this challenge.

Author