@Evergardenx
Latest solutions
Article preview component
#airtable#angular-material#emotion#lit#react-ariaSubmitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
chat-app-css-illustration-master
#bulma#c##gulp#node#react-ariaSubmitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
fylo-data-storage-component-master
#airtable#chart-js#contentful#daisy-ui#foundationSubmitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
testimonials-grid-section
#angular-material#chai#cypress#deno#gatsbySubmitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
four-card-feature-section-master
#angular#c##chai#foundation#pure-cssSubmitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
product-preview-card
Submitted 3 months agoI’d like help with improving the responsive design, especially how to make the layout adapt more smoothly between mobile and desktop views. I’m also unsure if I’m using Flexbox and spacing techniques in the most efficient way—sometimes things feel a bit messy or inconsistent.
Additionally, I’d appreciate feedback on how to organize my CSS better, including best practices for class naming, layout structuring, and how to manage hover or focus styles more cleanly.
Finally, any tips on improving accessibility (like contrast ratios, keyboard navigation, etc.) would be really helpful to make my projects more inclusive and polished.
Latest comments
- @1253PUJITH
great work!!
- @Oskar2301@1253PUJITH
Great work!!
- @Basma-Bensadi@1253PUJITH
Grate job!! your are very close... You miss the completness in the space between lines.
you should focuse on <margin> in css.
- P@assiduousdevWhat challenges did you encounter, and how did you overcome them?
Surprisingly, the creation of custom unordered and ordered lists were quite difficult. I initially planned to use the base list styles and ::marker pseudo-element to customize their size and color but I found that to be more difficult. I read a lot on MDN on how to do this successfully managed to built them with the help of CSS counter().
@1253PUJITHGrate job!! You do perfect.
- @komaljatoi@1253PUJITH
Hey! Great job getting the structure of the card set up and making the edits as instructed. It’s clear that you’ve followed the basic layout and replaced the image and text according to the platform’s requirements. Here are a few suggestions to improve your solution further:
✅ What’s good: You followed the HTML structure well.
Image replacement and content updates are accurate.
Font and spacing are consistent with the original layout.
🛠 Suggestions for improvement: Responsiveness: Try using media queries to ensure your design adapts well to different screen sizes (especially 375px for mobile and 1440px for desktop).
Accessibility:
Make sure to include alt text that describes the new image meaningfully.
Ensure text contrast meets accessibility guidelines (use tools like WebAIM contrast checker).
Interactivity: You could add simple hover effects on the card title or button (if any) for better user interaction.
CSS Organization: Consider separating layout styles (like flexbox) from visual styles (like colors and fonts) for cleaner code.
- P@a-woodworthWhat are you most proud of, and what would you do differently next time?
Note: Modified the card title hover color to meet accessibility color contrast ratios. Also, added hover animations for author and category links as well as lifting card on hover.
@1253PUJITHI’m most proud of successfully matching the design and making the layout responsive. I also improved accessibility by modifying the card title hover color to meet contrast ratio standards. In addition, I added subtle hover animations for the author and category links and a lifting effect on the card when hovered, which adds a nice interactive touch.
One thing I noticed was that the default <p> element had some text/content directly written into it, which was unexpected. Next time, I’ll double-check the design and the content structure more carefully before coding, to ensure everything matches perfectly and nothing is missed.
