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.
This challenge is made by using HTML and CSS. And it makes me use Flexbox by which I get more understanding of Flexbox.
- Solution URL: https://github.com/Soyeb01/QR-code-challenge.git
- Live Site URL: https://soyeb01-qr-code.netlify.app
First when I open my file I saw most of familiar files like .html, image file but when I saw downwards I see three more files which says README files and a style guide. First I got confused what to do and how to navigate from there. Then I figure it out. Then I started my journey of my first real time project.
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.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- How to apply Flexbox
I want to polish my CSS learning more.
- ( https://www.youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid ) This youtube video helped me a lot learn about flexbox.
- Frontend Mentor - @Soyeb01