Responsive QR Code Component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  I hope this is helpful in addition to the other feedback you've received:

  • you must write more detailed alt text on meaningful images. This needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
  • this component would never be used to serve the main page heading once used in a full site. That means it mustn't include a h1. Use a lower importance heading level like h2.
  • make sure you update the link to you in the footer. Point it to your frontend mentor profile page or github profile page.
  • there is no benefit at all making the card into a flex column unless you intend to use the gap property for vertical spacings.
  • why are you using em units for the padding on the card? That's extremely unusual and I don't think it's what you actually want. You should only be using em when you want a property to specifically scale with the parent font size.
  • the component should have a max width in rem. The child elements within it shouldn't really have a max width in pixels. You could give them a max width if you really wanted to but it seems unnecessary to me.
  • the image must not have an explicit width like this. All.it needs for sizing is what's already included in the css reset (which you need to add as already advised). It needs display block and max-width 100%. You can optionally give it an aspect ratio of 1 to improve browser performance.
  • you must make sure links are visually distinct. They should have an underline not just be bold.
  • don't absolutely position the footer! This is badly overlapping the content on my screen, and there is just no reason to do it.

  Note this solution is overflowing my phone screen on all sides because of the explicit widths. Read, understand and apply all of the feedback you've received from me and others to fix. It looks to me like you've rushed through 3 challenges and they will all have these kinds of problems and all need fixing. Getting or reading others quality feedback on each challenge is very important.

  Marked as helpful

  1

  ---

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @grace-snow, Best advice you are going to get on this platform @dekriss-dev, Great member of the community, Most of what I know about accessibility and responsiveness is because of grace. 😁

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

  • For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

  • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  • Setting font-size: 62.5% can affect accessibility by reducing the default browser font size, potentially making text harder to read for users with visual impairments. This does make it easier to work out the relative units but at what cost?

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @Stroudy I certainly wouldn't say we shouldn't use px. They are best suited for some properties, it all depends on whether you want a property to scale with the users text size.

  So pixels can be great for border width, possibly border radius, page/section inline padding, some image sizes etc.

  Be careful not to advise as if these things are blanket "rules". Everything is more nuanced.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey @grace-snow, I appreciate any feedback you give, I have made some adjustments, Would appreciate your opinion if it reflects more of the problem with px.

  While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness.

  For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and em adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts.

  If you want a deeper explaination watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @Stroudy yes that does but I'm not sure you are grasping the important differences between em and rem. It's actually rare you need to use em.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey @grace-snow, I did do some research on em with it scaling with the parent and can grow out of size quickly if they are used on loads of child elements of child elements etc, I know as we are learning it is probably best to stick to rem because it scale from the default 16px root. Maby I should just remove the em to save any confusion because it is a lot to grasp at the beginning.

  1