Frontend Mentor QR code challenge

💡 What will I learn?

If you have been to the Frontent Mentor website, you know that the first challenge you will have the opportunity of seeing on their website is the QR Code Component.

This challenge is great for beginner developers to show off their skills, or challenge themselves to learn something new.

So in this short blog, I will teach you how to get results like these in all of your future projects:

Example of my work

And not only that, but I will also teach you tips and tricks about how to become the best developer that you can be by teaching you how to avoid some common mistakes I usually see on these projects, lets begin!

💻 How to make the best solution?

To make the best solution to the problem, first and foremost, your solution has to match the design created as much as possible, but since you already know that, let me show you how.

I will be using Figma to demonstrate the entire process, and I encourage you to use it too, it is a popular design program that I use on my job to see everything I need to know about the designs given to me, and its completely free. It can be downloaded or used in a browser.

1. Find the size of the design created

   

2. Make your browser screen smaller, until it matches the size of the design

   

3. Copy the screen of your browser (My preferred way is using ctrl + shift + s)

   

4. After copying the screen, paste the screenshot in Figma using ctrl + v

   

5. Give 50% transparency to your image

   

6. Line up your solution perfectly to the design

   

   As I have pointed out in the image above, all the differences between your solution, and the design are now very visible, and it becomes easier to spot and fix them, this makes for great web solutions, and is a part of the Frontend developer job.

This should help you create amazing solutions to all your future problems for the rest of your career :)

🎓 What are some things I should do or avoid to write clean code?

1. Use CSS variables, CSS variables are your friend, and a real life-saver in larger projects

   So how can I add them? I hear you asking. Here is an example:
   

   :root {
       --primary-color: #D5E1EF;
       --title-color: #1F314F;
       --paragraph-color: #7D889E;
       --title-size: 1.375rem;
       --paragraph-size: 0.9375rem;
       --fonts: Outfit, Roboto, Arial;
   }
   

   To use CSS variables, you need to add them inside the var() function in CSS, here is how you can do that:
   

   .background-primary{
       background-color: var(--primary-color);
   }
   

2. Don't add your styles trough style tags in your HTML file

   

   Your styles should always be added in .css files

   to link the css files to your html file, add this tag to your head tag:
   

   <link rel="stylesheet" href="./{name of file}">
   

3. Use semantic HTML

   Semantic HTML is use of HTML tags that have a meaning, for example: , , ... there is a lot of different HTML tags, but for the QR Code Component, I would recommend use of only these 3:
   

   <main>
   <h1>
   <p>
   

   the entire card component should be in a <main> tag, because your main content is inside the card, and <h1> is for the title, while <p> is for the paragraph.

   Semantic HTML helps screen readers, and improves your website's SEO which helps more people find your website on the internet.

4. Use rem instead of px for your font-size

   Using "rem" for font-size allows users to decide how big their text will be, in your browser settings, you are able to change the font and font-size of a standard text, if you use px instead of rem, the size of the font will stay unchanged for users that have made the size of the font smaller or bigger from its usual.
   

   font-size: 1.5rem;
   

🌟 Conclusion

Becoming a web developer is a process that takes a lot of time and effort to achieve, but if you want to achieve your goals quicker, I can help you further develop your skills in a lot less time, and give you amazing advice on how to get your first job, and start off your web development career! 🚀

Contact me on Fiverr for cheap coding lessons and let the journey begin 🤝