@cat-script
Latest solutions
Article preview component
Submitted 10 days agoAccessibility Improvements (a11y): I’d appreciate guidance on making the share popup more accessible — for example, ensuring keyboard navigation, focus trapping, ARIA roles, and screen reader compatibility.
Transition and Animation Enhancements: While I used basic Alpine.js transitions (x-transition), I’d like to explore smoother, more engaging animations — maybe using a minimal library like GSAP or improving timing/easing within Tailwind’s utility constraints.
Handling Edge Cases and Robustness: I’m interested in better ways to handle edge cases like:
When multiple components are open at once
When window resizes mid-interaction
Preventing accidental popup closure when interacting near the edge
Scalability & Reusability: I'd like advice on abstracting the popup logic into a reusable component or Alpine.js plugin/module to prevent duplication if I use this across different buttons or modals in the app.
Testimonials Grid Section
#tailwind-cssSubmitted 20 days agoI’d like help with a few specific areas to improve both the code quality and user experience:
Mobile responsiveness tuning – While the layout works on different screen sizes, I feel like the spacing and readability on smaller devices could be improved. I’d appreciate feedback or suggestions on how to better handle typography and layout scaling for mobile.
Accessibility best practices – I want to make sure the project is accessible to all users. I'm interested in learning more about how to properly use semantic HTML, alt attributes, and ARIA roles when needed.
Better image optimization – I used standard .jpg images, but I’m not sure if this is ideal for performance. Any advice on image formats (like WebP), compression, or lazy loading would be helpful.
Component structure for frameworks – Eventually, I want to convert this layout into a component-based structure using Vue or React. Tips on how to break this layout into reusable components effectively would be great.
Four Card Features Section
#tailwind-cssSubmitted 21 days agoI’d appreciate feedback on accessibility and semantic HTML. I want to make sure my structure is screen-reader-friendly and follows best practices for inclusive design. Also, I’d like advice on how to improve the visual polish of the layout—like adding subtle animations or hover effects using Tailwind CSS to make the cards feel more interactive and modern.
Lastly, if there are more efficient ways to organize or reuse Tailwind utility classes (like using components or applying custom styles), I’d love to learn about that too.
Recipe Page
#tailwind-cssSubmitted 23 days agoI would appreciate feedback or advice on how to further optimize my custom list styling approach using Tailwind CSS and CSS variables.
Latest comments
- @laravue-18
Great Job!
- @tmykkanenWhat are you most proud of, and what would you do differently next time?
- I implemented google font using
@import url - I focused on trying to use as much vanilla css as possible. I still used tailwind for general reset and a few utility classes.
- I tried
<header>as a semantic html tag (rather than just the wrapper for a header nav). - I continued to improve my understanding of CSS Grid and @container queries.
- I was trying to use a global css variable for setting my container query. Looks like it's not possible (due to the variable belonging to :root and container query not having a context).
- Did I use
<header>correctly? - Any suggestions on how best to organize the css? Does putting the
grid-column:in a style tag on the element being placed make the most sense? I could write a class (e.g..daniel-cardor something more semantic.col1-span2), but this seemed the neatest for organization.
@laravue-18Great Job
- I implemented google font using
- @xianortWhat challenges did you encounter, and how did you overcome them?
At first, I didn't know how to achieve the challenge layout. I thought about using Grid with Flex and an extra div for the two middle boxes, but I figured out a way to do it with a three-column by two-row grid. I made the first and last boxes span two rows, and centered them using
What specific areas of your project would you like help with?align-itemsproperty, which did the trick.Help with code and accessibility is welcome.
@laravue-18Great Job
- @Artyom1513@laravue-18
This is not code for this challenge
- @sinau123@laravue-18
Good job!
- @binetougaye@laravue-18
Good job! But this isn't pixel perfect.
