@Filostkana
Responsive Testimonials Grid Section built using HTML, CSS, and Sass
#cube-css#sass/scss#accessibility
Chinedu Daniel Okeke
@Sage-25All comments
- @Sage-25
This is good implementation.
- P@codejerooWhat are you most proud of, and what would you do differently next time?
I think the fact that I was able to complete the challenge by only using CSS Grid and media querries
What challenges did you encounter, and how did you overcome them?Since I was used to using flex-box it was hard for me to actually think two dimensionally using CSS Grid. I guess I would try to keep using CSS-Grid more to have a good grasp about the layout tool.
What specific areas of your project would you like help with?What are usually scenarios which you would prefer using grid over flexbox?
@Sage-25This is a good implementation.
- @MarieG41What are you most proud of, and what would you do differently next time?
I would start with the mobile design because it's a simpler design than the desktop version.
What challenges did you encounter, and how did you overcome them?I didn't encounter any particular challenges.
What specific areas of your project would you like help with?I don't think I need help on this project.
@Sage-25Hi Marie.
This is a great implementation. Something I have learnt submitting my solutions here is the good feedbacks I have gotten.
When creating media queries, try moving them into a new folder or move them to the bottom of your CSS code.
I hope this helps.
- @rukhulkiromWhat are you most proud of, and what would you do differently next time?
I'm most proud of how clean and structured the design is. The use of CSS variables, Google Fonts, and well-thought-out spacing makes the recipe page visually appealing and easy to read. The mobile responsiveness is also a highlight, ensuring a great user experience on different screen size.
Next time, I might focus more on adding interactivity with JavaScript, such as collapsible sections for ingredients and instructions. Additionally, I could improve accessibility by ensuring proper semantic HTML, adding ARIA attributes where necessary, and optimizing keyboard navigation. Another enhancement could be experimenting with animations or transitions to make the page more dynamic.
What challenges did you encounter, and how did you overcome them?-
Maintaining a Clean and Organized CSS Structure.
-
Making the Page Visually Engaging Without JavaScript
-
CSS Optimization & Best Practices: Could the structure of my CSS be improved for better maintainability?
-
Enhancing User Experience (UX): Would adding subtle animations (e.g., hover effects or transitions) enhance the experience without overcomplicating the design?
-
Potential JavaScript Enhancements: Would features like collapsible sections for ingredients/instructions be a good addition?
@Sage-25This is a good implementation, not further feedback.
-
- @vicdunine@Sage-25
Good solution.
There might just be a few issues you could adjust ranging from the width of the card and the colour choice.
- @JoshBlaach@Sage-25
Hi Josh. Great job on this, this implementation looks exactly like what we have on the challenge but with a difference In margin and padding.
I noticed that in the challenge, the padding-top, left, right and bottom are all consistent and wider, this helps the design breathe a little. I also noticed you use a lot of PX rather than REM, one thing I have been taught in the community is the use of REM in replacement for PX.
Not sure if placing the footer right inside the card was intentional.
Marked as helpful - @Bart254@Sage-25
Hi Barth.
This is a good implementation.
One thing I have learned so far in taking this challenges is ensuring that I can gauge the sizes of the fonts I use.
I always stay within the ranges of 1.5rem to 3rem for headers and 0.5rem to 1rem on body copies, this ensures that I can match the exact sizes used on the challenge.
