Skip to content
Submitted about 2 years ago

qr-code-component with hover effects

Aksinya🔮•10
@Alice-in-Matrix
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi!

I used css variables for colors and font, but I would separate them to another css file.

For example: global.css file, that contain only css variables in root selector.

Is there best practicies for this?

Community feedback

  • darryncodes•6,370
    @darryncodesPosted about 2 years ago

    Hi Aksinya,

    Really nice work on this one, good solution.

    I think your approach to CSS is completely fine on this size project. When your projects grow you could consider BEM to make building modular styles easier coupled with SASS to create multiple css files (partials) that relate to each component and compile to one style sheet.

    Also you should embed some best practices resolving your accessibility report. Your .container <div> could be a <main> tag and your .card-title <p> could be a <h1>. Semantic html is really important.

    I hope that helps!

    Marked as helpful
    0
    Aksinya🔮•10
    @Alice-in-MatrixPosted about 2 years ago

    @darryncodes, thanks for your advice!

    I will definitely consider practising BEM with SASS in later projects.

    0

Please log in to post a comment

Log in with GitHub

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