Submitted over 1 year ago

QR Code Component - HTML, CSS only

CalvinSales• 40

@NoobKelvin

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

Please let me know if there's any better practices in the structure of my code. I find it difficult to find the exact measurements but Youtube helped me tbh.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

Hi, CalvinSales!

Alternative text should not be hyphenated ("frontendmentor.io-qr-code"). Alternative text is not a code (like a class name). It should be human-readable. So, the better alternative text is the one that @MelvinAguilar has suggested.

Use <body> element as the container of the card. Then, use the <main> element as the card element. This way, you don't need any <div> elements.

Also, for the <div class="text">, you want to do these instead:

Add margin-top to the heading to give some whitespace between the image the heading, and
Use the padding of the card to control the width of the text.

I hope this helps.

Marked as helpful

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted over 1 year ago

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

HTML 📄:

Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

CSS 🎨:

Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

To center the content horizontally, use justify-content: center; to the container and you can remove the margin: 0 auto;

.container {
    /* margin: 0 auto; */
    /* max-width: 360px; */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    max-width: 360px; /* Use the max-width here, this is your component not the "div.container" */
}

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

CalvinSales• 40

@NoobKelvin

Posted over 1 year ago

@MelvinAguilar Thank you so much for the suggestions. I really appreciate it a lot <3

CalvinSales• 40

@NoobKelvin

Posted over 1 year ago

I made some changes to the code based on your suggestions just need to tweak the paddings and margins a little. I did what @vanzasetia suggested had a little problem with the footer so I put it in position: absolute; so it will be excluded in justify-content:center; from the <body> tag. I've also changed the alt to make it more human-readable based on the suggestions of @MelvinAguilar. Massive thanks to the both of you, Please let me know if there something that I've missed or needs to work on. Hope you're all having a great day :D

Vanza Setia• 27,795

@vanzasetia

Posted over 1 year ago

@NoobKelvin

Good to hear that, CalvinSales!

For the footer positioning, I recommend setting the flex-direction: column to the <body> element. After that, add some margin-top to the .attribution. This way, you don't need to use absolute positioning.

I recommend fixing the issues that have been reported.

Keep up the good work!

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