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.

html {
  font-size: 10px;
}

body {
  background-color: coral;
}

h1 {
  color: white;
  font-size: 5rem;
  text-shadow: 5px 5px 1px steelblue,
                3px 3px 1px steelblue;
  text-align: center;
  letter-spacing: 4px;
}

h1 + p {
  font-weight: bold;
}

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

p {
  font-size: 1.5rem;
  color: white;
  font-family: Helvetica Neue;
  line-height: 1.5;
  letter-spacing: 1px;
}

<html>
 <head>
 </head>
 <body>
    <h1>Republic of Maldives</h1>
    <p>The Maldives is an old nation and well over 2,500 years according to legends
       of the southern atolls.</p>
    <p>The Maldives, officially the Republic of Maldives,
       is a small island nation in South Asia, located in the Arabian Sea of the Indian Ocean.
       It lies southwest of Sri Lanka and India, about 1,000 kilometres (620 mi)
        from the Asian continent. The chain of 26 atolls stretches from Ihavandhippolhu
         Atoll in the north to Addu Atoll in the south to the equator.</p>
 </body>
</html>














codemirror

## Explanation

```css
html {
  font-size: 10px;
}
```
We have assigned the `10` pixels `font-size` to our HTML tag, which is the root element of our page. (We can also use `:root` selector to assign the custom `font-size` to our webpage.)


```css
body {
  background-color: coral;
}
```

We have set `coral` as the `background-color` to our `body` tag. 


```css
h1 {
  color: white;
  font-size: 5rem;
  text-shadow: 5px 5px 1px steelblue,
                3px 3px 1px steelblue;
  text-align: center;
  letter-spacing: 4px;
}
```

The text color for the `h1` tag is set to `white`. The `font-size` is increased to `5rem` (1 rem = 1 x root element pixels) so that `5rem` is equal to 50 pixels. In `text-shadow: 5px 5px 1px steelblue,  3px 3px 1px steelblue;`, the `5px 5px 1px steelblue` is the horizontal shadow, and `3px 3px 1px steelblue` is vertical shadow value where `1px` is blur-radius. The text is aligned in the `center`. The spacing between each letter is `4` pixels.


```css
h1 + p {
  font-weight: bold;
}
```
The first paragraph is selected, and the `font-weight` is set to `bold` using the adjacent sibling selector. 

```css
p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}
```
The spacing between letters is `4` pixels, and the spacing between words is also `4` pixels for the first lines of the paragraphs using the `::first-line` pseudo-element selector.

```css
p {
  font-size: 1.5rem;
  color: white;
  font-family: Helvetica Neue;
  line-height: 1.5;
  letter-spacing: 1px;
}
```

The `font-size` of the paragraphs is set `1.5rem` (15 pixels). The text `color` is set to `white`. The `font-family: Helvetica Neue` is used for the paragraphs. The space between each line is set to `1.5` (15 pixels). The spacing between letters is set to `1` pixel. 

The solution to the challenge of text, color, and font properties is discussed in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Text, Color, and Fonts Challenge

Solution review

Explanation