aevim / qr-code-component-main

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

The challenge was easy, but I was able to improve my sass knowledge.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Site

My process

I first started creating the project structure. I did a bit of search on how to properly structure my sass files and, for a minimal web page, this was my favorite aprouch. making a src/sass folder with a main.scss - for importing other files - and a partials folder for all partials that I need. I also used BEM terminology for my html classes. It works really well with sass, for readabillity is great.

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• Sass
• BEM

What I learned

I learn about a new tag in html, meta. It provides information about the site for the browser and search engines. I also learn about the media rule. It help me to do some changes for the layout when is on a specific width.

<meta name="descrition" "The description that will apear for search engines">
<meta name="author" "The developer's name"

@media only screen and (min-width|max-width|: npx)

Continued development

I'm not that conformatable with css-grid yet, so it's something I will be using for my next project.

Useful resources

• Sass structure - this help me with the sass file structure. I really liked this structure, at least for minimal web page, but I'm looking foward to try the other method for complex projects.

Author

• Frontend Mentor - @aevim