Web Application: Web application is a piece of software that can be accessed by the

browser. A Browser is an application that is used to browse the internet.

Web application needs authentication. The web application uses a combination of server-
side scripts and client-side scripts to present information. It requires a server to manage
requests from the users.
Example: Google Apps, Amazon, YouTube

Website: Website is a collection of related web pages that contains images, text, audio,
video, etc. It can be consist of one page, two pages, and n number of pages.
A website provides visual and text content that users can view and read.
To view a website requires a browser(Chrome, Firefox). There are many types of websites
like Archive website, Blog, Community website, etc.
Example: a restaurant’s web page where you can view the menu, hours of operation, etc. Or,
a forum or blog.

key aspects of what makes content or a website SEO friendly:

1. Relevant Keywords: Incorporating keywords that potential visitors are likely to search
for, ensuring they align with the content’s topic.

2. Quality Content: Providing valuable, informative, and engaging content that meets
the needs of users. High-quality content is more likely to be shared and linked to,
boosting its authority.

3. Optimized Metadata: Using appropriate title tags, meta descriptions, and header
tags that include relevant keywords and accurately describe the content.

4. Mobile Optimization: Ensuring the website is responsive and performs well on

mobile devices, as search engines prioritize mobile-friendly sites.

5. Fast Loading Speed: Optimizing website performance to load quickly, as slow-loading

pages can lead to higher bounce rates.

6. Clean URL Structure: Using clear and descriptive URLs that include keywords and are
easy for users and search engines to understand.

7. Internal and External Links: Incorporating links to other relevant pages within the
website (internal links) and reputable external sources (external links) to enhance
credibility and navigation.

8. User Experience (UX): Creating a user-friendly interface that is easy to navigate, with
a clear layout and minimal distractions.
 9. Image Optimization: Using alt tags for images and optimizing file sizes to improve
loading times and accessibility.

10. Regular Updates: Keeping content fresh and up-to-date to encourage return visits
and signal to search engines that the site is active.

Single Page Application

A Single Page Application (SPA) in React is a web application that loads a single HTML page
and dynamically updates its content using JavaScript, without requiring full page
reloads. React is commonly used to build SPAs due to its component-based architecture and
efficient updating of the DOM.

SPAs offer advantages such as faster load times, improved user experience, and reduced
server load. However, they can also present challenges related to SEO, initial load time, and
state management.

React.js Interview Questions and Answers (30)

1. What is React and why is it used? React is a JavaScript library developed by Facebook for
building user interfaces, especially for single-page applications. It allows developers to
create reusable UI components and manage the state efficiently.

2. What are components in React? Components are the building blocks of a React
application. They can be class-based or function-based. Components manage their own
state and props and are reusable across the application.

3. What is the difference between functional and class components?

 Functional components are simple JavaScript functions that return JSX. With React
Hooks, they can now manage state and lifecycle.

 Class components are ES6 classes that extend React.Component and use render()
method to return JSX. They manage state and lifecycle methods directly.

4. What are props in React? Props (short for properties) are read-only inputs passed from a
parent component to a child component. They help make components dynamic and
reusable.
5. What is state in React? State is a built-in object used to hold component data that can
change over time. Unlike props, state is managed within the component itself and updated
using setState() in class components or useState() in functional components.

6. What is JSX? JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to
HTML. JSX makes writing React components easier and more readable by allowing HTML-like
code in JavaScript.

7. What are hooks in React? Hooks are functions introduced in React 16.8 that let functional
components use state and lifecycle features. Common hooks include useState, useEffect,
useContext, useRef, useReducer.

8. What is useState hook? useState is a React hook that allows you to add state to a
functional component. Example:

const [count, setCount] = useState(0);

This creates a count variable with the initial value 0 and a function setCount to update it.

9. What is useEffect hook? useEffect is used to perform side effects in function components
such as data fetching, DOM manipulation, and timers. It runs after every render by default.
Example:

useEffect(() => {

console.log("Component mounted or updated");

}, []);

10. What is the virtual DOM in React? The virtual DOM is a lightweight copy of the real
DOM that React uses to optimize updates. React compares the virtual DOM with a previous
snapshot (diffing) and updates only the changed elements in the actual DOM
(reconciliation).

11. What is the difference between controlled and uncontrolled components?

 Controlled: Form data is handled by React through state.

 Uncontrolled: Form data is handled by the DOM directly using refs.

12. What is prop drilling and how to avoid it? Prop drilling is the process of passing data
from a parent to a deeply nested child through multiple intermediate components. It can be
avoided using Context API or state management libraries like Redux.

13. What is the Context API in React? The Context API allows global state management and
helps avoid prop drilling. It uses React.createContext() and Provider/Consumer patterns or
useContext hook.
14. What is a key prop and why is it important? key is a special prop used in lists to help
React identify which items have changed, added, or removed. It improves rendering
performance and avoids bugs.

15. What is the difference between React and ReactDOM?

 React: Core library for building components.

 ReactDOM: Responsible for rendering React components to the DOM.

16. What is lifting state up in React? Lifting state up is a pattern where state is moved to the
closest common ancestor of components that need to share the state.

17. What are fragments in React? Fragments let you return multiple elements without
adding extra nodes to the DOM:

<>

<div>Item 1</div>

<div>Item 2</div>

</>

18. What is reconciliation in React? Reconciliation is the process React uses to update the
DOM by comparing the virtual DOM with the previous one and applying only the changes.

19. How does React handle forms? React uses controlled components to handle form
inputs. Input values are stored in state and updated using onChange handlers.

20. What is memoization in React? Memoization is a performance optimization technique

that prevents unnecessary re-rendering. Tools include React.memo, useMemo, and
useCallback.

21. What is React.memo and how does it work? React.memo is a higher-order component
that memoizes a component to prevent re-rendering if its props haven't changed.

22. What is useMemo and how is it different from useCallback?

 useMemo: Memoizes the return value of a function

 useCallback: Memoizes the function itself Both improve performance by preventing

recalculations.

23. What is the difference between useEffect and componentDidMount?

 useEffect works in function components and runs after every render by default.

 componentDidMount is a lifecycle method in class components and runs only once

after the component is mounted.
24. What are portals in React? Portals allow rendering children into a DOM node outside
the parent component’s hierarchy. Useful for modals, tooltips, etc.

25. What is error boundary in React? Error boundaries are React components that catch
JavaScript errors in their child component tree, log those errors, and display a fallback UI.

26. What are Higher Order Components (HOC)? A Higher Order Component is a function
that takes a component and returns a new component with additional props or functionality.

27. What are render props in React? Render props is a technique for sharing code using a
prop whose value is a function.

28. How do you handle conditional rendering in React? Use JavaScript conditions inside JSX
with if, ternary (? :), logical &&, or separate functions.

29. How to fetch data in React? Data can be fetched using fetch() or libraries like Axios,
often inside useEffect() or lifecycle methods like componentDidMount().

30. How to optimize performance in React apps?

 Use memoization (React.memo, useMemo, useCallback)

 Lazy loading with React.lazy and Suspense

 Code splitting

 Avoid unnecessary re-renders

 Efficient state management

HTML Interview Questions and Answers (30)

1. What is HTML and why is it used? HTML (HyperText Markup Language) is the standard
language used to create web pages. It defines the structure of web documents using
elements like headings, paragraphs, links, images, and more. It is essential for presenting
and organizing content on the internet.

2. What are HTML tags and elements? Tags are used to define elements in HTML. An
element consists of a start tag, content, and an end tag. For example: <p>This is a
paragraph.</p>. Elements can also be self-closing like <img> or <br>.

3. What is the difference between block-level and inline elements? Block-level elements
occupy the full width available, starting on a new line (e.g., <div>, <p>). Inline elements only
take up as much width as necessary and do not start on a new line (e.g., <span>, <a>).
4. What are semantic elements in HTML? Semantic elements clearly describe their
meaning. Examples include <header>, <footer>, <article>, and <section>. They improve code
readability, accessibility, and SEO.

5. How do you create hyperlinks in HTML? Using the <a> tag. Example: <a
href="https://example.com">Visit Site</a>. The href attribute specifies the URL.

6. How are images embedded in HTML? Using the <img> tag. Example: <img
src="image.jpg" alt="Description">. The alt attribute is important for accessibility and SEO.

7. What is the difference between id and class? id is unique to one element, while class can
be applied to multiple elements. id is used for specific identification, and class is used for
grouping and styling.

8. What is the purpose of the alt attribute in images? It provides alternative text if the
image cannot be displayed and improves accessibility for screen readers.

9. What is the use of the title attribute? It gives additional information when the user
hovers over an element. For example: <a href="#" title="Go to home">Home</a>.

10. What is the <doctype> declaration? It defines the HTML version used in the document.
For HTML5, use <!DOCTYPE html>. It helps browsers render pages correctly.

11. What is the role of <head> and <body> tags? <head> contains metadata, links to
stylesheets, and scripts. <body> contains the visible content of the webpage.

12. What is the purpose of the <meta> tag? It provides metadata about the HTML
document like charset, author, and viewport settings for responsive design.

13. How do you create tables in HTML? Using <table>, <tr>, <th>, and <td> tags. Example:

<table>

<tr><th>Name</th><th>Age</th></tr>

<tr><td>John</td><td>30</td></tr>

</table>

14. How do you create forms in HTML? Using the <form> tag with input fields like <input>,
<textarea>, <button>, etc. Forms are used to collect user data.

15. What are input types in HTML5? HTML5 introduced types like email, url, tel, number,
range, date, color, etc. They improve validation and user experience.

16. What is the difference between <ul>, <ol>, and <dl>? <ul> is for unordered lists, <ol> is
for ordered lists, and <dl> is for definition lists.

17. What is the purpose of the <label> tag? It improves form accessibility by associating
labels with form controls. Clicking a label focuses the corresponding input.
18. What are self-closing tags? Tags that don’t have closing pairs, like <br>, <hr>, <img>,
<input>.

19. What is the difference between name and id in form inputs? id is used for identifying
elements with JavaScript and CSS. name is used to send form data to the server.

20. How do you group elements in a form? Use <fieldset> to group elements and <legend>
to provide a caption. It improves structure and accessibility.

21. What is the <iframe> tag? Used to embed another HTML document within the current
one. Example: <iframe src="page.html"></iframe>.

22. What is the difference between relative and absolute URLs? Relative URL refers to a
path within the current domain. Absolute URL includes the full address like
https://example.com/page.

23. How do you include a favicon in HTML? Using <link rel="icon" href="favicon.ico"> inside
the <head>.

24. What is accessibility in HTML? Designing web content that can be used by people with
disabilities. Using semantic tags, alt attributes, and ARIA roles improves accessibility.

25. What is the difference between HTML and XHTML? XHTML is stricter and follows XML
syntax rules. HTML is more forgiving and widely used.

26. What are data- attributes?* Custom attributes used to store extra information. Example:
<div data-user-id="123"></div>.

27. What is the use of <noscript> tag? It displays fallback content when JavaScript is
disabled in the browser.

28. How do you comment in HTML? Use <!-- comment here -->. Comments are not
displayed in the browser.

29. What is the difference between synchronous and asynchronous script loading? Scripts
with async load independently and execute as soon as they are ready. defer waits until HTML
parsing is done before executing.

30. How do you optimize HTML for performance?

 Minify HTML

 Use semantic tags

 Reduce DOM size

 Load scripts with defer

 Lazy load images

 CSS Interview Questions and Answers (30)
1. What is CSS and why is it used? CSS (Cascading Style Sheets) is used to style HTML
content. It controls layout, colors, fonts, spacing, and responsiveness. CSS allows the
separation of content and presentation, making web pages easier to maintain and more
visually appealing.

2. What are the different types of CSS?

 Inline CSS: Written directly in the HTML element.

 Internal CSS: Written inside a <style> tag in the <head> section.

 External CSS: Written in a separate .css file and linked via <link>.

3. What is the Box Model in CSS? The CSS Box Model describes the rectangular boxes
generated for elements. It includes:

 Content

 Padding

 Border

 Margin Understanding this helps with element sizing and spacing.

4. What is specificity in CSS? Specificity determines which rule is applied when multiple
rules target the same element. It is calculated based on inline styles, IDs, classes, and
element types.

5. What is the difference between **, **?

 px: Absolute unit (fixed size)

 em: Relative to the parent element’s font-size

 rem: Relative to the root element’s font-size

 %: Relative to the parent’s value Using relative units improves responsiveness.

6. What is the difference between **, **?

 relative: Positions relative to its normal position

 absolute: Positions relative to the nearest positioned ancestor

 fixed: Positions relative to the viewport

 sticky: Toggles between relative and fixed based on scroll

7. How does the `` property work? z-index controls the stacking order of overlapping
elements. Higher z-index values appear in front. It only works on positioned elements
(relative, absolute, fixed, sticky).

8. What is the difference between ``?

 visibility: hidden: Hides the element but space is reserved.

 display: none: Removes the element from the layout.

9. How do media queries work? Media queries apply styles based on device characteristics
like width. Example:

@media (max-width: 768px) {

body { font-size: 14px; }

Used for responsive design.

10. What is a pseudo-class in CSS? Pseudo-classes define a special state of an element.

Example: :hover, :focus, :nth-child(). They help style elements based on interaction or
position.

11. What is a pseudo-element in CSS? A pseudo-element lets you style specific parts of an
element. Common examples include ::before and ::after. They are often used to insert
decorative content without adding HTML.

12. What is the difference between `` positioning? relative positions the element relative to
its original place. absolute removes the element from normal flow and positions it relative to
the nearest ancestor with a positioning context.

13. How do you create a responsive layout in CSS? You can use:

 Fluid grids

 Media queries

 Flexbox or CSS Grid Responsive design ensures the layout adapts to different screen
sizes.

14. What is Flexbox in CSS? Flexbox is a layout model that arranges items in a single
dimension (row or column). It provides alignment, spacing, and order control using
properties like justify-content, align-items, and flex-direction.

15. What is the difference between ``, and ``?

 width: Fixed width

 min-width: Minimum limit of width

  max-width: Maximum limit of width Useful in responsive designs to prevent
elements from being too small or too wide.

16. What is the difference between ``, and `` in CSS?

 auto: Lets the browser calculate the value

 %: Relative to the parent element

 inherit: Inherits the value from its parent

17. What is the use of `` in CSS? The !important rule overrides all previous styling rules, even
inline ones. Use it sparingly to avoid conflicts and hard-to-maintain code.

18. What is the difference between ``, and ``?

 inline: Does not allow width/height

 block: Takes full width and allows width/height

 inline-block: Behaves like inline but supports width/height

19. What is the use of `` in CSS? calc() allows you to perform calculations directly in CSS.
Example: width: calc(100% - 50px); is useful for dynamic layouts.

20. What is the difference between ``?

 nth-child(n): Selects the nth child of the parent

 nth-of-type(n): Selects the nth element of that type

21. What is the default position of HTML elements in CSS? By default, HTML elements have
position: static, meaning they are placed according to the normal document flow.

22. How do you center a div horizontally and vertically? Using Flexbox:

display: flex;

justify-content: center;

align-items: center;

You can also use margin: auto for horizontal centering.

23. What are transitions in CSS? Transitions allow smooth changes from one style to
another. Example:

transition: background-color 0.3s ease;

They are useful for animations on hover or focus.

24. What are animations in CSS? Animations allow more control over the intermediate steps
in transitions. Defined using @keyframes and applied with animation properties.
25. What is the difference between ``, and ``?

 hidden: Hides overflow

 scroll: Always shows scrollbars

 auto: Shows scrollbars only when necessary

26. How can you make a website mobile-friendly using CSS?

 Use responsive units (%, em, rem)

 Apply media queries

 Avoid fixed-width layouts

 Use Flexbox/Grid for layout

27. What is the stacking context in CSS? It is the hierarchy that defines how elements are
stacked on top of each other. z-index, position, and opacity affect stacking contexts.

28. What are vendor prefixes in CSS? Vendor prefixes add experimental CSS features for
specific browsers:

 -webkit- (Chrome, Safari)

 -moz- (Firefox)

 -o- (Opera)

29. What is inheritance in CSS? Inheritance is the process by which some CSS properties are
passed from parent to child elements. Not all properties are inherited (e.g., font-related
properties are, margin is not).

30. How do you optimize CSS for performance?

 Minify CSS files

 Use shorthand properties

 Remove unused CSS

 Combine files

 Load CSS asynchronously when needed

 JavaScript Interview Questions and Answers (30)
1. What is JavaScript and where is it used? JavaScript is a high-level, interpreted
programming language used to make web pages interactive. It runs in the browser and is
used for tasks like validating forms, manipulating the DOM, creating animations, and making
asynchronous requests using AJAX or Fetch API.

2. What are the different data types present in JavaScript? JavaScript has the following data
types:

 Primitive: String, Number, Boolean, Null, Undefined, Symbol, BigInt

 Non-Primitive: Object, Array, Function Understanding these is crucial for type-

checking and managing memory.

3. What is the difference between ``, and ``?

 var: Function-scoped and can be redeclared or reassigned.

 let: Block-scoped and can be reassigned but not redeclared.

 const: Block-scoped and cannot be redeclared or reassigned. Used for constants.

4. What is hoisting in JavaScript? Hoisting is a behavior where variable and function

declarations are moved to the top of their scope before code execution. Only declarations
are hoisted, not initializations. var is hoisted as undefined, while let and const are hoisted
but remain in the temporal dead zone.

5. What is the difference between ``?

 ==: Compares values after type coercion

 ===: Compares both value and type (strict equality) Always use === for predictable
comparisons.

6. What are closures in JavaScript? A closure is a function that remembers its lexical scope
even when the function is executed outside that scope. It allows access to outer function
variables even after the outer function has executed. Example:

function outer() {

let count = 0;

return function inner() {

count++;

return count;

}
}

const counter = outer();

counter(); // 1

7. What is the DOM and how is it related to JavaScript? The DOM (Document Object
Model) is a tree structure representing HTML elements. JavaScript can access and
manipulate the DOM to change content, structure, and style dynamically using methods like
getElementById, querySelector, etc.

8. What are arrow functions and how are they different? Arrow functions are a shorter
syntax for writing functions introduced in ES6:

const add = (a, b) => a + b;

They do not have their own this, arguments, super, or new.target.

9. What is event delegation in JavaScript? Event delegation is a technique where a single

event handler is attached to a parent element to handle events for all its child elements. This
is useful for dynamic elements and improves performance.

10. What is the difference between synchronous and asynchronous JavaScript?

 Synchronous: Executes line by line, blocking code execution.

 Asynchronous: Executes non-blocking code using callbacks, promises, or async/await.

11. What are Promises in JavaScript? A Promise represents a value that may be available
now, later, or never. It has three states: pending, fulfilled, and rejected. Promises are used to
handle asynchronous operations more cleanly than callbacks.

12. What is async/await in JavaScript? async and await are syntax sugar over Promises. An
async function always returns a Promise. await pauses the execution until the Promise
resolves or rejects.

13. What is a callback function? A callback is a function passed as an argument to another

function to be executed later. It's commonly used in asynchronous code.

14. What are template literals in JavaScript? Template literals use backticks (``) to allow
embedded expressions using ${}. They support multi-line strings and easier string
interpolation. Example:

let name = "John";

console.log(`Hello, ${name}`);

15. What is destructuring in JavaScript? Destructuring is a way to unpack values from arrays
or properties from objects into distinct variables.

const [a, b] = [1, 2];

const { name, age } = { name: "John", age: 30 };

16. What is the spread operator and rest parameter?

 Spread: Expands an array or object

 Rest: Collects multiple elements into an array

function add(...args) {

return args.reduce((a, b) => a + b);

17. What is the difference between null and undefined?

 null: Assigned value representing no value

 undefined: Variable declared but not assigned any value

18. How is memory managed in JavaScript? Memory is managed automatically via garbage
collection. JavaScript uses reference-counting and mark-and-sweep algorithms to clean up
unused memory.

19. What are higher-order functions? A higher-order function is a function that takes
another function as an argument or returns a function. Examples include map(), filter(),
reduce().

20. What is the difference between ``, and ``?

 call(): Invokes function with given this and arguments

 apply(): Same as call() but takes arguments as an array

 bind(): Returns a new function with bound this context

21. What is the use of ``?

 typeof: Returns the type of a variable

 instanceof: Checks if an object is an instance of a specific class or constructor

22. What is event bubbling and capturing?

 Bubbling: Event propagates from target to root

 Capturing: Event propagates from root to target You can handle either phase using
the third parameter of addEventListener().

23. What is the difference between ``?

 map(): Returns a new array with modified values

 forEach(): Executes a function on each element but doesn’t return a new array
24. What are the different types of errors in JavaScript?

 Syntax Errors

 Runtime Errors

 Logical Errors You can catch errors using try...catch.

25. What is debouncing and throttling in JavaScript?

 Debouncing: Delays execution until after a delay of inactivity

 Throttling: Ensures function runs at most once in a given interval Useful in optimizing
scroll or input events.

26. What is the difference between shallow and deep copy?

 Shallow copy: Copies only the first level

 Deep copy: Recursively copies nested objects Use JSON.parse(JSON.stringify(obj)) for

deep copy.

27. What are modules in JavaScript? Modules allow code organization and reuse. You can
export and import functions, objects, or primitives using export and import keywords.

28. What is a symbol in JavaScript? Symbol is a primitive data type introduced in ES6. It’s
used to create unique identifiers for object properties.

29. What is a generator function? A generator is a function that can be paused and resumed
using yield. Defined using function* syntax. Useful for asynchronous tasks and iterable
sequences.

30. How do you handle exceptions in JavaScript? Use try...catch...finally blocks to catch and
handle errors gracefully:

try {

// risky code

} catch (error) {

console.error(error);

} finally {

// cleanup