HTML

 What is HTML? What is the difference between HTML and HTML5?

HTML stands for Hyper Text Markup Language. It is a standard markup language
for creating webpages. HTML describes the structure of web pages. It consists of
series of elements.

HTML HTML5
Older version of HTML is less mobile HTML5 language is more mobile
friendly. friendly.
No audio/video support in HTML. Audio/ video elements can be
integrated directly onto a webpage.
It doesn’t support all web browsers. It is supported by all major web
browsers.
It doesn’t allow JavaScript to run in It allows JavaScript to run in
browser. background.

 What is Canvas and its usage?

The HTML <canvas> element is used to allow graphics via JavaScript.
The canvas element is only a container for graphics. Canvas has several methods
for drawing paths, boxes, circles, text.

 What is SVG and its usage?

SVG defines vector-based graphics in XML format.
SVG stands for Scalable vector graphics. <svg> is a container for svg graphics. SVG
is used to define graphics for the web.

3
  What is the difference between Canvas and SVG?

Canvas SVG
It is resolution dependent. It is resolution independent.
No support for event handlers. Support for event handlers.
2D graphics using JavaScript. 2D graphics in XML.
Poor rendering capabilities. It is suited for applications with large
rendering.

 Define Bootstrap and its advantages. How to import bootstrap?

Bootstrap is defined as the largest collection of predefined reusable code snippets
written in HTML, CSS, JS for developing responsive, mobile websites.

Advantages:
• Design websites faster and easier.
• Fully customizable and light weight.
• It has big community and friendly support, highest templates. Short
development time and feature rich core.

Import:
• Using content delivery network (CDN).
• Downloading files locally.
• Using package managers to import bootstrap to HTML.

 What is Grid system?

It is used for layout, specifically responsive layouts. The grid is made up of
grouping of rows and columns inside 1 or more containers.

 What are HTML elements and HTML tags?

An HTML element is defined by a start tag, text content and end tag.
Ex: <h1> heading </h1>
<p> paragraph </p>
4
 HTML Tag represents the root of an HTML document. It is container for all other
elements. Special keyword that is surrounded by “<” and “>”. Tags are the starting
and ending parts of an HTML element. Whatever written inside “<” and “>” are
called tags.
Ex: <h1>, <p>, <div>, <input>, …

 What are Attributes?

Attributes are used to define the character of an HTML element. It always placed
in the opening tag of an element.

 What is Margin? How to Insert an image in HTML?

The margin property defines the space around an HTML element. It allows to set
all of the properties for the four margins in one declaration.

Ex: <p style=” margin:10px 3% 8px auto”> text </p> 10px

is top margin.
3% is right margin.
8px is bottom margin.
Left margin will be set by browser.

To insert an image:
Copy the URL and open your index.html file.
Insert it into img code. i.e., <img src=”url”>

 What are semantic tags, their uses, and differences?

Semantic HTML introduces meaning to the webpage rather than just presentation.
It clearly describes meaning to both developer and browser.
By adding semantic tags to your document, you provide additional file. Specifically
schematic tags make it clear to the browser what the meaning of a page and the
content is.

Semantic tags- clearly defines its content. They have specific attributes for their
structure. Ex: <nav>, <header>, <footer>, <table>, <section>

5
 Non-Semantic tags- tells nothing about its content. Class attributes can be used for
their structure. Ex: <div>, <span>

 Define Inline and Block elements?

Inline elements doesn’t start on a new line. It only takes up as much width as
necessary.
Ex: <span>, <a>, <i>, <b>, <br>

Block elements always starts on a new line. It takes up the full width available.
It has a top and a bottom margin, where inline element doesn’t. Ex: <div>,
<header>, <p>, <section>, <ul>, <li>, <hr>

 What is Anchor element?

<a> tag defines a hyper link, which is used to link from one page to another. The
most important attribute of <a> element is the “href” attribute, which indicates
the link’s destination.

 What is Header tag?

<h> Header tags are an HTML element used to define page headings. They
distinguish the main heading “h1” and sub-headings “h2-h6”.

 What is Head element?

<head> Head element is a container for metadata and is placed between the
<html> tag and <body> in your webpage.

 What is Script tag?

<script> Script tag is used to embed a client-side script (JavaScript). Script element
is either contains scripting statements, or its points to an external script file through
src attribute.

6
CSS

 What is CSS and its syntax?

CSS stands for Cascading Styling Sheet; it describes how HTML elements are to be
displayed on the screen.
A CSS rule consists of a selector and a declaration block.
The selector points to the HTML elements you want to style.
Declaration block are surrounded by curly brackets. In declaration block, it
contains property name and a value separated by colon.

.selector {
Property name1: value1;
Property name2: value2;
}
 Define CSS selectors and its types?
CSS selectors are used to select the HTML elements you want to style. Types
of selectors – Simplex, complex, compound.

The Id selector uses the id attribute of an HTML element to select a specific

element. It is denoted or written in “#” character.

The class selector selects the HTML elements with a specific class attribute, and it
is denoted in “.” Period character.

Universal selector selects all HTML elements on the page. It is denoted by “*”.
Element selector selects HTML elements based on the element name.

 Define Box model.

Box model is used when talking about design and layout.
It is essentially a box that wraps around every HTML element.

7
 It consists of margins, borders, padding, and the actual content.

Content: The content of the box, where text and images appear.
Padding: Clears an area around the content. The padding is transparent.
Border: A border that goes around the padding and content.
Margin: Clears an area outside the border. The margin is transparent.

Box properties: Height, width, border, padding.

 Define Flex-box properties.

“d-flex” defines a flexbox container. The direct HTML elements in the flexbox
container are called flex items.
The flex direction specifies the direction of the flex items in the flexbox container.
flex-row, flex-column.
Justify content specifies the alignment of flex items along the flex direction in a
flexbox container.
Justify-content-start, Justify-content-center, Justify-content-end.

 What is Intrinsic & Extrinsic size?

Intrinsic size: Some elements have a natural size set by default.
Extrinsic size: If we set a specific size to an element.
Handling overflow: content overflow can be handled using the CSS overflow
property - visible, hidden, scroll, auto. In directions overflow – X, Y.
8
  What is layout and methods? Write Flex-box layout with CSS
properties. Layout is a pattern to structure the information and arrange
the elements on the website. Flexbox and CSS grid are the methods.
Flexbox is stable one.
Below some flex-box layout with CSS properties are mentioned:
display, flex-direction, justify-content, align-items, align-self, align-content,
flexwrap, flex-flow, …

 What are media queries in CSS and media features?

Media queries plays a crucial part while developing responsive layouts.
@media media-type and (expression) {
CSS
}

Media types describe the general category of devices (screen, print, tv, all).
Media features:
Width, min-width, max-width.
Height, min-height, max-height.
Orientation – landscape(W>H), portrait(H>W).

 What is flex-box sizing properties?

Flex items can scale up or scale down their size based on the available space.
Flex-grow – specifies how flex items scale up their size. [It changes width +]
Flex-shrink – specifies how flex items scale down. [It changes width -]

 What are gradients in CSS?

Gradients display smooth transition between two or more specified colors.
Linear gradient (goes down/up/left/right/diagonally)
Radial gradient (defined by their center)
CSS shadow effects can add shadow to text and to elements. text-shadow,
box-shadow.

9
  Define CSS transforms and methods.
CSS transforms allows you to move, rotate, scale, skew elements.
2D transformation methods: translate (), rotate (), scale x(), scale y(), skew(),
matrix().
3D transformation methods: rotate x(), rotate y(), rotate z().

 What is transitions in CSS?

CSS transitions allows you to change the property values smoothly, over a given
duration.
Ex: transition: width 2s transition-
delay: 1s transition-duration: 2s
transition-property: width
transition-timing-function: ease/linear/eas-in/ease-out

 Define Object fit.

Object fit is used to specify how an <img> or <video> should be resized to fits its
container. Object positions property is used to position the image, as you want.

 What is Pagination? When pagination is to be used?

Pagination is method of breaks up several entries or web content into multiple
pages. It is used when there are number of pages, you may wish to add some sort
of pagination to each page.

10
JavaScript

 What do you mean by JavaScript?

JavaScript is a lightweight interpreted programming language. JS used to program
the behavior of web pages. It is used both on the client-side and server-side that
allows you to make web pages interactive.

 Which tag defines JavaScript in HTML?

<script> tag defines JS in HTML.
In Programming languages, the code runs on virtual machine and browsers. In
Scripting languages, the code runs on browsers only.

 Difference between let, var, const.

“let” allows you to declare variables that are limited to the scope of a block
statement, or expression on which it is used, unlike the var keyword, which
declares a variable globally, or locally to an entire function regardless of block
scope. const can’t be changed.

11
  What is DOM?
DOM – Document Object Model is the structured representation of the HTML
document created by the browser. It allows JavaScript to manipulate, structure
and style your website.

 Define Events.
Events are the actions by which the user or browser interacts with HTML
elements. Actions can be like clicking a button, pressing on keyboard keys scrolling
the page, etc.

 What is the difference between loose equal and strict equal?

Loose equal “==” compares two values for equality but doesn’t compare type of
values. where Strict equal “===” compares type of values.

 What do you mean by data structures and data types.

Data Structures allows us to store and organize the data efficiently. This makes us
access and performs operations on the data smoothly. It is a collection of different
kinds of data. That entire data can be represented using an object and can be used
throughout the program.
In JS Data Structures (built-in) are Arrays, objects, maps, sets.

The data type is the form of a variable to which a value can be assigned. It
defines that the variable will assign the values of the given data type only. Data
type examples are number, string, boolean, etc.

 What is Hoisting?
Hoisting in JavaScript is a behavior in which a function or variable can be used
before declaration. Ex: x=8;
console.log(x);
var x; //display 8

 What is Scope?
Scope determined the accessibility of variables. Types of scopes – Block, Function,
Global.

12
  What is Array?
An Array holds an ordered sequence of items.
Ex: const profile = [“Emp1”,” Emp2”,” Emp3”];
Methods: pop, push, shift, unshift, splice, join, sort, concat.

 What is an Object?
In JavaScript, an object is an unordered collection of key-value pairs. Each keyvalue
pair is called a property. Object values should be functions, array, object.

Ex: const bike = {type:"Duke", model:"390", color:"black"};

 What is Storage mechanism?

Storing the data on the client (using machine) is called client-side data storage.
Where the data is stored on the server is called as server-side data storage.

 What is Local storage?

Local storage allows web applications to store data locally within the user browser.
It is a storage object. Data can be stored in the form of key-value pair.

Methods:
setItem() – can be used to storing data in the local storage. getItem() – can
be used to get the data from the local storage. clear() – clears the data.
removeItem() – removes the specified storage object item based on the key.

 What is JSON and methods?

JSON- JavaScript Object Notation is a data representation format used for:
Transmit data between client and server.
Web services and APIs use JSON format to provide public data.

JSON Methods:
JSON.stringify() – converts the given value into JSON string.
JSON.parse() – parse a JSON string and returns JS object.

13
  Define Function and types.
In JavaScript, A function is defined as a set of statements that performs a task and
executed when it is called or invoked.
There are 3 types of writing a function in JS – Function Declaration, Function
Expression, Arrow Function.

Function Declaration is start declaring using the keyword “function” and then
write function name, parameters. Ex: function add(a,b) {
console.log(a+b);
}
add(5,10);

Function Expression define a function using a variable and stored the return value
in that variable.
Ex: const add = function(a,b) {
console.log(a+b);
}
add(5,10);

Arrow Function is introduced with ES6 version of JS. It uses arrow symbol only, not
function keyword. Ex: let add = (a+b) => a+b;
console.log(add(5,10));

 What is ES and ES5/ ES6?

ECMAScript is the standard that JavaScript programming language uses.
ECMAScript provides the specification on how JavaScript programming language
should work.ES5/ ES6 are the versions of JavaScript. It brings new features and
make your code more modern and readable.

14
  What are HTTP Requests?
An HTTP request is made by a client, to a named host, which is located on a server.
The aim of the request is to access a resource on the server.

15
Python

 What is Python? What are the benefits of using Python?

Python is a programming language with objects, modules, threads, exceptions and
automatic memory management. The benefits of pythons are that it is simple and
easy, portable, extensible, build-in data structure and it is an open source.

 What is an Interpreted language?

An Interpreted language executes its statements line by line. Languages such as
Python, JavaScript, R, PHP, and Ruby are prime examples of Interpreted languages.
Programs written in an interpreted language runs directly from the source code,
with no intermediary compilation step.

 What are the built-in data types in python?

16
  What is PEP 8?
PEP- Python Enhancement Proposal. PEP 8 is a coding convention, a set of
recommendation, about how to write your Python code more readable.

 How memory is managed in Python?

o Python memory is managed by Python private heap space. All Python
objects and data structures are located in a private heap. The programmer does
not have access to this private heap and interpreter takes care of this Python
private heap.
o The allocation of Python heap space for Python objects is done by Python
memory manager. The core API gives access to some tools for the
programmer to code.

 What are functions in Python?

A function is a block of code which is executed only when a call is made to the
function. def keyword is used to define a particular function as shown below:
Ex: def function():
Print(“Hi Pal”)
function(); #calls to function

 What is __init__ in python?

The __init__ method is called automatically whenever a new object is initiated.
This method allocates memory to the new object as soon as it is created. This
method can also be used to initialize variables.

 What is type conversions?

1. Implicit Type Conversion: In this form of type conversion python
interpreter helps in automatically converting the data type into another data
type without any User involvement.
2. Explicit Type Conversion: In this form of Type conversion the data type
inn changed into a required type by the user.

17
  How does break, continue, and pass work?

Python break: This statement helps terminate the loop or the statement and pass
the control to the next statement.

Python continue: This statement helps force the execution of the next iteration
when a specific condition meets, instead of terminating it.
Python pass: This statement helps write the code syntactically and wants to skip
the execution. It is also considered a null operation as nothing happens when you
execute the pass statement.

 What is pickling and unpickling?

Pickle module accepts any Python object and converts it into a string
representation and dumps it into a file by using dump function, this process is
called pickling. While the process of retrieving original Python objects from the
stored string representation is called unpickling.

18
SQL

 What do you mean by Data? What is Database?

Any sort of information that can be stored is called “Data” and it is classified into
3types i.e., structured, semi-structured, unstructured data.
A database is an organized collection of data, stored and retrieved digitally from
a remote or local computer system.

 What is RDBMS? How is it different from DBMS?

In DBMS, the data is stored as a file, whereas in RDBMS, data is stored in the form
of tables. RDBMS stores data in the form of a collection of tables, and relations can
be defined between the common fields of these tables. Most modern database
management systems like MySQL, Microsoft SQL Server, Oracle, IBM DB2, and
Amazon Redshift are based on RDBMS.

 What is SQL?
o SQL Stands for structured query language.
o This database language is mainly designed for maintaining the data in
relational database management systems. o SQL is the standard language
for accessing and manipulating databases.

 What are the different types of SQL commands?

19
 DDL – Data Definition Language: o It is used to change the structure of the table
like creating table, altering the table and deleting the table.
o All the commands in the DDL are auto committed that means it permanently
saves all the changes in the database.

CREATE: This statement is used to create a new database or table Syntax:

CREATE TABLE EMPLOYEE
(
Name VARCHAR2(20),
Email VARCHAR2(100),
DOB DATE
);
ALTER: This statement is used to add, modify and delete the columns of an
existing table.
Syntax :
ALTER TABLE STU_DETAILS
ADD (ADDRESS VARCHAR2(20)
);
DROP: This statement is used to drop an existing table in a databse. This command
deletes both the structure and records stored in table.
Syntax:
DROP TABLE
EMPLOYEE;

TRUNCATE: This command is used to remove all rows from a table. It is similar to
DELETE statement with No WHERE clause.
Syntax:
TRUNCATE TABLE EMPLOYEE;

20
 DML – Data Manipulation Language:
• DML commands are used to modify the database. It is responsible for all
form of changes in the database.
• The command of DML is not auto committed that means it can't
permanently save all the changes in the database. They can be rollback.

INSERT: It is used to insert single or multiple records in a table.

Syntax:
INSERT INTO
Teacher (Author, Subject)
VALUES ("Sonoo", "DBMS");

UPDATE: This command is used to update or modify the value of a column in the
table.
Syntax:
UPDATE students
SET User_Name = 'Sonoo'
WHERE Student_Id = '3'

DELETE: It is used to remove one or more row from a table.

Syntax:
DELETE FROM Teacher
WHERE Author="Sonoo";

DCL - Data Control Language: DCL commands are used to grant and take back
authority from any database user.
Grant: It is used to give user access privileges to a database.

21
 Syntax:
GRANT SELECT, UPDATE ON MY_TABLE TO SOME_USER, ANOTHER_USER;

Revoke: It is used to take back permissions from the user.

Syntax:
REVOKE SELECT, UPDATE ON MY_TABLE FROM USER1, USER2;

TCL - Transaction Control Language:

TCL commands can only use with DML commands like INSERT, DELETE and UPDATE
only.
These operations are automatically committed in the database that's why they
cannot be used while creating tables or dropping them.

COMMIT: Commit command is used to save all the transactions to the database.
Syntax:
DELETE FROM CUSTOMERS
WHERE AGE = 25;
COMMIT;

ROLLBACK: Rollback command is used to undo transactions that have not already
been saved to the database. Syntax:
DELETE FROM CUSTOMERS
WHERE AGE = 25;
ROLLBACK;

SAVEPOINT: It is used to roll the transaction back to a certain point without rolling
back the entire transaction.
Syntax: SAVEPOINT SAVEPOINT_NAME;

22
 DQL - Data Query Language: DQL is used to fetch the data from the database.
Syntax:
SELECT emp_name
FROM employee
WHERE age > 20;

 What is the difference between SQL and MYSQL?

SQL is a standard language for retrieving and manipulating structured databases.
On the contrary, MySQL is a relational database management system, like SQL
Server, Oracle or IBM DB2, that is used to manage SQL databases.

 Difference between delete, drop and truncate? DELETE statement is

used to delete rows from a table
TRUNCATE command is used to delete all the rows from the table and free the space
containing the table.
DROP command is used to remove an object from the database. If you drop a table,
all the rows in the table are deleted and the table structure is removed from the
database.

 What are Entities and Relationships?

Entity: An entity can be a real-world object, either tangible or intangible, that can
be easily identifiable. For example, in a college database, students, professors,
workers, departments, and projects can be referred to as entities. Each entity has
some associated properties that provide it an identity.

Relationships: Relations or links between entities that have something to do with

each other. For example - The employee's table in a company's database can be
associated with the salary table in the same database.

 What are Joins? Types of joins in SQL

A Join clause is used to combine two or more tables, based on a related column
between them.

23
  What are constraints in SQL?
Constraints are used to specify the rules concerning data in the table. It can be
applied for single or multiple fields in an SQL table during the creation of the table
or after creating using the ALTER TABLE command. The constraints are:
• NOT NULL - Restricts NULL value from being inserted into a column.
• CHECK - Verifies that all values in a field satisfy a condition.
• DEFAULT - Automatically assigns a default value if no value has been
specified for the field.
• UNIQUE - Ensures unique values to be inserted into the field.
• INDEX - Indexes a field providing faster retrieval of records.
• PRIMARY KEY - Uniquely identifies each record in a table.
• FOREIGN KEY - Ensures referential integrity for a record in another table.
24
  What are ACID properties?

Atomicity: The entire transactions take place at once or doesn’t happen at all.
Consistency: The database must be consistent before and after the transaction.
Isolation: Multiple transactions occur independently without interference.
Durability: The changes of a successful transaction occurs even if the system
failure.

25
React JS

 What is React and its features?

React is an open-source front-end JavaScript library developed by Facebook that is
used for building user interfaces, especially for single-page applications. It is used
for handling view layer for web and mobile apps.
The important features of ReactJS are following below:
o JSX
oComponents
o Virtual DOM
o Simplicity
oPerformance

 Distinguish between DOM and Virtual DOM.

DOM is generated from the markup when a webpage is loaded. The DOM is a tree
structure of elements.
Virtual DOM is a node tree similar to Real DOM that lists elements, content and
attribute as objects and properties. React render() method creates a node tree
from the react components.

 What is JSX?
JSX is a XML-like syntax extension to ECMAScript (the acronym stands for
JavaScript XML). JSX stands for JavaScript XML. JSX allows us to write HTML in
React. JSX makes it easier to write and add HTML in React.

 What is the difference between Elements and Components?

An Element is a plain object describing what you want to appear on the screen in
terms of the DOM nodes or other components. Elements can contain other
Elements in their props. Creating a React element is cheap. Once an element is
created, it is never mutated.
Whereas a component can be declared in several different ways. It can be a class
with a render() method or it can be defined as a function. In either case, it takes
props as an input, and returns a JSX tree.
26
  What is the difference between state and props?
Both props and state are plain JavaScript objects. While both of them hold
information that influences the output of render, they are different in their
functionality with respect to component. Props get passed to the component
similar to function parameters whereas state is managed within the component
similar to variables declared within a function.

 What is the purpose of Render() in ReactJS?

React renders HTML to the web page by using a function called Render(). The
purpose of this function is to display the specified HTML code inside the
specified HTML element. In Render() method, we can read Props and state and
return our JSX code to the react component of our app.

 Define Redux.
Redux is a library used for frontend. It is a state container for JavaScript
applications which should be used for the applications state management. You can
test and run the application in different environments.

27
Resume

 Make sure your resume in single page only.

 Don’t add too much, write in simple way.
 Recruiters follow ATS (Applicant Tracking System) which target keywords.
 Mention the skills and section heading properly.
 Don’t use spelling mistakes in resume.

Here you can follow the formats through following link.

Check more formats here, select one and build your free resume.
Link: Free Resume Templates for 2022 [Download Now] (novoresume.com)

Most Common Questions in Interview:

 Tell me about yourself.
 About Project.
 Why is there a gap in your work experience?
 Why did you change your career path? (why you’re switching from Non-IT to IT)
 What are your strengths and weakness?
 Why should we hire you?
 Why do you want to work here?
 What do you know about our company?

28
For more updates or info, you can follow me
LinkedIn: Sravan Kumar

29