Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
14
Kaung Zin Hein
@K4UNG

All comments

  • PhoenixDev22•16,830
    @PhoenixDev22
    Submitted over 3 years ago

    E-commerce-sneakers-website HTML CSS JS mobile-first

    2
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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
  • Duyen Nguyen•950
    @Duyen-codes
    Submitted over 3 years ago

    Job listing without filter function

    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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
  • Kaung Wint Shein•20
    @Kaungwintshein
    Submitted over 3 years ago

    Qr Code Component using HTML and CSS

    3
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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!

  • Abhishek choudhary•1,670
    @dazzlerabhi30800
    Submitted over 3 years ago

    Responsive manage landing page in html, SCSS & JS

    #sass/scss
    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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
  • Gio Velez•30
    @Giologic
    Submitted over 3 years ago

    NFT Component Card Challenge

    #sass/scss#bem
    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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!

  • Htein Linn•150
    @hteinLinn210
    Submitted over 3 years ago

    Four Card Feature Section

    2
    Kaung Zin Hein•720
    @K4UNG
    Posted over 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!

  • Bhone Pyae Kyaw•410
    @bhonePyae99
    Submitted over 3 years ago

    rock paper scissors game using react and tailwind css

    #react#tailwind-css
    2
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    It looks great! I've been thinking about doing this challenge too. Hope it's within my reach. The colors seem a bit off tho. I can't give any other feedback since I know nth about Tailwind or React. Great job!

  • Htein Linn•150
    @hteinLinn210
    Submitted over 3 years ago

    Order Summary Component

    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Ayyyy! Finally found a Burmese user. Great work on the project! There're few things I wanna point out:

    .btn:hover { cursor: pointer; }

    • I think this one is quite unnecessary. You can just straight up set the cursor of btn to pointer. It's not gonna affect unless you hover over it anyway.

    • for your .cancel-btn, you should make it fit-sized, and not the same size as the .pay-btn so that the :hover applies only when you hover over the text and not the whitespaces around it. Happy Coding!

    Marked as helpful
  • Shubham Saurabh•270
    @shubhsaur
    Submitted over 3 years ago

    Responsive Time Tracking Dashboard

    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Hey! Great job on this project. For the hover thing tho, I also had the same issue. Unfortunately, you can't hover over the child without hovering over the parent. But you can use a trick called sibling trick which was what I used. How it works is basically, you add an additional child and when you hover over the card, you put the effect on that child and not the parent but make it seem like it's the parent by making it the same size as the parent. Then when you hover over the icons, it'll remove the hover from that child because they're siblings. You can see my code or search it up online. Hope this was helpful. Happy Coding!

  • Jannie Hansen•110
    @Jawha3
    Submitted over 3 years ago

    Fylo Landing Page

    #bem
    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Hey! Congrats on completing the challenge. Making the website look good for only two very specific screen widths is not a good approach I'd say. It means your site's gonna break if the user changed the screen width even by a pixel or so. After all, landing pages like these are best to practice responsive designs so why waste the chance. I suggest you learn it first if you're not comfortable yet, then utilize these kinds of challenges to practice it. https://www.w3schools.com/html/html_responsive.asp Here's a good tutorial to get you started, or if you're not a reading person, I recommend checking out Kevin Powell's Youtube channel. Happy Coding!

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline
    Submitted over 3 years ago

    Pricing component with toggle

    6
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Hey! Well done on this project. I noticed that I could only click on the circle inside of the toggle and not the toggle itself. It'd also make better sense if the toggle was a button, and not a div for accessibility. Also when I hover over the buttons, there were some shifting going on. You could prevent this by adding a border to the element. Happy Coding!

    Marked as helpful
  • kmsan•480
    @kentmichael
    Submitted over 3 years ago

    This is a solution to the Chat app CSS illustration challenge

    #accessibility#bem#gulp#sass/scss#semantic-ui
    3
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Well done on this project. One thing I wanna point out is that the keyframes are a bit redundant. You can just use the same animation for all messages with different delays without identifying separate keyframes for all. Happy Coding!

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline
    Submitted over 3 years ago

    Ping coming soon page

    11
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Hey Catherine, it looks good! One thing tho, the social media icons can have a specific width with aspect-ratio: 1 or the same height so that the borders can be nice and round. Happy Coding!

  • transcendence12•30
    @transcendence12
    Submitted over 3 years ago

    Responsive App fetching data from API

    1
    Kaung Zin Hein•720
    @K4UNG
    Posted over 3 years ago

    Hey there, congratulations on finishing the challenge. I have some suggestions for your code. First, you could call the getAdvice function once so that it wouldn't be empty when the page loads. Second, you could give a fixed size to the card so that it doesn't stretch too much in desktop viewport. Happy Coding!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub