Google News
UI Developer Interview Questions
User interface (UI) design is an incredibly broad, multidisciplinary, and creative field. Good UI design is increasingly recognized as an essential tool to increase user engagement and create products that are both useful and visually pleasing.

UI Design Key Points :
* User interface : The means by which a person interacts with an application or hardware device
* Typography : The style and appearance of written material; the art of making type legible, readable, and appealing
* Color theory : A series of concepts and guiding principles for the visual design effects of colors and how they mix, match, and contrast
* Prototype : A sample or simulation of a final product used to test and gather feedback
* Wireframe : A layout displaying functional elements of an interface
* Breadcrumb : A way to show website users where they are in a website hierarchy (and how they got there)
* Accessibility : The concept of whether a service or product can be used by people of all abilities, irrespective of their situation
* Affordance : A feature or property of an element that help a user understand how they can interact with it.
The User Interface (UI) is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop. It is also the way through which a user interacts with an application or a website.
The growing dependence of many businesses on web applications and mobile applications has led many companies to place increased priority on UI in an effort to improve the user's overall experience.
Types of user interfaces
The various types of user interfaces include :
* graphical user interface (GUI)
* command line interface (CLI)
* menu-driven user interface
* touch user interface
* voice user interface (VUI)
* form-based user interface
* natural language user interface
Examples of user interfaces
Some examples of user interfaces include:
* computer mouse
* remote control
* virtual reality
* ATMs
* speedometer
* the old iPod click wheel
Websites such as Airbnb, Dropbox and Virgin America display strong user interface design. Sites like these have created pleasant, easily operable, user-centered designs (UCD) that focus on the user and their needs.
I would inspect various factors on your website. One thing I would do is use a link analysis tool to see if there are any dead links on the website. I would also check the coding on various pages of the site. One solution to the latter problem is to link similar pages to one CSS sheet and simplify the coding.
Another thing I might do is move the JavaScript coding near the bottom of a page’s HTML document. This allows the page to show before all JavaScript coding is downloaded. Additionally, I would check the servers of the website. If allowed, I would change the distribution of the website to a content delivery network. This allows users to access the website via a server that is closer to their locations. After all this, I will again test the speeds of the website.
Following are some effects methods used in jQuery :
show() : It displays selected elements.

hide() : It hides the selected elements.

toggle() : It shows or hides the selected elements, i.e. it toggles between hide() and show() methods.
Semantic HTML is a coding style where the tags embody what the text is meant to convey. In Semantic HTML, tags like for bold, and for italic should not be used, the reason being they just represent formatting and provide no indication of meaning or structure. The semantically correct thing to do is use these tags will have the same bold and italic effects while demonstrating meaning and structure (emphasis in this case).

Examples of semantic HTML5 elements are : 
<heade>, <footer>, <article>, <aside>, <details>, <figure>, 
<figcaption>, <main>, <mark>, <nav>, <section>, <summary>, <time>.​
The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page. Failing to use DOCTYPE or using the wrong DOCTYPE may load your page in Quirks Mode.
Types of filters used in AngularJS are : 
currency : Format a number to a currency format.

date : Format a date to a specified format.

filter : Select a subset of items from an array.

json : Format an object to a JSON string.

limit : To Limit an array/string, into a specified number of elements/characters.

lowercase : Format a string to lowercase.

number : Format a number to a string.

orderBy : Orders an array by an expression.

uppercase : Format a string to uppercase.
You can optimize a website’s assets by :
* File concatenation

* File compression

* CDN Hosting

* Offloading assets

* Reorganizing and refining code
Front-end developer creates client-side web interface using HTML, CSS, JavaScript and other common client-side technologies. The FE developer sees pages as a whole and a website as a combination of those pages. They make sure that the website functions properly, like all the website elements.
UI-Developer also uses HTML, CSS, JavaScript, jQuery, Angular, React JS and other client-side technologies. For UI developers, more emphasis is on HTML and CSS. Their focus is on delivering more granular assets such as buttons, tooltips, and other modular pieces which will go into a larger, finished product. 
The developer sees an asset as the individual CSS styles and pays more attention to how the asset will look, feel, behave in different contexts. UI developers may not even see a website as a whole but rather a collection of assets applied to pages. The UI developer makes sure that everything on the site is user-friendly and looks good.
10 .
What is the difference between HTML elements and tags?
HTML elements tell the browser how to render text. These elements become tags when they are surrounded by angular brackets <>. Tags usually come in pairs and surround the text.
CSS (Cascading Style Sheets) is the language for defining styles for the Web pages, including colours, layout, and fonts. With CSS, one can define the layout and variations in display for different devices and screen sizes(laptop, tablet, mobile).
CSS can be used with any XML-based markup language, and it is independent of HTML.
JavaScript is a lightweight interpreted programming language with object-oriented capabilities. With JavaScript, we can make static HTML pages interactive. JavaScript is most widely used for front-end development like AngularJS and ReactJS. It is also used in back-end development like Node.js, Next.js, NestJS, etc.
Some of the important JavaScript features are :
* JavaScript is a lightweight interpreted programming language.
* JavaScript was designed to make network-centric applications.
* JavaScript integrates with Java and complements it.
* JavaScript integrates with HTML and complements it.
* JavaScript is a cross-platform and open programming language.
13 .
What are the limitations when serving XHTML pages?
Perhaps the biggest issue is the poor browser support XHTML currently enjoys. Internet Explorer and a number of other user agents cannot parse XHTML as XML. Thus, it is not the extensible language it was promised to be.
14 .
How do you make comments without text being picked up by the browser?
Comments are used to explain and clarify code or to prevent code from being recognized by the browser. Comments start with "*" and end with " –>".
A window object has properties such as inner width, inner height, length, whether it was previously closed, its parent, and its name. The window is the first thing loaded into the browser. 

The document object is defined as any document that gets loaded inside the window object, such as HTML, ASPX, or PHP, and has properties such as cookies, title, and URL, to name a few.
Hoisting is a mechanism where assigned variables and function declarations get moved or “hoisted” to the top of their scope before executing code. Therefore, no matter where functions and variables are declared, they get moved to the top of their range regardless of whether their scope is local or global.
These can be explained as follows :   
Local storage allows data storage with no expiration date and offers the most substantial maximum storage limit.

Session storage stores the data associated with a session. When the user closes the tab or browser, the data disappears.

Cookies are reserved mostly for server-side reading, storing data sent back to the server. The data size must be less than 4KB.
* JavaScript’s server interaction is less. It is easier to validate user input before the page is sent off to the server.

* JavaScript provides immediate feedback to visitors. Users do not need to wait for the page to reload to know if they forgot to enter something.

* JavaScript enhances interactivity. Users can create interfaces that interact with the cursor or keyboard.
19 .
Is JavaScript a case-sensitive language?
Yes, JavaScript is a case-sensitive language. Case sensitive here implies that all function names, identifiers, and variables have to follow the right capitalization of letters at all times.
Below is an example of how to create an object in Javascript : 
var example_object = 
         name: "ramana",
         age: 31
         height: 162
HTML layout is the way to specify how the web page is arranged. 
The different HTML5 elements which are used to define the different parts of a webpage are as follows :
<header> : header for a document or a section is defined in this

<nav> : defines a container for navigation links

<section> : A section in a document is defined 

<article> : an independent, self-contained article is defined

<aside> : example is a sidebar, that is aside of content

<footer> : footer of a document is defined here
22 .
What is an AJAX request, and how can an AJAX request be used?
Asynchronous Java Script And XML or AJAX requests that provide the user the required data. AJAX calls connect with the servers by using XMLHttpRequests to exchange the data.  
Event propagation is the order of events that fire on the element. Bubbling is when an event is fired on the element then bubble up the DOM tree, i.e. child will call first, and then parent node will call, whereas capturing is opposite to the bubbling where the parent node is called first and then child node.
The difference between reset.css and normalize CSS is that reset.css removes all the built-in browser styling capabilities like margin, padding, and border.

Whereas normalize CSS provides a book-like appearance that includes a bold family to represent characters, a border between two paragraphs and a common font-family for an entire page of the document.
Inline Elements : Inline elements take up only enough width that is sufficient to them and allow other elements next to it inline. They do not have top and bottom margins as block elements have only the left and right and consider the padding.

Examples of Inline elements :
<a> : This inline element includes hyperlinks in the webpage.
<br> : This inline element mentions line breaks in the webpage where ever needed.
<script> : This inline element is used to include external and internal JavaScript codes.
<input> : This inline element accepts input from the users and is mainly used in forms.
<img> : This inline element includes different images in the webpage to add beauty to the webpage.
<span> : This inline element is an inline container that takes necessary space only.
<b> : This inline element is used in places where bold text is needed.
<label> : This inline element provides a usability improvement for mouse users, i.e., if a user clicks on the text within the <label> element, it toggles the control.
Block Elements : Block elements are types of blocks that contain many elements in a line itself. They consider top and bottom margins and don't contain any other elements next to them. They consume the full width available and always start in a new line.

Examples of Block elements :
<h1>-<h6> : These elements include headings of different sizes ranging from 1 to 6. Here, the smaller the number, the bigger the heading size.
<div> : This element is used to make separate content divisions on the web page.
<li> : This block element includes list items of an ordered or unordered list.
<ul> : This block element is used to make an unordered list.
<ol> : This block element is used to make an ordered list.
<hr> : This block element is an empty tag used to separate content by horizontal lines.
<p> : This block element includes paragraphs of content in the webpage.
<table> : This block element includes the tables in the web page when it requires tabular data.

HTML 5 Semantic block elements :
<header> : This semantic block element includes all the main things of the webpage like navbar, logos, and heading of the webpage.
<nav> : This semantic block element helps navigate different sections by including different blocks of hyperlinks in the webpage.
<footer> : This semantic block element contains all information about the web page's authorization, contact, and copyright details.
<main> : This semantic block element is used to specify the main content of the webpage.
<section> : This semantic block element is used to specify separate different sections in the webpage.
<article> : This semantic block element includes different independent articles on the webpage.
<aside> : This semantic block element mentions details of the main content aside.
Inline-block : It is similar to the inline element and follows the page flow. The only difference is that it will consider height and width.
Please find below the different tables that UI Developer supports are :

Absolute : It will place the element exactly where a user wants to place it. In general absolute will place relative to the parent. If no parent is available, then it is placed relative to the page itself.
Relative : It will place the element relative to itself (if we didn’t give any relative positioning); for example, if we set position relative to an element and given as top: 10px, then it will place the element 10px down from where the actual position of the element to be.
Static : It will place the element according to the flow of the document. It uses the default position; if we want to remove any position, then we can use a static position to replace it.
Fixed : It will place the element relative to the browser window or viewport as viewport doesn’t change when scrolling. So element will be fixed at that position.
* Meta tags are passed as pairs of name/value.

* 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.

* Meta tags can contain information about character encoding, description, title of the document etc,

<!DOCTYPE html>
  <meta name="description" content="web page with description like (Tutorlas, Interview Question, etc,.)"> 
  <title>Free Time Learn</title>
It is utilized for separating the elements that are block-line, line break before and after it. Span is utilized for grouping inline elements in the HTML doc.
It contains global attributes for the certain element in HTML documents.
It includes certain, global and event attributes.
At times para tag <P> is utilised for inner side of the <div> tag. In a paragraph, <span> tag is utilized to use a CSS style for certain words with the selected font sets.
In div tag, we make use of borders with width height with specified color pixels to emphasize the front end document. In the Span tag, we utilize specified color coding to depict the front-end document. 
npm stands for Node Package Manager. npm provides the following two main functionalities :
* Online repositories for Node.js packages/modules which are searchable on

* Command-line utility to install packages, do version management and dependency management of Node.js packages.

* Another important use for npm is dependency management. When you have a node project with a package.json file, you can run npm install from the project root and npm will install all the dependencies listed in the package.json.
Some of the advantages of REST web services are :
* Learning curve is easy since it works on HTTP protocol

* Supports multiple technologies for data transfer such as text, xml, json, image etc.

* No contract defined between server and client, so loosely coupled implementation.

* REST is a lightweight protocol

* REST methods can be tested easily over browser.
Floats push the element to the left or right. The float property can have one of four values :
Inherited : The element inherits the parent’s float value

None : This is the default value; the element doesn’t float

Left : The element floats to the container’s left

Right : The element floats to the container’s right
* Alert
* Affix
* Button
* Carousel
* Collapse
* Dropdown
* Modal
* Popover
* Scrollspy
* Tab
* Tooltip
A responsive website can fit in all screen sizes and all devices : laptops, tablets, and mobile phones.
CSS media queries are utilized to rearrange the elements and to hide or display the elements from the UI.

Impliment these following Step in section :
​<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

Media queries examples : 

@media only screen and (min-width:300px) and (max-width:480px){
    padding : 10px;
    margin : 5px auto; 
    background-color: blue; 

@media only screen and (min-width:1100px){
    padding : 10px;
    margin : 5px auto; 
    background-color: gray; 
Following is a list of some most used Git Commands and functions :
Git Config : This Git command configures the username and email address.

Git inits : This Git command is used to initialize a local Git repository.

Git Add : This Git command adds one or more files to the staging area.

Git Diff : This Git command is used to view the changes made to the file.

Git Commit : This Git command makes changes to the head but not to the remote repository.

Git reset : This Git command is used to undo local changes to the state of a Git repo.

Git Status : This Git command displays the state of the working directory and staging area.

Git Merge : This Git command merges a branch into an active branch.

Git Push : This Git command uploads content from the local repository to a remote repository.

Git Pull : This Git command is used to fetch and download content from a remote repository.
35 .
What do you understand by Version Control System?
A Version Control System (VCS) is a program that is used to record any changes to a file or set of data so that we can restore it to a previous version if needed. It ensures that everyone on the team is working on the most up-to-date file version.
36 .
What do you understand by clear?
A clear is used when we don't need an element to wrap around another element, like float.
HTML is an acronym that stands for Hypertext Markup Language. It is the most widely used language over the internet. XHTML is an acronym that stands for Extensible Hypertext Markup Language.
HTML is a language used to create web pages and link them from one to another. XHTML is considered a part of the XML markup language. It contains the features of both XML and HTML.
Tim Berners-Lee developed HTML in 1991. XHTML was developed by W3C, i.e., World Wide Web Consortium, and was released in 2000.
HTML is extended from SGML and follows the format of document file format. XHTML is extended from XML and HTML and follows the markup language format.
In HTML, it is not necessary to write Doctype at the top. In XHTML, you must write Doctype at the top of the file.
HTML is not strictly case-sensitive. It is not necessary to put all tags in lower or upper case. XHTML is strictly case-sensitive. Here, you have to put every tag and attribute in lower case.
In HTML, it is not necessary to close the tags in the order they are opened. In XHTML, you must close the tags in the order they are opened.
HTML is an older language for linking web pages on the internet. In comparison, XHTML is called a better version of HTML.
In HTML, it is not necessary to mention quotes while using attributes. For example: <JavaTpoint>. In XHTML, it is mandatory to mention quotes while using attributes. For example: <JavaTpoint="JTP">.
In HTML, filename extensions are used as ".html", and ".htm". In XHTML, filename extensions are used as ".xhtml", ".xht", ".xml".
In general, HTML, CSS, and JavaScript are browser interpreted technologies. 
Languages like C++,, PHP are not interpreted languages and need a compiler that will convert their code into machine language. HTML doesn’t need a compiler, it is an interpreted language and it is called a front-end language.
HTML stands for HyperText Markup Language.
* HTML4 is the oldest version of HTML that is still used today. It has a loose syntax where things like closing tags are optional. One does not have to close a paragraph with a tag in HTML4 either. The loose syntax helps developers easily adapt to HTML. While loose syntax helps amateur developers, it also poses a problem when one’s trying to achieve a specific result in the browser.
* XHTML was introduced to deal with this specific problem. Majority of sites that are developed today use XHTML. XHTML stands for EXtensible Hypertext Markup Language. It is based on XML, a more generalized markup language. In XHTML, all opened tags have to be closed. There are also some restrictions on which tags can be nested inside each other.
* HTML5 is the newer version of HTML. It is becoming increasingly popular every day. HTML5 comes with new functionalities that help in how we use the web today. Developers are able to do a lot of exciting new things with the help of HTML5.
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.
41 .
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.
Content Security Policy (CSP) is an HTTP header that allows site operators fine-grained control over where resources on their site can be loaded from. The use of this header is the best method to prevent cross-site scripting (XSS) vulnerabilities. Due to the difficulty in retrofitting CSP into existing websites, CSP is mandatory for all new websites and is strongly recommended for all existing high-risk sites.
The primary benefit of CSP comes from disabling the use of unsafe inline JavaScript. Inline JavaScript – either reflected or stored – means that improperly escaped user-inputs can generate code that is interpreted by the web browser as JavaScript. By using CSP to disable inline JavaScript, you can effectively eliminate almost all XSS attacks against your site.
Cross-Site Scripting (XSS) is an attack that occurs when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user.
The page provided by the server when someone requests it is unaltered. Instead, an XSS attack exploits a weakness in a page that include a variable submitted in a request to show up in raw form in the response. The page is only reflecting back what was submitted in that request.
Following are some key advantages of CoffeeScript over JavaScript :
* CoffeeScript is a lightweight programming language that compiles into JavaScript.

* CoffeeScript contains a lot of lightweight add-ons like Ruby string Interpolation and Python style list comprehension.

* CoffeeScript facilitates developers to express their programs with a lot shorter code than JavaScript.

* CoffeeScript makes the JavaScript code good and more readable.

* It is easy to perform everyday tasks with CoffeeScript rather than JavaScript.
45 .
How are variables different in CoffeeScript than JavaScript?
In JavaScript, we have to add a semi-colon for variables at the end of it to execute the program. On the other hand, in CoffeeScript, it is not necessary to add a semi-colon at the end of the statement.
Git pull and Git fetch are the Git commands used to make changes and retrieve data. Let's see the key differences between them :

Git fetch Git pull
The Git Fetch command downloads only new data from a remote repository. The Git fetch command is more like checking to see if any changes are available. The Git pull command pulls new data and integrates it with the current working files, updating the current HEAD branch with the latest modifications from the remote server.
The Git fetch command does not include any new information in your working files. The Git pull command combines remote modifications with those made locally.
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.
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.
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.
50 .
What is the syntax difference between a bulleted list and a numbered list?
Bulleted lists use the < ul > tag, which stands for “unordered,” whereas < ol > is used to create an ordered list.
* Tags are used when linking to an image. The image has to be specified in quotes using the source attribute, src in the opening tag <>.
* An anchor tag is used when linking to a website, and <href> attribute is used to specify the website link.
* The anchor tag has the text to be hyperlinked, and if you are linking to an email address, the <href> specification will be “”.
While designing or developing for multilingual sites, below things should be followed :
* The default language should be set, using unicode encoding

* We should use the ‘lang’ attribute and should be aware of standard font sizes and text direction

* language word length should be taken into account as it may affect layout.
We can use Javascript "find" method for the same :
let customers = [
  { id: 0, name: 'free' },
  { id: 1, name: 'time' },
  { id: 2, name: 'learn' }
let customer = customers.find(cust => === 'learn');
--> { id: 2, name: 'learn' } 
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.
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.
var data={ID:1, first_name:"Ramana", second_name:"Reddy"};
var send_data=JSON.stringify(data);​
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.
We can do that using the “filter” function :
let data = [
let filteredData = data.filter(path => path.includes('dir2'));
--> [ 'files/dir2/file1', 'files/dir2/file2' ]​
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 :
var add = function(a,b){consol.log(a+b)}
add(4,5);   //9
The most important difference between class-based and prototype-based inheritance is that a class defines a type that can be instantiated at runtime. On the other hand, a prototype is itself an object instance. In JavaScript, the object system is prototype-based, not class-based. That's why inheritance in JavaScript is different from other programming languages.
Objects are just a collection of name and value pairs in JavaScript. In JavaScript inheritance, there is only one construct, called object. Every object has private property linked to another object known as its prototype.
Many people think that Null and Undefined are the same in JavaScript, but they have many differences. In the following table, we have included the key differences between them :

Null Undefined
A null is an object with no value. Undefined is a type.
Null is an intentional absence of the value. It is one of the primitive values of JavaScript. In Undefined, the value does not exist in the compiler. It is the global object.
typeof null; // "object" typeof undefined; // "undefined"
Null is equal to undefined but not identical.
null == undefined // true
null === undefined // false
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.
Example :
null ? console.log("true") : console.log("false") //
When a variable is not assigned a value, it is called Undefined.
Example :
var temp;
if(temp === undefined)
Lazy loading is a design pattern and optimization technique used in computer programming to delay the initialization of an object until a required period. It is also known as on-demand loading. This optimization technique is used for online content like a website or a web app. It is used to enhance the performance of the web page. In this technique, instead of loading the entire web page and rendering it to the user in one go as in bulk loading, only the required section is loaded, and it delays the remaining part of the web page until the user requires it.
Advantages of Lazy loading
* Lazy loading or on-demand loading enhances the performance of web pages by reducing time consumption and memory usage.
* It optimizes the content delivery on the web page.
* It loads only a fraction of the web page first, which is required. Thus, the time taken is less, and the loading of the rest of the part of the web page is delayed, which saves storage.
* It enhances the user's experience as the requested content is delivered quickly.
* It avoids unnecessary code execution.
* It is cost-effective as it practices the optimal time and space resources usage.

Disadvantages of Lazy loading
* The developers have to add some extra lines of code to the existing ones to implement lazy load. It can make the code a bit complicated.
* Sometimes, lazy loading may affect the website's ranking on search engines because of improper indexing of the content, which is not loaded.
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
Node js is an open-source virtual machine that uses javascript as its scripting language. Despite being single-threaded, it is one of the most popular web technologies. The reason why node js is popular despite being single-threaded is the asynchronous nature that makes it possible to handle concurrency and perform multiple I/O operations at the same time. Node js uses an event loop to maintain concurrency and perform non-blocking I/O operations.
As soon as Node js starts, it initializes an event loop. The event loop works on a queue (which is called an event queue) and performs tasks in FIFO(First In First Out) order. It executes a task only when there is no ongoing task in the call stack. The call stack works in LIFO(Last In First Out) order. The event loop continuously checks the call stack to check if there is any task that needs to be run. Now whenever the event loop finds any function, it adds it to the stack and runs in order.  
Let’s see an example to get a proper understanding of how to call stack and event loop works and handles concurrency,
Example : In this example, we will see the working of the call stack.
function add(a,b){
   return a+b;
function print(n){
   console.log(`Two times the number ${n} is `+add(n,n));

Output : 

Two times the number 5 is 10
== 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
Tags and attributes are two concepts used in HTML. They work together but perform different functions. The main difference between an HTML tag and an HTML attribute is that an HTML tag is a way of representing an HTML element in the program. On the other hand, an HTML attribute describes the characteristics of an HTML element.

For example : <a>, <href>, <button>, and <div> etc. are HTML tags and src, class, and id etc. are the example of HTML attributes.
See this example :
<img src="myhome.jpg" alt="A photo of my home.">  
In the above example, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Difference between HTML tags and HTML attributes :

HTML Tags HTML Attributes
HTML tags are generally the starting and ending parts of the HTML code. HTML attributes are used to define the character of the HTML elements.
HTML tags define a way to represent and hold HTML elements in the program. HTML attributes are generally used to provide additional styling to the element.
HTML tags begin with < symbol and end with > symbol. HTML attributes are always placed in the opening tag of an element.
HTML tags are like keywords where every single tag has a unique meaning. HTML attributes provide various additional properties to the existing HTML element.
HTTP Requests Description
GET It is sent when we wish to recover data from the server. GET request is the most typically used HTTP request.
HEAD 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 per the headers, without transferring the entire content. The method is commonly utilised when testing hypertext links for recent change, accessibility, and validity.
TRACE TRACE requests are implemented to invoke a remote, application loop-back test along the path to the target resource. The 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.
POST This request is utilized to transmit data from the user to the server. By submitting web forms, these requests can be made. The 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.
PUT It is identical to POST, but it is utilized to revise the existing data on the server. For instance, when we wish to revamp our complete account on a web page, we utilize the PUT request.
PATCH 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 or any additional information about our account, we can make use of the PATCH request.

HTTP Status codes Description
HTTP Status Code 301 - Permanent Redirect Any time one URL needs to be redirected to another permanently, a 301 redirect should be used. A 301 redirect implies that bots and visitors that come on that page will be taken to the new URL. Link equity is also passed to the new URL via a 301 redirect. 
HTTP Status Code 302 - Temporary Redirect  302 redirect is just like a 30, where it passes visitors and bots to the new page, but it may not pass along link equity. It is not recommended using 302 redirects for permanent changes.
HTTP Status Code 404 - Not Found This implies the server did not find the file or page that the browser is requesting. 404s don’t show whether the missing resource or pages are missing temporarily or permanently. 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 200 - OK This is the ideal status code for a properly functioning page. 
HTTP Status Code 410 - Gone A 410 implies the page is no longer available from the server and they have set no forwarding address. Any links you present on your site that are directed to a 410 page are sending visitors and bots to a dead resource.
HTTP Status Code 500 - Internal Server Error This status code shows a problem with the server and will affect access to your site. Bots and human visitors alike will get lost, and your link equity will go nowhere fast. 
HTTP Status Code 503 - Service Unavailable 503 response, shows that the server is unavailable. This could be because of temporarily overloading the server or maintenance of the server.