Submitted about 1 month ago

Four card feature section solution with ❤️ react & tw ❤️

Rastislav Hepner• 180

@raswonders

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of finishing some grid theory before starting challenge.

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

Applying different bg color on card stripes was little awkward on dynamically created elements, but I've managed with use of array of predefined tw classes. Also realizing that i can center grid elements easier with odd: tw modifier was cool.

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

Anything really. Something is inaccessible? Weird or clunky? Let me know. Thx 🙏

Community feedback

Ian Parker• 180

@i-prkr

Posted 23 days ago

This was a great solution to look at, and interesting to see the use of React and Tailwind for it! The only suggestion that came to mind was that while doing this solution I discovered the element <hgroup> and found this a good use case for it. Thanks for the solution!

Rastislav Hepner• 180

@raswonders

Posted 22 days ago

@i-prkr

Hi thank you for bringing hgroup to my attention, wasn't really aware of it. I'm fascinated by the fact this tag became obsolete and then came back to standard. I'm not sure if it's widely used but sounds like a nice wrapper for title and tagline.

Vutlhari Shiburi• 100

@Exterminator737

Posted about 1 month ago

Good

Rastislav Hepner• 180

@raswonders

Posted about 1 month ago

@Exterminator737 what should i do to make it great? 🙃

Vutlhari Shiburi• 100

@Exterminator737

Posted 30 days ago

@raswonders I think you should just swap the calculator and karma cards around, then it'll be perfect 👌

Rastislav Hepner• 180

@raswonders

Posted 29 days ago

@Exterminator737

Thank you good sir I fixed it.

Please log in to post a comment

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