Skip to content
OverviewSolutions
25
Comments
14

Kaung Zin Hein

@K4UNGMandalay, Myanmar720 points

A passionate student, learning web development at home.

I’m currently learning...

Game Development

Latest solutions

View more solutions

Latest comments

  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    Hey! It looks good! Great job on the challenge. I like the little popup that appears after clicking the checkout button. Here are a few things I noticed:

    • When I add items to cart, instead of reseting the number of items, you should add onto the existing amount. Also when I add item with no amount selected, the modal becomes blank so you should also prevent users from adding 0 items if you decide to keep the current adding method without increasing the amount of items.
    • When I delete the items, the amount indicator doesn't disappear. If I had two items in cart, even if I deleted them, the indicator is there still displaying 2.
    • For the transitions, I think you should make them a little faster. It wouldn't matter too much here but, for bigger projects you should keep your transitions point on to not negatively affect the user experience. For me, I use somewhere around 200ms or less for general transitions.
    • Lastly for the cart modal, instead of moving it from outer screen when clicked, you could move upwards just a little and accompany it with a fade animation. That way you can have a more natural loading animation.

    Great work and Happy Coding!

    Marked as helpful
    1
  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    For mine, I added data attributes to every button accordingly and show/hide them by just using those attributes. I'm sure There's a better way to do this but at least that is what I did. Hope this was helpful. Happy Coding!

    Marked as helpful
    0
  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    Hey Kaung, well done on the project. I'd like to point out a few things here

    • you don't need the first media query for min-width: 375px. It means your site will break if it gets smaller than 375px. You can just write it directly and then once you get to the screen size where you feel like changing the layout, then you can use the media query to overwrite the properties.

    • for the second media query, you have max-width: 1440px which is the max screen size in most 1080p monitors which means you're only setting those properties for only that very specific screen size, which seems like a useless move. If you're not sure how media queries and responsive design work, here's a great tutorial to get you started.

    • for your card, if you want its size to adjust to the screen size, you can give it a width with percentages along with a max-width. Or you can just keep its size fixed just like you did.

    Keep up the good work and Happy Coding!

    0
  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    Hey! Congrats on finishing this challenge. I have some suggestions for you.

    • Your hero image looks stretched because of the specified width. Your could fix this by giving it height: auto; or if the image is inside of a container, you could use object-fit property.
    • Having transitions are great but you should make them pretty fast so that it doesn't affect UX design negatively.
    • For the slider, instead of only having one tablet and modifying it, you should do it the proper way (at least for this challenge) which is by using a container with overflow: hidden that has all the individual tables in it so that you can kinda scroll through them. If you're not sure how to build one, there're lots of great tutorials on Youtube. I really recommend checking them out.
    • I don't know if it's intentional but I noticed some colors not matching the design image. If it's not, then you should also try fixing them.

    Great work and keep going! Happy Coding!

    Marked as helpful
    1
  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    Hey! Well done on this project. You could try giving the parent container a background color and then reduce the opacity of the image when hover so that it looks like an overlay. Happy Coding!

    1
  • Kaung Zin Hein•720
    @K4UNGPosted about 3 years ago

    Hey! Good job on this challenge. Another great way you could use to get this centered layout would be to have 4 grid rows and giving the cards 2 rows each at exactly where you want them to be using grid-area-templates or just grid-row/column. Happy Coding!

    1
View more comments