Frontend Mentor QR code challenge
Tags: programming, webdev, frontendmentor, frontendchallenge
Published: 2024-04-01 17:41:23

## 💡 What will I learn?

**If you have been to the [Frontent Mentor](https://www.frontendmentor.io/) 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.


![QR code component solution image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnk1pqnvaaum8nzn1s41.png)

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

![Solution to qrcode component in comparison to the design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztk7jsiir73z2cjeb1mn.png)

**[Example of my work](https://www.frontendmentor.io/solutions/just-css-and-html-its-too-small-of-a-project-to-need-ro-add-anything-Lo9rFod9_5)**

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

    ![Size of QRCode design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s98fj1vpg9ja85pbwj83.png)

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

    ![Browser screen size made smaller](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/echytttoypzzzmoqep6o.png)

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


    ![Saving browser screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwxblkz5gm044qln4a6t.png)

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

    ![Pasted image in Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2rmwkaajy83encoxw9x.png)

1. Give 50% transparency to your image

    ![Adding transparency](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63gvi010awugokzu1ueo.png)

1. Line up your solution perfectly to the design

    ![QRcode lined up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnqqurx4eczqx2qoqkw6.png)

    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?

2. 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



    ![Adding Styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbc2ldzpjdnh59phqhhb.png)

    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}">
    ```

2. Use semantic HTML

    Semantic HTML is use of HTML tags that have a meaning, for example: <section>, <header>, <footer>... 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.

2. 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 🤝](https://www.fiverr.com/s/v0arzr)