Submitted 7 months ago

tailwindcss

mbalali63• 150

@mbalali63

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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,920

@Blackpachamame

Posted 7 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

mbalali63• 150

@mbalali63

Posted 7 months ago

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

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