QR code component using HTML CSS Flex

Community feedback

• 

  T

  Grace•31,530

  @grace-snowPosted 2 days ago

  Hi there,

  Well done on completing your first attempt. There are some common beginner mistakes in here that you should fix and will set you up well for future challenges. I'll try to list them all out and hope it helps.

  • pop the styles in their own file and link it from the html head.
  • all content should be contained within landmarks. That means this QR code component (the card) should sit within a main and the attribution should sit within a footer (outside of the main).
  • the image in this is the most important content on the page. It needs a proper alt description that says what the image is (QR code) and where it goes (to FrontendMentor.io). Craig Abbot has a great blog post about how and when to write alt text on images that you should look up and read.
  • when building single component demos like this we developers still need to consider the context of how they'll be used in a real site. This card would never be used to serve the main heading on a. So you know it shouldn't have a h1. Use a lower importance heading level like h2 instead.
  • just as an aside for learning: Headings matter. They should only be used for heading content and should go in hierarchical order on a page. Think of heading levels like the contents page of a big document: the headings give an outline of the content of the page and that's used by search engines and screen readers to understand the content.
  • make sure you update your own attribution link. It can go to your frontend mentor or github profile page for example.
  • in css its important to always include a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • remove all widths and heights from this challenge. You don't need them anywhere. Never limit the width or height of the body like this. All the body needs is a min-height 100svh (the body is only as tall as it's content by default) and flex column properties to center the content on the page.
  • the card only needs a max width in rem. No width. And no height. It's really important to grasp this principle. Setting a max-width allows the card to be narrower when it needs to be like on a small screen, whereas width is fixed. And you never want to limit the height of elements that contain text. Let the browser do it's job and decide what height is needed based on the content inside. As soon as you set a height that is fixed and the component will break if users change font styles like size or family and if authors change the amount of content in the card.
  • the image doesn't need anything to size it beyond what is already included in a css reset width: 100%; display: block;. If you want you can give this image an aspect-ratio of 1 for a small performance boost.
  • never set font size in pixels. Use rem instead so the text will respect users text size settings. See https://fedmentor.dev/posts/font-size-px/
  • you don't need a media query in this challenge.
  • make sure you fully understand the difference between padding and margin. There's a post about that on the same linked site.

  Good luck.

  Marked as helpful

  0

  ---

  

  librart•10

  @librartPosted 1 day ago

  @grace-snow Hi, thanks a lot for the feedbacks! But, sorry, can you give me a sample code or more detailed explanation for the feedback point 9 and 10? Or maybe you have a linked source that I can read?

  0

  

  T

  Grace•31,530

  @grace-snowPosted 1 day ago

  @librart What is it that isn’t making sense to you?

  Is it understanding the difference between height (a fixed property) and min-height (a flexible property that lets height increase as needed)? And understanding the difference between width (a fixed property) and max-width (a flexible property that lets width reduce, go narrower, when needed)?

  Have you tried applying these points in browser, resizing the viewport often and watching what happens?

  0

  

  librart•10

  @librartPosted about 21 hours ago

  @grace-snow Yeah, a fixed property will give the size to be fixed and a flexible property will give the size to be adaptive/dynamic to the size of the system.

  But, I still don't really understand about your words,

  "the card only needs a max width in rem."

  and

  "the image doesn't need anything to size it beyond what is already included in a css reset width: 100%; display: block;. If you want you can give this image an aspect-ratio of 1 for a small performance boost.".

  Maybe you have a sample of code or more detailed explanation, especially in case of this challenge, to make me more understand those attributes. 😊

  0

  

  T

  Grace•31,530

  @grace-snowPosted about 3 hours ago

  @librart Have you added the css reset? (Mentioned earlier). That will have those two properties on img and the img in this doesn’t need a width or height to size it. The reset properties are enough.

  You can include aspect-ratio: 1; because this is a square image (it has an aspect ratio of 1:1). So the performance improvement comes because if you give it that aspect ratio the browser will know what space to save for the image as it’s loading in.

  With the other point: “ the card only needs a max width in rem." I’m sorry but I can’t think how to write that any simpler. That’s what this card should have. A max-width in the rem unit for its size, not using pixels and not using the width property and not using the height property.

  0
• 

  P

  Lethabo Semenya•50

  @Leethabo27Posted 3 days ago

  This comment was deleted 2 days ago

  0

  ---

  

  librart•10

  @librartPosted 3 days ago

  @Leethabo27 Thanks for the suggestions! I really appreciate it! 😊

  0

  

  T

  Grace•31,530

  @grace-snowPosted 3 days ago

  @Leethabo27 what is this?! Feedback from AI? Some of its OK but a lot isn't very meaningful and some is just wrong/unhelpful. It certainly looks like it’s been AI-generated. Or did you ask it to flesh out your feedback a bit more? It’s fine to give only basic feedback if that’s the stage you’re at. Don’t share AI generated stuff though as so often it is incorrect/misleading when it comes to code feedback.

  0