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.
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!
I have not managed to add filter function this time. Could anyone suggest a way please. Any help/feedback is greatly appreciated!
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!
Here is my first challenge of Frontend Mentor.Tell me if somethings wrong here
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!
Please need feedback
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!
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
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!
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!
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!
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.
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!
I rewrote the code from the beginning to be responsive. Any feedbacks are warmly welcome.
Happy coding!
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!
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!
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!
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.
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!
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
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!
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!
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!
