All solutions

What are you most proud of, and what would you do differently next time?

Learning how to use flexbox

What challenges did you encounter, and how did you overcome them?

Changing line height to match the design, I started editing the css directly in the developer tool to test multiple values and see how it changed things faster.

What specific areas of your project would you like help with?

Estimating sizes base on the picture. How do I know the width to set the card? Guess and check? What is a good method at comparing my creation with the image? Having both side by side in the browser?

Also, what are some methods of testing on different screen sizes? What is a good resource to study (besides MDN).

What are you most proud of, and what would you do differently next time?

I am most proud of getting to about 70% completion without needing to check any documentation or search for answers.

Not sure I would change much to my approach next time, I would like to read how others have solved the same problem to compare methods.

What challenges did you encounter, and how did you overcome them?

Mostly centering of blocks both horizontally and vertically. I am still getting comfortable with how margin: auto effects the centering of blocks horizontally.

For vertical centering I ended up using a fixed position and defined the box's location using calc(50% - element_height/2). I feel like there must be a better way to do so without hardcoding the element height, so I am looking forward to learning more about variables and other layouts.

What specific areas of your project would you like help with?

Is there a way to center objects vertically the way we can horizontally using margin: auto? What is the most similar method?