Submitted over 1 year ago

QR Code using HTML and CSS

Nurbek Makhmudov•30

@NurbekMakhmudov

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Rate it!

Any tips are important to me.

Community feedback

hitmorecode•6,680

@hitmorecodePosted over 1 year ago

Nice good effort. I have a few tips

You used margin on the card to place it in the middle of the page. Try to avoid doing this if not necessary. Use flexbox or css grind instead.
Make it a habit adding min-height: 100vh; on the body, this will make it more responsive.
You forgot to add the font-family, you can import this from google fonts. Read the style document to see what font family to use.

/* make it a habit using css reset. this is just a simple css reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: hsl(0, 0%, 100%);
    --light-gray: hsl(212, 45%, 89%);
    --grayish-blue: hsl(220, 15%, 55%);
    --dark-blue: hsl(218, 44%, 22%);
}

body{
    background-color: var(--light-gray);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
.card{
/*     margin-left: auto; */
/*     margin-right: auto; */
/*     margin-top: 10%; */
    padding: 20px;
    width: 290px; /* the width of the card cannot be the same as the width of the image 250px */
    text-align: center;
    background-color: var(--white);
    border-radius: 25px;
}

If you are not familiar with flexbox or css grid, take your time to start learning it. This will be very helpful in the long run.

Colt Steele - The Ultimate CSS3 Flexbox Tutorial

When creating your html structure, make a habit of doing it like this

<body>
  <main>
    /* everything goes in here */
  </main>
</body>

Marked as helpful

Nurbek Makhmudov•30

@NurbekMakhmudovPosted over 1 year ago

@hitmorecode

Thank you very much for your advice

Please log in to post a comment

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