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

Add **CSS** properties to the given divs to position them at their assigned places. The `width` and `height` of big boxes are `50%` and small boxes are 50 pixels. The colors used in the challenge are:

For main boxes:
- #ccc 
- #e86f88 
- #79badb 
- #a2dbb1

For small boxes:
- red
- orange
- steelblue
- coral 
- blue
- purple
- gray 

Your output should look like this:
 


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

.main-box {
  width: 50%;
  height: 50%;
  position: fixed;
}

#main-top-left { 
  background: #ccc;
}

#main-top-right {
  right: 0;
  background: #e86f88;
}

#main-bottom-left {
  background: #79badb;
  bottom: 0;
}

#main-bottom-right {
  background: #a2dbb1;
  bottom: 0;
  right: 0;
}

.small-box {
  height: 50px;
  width: 50px;
  border: 2px white solid;
  color: white;
  text-align: center;
  position: absolute;
}

#b1 {
  background: red;
}

#b2 {
  background: orange;
  right: 0;
}

#b3 {
  background: steelblue;
  bottom:0;
}

#b4 {
  background: blue;
  right: 0;
}

#b5 {
  background: purple;
}

#b6 {
  background: coral;
  bottom: 0;
  right: 0;
}

#b7 {
  background: gray;
  bottom: 0;
}

#b8 {
  background: red;
  bottom: 0;
  right: 0;
}

codemirror

// Write you code here




























# Solution review

Let's have a look at the solution first.
 


## Explanation


```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
```
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.

```css
.main-box {
  width: 50%;
  height: 50%;
  position: fixed;
}
```

The `width` and `height` of the bigger boxes are set to `50%` so that they occupy one-fourth of the given space. The position is set to `fixed` because we want to add the `top`, `right`, `left`, and `bottom` properties to fix them in a specific place.

```css
#main-top-left { 
  background: #ccc;
}
```

We set the background color of the first box to `#ccc`. The top left large box does not need `top`, `left` because it ends up on the top left of the page by virtue of the position of the div in the HTML.

```css
#main-top-right {
  right: 0;
  background: #e86f88;
}
```
We set the background color of the second box to `#e86f88`. The `right: 0;` pushes the box to the right side of the web page. 

```css
#main-bottom-left {
  background: #79badb;
  bottom: 0;
}
```

We set the background color of the third box to `#79badb`. The `bottom: 0;` pushes the box to the bottom of the web page. 

```css
#main-bottom-right {
  background: #a2dbb1;
  bottom: 0;
  right: 0;
}
```

We set the background color of the fourth box to `#a2dbb1`. The `bottom: 0;` and `right:0;` pushes the box to the right bottom of the web page. 

```css
.small-box {
  height: 50px;
  width: 50px;
  border: 2px white solid;
  color: white;
  text-align: center;
  position: absolute;
}
```
All the small boxes have a `height` and `width` of `50` pixels and a `2px white solid` border. The color of the text is `white`, and the text is aligned in the center. We have set the position to `absolute` so that we can position them according to the nearest ancestor (main-box).


```css
#b1 {
  background: red;
}
```

We set the background color of the box to `red`. The top left small box does not need `top`, `left` because it ends up on the top left of the page by virtue of the position of the div in the HTML.

```css
#b2 {
  background: orange;
  right: 0;
}
```

We set the background color of the box to `orange`. The `right: 0;` pushes the box to the right of the first main-box.

```css
#b3 {
  background: steelblue;
  bottom:0;
}
```

We set the background color of the box to `steelblue`. The `bottom: 0;` pushes the box to the bottom of the second main-box.

```css
#b4 {
  background: blue;
  right: 0;
}
```
We set the background color of the third box to `blue`. The `right: 0;` pushes the box to the right of the second main-box.

```css
#b5 {
  background: purple;
}
```

We set the background color of the third box to `purple`. By default, the `top` and `left` are set to 0``.

```css
#b6 {
  background: coral;
  bottom: 0;
  right: 0;
}
```

We set the background color of the third box to `coral`. The `bottom: 0;` and `right: 0;` pushes the box to the bottom right of the third main-box.

```css
#b7 {
  background: gray;
  bottom: 0;
}
```

We set the background color of the third box to `gray`. The `bottom: 0;` pushes the box to the bottom of the fourth main-box.

```css
#b8 {
  background: red;
  bottom: 0;
  right: 0;
}
```

We set the background color of the third box to `red`. The `bottom: 0;` and `right: 0;` pushes the box to the bottom right of the fourth main-box.

Solve these challenges related to the CSS position property to evaluate yourself in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

CSS Position Challenge 1

Challenge

Solution review

Explanation