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 Component

saminstein 130

@saminstein

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 couldn't get the older price to stay on the same line as the new price. Also what is the best practice for structuring a card like this?

Community feedback

@ericwink

Posted

Hi Saminstein,

Great job on this challenge! Looks great and is responsive. I don't see a hover state on your button, so that might be a useful thing to add for user interactivity.

Regarding your question on the prices, I would recommend surrounding both in a container, enabling flex, and separating them with gap.

When approaching how to structure your code, I suggest drawing some things out by hand before you even begin writing a single line of code. Put boxes around elements, separate the items into columns and rows - draw as much as makes sense to you. This will help you figure out how many sub-containers you may need to help keep your elements organized, and will make CSS much easier to manage. This will be key when working with more complex layouts.

Also, don't forget about semantic markup. DIVs can be replaced with SECTION which could also help organize your structure. https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Hopefully this helps!

Marked as helpful

1
Emmiecodes 100

@Emmiecodes

Posted

Hi Saminstein, nice job! Have you considered using display: flex for the .card-prices to get them inline? For the structuring I have no answers, still trying to fix mine but yours looks pretty good!

1

@milosshomy

Posted

You can use <span> tag instead of <p> tag on prices, that way they will be aligned next to each other. Good job on solution. Keep coding! :D

1

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