Popular frontend interview questions and answers - Part 1

Hello curious stranger on the internet, in today's article we are going to cover some popular frontend interview questions and their answers. Now this are questions which 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

• Color picker :- The <input type="color"> defines a color picker. We can add a onchange handler to this picker to get selected color 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 new 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 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 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:-

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
}

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 this questions covered in detail in the video below:-

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 comments section.