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

I've learned HTML & CSS for two months and now I'm practicing them. this is my first project on the web. I like working with Flexbox & Grid and in this project I tried to use Flexbox for organizing the main card in the middle of viewport and other components inside the main card. hope it works well.

Screenshot

Links

• Solution URL: My Solution
• Live Site URL: My Live URL

My process

First of all I wrote html tags. I divided the body into two 'div'. One of them was the main card with qr-code and related texts. The other one was the footer. I used Flexbox for organizing the card in the middle of viewport then centering the qr-code and related text in the middle of the main card.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

One of my major learnings while working through this project was set body height to center all of components in the middle of screen vertically.

body {
  height: 100vh;
}

Continued development

I'm a beginner in front-end. I want to work with html & css for a while.

Useful resources

• Learning Web Design - This book teach me everything for begining. It's a good book for starting frontend development.

Author

• github - @luciferad
• Frontend Mentor - @luciferad