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

Frontend Mentor - QR code component solution using HTML and CSS

Hadi Farbakhshβ€’ 40

@HadiFarbakhsh

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


Hi, This is my first solution to the challenge, I'd be happy to have your comments on the code and let me know if you have a better solution. Thankful

Community feedback

@0xabdul

Posted

Hello Developer well congratulations on successfully completing the QR code component

  • A Some suggestions for improve your code
  • In Html πŸ“ƒ :
  • LANDMARK πŸš€
  • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
  • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
  • Note This Elements are don't sikp
  • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
  • non- semantic elements : <div> , <span> ect ...
  • for easy way to clear the Accessibility reports using non semantic elements Ex :
<body>
<div class="container" role="main">
/html code goes here : πŸ“ƒ
</div>
</body>
  • Or
  • using semantic elements
  • Ex :
<header>
should be put heading or logoπŸ“Έ
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents πŸ“ƒ
</main>
<footer>
Β©copy right  hereπŸ“
</footer>
  • Happy Coding Developer
0

Hadi Farbakhshβ€’ 40

@HadiFarbakhsh

Posted

@0xAbdul I will definitely consider it Thank you

0
Munsif Aliβ€’ 200

@Munsif-Ali

Posted

although your design is looking good i would give you one suggestion that is your repository structure is not looking good i mean create a separate folder for images and place all the images in that folder and create a folder for CSS and place the CSS files in that folder

0

Hadi Farbakhshβ€’ 40

@HadiFarbakhsh

Posted

@Munsif-Ali Thank you for your suggestion

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