A Responsive QR code component which include both desktop and mobile

Community feedback

• 

  

  Grace•32,170

  @grace-snowPosted 2 months ago

  This has a lot of the common mistakes beginners make on these challenges. I’ll list them out and make sure you refactor it before moving on to any more.

  • all content should be within landmarks. The component needs to sit within a main and the attribution should be a footer.
  • this card has a heading. Use h2 not paragraph. I've written a post about html headings here: https://fedmentor.dev/posts/heading-order/
  • keep the html as simple as possible. This doesn't need a div inside the component or one wrapping the img.
  • learn how and when to write alt text on images. Craig Abbot has a great blog about this if you look it up. In this case the image is really important content so needs alt that says what the image is (QR code) and where it goes (to FrontendMentor.io).
  • when you import fonts from Google you need to include all of the provided code. There are two preconnect links missing.
  • get into the habit of including a full modern css reset at the start of the styles in every project you do. Look up Andy Bell's modern css reset.
  • Never limit the height of elements that contain text, including the body. Content is being cut off on some screen sizes because you have limited the height of the body to 100vh. Use min-height instead so the body is allowed to extend beyond the viewport height.
  • similarly, the component must not have a height. Think about how it would break if an author wrote a different amount of content, or a user changed the font size or family. This doesn't need any height or min-height. Let the browser do it's job and decide what height is needed based on the content inside.
  • the component shouldnt have a width either. Give it a max-width instead so it can grow up to a set limit but shrink narrower when necessary too. This max-width should be in rem so that it scales nicely for all users including those who have a different text size setting in their browser or device. Note the current solution is too narrow so ensure this rem max-width is a little bigger than what you have now.
  • don't use flex unnecessariky. It isn't needed on the component or image wrapper.
  • the image shouldn't have a width or height. All it needs for sizing is what's already included in the modern css reset I mentioned (max-width 100% and display block). You can give it an aspect ratio of 1 in this for a small performance boost (or use the width and height attributes in html so the browser knows its ratio). The reason this helps performance is because the browser will save space for the image as it loads in.
  • stick to single class css selectors as much as possible. Don't increase css specificity unless you really need to. That can lead to styles that are a nightmare to manage on larger projects.

  1
• 

  viethoang2307•110

  @viethoang2307Posted 2 months ago

  . Semantic HTML: Check for the use of semantic elements: Ensure that the HTML uses elements like <header>, <footer>, <article>, <section>, <nav>, and others that clearly define the structure of the content. Improvements: If the solution uses divs or spans excessively where semantic elements would be more appropriate, suggest replacing them for clarity and accessibility. 2. Accessibility: Review the use of ARIA roles: Ensure that if ARIA roles are necessary, they are used correctly to enhance accessibility. Color contrast: Verify that text contrasts well with background colors. Tools like WebAIM's Contrast Checker can help here. Keyboard navigation: Test whether the website is fully navigable by keyboard (using Tab, Enter, and Esc keys) for users who cannot use a mouse. Alt text for images: Ensure that all images have meaningful alt attributes. If not, recommend adding descriptions that describe the image's function or content. Improvements: If focus states or skip navigation links are missing, suggest adding them for better usability.

  0

  ---

  

  

  Grace•32,170

  @grace-snowPosted 2 months ago

  @viethoang2307 This is irrelevant feedback for this challenge. If you are going to give people feedback, please make it relevant and specific to the challenge.

  0