QR Code Using Flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  Well done on the solution.

  You don't need to waste time measuring everything, just get these solutions close and that's fine. In a real job you will always have design files and should be given variables anyway.

  There are a few points for improvement on this though..I hope these are helpful!

  • you don't need a section for the text content inside the card. You're only adding that for a layout purpose. It's fine to use divs for that! This isn't what a section is for and makes the code less reasonable by trying to present the text in the card as its own component.
  • When you build single component demos like this try to think about the context of where it would be used in a real site. This is a card, likely to sit on a page somewhere maybe with other cards. It would never be used to serve up the main heading for a page of content, so that tells you it wouldn't ever be a h1. Use a lower importance heading level like h2.
  • get into the habit of including a full modern css reset at the start of the styles in every project. What you have now isn't what I mean. Look up Andy Bell's or Josh Comeaus. Both have good explainers.
  • I strongly recommend you don't resize the html font size to 62.5%! I've written all about this and encourage you to read it.
  • don't give the component an explicit width or it won't be able to adapt when it needs to. Instead, give it a max width in rem (optionally it can have width 100% as well). This let's the card go narrower if it needs to eg on a smaller screen, and using rem means the layout will scale correctly for all users including those who have a different text size setting.

  Marked as helpful

  1

  ---

  

  ayx•60

  @ayx234Posted 2 months ago

  @grace-snow

  Hello grace,

  Thank you for your detailed reply! I updated my code with your suggestions, and appreciate having professional feedback and your article.

  How do I know when it's appropriate to use divs? I try to avoid them for accessibility concerns, but from your feedback I understand they are ok to use for layout purposes? when do they cause accessibility issues?

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @ayx234 they dont cause accessibility issues. The sections you're using are actually exactly the same as divs - they are meaningless unless they are labelled. It's only once a section is given an accessible name (e.g. aria-label) that it becomes a landmark and is called out in the accessibility tree.

  The point here is more about code readability. This is only one card. It's one section of content and should be treated as one, not two or more.

  The important landmarks for accessibility are really the core structural landmarks of a page — header and/or nav, main, and footer.

  Marked as helpful

  1
• 

  Daniel•240

  @DAJ350Posted 2 months ago

  Hey, great work on this project! You have used Semantic HTML quite well. I am also impressed by the use of the custom CSS properties. I plan to try this out on my next project.

  To answer your question about measuring margins, letter spacing etc...

  You can use design software like Photoshop, GIMP, or Paint.NET, which have built-in rulers, grids, and measurement tools to get pixel-perfect distances between elements.

  How to Use:

  1. Import the JPG file.
  2. Use the built-in ruler or grid tools to measure margins, padding, letter spacing, etc.

  Many tools allow you to drag guide lines to measure pixel-perfect distances.

  Hope that helps.

  Happy Coding!

  Marked as helpful

  1