Recipe Page

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

Oh, That was sure an simple-complex card. I finally used the width media query. My experience with media queries were the screen only and (orientation: portrait). So I'm kinda proud that the media query just worked in first try.

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

I spent a long time trying to import the font locally, but I couldn't do it. in the end I went to Google Fonts and got the link to import it through their API. I don't know what happened to the file. font-face syntax isn't wrong and the path is right.

I also spend some time in the list-style-type because the The design image didn't let me know whether the marker type was square or circle. I chose circle just because I thought they were a little too round to be squares.

Ordered and unordered list padding also made me scratch my head a little because of the spacing between markers and text. It's just another try and error situation, but I had spent more time since I'm not used to adding spacing to a list. Oh and by the way I couldn't figure out how to center the markers in the vertical center of the element. I made some reasearch and yet don't know how to do it.

I used border-bottom for the little almost imperceptible line diving the topics. I could have used ::before, ::after or even an decoration div for that. It can be an alternative but I think those are more for overlapping elements and animations (which is not the case here).

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

How to make the markers center in the y-axis of the list item text? I thought using flexbox like in the table, but I don't think that's the right way.