Screens: Sign-In

Learn how to design the sign-in screen in this lesson.

We'll cover the following

While the lower levels tend to be about styling and controlling inputs, the middle layers,sometimes called screens or panels, tend to be about layout. We need to determine how much space each thing will take and how to arrange them. These screens are the Sign-in screen, Win screen, Lose screen, and the Play screen.

Sign-in screen

We begin by creating a new file called screens.js and importing the pieces from the other files. We then create a grid template div and a div that is positioned within the template, as well as a couple of other variations.

Get hands-on with 1200+ tech skills courses.