Skip to content
Submitted about 1 year ago

QR code component with tailwindcss

tailwind-css, node
P
Stefan Vetsch•140
@vstm
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think it's a somewhat clean tailwindcss solution, I did use arbitrary values only once (for the width of the component).

What would I do better

I also did not take the time (for now) to add linting or automated code-formatting. It's a small project so I think it's ok but I know there are certain rules on how to

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

I actually had trouble opening the figma design since there is not figma app for linux, so you have to use the web-interface and it took me a couple of minutes to find the import function.

What specific areas of your project would you like help with?
  • There is no actual css to review (the input.css contains only the tailwind directives), the whole code is in the index.html file and in the tailwind.config.js
  • Is this actually "good" tailwindcss?
  • Did I make good use of the semantic HTML elements
  • I used an arbitrary value for the size of the QR code component ( the w-[320px] ) and I set the with of the QR code image to 100% which then results in the 288px size of the image like in the figma/design. Is there maybe a better approach?
Code

Please log in to post a comment

Log in

Community feedback

  • Alex•3,130
    @Alex-Archer-I

    Hi there!

    Actually it is possible to review your css via the dev console =)

    You did right thing with img by setting it's width to 100%, but as for card it's better to set max-width for it instead the hardcode one. Maybe it is no so important here (I doubt that screens less than 320px is a big thing, unless we talking about Apple Watch), but it is good practice in general.

    Almost that could be said about height of the body tag. Use min-height instead. It'll prevent overflow if the content will be larger than the screen.

    And yeah, you used correct semantic tags, but I can suggest you to reduce them a bit =) For such simple project you can get rid of the section and div, and use main tag as a container with img, h2 (or h1) and p.

    Also you are already turn main tag in the flex, so you can use gap property to create spaces between inner elements. It's a bit easier than with margins (but can create only equal spaces).

    So, congrats with your first challenge, you did great =)

    Good luck and feel free to ask anything if need (I love parentheses too, by the by)

    Marked as helpful

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