Skip to content
Submitted about 2 months ago

Product card |HTML & CSS|

Abhi•320
@abhi-zero
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?

This is the first time I am using Grid in CSS. Before this project, I always used Flexbox. It's easier for me to use Flexbox, but Grid is also good for dividing a section equally. It's not easy, but I think it's good to learn about Grid because it's so useful. From now on, I’m going to work with grids.

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

Working with grids is the toughest challenge for me, but it's worth it.

Where am I stuck on a problem? -The main problem I encounter is that the content section overflows out of the right column and goes to the bottom.

How do I overcome this problem? -Honestly, I used ChatGPT, but this problem was solved after five prompts."

Community feedback

  • Alex•120
    @CaplexWPosted about 2 months ago

    Hello Abhi! You did a great job! Here's some minor adjestments I wanted to advice, that might improve your work in the future:

    1. Try to avoid setting width and height in px. The reason is - it is an absolute units and it will make maintaining responsivness of you site much harder. Instead you can use responive units like em and rem. You can dive deeper in the topic in this article.
    2. Try to avoid setting specific height to content elements at all costs. Setting any specific height (in px or rem) will mostly likely kill the responsivnes of you site. You can pickup some good practices of working with height in this Web Dev Simplified video.
    3. Don't leave body as a row. If you have to put display: flex on a body element, make it flex-direction: column. It won't matter in this project, but in more complexed sites it will save you a lot of enegry.
    4. Consider using svh or dvh for document height. It's not bad at all to use vh, but you might consider using svh instead cause it's taking in account UI element on the screen, slightly improving mobile experience. You can dive deeper by watching this video of Kevin Powell.
    5. You can use letter-spacing. It's small one. In this challenge, word 'PERFUME' is slightly modified with space between letters. You can achive the same result with css by using letter-spacing property.

    And don't be ashamed to use ChatGPT in you work, it's a greate tool of knowledge as long as you use it to ask questions and understand what you've missed instead of just copy-pasting suggested solution without understanding how it work. Good luck with a future work!

    Marked as helpful
    0
    Abhi•320
    @abhi-zeroPosted about 2 months ago

    @CaplexW Thanks, bro, for giving me advice and providing the link. From now on, I’m going to do as you said.

    0
    Alex•120
    @CaplexWPosted about 2 months ago

    @abhi-zero I'm really flattered! But don't do as I said (afterall I'm just a student like you) - do as you understand. Just use my words to look where you can expend your understending. ;)

    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