QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]
Design comparison
Solution retrospective
👾 Hello, Frontend Mentor community,
This is my solution for the QR Code Component.
- Semantic Markup for Better Accessibility.
- BEM Naming convention was used to handle CSS.
- Tried my best to build as closer to the design as possible.
- Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
👨🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice!
Community feedback
- @Mar1362Posted about 2 years ago
hi, hope you are doing well! I really appreciate the way you did the challenge as well in the design than the way you coded it. I found it clear but i think that in your html code you may use <main> tag instead of <div class="container"> and i don't understant why you put 120vw for your background-size and 880% at the media one. Good continuation!
Marked as helpful2@0xabdulkhaliqPosted about 2 years ago@Mar1362
REPLY:
- Thanks for leaving a comment which helps to improve my code, I' fixed the issue.
- Now check the project once again to explore the difference between old one.
0@Mar1362Posted about 2 years ago@0xAbdulKhalid yes i saw the code and it looks clean for me but still something in the html one, instead of doing this:
<div class="container" role="main"> ... </div>
you may do the following:
<main> ... </main>
i didn't know about the difference since the visual result is the same and i did the same in my older codes but it is highly recommended to get the habbit of trying to use the right html segmentation in order to be comfortable with in more serious project later. I think you do not need to change anything in your html right now since it will may cause some changes in your css too (and i am really lazy :)) but you have better consider them in your next projects. checkout this link
Marked as helpful1@0xabdulkhaliqPosted about 2 years ago@Mar1362 Sure brother hereafter i will try to use semantic tags..:-)
1@jmdonizettiPosted about 2 years ago@0xAbdulKhalid Ficou muito bom, fundo ficou perfeito parabens
2@0xabdulkhaliqPosted about 2 years ago@jmdonizetti
- commenting in english will help every people to understand brother
- Nice to hear your feedback, Thanks brother..
0 - @DumtePosted over 1 year ago
Please take a look at my solution. I want you to suggest to me how to improve on it.
1@0xabdulkhaliqPosted over 1 year agoThanks for reaching out @Dumte, I'll take my time to review the code and will try to give valuable feedback.
1 - @ASEM-TOPPosted about 2 years ago
Abdul Khalid... you are awesome.!.!.!.!.!.!.!.!.!.!.!.!.!.
1@0xabdulkhaliqPosted about 2 years ago@ASEM-TOP, Thanks a lot for your appreciation dude,
0@avaChristinePosted about 2 years ago@ASEM-TOP i'm just wondered by looking his solutions by visiting his profile they all are awesome
0
Please log in to post a comment
Log in with GitHubJoin 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