Social Media Card with Responsive footer

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

Implementing the design somewhat close to the design image without having access to the Figma design. I have learnt that it is much harder without the exact measurements given and simply trying to do it 'by eye'. I would use the full design documents wherever possible.

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

Positioning the footer properly was difficult. I found that one way of doing it is to use absolute position, relative to the body element and setting the bottom property to zero. This however has the problem that when the window height becomes small, it will run into and overlap the main content in the body if the body height is set to 100vh.

A workaround I found is that if I instead used the min-height property rather than height, the body will have a minimum height of 100vh, but if the content grows larger than 100vh, it can dynamically resize to be larger than this. This way, the bottom of the body element stays at the bottom of the page and so our 0 bottom still makes sense - it will not run into the main body content.

I also chose not to use the Figma design files this time and instead used just the included JPEG (as to not use credits on a simple project). I found it was quite hard to get the design exactly right and so left it as 'close enough'.

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

I would like to know how to place the footer using flexbox rather than positioning.