Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code component (HTML, CSS)

@Robert-Lukasz-Ksiazek

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. What do you think about semantics in my html?
  2. What do you think about my CSS? Do I approach this correctly?

Community feedback

Dreamleaf 230

@Dreamleaf

Posted

Just a small thing, but in the QR code alt text, you could be more descriptive and say where the user would be taken. So like, alt="QR code to frontendmentor.io".

When a screen reader uses the alt text it's helpful for the user to know the function of the image. If an image is purely decorative, then leave alt text blank, this will be skipped, but be as helpful las possible for 'functional' images.

Hope this helps!

Marked as helpful

1

@Robert-Lukasz-Ksiazek

Posted

@Dreamleaf Thank you so much for your valuable input.

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello Robert!

Your project looks great!

About your questions:

What do you think about semantics in my html?

  • Your HTML is good. I'd just use the tag main instead of the tag section in this case. We just have one element on the screen, and since it's the main element, it makes more sense to use main in this case.

What do you think about my CSS? Do I approach this correctly?

  • Very good CSS structure too. I just suggest you to use variables. Especially for colors and fonts. I know this project is small, so you don't have to write many lines of code, but it's because of this same reason I think it's a good opportunity to practice their use.

I hope it helps!

Other than those little details, you did an excelent job!

Marked as helpful

1

@Robert-Lukasz-Ksiazek

Posted

@danielmrz-dev thank you for your time and expertise.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord