Submitted 3 months ago

Product preview card

Arnaud Lahaut• 200

@Arnotts33

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

The html was straightforward and I am getting used to using semantic html.

I am happy with the CSS workflow as well and that I was able to find some things by myself such as the use of data attributes or source tag.

What challenges did you encounter, and how did you overcome them?

The two main challenges here were having the image to change when resizing screen and the implementation of the cart icon.

I manage to find the solution by doing some research.

What specific areas of your project would you like help with?

For this project I think my code is alright. Maybe some help in the way I organize my CSS?

Thanks for feedbacks as they are always useful!

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 3 months ago

Hi! Congrats with another challenge =)

You really did great, used correct tags and picture is exactly what you need here.

You can keep your code more organized with a bundlers, like Vite and WebPack (I really prefer Vite). They can allow you to split css and js on multiple files and build it for you. Also they can use various tools for post- and preprocessing of the code.

But it's more about big projects and I guess you need to be familiar with JS to fully understand them, so consider it as an advice on advance =)

Marked as helpful

Arnaud Lahaut• 200

@Arnotts33

Posted 3 months ago

Hi @Alex-Archer-I !

Thanks for your feedback :)

I will definitely have a look at Vite then. I am finishing a JS course and will soon start the JS challenges here, so that might help.

Alex• 3,130

@Alex-Archer-I

Posted 3 months ago

@Arnotts33

They especially come in handy if you'll work with frameworks like React or Vue. For example, Vite works faster (it really stands for it's name= )) and smoother than create-react-app (which provided by React devs).

Good luck with JS learning. It's a huge step forward =)

Please log in to post a comment

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