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

Newbie QR code component using CSS Grid

@nina1234567896

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 would like to know how to write cleaner code in CSS. Your feedbacks are much appreciated =).

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Replace

  • background: url(Projects/image-qr-code.png); with
  • background: url(../Projects/image-qr-code.png); to fix your image issue.

➨ Remove margins and paddings from .main as this will not dynamically center the card.

  • You are already using flex just add min-height:100vh to your .page and see the effect.

➨ Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>
  • For non-decorative images give meaningful and descriptive alt like alt= "QR code to Frontend Mentor website".

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

link.

I hope you find this helpful.

Happy coding😄

Marked as helpful

1

@nina1234567896

Posted

@NehalSahu8055 this is very helpful indeed! thankyou so much. I am rather confused by relative paths. Is there any way i can learn more about writing paths?

1
_nehal💎 6,710

@NehalSahu8055

Posted

@nina1234567896

Marked as helpful

1
_nehal💎 6,710

@NehalSahu8055

Posted

Also

  • After making the necessary changes generate a new screenshot

Marked as helpful

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