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

Overview

Screenshot

Links

• Solution URL: QR Code Project CODE
• Live Site URL: QR Code Project Site

My process

Built with

• SASS for better style overview
• Basic HTML tags
• Basic CSS
• Semantic HTML

What I learned

The most valuable element I used in this project was responsive pages, which basically let you choose a different style for the page based on the viewport, be it Mobile or Desktop.

Like the example below:

Mobile

.qr-container {
  width: 85%;
  padding: 18px;
  display: flex;
  border-radius: 5%;
  background-color: hsl(0, 0%, 100%);
  flex-direction: column;
  align-items: center;
} 

Desktop

@mediascreen and (min-width: 375px) {
  .qr-container {
      width: 16%;
  }
} 

This will come in very handy next time!

Continued development

Maybe learn more about other ways to make a website, how to use React.js, Python, PHP, which I've used, but don't go too far. Another thing will be about Clean Code, I want to study about it, and implement it in my future projects.

Useful resources

• Example resource 1 - This video from Hostinger Brasil (yes, I'm Brazilian) helps me, as I said in What I learned, to understand more about responsive pages and how to implement them.
• Example resource 2 - This article, taught me about some differences about measurement units in CSS.
• Example resource 3 - I update the code with Semantic HTML thanks to @ecemgo post on my solution.

Author

• LinkedIn - Enzo Santana
• GitHub - AnakonStar
• Frontend Mentor - @AnakonStar
• Workana - Enzo Santana