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 in their assigned places. The width and height of boxes are `150` pixels. The color used is:

- *steelblue*


Your output should look like this:

<html>
 <head>
 </head>
 <body>
   <div class="container">
     <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod at est maximus ultrices. Sed nec mauris vulputate justo euismod consectetur. Nulla euismod posuere sem, vel interdum sapien interdum sed. Maecenas ante risus, porttitor ac mollis eget, malesuada eget nunc. Duis accumsan commodo diam porttitor blandit. Pellentesque fringilla odio nulla. Curabitur ac nulla nec odio venenatis ullamcorper eget nec ipsum. In sed metus tempor, efficitur orci quis, tincidunt ipsum. Vivamus facilisis auctor ligula.</p>
      <div id="first">First</div>  
     </div>
     <div class="inner"> 
      <div id="second">Second</div>
      <p>Etiam aliquet consectetur vulputate. Vestibulum consequat felis a ligula posuere placerat. Curabitur commodo tortor egestas, molestie leo molestie, faucibus arcu. Praesent tincidunt nisi eget turpis tristique, sit amet rutrum ex sagittis. Pellentesque ut arcu et sapien interdum consequat consectetur nec mi. Nunc volutpat sapien odio, id pulvinar mi mollis eget. Suspendisse sit amet purus suscipit nulla fringilla interdum. Duis egestas eleifend dui, vitae vulputate quam efficitur nec. Cras ac massa quis lacus mollis congue. Etiam rutrum odio sodales lectus interdum, non sollicitudin ex rhoncus. Ut dictum enim sapien, quis mollis dolor efficitur nec.</p>
     </div>
    </div>
 </body>
</html>












body {
  font: 1.2em / 1.5 Helvetica Neue;
}

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

.container, .inner {
  position: relative;
  padding: 0.5em;
  margin: 1em;
  border: 5px solid #ccc;
}

#first, #second {
  width: 150px;
  height: 150px;
  background-color: steelblue;
  color: white;
  text-align: center;
  padding-top: 3em;
  position: absolute;
}

#first {
  top: 0;
  right: 0;
}

#second {
  bottom: 0;
  left: 0;
}

codemirror

<html>
 <head>
 </head>
 <body>
   <div class="container">
     <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod at est maximus ultrices. Sed nec mauris vulputate justo euismod consectetur. Nulla euismod posuere sem, vel interdum sapien interdum sed. Maecenas ante risus, porttitor ac mollis eget, malesuada eget nunc. Duis accumsan commodo diam porttitor blandit. Pellentesque fringilla odio nulla. Curabitur ac nulla nec odio venenatis ullamcorper eget nec ipsum. In sed metus tempor, efficitur orci quis, tincidunt ipsum. Vivamus facilisis auctor ligula.</p>
      <div id="first">First</div>  
     </div>
     <div class="inner"> 
      <div id="second">Second</div>
      <p>Etiam aliquet consectetur vulputate. Vestibulum consequat felis a ligula posuere placerat. Curabitur commodo tortor egestas, molestie leo molestie, faucibus arcu. Praesent tincidunt nisi eget turpis tristique, sit amet rutrum ex sagittis. Pellentesque ut arcu et sapien interdum consequat consectetur nec mi. Nunc volutpat sapien odio, id pulvinar mi mollis eget. Suspendisse sit amet purus suscipit nulla fringilla interdum. Duis egestas eleifend dui, vitae vulputate quam efficitur nec. Cras ac massa quis lacus mollis congue. Etiam rutrum odio sodales lectus interdum, non sollicitudin ex rhoncus. Ut dictum enim sapien, quis mollis dolor efficitur nec.</p>
     </div>
    </div>
 </body>
</html>

# Solution review

Let's have a look at the solution first.


## Explanation

```css
body {
  font: 1.2em / 1.5 Helvetica Neue;
}
```

The `font` shorthand property is used where `1.2em` is the `font-size`, `1.5` is the `line-height`, and the `font-family` is `Helvetica Neue`.

```css
* {
  margin: 0;
  box-sizing: border-box;
}
```

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` of all the elements is set to `0` because we want to add our custom values.

```css
.container, .inner {
  position: relative;
  padding: 0.5em;
  margin: 1em;
  border: 5px solid #ccc;
}
```

The `margin` and `padding` of `1em` and `0.5em` is added around the three divs with a `5px solid #ccc` border. The `position` is set to `relative` so that they stay in their normal position.

```css
#first, #second {
  width: 150px;
  height: 150px;
  background-color: steelblue;
  color: white;
  text-align: center;
  padding-top: 3em;
  position: absolute;
}
```

Both the boxes have a `height` and `width` of `150` pixels with a `steelblue` background color. The text color is set to `white`, and the text is aligned in the `center`. The text is pushed down `3em` using the `padding-top` property. We have set the position to `absolute` so that we can position them according to the nearest ancestor (`inner` divs).

```css
#first {
  top: 0;
  right: 0;
}
```

The `first` box is pushed to the top right of the first inner div using the `top: 0;` and `right: 0;` properties. The `inner` div is positioned `relative`, so we have to set `top: 0;`.

```css
#second {
  bottom: 0;
  left: 0;
}
```

The `second` box is pushed to the bottom left of the second inner box using the `top: 0;` and `right: 0;` properties. The `inner` div is positioned `relative`, so we have to set `left: 0;`.

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 2

Challenge

Solution review

Explanation