All solutions

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

I'm glad I figured out pretty quickly that I could use a 45 degree rotated absolute positioned square to get the shape of the bottom of the share tooltip on the desktop design. Next time I think I would reconsider which element to use as the containing block for the share div.

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

I took the time to set up the custom properties I needed from the design system, meaning I didn't have to repeat myself. I may have overused the spacing variables though, I found that there were some cases where it would have been more suitable to set a max-width and have auto margins instead. So I'll try to be aware of that next time.

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

I had a lot of trouble getting the mobile & tablet hero image to be zoomed in while not overlapping the spacing below it and not causing the page to be wider than the viewport. Eventually found a way around it, but not sure if it's the best solution.

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

Something I was wondering about towards the end of this project is how properties should be changed in media queries. There are two ways I can think of: re-assigning the properties directly, or initially setting up the properties to use global custom properties which can then be re-assigned in media queries. I think I've seen both done, but I opted for the former. Interested to know what other people have done.

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

I like the way I've used custom properties to set different colours etc. across the different cards.

Next time I would like to create a CSS reset file which I can import separately to keep the rest of the CSS cleaner & to speed up the development process.

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

I had trouble getting the profile images to be the right size, I ended up manually setting their height given that it does not change between mobile and desktop designs.

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

Interested to know if there's a better way I could've handled the grid in terms of responsive design. I felt I had to use a media query, but I wouldn't be surprised if there's a way this could be done without one.