Submitted almost 2 years ago

Product Preview - Perfume Ad

Valerie Schdmidling• 20

@valerietonsor

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

My spacing is a bit off. I struggle with spacing in CSS the most. Any spacing / placement advice is helpful. :)

Community feedback

Petabyte• 190

@peta-8-bit

Posted almost 2 years ago

@valerietonsor congratulations on Completing the challenge 🎉

Regarding positioning and spacing, learn Flex-box and Grid which are absolute essentials for CSS and there is no way around it. This will help you center div and even create basically any layout possible.I suggest this youtube channel for all things CSS.
After you have learnt flex-box and grid, I would suggest you learn semantic tags such as main, nav,section,etc in html. This would take maybe 20 minutes to learn.
In this challenge for the mobile layout we have to replace the image with another image which can be done with picture HTML tag.

Hope this helps. Happy coding.╰(°▽°)╯

Marked as helpful

Valerie Schdmidling• 20

@valerietonsor

Posted almost 2 years ago

@peta-8-bit thank you so much! Next up, grid and flex box! 👍🏻

Daniel• 30

@dhaniel1

Posted almost 2 years ago

https://web.dev/learn/css/spacing/

I hope you find this helpful to improve on your spacing

Marked as helpful

Valerie Schdmidling• 20

@valerietonsor

Posted almost 2 years ago

@dhaniel1 thank you! I will make sure to check this out

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