Design comparison
Solution retrospective
This is my first time using Tailwind CSS and I'm happy with what I produced. What I would do differently next time is to try to get precise measurements with certain elements on padding, margin etc. I didn't have access to the Figma file so I didn't know what the measurements were. I would have converted the mockup screenshots into a Figma design.
What challenges did you encounter, and how did you overcome them?There was a learning curve with Tailwind. I didn't realize there were additional steps to install Tailwind. Also, I didn't know much of the syntax for styling certain element such as padding, hover etc. I overcame this learning curve my referencing this cheatsheet from Nerdcave. https://nerdcave.com/tailwind-cheat-sheet
Overall I can see why Tailwind is really popular. It saves a lot of time - I just need to get used to seeing styling on an html/js page
What specific areas of your project would you like help with?What's the difference between using App.css and index.css? I ended up putting the base styles on index.css but I didn't put anything on App.css.
Community feedback
- @grace-snowPosted 4 months ago
There are some issues with the markup on this that are really foundational. Rather than go through them all here, I’ll point you to an article I wrote about planning html that looks at this specific challenge: https://fedmentor.dev/posts/html-plan-product-preview/.
The only thing that’s less relevant now is that from what I understand screen readers now announce strike through text, so you may not need to add the screen reader only text any more about the old price. I need to check that then I’ll update the article.
I hope it helps anyway.
0@laura-nguyenPosted 4 months ago@grace-snow That article was a great read, thanks for sharing! There were a lot of concepts that I learned, such as the <picture> tag and the strike-through text.
0 - @rahatfarukPosted 4 months ago
Hey, the small and large design is pretty good. but on medium device, it's width becomes too much. you can use max-width on the card until it touches large screen. I'd be happy if you rate my work also :)
0@laura-nguyenPosted 4 months ago@rahatfaruk Thanks for your feedback, I added the max-width for the card just now :)
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