Skip to content
Submitted over 1 year ago

First Project Ever - QR Code Using Basic HTML and CSS

raelynn-defalco•10
@raelynn-defalco
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

Specifically for sizing and positioning the divs, is there a better, best-practice way I could have written those lines of code?

This was my very first project that a tutorial wasn't telling me what to do step-by-step. My biggest challenge was figuring out the best-practice way to structure the CSS. I got the design looking the way I want, but I'm not sure if I did it in the best way possible. Please note, there is not responsiveness in this code as I have not gotten to that part in my lessons yet. Optimization is on the way!

Community feedback

  • ohuttar•160
    @ohuttarPosted over 1 year ago

    Hello, I hope I can give some helpful comments.

    I think a lot of your positioning issues could have been solved by placing a padding and margin on your "content-wrapper". You could use pixels but I think it would be better for your future to switch to rem. 1rem=16px. So on your content-wrapper you would write: "margin: 1rem; padding: 1rem;" and you could delete all of the margins and widths you placed on the contents within the card, and delete the "width: 90%" on your image.

    From there add margin/padding to your description only as needed.This should make your styles easier to understand and adjust.

    The last tip I'd give is to center your card using grid. On your body I would delete the width, have your margin just say "0", and then write: "min-height: 100vh; display: grid; place-items: center;" ^The above code is a very common way of centering things.

    I think you did a really great job and it looks very close to the original!

    Marked as helpful
    1
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there ! 👋 Congratulations you finished the QR code component...🎉

    • some suggestions for you improve your code

    Html 🏷️:

    • for Accessibility reports you using the and div tag to wrap the whole html code and put attribute role="main" is correct way 🎯 and using the header tag those all are problem to occur the Accessibility reports for example...
    <body>
<div class="container" role="main">

//Whole html code

<h1> </h1>
<h2> </h2>
<h3> </h3>
//by ordering using the header tag

</div>
</body>
    • I Hope it's useful for you and wating for your next project ❤️
    • Happy Coding 😃
    Marked as helpful
    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