Skip to content
Submitted 8 months ago

QR code component using Tailwind CSS

Quinn Huang•20
@quinnstumbles
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 am proud of:

  • Setting up Tailwind CSS properly for development and build
  • Learning to use Figma to analyze spacing
  • Troubleshooting build and deployment issue with Tailwind CSS

Next time I would like to use ESLint and Prettier-Tailwind tools for better consistency

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

I had trouble when building and deploying the app. I lost all the styling that I did via tailwind-css and I was able to look up common issue and pinpoint the problem in tailwind config file. Then, I was able to experiment with the file path in the content line.

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

I would like suggestions and feedback on Semantic HTML and other tools and processes.

Community feedback

  • Grace•31,090
    @grace-snowPosted 8 months ago

    Hi, I hope this feedback is helpful:

    1. You have an extra div wrapping main that can be removed.
    2. The component itself should not use the main landmark, that should wrap around it. Use a div inside main for the card component classes.
    3. The component must not have a height (essential change!). This is really important to grasp. Let the browser do it's job and decide what height is needed based on the content inside.
    4. The component should not have a width either. Change this to min-width and make sure it is in rem not px so it can scale correctly for users who have a different default text size.
    5. The alt description needs improvement. It needs to say what this image is (QR code) and where it goes (to FrontendMentor.io).
    6. Remove all articles from the component. That is not how to use them at all. The whole component could be an article or section if you want but there is no real benefit here to doing that, and it's definitely not correct to use articles inside the component.
    7. The image and the text actually don't need wrapping in any extra elements at all.
    8. Font size must never be in px. Extremely important.
    9. The card itself should have padding. The child elements within it should have margin. Make sure you understand the difference (there is a post about this on FEDmentor.dev too).
    10. Remember this is a single card component and think about the context of where/how this would be used. This would never act as a page title, which tells you it should not have a h1. Use a h2 instead.
    11. Make sure the component can't hit screen edges. Either give the body a little padding on this or give the component a little margin (on all sides).
    Marked as helpful
    1
    Quinn Huang•20
    @quinnstumblesPosted 8 months ago

    @grace-snow

    Thank you so much for taking the time to give such a detailed response! I was really struggling with the unknown unknown aspects and your response was very enlightening. The article you linked is also extremely helpful and I think it has already helped me. I will be making changes to this challenge to improve it.

    Thank you again and you're a rockstar!

    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