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

  • Colour picker :- The <input type="color"> defines a color picker. We can add a onchange handler to this picker to get the selected colour as well.
HTML:-
<input type="color" onchange="printSelectedColor(this)">
Javascript:-
function printSelectedColor(context) {
console.log("value passed", context.value);
alert("Your selected color is: "+context.value)
}
  • Email input type:- The defines a field for an e-mail address. Modern browsers already validate the text in this input type to ensure it is a properly formatted e-mail address.

<input type="email">

  • Number input type:- The defines a field for entering a number.

<input type="number">

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

  • Date input type:- The defines a date picker. The user can set year, month, and day from a calendar dropdown automatically using this input type.
  • <input type="date"/>

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

  • Video tag The <video> tag is used to play video content in the browser. We can also add controls to the player using controls attribute.
<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:-

  • Progress element
  • <label for="marks">Progress bar:</label> <progress id="marks" value="32" max="100"> 32% </progress>
  • Meter tag
  • <label for="pc_disk">Disk usage in PC:</label> <meter id="pc_disk" value="2" min="0" max="10">2 out of 10</meter><br>

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