Skip to content
Submitted 4 days ago

QR Component | HTML & CSS

P
mci3x•20
@mci3x
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?

Similarity to original, I guess

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

How can I simplify my code while adhering to best practices?

Community feedback

  • Paulo Wells•470
    @wellsprPosted 4 days ago

    This is a nice solution, very similar to the original. The HTML code is clean, uses semantic tags, and is accessible and well organized. Also, the CSS makes good use of flexbox.

    I have a few points to help improve your solution. First, note that in the original design, you have different slate shades for the text colors, which are specified in the color palette in the style-guide (you can, in this case, refer directly to the Figma design).

    Also, I always use Lighthouse to test solutions, and your solution is a meta description away from getting a full 100% score there!

    I hope this feedback will be useful, keep up with the good work, Happy coding!

    Marked as helpful
    1
    P
    mci3x•20
    @mci3xPosted 3 days ago

    @wellspr

    For some reason I totally ignored slate shades in both style-guide and Figma. I was wondering why font in my solution is much darker than design screenshot. Now I get it :)

    Also great tip on Lighthouse test. I'll be running it on my projects from now on.

    Meta added and colors fixed, thank you Paulo!

    1
  • P
    Stevan-Dev•600
    @Stv-devlPosted 4 days ago

    Hi, good work. The only minor thing I noticed in your HTML is that you don't really need to include a <div> before the <section>. I wish you the best of luck with your learning

    1
    P
    mci3x•20
    @mci3xPosted 3 days ago

    @Stv-devl Thank you Stevan. I actually contemplated removing that div but decided against it. Mostly because I thought that setting flex on <body> is not a good practice

    1
    P
    Stevan-Dev•600
    @Stv-devlPosted 3 days ago

    @mci3x you can imagine something like :

    . you write your flex center in <Section>

    . create a <div class"card-wrapper"> and write Css you have actualy in section

    Write your flex center in the body is ok also

    Marked as helpful
    1

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