Before starting this challenge I thought it gonna take 3-4 days, but it took me almost 3-4 weeks. If anyone has tips on being a productive programmer please let me know. Would really appreciate any feedback :)
Hi Ritik,
The solution looks great on Desktop and Tablet mode ✨✨✨.
The responsiveness can be improved between 770-1150px. The cart dropdown overflows the viewport when opened in this range..
My third project here, and the first one with JavaScript!
Cannot say that I feel fluent in js at all yet, but it is so much fun when your can add new functionality!
Hi Veronica,
Great solution 🔥🔥!!!
Just a few points...
The selected rating does not go back to normal when I select another rating. You can do this by removing the "selected" class from all the buttons first, and then adding the "selected" class on the clicked element.
The hover on Rating does not change the font color to white.
Hi! This is my second challenge and I learned CSS grid through Wes Bos's course.
Please feel free to point out anything that needs fixing, I'm still familiarising myself with CSS. Thanks for your help! :)
The font-family for the links(change, proceed payment and cancel) can be set to "Red Hat Display" to match the design.
Not an overuse of ''DIVS" but some extra "buttons" that could have been just replaced with divs(plan-btn) or a tags(cancel-btn). Semantically speaking, buttons should be signifiers that something can be clicked.
Hi I would love feedback on if my code is messy and any tips for improve writing clean code...
I also have a technical question regarding how to make the width of the underline that pops out when my mouse hovers over the menu links shorter?
You have border-bottom for the underline so it will take the complete width of the text. For variable widths, you can use ::after pseudo element.
You can also change .hamburger position from fixed to absolute, because the fixed hamburger appears even after scroll.
You should set a fixed max-width on the .container so that it does cover the whole screen on bigger viewports.
I try my best. If anybody have suggestions how to make it better I would appreciate it. Thanks.
Looks good on desktop as well as mobile...
Just around 1200px to the mobile breakpoint.. things are a little squeezed and start overlapping/overflowing. You can look into that area..
Everything seems to be working, but if you find an issue or have a suggestion on how to improve my code, or just want to ask me a question, I will be happy to hear from you!
Great work man. ✌✌✌
This is by far the best solution for this particular challenge that I've seen.
Just a minor issue is that when changing the tip, the counter starts from undefined to and reaches upto the final calculated value. It's barely visible because of the speed of the counter but i thought I should mention it.
Few improvements apart from this challenge would be to have a default tip and an active state for the bill input field after website load.
any feedback is appreciated, I struggled a bit on the radio buttons, still feel like they're finicky when resizing the window, if you know any solution on how to style them reliably that would be awesome.
Okay so I looked into the issue regarding the radio buttons, tweaked some properties and may have found a fix.
Use a border
.selectionContainer_background .selectionContainer .rewards .csections .radio__control {
border: .125em solid #bdbdbd;
//other properties
}
.circule{
height:23px;
width:23px;
//other properties
}
This might center things exactly.
Also, there can be an issue that will be resolved by removing the transform: translateY(1px);
Any feedback is 100% welcome!
Set a max-width to your .card-container.
The site looks good on both 1440px and 375px but is not fully responsive in the tablet sections. Also in these sections you will find the image is not covering the whole section of the container so you can try and use background images to fix those issues.
I would like to know your feedback as I used this project to learn a bit about bootstrap. I think my bootstrap class naming is a bit off. I might have used some classes not correctly. So if you can let me know, that would be grand. 😃
When typing a large amount(>99), the total/person amount is not completely visible due to overflow..
Everything else seems good and Thank God you have used a default Tip(5%) selected before hand. One minor improvement you can do is just turn the state of Bill amount input field to active.
I still have some refactoring to do and fixes on the mobile menu, but any feedback appreciated
Hey,
The site perfectly matches on 1440px so kudos on that.
But if we move to a larger screens or smaller screens, the site isn't fully responsive because you have a breakpoint on 1024px and a min-width:1440px
On mobile view, use background-position:center with background-image:url(...) because the images(hero, transform etc.) are pushed down
Hello everyone,
Hope you have a good day. This is my second exercise. I would like to receive any feedback or comment to help me improve my skills.
Thanks so much.
Few things to point out,
1.Don't go to mobile view so early, you can shrink to upto 1000px and then go mobile
2.You probably used outline property on hover because you didn't want the content to move the layout which would have happened in case you used border property.
But the outline does not create a rounded hover but a rectangular one.
A fix to that is.. use box-shadow: inset 0px 0px 0px 2px #fff; instead of a border or outline..
Hello everyone, I think I developed this landing page as close to the design ,if you encounter any issues please let me know I will update. Thank you.
The site is not mobile responsive.. so you can work on that.
Also, set a max-width on your items as everything is stretched out on bigger viewports.
