Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

flexbox

Alan 160

@TheMax370

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


I would a recommendation on best practices also could I get a review of my code and see where can I do better

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Hi. Congratulations for taking your first challenge

  • the structure of your html , is not in correct order - heading elements has to follow a sequential order with the h1 element being the first heading element, then followed by an h2 element. An h2 heading element can only be followed by an h3 element and so forth.
  • When given a set of images that should be displayed accordingly between mobile, medium devices and desktop - the best practice approach is to use responsive image methods. Using css to hide a particular image and hiding the other is not the recommended way. You can use resources such as MDN Responsive images
  • position: absolute should be used with caution, that will cause your project to behave unexpectedly and make it very difficult to maintain. Generally you need to stay away from using it especially in this project - a couple of your elements are using position: absolute. One good example is the .card div which is using display: flex and position: absolute - remove the position: absolute from this element.
  • using fixed width, eg the .card has a width: 375px, this will make you site to be viewed properly by devices that are at least greater than 375px - in other words most mobile users won't be happy.
  • a fixed height on an element , should also be avoided, let the content be the decider .

Marked as helpful

0

Alan 160

@TheMax370

Posted

@ChamuMutezva Hi, thanks for the feedback I would like whenever you can check the code again and see the fixes I made.

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