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: Responsive navbar

Let's have a look at the solution first:


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

#navbar {
  background: #4c6ca4;
  overflow: hidden;
  padding: 0 2rem;
}

#navbar li {
  width: 16.5%;
  text-align: center;
  float: left;
  list-style: none;
}

#navbar li a {
  padding: 1.5rem;
  width: 100%;
  display: inline-block;
  text-decoration: none;
  color: white;
}

#navbar li a:hover {
  background: #fff;
  color: #4c6ca4;
}

@media only screen and (max-width: 768px) and (min-width: 500px)
{
  #navbar li {
    width: 50%;
    border: white 1px solid;
  }
  
  #navbar {
    padding: 0;
  }
}

@media only screen and (max-width: 500px)
{
  #navbar li {
    width: 100%;
    border: white 1px solid;
  }
  
  #navbar {
    padding: 0;
  }
}

<html>
 <head>
 </head>
 <body>
   <nav>
     <ul id="navbar">
      <li><a href="#"> Home </a></li>
      <li><a href="#"> Profile </a></li>
      <li><a href="#"> About </a></li>
      <li><a href="#"> Blogs </a></li>
      <li><a href="#"> Contact </a></li>
      <li><a href="#"> Help </a></li>
     </ul>
   </nav>
 </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
#navbar {
  background: #4c6ca4;
  overflow: hidden;
  padding: 0 2rem;
}
```
The `background` color is set to `#4c6ca4`. The `overflow` is set to `hidden`; otherwise, the content will not be displayed as the background property does not take effect. The `padding` property adds `2rem` space on the left and right side of the navbar.


```css
#navbar li {
  width: 16.5%;
  text-align: center;
  float: left;
  list-style: none;
}
```

The `width` of each list item is set to `16.5%` so that they fit equally in the navbar. The text is aligned in the center. The `float` is set to `left` so that the list items are stacked horizontally; otherwise, they would be displayed vertically. To remove bullet points from list items, we used `list-style: none`.


```css
#navbar li a {
  padding: 1.5rem;
  width: 100%;
  display: inline-block;
  text-decoration: none;
  color: white;
}
```

The padding property adds `1.5rem`  space on all sides of the anchor tags. The `width` is set to `100%` so that anchor tags take up all the space of the given list items. The `display` is set to `inline-block` because we want to show the anchor tags as block elements placed inline. The default underline is removed by setting `text-decoration` to `none`. `color: white;` is used to change the default blue color of the anchor elements.

```css
#navbar li a:hover {
  background: #fff;
  color: #4c6ca4;
}
```

While hovering over the list items, the `background` color is changed to white (`#fff`), and the text color is changed to `#4c6ca4`.

```css
@media only screen and (max-width: 768px) and (min-width: 500px)
{
  #navbar li {
    width: 50%;
    border: white 1px solid;
  }
  
  #navbar {
    padding: 0;
  }
}
```

For the screen size between 768 pixels and 500 pixels, two list items appear in a row as the `width` is set to `50%`, and the border of `white 1px solid;` is added around every list item. The padding is set to `0` so that there is no space around the list items.

```css
@media only screen and (max-width: 500px)
{
  #navbar li {
    width: 100%;
    border: white 1px solid;
  }
  
  #navbar {
    padding: 0;
  }
}
```

For the screen size less than 500 pixels, one list item appears in a row as the `width` is set to `100%`, and the border of `white 1px solid;` is added around every list item. The `padding` is set to `0` to have no space around the list items.

The solution to the responsiveness challenge based on the intermediate level CSS is discussed in this lesson. 

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Intermediate Challenge

Solution review: Responsive navbar

Explanation