html/css/media query

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.

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! 🎄

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..✨

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