Solution using BEM and Flexbox | 100% Lighthouse

Community feedback

• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 3 months ago

  I see that your problem is that you don't have any sizes for your project. You can use figma to measure design images. Hope you found this comment helpful :)

  Marked as helpful

  1

  ---

  

  romannst•60

  @romannstPosted 3 months ago

  @SvitlanaSuslenkova Yes, i've been figuering out that types of tools to improve the issue of design dimensions. Thx for the comment!

  0

  

  T

  Grace•31,270

  @grace-snowPosted 3 months ago

  @romannst I'm afraid this has lots of foundational issues. But don't worry most are very common!

  1. Remove all of those reload links in the head. Strip it right back. All you need to be calling in the head is the Google font links (including specific weights) and your one css file.
  2. Normalise is a huge and old css reset. Instead, use a shorter modern css reset at the start of your css file. Andy Bell or Josh Comeau both have good ones you can look up and use.
  3. This challenge does not include a header. A header landmark is for repeating primary site wide content, it doesn't go in a main. This component is just one div with an image, heading and paragraph inside. It doesn't need complicating.
  4. The alt text on the image needs to say what the image is (QR code) and where it goes (to FrontendMentor.io).
  5. Think about the context of where a component like this would be used on a real site. It would never act as the main title of a page so yiu know it wouldn't have a h1. Use a heading at a lower level of importance like h2.
  6. There's no need for a strong tag in the heading. It's not to be used every place where bold text is used. It's specifically for showing emphasis which isn't needed on a heading role.
  7. Try to keep html as simple as possible. There is no need for a div header and a section element. Again, it's just one card with an image heading and paragraph. Keep it simple and remove the extra wrapping elements. If you were going to use a section element in this it would need to be for the whole component, not for part of it.
  8. I recommend against using that 62.5% rem sizing hack. You really don't need it. https://fedmentor.dev/posts/rem-html-font-size-hack/.
  9. You don't need any media queries in this. Remove them all. I've written a post about media queries on the same site as linked previously which is worth reading before other projects. But you definitely don't need any in this challenge.
  10. Remove the width on the card. You don't need it. All it needs is a single max width in rem on the component.
  11. Nothing in this needs a height. The body or main need min-height 100svh along with flex column properties to center but nothing in this challenge needs a height anywhere. It's the browsers job to decide how tall the component needs to be.

  Marked as helpful

  0