The ultimate guide to CSS interviews, developed by FAANG engineers. Prep faster and get interview-ready in hours with battle-tested, real-world questions and a structured approach to styling and advanced concepts.

In front-end interviews there’s a lot to cover. You have to study up on JavaScript, HTML, and then there’s CSS, and that’s the focus of this course.

This course compiles a comprehensive range of questions that you are most likely to be tested on during front-end interviews. This is an intermediate course with more than 250 coding challenges and multiple choice questions, so there’s plenty of opportunities to get your hands dirty.

You will start by going through several self-assessment exams to get an idea of what you’ll need to study up on. From there, you’ll go into interview questions on styling such as text, colors, backgrounds, and display.

In the latter half of the course, you’ll focus on advanced concepts like Flexbox, block formatting, and working with SVG. In all, this course serves as a stand-alone guide for those who are starting to prepare for front-end interviews.

By the end of this course, you will have gained the confidence to go in and answer any question.

CSS for Front-end Interviews

# Challenge 2: Sign-up page

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


![](/api/collection/10370001/4796942564458496/page/5025101624901632/image/6306858101899264)


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

 - #5e95cf 
 - coral 
 - #14689c 
 - #5ba6d4




/*   Write your code here   */


















<html>
 <head>
 </head>
 <body>
    <section id="signup">
        <h2> Sign Up </h2>
        <p>It will take less than a minute!</p>
        <input type="text" placeholder="First Name"></input>
        <input type="text" placeholder="Last Name"></input>
        <input type="email" placeholder="Email"></input>
        <input type="password" placeholder="Password"></input>
        <button type="submit"> Sign up </button>
        <p>By clicking on sign up, you agree to</p>
        <a href="#">Terms and Conditions</a>
    </section>
 </body>
</html>

codemirror

# 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;
}

a {
  text-decoration: none;
  padding-left: 30%;
}

p {
  text-align: center;
}

#signup button {
  color: #fff;
  background-image: linear-gradient(to right,#14689c,#5ba6d4);
  width: 90%;
  padding: 10px 20px;
  margin: 1em 1.3em;
  font-size: 1em;
  border-radius: 5em; 
}

button:focus {
  outline:none;
  border: 2px solid black;
}

input {
  width: 90%;
  padding: 5px 10px;
  margin: 10px 20px;
  border-radius: 3px; 
  font-size: 1em;
  opacity: 0.8;
  border: 2px solid #5e95cf;
}

input:focus {
  outline: none;
  border: 2px solid coral;
}

h2 {
  text-align: center;
  padding-top: 10px;
}

#signup {
  width: 40%;
  margin: 20px auto;
  background: white;
  color: #5e95cf;
  height: 500px;
  border-radius: 5px;
}

<html>
 <head>
 </head>
 <body>
    <section id="signup">
        <h2> Sign Up </h2>
        <p>It will take less than a minute!</p>
        <input type="text" placeholder="First Name"></input>
        <input type="text" placeholder="Last Name"></input>
        <input type="email" placeholder="Email"></input>
        <input type="password" placeholder="Password"></input>
        <button type="submit"> Sign up </button>
        <p>By clicking on sign up, you agree to</p>
        <a href="#">Terms and Conditions</a>
    </section>
 </body>
</html>













```css
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`.


```css
a {
  text-decoration: none;
  padding-left: 30%;
}
```

`Terms and Conditions` are not underlined because of `text-decoration: none;`. The `padding-left` is set to `30%` because we want the content to stay in the center of the white box.


```css
p {
  text-align: center;
}
```

`text-align` is set to `center` to align the text of the paragraph in the center.


```css
#signup button {
  color: #fff;
  background-image: linear-gradient(to right,#14689c,#5ba6d4);
  width: 90%;
  padding: 10px 20px;
  margin: 1em 1.3em;
  font-size: 1em;
  border-radius: 5em; 
}
```
The text color of the button is white (`#fff`). `linear-gradient` adds a shade transformation directed from left to right as the background color. The `width` is set to `90%`, which is relative to the size of the `signup` section. The `padding` property adds `10` pixels of space on the top and bottom and `20` pixels on the right and left sides. The `margin` property adds `1em` space on the top and bottom and `1.3em` on the right and left sides (the `em` unit is relative to the font-size of the parent element). For the rounded corners, we used `border-radius` the property. 

```css
button:focus {
  outline:none;
  border: 2px solid black;
}
```

When clicking the button, the border of the button is changed to black, and there is no blurred shade around the button because we have set the `outline` property to `none`.

```css
input {
  width: 90%;
  padding: 5px 10px;
  margin: 10px 20px;
  border-radius: 3px; 
  font-size: 1em;
  opacity: 0.8;
  border: 2px solid #5e95cf;
}
```
The `width` is set to `90%`, which is relative to the size of the `signup` section. The `padding` property adds `5` pixels of space on the top and bottom and `10` pixels on the right and left sides. The `margin` property adds `10` pixels space on top and bottom and `20` pixels on the right and left sides. For the rounded corners, we used the `border-radius` property. The text inside the `input` element is transparent because of the `opacity` property. The border property adds a border around the input element.

```css
input:focus {
  outline: none;
  border: 2px solid coral;
}
```
While clicking on the button, the border of the button is changed to coral, and there is no blurred shade around the button because we have set the `outline` property to `none`.

```css
h2 {
  text-align: center;
  padding-top: 10px;
}
```
The text of the `h2` is aligned in the center. With `padding-top`, the text is pushed down by `10` pixels.

```css
#signup {
  width: 40%;
  margin: 20px auto;
  background: white;
  color: #5e95cf;
  height: 500px;
  border-radius: 5px;
}
```

The `signup` page has a `40%` width on the page. The `margin` property adds `20` pixels of space on the top and bottom, and `auto` places the `signup` box in the center. The `background` of the `signup` is set to white. The text color of the element used in the `signup` is set to `#5e95cf` color. The height of the `signup` box is set to 500 pixels. For the rounded corners, we used the `border-radius` property.


Evaluate yourself by solving the given challenges based on the fundamentals of CSS.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Self Evaluation: CSS Fundamentals Challenge 2

Challenge 2: Sign-up page

Solution review: Sign-up page