The Ultimate Interview Handbook

Full Stack Web Development

1
 Contents

Topic Page

1. About…………………….……………………………………………………3
2. Soft Skill Based Questions …………………………………………………...5
3. Backend Developer question ………………………………………………...11
a. Python ………………………………………………………………...11
b. Django ………………………………………………………………..14
c. Mysql …………………………………………………………………17
d. Database ………………………………………………………………21
e. Coding Good practices ………………………………………………..29
4. Frontend Developer Questions ……………………………………………….30
a. HTML, CSS , Bootstrap ………………………………………………30
i) HTML ………………………………………………………………30
ii) CSS ………………………………………………………………...48
iii) Bootstrap …………………………………………………………..61
b. Javascript ………………………………………………………………74
c. ReactJS ………………………………………………………………...94
d. Coding Good Practices ………………………………………………...115
i) HTML ……………………………………………………………….115
ii) CSS …………………………………………………………………116
iii) Javascript …………………………………………………………..117

2
 About
The Ultimate Interview Handbook for Backend and Frontend Developers

Greetings and welcome!

In today's competitive job market, we understand how challenging it can be to showcase your
skills and stand out from the crowd. That's why we are thrilled to present "The Ultimate
Interview Handbook for Backend and Frontend Developers" – a comprehensive resource tailored
to address the unique needs of both backend and frontend developers.

Our mission is simple: to empower you with the knowledge and confidence needed to land your
dream job. This handbook goes beyond just technical questions; it also includes crucial soft
skill-based questions, which are often the differentiating factor between successful candidates
and those who miss out on great opportunities.

Key Features:

1. Comprehensive Coverage: Whether you're pursuing a career as a backend specialist or a

frontend maestro, we've got your back! Our handbook covers an extensive range of interview
questions, ensuring you are well-prepared for any technical challenge that comes your way.

2. Best Practices for Code Excellence: We believe that being a proficient developer is not just
about answering questions; it's also about writing clean, efficient, and maintainable code. Hence,
we delve into coding best practices that will help you create elegant, readable, and testable
solutions.

3. Real Candidate Insights: To bring you the most authentic and relevant interview questions, we
have diligently curated content from real candidates and developers across various online
platforms. This ensures that you are exposed to the kinds of questions you'll encounter in
real-world interviews.

3
4. Confidence Through Answers: Alongside each question, you'll find comprehensive answers
that offer in-depth explanations. This way, you not only understand the solution but also grasp
the underlying concepts, empowering you to approach similar challenges confidently.

5. Unlock Your True Potential: By absorbing the knowledge within this handbook, you'll gain the
necessary expertise to excel in technical discussions and showcase your skills effectively. The
insights you gain here will undoubtedly set you apart from other candidates vying for the same
positions.

Whether you're just starting your job search or aiming for a career transition, we are here to
support you every step of the way.

Happy learning and best of luck in your endeavors!

Thanking you sincerely,
Anindita Bose
Support Instructor, Full Stack Web Development

4
 Soft Skill Based Questions

1) Run me through your cv / Tell me about yourself

● Start with your name.
● Give a brief overview of your education and work experience.
● Highlight your most relevant skills and experience.
● Be specific and provide examples. Don't just list your skills and experience, tell
the interviewer about specific projects or tasks that you have worked on that
demonstrate your skills.
● Be enthusiastic and positive
● Keep it brief.

Sample Answer:

Interviewer: Can you run me through your CV? / Can you tell me about yourself?
You: Sure. Hello, I am Fatema Begum. I graduated from [XYZ] University with a degree in
computer science, and I have been working as a software engineer for the past X years. My most
recent experience was at XYZ Company, where I worked on a team that developed a new
software platform. I was responsible for the design and implementation of several key features of
the platform, and I was also involved in the testing and deployment process. I am a highly
motivated and results-oriented individual, and I am confident that I have the skills and
experience that you are looking for.

2) What are your Strengths?

● Choose strengths that are relevant to the job you are applying for.
● Be specific and provide examples.
● Be confident
● Be humble.

It is important to choose strengths that are relevant to the job you are applying for. If you are
applying for a job in sales, you might mention your communication skills and your ability to

5
build relationships. If you are applying for a job in engineering, you might mention your
problem-solving skills and your technical knowledge.

Sample Answer:

Interviewer: What are your strengths?

You: I believe I have good communication and problem solving skills. While I was working in
XYZ company, during the time of launching our new software called ABC Software, we had to
be in constant communication with the marketing and branding team. I was the spokesperson
between our tech team and marketing team, because launching a product is easy but ensuring that
it is purchased by customers is tough so before our launch day I made sure that the specifications
of our software, user manual , etc are well portrayed by the marketing team. Finally, when our
product was launched, it was a huge success as we secured 100 orders on the first day.

3) What are your weaknesses?

● Choose a weakness that is not a deal-breaker for the job. For example, if you are applying
for a job as a software engineer, you would not want to say that you are not good at math.
However, you could say that you sometimes have trouble staying organized or that you
can be a bit of a perfectionist.
● Be specific and provide examples. Don't just say that you are "not good at public
speaking." Tell the interviewer about a time when you had to give a presentation and how
you overcame your weakness.
● Focus on how you are working to improve your weakness. This shows the interviewer
that you are self-aware and that you are willing to put in the effort to improve your skills.
● Be positive. Even though you are talking about a weakness, try to end your answer on a
positive note. For example, you could say that you are working on becoming more
organized or that you are learning to delegate tasks more effectively.

6
 Sample Answer

Interviewer: What are your weaknesses?

You: I think that to err is human, every human has flaws. If I have to point out one which
I think works as an obstacle to my success is that I am a bit of a perfectionist. I cannot
move onto a new work before I finish the one I have on my hand as I want to finish it
perfectly and I cannot concentrate on anything else before I finish it. This flaw of mine
stops me from multitasking. However, I am trying to work on it now and I believe that I
have come a long way now. Now , I take notes of all the work that I am assigned with and
make a mental map of how much of each of the assigned works I will finish by a day.
This was I can keep track of what I am concentrating on and it helps me become more
productive

4) How do you communicate effectively with your team members?

● Be specific and provide examples.

● Focus on the key elements of effective communication.
● Use active listening skills.
● Be respectful of different communication styles.
● Be open to feedback

Sample Answer:

Interviewer: How do you communicate effectively with your team members?

You: I believe that effective communication is essential for teamwork. I am always mindful of
the key elements of effective communication, such as being clear, concise, and respectful. I also
use active listening skills to ensure that I am understanding my team members and that they are
understanding me. I am always open to feedback on my communication skills, and I am always
looking for ways to improve.For example, when I was working on a project with a team of

7
engineers, I noticed that one of the team members was struggling to understand a concept. I took
the time to explain the concept in a different way, and I asked the team member if they had any
questions. By taking the time to communicate effectively, I was able to help the team member
understand the concept and to contribute to the project.

5) Can you give me an example of a time when you demonstrated leadership skills?

● Be specific. Don't just say that you are a leader. Tell the interviewer about a specific time
when you demonstrated leadership skills.
● Focus on the key elements of leadership. This includes setting clear goals, motivating and
inspiring others, and resolving conflicts.
● Use examples from your past experiences. This will help the interviewer to understand
your leadership skills in action.
● Be confident.

Sample Answer:

Interviewer: Can you give me an example of a time when you demonstrated leadership
skills?

You : I was working as a team leader for a group of software engineers. We were tasked with
developing a new software platform, and we were under a lot of pressure to meet the deadline.
The team was made up of experienced engineers, but they were all working on different projects,
so they didn't know each other very well.
I knew that in order to be successful, we needed to work together as a team. I started by getting
to know each of the team members and their strengths and weaknesses. I then created a project
plan and assigned tasks to each team member. I also made sure to communicate regularly with
the team and to keep them updated on the project's progress.
As the project progressed, I faced a number of challenges. One of the team members was
struggling to meet their deadlines, and another team member was having trouble understanding
the project's requirements. I worked with these team members to identify the problems and to

8
develop solutions. I also made sure to provide the team with regular feedback, both positive and
negative. In the end, the project was a success. We met the deadline, and the software platform
was well-received by the client. I believe that our success was due in part to my leadership skills.
I was able to get the team to work together effectively, and I was able to overcome the challenges
that we faced.

6) What are your strategies for staying calm under pressure? or How well do you work
under pressure?

● Be honest. If you don't handle pressure well, don't try to pretend that you do. The
interviewer will be able to tell if you are being dishonest.
● Focus on your strengths. If you do handle pressure well, talk about the strategies that you
use to stay calm.
● Be specific. Don't just say that you handle pressure well. Give the interviewer an example
of a time when you handled pressure effectively.
● Be positive.
● Interviewers usually want workers who work well under pressure, so even if you cannot
take pressure well, do not say directly that you cannot.

Sample Answer:

Interviewer: What are your strategies for staying calm under pressure? or How well do you
work under pressure?

You: I believe that I am deadline driven. If I am assigned a task without any deadlines, I tend to
keep the work aside and sometimes forget about it, but when I have a deadline, something ticks
on my mind and I start to panic a bit and my fear of not being upto the marks drives me to be the
most productive. I start by creating a mental map of my task, then jot down my ideas, then I start
executing it. I try to categorize my tasks into smaller sub tasks and I point it down in my
notebook. I do it sequentially so that each of the tasks are well connected and after I complete
one task I scratch it off from the list. In the end , when all my sub tasks are over I see that I have

9
completed my task successfully within the given deadline. Sometimes, if I start panicking, I take
some deep breaths and do breathing exercises, then I look around my surrounding and I see my
coworkers who are very friendly and I get reassured that if I get stuck in anything my colleagues
will help me out, that gives me the strength of not fretting away before I even start my task.

10
 Backend Developer question

Python
1. What are the benefits of using Python for backend development?
● Python is a general-purpose language, which means that it can be used for a variety of
tasks, including backend development.
● Python is a relatively easy language to learn, which makes it a good choice for beginners.
● Python is a powerful language, which means that it can be used to build complex
applications.
● Python is a well-supported language, with a large community of developers and a wealth
of resources available.

2. What are the different frameworks that can be used for backend development in Python?
● Django is a popular framework for building web applications.
● Flask is a microframework that is often used for building RESTful APIs.
● Pyramid is a full-stack framework that can be used for building both web applications
and APIs.
● Bottle is a microframework that is similar to Flask.

3. What are the advantages and disadvantages of using Python for backend development?
● Advantages:
○ Easy to learn and use
○ Powerful and versatile
○ Well-supported by a large community
○ Open source
● Disadvantages:
○ Not as fast as some other languages
○ Not as memory efficient as some other languages
○ Not as well-suited for certain types of applications

11
4. What are some of the common Python libraries used for backend development?
● Django: Django is a popular framework for building web applications. It includes a
number of libraries for handling tasks such as routing, templating, and database access.
● Flask: Flask is a microframework that is often used for building RESTful APIs. It
includes a number of libraries for handling tasks such as routing, templating, and
database access.
● Pyramid: Pyramid is a full-stack framework that can be used for building both web
applications and APIs. It includes a number of libraries for handling tasks such as
routing, templating, and database access.
● Bottle: Bottle is a microframework that is similar to Flask. It includes a number of
libraries for handling tasks such as routing, templating, and database access.

5. How do you handle errors in Python?

There are a number of ways to handle errors in Python. One way is to use the try and except
blocks. The try block contains the code that you are trying to execute. The except block contains
the code that will be executed if an error occurs.
Another way to handle errors in Python is to use the logging module. The logging module
provides a way to log errors to a file or to the console.

6. What are some of the best practices for writing Python code for backend development?
● Use clear and concise code.
● Use comments to explain your code.
● Use functions to break your code into smaller, more manageable chunks.
● Use unit tests to test your code.
● Use a version control system to track your changes.

7. How do you deploy Python applications?

There are a number of ways to deploy Python applications. One way is to use a web server such
as Apache or Nginx. Another way is to use a cloud platform such as AWS or Azure.

12
8. What are some of the challenges of using Python for backend development?
● Python is not as fast as some other languages.
● Python is not as memory efficient as some other languages.
● Python is not as well-suited for certain types of applications.

9. What are some of the future trends in Python for backend development?
● The use of Python for machine learning and artificial intelligence.
● The use of Python for big data processing.
● The use of Python for cloud computing.
By being familiar with these questions, you can be better prepared for your interview and show
the interviewer that you have a strong understanding of Python for backend development.

10. Why is Python so popular?

Python is a general-purpose language: This means that it can be used for a variety of tasks, not
just backend development. This makes it a versatile language that can be used for a variety of
projects.
● Python is easy to learn: Python is a relatively easy language to learn, even for beginners.
This makes it a good choice for people who are new to programming or who want to
learn a new language quickly.
● Python has a large community: Python has a large and active community of developers.
This means that there are many resources available, such as documentation, tutorials, and
libraries. This can be helpful for developers who are new to Python or who need help
with a specific task.
● Python is efficient: Python is a relatively efficient language, which means that it can be
used to create fast and scalable web applications. This is important for backend
development, where performance is often critical.
● Python is portable: Python code can be run on a variety of platforms, including Windows,
macOS, and Linux. This makes it a good choice for projects that need to be portable.

13
Overall, Python is a popular choice for backend development because it is a versatile,
easy-to-learn, efficient, and portable language. If you are looking for a language to use for
backend development, Python is a good option to consider.
Here are some additional benefits of using Python for backend development:
● Python is well-suited for data-driven applications: Python has a number of libraries that
are well-suited for data processing and analysis. This makes it a good choice for
applications that need to work with large amounts of data.
● Python is a good choice for microservices architecture: Microservices architecture is a
popular approach to building web applications. Python is a good choice for microservices
architecture because it is easy to deploy and scale.
● Python is a good choice for machine learning and artificial intelligence: Python has a
number of libraries that are well-suited for machine learning and artificial intelligence.
This makes it a good choice for applications that need to use these technologies.

Django
1) What is Django?
Django is a free and open-source web framework written in Python. It is a high-level framework
that helps developers to create web applications quickly and easily. Django is a popular
framework, and it is used by many large companies, such as Instagram, Spotify, and Disqus.

2) What are the benefits of using Django?

There are many benefits to using Django, including:
● It is a well-documented framework:** Django has a comprehensive documentation that
makes it easy to learn and use.
● It is a well-tested framework:** Django has been tested extensively, and it is known to be
reliable.
● It is a scalable framework:** Django can be scaled to handle large amounts of traffic.
● It is a secure framework:** Django has a number of security features that help to protect
your applications.

14
3) What are the limitations of using Django?
There are a few limitations to using Django, including:Sure, here are the answers to some of the
most asked backend interview questions on Django:

4) What are the limitations of using Django?

There are a few limitations to using Django, including:
● It can be complex: Django is a complex framework, and it can be difficult to learn and
use for beginners.
● It is not as flexible as some other frameworks: Django is an opinionated framework, and
it can be difficult to customize.
● It can be slow: Django can be slow for some applications, especially those that require a
lot of database queries.

5) What are the different parts of a Django project?

A Django project consists of the following parts:
● The settings.py file: This file contains the configuration settings for the project.
● The urls.py file:This file contains the URL mappings for the project.
● The models.py file: This file contains the models for the project.
● The views.py file:This file contains the views for the project.
● The templates folder: This folder contains the templates for the project.

6) What is the MVT pattern?

The MVT pattern is a design pattern that is used in Django. MVT stands for
Model-View-Template. The Model-View-Template pattern separates the data from the
presentation.

7) What is the difference between a model, view, and template?

15
A model is an object that represents data in Django. A view is a function that handles requests
from the user. A template is a file that contains the HTML for the user interface.

8) How do you create a model in Django?

To create a model in Django, you need to create a file called **models.py**. In this file, you
need to define the model class. The model class inherits from the **models.Model** class.

9) How do you create a view in Django?

To create a view in Django, you need to create a file called **views.py**. In this file, you need
to define the view function. The view function takes a request object as input and returns a
response object.

10) How do you create a template in Django?

To create a template in Django, you need to create a file with the .html extension. The template
file contains the HTML for the user interface.

11) How do you use Django's ORM?

Django's ORM is a powerful tool that allows you to interact with the database. The ORM
provides a high-level abstraction that makes it easy to query the database and save data.

12) How do you deploy a Django application?

There are a few ways to deploy a Django application. One way is to use a web hosting service.
Another way is to deploy the application on your own server.

16
 MySql
1) What is MySQL?

MySQL is an open-source relational database management system (RDBMS) that is used to

store and retrieve data. It is one of the most popular RDBMSs in the world, and is used by a
wide range of applications, including web applications, e-commerce platforms, and
enterprise applications.

2) What are the advantages of using MySQL?

There are many advantages to using MySQL, including:

● It is open-source and free to use.

● It is very scalable and can handle a large amount of data.

● It is very efficient and can perform complex queries quickly.

● It is well-supported by a large community of developers.

3) What is the difference between MySQL and SQL?

MySQL is a database management system (DBMS), while SQL is a language for querying
and manipulating data in a database. MySQL uses SQL to interact with the database, but it is
not the only DBMS that can use SQL.

4) What are the different types of MySQL databases?

There are two main types of MySQL databases:

● Relational databases: These databases store data in tables, which are made up of rows
and columns. Each row represents a single record, and each column represents a

17
 single piece of data about that record.

● NoSQL databases: These databases are designed to store and retrieve large amounts
of unstructured data. They do not use tables, but instead use different data structures,
such as key-value pairs or documents.

5) What are the different MySQL data types?

MySQL supports a wide range of data types, including:

● Numeric data types: These data types store numbers, such as integers, floats, and
decimals.

● Character data types: These data types store text, such as strings and binary data.

● Date and time data types: These data types store dates and times.

6) How do you create a table in MySQL?

To create a table in MySQL, you can use the CREATE TABLE statement. The syntax for this
statement is as follows:

CREATE TABLE table_name (

column_name1 data_type,
column_name2 data_type,
...
);
For example, the following statement creates a table called users with two columns:
CREATE TABLE users (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(255) NOT NULL,
PRIMARY KEY (id)
);

18
 7) How do you insert data into a table in MySQL?

To insert data into a table in MySQL, you can use the INSERT INTO statement. The syntax
for this statement is as follows:

INSERT INTO table_name (column_name1, column_name2, ...)

VALUES (value1, value2, ...);

For example, the following statement inserts a row into the users table:

INSERT INTO users (name)

VALUES ("John Doe");

8) How do you update data in a table in MySQL?

To update data in a table in MySQL, you can use the UPDATE statement. The syntax for this
statement is as follows:

UPDATE table_name
SET column_name1 = new_value1,
column_name2 = new_value2,
...
WHERE condition;
For example, the following statement updates the name of the user with id 1 to "Jane Doe":
UPDATE users
SET name = "Jane Doe"
WHERE id = 1;

9) How do you delete data from a table in MySQL?

19
To delete data from a table in MySQL, you can use the DELETE statement. The syntax for
this statement is as follows:

DELETE FROM table_name

WHERE condition;

For example, the following statement deletes the user with id 1 from the users table:

DELETE FROM users

WHERE id = 1;

10) How do you join tables in MySQL?

To join tables in MySQL, you can use the JOIN clause. The JOIN clause allows you to
combine data from two or more tables into a single result set.

There are different types of joins, including:

● Inner joins: These joins return rows where there is a match in both tables.
● Left joins: These joins return all the rows from the left table, even

11) How do you secure a MySQL database?

There are a number of things you can do to secure a MySQL database, including:

● Using strong passwords: Use strong passwords for the MySQL root user and any other
users that have access to the database.
● Restricting access: Only allow authorized users to access the database.
● Encrypting data: Encrypt sensitive data, such as passwords and credit card numbers.
● Keeping the database up to date: Keep the MySQL software up to date with the latest
security patches.

20
 Database

Q #1) What do you understand by ‘Database’?

Answer: Database is an organized collection of related data where the data is stored and
organized to serve some specific purpose.
For Example, A librarian maintain a database of all the information related to the books that are
available in the library.

Q #2) Define DBMS.

Answer: DBMS stands for Database Management System. It is a collection of application
programs which allow the user to organize, restore and retrieve information about data efficiently
and as effectively as possible.
Some of the popular DBMS’s are MySql, Oracle, Sybase, etc.

Q #3) Define RDBMS.

Answer: Relational Database Management System(RDBMS) is based on a relational model of
data that is stored in databases in separate tables and they are related to the use of a common
column. Data can be accessed easily from the relational database using Structured Query
Language (SQL).

Q #4) Enlist the advantages of DBMS.

Answer: The advantages of DBMS includes:
● Data is stored in a structured way and hence redundancy is controlled.
● Validates the data entered and provide restrictions on unauthorized access to the database.
● Provides backup and recovery of the data when required.
● It provides multiple user interfaces.

Q #5) What do you understand by Data Redundancy?

21
Answer: Duplication of data in the database is known as data redundancy. As a result of data
redundancy, duplicated data is present at multiple locations, hence it leads to wastage of the
storage space and the integrity of the database is destroyed.

Q #6) What are the various types of relationships in Database? Define them.
Answer: There are 3 types of relationships in Database:
● One-to-one: One table has a relationship with another table having a similar kind of
column. Each primary key relates to only one or no record in the related table.
● One-to-many: One table has a relationship with another table that has primary and
foreign key relations. The primary key table contains only one record that relates to none,
one or many records in the related table.
● Many-to-many: Each record in both the tables can relate to many numbers of records in
another table.

Q #7) Explain Normalization and De-Normalization.

Answer:
Normalization is the process of removing redundant data from the database by splitting the table
in a well-defined manner in order to maintain data integrity. This process saves much of the
storage space.
De-normalization is the process of adding up redundant data on the table in order to speed up the
complex queries and thus achieve better performance.

Q #8) What are the different types of Normalization?

Answer: Different types of Normalization are:
● First Normal Form (1NF): A relation is said to be in 1NF only when all the entities of the
table contain unique or atomic values.
● Second Normal Form (2NF): A relation is said to be in 2NF only if it is in 1NF and all
the non-key attribute of the table is fully dependent on the primary key.
● Third Normal Form (3NF): A relation is said to be in 3NF only if it is in 2NF and every
non-key attribute of the table is not transitively dependent on the primary key.

22
Q #9) What is BCNF?
Answer: BCNF is the Boyce Code Normal form. It is the higher version of 3Nf which does not
have any multiple overlapping candidate keys.

Q #10) What is SQL?

Answer: Structured Query language, SQL is an ANSI(American National Standard Institute)
standard programming language that is designed specifically for storing and managing the data
in the relational database management system (RDBMS) using all kinds of data operations.

Q #11) How many SQL statements are used? Define them.

Answer: SQL statements are basically divided into three categories, DDL, DML, and DCL.
They can be defined as:
● Data Definition Language (DDL) commands are used to define the structure that holds
the data. These commands are auto-committed i.e. changes done by the DDL commands
on the database are saved permanently.
● Data Manipulation Language (DML) commands are used to manipulate the data of the
database. These commands are not auto-committed and can be rolled back.
● Data Control Language (DCL) commands are used to control the visibility of the data in
the database like revoke access permission for using data in the database.

Q #12) Enlist some commands of DDL, DML, and DCL.

Answer: Data Definition Language (DDL) commands:
● CREATE to create a new table or database.
● ALTER for alteration.
● TRUNCATE to delete data from the table.
● DROP to drop a table.
● RENAME to rename a table.
Data Manipulation Language (DML) commands:
● INSERT to insert a new row.
● UPDATE to update an existing row.

23
 ● DELETE to delete a row.
● MERGE for merging two rows or two tables.
Data Control Language (DCL) commands:
● COMMIT to permanently save.
● ROLLBACK to undo the change.
● SAVEPOINT to save temporarily.

Q #13) Define DML Compiler.

Answer: DML compiler translates DML statements in a query language into a low-level
instruction and the generated instruction can be understood by Query Evaluation Engine.

Q #14) What is DDL interpreter?

Answer: DDL Interpreter interprets the DDL statements and records the generated statements in
the table containing metadata.

Q #15) Enlist the advantages of SQL.

Answer: Advantages of SQL are:
● Simple SQL queries can be used to retrieve a large amount of data from the database very
quickly and efficiently.
● SQL is easy to learn and almost every DBMS supports SQL.
● It is easier to manage the database using SQL as no large amount of coding is required.

Q #16) Explain the terms ‘Record’, ‘Field’ and ‘Table’ in terms of database.
Answer:
Record: Record is a collection of values or fields of a specific entity. For Example, An employee,
Salary account, etc.
Field: A field refers to an area within a record that is reserved for specific data. For Example,
Employee ID.
Table: Table is the collection of records of specific types. For Example, the Employee table is a
collection of records related to all the employees.

24
Q #17) What do you understand by Data Independence? What are its two types?
Answer: Data Independence refers to the ability to modify the schema definition in one level in
such a way that it does not affect the schema definition in the next higher level.
The 2 types of Data Independence are:
● Physical Data Independence: It modifies the schema at the physical level without
affecting the schema at the conceptual level.
● Logical Data Independence: It modifies the schema at the conceptual level without
affecting or causing changes in the schema at the view level.

Q #18) Define the relationship between ‘View’ and ‘Data Independence’.

Answer: View is a virtual table that does not have its data on its own rather the data is defined
from one or more underlying base tables.
Views account for logical data independence as the growth and restructuring of base tables are
not reflected in views.

Q #19) What are the advantages and disadvantages of views in the database?
Answer: Advantages of Views:
● As there is no physical location where the data in the view is stored, it generates output
without wasting resources.
● Data access is restricted as it does not allow commands like insertion, updation, and
deletion.
Disadvantages of Views:
● The view becomes irrelevant if we drop a table related to that view.
● Much memory space is occupied when the view is created for large tables.

Q #20) What do you understand by Functional dependency?

Answer: A relation is said to be in functional dependency when one attribute uniquely defines
another attribute.
For Example, R is a Relation, X and Y are two attributes. T1 and T2 are two tuples. Then,
T1[X]=T2[X] and T1[Y]=T2[Y]

25
Means, the value of component X uniquely define the value of component Y.
Also, X->Y means Y is functionally dependent on X.

Q #21) When is functional dependency said to be the fully functional dependent?

Answer: To fulfill the criteria of fully functional dependency, the relation must meet the
requirement of functional dependency.
A functional dependency ‘A’ and ‘B’ are said to be fully functional dependent when removal of
any attribute say ‘X’ from ‘A’ means the dependency does not hold anymore.

Q #22) What do you understand by the E-R model?

Answer: E-R model is an Entity-Relationship model which defines the conceptual view of the
database.
The E-R model basically shows the real-world entities and their association/relations. Entities
here represent the set of attributes in the database.

Q #23) Define Entity, Entity type, and Entity set.

Answer: Entity can be anything, be it a place, class or object which has an independent existence
in the real world.
Entity Type represents a set of entities that have similar attributes.
Entity Set in the database represents a collection of entities having a particular entity type.

Q #24) Define a Weak Entity set.

Answer: Weak Entity set is the one whose primary key comprises its partial key as well as the
primary key of its parent entity. This is the case because the entity set may not have sufficient
attributes to form a primary key.

Q #25) Explain the terms ‘Attribute’ and ‘Relations’

Answer:
Attribute is described as the properties or characteristics of an entity. For Example, Employee
ID, Employee Name, Age, etc., can be attributes of the entity Employee.

26
Relation is a two-dimensional table containing a number of rows and columns where every row
represents a record of the relation. Here, rows are also known as ‘Tuples’ and columns are
known as ‘Attributes’.

Q #26) What are VDL and SDL?

Answer: VDL is View Definition Language which represents user views and their mapping to
the conceptual schema.
SDL is Storage Definition Language which specifies the mapping between two schemas.

Q #27) Define Cursor and its types.

Answer: Cursor is a temporary work area that stores the data, as well as the result set, occurred
after manipulation of data retrieved. A cursor can hold only one row at a time.
The 2 types of Cursor are:
● Implicit cursors are declared automatically when DML statements like INSERT,
UPDATE, DELETE is executed.
● Explicit cursors have to be declared when SELECT statements that are returning more
than one row are executed.

Q #28) What is the Database transaction?

Answer: Sequence of operation performed which changes the consistent state of the database to
another is known as the database transaction. After the completion of the transaction, either the
successful completion is reflected in the system or the transaction fails and no change is
reflected.

Q #29) Define Database Lock and its types.

Answer: Database lock basically signifies the transaction about the current status of the data item
i.e. whether that data is being used by other transactions or not at the present point of time.
There are two types of Database lock: Shared Lock and Exclusive Lock.

Q #30) What is Data Warehousing?

27
Answer: The storage as well as access to data, that is being derived from the transactions and
other sources, from a central location in order to perform the analysis is called Data
Warehousing.

Q #31) What do you understand by Join?

Answer: Join is the process of deriving the relationship between different tables by combining
columns from one or more tables having common values in each. When a table joins with itself,
it is known as Self Join.

Q #32) What do you understand by Index hunting?

Answer: Index hunting is the process of boosting the collection of indexes which helps in
improving the query performance as well as the speed of the database.

Q #33) How to improve query performance using Index hunting?

Answer: Index hunting help in improving query performance by:
● Using a query optimizer to coordinate queries with the workload.
● Observing the performance and effect of index and query distribution.

Q #34) Differentiate between ‘Cluster’ and ‘Non-cluster’ index.

Answer: Clustered index alters the table and re-order the way in which the records are stored in
the table. Data retrieval is made faster by using the clustered index.
A Non-clustered index does alter the records that are stored in the table but creates a completely
different object within the table.

Q #35) What are the disadvantages of a Query?

Answer: Disadvantages of a Query are:
● Indexes are not present.
● Stored procedures are excessively compiled.
● Difficulty in interfacing.

28
 Good Practices
Some Python best practices are discussed below:

● Use descriptive variable names. Variables should be named in a way that makes it
clear what they represent. For example, a variable that stores the user's name should
be called username.
● Use consistent indentation. Indentation is used to indicate the structure of your code.
Make sure to use consistent indentation throughout your code, so that it is easy to
read and understand.
● Use comments to explain your code. Comments are used to explain what your code
does. They can be helpful for yourself and for other developers who may need to read
your code in the future.
● Use functions to break down your code into smaller, more manageable pieces.
Functions make your code more readable and reusable.
● Test your code. It is important to test your code to make sure that it works as
expected. There are many different ways to test your code. You can use unit tests,
integration tests, and system tests.
● Use a linter to check your code for errors. A linter is a tool that checks your code for
errors. It can help you to find potential problems in your code before you run it.
● Use an autoformatter to format your code. An autoformatter is a tool that
automatically formats your code according to a set of rules. This can help you to
make your code more consistent and readable.

Here are some additional tips for improving your Python skills:

● Read the Python documentation. The Python documentation is a great resource for
learning about Python syntax, functions, and modules.
● Take online courses or tutorials. There are many online courses and tutorials available
that can teach you Python coding.
● Contribute to open source projects. Contributing to open source projects is a great
way to learn Python and to get your code reviewed by other developers.

29
 ● Practice, practice, practice! The best way to improve your Python skills is to practice
writing Python code.

Frontend
HTML, CSS, Bootstrap

HTML

1) What is HTML?

HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each
other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web p

30
2) What are Tags?

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are
unclosed tags.

HTML documents contain two things:

○ content, and

○ tags

When a web browser reads an HTML document, the browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

Syntax

1. <tag> content </tag>

Content is placed between tags to display data on the web page.

3) Do all HTML tags have an end tag?

No. There are some HTML tags that don't need a closing tag. For example: <image> tag, <br> tag.

4) What is formatting in HTML?

HTML formatting is a process of formatting the text for a better look and feel. It uses different
tags to make text bold, italicized, underlined.

31
5) How many types of heading does an HTML contain?

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each
type of heading tag displays a different text size from another. So, <h1> is the largest heading tag
and <h6> is the smallest one. For example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>

6) How to create a hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These
tags can appear in any of the following ways:

○ Unvisited link - It is displayed, underlined and blue.

○ Visited link - It is displayed, underlined and purple.

○ Active link - It is displayed, underlined and red.

7) Which HTML tag is used to display the data in the tabular form?

The HTML table tag is used to display data in tabular form (row * column). It also manages the
layout of the page, e.g., header section, navigation bar, body content, footer section. Here is the list
of tags used while displaying the data in the tabular form:

32
 Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column

properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

8) What are some common lists that are used when designing a page?

There are many common lists which are used to design a page. You can choose any or a
combination of the following list types:

○ Ordered list - The ordered list displays elements in numbered format. It is represented by
<ol> tag.

33
 ○ Unordered list - The unordered list displays elements in bulleted format. It is represented
by <ul> tag.

○ Definition list - The definition list displays elements in definition form like in a dictionary.
The <dl>, <dt> and <dd> tags are used to define the description list.

9) What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are enclosed by
brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround content.

10) What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or
meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold
statements as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and
<em></em> tags.

11) What is an image map?

Image map facilitates you to link many different web pages using a single image. It is represented
by <map> tag. You can define shapes in images that you want to make part of an image mapping.

12) How to insert a copyright symbol on a browser page?

You can insert a copyright symbol by using &copy; or &#169; in an HTML file.

13) How to create a nested webpage in HTML?

The HTML iframe tag is used to display a nested webpage. In other words, it represents a
webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:

1. <!DOCTYPE html>
2. <html>

34
 3. <body>
4. <h2>HTML Iframes example</h2>
5. <p>Use the height and width attributes to specify the size of the iframe:</p>
6. <iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
7. </body>
8. </html>

14) How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

15) Does a hyperlink only apply to text?

No, you can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink
that links one page to another page. The "href" attribute is the most important attribute of the
HTML anchor tag.

Syntax

1. <a href = "..........."> Link Text </a>

16) What is a style sheet?

A style sheet is used to build a consistent, transportable, and well-designed style template. You can
add these templates on several different web pages. It describes the look and formatting of a
document written in markup language.

17) Can you create a multi-colored text on a web page?

Yes. To create a multicolor text on a web page you can use <font color ="color"> </font> for the
specific texts you want to color.

35
18) Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want to change the
color of the bullet, you must change the color of the text.

19) Explain the layout of HTML?

HTML layout specifies a way in which the web page is arranged.

36
Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a
webpage.

○ <header>: It is used to define a header for a document or a section.

○ <nav>: It is used to define a container for navigation links

○ <section>: It is used to define a section in a document

○ <article>: It is used to define an independent, self-contained article

○ <aside>: It is used to define content aside from the content (like a sidebar)

○ <footer>: It is used to define a footer for a document or a section

20) What is a marquee?

Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left
or right automatically. You should put the text which you want to scroll within the
<marquee>......</marquee> tag.

21) How many tags can be used to separate a section of texts?

Three tags are used to separate the texts.

○ <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

○ <p> tag - The <p> tag contains the text in the form of a new paragraph.

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

37
22) How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after
the </head> tag.

1. <body background = "image.gif">

Here, replace the "image.gif" with the name of your image file which you want to display on your
web page.

23) What are empty elements?

HTML elements with no content are called empty elements. For example: <br>, <hr> etc.

24) What is the use of a span tag? Give one example.

The span tag is used for following things:

○ For adding color on text

○ For adding background on text

○ Highlight any color text

Example:

1. <p>
2. <span style="color:#ffffff;">
3. In this page we use span.
4. </span>
5. </p>

38
25) What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Syntax:

1. <iframe src="URL"></iframe>

Example:

1. <iframe src="demo_iframe.html" width="200px" height="200px"></iframe>

Target to a link:

1. <iframe src="http://www.javatpoint.com" name="iframe_a"></iframe>

26) What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can
also replace characters that are not present on your keyboard by entities. These characters are
replaced because some characters are reserved in HTML.

27) Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the
Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL
contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters
are replaced with a "%" followed by hexadecimal digits.

39
28) Does a <!DOCTYPE html> tag is a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g.
HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML
1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to
instruct the web browser about the HTML page.

29) What is the canvas element in HTML5?

The <canvas> element is a container that is used to draw graphics on the web page using scripting
language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap
images. There are several methods in canvas to draw paths, boxes, circles, text and add images.
For Example:

1. <canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">

2. Your browser does not support the HTML5 canvas tag.
3. </canvas>

30) What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector/raster graphics. SVG
images and their behaviors are defined in XML text files. So as XML files, you can create and edit
an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts,
2-Dimensional graphs in an X, Y coordinate system.

1. <svg width="100" height="100">

2. <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
3. </svg>

40
31) What are the different new form element types in HTML 5?

Following is a list of 10 frequently used new elements in HTML 5:

○ Color

○ Date

○ Datetime-local

○ Email

○ Time

○ Url

○ Range

○ Telephone

○ Number

○ Search

32) Is there any need to change the web browsers to support HTML5?

No. Almost all browsers (updated versions) support HTML 5. For example Chrome, Firefox,
Opera, Safari, IE.

33) Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

○ mp4

○ WebM

○ Ogg

41
34) Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. There are three supported file formats
for HTML 5 audio tag.

1. mp3

2. WAV

3. Ogg

Let's see the code to play mp3 file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.mp3" type="audio/mpeg">
3. Your browser does not support the html audio tag.
4. </audio>

Instead of koyal.mp3, you can pass any mp3 file name.

35) What is the difference between progress and meter tag?

The progress tag is used to represent the progress of the task only while the meter tag is used to
measure data within a given range.

36) What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. It is used to handle the
group of diagrams, photos, code listing with some embedded content.

1. <p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of the
universally admired masterpieces of the world's heritage."</p>
2. <figure>

42
 <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>

</figure>

37) What is the use of figcaption tag in HTML 5?

The <figcaption> element is used to provide a caption to an image. It is an optional tag and can
appear before or after the content within the <figure> tag. The <figcaption> element is used with
<figure> element and it can be placed as the first or last child of the <figure> element.

1. <figure>
2. <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
3. <figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>
4. </figure>

38) What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form
on the web page. It is generally used to create a "submit" or "reset" button. Let's see the code to
display the button.

1. <button name="button" type="button">Click Here</button>

39) What is the use of details and summary tag?

The details tag is used to specify some additional details on the web page. It can be viewed or
hidden on demand. The summary tag is used with details tag. More details.

40) What is datalist tag?

The HTML 5 datalist tag provides an autocomplete feature on the form element. It facilitates users
to choose the predefined options to the users to select data.

1. <label>

43
 2. Enter your favorite cricket player: Press any character<br />
3. <input type="text" id="favCktPlayer" list="CktPlayers">
4. <datalist id="CktPlayers">
5. <option value="Sachin Tendulkar">
6. <option value="Brian Lara">
7. <option value="Jacques Kallis">
8. <option value="Ricky Ponting">
9. <option value="Rahul Dravid">
10. <option value="Shane Warne">
11. <option value="Rohit Sharma">
12. <option value="Donald Bradman">
13. <option value="Saurav Ganguly ">
14. <option value="AB diVilliers">
15. <option value="Mahendra Singh Dhoni">
16. <option value="Adam Gilchrist">
17. </datalist>
18. </label>

41) How are tags migrated from HTML4 to HTML5?

No. Typical HTML4 Typical HTML5

1) <div id="header"> <header>

2) <div id="menu"> <nav>

3) <div id="content"> <section>

4) <div id="post"> <article>

5) <div id="footer"> <footer>

44
Header and Footer Example

HTML 4 Header and Footer:

1. <div id="header">
2. <h1>Monday Times</h1>
3. </div>
4. .
5. .
6. .
7. <div id="footer">
8. <p>&copy; JavaTpoint. All rights reserved.</p>
9. </div>

HTML 5 Header and Footer:

1. <header>
2. <h1>Monday Times</h1>
3. </header>
4. .
5. .
6. .
7. <footer>
8. <p>© JavaTpoint. All rights reserved.</p>
9. </footer>

Menu Example

HTML 4 Menu:

1. <div id="menu">

45
 2. <ul>
3. <li>News</li>
4. <li>Sports</li>
5. <li>Weather</li>
6. </ul>
7. </div>

HTML 5 Menu:

1. <nav>
2. <ul>
3. <li>News</li>
4. <li>Sports</li>
5. <li>Weather</li>
6. </ul>
7. </nav>

42) If I do not put <!DOCTYPE html> will HTML 5 work?

No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not
function properly..

43) What is the use of the required attribute in HTML5?

It forces a user to fill text on the text field or text area before submitting the form. It is used for
form validation.

Example:

1. Name: <input type="text" name="name" required>

46
44) What are the new <input> types for form validation in HTML5?

The new input types for form validation are email, URL, number, tel, and date.

Example:

1. <input type="email">

47
 CSS

1) What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with
HTML to design websites. It can also be used with any XML documents including plain XML,
SVG, and XU

2) What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that
defines markup languages.

3) What are the different variations of CSS?

Following are the different variations of CSS:

○ CSS1

○ CSS2

○ CSS2.1

○ CSS3

○ CSS4

4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

1. Inline method - It is used to insert style sheets in HTML document

2. Embedded/Internal method - It is used to add a unique style to a single document

3. Linked/Imported/External method - It is used when you want to make changes on

multiple pages.

5) What are the advantages of CSS?

48
 ○ Bandwidth

○ Site-wide consistency

○ Page reformatting

○ Accessibility

○ Content separated from presentation

6) What are the limitations of CSS?

○ Ascending by selectors is not possible

○ Limitations of vertical control

○ No expressions

○ No column declaration

○ Pseudo-class not controlled by dynamic behavior

○ Rules, styles, targeting specific text not possible

7) What are the CSS frameworks?

CSS frameworks are the preplanned libraries which make easy and more standard compliant
web page styling. The frequently used CSS frameworks are: -

○ Bootstrap

○ Foundation

○ Semantic UI

○ Gumby

○ Ulkit

8) Why are background and color separate properties if they should always be set together?

49
There are two reasons behind this:

○ It enhances the legibility of style sheets. The background property is a complex

property in CSS, and if it is combined with color, the complexity will further increase.

○ Color is an inherited property while the background is not. So this can make confusion
further.

9) What is an Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can
embed the entire stylesheet in an HTML document by using the STYLE element.

1. <style>
2. body {
3. background-color: linen;
4. }
5. h1 {
6. color: red;
7. margin-left: 80px;
8. }
9. </style>

10) What are the advantages of Embedded Style Sheets?

○ You can create classes for use on multiple tag types in the document.

○ You can use selector and grouping methods to apply styles in complex situations.

○ No extra download is required to import the information.

50
11) What is a CSS selector?

It is a string that identifies the elements to which a particular declaration applies. It is also
referred to as a link between the HTML document and the style sheet. It is equivalent to
HTML elements. There are several different types of selectors in CSS: -

○ CSS Element Selector

○ CSS Id Selector

○ CSS Class Selector

○ CSS Universal Selector

○ CSS Group Selector

12) Name some CSS style components.

Some CSS Style components are:

○ Selector

○ Property

○ Value

13) What is the use of CSS Opacity?

The CSS opacity property is used to specify the transparency of an element. In simple word,
you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as
the degree to which light is allowed to travel through an object. For example:

1. <style>
2. img.trans {
3. opacity: 0.4;
4. filter: alpha(opacity=40); /* For IE8 and earlier */
5. }
6. </style>

14) Explain universal selector.

51
The universal selector matches the name of any of the element type instead of selecting
elements of a specific type.

1. <style>
2. * {
3. color: green;
4. font-size: 20px;
5. }
6. </style>

15) Which command is used for the selection of all the elements of a paragraph?

The p[lang] command is used for selecting all the elements of a paragraph.

16) What is the use of % unit?

It is used for defining percentage values.

17) Name the property used to specify the background color of an element.

The background-color property is used to specify the background color of the element. For
example:

1. <style>
2. h2,p{
3. background-color: #b0d4de;
4. }
5. </style>

18) Name the property for controlling the image repetition of the background.

The background-repeat property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.

1. <style>

52
 2. body {
3. background-image: url("paper1.gif");
4. margin-left:100px;
5. }
6. </style>

19) Name the property for controlling the image position in the background.

The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center

2. top

3. bottom

4. left

5. right
1. background: white url('good-morning.jpg');
2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

20) Name the property for controlling the image scroll in the background.

The background-attachment property is used to specify if the background image is fixed or

scroll with the rest of the page in the browser window. If you set fixed the background image,
then the image not move during scrolling in the browser. Let's take an example with the fixed
background image.

1. background: white url('bbb.gif');

2. background-repeat: no-repeat;
3. background-attachment: fixed;

53
21) What is the use of ruleset?

The ruleset is used to identify that selectors can be attached with other selectors. It has two
parts:

○ Selector - Selector indicates the HTML element you want to style.

○ Declaration Block - The declaration block can contain one or more declarations
separated by a semicolon.

22) What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only a single element
differing from other elements.

CSS Class Selector

1. <style>
2. .center {
3. text-align: center;
4. color: blue;
5. }
6. </style>

CSS Id Selector
1. <style>
2. #para1 {

54
 3. text-align: center;
4. color: blue;
5. }
6. </style>

23) What are the advantages of External Style Sheets?

○ You can create classes for reusing it in many documents.

○ By using it, you can control the styles of multiple documents from one file.

○ In complex situations, you can use selectors and grouping methods to apply styles.

24) What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of code.

Syntax
1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
2.

Embedded: Embedded style sheets are put between the <head>...</head> tags.

Syntax
1. <style>
2. body {
3. background-color: linen;
4. }
5. h1 {
6. color: red;
7. margin-left: 80px;
8. }
9. </style>

55
External: This is used to apply the style to all the pages within your website by changing just
one style sheet.

Syntax
1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>

25) What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page
perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You
don't need to create a different page for each device.

26) What are the benefits of CSS sprites?

If a web page has a large number of images that take a longer time to load because each image
separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading
time for a web page because it combines the various small images into one image. It reduces
the number of HTTP requests and hence the loading time.

27) What is the difference between logical tags and physical tags?

○ Physical tags are referred to as presentational markup while logical tags are useless for
appearances.

○ Physical tags are newer versions, on the other hand, logical tags are old and concentrate
on content.

28) What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

○ Margin - It removes the area around the border. It is transparent.

○ Border - It represents the area around the padding

○ Padding - It removes the area around the content. It is transparent.

56
 ○ Content - It represents the content like text, images, etc.

29) What is the float property of CSS?

The CSS float property is used to move the image to the right or left along with the texts to be
wrapped around it. It doesn't change the property of the elements used before it.

To understand its purpose and origin, let's take a look at its print display. In the print display, an
image is set into the page such that text wraps around it as needed.

Its web layout is also just similar to print layout.

57
30) How to restore the default property value using CSS?

In short, there is no easy way to restore to default values to whatever a browser uses.

The closest option is to use the 'initial' property value, which restores the default CSS values,
rather than the browser's default styles.

31) What is the purpose of the z-index and how is it used?

The z-index helps to specify the stack order of positioned elements that may overlap one
another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

○ Auto: Sets the stack order equal to its parents.

○ Number: Orders the stack order.

○ Initial: Sets this property to its default value (0).

58
 ○ Inherit: Inherits this property from its parent element.

32) Explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the
document.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.vis {
6. visibility: visible;
7. }
8.
9. h1.hid {
10. visibility: hidden;
11. }
12. </style>
13. </head>
14. <body>
15. <h1 class="vis">It is visible</h1>
16. <h1 class="hid">It is hidden</h1>
17.
18. <p>Note - Second heading is hidden, but it still occupy space.</p>
19. </body>
20. </html>
21.

display: none also hides the element but not occupy space. It will not affect the layout of the
document.

59
 1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.vis {
6. display: block;
7. }
8.
9. h1.hid {
10. display: none;
11. }
12. </style>
13. </head>
14. <body>
15. <h1 class="vis">It is visible</h1>
16. <h1 class="hid">It is hidden</h1>
17.
18. <p>Note - Second heading is hidden and not occupy space.</p>
19. </body>
20. </html>
21.

33) What do you understand by W3C?

W3C stands for World Wide Web Consortium. Its purpose is to deliver the information of the
World Wide Web. It also develops rules and guidelines for the Web.

34) What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

60
It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.

35) What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections
which are also known as modules. Unlike CSS2, CSS3 modules are supported by many
browsers.

Apart from that, CSS3 contains new General Sibling Combinators which are responsible for
matching the sibling elements with the given elements.

Bootstrap

Q1. What is Bootstrap?

Bootstrap is a platform for web development based on a front-end framework. It is used to create
exceptional responsive designs using HTML, and CSS. These templates are used for forms,
tables, buttons, typography, models, tables, navigation, carousels and images. Bootstrap also has
Javascript plugins, which are optional. Bootstrap is mostly preferred for developing mobile web
applications.

Q2. Explain why Bootstrap is preferred for website development.

Bootstrap has better features as compared to other web development platforms. It provides
extensive browser support for almost every known browser such as Opera, Chrome, Firefox,
Safari, etc. If you are well-acquainted with CSS and HTML, web development becomes easy on
Bootstrap.

61
Also, it supports mobile applications with the help of responsive design and can adjust CSS as
per the device, screen size, etc. Instead of creating multiple files, it creates only a single file
reducing the work of a developer.

Q3. What are the key components of Bootstrap?

The key components of Bootstrap include:

● CSS: It consists of various CSS files

● Scaffolding: It provides a basic structure with the Grid system, link styles, and
background
● Layout Components: This gives the list of layout components
● JavaScript Plugins: It contains many jQuery and JavaScript plugins
● Customize: To get your own version of the framework, you can customize your
components

Q4. List some features of Bootstrap.

Some of the features of Bootstrap are:

● It provides an open-source for use

● Bootstrap has Compatibility with all browsers
● It has Responsive designs
● Easy to use and fast

Q5. What are Class loaders in Bootstrap?

A class loader is a part of JRE or Java Runtime Environment which loads Java classes into Java
virtual environment. Class loaders also perform the process of converting a named class into its
equivalent binary form.

Q6. What are Contextual classes of tables in Bootstrap?

Class Description

62
 .active Applies the hover color to a particular row or
cell

.success Indicates a successful or positive action

.warning Identifies a warning that might need attention

.danger Indicates a dangerous or potentially negative

action

Q7. How many types of layout are available in Bootstrap?

There are two major layouts for Bootstrap:

1. Fluid Layout- This layout is necessary for creating an app that is 100 % wider and covers
all the screen width.
2. Fixed Layout- It is used only for a standard screen (940px). Both layouts can be used for
creating a responsive design.

Q8. What is a Bootstrap Grid System?

Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12
columns as the device or viewport size increases. It includes predefined classes for easy layout
options, as well as powerful mixins for generating more semantic layouts.

Q9. Give an example of a basic grid structure in Bootstrap.

Example of a basic grid structure:

63
 1<div class = "container">

2<div class = "row">

3<div class = "col-*-*"></div>

4<div class = "col-*-*"></div>

5</div>

7<div class = "row">...</div>

8</div>

9<div class = "container">....

Q10. Why do we use Jumbotron in Bootstrap?

Jumbotron is used for highlighting content in bootstrap. It could either be a slogan or probably a
headline. It increases the heading size and gives a margin for the content of the landing page. To
implement Jumbotron in a Bootstrap, you have to use:

Create a container <div> with the class of .jumbotron

For example, use <div class=”container”> if you don’t want Jumbotron to reach the screen’s
edge.

Q11. What are the two codes used for code display in Bootstrap?
There are two simple ways to display code in Bootstrap:

● <code> tag: This tag is used to display an inline code.

● <pre> tag: If you have a code with several lines or even a block element, you can display
it using this.

Q12. Explain the typography and links in Bootstrap.

64
Bootstrap sets a basic global display (background), typography, and link styles.

● Basic Global display − It sets background-color: #fff; on the <body> element.

● Typography − This uses the @font-family-base, @font-size-base, and @line-height-base
attributes as the typographic base
● Link styles − It sets the global link color via attribute @link-color and applies link
underlines only on :hover.

Q13. What is a progress bar in bootstrap?

Progress bar is used with HTML tag style in HTML element using <progress> keyword. In
bootstrap we use html5 <progress> with CSS classes that have special features in bootstrap, that
are only made for the progress bar.

Q14. How do you make images responsive?

Bootstrap allows you to make the images responsive by adding a class .img-responsive to the
<img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales
nicely to the parent element.

Q15. What is the difference between Bootstrap and Foundation?

Bootstrap Foundation

65
 ● Bootstrap offers an unlimited number ● In Foundation UI element options are
of UI elements very limited in numbers
● Bootstraps uses pixels ● Foundation use REMs
● It encourages to design for both ● Foundation encourages to design
desktop and mobile mobile first
● Bootstrap support LESS as its ● It supports Sass and Compass as its
preprocessor preprocessor

Q16. What are the steps for creating basic or vertical forms?
The steps for creating basic or vertical forms include:

● Add a role form to the parent <form> element

● Wrap labels and controls in a <div> with class .form-group. This is required to achieve
optimum spacing
● Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements

Q17. What are Bootstrap collapsing elements?

Bootstrap collapsing elements enable you to collapse any particular element without writing any
JavaScript code or the accordion markup. To apply collapsing elements in bootstrap, you need to
add data-toggle= “collapse” to the controller element along with a data-target or href to
automatically assign control of a collapsible element. Also, you can use .collapse (options),
.collapse (‘show’) or .collapse (‘hide’) for the same.

Q18. Explain types of lists supported by Bootstrap.

Bootstrap supports three types of lists such as:

1. Ordered lists − An ordered list is a list that falls in some sort of sequential order and is
prefaced by numbers.
2. Unordered lists − An unordered list is a list that doesn’t have any particular order and is
traditionally styled with bullets. If you do not want the bullets to appear then you can
remove the styling by using the class .list-unstyled.

66
 3. Definition lists − In this type of list, each list item can consist of both the <dt> and the
<dd> elements. <dt> stands for definition term. Subsequently, the <dd> is the definition
of the <dt>.

Q19. What is the media object in Bootstrap and what are their types?
Media objects in Bootstrap help you to put media objects like image, video or audio to the left or
right of the content blocks. Media elements can be created using the class .media and the source
is specified in using the class .media-object. Media-objects are of two types.

The two types of media object are:

● .media
● .media-list

Q20. Explain the uses of the carousel plugin in Bootstrap.

Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are
several carousel plugins that are used in bootstrap to display large contents within a small space
by adding sliders.

Examples: .carousel(options), .carousel(‘pause’), .carousel('cycle’), .carousel(‘prev’),

.carousel(‘next’).

Q21. How can you create Nav elements in Bootstrap?

Bootstrap offers various options for styling navigation elements. All of these use the same
markup and base class .nav. You need to perform the following steps to create Tabular
Navigation or Tabs:

● Start with a basic unordered list with the base class of .nav
● Add class .nav-tabs

Q22. What are glyphicons? How to use them?

67
Glyphicons are icon fonts which can be used in your web projects. Glyphicons Halflings are not
free and require licensing. However, their creator has made them available for Bootstrap projects
without any cost.

To use the icons, you just have to use the following code just about anywhere in your code.
Leave a space between the icon and text for proper padding.

1<span class = "glyphicon glyphicon-search"></span>

Q23. What are the steps to create basic or vertical forms?

The steps involved in creating vertical or basic forms are:

● Firstly, a role form can be added to the parent <form> element.

● Next, you have to add appropriate spacing by wrapping labels and control in <div> and
using the function ‘class .form-group’.
● Finally, apply the function ‘class .form-control’ to different elements such as text url
<input> , <textarea> and <select>

Q24. What do you mean by Bootstrap well?

Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it
may also give an inset effect on the webpage. Thus, a developer can create a well and also wrap
the content in the well with the help of <div> and class .well. The content would appear as per
your wish.

Q25. What are the input groups in Bootstrap?

Input groups are extended Form Controls. You can easily prepend and append text or buttons to
the text-based inputs with the help of input groups. Also, you can add common elements to the
user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or
anything else that might be common for your application interface.

To prepend or append elements to a .form-control you need to do the following:

● Wrap it in a <div> with class .input-group

● In the next step, place your extra content inside a <span> with class .input-group-addon.

68
 ● Now place this <span> either before or after the <input> element.

Q26. What is Bootstrap breadcrumb?

Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs,
breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current
page’s location within a navigational hierarchy.

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. The

separator is automatically added by CSS.

Q27. How to create thumbnails using Bootstrap?

To create thumbnails using Bootstrap you need to do the following:

● Add an <a> tag with the class of .thumbnail around an image.

● It will add four pixels of padding and a gray border.
● Now, on hover, an animated glow will outline the image.

Q28. What is a Bootstrap Container?

A bootstrap container is a class which is useful and creates a central area within the page where
our site content can be put within. The advantage of the bootstrap .container is that it is
responsive and will place all our other HTML code.

Q29. What is pagination in bootstrap and how are they classified?

Pagination is the handling of an unordered list by bootstrap. If you want to handle pagination,
bootstrap provides the following classes:

● .pagination: To get pagination on your page you have to add this class
● .disabled, .active: Customize links by .disabled for unclickable links and .active to
indicate the current page
● .pagination-Ig, .pagination-sm: Use these classes to get different size item

Q30. What are bootstrap alerts and how will you create them?

69
Bootstrap Alerts provide a way to style messages to the user. They provide contextual feedback
messages for typical user actions. You can add an optional close icon to alert. Also, you can add
a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four
contextual classes.

Q31. How will you create a Bootstrap Dismissal Alert?

You need to follow a few steps to build a dismissal alert:

● First, you have to add a basic alert by creating a wrapper <div> and adding a class of
.alert and one of the four contextual classes.
● Also add optional .alert-dismissable to the above <div> class.
● Next, you have to add a close button.
● Finally, use the <button> element with the data-dismiss = “alert” data attribute.

Q32. What are the steps to create a progress bar using bootstrap?
To create a basic progress bar, you need to do the following:

● Add a <div> with a class of .progress.

● Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
● Add a style attribute with the width expressed as a percentage. For example, style =
“40%”; indicates that the progress bar was at 40%.

Q33. What are the bootstrap media objects?

The media objects are abstract object styles for building various types of components like blog
comments, Tweets, etc. It features a left-aligned or right-aligned image alongside the textual
content. The goal of the media object is to make the code for developing these blocks of
information drastically shorter. And, this goal is achieved by applying classes to some of the
simple markups.

Q34. What are the steps to create an animated progress bar using bootstrap?
The steps to create an animated progress bar are as follows:

● Add a <div> with a class of .progress and .progress-striped. Also add class .active to
.progress-striped.

70
 ● Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
● Add a style attribute with the width expressed as a percentage. For example, style =
“60%”; indicates that the progress bar was at 60%.

Q35. What do you mean by column ordering in Bootstrap?

Column ordering is one of the most interesting features found in bootstrap. By using appropriate
functions, the columns can be written easily and also in a defined order. You can also show them
in another column. In order to change or alter the order of the column easily, the functions
.col-md-push-* and .col-md-pull-* can be used.

Q36. What is the Bootstrap Grid System?

The Bootstrap Grid System is a responsive, mobile-first system that scales up to 12 columns as
per the increase in the device or viewport size. The system features predefined classes for easy
layout options and powerful mix-ins for generating effectively semantic layouts.

Q37. What Are Bootstrap Media Queries?

Media Queries in Bootstrap allow you to move, show and hide content based on viewport size.
Here is an example to show the basic structure of Bootstrap grid:

1<div class = "container">

2<div class = "row">

3<div class = "col-*-*"></div>

4<div class = "col-*-*"></div>

5</div>

7<div class = "row">...</div>

8</div>

71
 9<div class = "container">....

Q38. What is Normalize in Bootstrap?

Bootstrap uses Normalize to establish cross-browser consistency.

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that
provides better cross-browser consistency in the default styling of HTML elements.

Q39. What are Bootstrap panels? Explain how to create a Bootstrap panel with a heading.
Bootstrap panel components are used for putting your DOM component in a box. To get a basic
panel, simply add .panel and .panel-default classes to the <div> element. There are two ways of
adding panel heading to a Bootstrap panel:

● Use any of the <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags with a .panel-title class
● You can also use the .panel-heading class

Q40. What is the purpose of using the Scrollspy plugin?

The purpose of using the Scrollspy plugin in Bootstrap is that it allows you to target certain
sections of the page based on the scroll position. Thereafter, you can add .active classes, based
on the scroll position, to the Bootstrap navbar.

Q41. Why do we use the affix plugin in Bootstrap?

We use the affix plugin in Bootstrap for affixing a <div> to some certain location on a webpage.
The plugin also allows toggling pinning on and off for the affixed <div>. Social icons are the
most popular example of using the affix plugin in Bootstrap.

The affixed <div> starts from a particular location on the webpage and scrolls with it. However,
after a certain mark, it will be locked in place, thus stopping scrolling with the rest of the
webpage.

Q42. What is the Bootstrap Panel?

When there is a need for putting the contents in a bordered box with some padding around, the
panel components are used. They can be created with the .panel class and content inside the

72
panel consists of a .panel-body class. For creating a basic panel, you need to add class .panel to
the <div> element and add class .panel-default to this element.

Q43. What is Button group and which class is used for basic button group?
Button groups allow multiple buttons to be stacked together on a single line. You can use this
when you want to place items like alignment buttons together.

For basic button group, .btn-group class is used. Here, you can wrap a series of buttons with
class .btn in .btn-group.

Q44. What will be the default Bootstrap look of the alert created with this following code:

1<div class="alert" role="alert">Warning! I'm missing something.</div>

Alert messages are used to provide feedback message and they usually require the attention of
the user. Here it is important to note that Bootstrap Alerts don’t have default class. If a contextual
class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default
gray alert will be created.

Q45. Why do we need to use Bootstrap?

Bootstrap provides major benefits to a developer. Some of them include

● It is a free and open-source Web Designing Framework.

● Bootstrap has the support of all the web browsers like Internet Explorer, Google Chrome,
Firefox, Opera, Safari, etc.
● It is a very powerful mobile first front-end framework.
● Also, it is very easy to start as one needs to have an idea of HTML and CSS only to work
with it.
● We can design a responsive website through it which adjust to desktop, tablet, and
mobile.
● It comprises functional built-in components which are easy to customize

73
 Javascript
1) What is JavaScript?

JavaScript is a scripting language. It is different from the Java language. It is object-based,

lightweight, cross-platform translated language. It is widely used for client-side validation. The
JavaScript Translator (embedded in the browser) is responsible for translating the JavaScript
code for the web browser.

2) List some features of JavaScript.

Some of the features of JavaScript are:

○ Lightweight

○ Interpreted programming language

○ Good for the applications which are network-centric

○ Complementary to Java

○ Complementary to HTML

○ Open source

○ Cross-platform

3) Who developed JavaScript, and what was the first name of JavaScript?

JavaScript was developed by Brendan Eich, who was a Netscape programmer. Brendan Eich
developed this new scripting language in just ten days in September 1995. At the time of its
launch, JavaScript was initially called Mocha. After that, it was called Live Script and later
known as JavaScript.

4) List some of the advantages of JavaScript.

Some of the advantages of JavaScript are:

○ Server interaction is less

74
 ○ Feedback to the visitors is immediate

○ Interactivity is high

○ Interfaces are richer

5) List some of the disadvantages of JavaScript.

Some of the disadvantages of JavaScript are:

○ No support for multithreading

○ No support for multiprocessing

○ Reading and writing of files is not allowed

○ No support for networking applications.

6) Define a named function in JavaScript.

The function which is named at the time of definition is called a named function. For example

1. function msg()
2. {
3. document.writeln("Named Function");
4. }
5. msg();

7) Name the types of functions

The types of function are:

○ Named - These types of functions contain names at the time of definition. For Example:

75
 1. function display()

2. {

3. document.writeln("Named Function");

4. }

5. display();

○ Anonymous - These types of functions don't contain any name. They are declared
dynamically at runtime.

1. var display=function()

2. {

3. document.writeln("Anonymous Function");

4. }

5. display();

8) Define anonymous function

It is a function that has no name. These functions are declared dynamically at runtime using the
function operator instead of the function declaration. The function operator is more flexible than
a function declaration. It can be easily used in the place of an expression. For example:

1. var display=function()
2. {
3. alert("Anonymous Function is invoked");
4. }
5. display();

9) Can an anonymous function be assigned to a variable?

Yes, you can assign an anonymous function to a variable.

76
10) In JavaScript what is an argument object?

The variables of JavaScript represent the arguments that are passed to a function.

11) Define closure.

In JavaScript, we need closures when a variable which is defined outside the scope in reference
is accessed from some inner scope.

1. var num = 10;

2. function sum()
3. {
4. document.writeln(num+num);
5. }
6. sum();

12) If we want to return the character from a specific index, which method is used?

The JavaScript string charAt() method is used to find out a char value present at the specified
index. The index number starts from 0 and goes to n-1, where n is the length of the string. The
index value can't be a negative, greater than or equal to the length of the string. For example:

1. var str="Javatpoint";
2. document.writeln(str.charAt(4));

13) What is the difference between JavaScript and JScript?

Netscape provided the JavaScript language. Microsoft changed the name and called it JScript to
avoid the trademark issue. In other words, you can say JScript is the same as JavaScript, but
Microsoft provides it.

14) How to write a hello world example of JavaScript?

A simple example of JavaScript hello world is given below. You need to place it inside the body
tag of HTML.

77
 1. <script type="text/javascript">
2. document.write("JavaScript Hello World!");
3. </script>

15) What are the key differences between Java and JavaScript? / How is JavaScript different
from Java?

JavaScript is a lightweight programming language (most commonly known as scripting

language) developed by Netscape, Inc. It is used to make web pages interactive. It is not a part of
the Java platform. Following is a list of some key differences between Java and JavaScript

A list of key differences between Java and JavaScript

Java JavaScript

Java is a complete and strongly typed JavaScript is a weakly typed, lightweight

programming language used for backend programming language (most commonly
coding. In Java, variables must be declared known as scripting language) and has more
first to use in the program, and the type of a relaxed syntax and rules.
variable is checked at compile-time.

Java is an object-oriented programming JavaScript is a client-side scripting language,

(OOPS) language or structured programming and it doesn't fully support the OOPS concept.
languages such as C, C++, or .Net. It resides inside the HTML documents and is
used to make web pages interactive (not
achievable with simple HTML).

Java creates applications that can run in any JavaScript code can run only in the browser,
virtual machine (JVM) or browser. but it can now run on the server via Node.js.

The Java code needs to be compiled. The JavaScript code doesn't require it to be
compiled.

78
 Java Objects are class-based. You can't make JavaScript Objects are prototype-based.
any program in Java without creating a class.

Java is a Complete and Standalone language JavaScript is assigned within a web page and
that can be used in backend coding. integrates with its HTML content.

Java programs consume more memory. JavaScript code is used in HTML web pages
and requires less memory.

The file extension of the Java program is The JavaScript file extension is written as
written as ".Java" and it translates source ".js" and it is interpreted but not compiled.
code into bytecodes which are then executed Every browser has a JavaScript interpreter to
by JVM (Java Virtual Machine). execute the JS code.

Java supports multithreading. JavaScript doesn't support multithreading.

Java uses a thread-based approach to JavaScript uses an event-based approach to

concurrency. concurrency.

16) How to use an external JavaScript file?

I am assuming that the js file name is message.js, place the following script tag inside the head
tag.

1. <script type="text/javascript" src="message.js"></script>

17) Is JavaScript case sensitive language?

Yes, JavaScript is a case sensitive language. For example:

1. Var msg = "JavaScript is a case-sensitive language"; //Here, var should be used to declare
a variable
2. function display()
3. {

79
 4. document.writeln(msg); // It will not display the result.
5. }
6. display();

18) What is BOM?

BOM stands for Browser Object Model. It provides interaction with the browser. The default
object of a browser is a window. So, you can call all the functions of the window by specifying
the window or directly. The window object provides various properties like document, history,
screen, navigator, location, innerHeight, innerWidth,

19) What is DOM? What is the use of document object?

DOM stands for Document Object Model. A document object represents the HTML document. It
can be used to access and change the content of HTML.

20) What is the use of window object?

The window object is created automatically by the browser that represents a window of a
browser. It is not an object of JavaScript. It is a browser object.

The window object is used to display the popup dialog box. Let's see with description.

80
 Method Description

alert() displays the alert box containing the message with the ok button.

confirm() displays the confirm dialog box containing the message with ok and cancel
button.

prompt() displays a dialog box to get input from the user.

open() opens the new window.

close() closes the current window.

setTimeout performs the action after specified time like calling function, evaluating
() expressions.

21) What is the use of a history object?

The history object of a browser can be used to switch to history pages such as back and forward
from the current page or another page. There are three methods of history object.

1. history.back() - It loads the previous page.

2. history.forward() - It loads the next page.

3. history.go(number) - The number may be positive for forward, negative for backward. It
loads the given page number.

22) How to write a comment in JavaScript?

There are two types of comments in JavaScript.

1. Single Line Comment: It is represented by // (double forward slash)

81
 2. Multi-Line Comment: Slash represents it with asterisk symbol as /* write comment here
*/

23) How to create a function in JavaScript?

To create a function in JavaScript, follow the following syntax.

1. function function_name(){
2. //function body
3. }

24) What are the different data types present in JavaScript?

There are two types of data types in JavaScript:

○ Primitive data types

○ Non- Primitive data types

Primitive data types

The primitive data types are as follows:

String: The string data type represents a sequence of characters. It is written within quotes and
can be represented using a single or a double quote.

Example:

1. var str1 = "Hello JavaTpoint"; //using double quotes

2. var str2 = 'Hello Javatpoint'; //using single quotes

Number: The number data type is used to represent numeric values and can be written with or
without decimals.

Example:

1. var x = 5; //without decimal

82
 2. var y = 5.0; //with decimal

Boolean: The Boolean data type is used to represent a Boolean value, either false or true. This
data type is generally used for conditional testing.

Example:

1. var x = 5;
2. var y = 6;
3. var z = 5;
4. (x == y) // returns false
5. (x == z) //returns true

BigInt: The BigInt data type is used to store numbers beyond the Number data type limitation.
This data type can store large integers and is represented by adding "n" to an integer literal.

Example:

1. var bigInteger = 123456789012345678901234567890;

2. // This is an example of bigInteger.

Undefined: The Undefined data type is used when a variable is declared but not assigned. The
value of this data type is undefined, and its type is also undefined.

Example:

1. var x; // value of x is undefined

2. var y = undefined; // You can also set the value of a variable as undefined.

Null: The Null data type is used to represent a non-existent, null, or a invalid value i.e. no value
at all.

Example:

1. var x = null;

83
Symbol: Symbol is a new data type introduced in the ES6 version of JavaScript. It is used to
store an anonymous and unique value.

Example:

1. var symbol1 = Symbol('symbol');

typeof: The typeof operator is used to determine what type of data a variable or operand
contains. It can be used with or without parentheses (typeof(x) or typeof x). This is mainly used
in situations when you need to process the values of different types.

Example:

1. typeof 10; // Returns: "number"

2. typeof 10.0; // Returns: "number"
3. typeof 2.5e-4; // Returns: "number"
4. typeof Infinity; // Returns: "number"
5. typeof NaN; // Returns: "number". Despite being "Not-A-Number"
6. // Strings
7. typeof ''; // Returns: "string"
8. typeof 'Welcome to JavaTpoint'; // Returns: "string"
9. typeof '12'; // Returns: "string". Number within quotes is typeof string
10. // Booleans
11. typeof true; // Returns: "boolean"
12. typeof false; // Returns: "boolean"
13. // Undefined
14. typeof undefined; // Returns: "undefined"
15. typeof undeclaredVariable; // Returns: "undefined"
16. // Null
17. typeof Null; // Returns: "object"
18. // Objects
19. typeof {name: "John", age: 18}; // Returns: "object"
20. // Arrays

84
 21. typeof [1, 2, 3]; // Returns: "object"
22. // Functions
23. typeof function(){}; // Returns: "function"

Non-Primitive data types

In the above examples, we can see that the primitive data types can store only a single value. To
store multiple and complex values, we have to use non-primitive data types.

The non-primitive data types are as follows:

Object: The Object is a non-primitive data type. It is used to store collections of data. An object
contains properties, defined as a key-value pair. A property key (name) is always a string, but the
value can be any data type, such as strings, numbers, Booleans, or complex data types like
arrays, functions, and other objects.

Example:

1. // Collection of data in key-value pairs

2. var obj1 = {
3. x: 123,
4. y: "Welcome to JavaTpoint",
5. z: function(){
6. return this.x;
7. }
8. }

Array: The Array data type is used to represent a group of similar values. Every value in an
array has a numeric position, called its index, and it may contain data of any data type-numbers,
strings, Booleans, functions, objects, and even other arrays. The array index starts from 0 so that
the first array element is arr[0], not arr[1].

Example:

1. var colors = ["Red", "Yellow", "Green", "Orange"];

85
 2. var cities = ["Noida", "Delhi", "Ghaziabad"];
3. alert(colors[2]); // Output: Green
4. alert(cities[1]); // Output: Delhi

25) What is the difference between == and ===?

The == operator checks equality only whereas === checks equality, and data type, i.e., a value
must be of the same type.

26) How to write HTML code dynamically using JavaScript?

The innerHTML property is used to write the HTML code using JavaScript dynamically. Let's
see a simple example:

1. document.getElementById('mylocation').innerHTML="<h2>This is heading using

JavaScript</h2>";

27) How to write normal text code using JavaScript dynamically?

The innerText property is used to write the simple text using JavaScript dynamically. Let's see a
simple example:

1. document.getElementById('mylocation').innerText="This is text using JavaScript";

28) How to create objects in JavaScript?

There are 3 ways to create an object in JavaScript.

1. By object literal

2. By creating an instance of Object

3. By Object Constructor

Let's see a simple code to create an object using object literal.

86
 1. emp={id:102,name:"Rahul Kumar",salary:50000}

29) How to create an array in JavaScript?

There are 3 ways to create an array in JavaScript.

1. By array literal

2. By creating an instance of Array

3. By using an Array constructor

Let's see a simple code to create an array using object literal.

1. var emp=["Shyam","Vimal","Ratan"];

30) What does the isNaN() function?

The isNan() function returns true if the variable value is not a number. For example:

1. function number(num) {
2. if (isNaN(num)) {
3. return "Not a Number";
4. }
5. return "Number";
6. }
7. console.log(number('1000F'));
8. // expected output: "Not a Number"
9.
10. console.log(number('1000'));
11. // expected output: "Number"

31) What is the output of 10+20+"30" in JavaScript?

3030 because 10+20 will be 30. If there is a numeric value before and after +, it is treated as
binary + (arithmetic operator).

87
 1. function display()
2. {
3. document.writeln(10+20+"30");
4. }
5. display();

32) What is the output of "10"+20+30 in JavaScript?

102030 because after a string all the + will be treated as string concatenation operator (not binary
+).

1. function display()
2. {
3. document.writeln("10"+20+30);
4. }
5. display();

33) Difference between Client side JavaScript and Server side JavaScript?

Client-side JavaScript comprises the basic language and predefined objects which are relevant
to running JavaScript in a browser. The client-side JavaScript is embedded directly by in the
HTML pages. The browser interprets this script at runtime.

Server-side JavaScript also resembles client-side JavaScript. It has a relevant JavaScript which
is to run on a server. The server-side JavaScript is deployed only after compilation.

34) In which location cookies are stored on the hard disk?

The storage of cookies on the hard disk depends on the OS and the browser.

The Netscape Navigator on Windows uses a cookies.txt file that contains all the cookies. The
path is c:\Program Files\Netscape\Users\username\cookies.txt

The Internet Explorer stores the cookies on a file [email protected]. The path is:
c:\Windows\Cookies\[email protected].

88
35) What's the difference between event.preventDefault() and event.stopPropagation() methods
in JavaScript?

In JavaScript, the event.preventDefault() method is used to prevent the default behavior of an

element.

For example: If you use it in a form element, it prevents it from submitting. If used in an anchor
element, it prevents it from navigating. If used in a contextmenu, it prevents it from showing or
displaying.

On the other hand, the event.stopPropagation() method is used to stop the propagation of an
event or stop the event from occurring in the bubbling or capturing phase.

36) What is the real name of JavaScript?

The original name was Mocha, a name chosen by Marc Andreessen, founder of Netscape. In
September of 1995, the name was changed to LiveScript. In December 1995, after receiving a
trademark license from Sun, the name JavaScript was adopted.

37) How can you check if the event.preventDefault() method was used in an element?

When we use the event.defaultPrevent() method in the event object returns a Boolean indicating
that the event.preventDefault() was called in a particular element.

38) What is the difference between undefined value and null value?

Undefined value: A value that is not defined and has no keyword is known as undefined value.
For example:

1. int number;//Here, a number has an undefined value.

Null value: A value that is explicitly specified by the keyword "null" is known as a null value.
For example:

89
 1. String str=null;//Here, str has a null value.

39) How to set the cursor to wait in JavaScript?

The cursor can be set to wait in JavaScript by using the property "cursor". The following
example illustrates the usage:

1. <script>
2. window.document.body.style.cursor = "wait";
3. </script>

40) What is this [[[]]]?

This is a three-dimensional array.

1. var myArray = [[[]]];

41) Are Java and JavaScript the same?

No, Java and JavaScript are the two different languages. Java is a robust, secured and
object-oriented programming language whereas JavaScript is a client-side scripting language
with some limitations.

42) What is negative infinity?

Negative Infinity is a number in JavaScript which can be derived by dividing the negative
number by zero. For example:

1. var num=-5;
2. function display()
3. {
4. document.writeln(num/0);
5. }
6. display();
7. //expected output: -Infinity

90
43) What is the difference between View state and Session state?

"View state" is specific to a page in a session whereas "Session state" is specific to a user or
browser that can be accessed across all pages in the web application.

44) What are the pop-up boxes available in JavaScript?

○ Alert Box

○ Confirm Box

○ Prompt Box

Example of alert() in JavaScript

1. <script type="text/javascript">
2. function msg(){
3. alert("Hello Alert Box");
4. }
5. </script>
6. <input type="button" value="click" onclick="msg()"/>

Example of confirm() in JavaScript

1. <script type="text/javascript">
2. function msg(){
3. var v= confirm("Are u sure?");
4. if(v==true){
5. alert("ok");
6. }
7. else{
8. alert("cancel");
9. }
10.
11. }

91
 12. </script>
13.
14. <input type="button" value="delete record" onclick="msg()"/>

Example of prompt() in JavaScript

1. <script type="text/javascript">
2. function msg(){
3. var v= prompt("Who are you?");
4. alert("I am "+v);
5.
6. }
7. </script>
8.
9. <input type="button" value="click" onclick="msg()"/>

45) How can we detect OS of the client machine using JavaScript?

The navigator.appVersion string can be used to detect the operating system on the client
machine.

46) How to submit a form using JavaScript by clicking a link?

Let's see the JavaScript code to submit the form by clicking the link.

1. <form name="myform" action="index.php">

2. Search: <input type='text' name='query' />
3. <a href="javascript: submitform()">Search</a>
4. </form>
5. <script type="text/javascript">
6. function submitform()
7. {
8. document.myform.submit();
9. }

92
 10. </script>

47) Is JavaScript faster than ASP script?

Yes, because it doesn't require web server's support for execution.

48) How to change the background color of HTML document using JavaScript?

1. <script type="text/javascript">
2. document.body.bgColor="pink";
3. </script>

49) How to handle exceptions in JavaScript?

By the help of try/catch block, we can handle exceptions in JavaScript. JavaScript supports try,
catch, finally and throw keywords for exception handling.

50) How to validate a form in JavaScript?

1. <script>
2. function validateform(){
3. var name=document.myform.name.value;
4. var password=document.myform.password.value;
5.
6. if (name==null || name==""){
7. alert("Name can't be blank");
8. return false;
9. }else if(password.length<6){
10. alert("Password must be at least 6 characters long.");
11. return false;
12. }
13. }
14. </script>

93
 15. <body>
16. <form name="myform" method="post" action="abc.jsp" onsubmit="return
validateform()" >
17. Name: <input type="text" name="name"><br/>
18. Password: <input type="password" name="password"><br/>
19. <input type="submit" value="register">
20. </form>

ReactJS

1. What is the difference between Virtual DOM and Real DOM?

Virtual DOM Real DOM

Changes can be made easily Changes can be expensive

Minimal memory wastage High demand for memory and more wastage

JSX element is updated if the element exists Creates a new DOM every time an element
gets updated

Cannot update HTML directly Able to directly manipulate HTML

Faster updates Slow updates

94
2. What is React?

React is a widely used JavaScript library that was launched in 2011. It was created by developers at
Facebook, and it is primarily used for front-end development. React uses the component-based
approach, which ensures that you build components that possess high reusability.

React is well known for developing and designing complex mobile user interfaces and web
applications.

3. What is the meaning of Virtual DOM?

A virtual DOM is a simple JavaScript object that is the exact copy of the corresponding real DOM. It
can be considered a node tree that consists of elements, their attributes, and other properties. Using
the render() in React, it creates a node tree and updates it based on the changes that occur in the data
model. These changes are usually triggered by users or the actions caused by the system.

Next up among these React interview questions, you need to take a look at some of the important
features that it offers.

4. What are some of the important features of React?

React has multiple features that are used for unique purposes. The important ones are as mentioned
below:

● React makes use of a single-direction data flow model.

● It deals with complete server-side data processing and handling.
● React uses a Virtual DOM, which has many advantages of its own.

5. What is the meaning of JSX?

95
JSX is the abbreviation for JavaScript XML. It is a file that is used in React to bring out the essence
of JavaScript to React and use it for its advantages.

It even includes bringing out HTML and the easy syntax of JavaScript. This ensures that the resulting
HTML file will have high readability, thereby relatively increasing the performance of the
application.

Consider the following example of a JSX:

render(){
return(
<div>
<h1> Hello Intellipaat learners!</h1>
</div>
);

6. Can browsers read a JSX file?

No, browsers cannot read JSX files directly. It can only read the objects provided by JavaScript. Now,
to make a browser read a JSX file, it has to be transformed to a JavaScript object using JSX
transformers, and only then it can be fed into the browser for further use in the pipeline.

7. Why is React widely used today?

React provides users with an ample number of advantages when building an application. Some of
them are as follows:

● With React, UI testing becomes very easy.

● React can integrate with Angular and other frameworks easily.

96
 ● The high readability index ensures easy understanding.
● React can be used for both client-side and server-side requirements.
● It boosts application performance and overall efficiency.

8. Are there any disadvantages to using React?

There are some limitations when using React as mentioned below:

● Writing code is complicated as it uses JSX and inline template formatting.

● Beginners might find it tough to cope with its syntaxes and methods.
● The library contains a huge repository of information, which might be overwhelming.
● React is a simple library and not a complete framework hence calls for dependencies.

9. Differentiate between Angular and React.

The difference between Angular and React is as follows:

Comparison Factor Angular React

Created by Google Facebook

DOM Real DOM Virtual DOM

Render Support Client-side Server-side

Architecture Full MVC support Only the view aspect of MVC

97
 Data Binding Two-way binding Unidirectional binding

10. What is the meaning of the component-based architecture of React?

In React, components are foundations used to build user interfaces for applications. With the
component-based system in place, all of the individual entities become completely reusable and
independent of each other. This means that rendering the application is easy and not dependent on the
other components of the UI.

11. How does rendering work in React?

Rendering is an important aspect of React, as every single component must be rendered. This is done
using the render() function. Once the function is called, it returns an element that represents a DOM
component.

It is also possible to render more than one HTML element at a time by enclosing the HTML tags and
passing them through the render function.

12. What are states in React?

States form is one of the vital aspects of React. It is considered a source of data or objects that control
aspects such as component behavior and rendering. In React, states are used to easily create dynamic
and interactive components.

13. What are props in React?

Props are the shorthand name given to properties in React. Props are read-only components that are
immutable in nature. In an application, props follow a hierarchy that is passed down from parent to

98
child components. However, the reverse is not supported. This is done to ensure that there is only a
single directional flow of data at all times.

14. What is the use of an arrow function in React?

An arrow function is used to write an expression in React. It allows users to manually bind
components easily. The functionality of arrow functions can be very useful when you are working
with higher-order functions, in particular.

Consider the following example:

//The usual way

render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//Making use of the arrow function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}

15. What is a higher-order component in React?

Higher-order components (HOCs) are a widely used technique in React for applying concepts that
involve component reusability logic. They are not a React Native Firebase part of the React API and
allow users to easily reuse the code and bootstrap abstraction.

99
HOCs are also used to allow the simple sharing of behaviors across all of the components in React,
adding more efficiency and functionality to the application.

16. What is the meaning of create-react-app in React?

The create-react-app in React is a simple command-line interface (CLI) that is used in the creation of
React applications, which have no build configuration.

All tools are pre-configured when using the CLI, and this allows users to focus on the code more than
on dependencies to develop the application.

The following syntax is used to start a simple project in React:

Create-react-app my-app

17. What are some of the advantages of using create-react-app in React?

Making use of create-react-app is advantageous in the following way:

● Support for JSX, ES6, and flow statements

● Already built and ready auto-prefixed CSS
● Fast interactive testing components
● Live development servers that help in debugging
● Scripts to handle JSS, CSS, and other files

Next up on these React Redux interview questions, you need to understand the meaning of Redux.

18. What is the meaning of Redux?

100
Redux is used to store the state of the application in a single entity. This simple entity is usually a
JavaScript object. Changing states can be done by pushing out actions from the application and
writing corresponding objects for them that are used to modify the states.

For example:

{
first_name: ‘John’,
last_name : ‘Kelly’,
age: 25

All of the data is retained by Redux (also called a store).

19. What is the difference between Props and States?

Condition Props States

Changes in child components Yes No

Parent component changing values Yes No

Changes inside components No Yes

Next up on this top React interview questions blog with answers, take a look at the questions
categorized as intermediate!

101
Intermediate React Interview Questions

20. What are the three phases of a component life cycle in React?

The following are the three phases of a component’s life cycle:

● Initial rendering: This is the phase that involves the beginning of the journey of the
component to the DOM.
● Update: Here, the component can be updated and rendered again if required after it gets
added to the DOM.
● Unmounting: The final phase involves the destruction of the component and its eventual
removal from the DOM.

21. What are events in React?

Whenever there are actions performed in React, such as hovering the mouse or pressing a key on the
keyboard, these actions trigger events. Events then perform set activities as a response to these
triggers. Handling an event in React is very similar to that in the DOM architecture.

22. How are events created in React?

Events can be created very easily in React as shown here:

class Display extends React.Component({

show(evt) {

102
 // Code inside
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Here</div>
);
}
});

23. How is routing in React different from Conventional routing?

Differences between conventional routing and the routing in React can be shown using the following
aspects:

● Pages: Each view is considered as a new file in conventional routing while it is

considered as a single HTML entity in React.
● Navigation: In conventional routing, users have to move across web pages for viewing.
In React, the views are not refreshed as objects are re-issued to create new views.

24. Differentiate between Flux and Redux in React.

Comparison Factor Flux Redux

Components Components connected to Flux Container components directly

in React connect

Dispatcher Has a dispatcher No dispatcher

103
 Number of Stores Single store Multiple stores

State Mutable state Immutable state

Storage Contains state and logic State and logic are separate

25. Can AJAX be used with React?

Yes, any AJAX library, such as Axios and jQuery AJAX, can be used with React easily. One
important thing is to maintain the states of the components, and here too, the props are passed from
the parents to the child components.

Child components still cannot send back props to parents, and this factor greatly increases rendering
efficiency when dynamic data is considered.

26. What is the meaning of synthetic events in React?

Synthetic events in React are objects that act as cross-browser wrappers, allowing for the use of
native events. This is done to ensure that a variety of browsers can run the API and that the event
contains all properties.

27. What are stateful components in React?

Stateful components are entities that store the changes that happen and place them into the memory.
Here, the state can be changed, alongside storing information such as past, current, and future
changes.

28. What are refs in React?

104
‘Refs’ is short for references in React. Refs are used to store a reference to a single React element or
React component. This is later returned using the render function.

They are mainly used in the following scenarios:

● To initiate imperative animations

● To join third-party DOM libraries
● To manage focus and apply media playback

29. What are controlled components in React?

Controlled components in React refer to the components that have the ability to maintain their state.
The data is completely controlled by the parent component, and the current value is fetched by
making use of props. This is done to notify users of any changes that occur when using callbacks.

30. Why is a router required in React?

A router is very much necessary in React as it is used to manage multiple routes whenever a user
types in a URL. If the route is present in the router for that corresponding URL, then the user is taken
to the particular route.

To do this, the router library needs to be added in React. It can be done using the following syntax:

<switch>
<route exact path=’/’ component={Home}/>
<route path=’/posts/:id’ component={Newpost}/>
<route path=’/posts’ component={Post}/>
</switch>

31. What are the components of Redux in React?

105
Redux consists of four main components as shown below:

● Action: An object that describes the call

● Reducer: The state change storage unit
● Store: The state and object tree storage
● View: Displays data provided by the store

32. What are the advantages of using Redux?

There are many advantages of Redux, and some of them are as given below:

Organized Approach Redux requires code to be organized, thereby making it

consistent and easy to work with

Testing Ability Redux functions are small and isolated, making the code more
independent and testable

Tools Developers can track actions and all of the tools in React using
Redux easily

Community Redux has a larger community, helping users with efficient and
easy-to-use libraries

33. What are the disadvantages of using MVC in React?

106
Among a plethora of advantages of using MVC in React, there are minor problems as stated below:

● A lot of memory waste occurs

● DOM manipulation costs a lot.
● The application becomes slow.
● Lots of dependencies are created.
● The complexity of models increases.

Next up among these ReactJS interview questions is understanding pure components.

34. What are pure components in React?

Pure components are singular entities that are written in React. They are fast and simple to write and
have the ability to replace a component that has only the render() function. This is done to ensure that
the performance of the application is good and that the code is kept simple at the same time.

Next up on this top React interview questions blog, take a look at the questions categorized as
advanced!

35. What are higher-order components (HOCs) used for?

HOCs are used for a variety of tasks such as:

● Manipulation of props
● State manipulation and abstraction
● Render highjacking

107
 ● Code reusing
● Bootstrap abstraction

36. What are the keys in React?

Keys are used in React to check all items and to track changes actively. They are used to directly
check if an item has been added or removed from a list.

Consider the following syntax:

function List ({ todos }) {

return (
<ul>
{todos.map(({ task, id} ) => <li key={id}>{task}</li>}
</ul>
)}

37. Differentiate between a controlled component and an uncontrolled component in React.

A controlled component, as the name suggests, is a component over which React has complete
control. It is the singular point of data for the forms.

An uncontrolled component is one where the form data gets handled by DOM and not the React
component. This is usually done using refs in React.

38. How can you tell React to build in production mode?

React can be coded to directly build into production by setting the process.env.NODE_ENV variable
to production.

Note: When React is in production, warnings, and other development features are not shown.

108
39. What is the difference between cloneElement and createElement in React?

In React, cloneElement is primarily used to clone an element and pass it to new props directly.
Whereas, createElement is the entity that JSX gets compiled into. This is also used to create elements
in react

Next up on this top React interview questions and answers blog, take a look at the use of the second
argument.

40. What is the use of the second argument that is passed to setState? Is it optional?

When setState is finished, a callback function is invoked, and the components get re-rendered in
React.

Yes, the setState function in programming allows for an optional argument, typically a callback
function, since it operates asynchronously. However, it is generally considered best practice to utilize
alternative lifecycle methods instead of relying solely on this approach.

Next up on this top React interview questions and answers blog, you need to take a look at binding.

41. Is there a way to avoid the requirement of binding when using React?

Yes, there are two main ways you can use to avoid the need for binding. They are as follows:

● Defining the Event Handler as an Inline Arrow function:

109
 class SubmitButton extends React.Component {
constructor(props) {
super(props);
this.state = {
isFormSubmitted: false
};
}
render() {
return (
<button onClick={() => {
this.setState({ isFormSubmitted: true });
}}>Submit</button>
)
}
}

● Using a function component along with Hooks:

const SubmitButton = () => {

const [isFormSubmitted, setIsFormSubmitted] = useState(false);

return (

<button onClick={() => {

setIsFormSubmitted(true);

}}>Submit</button>

)
};

110
Also, the Event Handler can be defined as an Arrow function, which is eventually assigned to a Class
Field to obtain similar results.

42. What is the StrictMode component used in React?

The StrictMode component, when used, would benefit users immensely while creating new
codebases to understand the components being used.

However, it can fit well in debugging as well because it will help solve the problem faster when it is
wrapped with other components, which could be causing the problem.

Next up on these interview questions on React JS, you have to understand how to speed up rendering.

43. What would you do if your React application is rendering slowly?

The cause of slow rendering in React is mostly because of the number of re-render operations, which
are sometimes unnecessary. There are two main tools provided by it to help users here:

● memo(): This is used to prevent all of the unnecessary re-rendering carried out by the
function components.
● PureComponent: This is used to ensure that the unnecessary re-rendering of class
components is avoided.

44. Can you conditionally add attributes to components in React?

Yes, there is a way in which you can add attributes to a React component when certain conditions are
met.

React has the ability to omit an attribute if the value passed to it is not true.

111
Consider the following example:

var condition = true;

var component = (
<div
value="foo"
{ ...( condition && { disabled: true } ) } />

);

45. Why are props passed to the super() function in React?

Props gets passed onto the super() function if a user wishes to access this.props in the constructor.

Consider the following example:

class MyComponent extends React.Component {

constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home', … }
}

46. What is the difference between using getInitialState and constructors in React?

When using ES6, users must initialize the state in the constructor and the getInitialState method is
defined. This is done using React.createClass as shown in the below example:

class MyComponent extends React.Component {

112
 constructor(props) {
super(props);
this.state = { /* initial state */ };
}

This above piece of code is equivalent to the following:

var MyComponent = React.createClass({

getInitialState() {
return { /* initial state */ };
},
});

47. What are the predefined prop types present in React?

There are five main predefined prop types in React. They are as follows:

1. PropTypes.bool
2. PropTypes.func
3. PropTypes.node
4. PropTypes.number
5. PropTypes.string

The propTypes can be defined for the user component as shown below:

import PropTypes from 'prop-types';

class User extends React.Component {
render() {
return (

113
 <h1>Welcome, {this.props.name}</h1>
<h2>Age, {this.props.age}
);
}}
User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};

48. What is React Fiber?

React Fiber is a new engine in React. It is the core implementation core algorithm in React 16.

The main goal of React Fiber is to ensure that there are incremental rendering facilities for the virtual
DOM. This increases efficiency when rendering animations, gestures, etc., and also helps in assigning
priority to updates based on the requirement, thereby increasing overall efficiency.

49. What are Hooks in React?

Hooks are used to make use of the state and other features without having to explicitly write a class.
Hooks were added to the React version, v16.8. The stateful logic can be easily extracted from a
component, along with testing and reusing it. All of this is done without making any changes to the
component hierarchy.

50. Do you have any certifications to boost your candidacy for this React.js role?

With this question, the interviewer is trying to assess if you have any technical experience through
learning and implementation. It is always advantageous to have a certification in the technology that
you’re applying for.

114
This creates an impression that you have put your time and effort into learning and implementing the
technology. Alongside adding a lot of value to your resume and your knowledge on the topic, it can
be used to obtain a well-coveted job in the market!

Good Practices

HTML

Here are some HTML best practices:

● Use semantically appropriate elements. This means using the right HTML element for
the job. For example, use the <header> element for the header of your page, the
<footer> element for the footer, and the <main> element for the main content of your
page.
● Use meaningful names for your elements. The names of your elements should be
descriptive of their content. This will make your code more readable and easier to
maintain.
● Use the right attributes. Each HTML element has a set of attributes that can be used
to control its appearance and behavior. Only use the attributes that you need, and use
them correctly.
● Comment your code. Commenting your code will make it easier for you and others to
understand what your code is doing. Comments should be clear and concise, and they
should be placed near the code that they are commenting on.
● Use a consistent style. This means using the same indenting, spacing, and naming
conventions throughout your code. A consistent style will make your code easier to
read and maintain.

115
 ● Test your code. Once you have written your code, you should test it to make sure that
it works as expected. You can test your code by opening it in a web browser or by
using a testing tool.

Here are some additional tips for writing good HTML code:

● Use a simple text editor. A simple text editor, such as Notepad or TextEdit, is all you
need to write HTML code. Avoid using complex HTML editors, as they can make it
more difficult to learn the basics of HTML.
● Start with a basic template. Once you have learned the basics of HTML, you can start
using a basic template to create your web pages. A template will provide you with a
starting point, and it will help you to keep your code consistent.
● Use online resources. There are many online resources that can help you to learn
HTML. These resources include tutorials, articles, and code examples.
● Join a community. There are many online communities where you can ask questions
and get help with HTML. These communities can be a great way to learn from other
developers and to get feedback on your code.

CSS
Here are some CSS best practices:

● Keep it consistent. Use the same naming conventions, formatting, and methods for
describing colors throughout your CSS code. This will make it easier to read and
maintain your code.
● Use comments. Comments can help you and other developers understand your CSS
code. Add comments to explain what each section of code does, and why you made
the decisions you did.
● Use a reset stylesheet. A reset stylesheet will reset the default styles of HTML
elements, giving you a clean slate to work with. This can help to improve the
consistency of your website's design.

116
 ● Use selectors wisely. Be specific when choosing selectors. A selector that matches too
many elements can make it difficult to control the styling of your website.
● Use media queries. Media queries allow you to apply different styles to your website
depending on the screen size or device it is being viewed on. This can help to create a
more responsive and user-friendly experience.
● Use the right tools. There are a number of tools available to help you write and
manage CSS code. These tools can help you to improve the efficiency and quality of
your CSS code.

Here are some additional tips for writing better CSS code:

● Use a CSS framework. A CSS framework is a pre-built set of CSS styles that you can
use to quickly and easily style your website. This can save you time and effort, and
help to ensure that your website has a consistent look and feel.
● Use a linter. A linter is a tool that can help you to identify errors in your CSS code.
This can help you to catch errors early on, and prevent them from causing problems
with your website.
● Test your code. Always test your CSS code before deploying it to production. This
will help you to catch any errors that you may have missed, and ensure that your code
is working as expected.

Javascript

Some of JavaScript’s best practices are discussed below:

● Use descriptive variable and function names. Your code should be easy to understand,
so make sure your variable and function names accurately reflect what they do.

117
 ● Avoid global variables. Global variables can be accessed from anywhere in your
code, which can make it difficult to track down and debug errors. When possible, use
local variables instead.
● Stick to a strict coding style. A consistent coding style will make your code easier to
read and maintain. There are many different coding styles, so choose one that you and
your team are comfortable with.
● Comment your code. Comments can help you and other developers understand what
your code does. Comments should be clear, concise, and accurate.
● Use the right tools. There are many tools available to help you write better JavaScript
code. These tools can help you with linting, debugging, and testing your code.

Here are some additional best practices for writing cases and loops in JavaScript:

● Order cases alphabetically or numerically. This will make your code easier to read
and understand.
● Put the normal case first. This will make it easier to debug your code if something
goes wrong.
● Keep the actions of each case simple. Complex cases can be difficult to understand
and debug.
● Don't make up phony variables to be able to use the case statement. This can lead to
bugs and confusion.
● Use the default clause to detect errors. The default clause is executed if none of the
other cases match the value of the switch expression. This can be helpful for catching
errors that you may not have anticipated.

118