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

@JassonJr

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


I'm still lacking with the skills to build a proper responsive page, CSS is not my strongest, but I'm definitely getting better at it with each project.

I don't have any questions for now, but I'll continue on the other projects from this plataform since they'll help me improve, maybe I'll have some questions that will need answers. :)

Community feedback

Els G 180

@elsgoossens

Posted

Keep up the good work. It is though but it does get easier. I struggled at first, still ain't perfect but it goes way smooter. I took the free W3schools courses on accessibility and CSS. My notion on image settings improved doing that and I understand accessibility better. It helped me forward.

Some feedback on the warnings of solution:

  • A title is mandatory, it is used to display in the browser tab or in search results, so in the header section add <title>Any title you like</title>
  • you need to add a language (it is need for people with screenreaders so english is pronounced as english and french as french, etc) So add the lang attribute like this <html lang="en">
  • also for accessibility: you need one main landmark, so add <main> and </main> around main content
  • All images need an alt tag, used by screenreaders, if there is nothing there the screenreader will start reading the pathname, which is really annoying for people with screenreader. Giving an empty alt text tells the screenreader to skip this. So either it is a usefull image and you give it an alt description, either it is pure for decoration then you add alt=""

Happy coding ! Els

Marked as helpful

0

@JassonJr

Posted

@elsgoossens Thank you very much for this reply, these are some advices that I've never got anywhere else, it'll be very helpful.

I'll try to improve this very project with this tips and head on to the next!

0

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