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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Links

• Solution URL
• Live site URL

My process

I usually develop the design part with a design created in Figma, often using a grid. When developing in React, I frequently use Emotion or Styled Components. This kind of challenge is interesting as it brings me back to the basics plus without Figma, but with a little extra touch – SCSS. I feel more organized and scalable with SCSS, even though this component may not be scalable (but it's still good practice, isn't it?). I also had a doubt about which header tag (h1-h6) used.

Built with

• Semantic HTML5 markup
• SCSS preprocessor
• Mobile-first workflow

Continued development

I love sharing my work with other people and contributing to what I already find interesting to comment on, so I will continue interacting with people in the frontendmentor community.

Useful resources

• SASS Docs - This is the official documentations of sass. I really liked this pattern and will use it going forward on very simple projects to pratice the basics.
• HTML

  to

  Tags - W3 - This documentations provides the direcion to think about wich semantic tags use in header.

• HTML

  to

  Tags - Mozilla - This documentations provides the direcion to think about wich semantic tags use in header.

Author

• Website - Cristian Melo
• Frontend Mentor - @cristianmeelo

Acknowledgments

It's not easy to make a perfect design without figma, with figma it's a little more difficult, but the more our frontend eyes are trained to see details, the more we will be successful when development is easier, in this case, when you have a team, or the design in hand, so congratulations to everyone who had the courage to face this challenge of responsiveness and handling images. About which head tag use, reading the W3 and mozilla documentation notes, "Avoid skipping heading levels: always start with

, then

and so on. Also try to have at least one first-level header on a page" and "Don't use smaller levels to decrease the header font size: use the CSS font-size property."