Frontend Interview Questions PDF By ScholarHat

Frontend Interview Questions PDF By ScholarHat

1. Top 50 Frontend Interview Questions and Answers


12 Jun 2024
1.15K Views
34 min read
Frontend Interview Questions and Answers: An Overview
We live in the internet world. Every day we surf several web pages, websites, and mobile apps for one or the other
reason. Our lives are so connected with various applications that any software company cannot imagine working
without hiring the best front-end developers. Today the upcoming technocrats are very much fascinated with
making and designing websites and apps and get a good front-end developer salary.
So, to help you make your career in front-end development, we have compiled a set of frequently asked front-end
developer interview questions and answers. It will make you feel confident while giving the interview and crack it.
The client side of development, which includes everything a user sees and interacts with on a website, is the
responsibility of a front-end developer. He is the one who makes it all happen, from the layout and design to
the functionality and responsiveness.
Some of the basic technical skills required for a front-end developer are HTML, CSS, JavaScript,
JQuery,React,
Angular, testing and debugging skills, knowledge of version control systems like Git, etc.
Basic Frontend Interview Questions for Freshers
1. What skills are required for a front-end developer?
HTML to PDF

2. Some new features in HTML5 include:
DOCTYPE declaration –
The CSS box model comprises the following four elements:
Content - The body of the page comes here
Padding - Area around your content
Border - Space between padding if given and content
Margin - Area around the border
Read more: Top 10 Front-End Developer Skills You Need to Know
It is a method to make your webpage or website compatible to be displayed on any device may it be a desktop or
phone or even a smartwatch. It tries to make an easy navigation of the site with a minimum of scrolling, panning,
and resizing across all devices. React, Angular, etc are some of the popular frameworks for building such designs.
2. Explain the term, responsive design.
3. Do you have any idea regarding the CSS box model?
4. Enlist and brief the features of HTML5 which are not in HTML.
HTML to PDF

3. function(){
// Function Body
}
function display(){
// function body
}
function display() {
console.log (`This is a named function`);
var anony = function () {
console.log(“This is an anonymous function");
};
anony();
Read more: Semantic HTML5 Elements with Examples
Named Functions are normal functions with a name. You can use it in an expression or a statement.
Anonymous function is a function without a name. It cannot be accessed after it is created but can only be
retrieved by a variable in which it is stored. You can give as many arguments as you want to an anonymous
function but only a single expression.
section – Section tag defines a section in the document, such as a header, footer, or in other sections of the
document. It is used to define the structure of the document.
header – The header tag defines the head section of the document. A header section always sticks at the top of
the document.
footer – The footer tag defines the footer section of the document. A footer section always sticks at the bottom
of the document.
article – The article tag defines an independent piece of the content of a document.
main – The main tag defines the main section in the document which contains the main content of the
document.
figcaption – The figcaption tag defines the caption for the media element such as an image or video.
5. Differentiate Anonymous and Named functions.
Syntax
Syntax
Example
Example

4. };
7. What is markup in HTML?
 . Describe user-centered design.
 . What are JavaScript data types?
10. Differentiate between HTML and XHTML.
9. Describe the function of CSS in Web Design.
11. What is the difference between “ == “ and “ === “ operators?
These are the eight data types in JavaScript:
1. Number: an integer or a floating-point number
2. String: textual data
3. Boolean: true or false
4. BigInt: an integer with arbitrary precision
5. Object: key-value pairs of collection of data
 . null: denotes a null value
7. undefined: a data type whose variable is not initialized
 . Symbol: data type whose instances are unique and immutable
Below are the differences between HTML and XHTML:
HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup Language.
A static webpage is an html web page and dynamic web pages are XHTML.
XHTML is stricter than HTML.
An XML application of HTML is defined as XHTML.
All modern browsers support XHTML.
We all know that webpages are built for the convenience of the users. So, it becomes the responsibility of the
developers to keep in mind how users would like to view the page while using it. It inculcates various
techniques to include the users at each stage of the design process. This way, one can get deep insights into
the users' likes and dislikes. Thus, you can get a complete understanding of how your product will be used by
the users for whom you designed it.
CSS stands for Cascading Style Sheet needed to give the look and feel of any website. They help in the management
of font styles, sizes and color combinations that are required for web pages. One change in the CSS file will cause a
change to the entire website because web pages retrieve data every time and then display it. It is a part of web
designing that incorporates steps and processes to make your website more attractive by adding new menu styles to
it.
Markup refers to the sequence of characters or other symbols that you insert at certain places in a text or word
processing file to indicate how the file should look when it is printed or displayed or describe its logical structure.
The markup indicators are often called tags in HTML.

5. In the above example, the color applies to the anchor tag when it’s hovered.
Pseudo-elements allows us to create items that do not normally exist in the document tree,
::before
::after
::first-letter
::first-line
::selection
Both are comparison operators. The difference between both the operators is that “==” is used to compare values
whereas, “ === “ is used to compare both values and types.
In the above code, the color will appear only on the first line of the paragraph. A CSS pseudo-class is a keyword
added to a selector that specifies a special state of the selected elements. Pseudo-classes let you apply a style
to an element not only with the content of the document tree but also
concerning external factors.
:link
:visited
:hover
:active
:focus
Example
Example
Example
/* mouse over link */
a:hover {
color: #FFOOFF;
}
p: :first-line {
color: blue;
font-variant: small-caps;
}
var a = 7;
var b = "7";
(a == b) // Returns true since the value of both a and b is the same
(a === b) // Returns false since the typeof x is number and typeof y is string
12. What are Pseudo elements and Pseudo classes?

6. 1 . What is DHTML?
17. Why meta tags are used in HTML?
1 . Why should we use the float property in CSS?
13. What are the two types of Web Storage in HTML5?
14. What is a task runner? What are the benefits of using a task runner?
15. What type of language is javascript, statically typed or dynamically typed?
In the above code, the variable a that is assigned a number type can be converted to a string type.
DHTML is a combination of HTML, XHTML, JavaScript, Jquery, and CSS. It is a term describing the art of making
dynamic and interactive web pages.
JavaScript is a dynamically typed language. In a dynamically typed language, the type of a variable is checked
during run-time and so, variables in JS are not associated with any type. A variable can hold the value of any
data type.
Meta tags in html are used by the developer to tell the browser about the page description, author of the
template, character set, keywords, and many more.
Meta tags are used for search engine optimization to tell the search engine about the page contents.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<meta name="description" content="HTML interview questions">
<meta name="author" content="Author Name">
<meta name="copyright" content="All Rights Reserved">
1. Session Storage: It stores data from the current session only. It means that the data stored in session
storage clears automatically when the browser is closed.
2. Local Storage: In local storage, data is not deleted automatically when the current browser window is closed.
A task runner is a software tool or framework that helps you streamline and simplify repetitive tasks. It
automates and manages various tasks, processes, and workflows in software development and other areas.
Task runners are commonly used in web development, build processes, and project automation.
The benefits of using a task runner include reducing the amount of time spent on repetitive tasks, automating
tedious and error-prone tasks, and making it easier to manage the development process.
Example
var a = 50;
var a = "ScholarHat";

7. Gives a lot of control over the design to develop sites for
specific screens.
Adaptive Design
It focuses on developing websites based on multiple
fixed layout sizes.
Responsive Design
It focuses on showing content based on available
browser space.
When a website developed using the adaptive design isWhen a website developed using responsive
design is opened on a desktop browser and when
we try to resize the browser window, the content of
optimally
opened on the desktop browser, first the available space
is detected and then the layout with the most
appropriate sizes is picked and used for the display of
contents. Resizing of browser window does not affect
the design.
Generally, adaptive designs use six standard screen
widths - 320 px, 480 px, 760 px, 960 px, 1200 px, and
1600 px. These sizes are detected and appropriate
layouts are loaded.
It takes a lot of time and effort to first examine the
options and realities of the end users and then design
the best possible adaptive solutions for them.
the website is dynamically and
rearranged to accommodate the window.
This design makes use of CSS media queries for
changing styles depending on the target device
properties for adapting to different screens.
Generally, responsive design takes very little time
to build and design fluid websites that can
accommodate content from the screen depending
on the screen size.
Not much control over the design is offered here.
Horizontal bar presence on desktop or mobile screens is the main sign that the site is having responsive
mistakes and will become the reason for failing to check or test devices individually.
Intermediate Frontend Interview Questions and Answers
In the above code, the element to which the class is applied ensures that the element is positioned on the right
of the container. If you specify the value of float as left, then the element will be placed on the left side of the
container.
The float property in CSS is used for positioning the HTML elements horizontally either towards the left or right
of the container.
Example
float-container {
float: right;
}
19. What is the difference between responsive and adaptive development?
20. What is the significant sign that your site isn’t responsive or having issues?

8. 2. How is margin different from padding in CSS?
1. List out some of the JQuery functions used for web page designing.
Simple slide panel
Simple disappearing effect
Chainable transition effect
Accordion#1 and Accordion#2
Animated hover effect
Entire block clickable
Collapsible panels
Image replacement gallery
Styling different link types
You cannot put negative padding values. It is not allowed.
The values of the margin property are:
auto – The browser auto-calculates the margin while we use this.
length – The value of this property can be in px, pt, cm, em etc. The values can be positive or negative.
% – We can also give a percentage value as a margin to the element.
inherit – Using this property, the margin properties can be inherited from the parent elements.
The padding property is used for generating the space around the element’s content and inside any known
border. The padding also has sub-properties like:
The margin property in CSS is used to create space around the elements. We can also create space for borders
defined at the exteriors. The following margin properties are enlisted below:
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left

9. These are the several methods in JavaScript to declare or construct an object.
Object using
Class create
Method
Object Literals
The above image clearly shows that the Margin is the outermost entity of the CSS Box Model. It lies outside of
the borders whereas the padding lies within the borders.
Attributes are an element of an HTML document while properties are a part of the Document Object Model
(DOM).
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.
3. What is the difference between attribute and property?
4. How many different methods are there to make an object in JavaScript?
Example
Example
<input type="text" value="ScholarHat">
var data = document.querySelector(input); // here we created a document object of input tag
console.log(input.getAttribute('value')); // getting the attribute value
console.log(input.value); // ScholarHat // getting the property of the input object

10. using Function
Object Constructor
is the acronym for the five design principles in the field of object-oriented design. They are:
S- single responsibility principle
O- open-closed principle
L- Liskov Substitution principle
I- interface segregation principle
D- dependency
SVG is a followed XML format; it stands for Scalable Vector Graphics which is used to create vector graphics
with the support for interactivity and animation.
SVG is resolution-independent as it does not lose its quality when they are resized or zoomed.
SVG is mainly used for vector-type diagrams like pie charts, 2-dimensional graphs in an X, and Y coordinate
system, etc.
Let's see an example of drawing a circle with an SVG tag.
KISS stands for Keep it Simple, Stupid. According to this principle, strive for simplicity while designing your
website or building any product. It is very
easy to complicate things but very difficult to simplify them. Ex: You must have observed that Apple products are
very easy to operate for any type of user. This is because they pay attention to simplicity and user-friendly
interfaces.
The web browser process for re-calculating the positions and geometries of elements in the document, for re-
rendering part or all of the document is known as reflow.
Reflow occurs when:
Insert, remove, or update an element in the DOM
Modify content on the page, e.g. the text in an input box
Move a DOM element
Animate a DOM element
Take measurements of an element such as offsetHeight or getComputedStyle.
Change a CSS style
 . When does DOM reflow occur?
5. What do you mean by SVG element?
 . What do you mean by the term SOLID?
7. Any idea regarding the KISS principle used in designing?
SOLID
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
HTML to PDF

11. 11. Explain about Canvas.
13. What are JavaScript Design Patterns?
12. What is the role of deferred scripts in JavaScript?
9. Is JavaScript a pass-by-reference or pass-by-value language?
14. Explain the difference between the .detach() and remove() methods in
jQuery.
10. If I say to differentiate JavaScript and jQuery in one line, how will you do it?
The detach() and remove() methods are the same, except that .detach() retains all jQuery data associated with
the removed elements and .remove() does not. detach() is therefore useful when removed elements may need
to be reinserted into the DOM later.
JavaScript is a language while jQuery is a library built in JavaScript that increases the convenience of developers
in using JavaSript language.
JavaScript design patterns are repeatable approaches for errors that arise sometimes when building JavaScript
browser applications. They truly assist us in making our code more stable.
They are classified into 3 categories
1. Creational Design Pattern: The object generation mechanism is seen by the JavaScript Creational Design
Pattern. They aim to make items that are appropriate for a certain scenario.
2. Structural Design Pattern: It explains how the classes and objects we've generated so far can be combined
to construct bigger frameworks. This pattern makes it easier to create relationships between items by
defining a straightforward way to do so.
3. Behavioral Design Pattern: It highlights the patterns of communication between objects in JavaScript. As a
result, the communication may be carried out with greater freedom.
Canvas in HTML is a pixel-based graphic and it is one of the new features of HTML5.
It provides a space in the document where we can draw graphics by using JavaScript and it is resolution-
dependent, hence the quality will be affected when it's zoomed or resized.
A canvas is a rectangle-like area on an HTML page. It is specified with a canvas element. By default, the
< > element has no border and no content, it is like a container.
The processing of HTML code while the page loads is disabled by nature till the script has halted. Your page will
be affected if your network is a bit slow, or if the script is very hefty. When you use Deferred, the script waits for
the HTML parser to finish before executing it. This reduces the time it takes for web pages to load, making them
appear more quickly.
The variable's data is always a reference for objects, hence it's always pass by value. Hence, if you supply an
object and alter its members inside the method, the changes continue outside of it. It appears as if pass by
reference in this case. However, if you modify the values of the object variable, the change will not last,
demonstrating that it is indeed passed by value.
canvas
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

12. 15. Define iframe in HTML
2. How does overflow: hidden will work?
3. What is the difference between prototypal and classical inheritance?
1. If I want to optimize my website’s performance, what are all things I need to
do?
Here, if the content of the div is very large and exceeds the height of 100px, the content gets clipped post 100px
and the rest of the content is not made visible.
The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have
to be added to the content area when the content size exceeds the specified container size where the content is
enclosed. If the value of overflow is hidden, the content gets clipped post the size of the container thereby
making the content invisible.
The iframe tag is written as . An iframe is used to display different document content inside the different
document content in a rectangular region in the browser. When different document content is embedded
into current HTML content, then it is known as an inline iframe. The src attribute contains the path to the
document that occupies the inline iframe.
Read more: iframes in HTML
Well, this question can be answered from various perspectives. However, the most common answer to this will
include
Compression of your code so that the file size gets reduced and it becomes speedy to download.
Store the files that frequently come into play at a place so that every time a user visits the site, he/she is not
required to download them. This concept is known as caching.
Use CDN i.e. Content Delivery Network. With this, your files will be distributed across multiple servers so that
it will be convenient for them to download them from their situated place.
Programmers build objects, which are representations of real-time entities, in traditional object-oriented
programming. Classes and objects are the two sorts of abstractions. A class is a generalization of an object,
whereas an object is an abstraction of an actual thing.
Classical inheritance differs from prototypal inheritance. Classical inheritance is confined to classes that inherit
from those remaining classes, but prototypal inheritance allows any object to be cloned via an object-linking
Advanced Frontend Interview Questions and Answers
div {
width: 100px;
height: 100px;
overflow: hidden;
}
Example

13. Read more: Basics of HTML
The following Ajax functions are available in jQuery
.ajaxStart() - register the handler to be called when the first Ajax request begins.
.ajaxStop() - register the handler to be called when all requests are complete.
.ajaxSuccess() - register the handler to be called when an Ajax request is completed.
HTML Tags
HTML tags are generally the starting and ending parts
of the HTML code.
HTML Attributes
HTML attributes are used to define the character of
the HTML elements.
They define a way to represent and hold HTML
elements in the program.
They begin with < symbol and end with > symbol.
They are generally used to provide additional styling
to the element.
They are always placed in the opening tag of an
element.
They provide various additional properties to the
existing HTML element.
They are like keywords where every single tag has a
unique meaning.
Java Java is a complete and strongly typed
programming language used for backend
coding.
JavaScript JavaScript is a weakly typed, lightweight
programming
language (most commonly known as scripting language)
and has more relaxed syntax and rules.
Java is an object-oriented programming
(OOPS) language or structured programming
language such as C and C++.
JavaScript is a client-side scripting language, and it doesn't
fully support the OOPS concept. It resides inside the HTML
documents and is used to make web pages interactive (not
achievable with simple HTML).
JavaScript code can run only in the browser, but it can now
run on the server via Node.js.
Java creates applications that can run on any
virtual machine (JVM) or browser.
A marquee allows you to put a scrolling text in a web page. According to the marquee settings, it is either
scrolled horizontally across or vertically up or down your web page. To do this, place whatever text you
want to appear scrolling within the marquee and marquee tags.
method. Despite going into too many specifics, a prototype essentially serves as a template for those other
objects, whether they extend the parent object or not.
5. What is a marquee in HTML?
7. How is JavaScript different from Java?
4. Explain the various Ajax functions available in jQuery.
 . Differentiate between HTML tags and HTML attributes

14. The Java code needs to be compiled.
Java objects are class-based. You can't make
any program in Java without creating a class.
Java programs consume more memory.
The JavaScript code doesn't require to be complied.
JavaScript Objects are prototype-based.
JavaScript code is used in HTML web pages and requires
less memory.
The JavaScript file extension is ".js" and it is interpreted but
not compiled. Every browser has a JavaScript interpreter to
execute the JS code.
The file extension of the Java program is
".Java" and it translates source code into
bytecodes which are then executed by JVM
(Java Virtual Machine).
Java supports multithreading.
JavaScript doesn't support multithreading.
JavaScript uses an event-based approach to concurrency.
Java uses a thread-based approach to
concurrency.
There are mainly 3 tags in HTML to separate a section of texts.
1. <br> tag - Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow
to the next line
2. <p> tag - The <p> tag contains the text in the form of a new paragraph.
3. <blockquote> tag - It is used to define a large quoted section. If you have a large quotation, then put the entire
text within <blockquote>............./blockquote tag.
z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its
positioning. It specifies the vertical stack order of the elements positioned which helps to define how the
display of elements should happen in cases of overlapping.The default value of this property is 0 and can be
either positive or negative.
Z-Index can take the following values apart from 0:
Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.
Web Accessibility is a way to design, develop, and code websites and web tools that people with disabilities can
also use. It makes using the technology easy for certain people who have difficulties in listening or seeing. It
makes sure that the web is also usable by those people with a wide range of disabilities.
Remember that the elements having a lesser value of z-index is stacked lower than the ones with a higher z-
index.
 . What is Web Accessibility?
9. What is the purpose of the z-index in CSS and how is it used?
10. How many tags in HTML can be used to separate a section of text?

15. 11. What is tweeting in CSS?
12. What is meant by Progressive Rendering?
14. Differentiate Null and Undefined in JavaScript.
13. How CoffeeScript is advantageous over JavaScript?
Null
A null is an object with no value.
Null is an intentional absence of the value. It
is one of the primitive values of JavaScript.
typeof null; // "object"
Null is equal to undefined but not identical.
null == undefined // true
Undefined
Undefined is a type.
In Undefined, the value does not exist in the compiler. It is the
global object.
typeof undefined; // "undefined"
null === undefined // false
Progressive rendering is a process 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.
Write less do more − For a huge code in JavaScript, we require comparatively a very small number of lines of
CoffeeScript. Easily understandable − The shorthand form of JavaScript is CoffeeScript, its syntax is quite
simple as compared to JavaScript. Reliable − CoffeeScript is a secure and reliable programming language for
creating dynamic programs.
Readable and maintainable − CoffeeScript offers aliases for most of the operators, making the code
readable. Also maintaining the programs requires little effort than JS.
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. No 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.
Rich 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.
Tweening is the process of filling the gaps between the key sequences, i.e. between the keyframes that are
already created. Keyframes are those frames that represent the start and end points of animation action.
Tweening involves generating intermediate keyframes between two images that give the impression that the
first one has evolved smoothly to the second image. For this purpose, we use properties like transforms -
matrix, translate, scale, rotate, etc.

16. In this Frontend tutorial, we saw the most commonly asked Frontend Interview Questions and Answers from
basic to advanced levels. Frontend development can lead you to become a full-stack developer. So, to
become a trained front-end developer, consider our Frontend Certification Program.
A variable is defined as null when trying to
convey that the variable is empty.
A variable is defined as undefined when we try to convey that
the variable does not exist or is not available.
Null is also referred to as false. e.g. null ?When a variable is not assigned a value, it is called Undefined.
e.g. var temp; if(temp === undefined) console.log("true"); else
console.log("false");
console.log("true") : console.log("false") //
false
The 'use strict' keyword is used to define strict mode at the start of the script. Strict mode is supported by all
browsers.
15. Why do we use the “use strict”; statement?
Summary
HTML to PDF