QR Code Component using CSS Flexbox

Community feedback

• 

  Godstime•330

  @iceberg61Posted over 1 year ago

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

  1. 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* *

  2. 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.

  3. 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

  0

  ---

  

  P

  Koya•310

  @koyaboyPosted 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

  0

  

  Godstime•330

  @iceberg61Posted over 1 year ago

  @koyaboy am glad you understand it..

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 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!

  1

  ---

  

  P

  Koya•310

  @koyaboyPosted over 1 year ago

  @0xAbdulKhalid thank you

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @koyaboy Glad you found it helpful ! 🤠

  0