README-template.md

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
• Author

Overview

This challenge is made by using HTML and CSS. And it makes me use Flexbox by which I get more understanding of Flexbox.

Screenshot

Links

• Solution URL: https://github.com/Soyeb01/3-Coloumn-preview-card.git
• Live Site URL: https://3-column-card-by-soyeb01.netlify.app/

My process

I did this whole challenge in Visual Studio Code. I started with giving classes to my HTML syntax. After that I change the title and the name tag. And then after that I started CSS. I usually do in scss file and use an extention called Live Sass to use SCSS file.

In my first try I did the whole project perfectly but I didn't like to much hard coding and also it's not look same in small display like mobile phones. Then I restart my whole CSS coding and first I revised flexbox more deeply and started my CSS code again.

I finally did my whole CSS coding and its more better than my previous code.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• How to apply Flexbox

Continued development

I want to polish my CSS learning more.

Author

• Frontend Mentor - @Soyeb01