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.



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

h2 {
  color: #555;
  text-decoration: underline;
  text-align: center;
}

section {
  display: inline-block;
  background: #ddd;
  padding: 1rem;
  margin: 0.5rem;
  width: 30%;
  text-align: center;
}

p {
  margin-top: 10px;
}

@media screen and (max-width: 500px) {
  section {
    display: block;
    width: 95%;
    margin: 1rem;
  }
}

<html>
 <head>
 </head>
 <body>
    <section>
   <h2>HTML</h2>
   <p> Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. </p>
  </section>

  <section>
   <h2>CSS</h2>
   <p> Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. </p>
  </section>
    
  <section>
   <h2>JavaScript</h2>
   <p> JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. JavaScript is one of the core technologies of the WWW. </p>
  </section>
    
 </body>
</html>







codemirror

## Explanation

```css
* {
  box-sizing: border-box;
  padding: 0;
  margin: 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
h2 {
  color: #555;
  text-decoration: underline;
  text-align: center;
}
```

All the `h2` have text color set to `#555` with text aligned in the `center`. The `underline` is added using the `text-decoration` property.

```css
section {
  display: inline-block;
  background: #ddd;
  padding: 1rem;
  margin: 0.5rem;
  width: 30%;
  text-align: center;
}
```

The `margin` and `padding` of `1em` and `0.5em` are added around the three divs with the `#ddd` background color. The `width` of each section is set to `30%` to take almost one-third of the total width. The sections are displayed in blocks that are aligned inline using `inline-block`. The text in the sections is aligned in the `center`.

```css
p {
  margin-top: 10px;
}
```

To push the text downwards `10px`, we use `margin-top` property.


```css
@media screen and (max-width: 500px) {
  section {
    display: block;
    width: 95%;
    margin: 1rem;
  }
}
```

For screen sizes less than `500` pixels, each section is displayed as a block-level element and takes up `95%` of the width. The `margin` of `1rem` is added along all the sides.

The solution to the challenge on the CSS display property is discussed in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Display Challenge

Solution review

Explanation