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.

Page layout and content sections

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.

Figma's auto layout feature

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.

Are you ready?

๐Ÿ‘จโ€๐Ÿ’ผ Here's our plan of attack in this exercise:
  1. Build the structural layout for our page
  2. Style the text content (logo, heading + paragraph) section
  3. Style the logo tiles section
๐Ÿ‘จโ€๐Ÿ’ผ Without further ado... let's jump in!