html/css/media query

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Dustin!

  One suggestion I have is to add alternative text to the QR code. Like @MelvinAguilar said, it is not a decorative image. It is the main content of the site. So by adding alternative text, the screen readers can read the alternative text to announce to the users that there is a QR code.

  Also, you can add width and height attributes to the image element. This way, browsers will know how much space the image requires before it is loaded. As a result, it will prevent the layout shift.

  • Optimize Cumulative Layout Shift
  • Cumulative Layout Shift (CLS)

  I hope this helps.

  Marked as helpful

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @dustinsoos @vanzasetia Hi! I read another article on the same website recently, and another positive point is that setting the width and height of the images is one way to use the loading="lazy" attribute to ensure the images load in accordance with their position in relation to the viewport of the device, which means it prevents all images from loading, and only shows those occupying the screen at the moment.

  Browser-level image lazy-loading for the web

  Please correct me if I'm wrong :) happy coding!

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @MelvinAguilar It is a nice article! Thank you for sharing, Melvin!

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

  • You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">QR Card Component</h1>

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS

  • Centering the element with position would make your element behave strangely on some mobile devices, "there's a chance the content will grow to overflow the parent". You can use flexbox or grid layout to center elements. You can read more about centering in CSS here.

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 320px or 20rem and remove width: 60%;

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding! 🎄

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted almost 2 years ago

  Hi there 👋:

  • We gladly welcome you to the Front end mentor community
  • You just completed a solution as per the design Congratulations..🙌
  • But, There's an report in accessibility which causes accessibility error

  RESOLVING THE ERROR

  • The div with class .card-container is meant to be a main element
  • Because using semantical elements to structure the HTML improves the accessibility for screen readers
  • So change the div into main element

  MESSAGE:

  • If my answer helps you then providing an upvote will be very helpfull
  • And don't forget to mark this comment as helpfull. If it helps to resolve your issues
  • I hope you learned a lot of stuffs during this project, Congrats Dustin

  GREETINGS:

  • Happy coding..🙌
  • Peace be upon you with god's mercy & blessings..✨

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card-container"> with the main tag and <p class="heading-1"> to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center .card-container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .card-container position absolute and it properties.

  Give .card-container a fixed max-width instead of a percentage width value for a more responsive content that wont require a media query.

  Hope am helpful. Happy coding

  0