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 component made using HTML and CSS

@ahmedraza032

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

NG 40

@nguernse

Posted

Looks good as is. Great job!

For future consideration, you might refactor the style.css file to utilize css variables. This would benefit in the future, if the design system changes or you add more classes with similar attributes, allowing you to edit a single variable versus everywhere the same value is being used.

For example, working with the design system colors:

:root {
    --color-white: hsl(0, 0%, 100%);
    --color-slate-300: hsl(212, 45%, 89%);
    --color-slate-500: hsl(216, 15%, 48%);
    --color-slate-900: hsl(218, 44%, 22%);
}

So then whenever you use the dark grey color you can do:

p {
    color: var(--color-slate-900);
}

.text-content {
    color: var(--color-slate-900);
}

Marked as helpful

0

@ahmedraza032

Posted

@nguernse Thank you so much for the advice. I'll definitely consider it in my future projects

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