Popular frontend interview questions and answers — Part 1

Cover image

Hello curious stranger on the internet, in today’s article we are going to cover some popular frontend interview questions and their answers. Now, these are questions that I have personally encountered a lot of times while I was looking for new job opportunities and hope that it helps you all as well. So let’s begin…

Q1. What are tags/elements introduced in HTML5?

Some of the interesting elements introduced in HTML5 are:-
1. Form input elements

HTML:-
<input type="color" onchange="printSelectedColor(this)">
Javascript:-
function printSelectedColor(context) {
console.log("value passed", context.value);
alert("Your selected color is: "+context.value)
}

<input type="email">

<input type="number">

This allows us to restrict the input to only numeric values.

There are a lot of other new input types which you can explore as well. For now, we are going to see other HTML5 tags which you explain in an interview.

2. Media elements

<div>
<video src="video-url-added-here" controls="true" width="300px"/>
</div>

Similarly, we can use the audio tag for adding audio as well.

3. Miscellaneous elements
We also have some other interesting elements like progress element and meter tag:-

You can check out demo for some of this tags below:-

HTML tags

Q2. How to center a div using CSS?

There are three ways to center a div using CSS
First is transform translate property:

HTML:

<div class="content">Text content to centered</div>

CSS:

.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

The second method is using flex:
HTML:

<div class="container"><!-- flex container -->
<div class="box"><!-- flex item -->
<p>Child container content 1</p>
</div>
<div class="box"><!-- flex item -->
<p>Child container content 2</p>
</div>
</div>

CSS:

.container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
}
.box {
// box related CSS
}

The third method is using grid:

HTML:

<div class="container"><!-- flex container -->
<div class="box"><!-- flex item -->
<p>Child container content 1</p>
</div>
<div class="box"><!-- flex item -->
<p>Child container content 2</p>
</div>
</div>

CSS:

.container {
display: grid;
place-items: center;
}
.box {
// box related CSS
}

You can also find the answers to these questions covered in detail in the video below:-

Youtube Video

This finishes part 1 in the article series. I will try to cover further questions in the upcoming parts of this series soon. If you found this article useful feel free to upvote it and mention your feedback in the comments section.

Blogger,web and hybrid applications developer