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

#itcss
Surajit Shawβ€’ 10

@SURAJITSHAW

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


Hey everyone I'm very new to these challenges, so open to any kind of suggestions to make my HTML & CSS skills more polished.

Community feedback

Ahmed Bayoumiβ€’ 6,800

@Bayoumi-dev

Posted

Hey Surajit, Congratulations on completing this challenge... It looks good!

My suggestions:

  • Document should have one main landmark, Contain the component with <main>.
<main>
   <div class="card">
      //...
   </div >
</main>
  • Page should contain a level-one heading, Change h3 to h1, You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

  • Use Font-Family: Outfit as recommended in this challenge to get it looking as close to the design as possible.

style-guide.md

Hope this is useful to you... Keep codingπŸ‘

Marked as helpful

1

Surajit Shawβ€’ 10

@SURAJITSHAW

Posted

@Bayoumi-dev Thanks for the suggestions man. You guys are so supportive. I'm about to implement your suggestions to fix the accessibility issues. Thanks again for your time to look at this and give genuine suggestions ✌️✌️

0
Abdulβ€’ 8,560

@Samadeen

Posted

Hey!! Cheers πŸ₯‚ on completing this challenge.. .

Lets firstly work on your accessibility issues.

  • Document should have on main landmark basically means your html should be structured more semantically and the correct format should be your <header>......</header> followed by your <main>......</main> and lastly your <footer>....</footer> hence you should use <main class="card"> instead of <div class="card">.
  • Page should contain a level-one heading basically means your html should have a h1 it aid navigation hence <h3>Improve your front-end skills by building projects</h3> should be <h1>Improve your front-end skills by building projects</h1> and you should also go down orderly when you are using the headings h1 down to h2 down to h3 and so on.

This should fix most of your accessibility issues.

. Regardless you did amazing... hope you find this helpful... Happy coding!!!

Marked as helpful

1

Surajit Shawβ€’ 10

@SURAJITSHAW

Posted

@Samadeen thanks man, I couldn't figure out what to do to fix the accessibility issues. You're the savior πŸ™ŒπŸ˜Š

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