Submitted about 1 year ago

QR code component using HTML and CSS

armando1236• 10

@armando1236

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

Did I center the QR image correctly? I gave each side a different margin. I tried using auto for the left and right margin but it didn't work.

Should I have given the bottom text a separate p tag instead of using span?

How do you know when you should use rem, em, px, or % for sizing the width or anything else?

Community feedback

David Ochoa• 290

@davidochoadev

Posted about 1 year ago

I've reviewed your source code, and regarding the structure, there are some improvements you could consider in the future. It's good practice to properly structure the code within the <body> by using predefined semantic elements. I recommend checking out this link.

It explains the concept of semantic HTML without going into too much detail and why it's important, especially for SEO and accessibility purposes. For example using the <main> and <footer> tags in HTML provides several benefits:

Semantic structure: The <main> and <footer> tags help establish a semantic structure for your HTML document. By using these tags, you clearly indicate the main content and footer sections of your webpage. This semantic structure improves the accessibility and maintainability of your code, as it reflects the logical organization of your content.
Accessibility: Semantically structuring your content using <main> and <footer> tags enhances the accessibility of your website. Screen readers and other assistive technologies can identify these sections, making it easier for users with disabilities to navigate through the main content and locate important information in the footer.
Search engine optimization (SEO): Search engines, like Google, rely on semantic HTML to understand the structure and meaning of webpages. By using the <main> and <footer> tags, you provide search engines with clear indicators of the primary content and supplementary information on your page. This can positively impact your search engine rankings and improve the visibility of your website.
Code organization and readability: Using dedicated tags like <main> and <footer> enhances the organization and readability of your HTML code. Other developers who work on your codebase or maintain your website will have a clearer understanding of the purpose and structure of different sections, making it easier to update or modify the code in the future.

By adopting semantic HTML and using tags like <main> and <footer>, you not only enhance the accessibility and search engine visibility of your website but also improve the overall maintainability and understandability of your codebase. It's a best practice that contributes to better user experiences and efficient web development workflows.

Marked as helpful

armando1236• 10

@armando1236

Posted about 1 year ago

You're right....<main> and <footer> was something I completely forgot about. I'm doing a review course and starting from the beginning. I'll keep that in mind for the next project. Thanks! @davidochoadev

Islam Ayoub• 60

@islamahmadayoub

Posted about 1 year ago

You could also use on the body

{
display: grid;
grid-template-columns: 1fr;
place-items: center;
}

You will need all the content to be in one div and that div will be centered.

Consider learning Flexbox and CSS Grid, they make it so much easier to center pretty much anything

https://www.w3schools.com/cssref/css_pr_place-items.php

Marked as helpful

armando1236• 10

@armando1236

Posted about 1 year ago

Thanks! Flexbox and CSS Grid are next on my list of things to learn. @islamahmadayoub

Ioan• 300

@ioangheraszim

Posted about 1 year ago

Hey Armando, good job on completing your challenge.

After reviewing your code, I would like to offer some suggestions for improvement: consider adding the following properties to the body element:

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;

By applying these styles, you will achieve perfect vertical centering of your component. The min-height: 100vh property ensures that the component is positioned precisely in the middle of the page.

Hope this helps.

Best regards,

Ioan

armando1236• 10

@armando1236

Posted about 1 year ago

Yes, this definitely helps! Thanks @ioangheraszim

Abdul Khalid 🚀• 72,700

@0xabdulkhalid

Posted about 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

body {
min-height: 100vh;
display: grid;
place-items: center;
}

Now remove these styles, after removing you can able to see the changes

.top-container {
margin: auto;
}

Now your component has been properly centered

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

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