@turanarican2022
@ad-monir2001
Submitted
What are you most proud of, and what would you do differently next time?
I have solved this challenge and I have learned many things on this project.
What challenges did you encounter, and how did you overcome them?
I have not faced any challenges on this project.
What specific areas of your project would you like help with?
No other.
@turanarican2022
Posted
Hello, I reviewed your code and here my opinions;
it looks good generally but you could have used semantic elements. You can change container div with <main> and the attribution div with <footer>
you used a button for the yellow "Learning" tag which in my opinion is not a good practice at all. I would prefer simply a <span> whose display is set to inline-block. Buttons should instead be used for "triggering actions" like form submit or opening a modal window.
spacing and sizes require some adjustments like avatar image and text are too large. The most important is "description text" would be much nicer with some line-height added.
Nevertheless good job. Keep up! Happy coding!
@OUSSAMAACHICHE
Submitted
Hi 🙋♂️there , this is my solution to this challenge
any feedback are welcome, Thank you 🥰
@turanarican2022
Posted
Hey, congrats for completing the challenge. I want to make some suggestions in a hope they might help:
you used <li> elements for tip percentages. form the UX point of view, we generally use the interface from top to bottom. I entered $100 and clicked for example %15, it only showed hover state but did not stay that way, after that I entered num of people but I had to come up again and click one of percentages again for calculation to happen.
instead you can wrap all elements in a form and this way user can use them in any order. To achieve this you can use radio buttons for percentages, you can style their wrapper box as you like and with css you can hide circles.
and for the reset button, you don't have to use JS if you follow the above suggestion. There is a "form" attribute you can use for any input. By using this, you can tie a button or input element to a form that it is not inside of that form. This concept is important and along your front end journey it will help you a lot. you can have a look at the following resources to understand this concept better:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
keep up the great work!
Marked as helpful
@jamnick02
Submitted
feedbacks and corrections are welcome. I am just a beginner
@turanarican2022
Posted
Congrats, I think your code is quite clean. Keep up the good work!
@philipecortez
Submitted
Need suggestions, keep in mind I'm not a pro user so I don't have the exact measurements
@turanarican2022
Posted
I suggest you to wrap author info in <address> (as MDN also recommends it) instead of <footer>. Semantically author info is tied to the content but not appropriate to present in a <footer>
Though using <article> is a good decision IMO.
Font weights are overall to high.
@dibrooo
Submitted
@turanarican2022
Posted
Congrats for making it to the end.
My suggestion; it would be nicer if all the other options were collapsing when one of them was opened. I mean, more than one option shouldn't be open at the same time
@guillermoanguiano
Submitted
This is my solution :)
@turanarican2022
Posted
I suggest you to make it at most 90% wide on mobile. It looks too crumped
Marked as helpful
@Zayacode96
Submitted
I utilized some CSS variables for the main colors to make implementing the color design easier. Relatively easy project for my beginning skill level, although I drew a blank on some CSS properties like "font-style". I wrote "text-style" instead and was wondering why it didn't work. End up not using it after.
ALL IN ALL, check out my version and code. Would appreciate it. Thank you guys.
@turanarican2022
Posted
All the above comments make sense and I wanna add something. There is another value for min-height. It is 100svh instead of 100vh. It helps mobile devices to show all the content even while some of the screen is occupied with top bar of the browser. You can search YouTube for Kevin Powell's video on this.
Happy coding!
@meisteraxel
Submitted
Hey everyone :)
Would appreciate feedback! What would you do differently or what can I do better next time?
Thanks in advance! Axel
@turanarican2022
Posted
First congrats for making it to the end.
Here my thoughts
-- I would use for the "Learning" card a span instead of h3. -- I would use <address> for the author info (as MDN recomends) -- You should give some line-height to the <p> element as per the original design requires it -- You did give the "Learning" tag too much padding than the design -- Lastly, your card text is too bold
Marked as helpful
@noelhoppe
Submitted
@turanarican2022
Posted
First, congrats for completing the challenge. As per your questions;
Hope these help.
