Front-end development is one of the most lucrative fields, especially for beginners in web development. Since it requires mostly fundamental skills like HTML, CSS, JavaScript, and a bit of server knowledge, many freshers find front-end development to be a good starting point for a career in full-stack development.
However, the thing is that front-end development is extensive and covers many different tools and techniques. As a result, interview questions for the role of front-end developers are quite diverse and span across different domains.
Check out our free courses to get an edge over the competition.
Front End Developer Interview Questions & Answers
let’s look at the 27 most asked front-end developer interview questions. Go through this article now, and bookmark it for later – to revise before your interview date!
1. What is DOCTYPE, and what does it do?
DOCTYPE is associated with the DTD (Document Type Definition) and stands for Document Type. This allows developers to inform the browser about the version of HTML being used in the specific document. For example, the declaration for HTML 4 will be – <!DOCTYPE HTML4>.
Check out upGrad’s Java Bootcamp
2. What is the relevance of Meta tags in HTML?
Meta tags reside inside the <head> tag and provide the metadata about the entire HTML document. They perform the task of specifying specifications like page character set, page description, page language, page author name, etc. Here’s an example using Meta tags:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”Keywords” content=”Front-end developer interview questions, CSS, HTML, JavaScript”>
Check out upGrad’s Advanced Certification in Cyber Security
<title>Front-end Interview Questions and Answers</title>
</head>
<body>
</body>
</html>
Explore our Popular Software Engineering Courses
3. What do you understand by Lazy Loading?
Lazy loading is one technique for loading content on the browser as per the user’s needs. This optimises resource utilisation and server usage. A real-world example of this can be seen with eCommerce applications like Flipkart or Amazon. When you search for a particular product on these sites, you only get to see the details (price, picture, key features) for the elements available just on the first fold. Then, as you scroll down, the below elements keep loading as and when needed.
4. What do you know about Coercion in JavaScript?
Coercion is a method for converting a variable’s data type. Using coercion, you can convert an object to a boolean, a string to a number, and so on. Here’s a piece of code to explain that better:
var x= 23;
var y = String(x);
typeof(x)
typeof(y)
The output for this code will be Number and String, implying that the data type of variable x is Number, and after coercion, the data type changes to String.
JavaScript supports two types of coercion:
- Implicit: In this, JavaScript itself will change the variable’s data type.
For example: var x = 10;
var y = x + ‘01’;
In this case, the value of y will be ‘1001’, and the data type will be String. JavaScript implicitly converts the Number data type of x into String to concatenate it to a new string ’01’, resulting in ‘1001’ as the final result in the variable y.
- Explicit: Explicit coercion requires the developer to deliberately change the data type using built-in functions such as Number(), Boolean(), String, and such.
For example: var x = 12;
var y = String(x);
In the above code, the data type of the variable x has been explicitly changed from Number to String.
In-Demand Software Development Skills
5. What do you understand about Variable Scope in JavaScript?
Variable scope is used to set the region, or the scope, of control of any variable in a particular JavaScript program. There are two types of Variable Scope in JavaScript:
- Local Scope: Local scope implies that the accessibility and availability of that variable are limited to the function in which it is defined.
For example:
function sum() {
var x = 5;
var y = 2;
}
function alsoSum()
{
var z = x+y;
}
In the above code, the second function will not correctly execute since the variables x and y belong to the scope of the function sum() – they are local to that scope. So, the other variable does not have access to the x and y, so this function will be incorrect.
- Global Scope: Global scope is for variables that are defined outside all the functions. In such a case, any function can access the variable.
For example:
var x = 2; // it is a global variable
function sum() {
var z = 3;
var y = x + z;
}
Since the variable x has global scope in the above code, the function sum() has access to it. That’s why the variable y gets the value 5 (x+z), and this function runs as expected.
6. What is Node.JS used for?
Node.JS is a JavaScript runtime environment that is open-source in nature. It smoothly enables the execution of JS code on the server itself. Before Node.JS, JavaScript code would run on the browser, but NOde changed this completely. Today, Node.JS is extensively used in full-stack development to handle the server part. This allows the developers to work using a single language (JavaScript) across all ends of the web app (using MEAN stack, for example, you can do full-stack development using just the JS language, different frameworks!)
7. Explain NPM
Short for Node Package Manager, NPM is a package tool for Node.JS. It offers an online repository for Node projects and a command-line utility for managing and working with different packages. To access or use any particular Node.JS package, NPM can be invoked and used.
8. How does the server work with web pages or applications that have multilingual content?
When a user accesses these sites, the user’s browser sends information related to the user’s choice of language. This is done using the Accept-Language header. The server reads and uses this information to send back the language in the correct language.
9. What is the data-* attribute in HTML, and is it encouraged to use them now?
Data-* attribute is used to store custom that is private to the web page. This is used to help the developers debug the website or make private changes. The use of data-* attributes is not encouraged because now it’s possible to do the same thing just by using inspect console in the browser.
10. What is IIFE in JavaScript?
IIFE, short for Immediately Invoked Function Expression, is a technique to execute functions as soon as they get created. It is generally used to populate global objects or variables.
11. Do you know about React.JS?
Yes – React is a JavaScript library used to build single-page web apps’ front-end (UI). It was developed by Facebook and was primarily used to handle the view front of their mobile and web applications.
12. External JS/CSS or inline JS/CSS – which one should be preferred and why?
Inline coding increases the document size, leading to slower code execution. With inline coding, the user browser loses the ability to cache CSS and JS code and store it for faster execution. On the other hand, the browser can cache the files with external CSS and JS, leading to improved page load time.
13. Explain the usage of ‘does’ keyword in JavaScript
The concept of ‘does’ keyword is similar to Dynamic Binding in other high-level programming techniques. It is used to refer to the object it is associated with.
For example:
var student = {
fName: “Sam”,
lName : “Harris”,
id : 2123,
completeName : function() {
return this.fName + ” ” + this.lName;
}
};
In the above example, this.firstname will return the variable ‘firstName’ value stored within the ‘this’ function, i.e., Sam. The function fullName() will return the output “Sam Harris,” concatenating the first and last names. This is a useful property when dealing with a large code with multiple functions and similar variable names.
14. What do you know about SQL Injection?
SQL Injection is a technique to insert malicious code in input forms to get access to the SQL database of the website. This is one of the most practiced and well-known hacking techniques, and any website that is poorly designed and has not taken strict server protection measures can easily fall prey to SQL Injection.
15. Explain all the elements of the CSS Box Model
The Box Model in CSS has four elements:
- Content: This covers the main content, including all text, images, and everything else on the webpage.
- Padding: Padding can be understood as the space between the content area and the outer boundary of the page. Think of it as the breathing space of the webpage content.
- Border: Border is the area that covers padding. It is the outer layer of padding.
- Margin: Margin lies outside the border and is used to measure the distance between the periphery of the HTML page and the user’s screen boundaries to ensure the correct orientation of the page.
Please refer to the below image to get more clarity on the four terms:
16. What is ‘mixin’ in CSS and how is it implemented?
Mixin is used to set reusable patterns of property-value pairs. Code authors use it to simplify the code.
For example:
@mixin .rounded10px {
-moz-border-radius: 10px;
}
In this case, the ‘.rounded10px’ can be used anywhere in the HTML code to implement the statement ‘-Moz-border-radius: 10px;’. This gives a lot of portability and readability to the CSS code.
17. What do you know about SASS?
SASS is short for Syntactically Awesome Stylesheets. It is a preprocessor for CSS, which is used to optimise the CSS code. It introduces features like nested rules, mixins, variables, inline imports, and a lot more to organise the CSS code in a much better way and use multiple CSS codes in unison, by using the concepts of mathematics. The browser cannot execute SASS files, so they need to be first converted into CSS before being sent to the browser.
18. Differentiate between cookie, local storage, and session storage.
Cookies, local storages, and session storages are three ways the browser stores information for faster processing and retrieval. Please refer to the below table to get a comprehensive understanding of how these three techniques differ across different metrics.
|
Metric | Cookie | Local Storage | Session Storage |
|
Expiration time | None. But can be manually destroyed by the user or set by the developer for their particular website. | None. |
Expires automatically at the end of each session. |
|
Persistence across multiple sessions | Depends on whether the developer has set an expiration time or not. | Yes, this persists across multiple sessions. |
No, this gets destroyed automatically so it doesn’t persist across sessions. |
|
Communication with the server | Automatically sent to the header via ‘Cookie Header’. | No communication with the server. |
No communication with the server. |
|
Storage capability | 4kb | 5MB |
5MB |
| Accessibility | All windows | All windows |
Only the same tab |
Metric
Cookie
Local Storage
Session Storage
Expiration time
None. But can be manually destroyed by the user or set by the developer for their particular website.
None.
Expires automatically at the end of each session.
Persistence across multiple sessions
Depends on whether the developer has set an expiration time or not.
Yes, this persists across multiple sessions.
No, this gets destroyed automatically, so it doesn’t persist across sessions.
Communication with the server
Automatically sent to the header via ‘Cookie Header’.
No communication with the server.
No communication with the server.
Storage capability
4kb
5MB
5MB
Accessibility
All windows
All windows
Only the same tab
Explore Our Software Development Free Courses
19. What do you know about Progressive Rendering?
Progressive Rendering refers to the method used to increase the rendering content process of any webpage. This is useful for optimising the mobile data usage for the user. Progressive Rendering includes concepts such as lazy loading, async HTML, prioritising visible content, and more.
upGrad’s Exclusive Software Development Webinar for you –
SAAS Business – What is So Different?
20. Explain the usage of ‘srcset’ attribute in <img> tag
‘srcset’ is used for rendering different resolutions of the same image – based on different browsers or devices. This is used to improve user experience and ensure that they see the best resolution of the picture concerning the device they are viewing it on. Using srcset, we can ensure that the browser displays high-quality images on good resolution devices and browsers and low-resolution images on other devices. This is how it can be used:
<img srcset=”picture_low_quality.jpg 480w,
picture_high_quality.jpg 800w”
sizes=”(max-width: 600px) 480px,
800px”
src=”picture_high_quality.jpg”>
21. What are templating languages in reference to HTML?
Templating language is a placeholder language that helps users to input data into any HTML document. Various templating languages work alongside back-end frameworks. For instance, Jinja is one popular templating language that works with Django Flask frameworks in Python. Slim is another templating language used for Ruby and Rails.
22. Explain the variable ‘float’ in CSS.
Float is used to position an element in a relative sense. It defines how the particular element should ‘float’ on the viewport as per different device sizes. This is used to maintain the responsiveness of the webpage, and using float is a recommended practice.
23. Why are <span> and <div> tags used?
<span> tag is mostly used for inline elements while <div> tag is used for blocks. These tags don’t come with any inherent meanings but can be used to specify a block or an inline piece of code in an HTML document to style or format it differently and have greater control over it. For example:
<div id=”info”>
<p>Reach out to <span class=”name”>upGrad</span> for <span class=”courses”> front-end development and full-stack development courses</span></p>
</div>
In the above piece of code, we have defined two pieces of <span>s. One is for the name (upGrad), and the other is for courses. That way, we have more control over these two pieces of code and can format it in other ways to make them stand out.
24. How does MongoDB differ from MySQL?
MySQL is a Relational DBMS that uses SQL as a language to manage all the database-related operations. Being RDBMS, it uses table-like structures to store and manipulate data. On the other hand, MongoDB is a NoSQL database that uses a flat-file JSOL-like format to store all the data. To modify elements in MongoDB, developers need to use MQL (MongoDB Query Language).
25. What do you know about Anonymous Functions in JavaScript?
In normal scenarios, first, the function name is defined, and then the function body. In anonymous functions, on the other hand, the function name is not defined. Just a variable and assignment operators are used, and the function is stored as an object. Then, using variables, we’ll be able to invoke the function. For example:
var add = function(a,b){ console.log(a+b)}
add(4,5);
In the above example, the function is anonymous and prints the correct output 9.
26. When is AJAX used?
AJAX is short of Asynchronous JavaScript and SML, and it facilitates the communication of the webserver and the user’s browser. AJAX is not a programming language. It is used to load and send data to and from the user’s browser even after the page loads. It is a powerful tool to update the data on the user page without the user having to refresh the page. In essence, AJAX allows for real-time refreshing and updating of the page.
27. How would you ensure that your website or application is user-friendly?
To ensure that the website or web application is completely user-friendly, the front-end developers need to work alongside UX (User Experience) designers to conceptualise web pages that solve the problems of the audience it is aimed at. The goal is to create a user-centred experience with optimal design flow, content, and page structure across different browsers and screens.
In conclusion
The above questions are to give you an overview of the breadth of questions your interview can cover. Since the front-end is a task that incorporates different skills like designing, HTML, CSS, JavaScript, AJAX, and more, you will be asked questions on all the relevant skills.
If you are not confident in your skills or are looking to grow as a front-end developer, you’re just at the right place. At upGrad, we offer Programs in Software Engineering that walk you through the entire process of front-end and back-end development and gives you all the necessary tools and skills required to excel in the world of full-stack development. Get yourself enrolled and begin your journey today!
![Scrum Master Salary in India: For Freshers & Experienced [2023]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F486.png&w=3840&q=75)
![SDE Developer Salary in India: For Freshers & Experienced [2024]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F05%2F482-1.png&w=3840&q=75)
