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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Basic HTML tags
• Semantic HTML
• @media-screen for all types of view
• Basic CSS

What I learned

I think it might be best practices about Semantic HTML, basically it organizes HTML tags better, not just stuffing them with classes.

Do this:

<section class="memorybg">
  <div>
    <object data="./assets/images/icon-memory.svg" width="20px" height="20px"></object>
    <h2 class="memory">
      Memory
    </h2>
  </div>
  <div>
    <h2>92 <span>/ 100</span></h2>
  </div>
</section>

Instead of this:

<div class="memorybg">
  <div class="section">
    <object data="./assets/images/icon-memory.svg" width="20px" height="20px"></object>
    <h2 class="memory">
      Memory
    </h2>
  </div>
  <div class="values">
    <h2>92 <p>/ 100</p></h2>
  </div>
</div>

I know it seems like this doesn't make a difference, but with a large amount of code, this can be very useful. (NOTE: You must be thinking why I put a class in a section, it's because, if you look at my code, you'll see that there are 4 types of summary option, and each one has its own color. And just for explanation , I used div inside section, because section has its unique style and div, it's just cleaner in css code)

Continued development

I just started from the last project uploaded, learning about ReactJS, and it's kind of similar to React-Native (I've been using React-Native for 2 years now to produce applications based on the Android operating system), same base and uses, but with HTML tags and CSS for style sheet. So I think I can go even further and make many lighter and better sites.

Useful resources

• Example resource 1 - This blog just taught me the correct way to use semantic HTML to structure websites better

Author

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