Responsive design

In it's current state, our website actually looks good on all screen sizes, thanks to the max-width container in place.

As in, it's already kinda shippable!

But let's go through the process of implementing all the nuances the designers have weaved through the different screen sizes.

This exercise is going to test your attention to details.

🦉 Actually, it's testing your ability to use Figma's Dev Mode inspection tools 😅

Outside of the obvious major side-by-side layout change on the xl screen size, the majority of the responsive adjustments revolve around typography and spacing.

👨‍💼 The designers have made plenty of subtle but delightful responsive adjustments across the screen sizes. Your job is to make sure that all of them are catered for in your implementation.

🦉 Many designers will argue that spacing and typography makes up for 90% of good design. With that in mind, let's not take these small adjustments lightly.