media queries, HTML5, CSS3, position:relative, position:absolute

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

I'm proud that I could better understand relative and absolute positioning. I did it on purpose because there are new techniques to centring elements on the page and there are very few pages where this topic is well explained. I also learnt that I should use viewport heights (vh) instead of percentages to push elements to the centre of the page. I also learnt that I had to subtract half the height of the element so that it got completely centred on the page.

Next time I would try to find ways to reuse code, so that I don't have to write the same things every time I have a new breakpoint.

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

I noticed that there was a top padding on some of my text, but I had set all margins and paddings to zero. That made my layout not match perfectly. After some research, specially on https://www.figma.com/blog/line-height-changes/, I learnt that some fonts have that predetermined surrounding space and we can do nothing about it. I overcame this challenge by mathematically adjusting the relative positioning. Another thing that I didn't understand was why the footer didn't align well with the icon and the author's name. It turns out that the descender of the font is also taken into account for the height of the containing box, and that's why the icon lied above the letters. I could solve this by using the vertical-align CSS property set to text-bottom on the icon. That way, they icon would align with the descender.

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

So far, I could solve all the problems I faced. I will think about this question in future challenges.