Search⌘ K
Home
Courses
CSS for Front-end Interviews

Self Evaluation: CSS Fundamentals Challenge 2

Explore styling a signup page using core CSS fundamentals including box-sizing, padding, margins, color use, and interactive states. Understand how to center content, apply gradients, and control focus outlines to prepare for front-end interviews.

We'll cover the following...

Challenge 2: Sign-up page

Style the signup page so that your output looks like this:

The height of the output window is 550 pixels and colors used are:

  • #5e95cf
  • coral
  • #14689c
  • #5ba6d4

Solution review: Sign-up page

Let’s take a look at the solution first.

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: #5e95cf;
}

All the elements must have a border-box around them so that the padding and border are included in an element’s total width and height. The default margin and padding of all the elements are set to 0 because we want to add our custom values. The background color of the page is set to #5e95cf.

 ...