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 solution - SCSS

@ParaPaca

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 do you think are the best practices for this project? What am I supposed to do to improve my code?

Thanks in advance for your feedback

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @ParaPaca!

Your project really looks great!

I noticed that you placed your .attribution inside the main tag with the container. That's not a problem. But if you place it outside the card (it's supposed to be a footer, it's not part of the main content), you don't need to use 2 tags to wrap your card. You can just use main tag.

It's not like this is a problem, it's just a minor observation that can optimize your code.

I hope it helps!

Other than that, excelent job!

Marked as helpful

1

@ParaPaca

Posted

@danielmrz-dev, I agree with you, so I changed my html a bit to fix this problem. Thank you!

1
Kimo Spark 2,190

@kimodev1990

Posted

  • You could clamp ( ) method in your coding ( font-size, width, etc ... ) ,so your design will change according to the viewport dimensions and will be suitable for any device layout. Other than that, Nice work & keep Going on

Marked as helpful

1

@ParaPaca

Posted

@kimodev1990, I will definitely delve into this topic. In general, I am familiar with this feature in CSS, but so far I have not been able to successfully apply it 😅 I will try to use it in my subsequent projects. Thank you!

0
Kimo Spark 2,190

@kimodev1990

Posted

@ParaPaca You're always welcome. Anytime...

1

@Aphelion-im

Posted

I always use the HTML and CSS validator at the end of my project.

When I pasted your html in the validator, it gave me one warning. That warning could be considered best practice.

Your CSS does not have validation errors.

And you could try this Web Accessibility Evaluation Tool (WAVE)

Marked as helpful

1

@ParaPaca

Posted

@Aphelion-im, you're right! I actually made a mistake in my code. The mistake was that I didn't add any headings inside the section tag. I decided to ignore this error, considering that it was not so important, but in this case it would be more correct to use a div tag rather than a section tag to wrap the image. So I corrected the error.

I also took note of the sites you gave as examples to check my code. I will continue to use them in the future. Thank you for the answer!

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