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

Responsive Product Preview Card Solution

@AbdulHaseebHussainRI

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'm pleased with the overall outcome, especially how I've catered for mobile devices alongside desktop. However, upon reflection, I believe I could have optimized my use of nested elements to enhance the code's readability and maintainability.

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

One of the primary challenges I faced was structuring the layout to meet both desktop and mobile requirements effectively. Through experimentation and iteration, I found that leveraging flexbox layouts enabled me to create a flexible and responsive design. While this approach addressed the initial hurdle, I'm open to feedback on whether utilizing CSS grid might have offered additional benefits or improved maintainability.

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

Nested Divs Usage: I'm concerned about potentially overusing nested elements in my project. Are there more efficient and semantic alternatives I should consider?

Flexbox vs. Grid Layouts: While I used flex layouts extensively, I'm unsure if I should have utilized CSS grid instead in certain areas.

BEM Naming Convention: I've attempted to follow the BEM naming convention, but I'm open to feedback on whether my approach aligns well with best practices.

HTML and CSS Structure: I'd appreciate critiques on the overall structure of my HTML and CSS files. Are they semantically appropriate, readable, and maintainable?

Responsiveness: I've tested the responsiveness of my solution across various devices using Chrome DevTools, but additional feedback on its responsiveness would be valuable.

CSS Custom Properties: I attempted to streamline my font styling by using a single CSS custom property for fonts to reduce duplication. However, I couldn't implement it successfully. Could you suggest a feasible approach for this, and would it be recommended for improving maintainability?

Community feedback

T
Grace 29,310

@grace-snow

Posted

There are some fairly serious problems with the html in this I'm afraid. I recommend you read this post and refactor your html before anything else. I hope it's helpful! https://fedmentor.dev/posts/html-plan-product-preview/.

Remember to work mobile first, including with the picture element

Marked as helpful

0

@AbdulHaseebHussainRI

Posted

@grace-snow thanks for the feedback, I've had a look at your blog post alongside Kevin Powell's video on this challenge after having posted my solution, I agree on needing to rework the entire solution.

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