Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

@samsonsham

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 am not sure if I still need to apply any media query for responsive design cos I find it looks good enough in mobile phone.

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

hello my dear friend ♥ you did good and clean on this challenge and here some improvements :

  • first, it's very good to have more structured file and folders when you use sass i know this is a little component but having this habit from little projects make you have cleaner file structure in bigger projects and also you can check this links structuring your sass, 2 way to structure sass

  • second, try to learn some naming convention to have more structured code and more readable and maintainable code, for start BEM (block, element, modifier) it's good BEM docs

  • third, always use <main> tag for both accessibility and semantically and also you can read this article to what is the purpose of main tag

Marked as helpful

1

@samsonsham

Posted

@CyrusKabir Thank you so much for your advise! This is helpful and I have learnt a lot from the articles you recommended. I have modified my code and found it more readable and re-usable. One thing I am wondering, I added class to an element just to make the element more readable and descriptive, but maybe there is no css associate with that class. is it a good practice? Usually we assume there is some style behind a class. I am not sure this assumption is correct or not.

1
CyrusKabir 1,885

@CyrusKabir

Posted

@samsonsham your welcome, i am glad you learn new things really ♥ and for your new question and again another link :) hope this help you: link

1
darthTh0t 50

@darthTh0t

Posted

Hi, I am a fellow newbie developer. And I must say it looks amazing. Maybe some mistakes in the code have escaped my eyes, but it looks fine to me on both desktop and phone. All the best for future challenges.

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