Submitted over 1 year ago

QR Code Component using CSS Flexbox

Koya• 310

@koyaboy

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

Hey guys, so I just completed this challenge and I would like some feedback in the areas below:

I used pure CSS on this project and I would like to know whether Sass is really necessary to learn ?
I'm very comfortable with flexbox but I'm not quite confident using grid yet. I don't think I could have used it for this layout though but that's something I definitely want to get better at. Is there a way to distinguish when to use flexbox or grid ? What's the best scenario to use either ?
So I made a body class to serve as my body because I don't really like dealing with the conventional body tag, except to remove the default padding and margin. In order to center the content in the middle I had to give the body class of 100vh. Is that really necessary ? Must height always be defined to center a div both horizontally and vertically in a page ? See code snippet below:

.body {
    height: 100vh;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;
    align-items: center;
}

Any feedback will be appreciated. Thank you

Community feedback

Godstime• 330

@iceberg61

Posted over 1 year ago

First ** CONGRATS 🎊 ON** completing the challenge. For your first question.

It really depends on you. If you have interest in sass ,you should definitely go for it. Oh and for this project, sass is not necessary for it ** my opinion* *
CSS Grid is for layout; Flexbox is for alignment. CSS Grid and Flexbox are layout models that share similarities and can even be used together. The main difference is that you can use CSS Grid to create two-dimensional layouts. In contrast, you can only use Flexbox to create one-dimensional layouts. That means you can place components along the X- and Y-axis in CSS Grid and only one axis in Flexbox. With CSS Grid, you can align components into columns and rows. This feature makes it ideal for larger layouts that must be divided into sections. In other words, this type of layout will have elements that need to overlap and layer rather than being linear. Flexbox With Flexbox, you can lay out and align elements in a container even if you don’t know the size of those elements or if the size might change. That’s because a flex container is, well, flexible: it expands the flex elements to fill space when it’s available and shrinks them to prevent overflow when it’s not.
If I understand correctly, you are saying that the content is centered horizontally by default, but that the body needs a height: 100vh to center the content vertically.

body are block elements, which means that, by default:

They take up the entire width of the screen They only take up as much height as is needed to display their content (they have a default height of auto). If your div is a flexbox with the content centered, even if the content is centered vertically, the div will still only expand downwards as far as it needs in order to fit the tallest element inside of it. Since the div is still at the top of the screen, even if its content is centered vertically inside the div, the content will appear at the top of the screen because the div is only as tall as the content and because the div is at the top of the screen.

However, the height: auto default property of body can be overridden. If you set the height to 100vh, you force the div to be 100vh of the height of its parent element, the page. The div would then have a bunch of extra space for the content, and due to the flex rule, it would position the content in the vertical center of that extra space.

Marked as helpful

Koya• 310

@koyaboy

Posted over 1 year ago

@iceberg61 Thanks a lot iceberg, this is a really great breakdown. If I understand you correctly:

Sass isn't necessary it just depends on if I'm interested in it
Grid is for general layouts and sectioning while flexbox is more useful for aligning elements within a container
Since the body takes up only as much height as the content, to center content in the middle of a webpage you will need to define the height of the body

Thanks a lot , it was very helpful

Godstime• 330

@iceberg61

Posted over 1 year ago

@koyaboy am glad you understand it..

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 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.

HTML 🏷️:

This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which lack landmark for a webpage

So fix it by replacing the <div class="body"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

HEADINGS ⚠️:

And, this solution has also generated accessibility error report due to lack of level-one heading <h1>

Every site must want at least one h1 element identifying and describing the main content of the page.

An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

iMAGES 📸:

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 the purpose of the image.

E.g. alt="QR code to frontendmentor.io"

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

Happy coding!

Koya• 310

@koyaboy

Posted over 1 year ago

@0xAbdulKhalid thank you

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

@koyaboy Glad you found it 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