Skip to content
Submitted 9 months ago

QR code component using HTML and CSS only

Mihai Chirilov•140
@MihaiChirilov
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 am proud to have managed to complete this small project in my first try. Next time I will try deploying the code to a different hosting provider.

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

I have not encountered any serious challenges as this is a simple project. I had small issues with the correct css properties. I have overcome these by looking up on the internet the correct usage of those CSS properties.

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

I do not need help with this project.

Community feedback

  • Anastasia Ermolova•230
    @ankkielPosted 9 months ago

    Hello, @MihaiChirilov!

    Your project looks great!

    I have just some suggestion:

    • use margin: 0 for body to reset indents
    • use flexbox for centering qr-code
        display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;

    I hope this is helpful!

    Other than that, great job!

    Marked as helpful
    0
    Mihai Chirilov•140
    @MihaiChirilovPosted 9 months ago

    @ankkiel I have updated the source code in my css file. I have found a mistake there. I have used margin: 0 for the body as you have suggested but instead of body I have used .body (as if body was a class and not a HTML tag), so that my margin: 0 was valid only for the class "body" which was never used. I have fixed the mistake by removing the "." in front of the body and now there are no more white top and left margins. Thank you for your suggestion that led me to find a mistake in my css file.

    0
  • Mihai Chirilov•140
    @MihaiChirilovPosted 9 months ago

    Hello Anastasia, Thank you very much for your positive and constructive feedback. I will be using flexbox in my next project. Thank you again! Michael

    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