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 HTML CSS Grid

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


Hi, this challenge is excellent to practice alignment and responsive design. In addition to looking for a method to adapt the images (mobile, desktop) in the different resolutions. Feedback is welcome!

Community feedback

@petritnuredini

Posted

Congratulations on completing the Product Preview Card project! Your page showcases an excellent grasp of HTML and CSS, creating an attractive and functional design. Here are some best practices to consider:

  • Semantic HTML: Good use of semantic elements like <main> and <section>. Further improve your markup by using <figure> for the image and <figcaption> for its description. Learn about semantic HTML here.

  • Responsive Design: You've implemented responsive design using media queries effectively. Test across various devices to ensure a consistent experience. More on responsive design here.

  • Accessibility: Focus on making your website accessible, including meaningful alternative text for images and proper ARIA roles. More about web accessibility can be explored here.

  • CSS Best Practices: Your CSS is well-organized. Consider using BEM (Block Element Modifier) methodology for naming CSS classes to improve readability and maintainability. Learn about BEM here.

  • Performance Optimization: Optimize images for faster loading times and better performance. More on image optimization here.

  • Font Loading: Be cautious about loading multiple font weights as it can impact performance. Load only the weights you need. More on font optimization here.

Keep up the great work! Your dedication to crafting well-structured and styled web pages is commendable. Continue exploring and experimenting with new techniques and technologies in your web development journey!

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