Building Responsive User Interfaces by Composing Primitive React Components

In this lesson we’ll improve our login page by making it responsive. We’ll continue using the primitive components, we’ve created in the previous lessons. We’ll create a complete layout without writing any custom styles, just by composing primitive components: Box, Flex, Grid, Stack, Text, Heading, Link, Button, and Input.

We’ll split the screen into two sections horizontally: one with the form, and another with some useful information about the app. We’ll change the layout to single-column on mobile devices, and hide one of the columns.

Checkout this lesson’s Git repository for all the components we’re going to use.