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.
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:
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>
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
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.
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.
-- 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
First, congrats for completing the challenge. As per your questions;
FlexBox is a good solution here as it is very suitable to use for component based layout,
I used a .container div with a background-color of that faint blue to center the card in the viewport with a height of 100vh and width of 100vw and I used a .card div like you used a .wrapper div
if you want to use rem units, make sure to set font-size: 62.5% in your root html element so that when you size something for 1.2rem for example it becomes 12px