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: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #ddd;
}

#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: grid;
  grid-template-columns: repeat(3, 1fr);
}

#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: grid;
  text-align: center;
  grid-template-columns: repeat(1, 2fr 3fr);
}

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

/* 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: 900px) {
  #navbar a {
    border: 1px solid #fff;
  }
}

@media screen and (max-width: 500px) {
  
  #maincontent, #main-area {
    grid-template-columns: repeat(1, 1fr);
  }
}

<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>
    <a href="#">FAQ</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

## Example

```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: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: #ddd;
}
```

The `navbar` is displayed as a grid by using `display: grid;`. The `grid-template-columns` property is used to define the structure of the grid items and how they are aligned. The `auto-fit` property wraps around the element when the width is not large enough to fit them in without any overflow. The `minmax` property specifies that each element in the container takes up the minimum width of `150px` and grows `1fr` unit for the maximum available space. The background color set for the `navbar` is `#ddd`. The `minmax` function adjusts the elements in the given space while `auto-fit` wraps around the elements when the screen size shrinks to make the `navbar` responsive.


```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` 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: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

The `maincontent` is displayed as a grid by using `display: grid;`. The `grid-template-columns` property is used to define the structure of the grid items and how they are aligned. The `repeat(3, 1fr)` function specifies that there are three elements in the grid container, and each element takes up equal space.


```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 `2px solid #999` 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: grid;
  text-align: center;
  grid-template-columns: repeat(1, 2fr 3fr);
}
```
The `main-area` is displayed as a grid by using `display: grid;`. The text is aligned in the `center`. The `grid-template-columns` property is used to define the structure of grid items and how they are aligned. The `repeat(1, 2fr 3fr)` function specifies that there is one element in the grid container but divided into two small sections, i.e., the first section takes `40%` (2/5) of the available space, and the second section takes `60%` (3/5) of the available space. The `sidebar` is the first section, and the `menu` is the second section.

```css
#sidebar, #menu {
  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`.


```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: 900px) {
  #navbar a {
    border: 1px solid #fff;
  }
}
```

For screen widths less than `900` pixels, we have added a `1px solid` white border around each anchor tag to differentiate them.


```css
@media screen and (max-width: 500px) {
  #maincontent, #main-area {
    grid-template-columns: repeat(1, 1fr);
  }
}
```

For screen widths less than `500` pixels, the `repeat` function specifies that each element in the `maincontent` and `main-area` takes up the full space available. 

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

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Grid Challenge

Solution review: Responsive mini-website

Example