Skip to content
Submitted 3 months ago

Flexbox, Column,

Nico•330
@Nico243
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

That when the code was too confusing to start from scratch and go through the planning more carefully. When I get too tired that I take a break and come back later with a fresh mind.

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

I used figma to help me with the inner container, giving me more specific dimensions to work with, Adding the image was easier and keeping the content in the second column was much quicker, the larger the code starts to get I realized I need to have more specific classes and organize it properly from the top to the bottom.

I made one too many containers one container as my body which gave me more issues than solutions. Luckily a friend of mine told me that was messing up my layout!

Community feedback

  • paulDev•480
    @dev-paulLPosted 3 months ago

    Hi Nico 👋 Yes, taking a break is important.

    I recommend you to read about semantic html tags to limit the <div> number.

    What you need for the image is a <picture>.

    Also avoid using px for everything, especially for font-size. You can also include a reset in your css file.

    It would be a good idea to check the frontendmentor learning paths!

    Best, Paul

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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