Atanu Malik• 40
@AtanuMalik
Submitted
Hey everyone, this is the second Frontend Mentor challenge for me. I have used flexbox for the layout and added some hover effects to the image and the button. Feel free to give me some feedback.
Eric Winkelspecht
@ericwink
All comments
- Eric Winkelspecht• 310
@ericwink
Posted
Hi Atanu,
Great work on the challenge! Keep up the great work and keep coding!
It looks like you have your mobile view kick-in at a width of 420px. You may want to consider adjusting that to around 600px. Using the responsive view in inspector in Chrome, the edges of the card hit the sides of the screen at around 575px or so, resulting in the design squishing down until you reach the 420px. If you aren't already using inspector in whichever browser you prefer (Chrome or Firefox are great!) play around with the different view widths and set your breakpoints at the spots where the UI breaks down.
Hopefully this helps!
Marked as helpful
0 - saminstein• 130
@saminstein
Submitted
I couldn't get the older price to stay on the same line as the new price. Also what is the best practice for structuring a card like this?
Eric Winkelspecht• 310@ericwink
Posted
Hi Saminstein,
Great job on this challenge! Looks great and is responsive. I don't see a hover state on your button, so that might be a useful thing to add for user interactivity.
Regarding your question on the prices, I would recommend surrounding both in a container, enabling flex, and separating them with gap.
When approaching how to structure your code, I suggest drawing some things out by hand before you even begin writing a single line of code. Put boxes around elements, separate the items into columns and rows - draw as much as makes sense to you. This will help you figure out how many sub-containers you may need to help keep your elements organized, and will make CSS much easier to manage. This will be key when working with more complex layouts.
Also, don't forget about semantic markup. DIVs can be replaced with SECTION which could also help organize your structure. https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Hopefully this helps!
Marked as helpful
1 - Noah• 70
@noahjrgns
Submitted
My first time using JS in a project
Eric Winkelspecht• 310@ericwink
Posted
Great job on this challenge, Noah! Nicely organized code and it works well. The only feedback I have is you could consider reducing the amount of JS by refactoring to a single function that handles any button press by accepting a parameter:
function selection(input) { selection = input }Each onClick can call the function with its specific argument:
<li><button class="rating-btn" onclick="selection(1)">1</button></li> <li><button class="rating-btn" onclick="selection(2)">2</button></li>etc...
Awesome job for a first JS project! Keep up the great work!
Marked as helpful
1
