Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
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

Submitted

QR Code Component 🎯 [ SEMANTIC MARKUP + VANILLA CSS + BEM ]

#accessibility#bem

@0xabdulkhalid

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


👾 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

@Mar1362

Posted

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 helpful

2

@0xabdulkhalid

Posted

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

@Mar1362

Posted

@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 helpful

1

@0xabdulkhalid

Posted

@Mar1362 Sure brother hereafter i will try to use semantic tags..:-)

1

@0xabdulkhalid

Posted

@jmdonizetti

  • commenting in english will help every people to understand brother
  • Nice to hear your feedback, Thanks brother..
0

@Dumte

Posted

Please take a look at my solution. I want you to suggest to me how to improve on it.

1

@0xabdulkhalid

Posted

Thanks for reaching out @Dumte, I'll take my time to review the code and will try to give valuable feedback.

1
ASEM-TOP 20

@ASEM-TOP

Posted

Abdul Khalid... you are awesome.!.!.!.!.!.!.!.!.!.!.!.!.!.

1

@0xabdulkhalid

Posted

@ASEM-TOP

Thanks a lot for your appreciation dude,

I welcome you to explore my projects through my GitHub account..✨

0

@avaChristine

Posted

@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 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