Frontend Mentor | QR Code Component coding challenge solution

@Islandstone89

Posted 10 months ago

Hi. I'm afraid there are a lot of issues with your code. Let's take a look.

HTML:

You have way too many divs for such a simple challenge. In fact, you don't really need <div> here at all. Every page needs a <main>, that wraps the content (except for the footer and the header). In this example, that could also be your container for the card. Change the first <div> into a <main>, and delete the rest.
The image needs alt text. This is essential for accessibility, or else screen readers will not understand it. Alt text should be descriptive, and here it also needs to say where it leads (frontendmentor.io).
The text should not be in <span>, it is a <h1> follows by a <p>.
.attribution should be a <footer>.
Footer text needs to be wrapped in a <p>.

CSS:

Link to the font in the <head> of the HTML, don't use @import.
Use a CSS Reset at the top.
Remove overflow: hidden and margin: 0 on body. You don't need the first one, and the margin is already set to 0 in your * selector.
height should be min-height.
Never set font-size in px. Use rem.
Put text-align: center on the body, since all text should be centered. Doing this takes advantage of inheritance.
Remove all fixed widths and heights.
On .dark-black-text and .light-grey-text, you can remove everything, except for color, font-weight and font-size. You can also keep margin, but don't use negative numbers.
You don't need any media queries in this challenge. Whenever you do, remember to set it in rem instead of px.

Hope this is clear and helpful. You should implement this feedback, and increase your understanding of HTML & CSS before moving along.

Good luck :)

QR Code Component