Skip to content
Submitted about 2 months ago

QR Code Component using Tailwind css

Fauzan Reza•180
@codebyfauzan
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?

This is my first project using tailwind css, and happy with the result

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

I don't know the best practice of project structure using tailwind css, so I just using 2 folder which are public and src folder

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

I wanted to know if we just using tailwind css without any bundler library like webpack or vite what is the best project structure for that. Thanks!

Community feedback

  • geomydas•1,380
    @geomydasPosted about 2 months ago

    Hi @codebyfauzan, your code seems good but it has few issues.

    My Suggestions and Feedback

    1. Make the font names inside your tailwind config all lowercase. font-outfit is more consistent than font-Outfit.
    2. Never set font-related properties such as letter-spacing, font-size, line-height in px and instead set them in rem or em. See why
    3. Use the fonts provided by the design to match it better.
    4. Set a main landmark. Every site should have atleast 1 <main> tag according to the WCAG guidelines. Replace the first div tag with a main tag instead
    5. Remove the second div tag and instead apply the styles directly on the elements themselves to make the HTML a bit cleaner

    That's all. Have a nice day and have fun coding!

    You can use Parcel for this but it doesn't really matter which you choose. I use Parcel as it suits my needs since I only need to minify the files and I don't want to do much config

    Marked as helpful
    1
    Fauzan Reza•180
    @codebyfauzanPosted about 2 months ago

    @geomydas Thanks, Really appreciate this type of feedback.

    Also have a good day!

    0

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