Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component solution using CSS grid and CSS Flex

Riska997β€’ 110

@Riska997

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • 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 am not proud of anything as I feel like I still have a long way to learn web development.

Next time, I will try to use another web development language to complete this web.

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

It was my first time using a CSS grid. I was confused as I was uncertain of a few things about using grids. I had to read on W3school how to properly use grid.

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

Areas for Feedback

I would greatly appreciate feedback on my project, particularly in the following areas:

  1. CSS Grid Usage: This was my first time using CSS Grid, and I'm unsure if I've implemented it correctly. I'd like someone to review my grid layout and point out any errors or areas for improvement.

  2. Responsiveness: While I've tried to make my project responsive, I'm not entirely confident that it displays optimally on all screen sizes. I would appreciate feedback on how I can improve the responsiveness of my design, especially for smaller screens.

  3. Code Structure and Organization: I want to ensure that my HTML and CSS code is well-organized and follows best practices. If there are any areas where I could improve the structure or organization of my code, I'd like to know.

  4. Accessibility: Accessibility is essential, and I want to make sure my project is accessible to all users. If there are any accessibility issues in my code or design, I would appreciate feedback on how to address them.

Any guidance or suggestions on these specific areas would be incredibly helpful for me to complete this challenge successfully. Thank you in advance for your assistance!

Community feedback

Rupak Mukherjeeβ€’ 810

@hannibal1631

Posted

Well there are a lot of improvements you can make. But it's good that you know in which areas you can improve. So work on that. You can check mine if you feel like it. And if would like to have a coding buddy and learn together, let's connect somewhere. I hope we can work this out.

Marked as helpful

1
Denisse Joyceβ€’ 220

@denissejoyce

Posted

Hey there! Good job on completing the challenge πŸŽ‰

RE β€” accessibility, I suggest checking out sr-only classes, they are helpful for visually impaired users

RE β€” best practices, one cute tip, I like using prettier as my code formatter to make sure that my code looks clean and easy to read

Also, even with the use of media queries, it's still good practice to use for your font-size, paddings, and margins ☺️

0

Please log in to post a comment

Log in with GitHub
Discord logo

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