Looking to hire developers?
@K4UNG
@PhoenixDev22
Submitted
Hello community , This my second attempt doing this challenge. As I wasn't happy about how I did this project before. I started doing it from scratch. I had learnt a lot. I had a challenging time with making the shopping cart inner Html using JavaScript . For me, It turned much better from the first try. If you have any suggestions about best practices and any missing things please do leave a feedback. Thanks in advance.
@K4UNG
Posted
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:
Great work and Happy Coding!
Marked as helpful
@Duyen-codes
Submitted
I have not managed to add filter function this time. Could anyone suggest a way please. Any help/feedback is greatly appreciated!
@K4UNG
Posted
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
@Kaungwintshein
Submitted
Here is my first challenge of Frontend Mentor.Tell me if somethings wrong here
@K4UNG
Posted
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!
@dazzlerabhi30800
Submitted
Please need feedback
@K4UNG
Posted
Hey! Congrats on finishing this challenge. I have some suggestions for you.
height: auto; or if the image is inside of a container, you could use object-fit property.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.Great work and keep going! Happy Coding!
Marked as helpful
@Giologic
Submitted
The overlay for hovering over the image was pretty hard.
I wanted to implement opacity for the overlay but the eye icon inside will also adapt to the opacity. If I was able to do this i would've been able to apply transitions. I just used display: none / display: block (on hover) for now.
What's the best way to apply an overlay with the icon not following the opacity of the color filter layer
@K4UNG
Posted
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!
@hteinLinn210
Submitted
In this challenge, I mainly used grid for responsiveness. I made three layouts: desktop, tablet, mobile. And I started with mobile layout first. In the last part, I am not happy with my code that I have to use top: 25% to centre a div. How can I use other ways like align-item: center to center that. Feedbacks are warmly welcomed.
Happy Coding!
@K4UNG
Posted
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!
@bhonePyae99
Submitted
This is my first advanced projects. If you have time please take a look at my code and advice me some best practices. Thank you all.
@K4UNG
Posted
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!
@hteinLinn210
Submitted
I rewrote the code from the beginning to be responsive. Any feedbacks are warmly welcome.
Happy coding!
@K4UNG
Posted
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
@shubhsaur
Submitted
Can someone please suggest how to do active states for dotted menu only whenever i hover over it without enabling active state for activity cards, as it should hover my whole card altogether.
Thanks in advance!
@K4UNG
Posted
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!
@Jawha3
Submitted
I didn't work on making the solution responsive - I purely worked on getting the design right for the two provided breakpoints: 375px and 1440px.
Any feedback is greatly appreciated.
@K4UNG
Posted
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!
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Pricing component with toggle.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@K4UNG
Posted
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
@kentmichael
Submitted
See the chat interface animate on the initial load! Feel free to check my solution and report any error @twitter - @kentmichaels4n. You can also suggest anything, this will help me improve. Thanks!
@K4UNG
Posted
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!
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the Ping coming soon page.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@K4UNG
Posted
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
Submitted
@K4UNG
Posted
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
