Skip to content
Submitted 9 months ago

tailwindcss

mbalali63ā€¢150
@mbalali63
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 have just done this project two times, but you will see the first try here. The first time I did it using tailwind-css and the second time with vanilla CSS. That was really interesting for me that I did it for the second time much faster and better. It reveals for me the practices and struggles in these days are working.

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

Making it responsive was so challenging for me. But I resolve it using firefox Responsive Design Mode. I changed the screen size and check where the design was corrupted. then I add a @media for that size.

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

Al tough I think I resolved my problem with responsiveness, I am still sure that I am not working like professionals. I do like to know what techniques should I learn to do responsive design good.

Community feedback

  • Marcos Travagliniā€¢4,840
    @BlackpachamamePosted 9 months ago

    Greetings! you have done a great job šŸ˜Ž

    šŸ“Œ Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">
    • Should be h1 instead of h2
    • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:
    body {
    margin: 0;
    line-height: inherit;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px; /* Separate the main from the footer */
}
    • The background color is not the same as the original design, nor the title of the card. You should check that, unless you changed it on your own
    Marked as helpful
    0
    mbalali63ā€¢150
    @mbalali63Posted 9 months ago

    @Blackpachamame Thank you for the valuable comments. I just tried fixed them all.

    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