Skip to content
Submitted 6 months ago

QR Code box using CSS and HTML

nicoleesposito•10
@nicoleesposito
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

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

I'm proud of how it came to be like the image that was given to follow and that everything came to be functional. Next time I would like to organize my CSS a bit differently.

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

Being new to coding, I didn't know how to outsource a font. It was easier than I thought it would be and I found the answer with a quick search. It was also challenging to stack the text and the image but I was able to fix it with flex-wrap.

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

I'm still not sure if I am using div classes correctly, it's been a bit tricky for me to grasp fully so I would like to know if I did something that wasn't necessary. I'm also unsure of whether I placed the Google Fonts code in the right area of my HTML or if it was supposed to be organized differently.

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! ✌️

    • For better class names you can look up BEM notation, it's one of the most popular naming conventions in webdev.

    • <div> -s mostly used for separating elements based on the desired layout. Giving them class names like Text is not the best idea, try to make it more specific, like card-text

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    1
    nicoleesposito•10
    @nicoleespositoPosted 6 months ago

    @kodan96 I just took a look at BEM notation and was able to pick up some new information, thank you!

    1
  • Olga•190
    @cvtqxPosted 6 months ago

    Great work! It looks very close to the original design.

    As far as naming classes, the convention is to use all lower case (so no need to capitalize or using all caps with classes). Here is a good article I found that helps to understand the principle: https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/

    Marked as helpful
    0
    nicoleesposito•10
    @nicoleespositoPosted 6 months ago

    @cvtqx The article you linked was extremely useful, I appreciate the source and feedback! :)

    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