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 Challenge

Udoh Julie 200

@Jey223

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'll love to know if the CSS was well written

Community feedback

Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hay ! Good Job Udoh

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

Keep up the good work!

Marked as helpful

0

Udoh Julie 200

@Jey223

Posted

@Crazimonk Thank you so much. Does that mean the heading tag can't be used outside a header? Since I don't have an available header tag.

1
Naveen Gumaste 10,460

@NaveenGumaste

Posted

@Jey223 No you can use bt.. for semantic tags it is imp

Marked as helpful

0
Rio Cantre 9,690

@RioCantre

Posted

Hello there! Good work with this project. Looking at your solution, I would suggest the following for you...

  • In the body rule set, remove all except for background-color: hsl(212, 45%, 89%);
  • Remove position: relative;, top: 100px; and bottom: 100px; in section and add margin: auto; and margin-top: 9rem;
  • Remove position: relative; in section > img, section > h2, and section > p. By removing the position, it will have a responsive design.
  • Wrap the whole content with main tag instead of section

Hope this helps and Keep it going!

Marked as helpful

0

Udoh Julie 200

@Jey223

Posted

@RioCantre Thank you so much. This makes my CSS shorter too.

1
Rio Cantre 9,690

@RioCantre

Posted

@Jey223 No worries! Glad I could help. Cheers!

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