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

# Solution review

Let’s have a look at the solution first.



* {
  margin:0;
}

.box {
  width: 100px;
  height: 100px; 
  position: fixed;
}

#box1 { 
  animation: box1; 
  animation-duration: 8s;
  animation-iteration-count: infinite;
  background: coral;
  top: 0;
  left: 0;
}

#box2 {
  animation: box2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  background: steelblue;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}

@keyframes box1 {  
  25% {
    background: red;
    top: 0;
    left: 80vw;
    border-radius: 50% 0 0 0;
  }
  
  50% {
    background: blue;
    top: 400px;
    left: 80vw;
    border-radius: 50% 50% 0 0;
  }
  
  75% {
    background: green;
    top: 400px;
    left: 0;
    border-radius: 50% 50% 50% 0;
  }
  100% {
    top: 0;
    left: 0;
    border-radius: 50% 50% 50% 50%;
  }
}

@keyframes box2 {  
  25% {
    background: green;
    top: 300px;
    left: 100px;
    border-radius: 50% 50% 50% 0;
  }
  
  50% {
    background: blue;
    top: 300px;
    left: 70vw;
    border-radius: 50% 50% 0 0;
  }
  
   75% {
    background: red;
    top: 100px;
    left: 70vw;
    border-radius: 50% 0 0 0;
  }
 
  100% {
    top: 100px;
    left: 100px;
    border-radius: 0 0 0 0;
  }  
}



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

## Explanation

```css
* {
  margin: 0;
}
```

The `margin` for all the elements by default is set to `0`. 

```css
.box {
  width: 100px;
  height: 100px; 
  position: fixed;
}
```

The `width` and `height` of the boxes is set to `100px`. The `position` is `fixed` to start from a specific location on a page.

```css
#box1 { 
  animation: box1; 
  animation-duration: 8s;
  animation-iteration-count: infinite;
  background: coral;
  top: 0;
  left: 0;
}
```

To add animation to `box1`, we named it `box1`, and the cycle of animation is completed in eight seconds. The animation will keep running for `infinite` iterations. The background color of `box1` is set to `coral`. The box is positioned at the top left corner as the values are set to `0`.

```css
#box2 {
  animation: box2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  background: steelblue;
  top: 100px;
  left: 100px;
  border-radius: 50%;
}
```
To add animation to `box2`, we named it `box2`, and the cycle of animation is completed in eight seconds. The animation will keep running for `infinite` iterations. The background color of `box1` is set to `steelblue`. The box is positioned at `100px` away from the top left corner as the values are set to `100px`. We positioned `box2` `100` pixels away from the `top` and `left` to avoid overlapping between `box1` and `box2`. The `border-radius: 50%;` converts the square box into a circle by rounding the corners of the box.


```css
@keyframes box1 {  
  25% {
    background: red;
    top: 0;
    left: 80vw;
    border-radius: 50% 0 0 0;
  }
  
  50% {
    background: blue;
    top: 400px;
    left: 80vw;
    border-radius: 50% 50% 0 0;
  }
  
  75% {
    background: green;
    top: 400px;
    left: 0;
    border-radius: 50% 50% 50% 0;
  }
  100% {
    top: 0;
    left: 0;
    border-radius: 50% 50% 50% 50%;
  }
}
```

The `@keyframes` rule specifies the animation code for `box1`. 

For `25%`:
- For the first 2 seconds, the background color changes from `coral` to `red` with only the top left corner transformed into a rounded corner. The box is shifted to the left `80vh` from the original position. 

For `50%`:
- From 2 to 4 seconds, the background color changes from `red` to `blue` with the top right corner transformed into a rounded corner. The box is shifted `400px` downwards from the current position.

For `75%`:
- From 4 to 6 seconds, the background color changes from `blue` to `green` with the bottom right corner transformed into a rounded corner. The box is shifted to the right `80vh` from the current position.


For `100%`:
- From 6 to 8 seconds, the background color changes back to `coral` from `green` with the bottom left corner transformed into a rounded corner. The box is shifted `400px` upwards from the current position. Now all the corners are rounded.


```css
@keyframes box2 {  
  25% {
    background: green;
    top: 300px;
    left: 100px;
    border-radius: 50% 50% 50% 0;
  }
  
  50% {
    background: blue;
    top: 300px;
    left: 70vw;
    border-radius: 50% 50% 0 0;
  }
  
   75% {
    background: red;
    top: 100px;
    left: 70vw;
    border-radius: 50% 0 0 0;
  }
 
  100% {
    top: 100px;
    left: 100px;
    border-radius: 0 0 0 0;
  }  
}
```

The `@keyframes` rule specifies the animation code for `box2`. 

For `25%`:
- For the first 2 seconds, the background color changes from `steelblue` to `green` with only the bottom left rounded corner transformed into a squared corner. The box is shifted `300px` downwards from the original position. 

For `50%`:
- From 2 to 4 seconds, the background color changes from `green` to `blue` with the bottom right rounded corner transformed into a squared corner. The box is shifted to the right `300px` from the current position. 


For `75%`:
- From 4 to 6 seconds, the background color changes from `blue` to `red` with the top right rounded corner transformed into a squared corner. The box is shifted `300px` upwards from the current position. 

For `100%`:
- From 6 to 8 seconds, the background color changes back to `steelblue` from `red` with the top left rounded corner transformed into a squared corner. The box is shifted to the left by `300px` from the current position. Now, all rounded corners are squared.


The solution to the challenge of the transform and animation properties is discussed in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Transform Challenge 1

Solution review

Explanation