Submitted about 2 years ago

My first Frontend Mentor challenge! QR - Code Component

Gerson Diaz• 10

@Gersondiaz03

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my first-time coding with HTML and pure CSS! I don't know if I did it well or right, but I had a tough time with the QR asset because of the height and width of it.

Community feedback

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hi Gerson Diaz, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

Use <main> instead of <div> to wrap the card container, its better to use <main> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

Something I've noticed in your code is that in many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

✌️ I hope this helps you and happy coding!

Marked as helpful

Elaine• 11,400

@elaineleung

Posted about 2 years ago

Hi Gerson, welcome to Frontend Mentor, and congrats on completing your very first challenge! You did many things well here, including centering the component, using flexbox, and using padding in your card. I think this was a very good attempt at HTML and CSS, and building a simple project like this one can help you really put to use the things you learned in tutorials 🙂

There are a few things I would fix here, and I'll try to explain as I go along:

Starting with the html in the CSS, we normally don't do any styling on the html selector as this is the selector for the entire document. All the stylings actually start with the body, and so what I'd do here is, I would move all of this to body instead.
Really great job on the HTML structure here! Two suggestions I have: Change your container div to main (to help with accessibility so that screen readers know where the main content is), and try to give more descriptive names to the classes, such as image-container, text-container, and description instead of names like improve, text and text2.
To make things responsive, I would use a max-width instead of width, and I'd remove the height, as it's not necessary when the width determines how the container's height will be.
Lastly, I would add a reset style here to remove the default browser stylings; this helps to ensure your style would be consistent across browsers!

Altogether it looks like this:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body  {
   font-family: 'Outfit', sans-serif; 
   background-color: hsl(212, 45%, 89%);
   display: flex;
   align-items: center; 
   justify-content: center;
   min-height: 100vh;
}
.container {
    max-width: 300px;
    margin: 1rem;
    // rest of your code
}
.qrimg {
  // remove margin-top
}

That's roughly how I'd rewrite the styles, and I hope some of this can help you!

Marked as helpful

Antonio Santiago• 90

@Ablueremote

Posted about 2 years ago

Congrats on your first project. My suggestion is to start w/the ACCESSIBILITY ISSUES. I just dealt with the same issues. Instead of using divs , try using main, h1, and p. Main as your main component for your body. H1 for the bold text and p for the secondary text. Start there, you will have to tweak your CSS containers

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord