Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Qr Code Component with tailwindcss

mofada 310

@mofada

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • 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 am learning to use tailwind css. This is also my first time to challenge the frontendmentor platform. I am very satisfied with my restoration level. I think it is 90%.

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

I have two questions:

  • Question 1: How to write box-shadow in tailwindcss better? I was lazy here and used the existing shadow-2xl.

  • Question 2: I can't write hsl color in tailwindcss. I converted it to RGB format and wrote it.

Community feedback

@MesrouaDjamel

Posted

  • The solution include Sematic Html like h2, img and p tags
  • yes it is accessible and the improvement we could be made for me it's using a gap instead using a padding
  • yes the layout look good on a range of screen sizes -yes the code well-structured and readable
  • there are some differences between the solution and the design, especially the backgrounds

Marked as helpful

0

mofada 310

@mofada

Posted

@MesrouaDjamel Do you mean using gap instead of pagging or margin? At the beginning of development, I considered using gap, but the gap between each element is different, so I used margin-top.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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