Front End Developer Interview Questions

1. What skills does a front-end developer need?

Frontend developers utilize different web technologies to change coded

data into user-friendly interfaces. Many among these are Cascading Style
Sheets (CSS), JavaScript, HyperText Markup Language (HTML), etc.
Mentioned below are brief explanations of these technologies
that frontend developers must be acquainted with.

 HTML: HyperText Markup Language depicts the content on the page like
buttons, links, headings, paragraphs, and lists. It is the building block of
websites and is utilized to define and mark content, so a browser shows it
correctly. For instance, on a blog post, an image can be seen as an <img> in
HTML code, so browsers will understand that they have to display an image.
 CSS: CSS stands for Cascading Style Sheets and is accountable for the style
of your web pages such as animations., colours, and layouts. CSS appears
more like a group of instructions that gives structure and style to a webpage
than a programming language. It enables programmers to control a web
application or website's layout, formatting, and presentation. While HTML
depicts elements on a page, CSS is accountable for how users see the
content. For instance, it handles the border, alignment, size, of an image in a
blog post.
 JavaScript: JavaScript is one of three main elements, in front-end web
development, that is required to end up with a web page that can be
 rendered accurately. It is now challenging to visualize websites without
JavaScript as it allows programmers to make the sites interactive. This
programming language can transform website content on the basis of a
user’s action. For instance, at the top of the page, when you click on the
Menu button, it will display a dropdown list of options or when you click on a
button, it will toggle back and forth between closing and opening the Menu.
JavaScript is great at figuring out the kind of browser being utilised, and then
rendering the page in such a way that it is not only compatible with that
page, but that it works the way it is designed. Using plugins is made easier by
JavaScript. When complicated dynamic interactions are required for a site,
JavaScript can be implemented to design its framework instead of simply
depending only on HTML.
 CSS Frameworks, Libraries, and Preprocessors: Once you understand
the fundamentals of CSS, then you can begin to work with various libraries
and frameworks. These tools were designed as a way to help hasten the
development process. Frameworks like Tailwind CSS, and Bootstrap let you
incorporate the catalogue of classes into your webpage. Hence, you end up
with mobile-friendly and professional designs. There are ample choices on the
market and you don't require to know them all. It's often useful to look at
related jobs and check what technologies they're employing. Then you can
concentrate on the most in-demand skills.
 Testing and Debugging skills: As you are creating your application, there
will be mistakes in your code that require to be fixed. Debugging is the act of
recognizing those bugs and resolving them. Another essential skill to know is
debugging. Documenting tests for your code is a way to assure that your
code is accomplishing what it is meant to do.
 Version control: The way of tracking and the modifications to the project's
code is version control. Git is regarded as a popular software that is utilized to
track your code. If your code gets messed up, you can utilize Git to go back to
an earlier version of your code rather than manually rewriting everything.
Learning Git also lets you cooperate with others on a team and make
modifications to the same code base from various locations. It is advised that
you should start to learn Git and use a service like GitHub to host your
projects.

2. Define HTML meta tags.

 Meta tags are passed as pairs of name/value.

 Meta tags can include data about encoding, document title, character
description, etc,
 Meta tags fit inside the HTML page’s head tag.
 Meta tags are not displayed on the page but it is to be shown on the browser.

3. Differentiate between div and span?

DIV SPAN

It is utilized for separating the elements that Span is utilized for grouping inline
are block-line, line break before and after it. elements in the HTML doc.

It contains global attributes for the certain It includes certain, global and event
DIV SPAN

element in HTML documents.

attributes.

In a paragraph, <span> tag is utilized

At times para tag <P> is utilised for inner
to use a CSS style for certain words
side of the <div> tag.
with the selected font sets.

In div tag, we make use of borders with In the Span tag, we utilize specified
width height with specified color pixels to color coding to depict the front-end
emphasize the front end document. document.

4. What is React JS?

An open-source front-end JavaScript library, ReactJS is used primarily for

building user interfaces, especially for one-page applications. Also, it is
utilized for handling the view layer for web and mobile apps. React lets
programmers build large web applications that can modify data, without the
need to reload the page. The main objective of React is to be quick,
scalable, and easy. It functions only on user interfaces in the application
and corresponds to the view in the MVC template. It can be utilized with a
combination of other JavaScript frameworks or libraries, like Angular JS in
MVC.

5. Describe the advantages of REST web services?

Listed below are some of the advantages of REST web services:

 The curve of learning is simple since it works on the HTTP protocol.

  No contract clears between server and client, so roughly coupled
application.
 REST approaches can be effortlessly tested on the browser.
 It also backs multiple technologies for the transfer of, for instance, image,
JSON, XML, text, etc.
 It is a lightweight protocol.

6. How browsers render the UI?

The primary responsibility of the rendering engine is to highlight the

requested page on the browser’s screen. Rendering engines can show XML
and HTML images and documents. If you’re utilising additional plugins, the
engines can also exhibit various documents like PDF.

 Receives the requested document: The contents of the requested

document is obtained by the rendering engine from HTML’s networking
layer.
 Construct the DOM tree: Parsed the HTML to the parsed tree and then set
up the DOM tree, making use of it.
 Construct the CSSOM: CSSOM stands for CSS Object Model. Post the
construction of the DOM tree, it identifies a link tag in the head section,
which references the external style.css CSS style sheet. So, it parsed the
CSS file in CSSOM tree, something which the Browser can comprehend as
the DOM tree.
 Construct the Render tree: Utilise the HTML DOM tree coupled with the
styling data of the CSSOM tree to set up a render tree. Render tree is the
graphical depiction of the HTML, with the corresponding CSS. This tree
enables painting the contents in their right order. Every node in the Render
Tree is regarded as a renderer. The Render tree looks like this:
 Layout: When the renderer is developed and incorporated into the tree, it
does not have a size or position. Computing these values is defined as
layout. We use the coordinates system to position the element, such as the
position of the root renderer is 0,0. The layout continues recursively via a
part of the entire renderer hierarchy, calculating geometric info for every
renderer that needs it. Beginning the layout process implies allowing
every node the exact coordinates where it should show up on the
screen.
 Painting of the Render Tree: The renderer tree is traversed in this stage
and the renderer’s paint() method is hailed to exhibit the content on the
screen. For good UX, the rendering engine will aim to exhibit the contents
on the screen as soon as possible. It will not stand by until all the HTML is
parsed to develop and layout the render tree.

7. What is a Grid system in CSS?

CSS splits the page into grids and utilizes those grids to handle the HTML
content. Utilizing the Grids, CSS can stack and highlight various elements in
different parts of the grids.
8. Describe the distinction between Class and Prototypal inheritance in
Javascript?

From most other programming languages, Inheritance in JavaScript is

different. JavaScript's object system is prototype-based, not class-based.
Objects in JavaScript are just a set of value pairs and a name (key). Talking
about inheritance, JavaScript just has one construct: objects. Each object
has a private property that includes a link to another object named its
prototype.

9. Explain user-centered design?

An iterative design procedure, User-centred design lets the designers focus

on the clients and their needs in every design process phase. The user-
centered design calls for linking users in the design process via a variability
of design and research techniques to make usable and highly accessible
products. User-centered design demands that designers should utilize a
combination of generative (such as brainstorming) and investigative
(interviews and surveys) methods and instruments to create an
understanding of user requirements.

10. What is ClickJacking?

ClickJacking is a security attack where the user is fooled to click on

something while they assume they are clicking another thing. The attack
mostly happens by the HTML frames. ClickJacking is also regarded as the
user interface redressing. It lets the user think that they are utilising a
normal UI in the web page, but in actuality, there is an unseen UI in control;
you can think of it as the user interface being redressed. When users click
on one thing, assuming it to be secure and safe, the hidden UI executes
another action.

11. Tell me when and why should I make use of Webpack?

While creating a complicated front-end application with tons of non-code

static possessions, for instance, CSS, fonts, images, etc, then, of course,
you should make use of Webpack since it has a lot of amazing benefits.

If you have a small application that doesn't have a lot of static resources
and you only have to create one file of JavaScript to help the customers,
then Webpack should be more overhead than needed.
12. Mention three ways to decrease page load time?

There are numerous things accountable for lowering page load time. Let us
look at the three best ways to reduce its loading time:

 Image Optimization: It is always advised to scale your videos and pictures

before uploading them to a page.
 Browser Cache: The utilization of cache will boost speed for pages that
you have visited already.
 Optimize and compress content: Compressing the content of a website
decreases the load time of a page to a great extent.
 StyleSheet Reference on Top: Setting stylesheet reference to the header
of a doc allows your page to load quickly.

13. How does the server hanger the page in which content is present in
several languages?

When an HTTP request is sent to the server by the user, the user browser
also sends a chunk of additional information regarding the language
preference as the Accept-Language header. Then the server reads the HTTP
request with the Accept-Language header and sends the document version
back along with the right language and declares the language attribute
Lang in the HTML tag.

Example:

14. Why did we utilize the data- the attribute in HTML and why it is now
advised not to use?

Generally, Data-* attributes of HTML are utilized to accumulate the custom

data, which is private to the web application or page. This custom data is
for personalizing the JavaScript of the user as per the user action on the
web page.

These days, Data-*attributes are not advised to utilize as the user can
change the attribute easily just by utilizing the browser inspect console.

Example:
15. Mention the benefits of CoffeeScript over JavaScript?

 Write less do more − For a huge code in JavaScript, we require

comparatively a very less number of lines of CoffeeScript.
 Easily understandable − The shorthand form of JavaScript is CoffeeScript,
its syntax is quite simple as compared to JavaScript. Making use of
CoffeeScript, we can document clean, clear, and easily discernible codes.
 Reliable − CoffeeScript is a secure and reliable programming language to
create dynamic programs.
 Readable and maintainable − CoffeeScript offers aliases for most of the
operators, making the code readable. Also maintaining the programs written
in CoffeeScript is effortless.
 Class-based inheritance − JavaScript does not have classes, in place of
them, it offers powerful but complicated prototypes. Unlike JavaScript, in
CoffeeScript, we can make classes and inherit them. Additionally, it also
 provides instant and static properties along with mixins. It utilizes
JavaScript's native prototype to construct classes.
 No var keyword − There is no requirement to utilize the var keyword to
form a variable in CoffeeScript, hence we can evade accidental or
undesirable scope deceleration.
 Avoids problematic symbols − There is no requirement to utilize the
problematic parenthesis and semicolons in CoffeeScript. In place of curly
braces, we can utilize whitespaces to distinguish the block codes such as
functions, loops, etc.
 Extensive library support − In CoffeeScript, we can utilize the JavaScript
libraries and vice versa. Thus, we have access to a myriad set of libraries
while operating with CoffeeScript.

Front End Developer Interview Questions for

Experienced
16. What is stringify?

IN a JSON method, stringify is used to transform a JavaScript object into a

string. JSON is a common structure to receive and send data between the
web server and the client, and when we wish to send data to the
webserver, the object ought to be a string.

Example:

17. State all the elements of the CSS Box Model.

In its BOX model, CSS comprises 4 elements:

  Content – Displays the main content and the text of the web page.
 Padding – This area encircles the content.
 Border – The border is the padding's outer layer.
 Margin – Margin is the area outside the border.

18. What is Progressive Rendering?

Progressive rendering is a process that is utilized generally to boost the

web page's rendering content process. Now the rendering process is
utilized in modern web development to enhance the mobile data uses of the
user, async HTML fragments, prioritizing visible content, and lazy loading of
images.

19. In an image tag, what is the benefit of the srcset attribute?

srcset is utilized when we wish to generate several resolutions of the exact

image on several devices. This improves the UI. The browser will display
low resolution on low-end devices, and high resolution of an image on high-
end devices.

Example:
<img srcset="picture_low.jpg 480w,
picture_high.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="picture_high.jpg"
alt="Elva dressed as a fairy">
20. Mention the difference between MySQL and MongoDB?

 MySQL: It is a Relational Database Management System (RDBMS), which

makes use of SQL as a standard language to handle its database. Like
different relational database management systems, MySQL makes use of a
table-like structure to stow data.
 MongoDB: MongoDB is a NoSQL database that utilizes the JSON-like
structure to stow data elements. To modify and access data in MongoDB, the
programmer ought to make use of the MongoDB Query Language (MQL).

21. Define the Anonymous function in JS?

Generally, the function name is defined when we define the function itself,
in normal user-defined functions, but in the case of an anonymous function,
the function name is not defined. Here we make use of an assignment
operator and variable to stow the function as an object, then utilizing that
variable, we will be capable to invoke the function itself.

Example:

22. What do you know about the CSS image sprites and why it is utilized?

CSS image sprites assist to render numerous images in a single line image.
In a nutshell, the CSS sprites merge numerous photos into a single large
image. If a web page comprises different images, then it would raise its
loading time as for every image the browser has to send a distinct HTTP
request, but with the help of sprites, we have a single image to request.

23. Suggest some ways on how to fix the browser-specific styling issue?

 We can make a distinctive stylesheet for various browsers making use of

server-side rendering.
  Another method is utilizing a library such as Bootstrap, which already has
the code to manage the browser-specific styling issue.
 Reset or Normalize CSS can also be utilized. Multiple 3rd party plugins equip
libraries for browser styling issues.

24. Mention the pitfalls for using a CSS Preprocessor like Sass?

 An extra tool for the preprocessor is required.

 Preprocessor files can not be performed directly on the browser.
 Slow re-compilation of the preprocessor.
 For the preprocessor, you ought to know extra tools, which improve the
learning curve of CSS.

25. Suggest how can we optimize our front-end page.

 The consumption of resources can be reduced by the pages by enhancing

the server response.
 Utilize JavaScript and External CSS instead of internal or in-line.
 Utilize the framework to ensure the front-end becomes more responsive to
different devices.
 Open-source libraries can be used to manage the browser-specific styling
issue.
 Make use of progressive loading like Lazy Loading to enhance the rendering
of heavy elements, like videos and images.
 Connect the style sheet in the header and script at the top of the HTML's
body tag.
 Utilize browser storage to keep user-specific private data.

26. What is the difference between attribute and property?

Attributes are an element of an HTML document while properties are a part

of the Document Object Model (DOM).

Example: <input type="text" value="Tech">

Here, value and type are the attributes of HTML, but when the statement is
read by the browser and parses this code it will make a DOM with different
properties, like accept, autofocus, accessKey, baseURI, checked,
childElementCount, align, alt, childNodes, children, classList, className,
attributes, and clientHeight.

Example:

var data = document.querySelector(input); // here we created a document

object of input tag
console.log(input.getAttribute('value')); // tech // getting the attribute
value
console.log(input.value); // tech // getting the property of the input
object
27. State the difference between == and ===?

== denotes abstract equality operator, and it inspects if two values are

equal or not apart from their data types. Automatically, it transforms the
type of both the operands and compares them.

Example:

1=='1'; //true
1==1; // true

=== denotes identity equality operator, and it inspects the values of both
the operands and their data type. The outcome of the operation will be true
considering both the operands are equal and have the same data type, or
else it returns false.

Example:

1===1 //true
1==='1' // false
28. Why do we utilize the “use strict”; statement?

The ‘use strict’ statement sets a few restrictions in the script. Typically, it
is utilized to facilitate the strict mode of the script, making sure there could
be no loose coupling like undeclared variables.

29. Name the major HTTP requests

HTTP
Description
Requests

It is sent when we wish to recover data from the server. GET request
GET
is the most typically used HTTP request.

The HEAD is a reaction that is the same as the GET request but
doesn’t possess a message-body in the response. The HEAD request
method is beneficial in retrieving meta-data that is documented as
HEAD
per the headers, without transferring the entire content. The method
is commonly utilised when testing hypertext links for recent change,
accessibility, and validity.

TRACE requests are implemented to invoke a remote, application

loop-back test along the path to the target resource. The TRACE
TRACE method lets users to witness whatever message is being received at
the other end of the request chain so that they can utilise the data
for testing or diagnostic functions.
HTTP
Description
Requests

This request is utilized to transmit data from the user to the server.
By submitting web forms, these requests can be made. The POST
POST request is generally utilized to build data in the database.
For instance, when we build a new account on any webpage, we
make use of the POST request.

It is identical to POST, but it is utilized to revise the existing data on

PUT the server. For instance, when we wish to revamp our complete
account on a web page, we utilize the PUT request.

It is identical to PUT and is utilized when we wish to revise a certain

field of our data. For instance, when we just wish to update our name
PATCH
or any additional information about our account, we can make use of
the PATCH request.

HTTP Status codes Description

Any time one URL needs to be redirected to another

HTTP Status Code permanently, a 301 redirect should be used. A 301 redirect
301 - Permanent implies that bots and visitors that come on that page will be
Redirect taken to the new URL. Link equity is also passed to the new
URL via a 301 redirect.

HTTP Status Code 302 redirect is just like a 30, where it passes visitors and bots
302 - Temporary to the new page, but it may not pass along link equity. It is not
Redirect recommended using 302 redirects for permanent changes.

This implies the server did not find the file or page that the
browser is requesting. 404s don’t show whether the missing
HTTP Status Code resource or pages are missing temporarily or permanently.
404 - Not Found You can check what this appears to be on your site by writing
in a URL that doesn’t exist. Every site will have some pages
that display the 404 status codes.

HTTP Status Code

This is the ideal status code for a properly functioning page.
200 - OK

A 410 implies the page is no longer available from the server

HTTP Status Code and they have set no forwarding address. Any links you
410 - Gone present on your site that are directed to a 410 page are
sending visitors and bots to a dead resource.

HTTP Status Code This status code shows a problem with the server and will
500 - Internal Server affect access to your site. Bots and human visitors alike will
Error get lost, and your link equity will go nowhere fast.

HTTP Status Code 503 response, shows that the server is unavailable. This could
HTTP Status codes Description

503 - Service be because of temporarily overloading the server or

Unavailable maintenance of the server.

Additional Useful Resources

 Front End Developer Salary in India – For Freshers & Experienced

 Front-End Developer Resume Sample (PDF): Full Guide and Example
 Best Front End Frameworks
 Difference Between Frontend and Backend – Frontend Vs Backend

Frequently Asked Questions

30. How do I prepare for a front-end developer interview?

When you're preparing for your Front-end developer interview, try to code
most of your layout without taking a glance at the result till the end. If CSS,
HTMLare the most important aspect of front-end development, then
JavaScript tops the list of important skills to own. Organisations will spend a
lot of time during your interview to test your understanding of Javascript.

31. Why should we hire you as frontend developer?

 Freshers: While interviewing for front-end developer jobs for freshers you
can come across this question. The best answer would be, " I have just
begun my career, and do not have practical achievements, but I
wish to explore and experience my potential by giving the best
services to the company. It will be my privilege to work with your
organization."
 Experienced: The best answer would be, “You should hire me for the
role of front-end developer owing to my proven ability to create
effective front-end user interfaces in line with contemporary best
practices. I have experience working with JavaScript, along with the
React framework, to create front-end applications.”

32. What is the most challenging work you have ever done as a front-end
developer?

The biggest challenges faced as a front-end developer are:

 Make sure each UI element like button, link navigation, works as planned
despite the user having JavaScript or cookies disabled.
 Make sure everything looks similar across all browsers.
 HTML tables.
 Debugging JavaScript code.
33. How much do front end developers get paid?

As per the payscale, freshes, front-end developer gets an average of

₹305,498 per annum. An intermediate developer's salary is ₹452,073 on
average. A senior developer can earn an average of ₹806,231.

34. Is front end developer a good career?

Yes, a front-end developer is regarded as a good career choice. It is in

demand by top-tier players like Deloitte, Amazon, HCL, etc. Furthermore,
the annual pay for a front-end developer is lucrative. In a nutshell, it is an
in-demand position, good pay, and new learning each day.

35. What is front end and back end web development?

Front-end development is considered as the programming which

concentrates on the visual elements of an app or website that a user will
interact with. Back end development concentrates on the side of a website
that the user can't see, meaning the server-side.

36. Which language is best for front end development?

The languages best for front-end development are HyperText Markup

Language (HTML), Cascading Style Sheets (CSS), JavaScript, React, Angular,
Vue.