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 using pure HTML CSS

@CGM-ThanHtike

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


Thanks for checking this out

  • This is my second challenge here. Implemented with pure html css.
  • I used css variables for font sizes and colors for code flexibility.
  • Grid for main layout and flex for some components.
  • This time, I'm going with mobile first approach.
  • "If you have any suggestions or feedback for my code, please feel free to comment." I would greatly appreciate all feedback.

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

CSS NAMING CONVENTIONS 🚫:

  • Looks like the naming conventions you used for css need to be improve, you can take a look at BEM Naming Convention.
  • BEM helps to create modular, reusable, and maintainable code. With BEM, you can easily identify which styles apply to which elements, making it easier to modify and update your CSS.
  • BEM naming conventions provide a clear structure and naming hierarchy for your CSS classes. This makes it easier to read and understand your code, even for other developers who are not familiar with your project.
  • BEM allows for more granular control over styling. With BEM, you can target specific elements within a block and modify their styles without affecting other elements or blocks on the page.
  • BEM helps to avoid naming collisions and specificity issues. By using a consistent naming convention, you can avoid accidentally overwriting styles or causing specificity issues that make it difficult to style your elements.
  • This article on CSS-Tricks provides a beginner-friendly introduction to BEM and explains the key concepts and benefits of using BEM.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

@Oluwalolope

Posted

Hello👋

Your solution was top notch😄!!! It looks so smooth on mobile😊. I have just one suggestion you may find helpful.

Your code commenting in your HTML: Although this doesn't affect the outcome of the code. I found understanding your code comments in your HTML file a little hard. Simply because you put the comments after the lines of codes. I feel it Is best to put your code comments above the component you are working on. Think of it this way: Your comment is like the chapter title of a novel, most reader are used to title then content not content then title. This way other people trying to review your code can easily understand it.

I hope you found this feedback helpful😄

Once again, Congratulations 🎊 on completing the challenge

Happy Coding 👨‍💻🤝

Marked as helpful

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