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 mini-website

Let’s have a look at the solution first.





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

body {
  font-family: 'Helvetica Neue';
}

/* navbar styling */

#navbar {
  display: flex;
  background: #ddd;
  justify-content: flex-end;
}

#navbar a {
  padding: 1rem 1.5rem; 
  text-decoration: none;
  color:#444;
  text-align: center;
}

#navbar a:hover {
  background: #444;
  color: #ddd;
}

/* Maincontent section styling */

#maincontent {
  display: flex;
  justify-content: space-between;
}

#maincontent section {
  border: 2px solid #999;
  margin: 10px;
  padding: 10px; 
  background: #ddd;
}

#maincontent section  h3 {
  text-decoration: underline;
  text-align: center;
}

/* sidebar styling */

#main-area {
  display: flex;
  text-align: center;
}

#sidebar, #menu {
  flex-basis: 30%;
  border: 2px solid #999;
  background: #ddd;
  margin: 10px;
  padding: 0.5rem;
}

#menu {
  flex-basis: 70%;
}

/* footer styling */

footer {
  background: #ddd;
  text-align: center;
  padding: 10px; 
  margin: 0 10px;
  font-weight: bold;
}

/* Media query for screen size less than 600px */

@media screen and (max-width: 500px) {
  #navbar, #maincontent, #main-area {
    flex-direction: column;
  }

  #sidebar, #menu {
    flex-basis: 100%;
  }

  #navbar a {
    border: 1px solid #fff;
  }
}



<html>
 <head>
 </head>
 <body>
    <nav id="navbar">
    <a href="#">home</a>
    <a href="#">Profile</a>
    <a href="#">Products</a>
    <a href="#">Contact</a>
    <a href="#">Help</a>
  </nav>

  <main id="maincontent"> 
    
    <section>
      <h3>Paragraph 1</h3>
      <p> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque expedita voluptatum reprehenderit nihil ea ipsa et consequatur magni sint libero distinctio debitis minima aliquid nulla ipsum veritatis, totam eligendi.
      </p>
    </section>

    <section>
      <h3>Paragraph 2</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, fugiat veniam perspiciatis accusamus dolores, amet magni maxime pariatur hic, quasi nihil beatae nobis alias facilis voluptas! In ullam rem vitae?</p>
    </section>

    <section>
      <h3>Paragraph 3</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ab, nobis molestias, mollitia amet, quos esse iusto quae commodi voluptas iure consequatur eum numquam ullam animi id delectus possimus architecto.</p>
    </section>
  </main>

  <div id="main-area">
  <aside id="sidebar">
    <h3>Side bar</h3> 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque eaque ratione corrupti illo atque delectus suscipit quisquam ducimus perferendis rem voluptatum cumque officia, nam voluptas.</p>
  </aside>   
  
  <main id="menu">
      <h3>Main content</h3> 
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque eaque ratione corrupti illo atque delectus suscipit quisquam ducimus perferendis rem voluptatum cumque officia, nam voluptas, iusto officiis architecto magnam repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit numquam cumque perspiciatis dolorum aliquam quod consectetur molestiae ut, asperiores, saepe dolores tempora in. Ipsam sequi, non laborum ex consequatur ab.
  </main>
 </div>

 <footer> &#169; 2022 Testing website. All Rights Reserved. </footer>

 </body>
</html>

codemirror

## Explanation

```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 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
body {
  font-family: 'Helvetica Neue';
}
```

The `font-family` used in the challenge is `Helvetica Neue`.

```css
#navbar {
  display: flex;
  background: #ddd;
  justify-content: flex-end;
}
```
The `navbar` is displayed as a flexbox by using `display: flex;`. The background color of the `navbar` is set to `#ddd`. The `justify-content` property is used to align the flex items at the end (right side). 

```css
#navbar a {
  padding: 1rem 1.5rem; 
  text-decoration: none;
  color:#444;
  text-align: center;
}
```

The `padding` of `1rem` is applied on the top and bottom, and `1.5rem` is applied on the left and right of each anchor tag. The default underline is removed using `text-decoration: none;`. The text color used is `#444`, and the text is aligned in the `center`.

```css
#navbar a:hover {
  background: #444;
  color: #ddd;
}
```

When hovering over each anchor tag, the background color is changed to `#444`, and the text color is changed to `#ddd`. 

```css
#maincontent {
  display: flex;
}
```
The paragraphs are displayed as flexboxes by using the `display: flex;`. 


```css
#maincontent section {
  border: 2px solid #999;
  margin: 10px;
  padding: 10px; 
  background: #ddd;
}
```

The sections in `#maincontent` have a `margin` and `padding` of `10` pixels on each side with a `2px solid` dark grey border. The background color is set to `#ddd`.

```css
#maincontent section  h3 {
  text-decoration: underline;
  text-align: center;
}
```
The `h3` in all sections are aligned in the `center` and have an `underline`.


```css
#main-area {
  display: flex;
  text-align: center;
}
```

The `sidebar` and `menu` are displayed as flexboxes by using `display: flex;` for the `main-area` div. The text for all flex items is aligned in the `center`.

```css
#sidebar, #menu {
  flex-basis: 30%;
  border: 2px solid #999;
  background: #ddd;
  margin: 10px;
  padding: 0.5rem;
}
```
Both the `sidebar` and `menu` have a `margin` and `padding` of `10` pixels and `0.5rem` on each side with a `2px solid #999` border. The background color is set to `#ddd`. The `width` of the `sidebar` and `menu` is set to `30%` using the `flex-basis` property.


```css
#menu {
  flex-basis: 70%;
}
```
we can override the `width` of the `menu` to `70%` using the `flex-basis` property.


```css
footer {
  background: #ddd;
  text-align: center;
  padding: 10px; 
  margin: 0 10px;
  font-weight: bold;
}
```

The `footer` has a `margin`  of `10` pixels on each side and a `padding` of `10` pixels on the left and right side only because the `main-area` flex items already have a margin of `10` pixels. The background color is set to `#ddd` and the text is aligned in the `center`. The text is made `bold` using the `font-weight` property.

```css
@media screen and (max-width: 500px) {
  #navbar, #maincontent, #main-area {
    flex-direction: column;
  }

  #sidebar, #menu {
    flex-basis: 100%;
  }

  #navbar a {
    border: 1px solid #fff;
  }
}
```

For screen sizes less than `500` pixels, the default direction of flex items changes to a `column`, and each item then takes the full width available. The `sidebar` and `menu` have to take full width so we added `flex-basis: 100%;` otherwise, they would respectively take `30%` and `70%` widths. We added a `1px solid` white border around each anchor tag to differentiate them.

The solution to the challenge of the CSS flexbox property is discussed in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Flexbox Challenge

Solution review: Responsive mini-website

Explanation