This was my first time playing around with grids in tailwind and I wasn't very familiar with them in general. I'm really glad I finally dove in and played with them when I created this component.
Latest solutions
React Cards with CSS Grid Layout
#reactSubmitted 3 months agoI'd like help making the layout more adaptable so that adding a new object to the data automatically creates and integrates a new card properly.
Four card feature section with React components
#reactSubmitted 3 months agoI’d like help with better organizing React components and planning the project structure in advance to avoid confusion during the implementation. I also would like help with placing the cards in the divs after using map(), or finding another approach for the layout of the cards.
Responsive form using CSS Grid and Javascript
Submitted about 1 year agoI'm always concerned, wondering if a professional developer would have approached certain tasks the same way I did.
Latest comments
- P@ecarlsteWhat are you most proud of, and what would you do differently next time?#next#react#tailwind-css#typescript@Leonardolvq
Nice work on the project! The modularity of the code, especially with the separate card component, is a great touch. I see you used TypeScript and Tailwind CSS, which is impressive – though I’m not super familiar with them, I can tell they add a lot of structure.
Some small details weren’t fully followed, but it’s clear you know how to implement changes. By the way, I noticed there are documents from other projects in the repo.
- @OTF31@Leonardolvq
The code is clean and modular, especially with CustomCard, which keeps things reusable. Just a few typos to fix. Looks like NativeBaseProvider is handling the styling and theme, but I’m not too familiar with it yet.
- @Bloxer58What are you most proud of, and what would you do differently next time?
Responsive layouts.
What challenges did you encounter, and how did you overcome them?Creating different layouts for mobiles and desktop. At first I had problems with positionig different divs. But after learning responsive layouts: display: flex etc. I overcame this problem.
@LeonardolvqHey,
Thanks for introducing me to the <picture> element! I didn’t know about it, and it’s a great way to handle responsive images.
The rest of the code looks solid! Just a heads up about the nested CSS—if it's not SCSS, it won’t work in regular CSS. You might want to either remove the nesting or set up Sass.
Everything else is great though, nice job! 👍
- @antonbest444@Leonardolvq
Good clarity! Well done!
- @teixeirabrennoWhat are you most proud of, and what would you do differently next time?
Managed to finish the project in less time than usual.
What challenges did you encounter, and how did you overcome them?I couldn't find a way to make the pointer cursor black.
What specific areas of your project would you like help with?I read about how to make the pointer cursor black and found out that there's no way to change the color of the cursor through CSS directly. Instead, I would need to get an URL to a black pointer cursor and then implement it on the CSS. I couldn't find a website to do this though, so any recommendations would be great.
@LeonardolvqTo customize your cursor, you need to get an image. You can find cursor images on various websites like Flaticon, The Noun Project, and many others. Numerous websites reference these sources.
Ex: cursor: url('./images/custom-cursor.png'), auto;
Marked as helpful - @AneWeberWhat are you most proud of, and what would you do differently next time?
I updated my name, avatar and date according to my informations. It was a great project to start.
@LeonardolvqUsing relative units like 'em', 'rem', or '%' instead of 'px' is a great way to make your project more responsive. These units adjust based on the user's settings and screen size, ensuring your design scales appropriately across devices. Keep up the good work! 👌👌
Marked as helpful