Skip to content
Submitted about 1 year ago

html-css-qr-code-component

devguff•10
@devguff
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is my first frontend mentor solution. I really tried to make the solution to be as easy to change as possible using css variables. I'm not sure if I am using all the recommended best practices for things. For example, I think there should be some sort of css property for ensuring the screen width can never be less than the width of your component. Not really sure what this is right now but just trying to get used to flow of how to build this type of stuff.

What challenges did you encounter, and how did you overcome them?

Figuring out how to get the included attribution required me to ai search for a solution. I understand how it works but it feels like there may be a better way. Also the spacing around items was a bit tricky.

What specific areas of your project would you like help with?

Know what best practices I could be using that I am not. Want my solutions to be less hacky in the future.

Code

Please log in to post a comment

Log in

Community feedback

  • RobinsonGabriel•60
    @RobinsonGabriel

    Hi dev,

    I don't think it's a terrible crack at it at all really. Esp if you don't do this stuff a ton it can take time to adjust. Points for using variables as it will make life easier on larger sheets, and I forgot CSS even supported them until I did a few designs myself (we all learn at our own pace... mine's just a bit unique.)

    That said, what do you think is hackney in your design? Generally what's To answer the question around the component fitting the screen: you are probably thinking of working with a media query.

    https://www.w3schools.com/css/css3_mediaqueries.asp

    ^^short explanation of them. So for example: you might have your component set to a certain unit as your minimum, generally when it starts to mess around with the text orientation, pic size, etc.

    Hopefully this gives you something to chew over

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