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 look at the solution first:





<html>
 <head>
 </head>
 <body>
 <div class="gallerycontainer">

 <a class="thumbnail" href="#"><img class="small-image" src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/6349337230573568" /><img src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/6349337230573568" /> Simply beautiful.</a>

 <a class="thumbnail" href="#"><img class="small-image" src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/5395618183774208"/><img src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/5395618183774208" /> Best way to remove thirst</a>

 

 <a class="thumbnail" href="#"><img class="small-image" src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/5865464671502336" /><img src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/5865464671502336" /> Adorable cat eyes.</a> 

 <a class="thumbnail" href="#"><img class="small-image" src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/6259909485133824" /><img src="/api/collection/10370001/4796942564458496/page/4977607153025024/image/6259909485133824" /> Look at the vastness of the sky.</a>

 

 </div>

 </body>
</html>

.gallerycontainer{
    position: relative;
}

.small-image {
    width: 100px;
    height: 75px;
    border: 0;
}

.thumbnail:hover{
    background-color: transparent;
}

.thumbnail:hover img{
    border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    height: 400px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}

codemirror

## Explanation

```css
.gallerycontainer {
    position: relative;
}
```

We used `position: relative;` to customize the current position of the small thumbnails images.

```css
.small-image {
    width: 100px;
    height: 75px;
    border: 0;
}
```

To create a small images gallery, we fix the height and width of the icons to have consistency. The `border: 0;` is used to remove the default border from the images.


```css
.thumbnail:hover {
    background-color: transparent;
}
```

To retain the background color of the images, we used the `background-color: transparent;` property.

```css
.thumbnail:hover img {
    border: 1px solid blue;
}
```

On hovering over the small images, you will notice a solid `blue` border around the images.

```css
.thumbnail span { 
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
```

The position is set to `absolute` to change the position of the images relative to the parent element. The background color is set to `lightyellow` as you have seen the container of the text. The padding of the `5` pixels is added across all the sides. The color of the text is `black`. A dashed `1` pixel `gray` colored border is added around the images. The text-decoration is set to `none`.


```css
.thumbnail span img { 
    border-width: 0;
    padding: 2px;
    height: 400px;
}
```

The padding of `2` pixels is added around the images inside blue lines. The height of the images is set to `400` pixels.


```css
.thumbnail:hover span { 
    visibility: visible;
    top: 0;
    left: 230px; 
    z-index: 50;
}
```

The content inside the `span` is only visible when hovering on small thumbnails. The left is set to `230` pixels as the small thumbnails take more than `210` pixels space. The `z-index` of the span is set to `50` pixels so that the content is visible along the side of the image.

Solve this challenge related to creating the image gallery for the CSS position property to evaluate yourself in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Position Challenge 3

Solution review

Explanation