Skip to content
Submitted 8 months ago

Tailwind css and semantic html was used.

tailwind-css
Ashwini Guli•10
@aguli-me
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'm most proud of the attention to detail I've put in replicating the design. Next time, I would first fetch a list of css properties first before starting to code.

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

Two challenges -

  1. Figma - Learning to import the figma file and using the software to fetch the css properties without the dev mode was a bit challenging.
  2. Tailwind - Doing the customisations for the theme in Tailwind was a bit challenged, required me to comb through the documentation of Tailwind.
What specific areas of your project would you like help with?

I need feedback on the semantic html used and responsive design of the project.

Code

Please log in to post a comment

Log in

Community feedback

  • Asilcan Toper•2,960
    @KapteynUniverse

    Hey Ashwini, nice job.

    Good using of main landmark. Sections are maybe unnecessary because sections should always have a heading, with very few exceptions. You can use just div, no need to wrap img at all.

    Image alt texts needs to be meaningful, unless decorative. Instead of an "image with qr code" you can write something like "QR code to Frontendmentor.io" so screen readers can understand the context.

    Using fixed values like w-80 will cause responsiveness issues in the future, use max-width instead.

    Rest looks good. Maybe first p tag can be changed to a h2, not completely sure. If you ask why h2 and not h1, this component is for to use in a web page and every page should only have one h1. This is a simple card, it would never be used to serve the main heading on a page, so h2 or h3 kinda ok.

    Marked as helpful
  • Rupak Mukherjee•1,370
    @hannibal1631

    This looks good and is responsive for the most part.

    About the figma design thing, you don't have to fetch the css properties from their. Just use your own vision to bring it to life. Cause that'll help you build an understanding of how styles work.

    And while using tailwind, always think about big screen. because as you might know, by default it's phone responsive. So while styling, use sm: and md: to make it big screen responsive and then provide the classes for phone part(which in some cases is not necessary).

    I hope this'll give you some clearance about how should you use tailwind. If you would like to work on some projects together in future let's connect. Happy Coding!!!

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