Mobile-First

👨‍💼 We have 5 screen size to implement, but let's first focus solely on the mobile design in Figma.

🦉 Tailwind uses a 📜 mobile-first breakpoint system by default, and prefixed utilities like md:text-5xl only take effect at the specified breakpoint and above. With that in mind, building designs for mobile screens first with Tailwind feels very natural. You don't have to do it this way, but it certainly has advantages.

💰 Hot tip: While we're only building the mobile design, you should definitely look at larger screens to see what the design is doing, and infer layout decisions based on that.

Understanding how the page content is laid out as a whole, across all screen sizes, is the key to a successful implementation.

Before jumping into styling the heading, paragraph and list of logos, the first point of focus should be to work out the CSS layout mechanisms involved in this design.

A while back, Figma added great new tools which very much align with how developers think about layouts.

The auto layout feature is a great example of that. It's basically the equivalent of Flexbox, and it completely transforms the way you create designs in Figma.

👨‍💼 Before jumping in this exercise, spend some time inspecting how the various screens are designed in the Figma file. Click on things and look for the "Auto layout" section in the right sidebar. You will learn a lot about the intent of the designers.

👨‍💼 Here's our plan of attack in this exercise:

👨‍💼 Without further ado... let's jump in!