Recipe page

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

Everything was Awesomeee! :)

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

• You can use Picture element if you want to change the img in each screen size:

(OR) You can also use img { content: url(blabla/images/image-product-mobile.jpg); } in CSS.

• If the aspect ratio of an img is larger than the max-width or max-height of the img then it will overflow!

• If you give a child height: 100% for example, but you have not defined any height for its parent then this won't work!

• Margin is not included in the element size (The box model of the element), The box's area stops at the border — it does not extend into the margin, so the height for example is only the content height + any padding + any border, so if you gave a child a margin top of 30px you won't see its parent stretchs to fit that margin, unless you give the parent a border or padding or a least overflow hidden.

• You can use counter + text in the content attribute like this: { content: counter(point) "."; }