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-component card with css-animation

@Legrito

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@kanuos

Posted

Hi Lesya, congrats on your first submission. The UI structure looks nice, however I've few questions/suggestions -

  1. Why is the card heading replaced by random lorem ipsum texts?
  2. Same goes with the card description
  3. Imagine a scenario - you visited a website where you are to scan a QR code (preferably by a phone camera). Would you like to hover the card before you can scan? There's no need for this effect. It is counter productive as it beats the purpose of a Quick Response card. The card rotation using perspective property is cool but kinda goes against the UX of this app.

As far as the semantic HTML and BEM naming conventions are concerned - you aced it! At a quick glance, I thought it was perfect. Keep up the good work :)

Marked as helpful

2

@Legrito

Posted

@kanuos thanks for considering my solution and for so meaningful feedback! 1&2 - I thought only styles matters, not the content, as I don't have an access to figma file. 3 - Agree with your concerns, I redo the concept, but still want to add animation, now with additional space for extra cta or description. Overall, thanks a lot:)

1
Loai Esam 670

@LoaiEsam37

Posted

you have to put your <div class="qr__wrap"> tag inside a <main> tag so that it becomes easier for screen readers to know where is the main content and you can also use something like <nav> , <footer> and <sidebar> tags for the same reason.

Marked as helpful

0

@Legrito

Posted

@LoaiEsam37 thank you, for considering my solution and for your feedback! Agree, it's better to use semantic tags to increase accessibility:)

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