The creation of web pages and user interfaces for web applications falls under the purview of frontend development. In other words, frontend developers are responsible for everything you see when you launch a website, online application, or mobile app on your computer or mobile device.

Today, frontend developers are in high demand. Many organizations are eager to hire them and offer them great compensation packages. If you think you have what it takes to be a frontend developer and want to pursue a career in the field, you’ve come to the perfect spot.

This Frontend Developer Interview Questions lesson will assist you in acing your next interview. This Frontend Developer Interview Questions lesson covers various front-end development languages and frameworks.

Name fundamental design elements?

LINE – The linear marks made with a pen or brush, or the edge formed by the intersection of two shapes.
SHAPE – A shape is a defined area that is either geometric (squares and circles) or organic in nature (free formed shapes or natural shapes). A positive form generates a negative shape automatically.
DIRECTION – All lines, whether horizontal, vertical, or oblique, have a direction. Horizontal conveys a sense of serenity, steadiness, and quiet. Vertical conveys a sense of equilibrium, formality, and attention. Oblique implies motion and action.
SIZE – Size refers to the relationship between the area occupied by one form and the area occupied by another.
TEXTURE – Texture refers to a shape’s surface qualities — rough, smooth, soft, hard, shiny, and so on.
COLOUR – Color is the result of light being reflected off objects. Three primary properties define color: hue or the color’s name (red, green, blue, etc. ), value (how light or dark the color is), and intensity (how bright or dull it is).

Explain meta tags in HTML

Meta tags are always contained within the HTML page’s head tag.
Metadata is usually given in the form of name/value pairs.
Meta tags are not visible on the page but are intended for the browser.
Meta tags might contain information about the character encoding, the document’s description, and the document’s title, among other things.

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="I am a web page with description"> 
<title>Home Page</title>
</head>
<body>

</body>
</html>

What Is Load Balancing?

Load balancing is a relatively straightforward approach for spreading workloads across numerous workstations or clusters. Round Robin is the most widely used and simplest load balancing algorithm. This method of load balancing distributes requests in a circular fashion, ensuring that each machine receives an equal number of requests and that no single machine is overburdened or underloaded.

Load balancing is used to:

Optimize resource utilization (avoid overload and under-load of any machines)
Maximize Throughput
Reduce reaction time

The most often used load balancing techniques in web-based applications are as follows:

Round-robin system
Affinity for sessions or persistent session
IP address affinity

What is Node.js?

Node.js is a web application framework based on the JavaScript Engine in Google Chrome (V8 Engine).

Node.js includes a runtime environment for interpreting and executing Javascript scripts (It is analogous to JVM to JAVA byte code). This runtime enables the execution of JavaScript code on any machine that is not connected to a browser. Due to the Node.js runtime, JavaScript may now be executed on the server as well.

Node.js is a combination of a runtime environment and a JavaScript library.

What is SQL injection?

Injection attacks are the result of an insufficient separation between program instructions (i.e., code) and user-supplied (or external) input. This enables the injection of harmful code into a data snippet by an attacker.

SQL injection is one of the most prevalent injection attack types. To accomplish this, the attacker injects malicious SQL statements into the program.

How to avoid:

Statements that have been prepared using parameterized queries.
Procedures that are saved.
Validation of input – blacklist, and whitelist.
Application accounts should not be granted DBA or admin-level access to the database server. This assures that even if an application is compromised, an attacker will not be able to access the database via the affected application.

What is Scope in JavaScript?

In JavaScript, each function has its own set of rules. A scope is a group of variables and the rules for how those variables can be used by name. Only code inside that function can get to the scoped variables in that function.

The name of a variable must be unique in the same area where it is being used. When two scopes are joined together, they can be nested inside of each other. As long as one scope is inside another, code inside the innermost scope can access variables from both scopes.

What is npm?

npm is the name of the Node Package Manager. npm has the following two main functions:

Online repositories for node.js packages and modules can be found on search.nodejs.org.
A command-line tool that can be used to install packages, manage versions, and keep track of dependencies of Node.js packages.

What is webpack?

Webpack is a build tool that creates a dependency structure for all of your assets, including Javascript, pictures, fonts, and CSS. Webpack enables you to utilize require() in your source code to reference local files, such as images, and control how they are processed in the final Javascript bundle, such as by substituting a URL linking to a CDN for the path.

Why Webpack?

If you’re working on a Front End project that includes a lot of non-code assets like CSS, photos, fonts, and so on, then Webpack will be a huge help.

If you simply need to produce one Javascript file to provide to the client and have a tiny application with few static assets, Webpack can be an unnecessary burden.

Compare SQL database vs MongoDB

Tables, rows, columns, and records are used to store data in SQL databases. This information is stored in a pre-defined data schema that isn’t very flexible for today’s fast-growing real-world applications. MongoDB, on the other hand, has a flexible framework that can be readily extended and adjusted.

How are JavaScript and jQuery dissimilar?

JavaScript is a programming language. While jQuery is a JavaScript library that facilitates the use of the JavaScript language.

Explain the CSS box model

The CSS box model is a rectangular layout paradigm for HTML elements that include:

Content – The box’s content, which includes text and graphics.
Padding – is a clear area that surrounds the content (i.e., the amount of space between the border and the content)
Border – A border that surrounds the padding and content (if any).
Margin – A transparent area surrounding the border is referred to as a margin (i.e., the amount of space between the border and any neighboring elements)

Advantages of REST web services?

Some of the benefits of REST web services include:

The learning curve is low because it is based on the HTTP protocol.
Text, xml, json, picture, and other data transport protocols are supported.
The implementation is loosely linked because there is no contract between the server and the client.
REST is a simple protocol.
REST methods are simple to test in a browser.

What is Callback Hell?

As a return parameter, the asynchronous function requires callbacks. Callback hell occurs when numerous asynchronous functions are linked together.

What is Content Security Policy?

The Content Security Policy (CSP) is an HTTP header that gives site owners fine-grained control over where their site’s resources are loaded from. The best way to avoid cross-site scripting (XSS) vulnerabilities is to use this header.

CSP is required for all new websites and is strongly recommended for all existing high-risk sites because of the difficulties of retrofitting CSP into existing websites.

The main advantage of CSP is that it prevents the usage of dangerous inline JavaScript. Inline JavaScript, whether reflected or saved, means that incorrectly escaped user inputs can yield code that is perceived as JavaScript by the web browser.

You may successfully eliminate practically all XSS attacks against your site by utilizing CSP to disable inline JavaScript.

What is Cross-Site Scripting (XSS)?

Cross-Site Scripting (XSS) is a type of attack that happens when an attacker uses a web application to transmit malicious code to a separate end user, typically in the form of a browser-side script.

When someone requests a page, the server returns it unchanged. Rather than that, an XSS attack takes the use of a vulnerability in a page by causing a variable submitted in a request to appear in raw form in the response. The website is just displaying what was submitted as part of that request.

What is User-Centered Design?

User-centered design is an iterative design method in which designers pay close attention to users and their demands throughout the design process. UCD emphasizes the importance of incorporating users throughout the design process through a variety of research and design methodologies in order to develop products that are highly useable and accessible to them.

To create knowledge of user needs through user-centered design, designers must utilize a combination of investigative (e.g., surveys and interviews) and generative (e.g., brainstorming) approaches and tools.

What is Encapsulation?

The process of encapsulating one or more elements within a physical or logical container is characterized as encapsulation. Encapsulation is a technique used in object-oriented programming that restricts access to implementation details.

What is Polymorphism?

The term polymorphism refers to the presence of many forms. Polymorphism is frequently stated in object-oriented programming paradigms as a single interface with many functionalities.

What is Sass?

Sass, or Syntactically Awesome StyleSheets, is a CSS preprocessor that enhances the fundamental language’s strength and elegance.

It enables the usage of variables, nested rules, mixins, and inline imports, among other features, all while maintaining a completely CSS-compatible syntax. Sass enables the organization of huge stylesheets and the rapid deployment of minor stylesheets.

A CSS preprocessor is a scripting language that expands the capabilities of CSS by allowing developers to write code in one language and then compile it into CSS.

What is a CSS rule?

CSS rules are applied to documents by web browsers to control how they are presented. A CSS rule is constructed as follows:

A collection of properties whose values are used to modify the way HTML material is presented.
A selector specifies the element(s) to which the modified property values should be applied.

A stylesheet is a collection of CSS rules that define how a webpage should look.

What is the difference between span and div?

span is an inline element whereas iv is a block element.
To earn bonus points, you might point out that while a div can include a p tag and a p tag can contain a span, a span cannot contain a div or p tag.

Why do we use jQuery?

Simple to operate and learn.
Expandable with ease.
Cross-browser compatibility (Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+, Opera 9.0+)
Simple to use for manipulating and traversing the DOM.
Numerous built-in techniques.
Capabilities of AJAX.
Techniques for modifying or applying CSS, as well as for producing animations.
Detection and management of events
Numerous plug-ins for a variety of purposes.

How does Node.js handle concurrency?

Node provides programmers with a single thread, which enables them to write code quickly and without bottlenecks. Internally, Node makes use of numerous POSIX threads for various I/O tasks like file access, DNS queries, and network calls.

When a Node receives an I/O request, it creates or utilizes a thread to do the requested operation, and then pushes the result to the event queue.

Each time such an event occurs, the event loop checks the queue and, if the execution stack of the Node is empty, adds the queue result to the execution stack.

This is the mechanism by which Node manages concurrency.

Difference between the terms PUT and POST?

PUT stores a file or resource at a specified URI and only that URI. If a file or resource already exists at that URI, PUT modifies that file or resource. If no resource or file exists, PUT creates one.

POST transmits data to a specified URI and anticipates that the resource at that URI will handle the request. At this point, the web server can determine what to do with the data associated with the selected resource.

PUT is idempotent, which means that using it several times will have no effect on resources.

However, POST is not idempotent, which means that if you execute it numerous times, it continues to generate additional resources.

Name fundamental principles of design?

BALANCE — In design, balance is analogous to balance in physics. A huge form at the center can be balanced by a little one near the edge. Balance lends a design its solidity and structure. It is the amount of weight spread across the design as a result of the positioning of your parts.
PROXIMITY – Proximity establishes a connection between items. It functions as a focal point. Proximity does not imply that items must be arranged in a particular order; rather, it implies that they should be visually related in some way.
ALIGNMENT – Enables the creation of order and organization. Aligning pieces enables them to form a visual relationship.
REPETITION – By linking individual parts together, repetition improves a design. It contributes to the formation of associations and consistency. Repetition can help establish a rhythm (a feeling of organized movement).
CONTRAST — Contrast is the juxtaposition of diametrically opposed elements (opposite hues on the color wheel, light/dark value, or horizontal/vertical direction). Contrast enables us to draw attention to or highlight important parts of your design.
SPACE — In art, the term “space” refers to the distance or area between, around, above, below, or contained inside pieces. Positive and negative space are critical components of every design.

What does defer and async on a <script> tag mean?

If neither attribute is present, the script is downloaded and executed synchronously, and processing of the document is halted until it is completed (default behavior). Scripts are downloaded and run in the order in which they are encountered.

The defer attribute downloads the script while the document is still parsing but waits until the parsing is complete before executing it, which is analogous to executing inside a DOMContentLoaded event listener. Deferred scripts will run in the order specified.

The async property downloads the script while parsing the page, however, it will halt the parser to run the script before it has finished parsing completely. Async scripts are not always executed in the same order.

Both attributes must be used only if the script has a src attribute (i.e. not an inline script).

<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>

What is ClickJacking?

ClickJacking is a type of attack that tricks users into thinking they are clicking on one thing while they are actually clicking on something else. The assault is made possible through HTML frames (iframes).

Its alternative name, user interface (UI) redressing, more accurately reflects what is going on. Users believe they are using the standard UI of a web page, but there is a concealed UI in control; in other words, the UI has been redressed. When consumers click on something they believe to be safe, the hidden UI takes a different action.

What is Coercion in JavaScript?

Coercion is the term used in JavaScript to describe the conversion of two separate built-in types. In JavaScript, there are two types of coercion: explicit and implicit.

Here is an example of overt coercion:

var a = "32";

var b = Number( a );

a; // "32"
b; // 32 -- the number!

Moreover, here is an illustration of implicit coercion:

var a = "32";

var b = a * 1; // “32” implicitly coerced to 42 here

a; // “32”
b; // 32 — the number!

What is a Grid System in CSS?

A grid system is a structure that enables content to be piled in a consistent and understandable manner both vertically and horizontally. Grid systems are comprised of two critical components: rows and columns.

Certain Grid Systems are:

Simple Grid
Bootstrap
Foundation
Pure
Flexbox Grid

What’s new in HTML 5?

HTML 5 significantly expands the HTML specification.

Doctype Redesign

Still using that obnoxious, impossible-to-remember XHTML doctype?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

So, why? The new HTML5 doctype should be used instead of the one that came before.

New Structure:

<section> – to define sections of pages
<header> – defines the header of a page
<footer> – defines the footer of a page
<nav> – defines the navigation on a page
<article> – defines the article or primary content on a page
<aside> – defines extra content like a sidebar on a page
<figure> – defines images that annotate an article

New Inline Elements:

<mark> – to indicate content that is marked in some fashion
<time> – to indicate content that is a time or date
<meter> – to indicate content that is a fraction of a known range – such as disk usage
<progress> – to indicate the progress of a task towards completion

New Form types:

<input type=”datetime”>
<input type=”datetime-local”>
<input type=”date”>
<input type=”month”>
<input type=”week”>
<input type=”time”>
<input type=”number”>
<input type=”range”>
<input type=”email”>
<input type=”url”>

New Elements:

HTML 5 introduces a number of intriguing new features, including:

canvas> – A JavaScript element that allows you to draw on your Web pages. It allows you to add photos or graphs to tooltips, as well as build dynamic graphs on the fly on your Web pages.
<video> – Use this simple tag to add a video to your Web pages.
<audio> – Use this simple tag to add sound to your Web pages.

When to use AngularJS and jQuery?

jQuery – is a DOM manipulation library – has nothing to do with models – lacks two-way binding – becomes complex and difficult to maintain as the size of the project grows – Occasionally, additional code is required to get the same functionality as in Angular.

Angular – is a model-view-controller framework – is used to create SPAs (Single Page Applications) – includes critical features such as routing, directives, two-way data binding, models, dependency injection, and unit tests – is modular – is maintainable as project size grows – is fast

Essentially, jQuery is a single tool (it solves a single problem: DOM manipulation), but AngularJS is a toolbox that has a variety of tools for solving various problems (routing, modelbindings, dom manipulation, etc.).

Indeed, jqLite (a subset of jQuery) is included with AngularJS and is used to resolve the dom-manipulation issue.

Cookie	Duration	Description
cookielawinfo-checbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Front End Developer Interview Questions & Answers