Scribd
Upload
9 views69 pages

R WNX NVF 8 JMG 5 W PGX BYNp MV

This guide is designed for frontend developers seeking to enhance their interview preparation for SDE1 and SDE2 positions, covering both remote and on-site opportunities. It includes a comprehensive set of technical questions across HTML, CSS, JavaScript, React.js, and Next.js, along with career advice on interview preparation, resume building, and job applications. By utilizing this resource, developers will gain the necessary skills and knowledge to successfully navigate frontend development challenges and secure their desired roles.

Uploaded by

vigneshshenoym.17ec
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views69 pages

R WNX NVF 8 JMG 5 W PGX BYNp MV

This guide is designed for frontend developers seeking to enhance their interview preparation for SDE1 and SDE2 positions, covering both remote and on-site opportunities. It includes a comprehensive set of technical questions across HTML, CSS, JavaScript, React.js, and Next.js, along with career advice on interview preparation, resume building, and job applications. By utilizing this resource, developers will gain the necessary skills and knowledge to successfully navigate frontend development challenges and secure their desired roles.

Uploaded by

vigneshshenoym.17ec
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

CRACK

FRONTEND
INTERVIEW
(SDE1, SDE2 +)

- CODE WITH AYAAN


Introduction
Are you a Frontend developer looking to expand your career opportunities?
This comprehensive guide offers a unique blend of technical expertise and career
advice, tailored for both remote and on-site job markets.

As a seasoned frontend developer with over 4 Yrs+ experience in various work


environments, I've curated this book to address common challenges and provide you
with the tools you need to succeed. Whether you're aiming for the flexibility of remote
work or the collaborative environment of an on-site office, this guide has you covered.

Inside this book, you will find:

30 HTML questions
20+ CSS questions
50 frequent JavaScript questions (including 10 machine-round coding challenges)
50 frequent React.js questions (with 10 machine-round coding challenges)
20 important Next.js questions.

Along with these technical insights, I’ve included invaluable career advice:

How to prepare for interviews


How to give strong answers
Resume-building tips
How to apply for jobs
How to ask for referrals and write effective cold emails.

By the end of this book, you'll be equipped with the knowledge and skills to
confidently tackle frontend development challenges and land your dream job,
whether it's remote or on-site.
TABLE OF

CONTENTS

HTML Page 03

CSS Page 11

Javascript Page 21

React.js Page 40

Next.Js Page 53

Resume Builder Page 59

Job Opportunity :
Page 62
(Cold Email, Referral, Job Platform and Job Apply)

Interview Page 65
( Preparation Tips, Questions, How to explain, Body Language)
HTML
1. What is HTML?

HTML stands for HyperText Markup Language, which is the most fundamental
building block of the Web. HTML defines the structure and meaning of web content.

2.What are attributes?

Attributes are extra properties that alter the behavior of an HTML tag. For example,
the tag <input> has `type` attribute which defines what the input field is, such as a
text field, checkbox or radio button, etc.

3.What are the advantages of using HTML5?


1. ?
HTML5 makes design interactive web pages much easier because it allows video,
audio, and graphics to be embedded into web pages without the use of a third party
plugin like Flash. Other features include but are not limited to:

1. Geolocation
2. Offline application caching
3. Improved error handling
4. Better Browser Support and Compatibility
5. Client-side databases

4.What is the purpose of <!Doctype html>?

The <!DOCTYPE html> declaration appears at the top of any HTML5 document. This
will inform the web browser as to which version of HTML it will be presented with,
making the document display properly within that particular web browser. In fact,
there are three doctypes: Strict, Frameset, and Transitional.

Page 3
5. What are semantic elements in HTML5?

Semantic HTML provides meaning to a webpage’s content rather than just focusing
on presentation. For example, a <p> tag indicates a paragraph, conveying both
meaning and format. In contrast, tags like <b> and <i> are non-semantic as they only
define presentation without additional meaning.

<article>
<aside>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

1. 6. What is the anchor tag? ?


What is the anchor tag?

The anchor tag (<a>) is used to create links between different sections of a page or
between different web pages.

7. What is an iFrame?

The <iframe> tag allows the inclusion of another webpage within a web page. It is
often used for displaying banner ads from third-party platforms but can pose
security risks due to potential cross-site vulnerabilities.

Page 4
8. What are the common lists used in web design?

The most common types of lists are:


Ordered List: Displays items in a numbered format, created using the <ol> tag.
Unordered List: Displays items with bullet points, created using the <ul> tag.
Definition List: Displays terms and definitions, created using <dl>, <dt>, and <dd>
tags.

9. What is the canvas element in HTML5?

The <canvas> element serves as a container for drawing graphics on web pages
using a scripting language like JavaScript. It enables the dynamic rendering of 2D
shapes and images.

10. What is the difference between <div> and <span> in HTML?

<div> is a block-level element used to group larger sections of content, making it


suitable for layout purposes.

<span> is an inline element used for styling small portions of text within a block
without disrupting the flow of content.

Page 5
11. What are empty elements?

Empty elements, or void elements, are HTML tags that do not have any content
and do not require a closing tag. Examples include <img>, <br>, and <hr>

12. What is an SVG??

SVG, or Scalable Vector Graphics, is an XML-based format for creating vector


images. SVG files can be defined with XML text and edited in a text editor,
allowing the creation of diagrams, icons, charts, and more.

13. What is the use of the <figcaption> tag in HTML5?

The <figcaption> tag is used to provide a caption or description for a <figure>


which can contain images, illustrations, or other media.

14. When is it appropriate to use frames?

Frames are rarely used in modern web design due to issues with usability, SEO,
and accessibility. but alternatives like <iframe> or responsive design are generally
recommended.

15. How do you create a clickable text that opens an email?

You can create a clickable email link using the <a> tag with a mailto: URL:

Page 6
16. Explain the difference between block-level and inline elements.

Block-level elements start on a new line and occupy the full width of their
container. Examples : <p>, <div>, and <h1-h6>.

Inline elements don't start on a new line and only take up the space they need.
Examples include <span>, <a>, and <img>.

17. What is the purpose of the <head> section in an HTML document?

The <head> section contains metadata about the page, such as the title, description,
keywords, stylesheets, and scripts.

18. What is the purpose of the <head> section in an HTML document?

The <form> element is used to create forms for collecting user input. Input fields
are created using the <input> element with various type attributes like text, email,
password, checkbox, radio, and submit.

19. How do you create a dropdown list in HTML?

Use the <select> element with <option> elements for the options.

20. How do you ensure cross-browser compatibility in your HTML code?

We should use a consistent coding style, avoid using proprietary features, and
test your code in different browsers.

21. How do you create a search bar in HTML?

Page 7
22. What is the purpose of the <meta> tag, and what are some common uses?

The <meta> tag provides metadata about the page, such as the character encoding,
viewport settings, and keywords. It helps for SEO.

23. What is the role of the <title> element?

The <title> element specifies the title of the webpage, which is displayed in the
browser's tab or title bar.

24. How do you create a table in HTML?

Use the <table> element with <tr> rows, <th> header cells, and <td> data cells.

Page 8
25. How can I create a login form in HTML with email and password fields?

To create a login form in HTML, you'll need to use the following elements and
attributes:
<form> element: Defines the form.
<label> element: Associates a label with a form control.
<input> element: Creates input fields.
type="email": Creates an email input field.
type="password": Creates a password input field.
<button> element: Creates a button for submitting the form.

26. What is the role of the <link rel="preload"> and <link rel="prefetch">
elements in improving page performance?

<link rel="preload"> : This element tells the browser to load a resource immediately,
as it is likely to be needed soon. This can help reduce page load times, especially for
critical resources like stylesheets and scripts.

<link rel="prefetch">: This element tells the browser to load a resource in the
background, as it might be needed later. This can help improve perceived
performance, as the resource will already be available if the user decides to navigate
to a page that requires it.

27. How can you prevent cross-site scripting (XSS) attacks in your HTML code?

1. Input validation: validate all user inputs so that they have the correct form for
the data that they expect. This avoids injection of malicious data into your
application.
2. Encode user-generated content: To prevent cross-site scripting (XSS) attacks,
always encode user-generated content before inserting it into the DOM.
This means converting potentially harmful characters into their encoded
equivalents, preventing malicious scripts from being executed.

(Continue...)
Page 9
3. Use CSP: A CSP is a policy that defines which resources a web page may load. It can
also contribute to the prevention of XSS attacks by limiting malicious scripts from
executing on the server.

28. How to use <picture> element and how it can be used for responsive images?

The <picture> element is newly released of HTML5, It allows you to specify multiple
image sources for different screen sizes or conditions, ensuring that the most
appropriate image is displayed for the user's device.

29. Explain the importance of using HTTPS for secure web communication.

HTTPS is the encrypted form of HTTP and is intended to establish a secure


connection between a user's browser and a web server. It is based on encryption of
data being transmitted between the two counterparts over SSL/TLS.

30. What is clickjacking, and how can it be prevented ?

Clickjacking is an attack where a malicious website frames a legitimate website to


trick users into clicking on hidden elements
How to Fix : Using a frame-ancestors directive in the CSP This limits which domains
can frame your website.
Add a X-Frame-Options header: This would prevent your website from being framed
in a different website.

Page 10
-End-
CSS
1.What is CSS?

CSS helps you design your website's appearance. It's like choosing colors, fonts, and
layout for your website. Think of it as a stylist for your online space

2. What is the box model in CSS?

The box model represents the rectangular boxes that elements generate in the
document tree. It comprises

1. ?

Content-box
Padding-box border-box
(default)

Width and Height Content, padding,


Content only Content and padding and border
Include

div { width: 100px; height: div { width: 100px; height:


div { width: 100px; height:
100px; padding: 10px; 100px; padding: 10px;
Example 100px; padding: 10px;
border: 2px solid black; box- border: 2px solid black;
border: 2px solid black; }
sizing: padding-box; } box-sizing: border-box; }

CALCULATION
100px/100px 100px/100px 100px/100px
(Height/width)

Page 11
3.How can you center a block element in CSS?

1. ?

4. What is the difference between classes and IDs in CSS?

Class:
Multiple elements can share the same class. This allows you to apply the same
styles to multiple elements on a page.
Classes are defined using a dot (.) followed by the class name. (.my-class)
ID
Only one element can have a specific ID. IDs are unique identifiers for elements.
IDs are defined using a hash (#) followed by the ID name. For example, #my-id.

Page 12
5.What is a CSS preprocessor?

CSS preprocessors extend CSS with features like variables, nested rules, and
functions, enhancing maintainability and efficiency. Popular preprocessors
include Sass, LESS, and Stylus.

6.What are pseudo-classes and pseudo-elements?

Pseudo-class: A keyword that adds a special state to selected elements


(e.g., :hover, :focus).
Pseudo-element: Styles a specific part of an element.
(e.g., ::before, ::after).

1. ?

7.What is the calc() function in CSS?

The calc() function allows for mathematical calculations when setting


CSS property values. Example

Page 13
8. What are media queries in CSS?

The media query adjusts the style on smaller screens in order to change layout,
font size, and padding that make the content readable and accessible while giving a
better user experience for mobile devices.

9. What is Flexbox and Why it’s useful?

Flexbox, short for Flexible Box Layout, is a CSS layout module that makes building
complex layouts easier, without floats and positioning

1. ?
1. Flexbox makes it simple to create flexible, responsive layouts that adapt to
different screen sizes.
2. Flexbox automatically distributes spare space between items, or around them,
so you'll avoid computing margins or padding.

Page 14
10.What is the difference between display: none, visibility: hidden and opacity: 0

1. ?

11. How can you create a responsive web design?

1. Use Fluid Grid Layouts: Use percentage-based widths rather than fixed pixel
values when designing your layout, so elements can adapt dynamically to
screens of all sizes.
2. Flexible Media (Images/Videos): Use max-width: 100% to scale images and
media so they do not exceed their parent containers. Still, on smaller screens,
they should not overflow.
3. Media Queries: Media queries add specific CSS rules for their application based
on specific characteristics like width. This would mean adapting the positions,
fonts, or even the visibility of an element based on the screen size.
4. Use relative units-like em, rem, or %-for the size of fonts instead of pixels to
ensure that all texts are well scaled according to screen size and users'
preferences.

Page 15
12.What are CSS transitions?

CSS transitions enable smooth changes between property values over a specified
duration

13. What are CSS animations?

CSS animations allow you to create complex animations through keyframes.


1. ?

14. What is the purpose of the float property?

The float property positions elements to the left or right, allowing text to wrap
around them. While still used, modern layouts often utilize Flexbox and Grid
instead.

Page 16
15.What is the z-index property?

The z-index property controls the stacking order of overlapping elements. Higher
values appear on top. It only applies to positioned elements (those with position
set to relative, absolute, fixed, or sticky).

1. ?

16.How do you create a sticky footer using CSS?

Footer

Page 17
17.What is the position property in CSS?

The position property determines how an element is positioned within the


document. (CodePen LIVE LINK)

1.static
Default positioning, where the element follows the normal document flow without
any special positioning applied.

2.relative
Positions the element relative to its original place in the normal flow, allowing for
small offsets using top, left, right, or bottom.

3.absolute
Removes the element from the document flow and positions it relative to its
nearest positioned (non-static) ancestor, allowing for precise placement.

4.fixed
1. The element is removed from the document flow
? and stays fixed relative to the
viewport, meaning it remains in the same spot even during scrolling.

5. sticky
A hybrid between relative and fixed, where the element switches from relative to
fixed positioning based on the user's scroll position within its container.

18.What is the purpose of the @import rule in CSS?

The @import rule imports one CSS file into another and should be placed at the
top of the CSS file:

Page 18
19.What are CSS selectors?

CSS selectors tell the browser which elements to style on a webpage, like pointing
at a heading or button and applying the right colors, fonts, or layouts to them.

👉 FULL SCREEN 🔗
1.
20.Explain the concept of specificity in CSS. ?

Higher specificity will apply styles to an element, overriding those with lower
specificity.

Specificity is calculated using a four-part value represented as (a, b, c, d),


where:

a: Inline styles (style attributes in HTML) — counts as 1 point.


b: IDs — counts as 1 point for each ID in the selector.
c: Classes, attributes, and pseudo-classes — counts as 1 point for each class,
attribute, or pseudo-class.
d: Type selectors (element names) and the universal selector (``) — counts as 1
point for each.

👉 Details Explaination

Page 19
21.What are the different types of CSS size units such as px, rem, and others? Please
provide a brief description and an example for each unit.

22. What are the properties of flexbox?

1. ?

Page 20
-End-
JAVASCRIPT
1. What are JavaScript data types?

JavaScript has two categories of data types:


1. Primitive Data Type (string, number, boolean, null, undefined, bigint, and symbol)

2. Non-primitive Data Type - arrays, functions, objects

2. Difference between var, let, and const?


1. ?

3. What is the difference between null and undefined?

null: Represents absence of value assigned by the developer.


undefined: Indicates that a variable has been declared but not assigned a value yet.

Page 21
4. What is a closure in JavaScript?

A closure is a function that retains access to its outer scope even after the outer
function has finished execution. Closures allow encapsulation and are widely
used in callbacks and event handlers.

5. What is hoisting in JavaScript?

Hoisting is JavaScript's behavior of moving variable and function declarations to


the top of their scope during the compilation phase. However, only declarations
1. ?
1. are hoisted, not initializations. ?

6. What are higher-order functions?

A higher-order function is a function that takes another function as an argument,


returns a function, or both. Examples include map, filter, and reduce.

Page 22
7. What is the difference between == and ===?

== : Performs equality after type coercion, meaning 2 == "2" will return true.
=== : Performs strict equality without type coercion, so 2 === "2" will return false.

8. What is the event loop in JavaScript?

The event loop is a mechanism that ensures non-blocking, asynchronous operations


in JavaScript. It checks the call stack and the message queue, executing queued tasks
when the stack is empty.

1. ?
1. ?

9. What are promises?

Promises are objects that represent the eventual completion or failure of an


asynchronous task. They have three states: pending, fulfilled, and rejected.

Page 23
10. What are async/await?

async/await makes working with promises easier by writing asynchronous code in a


synchronous manner. An async function always returns a promise, and await pauses
execution until the promise resolves.

11. What is the difference between call, apply, and bind in JavaScript?

call: Invokes a function with a specified this value and arguments provided
individually.
apply: Similar to call, but arguments are provided as an array.
bind: Returns a new function with a bound this value that can be called later.

1. ?
1. ?

12. What is prototypal inheritance in JavaScript?

Prototypal inheritance allows objects to inherit properties and methods from another
object via the prototype chain. Every JavaScript object has an internal [[Prototype]]
property, which can be accessed using Object.getPrototypeOf() or __proto__.

Page 24
13. What is the `this` keyword in JavaScript?

The this keyword refers to the object that is executing the current function. Its value
depends on how the function is invoked:
In the global scope, this refers to the global object (window in browsers).
In a regular function (non-strict mode), this refers to the global object.
In strict mode, this is undefined inside a function.
In an object method, this refers to the object itself.
Arrow functions do not have their own this and inherit it from the surrounding
context.
You can explicitly set the value of this using call(), apply(), and bind().
In a class, this refers to the instance of the class.

1. ?
1. ?

Page 25
14.Explain the concept of currying?

Currying transforms a function with multiple arguments into a sequence of functions,


each taking a single argument. It enables partial application of arguments.

15. What are JavaScript modules?

JavaScript modules allow code to be organized into reusable chunks by using import
and export. ES6 introduced modules to manage dependencies and improve
maintainability.

module file (math.js) Import in Another File:

1. ?
?
16. What are IIFEs (Immediately Invoked Function Expressions)?

IIFEs are functions executed immediately after they are defined. They create a new
scope to avoid polluting the global namespace

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

Shallow Copy: Copies the reference of objects; nested objects are not copied.
Deep Copy: Creates a completely independent copy of all objects and nested objects.

(continue...) Page 26
18. What are destructuring and rest/spread operators?
Destructuring: Unpacks values from arrays or properties from objects into variables.
Spread: Expands an array or object into individual elements.
Rest: Collects arguments into an array.

1. ?
. ?

19. Explain event delegation.

Event delegation is a technique where a parent element handles events for its child
elements by leveraging event bubbling. This improves performance when handling
events for dynamically added elements.

Page 27
20. What are generator functions?

Generator functions are special functions that can pause their execution and
resume later. They are defined using the function* syntax and use yield to return
values.

21. What is the difference between synchronous and asynchronous programming?

Synchronous: Code executes line by line; blocking behavior.


Asynchronous: Code executes non-blocking operations, allowing tasks to run in
parallel.

1. ?
. ?

22. What are JavaScript callbacks?

A callback is a function passed as an argument to another function and executed


after the completion of that function.

Page 28
23. Explain debouncing in JavaScript.

Debouncing ensures that a function is executed only after a specified delay has passed
since the last time it was invoked. It’s commonly used in search input fields or window
resize events.

24. Explain throttling in JavaScript.

Throttling ensures a function is executed at most once in a specified time interval,


even if triggered multiple times. It’s commonly used in scroll or resize events.

1. ? ?

25. What is the difference between a shallow freeze and a deep freeze in objects?

Shallow freeze (Object.freeze): Prevents modifications to the object but allows


changes in nested objects.
Deep freeze: Recursively freezes the object and its nested objects.

Page 29
26. What is the difference between Object.create and class inheritance?

Object.create: Creates a new object with the specified prototype.


Class inheritance: Involves using the class and extends keywords to define object-
oriented behavior.

27. Explain JavaScript event bubbling and capturing.

Event Bubbling: The event starts from the target element and propagates up to the
parent elements.
Event Capturing: The event starts from the root element and propagates down to
the target element.
Use addEventListener(event, handler, useCapture) to control the phase
(useCapture is false for bubbling, true for capturing).

1. ?
1. ?

28. What are the differences between mutable and immutable objects in JavaScript?

Mutable: Objects that can be modified after creation. Example: Arrays and objects.
Immutable: Objects that cannot be modified after creation. Example: Strings.

Page 30
29. Explain the Set object in JavaScript.

Object.freeze: Prevents modifications to both the object and its properties.


Object.seal: Prevents adding or removing properties but allows modifying existing
ones.

30. What is the super keyword in JavaScript?

The super keyword is used to call methods or access properties of a parent class in the
child class. It is often used in constructors of derived classes.

1. ?
?

Page 31
31. Explain the Set object in JavaScript.

A Set is a collection of unique values. It does not allow duplicate entries and provides
methods like add, delete, and has.

32. What is the WeakMap object in JavaScript?

A WeakMap is a collection of key-value pairs where keys are objects and values can be
arbitrary values. Keys are weakly referenced, meaning they can be garbage collected
if not referenced elsewhere.

1. ?
1. ?

33. What is memoization?

Memoization is an optimization technique where results of expensive function calls


are cached and reused when the same inputs occur again.

Page 32
34. What is the Intl object in JavaScript?

The Intl object provides tools for language-sensitive formatting of dates, numbers,
and strings.

35. What are Service Workers in JavaScript?

Service workers are background scripts that enable features like offline caching, push
notifications, and background synchronization.

36. What is the difference between a polyfill and a transpiler?

Polyfill: Adds missing features to older environments.


Transpiler: Converts modern code into older versions for compatibility.

Example: Babel is a popular transpiler for converting ES6+ to ES5.


1. ?
1. ?
37. What are JavaScript decorators?

Decorators are special functions that modify the behavior of classes or class methods.
They are proposed for ES7+.

Page 33
38. What is the purpose of the Reflect object in JavaScript?

The Reflect object provides methods for interceptable JavaScript operations. It offers a
way to perform actions on objects similar to Object but in a functional style, and it
works well with proxies.

39. Can you compare the three common web storage mechanisms: LocalStorage,
SessionStorage, and Cookies? Please explain their key differences, use cases, and
security implications.

1. ?
?

40. What is the difference between the window object and the DOM object in JavaScript?

The window object represents the browser's global context and provides access to
browser-specific functions like window.location, window.alert(), and global variables
(document, console).
The DOM object is a programming interface for the HTML document, allowing
manipulation of its structure, content, and style (e.g., document.getElementById(),
document.createElement()).
The window object manages the browser's environment, and the DOM is a part
of the window that allows interaction with the page content.

Page 34
JS Coding Round

1. Write a custom implementation of the map function for arrays. The function should
take a callback function as an argument and return a new array where each element
is the result of applying the callback to the corresponding element in the original array.

1. ? ?

2. Write a retry function that retries a given asynchronous function up to n times


before throwing an error.

Page 35
3. Implement a custom version of the reduce function. The function should take a
callback and an optional initial value, and return the accumulated result after applying
the callback function across all elements in the array.

1. 4. Write your own filter function that mimics ?the behavior of JavaScript's native filter
method. The function should take a callback that tests each element and return a new
array of elements that pass the test.

Page 36
5. Implement a custom flat function that flattens a nested array. The function should
accept a depth argument to specify how deep the flattening should go (similar to
Array.prototype.flat() in modern JavaScript).

1. 6. Create a sleep function that returns a promise


? that resolves after a specified
1. ?
number of milliseconds. This function can be useful for delaying execution in
asynchronous operations.

Page 37
7. Write a function that takes an object and a string representing a path (e.g., "a.b.c") and
returns the value at that path in the object. The function should handle cases where the
path is invalid or the object does not have the specified property.

8. Design a class that allows chaining of arithmetic operations like addition and
multiplication. For example, a sequence like operation(10).add(2).multiply(10) should
work. The class should return the instance of the object to enable method chaining,
and a final getResult() method to retrieve the result.
1. ?
1. ?

Page 38
9. Create a function curry that transforms a function with addition parameters into a
curried function. Your curry function should handle any function with any number of
parameters and should allow you to call the function step by step (one argument at a
time).

1. ?
1. ?
10. Write a function deepClone that creates a deep copy of a given object or array.

-End- Page 39
React.js
1. What is React? Why use it?

ReactJS is a widely-used JavaScript library for building dynamic and interactive user
interfaces, especially for single-page applications. Developed by Facebook, it's known for
its efficient rendering, reusable components, and strong community support.

2. What is the Virtual DOM in React, and how does the diffing algorithm work behind
the scenes?

The Virtual DOM is an in-memory copy of the real DOM, used by React to efficiently
update the UI. When the state changes, React updates the Virtual DOM first, then
compares it with the previous version using the diffing algorithm.
The algorithm:
1. Compares old and new Virtual DOM trees.
2. Identifies differences and updates only the changed parts of the real DOM.

3. What is JSX?
1. ?
1. JSX is a syntax extension for JavaScript that allows
? writing HTML-like code within
JavaScript, making it easier to describe UI components

4. What are props in React?

Props are inputs to components that allow data to be passed from parent to child
components. They are read-only and help in rendering dynamic content.

Props access

passing props

5. What is state in React? How is it different from props?

State is a component's internal data storage, allowing it to manage and respond to user
interactions. Unlike props, state is mutable and managed within the component

(Continue...) Page 40
using state

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

Functional components are stateless and defined as functions, while class components
can hold state and are defined using ES6 classes. With hooks, functional components
can now manage state and side effects.

Class base component

functional component

7. What are React lifecycle methods?


1. ?
Lifecycle methods are special methods in class components that allow developers to run
code at specific points in a component's life, such as mounting, updating, and
unmounting.

8. What are hooks in React?


Hooks are functions that let you use state and other React features in functional
components, eliminating the need for class components.

(Continue...) Page 41
react hook

9. What is the useEffect hook?

useEffect is a hook that allows you to perform side effects in functional components,
such as data fetching or manual DOM manipulations.

emptry [] means it will run only once,


when dependency cleanup function return ()=>{},
whether if we put no array dependency it
1. will run every time.
change useEffect will run. ? Unmounting phase
Updating phase
Mounting Phase

10. What is the context API?

The Context API allows for sharing state across components without prop drilling,
making it easier to manage global state.

1. Creating Context Outside


of component

2. Provider wrapper for


wrapping child components

3. useContext hook to
accessing context data.

Page 42
11. What is prop drilling and how can it be avoided?

Prop drilling refers to passing props through multiple layers of components to reach a
deeply nested component. It can be avoided using the Context API or state management
libraries.

12. What are Higher-Order Components (HOCs)?

HOCs are functions that take a component and return a new component. They are used
to share common functionality between components without repeating code.

1. ?
High-Order
Component

Usage

13. What are controlled and uncontrolled components in React?


Controlled components have their state managed by React, while uncontrolled
components use refs to access DOM elements directly.

using
refs handle
input change
uncontrolled
using and not
state to re-render
handle
input change

Page 43
14. What is React Router? How does it work?

React Router is a library for routing in React applications. It allows navigation between
components without reloading the page.

15. What is lazy loading in React?

Lazy loading is a technique to load components or resources on-demand, reducing


initial load time and improving performance. React provides React.lazy and Suspense
for this.

import your component


using React.lazy

Suspense will only load


when we go to that
particular route

16. What is Redux, and how is it used in React?

Redux is a state management library for JavaScript applications. It provides a


centralized store to manage application state.

1. ?

17. What is React's strict mode?

StrictMode is a development mode tool that helps identify potential issues in a React
app, like deprecated APIs or unexpected side effects.

18. What are React Fragments?

Fragments let you group multiple elements without adding extra nodes to the DOM.

We can use
Fragment or <></> React.Fragment

<> </>

Page 44
19. What is reconciliation in React?

Reconciliation is React's process of comparing the current and previous virtual DOM
trees to determine the minimum number of changes required to update the UI.

20. What is the difference between React.createElement and JSX?

React.createElement is used to create React elements directly, while JSX is a syntactic


sugar that simplifies writing React code.
JSX is transpiled into React.createElement calls.

21. What is a key in React, and why is it important?

Keys are unique identifiers used by React to track and update individual items in lists
efficiently.

1. Note: Don’t use index as key


?
to avoid messup in update

key should be unique


always

22. What are portals in React?


Portals allow rendering children into a DOM node outside the parent component's
hierarchy. usage : ( Modal, tooltip etc)

ReactDOM.createPortal

helps to create portal, now


We can use any component.
renders at this node.

Page 45
23. What is the difference between useMemo and useCallback?

useMemo memoizes a value, while useCallback memoizes a function. Both improve


performance by avoiding unnecessary computations or recreations.

24. What are error boundaries in React?

Error boundaries are components that catch JavaScript errors in their child
components and display fallback UI instead of crashing the application.

react-error-boundary package

Alternate >

1. ?
usage >>

25. What is React.forwardRef?

React.forwardRef is a function that allows you to pass a ref from a parent component to
a child component. This is especially useful when you want the parent component to
directly access a DOM element or a child component's instance.

Page 46
26. What is hydration in React?

Hydration is the process of attaching React's event handlers to the HTML elements
rendered during SSR

27. What is React.memo?

React.memo is a higher-order component that memoizes a functional component,


preventing unnecessary re-renders when props don't change

28. How to Use the 'useId' Hook to generate unique ids

useId returns a unique ID string associated with this particular useId call in this
particular component.

29. Why React's useDeferredValue hook is useful? (READ)

The useDeferredValue hook allows us to fix this slow render problem by implementing a
delay before some information is calculated. This works in a very similar way to
debouncing and throttling since our deferred value will only be calculated after the
important state updates have finished running.
Page 47
Defers the searchQuery to avoid
unnecessary re-renders while typing

30. What is the useTransition hook? (Read)

The useTransition hook enables us to mark some state modifications as unimportant.


These state updates will be performed in parallel with other state updates, but the
rendering of the component will not be delayed. ( Codesandbox code )

It returns an array with two values:


isPending (a boolean indicating if the
transition is ongoing) and startTransition
(a function to wrap state updates that are
not urgent).

The search query update is wrapped


inside startTransition, so it is deferred,
allowing React to prioritize more urgent
updates (like typing input).

31. How to detect 'click' outside React component?

To detect a click outside a React component, use the useRef hook to reference the
component and add an event listener for mouse clicks. When a click occurs, check if the
event target is outside the referenced component to trigger a specific action.

Page 48
this ref contains will check if
clicked element is not a child of
current container then required
function can be invoked

32. How does useEffect differ from useLayoutEffect, and when should each be used?

useEffect: Runs after the render is committed and is non-blocking (asynchronous).


useLayoutEffect: Runs synchronously after the DOM mutations but before the
browser paints. It's useful for DOM measurements or synchronizing layout
changes.

33. How do you use useSyncExternalStore to subscribe to external stores?

The useSyncExternalStore hook, introduced in React 18, is designed to provide a


standardized way to subscribe to external stores or state outside React. It helps
synchronize the external store’s state with React’s rendering.

Page 49
34. How is the Shadow DOM different from the virtual DOM?

The Shadow DOM provides encapsulation for styles and markup in web components,
isolating them from the global DOM. It's a browser feature used for creating reusable,
self-contained components.

The Virtual DOM, on the other hand, is a JavaScript-based abstraction used in


frameworks like React to optimize UI rendering. It keeps a lightweight in-memory
representation of the DOM and efficiently updates only the changed parts.

35. What are bundlers in React.js?

Bundlers in React.js package your code and assets into optimized files for the browser.
They handle dependency management, JSX compilation, and performance
optimizations like minification, tree-shaking, and code splitting. Common bundlers:
Webpack, Vite, and Parcel.

36. Explain CORS in React?

In ReactJS, Cross-Origin Resource Sharing (CORS) refers to the method that allows you
to make requests to the server deployed at a different domain. As a reference, if the
frontend and backend are at two different domains, we need CORS there.
We can setup CORS evironment in frontend using two methods:
axios
fetch

37. How to optimize a React code?

Eliminating the use of inline attributes as they slow the process of loading
Avoiding extra tags by using React fragments
Lazy loading
Minimize and lift the state only when necessary to avoid unnecessary complexity.
Use useMemo/useCallback to memoize event handlers and avoid re-creating
functions.
Analyze and optimize rendering performance using the React Profiler.
Remove unused code with tree shaking using modern bundlers like Webpack.

Page 50
38. What is custom hooks in React?

Custom hooks are normal JavaScript functions whose names start with “use” and
they may call other hooks. We use custom hooks to maintain the DRY concept that is
Don’t Repeat Yourself. It helps us to write a logic once and use it anywhere in the
code.

useFetch is a custom
hooks that can be used
anywhere of our
components
usage

39. What are some strategies for managing application state in large-scale React
applications?

1. Centralized State Management: Use libraries like Redux or MobX to maintain a


single source of truth for application data.
2. Component Composition: Break down the app into reusable components with
localized state for better maintainability.
3. Context API: Share state between distant components without prop drilling.

40. Describe the differences between server-side rendering (SSR), client-side rendering
(CSR), and static site generation (SSG) in the context of React.

1. Server-Side Rendering (SSR): HTML is generated on the server for each request,
improving SEO and providing faster initial load times. Next.js is commonly used for
SSR.
2. Client-Side Rendering (CSR): The initial HTML is minimal, with rendering done in
the browser using JavaScript. This allows interactivity but can result in slower
initial loads.
3. Static Site Generation (SSG): HTML is generated at build time and served as static
files, offering fast page loads. Gatsby is a popular tool for SSG in React.

Page 51
React.js Coding Round
Machine Round 10 Coding Solutions Github Repo : Link

1. Todo List Application: Implement adding, editing, deleting, and completing tasks,
testing dynamic state management and UI updates.
2. Counter Application: Involves creating increment, decrement, and reset
functionality and evaluating event handling and state manipulation.
3. Dynamic Form Creation: Tasks include adding/removing fields and implementing
validation, focusing on handling complex and dynamic states.
4. Drag-and-Drop Functionality: Requires reordering items or moving them between
lists, testing event handling, and maintaining consistent states.
5. Paginated Data Display: Fetch data from an API and create pagination controls,
assessing API integration and state management for navigation.
6. Reusable Modal/Popup: Build a modal with open/close functionality and
customizable content to test component reusability.
7. Search and Filter Functionality: Implementing search and filters tests array
manipulation and efficient rendering techniques.
8. Infinite Scrolling: Dynamically load data as the user scrolls, assessing event
handling and API optimization.
9. Debounced Search Input: Delays API calls during search to optimize network
requests and user experience.
10. Folder Structure Implementation: Mimics a file explorer with features like creating,
renaming, and deleting, testing hierarchical data handling and state management.

-End- Page 52
Next.Js
1. What is Next.js, and how does it differ from traditional React applications?

Next.js is a React framework that allows for server-side rendering and static site
generation. Unlike traditional React, it pre-renders pages on the server, resulting in
improved performance and SEO.

2. What is SSR ?

SSR is the process of rendering web pages on the server and sending them to the
client. In Next.js, you should use SSR when you need better SEO, faster initial page
loads, and dynamic content that requires server-side data fetching.

3. What are the different ways to fetch data in Next.js, and when should you use each
method?
1. ?

getServerSideProps: Used when you need to fetch data on every request, such as
user-specific content. It runs on the server for each page load and passes data to the
component.
getStaticProps: Ideal for fetching static content that doesn’t change often (e.g., blog
posts). It runs at build time and allows the page to be pre-rendered with the fetched
data.
getInitialProps: An older method that's still supported but less recommended. It runs
both on the server (on the initial load) and the client (on navigation), but newer
methods like getServerSideProps and getStaticProps are preferred for better
flexibility and performance.

4. Why would you use custom API routes in Next.js?

Custom API routes in Next.js enable you to manage backend logic, such as form
submissions or authentication, without requiring a separate server. These routes are
serverless functions that reside in the pages/api directory, allowing you to easily
incorporate server-side processes into your project.

Page 53
5. How can you perform code splitting in Next.js?

Next.js automatically splits your code based on the page structure. that means only
the JavaScript required for the specific page is loaded, improving performance. You
can also manually split code by dynamically importing components when needed.

dynamic will help to load


the page in chunks

1. ?
6. How do you implement a custom 404 page in Next.js?

You can create a custom 404 page by simply creating a pages/404.js file. This file will
automatically be used when a user navigates to a non-existent route.

7. How do you handle API rate limiting in Next.js?

To handle API rate limiting, you can implement custom logic within your API routes
using middleware or packages like express-rate-limit.

For example, you can create an API route with rate limiting to prevent too many
requests from the same IP.

Page 54
8. What are hybrid Next.js applications, and why are they useful?

A hybrid Next.js project combines server-side rendering (SSR) and static site
generation (SSG) on the same page. This is beneficial when certain elements of a page
require dynamic content (SSR) and others can be pre-rendered (SSG).

9. How does the next/image component improve image performance?

The next/image component automatically optimizes images, handling resizing, lazy


loading, and responsiveness. This leads to faster page loads and better performance.

1. ?

10. How to do dynamic routes work in Next.js?

Dynamic routes allow you to create pages with parameters that change based on the
URL. For example, for a page that shows user profiles, you can create a dynamic route
like pages/profile/[id].js, where [id] is a dynamic parameter.

Example

accessing ID from dynamic


page.

[id] creates a dynamic route, capturing


values like /product/1, accessible via
router.query.id.

Page Structure

Page 55
11. How can you handle errors in Next.js applications?

we can handle errors by creating a custom error page (pages/_error.js), using


try...catch blocks, or integrating tools like Sentry for advanced error monitoring and
logging.

Error file

When any page throws any error, it will


redirect to this file, just like error-
boundary in react.

Page Structure

1. 12. What is client-side rendering, and how does? it differ from server-side rendering?

Client-side rendering (CSR) is the process of rendering a web page on the client's
browser using JavaScript after receiving the initial HTML, CSS, and JavaScript from
the server. The key difference between SSR and CSR is that SSR sends a fully
rendered HTML page to the client's browser, while CSR sends an empty HTML page
that is populated by JavaScript.

13. How do you implement server-side caching in a Next.js application?

Next.js provides built-in support for server-side caching through the Cache-Control
header. You can set the cache duration for each page using the getServerSideProps
function or by setting the cacheControl property in the page component.

We can also use caching libraries like Redis or Memcached to cache API responses or
database queries. Options like CDN caching or edge caching can also be implemented
to improve the performance of static assets and reduce the load on the server.

14. What are the roles of _app.js and _document.js in Next.js?


_app.js: This file is for customizing your app’s layout and global components (e.g.,
headers, footers). You can also use it to set up global context providers or state that
should be accessible across your app.
_document.js: This file allows you to modify the HTML structure, like adding custom
meta tags, scripts, or setting the <html> and <body> tags. It's great for SEO or third-
party integrations.
Page 56
15. How Do You Optimize the Performance of a Next.js Application?

1. ?
Multi-Zones: Deploy multiple Next.js apps as one to keep large projects
organized, allowing different teams to work independently without affecting the
user experience.
Dynamic Imports: Split your code into smaller chunks that load only when
needed, speeding up your app.
Route-Based Splitting: Next.js automatically loads only the necessary code for
the current page, improving performance.
Component-Based Splitting: Load complex components only when required or
after user interaction to reduce the initial load time.
Delay Non-Essential Scripts: Use the Next/script component to control when
third-party scripts load, optimizing performance (before or after interactive).
Caching: Customize caching for dynamic content while Next.js handles static
assets for faster load times.
Incremental Static Regeneration (ISR): Regenerate static content in the
background without rebuilding the whole site, ensuring fresh content without a
heavy build process.
Bundle Analysis: Use the @next/bundle-analyzer to identify large dependencies
and reduce unnecessary imports, improving load speed.
Personalization: Use edge middleware to handle requests closer to users for
faster, personalized experiences.
Micro Frontends: Implement independent app sections using Webpack’s Module
Federation, making development more efficient and scalable.

Page 57
16. Explain the Concept of “Prefetching” in Next.js and How It Impacts Performance

The prefetching mechanism works by automatically downloading JavaScript and assets


for linked pages in the background. This proactive measure cuts down navigation time,
leading to smoother and faster transitions between pages, enhancing the user
experience.

17. How should environment variables be handled in a Next.js app?

Environment variables are typically stored in a .env.local file. These are important for
securing sensitive information, such as API keys or database credentials, and they allow
you to configure different settings for development, staging, and production
environments.

.env.local
1. ?

.env.production

usage of Env Variables

18. How do you handle authentication and authorization in a Next.js application?

1. Authentication:
JWT (JSON Web Tokens) or cookies are used to authenticate users.
An API route is created for logging in users. Upon successful login, a JWT is
generated and stored in an HTTP-only cookie to prevent client-side access for
security.
2. Authorization:
After authentication, the user’s role (e.g., admin, user) is checked to determine
access to certain resources.
getServerSideProps is used to verify the token on the server before rendering
protected pages. If the token is valid, the page is served; otherwise, the user is
redirected to the login page.

-End- Page 58
Resume Builder
An ATS (Applicant Tracking System)-friendly resume is important because many
companies now use software to screen resumes before a human even looks at them.
Think of it as a filter that helps employers find the right candidates quickly. If your
resume isn't formatted in a way the ATS can understand, it might not even make it to the
hiring manager’s desk. So, making your resume ATS-friendly increases your chances of
getting noticed in today’s job market. It’s all about making sure the right information is
visible and easy for the system to pick up!

Resume Template (Click on this Link to create your resume for free.)

Here's a guide to optimizing your resume for ATS (Applicant Tracking System) as a
1.
frontend developer, whether you're a fresher or
?
have a few years of experience:

1. Personal Information (Header)


Name: Your full name, in a large and bold font to grab attention.
Example: Jake Ryan
Contact Information: Include a professional email address, phone number, LinkedIn
profile, GitHub, and personal website if applicable.
Example:
Jake Ryan | jake@su.edu | +1 (123) 456-7890 | linkedin.com/in/jakeryan |
github.com/jakeryan
Make sure the contact details are at the top and easy to find.

2. Professional Summary (Optional but Highly Recommended)


Write a concise 2-3 sentence summary showcasing your key skills and experience.
This helps recruiters quickly know what you bring to the table.

Example:
"Motivated Frontend Developer with 2 years of experience specializing in React and
JavaScript. Passionate about building responsive and accessible user interfaces. Eager to
contribute to innovative projects in a collaborative environment."

Page 59
3. Key Skills (Tailored to the Job Description)
Create a list of the most relevant skills for the role you're applying for. Use a mix of
technical skills and soft skills.
Example:
Frontend Technologies: React.js, HTML5, CSS3, JavaScript
Libraries/Frameworks: Redux, Next.js, jQuery
Version Control: Git, GitHub
Other Tools: Webpack, Babel, Figma (if applicable)
Soft Skills: Problem-solving, Collaboration, Time Management

4. Professional Experience (For Experienced Developers)


List your work experience in reverse chronological order. Start with your job title,
company name, and dates. Then add 3-5 bullet points explaining your
responsibilities and achievements, using action verbs. Focus on measurable impact
and keywords.
Example:
Frontend Developer | Tech Solutions | March 2022–Present
Built responsive eCommerce web applications using React.js and Redux,
improving load time by 25% and enhancing user experience across devices.
1. ?
Developed and optimized product listing pages, improving performance and
reducing page load time, resulting in a 20% increase in user engagement.
Integrated dynamic shopping cart and checkout functionality, collaborating
with backend teams to ensure smooth data flow, boosting conversion rates by
15%.
Implemented automated tests with Jest, ensuring high code quality and
reducing bugs in key features like payment gateways and product filtering by
15%.

5. Professional Experience (For Experienced Developers)


Projects (Use Keywords & Metrics)
Showcase key projects with relevant tech stacks and measurable outcomes.
Example:
Project Name | Tech Stack | Date
Developed a real-time stock market analysis tool using React.js and Node.js,
improving data accuracy by 20% through seamless integration of APIs.
Built a voice-to-website builder app with React and the Web Speech API, allowing
users to create websites via voice commands, increasing user engagement by 35%.
Designed a dynamic product page for an eCommerce site using React, optimizing UI
components and reducing page load time by 25%.
Page 60
6. Education
Degree | Institution Name | Location (Graduation Year)
Example:
Bachelor of Science in Computer Science | University of XYZ | May 2021
For Freshers:
You can highlight specific coursework or projects that align with the job you're
applying for.

Example:
Relevant Coursework: Web Development, Algorithms, UI/UX Design
This approach makes your education section more approachable while still showcasing
key information.

Resume Template (Click on this Link to create your resume for free.)

Example Resume : Click To Preview

1. ?

Page 61
Job Opportunity :
(Cold Email, Referral, Job Platform and Job Apply)

Cold Emailing:
Proactively reach out to potential employers or industry professionals to
express interest in job opportunities. Craft a concise, personalized email
highlighting your skills and how you can add value to their organization.
This approach can set you apart from other candidates.

Subject: Application for [Position] at [Company Name]

I hope you’re doing well!


I’m a passionate software engineering student pursuing a Bachelor of Technology in
Computer Science and Engineering. I’m reaching out to express my interest in the
1. ?
[Position] at [Company Name], and I’d love to contribute my skills in
frontend/backend development to your team.

Over the past few years, I’ve had the opportunity to intern at some exciting places like
Koo App, Swiggy, and currently ShareChat, where I’ve worked on real-world
applications, contributing to performance improvements and building scalable
systems.

I’m the founder of Peer Programming Hub, a community dedicated to helping


students through free, gamified coding camps.

Here’s my resume, and I would be thrilled if you could consider me for [Position/Job
ID/Job Link]. If you believe I could be a good fit, I’d greatly appreciate it if you could
refer me for the role or share any insights on how I can contribute further to
[Company Name].

Looking forward to hearing from you!


Warm Regards,
[Your Name]

Page 62
Referrals:
Leverage your professional network to obtain referrals. An employee
referral involves a current staff member recommending you for an open
position, often through an internal referral program. This can increase
your chances of securing an interview.

Here's how to approach it:


1. Identify Potential Referrers: Use LinkedIn's search to find current employees at
your target company. Look for individuals in roles or departments relevant to the
position you're interested in.

2. Personalize Your Connection Request: When sending a connection request, include


a brief, personalized message explaining your interest in their company and the
specific role.
Example:
"Hi [Name], I came across your profile and noticed your experience at [Company].
I'm very interested in the [Position] role there and would appreciate any insights you
1. might have." ?

3. Engage with Their Content: Before requesting a referral, engage with their posts or
articles to build rapport and demonstrate genuine interest.

4. Request the Referral: Once connected and after some interaction, send a polite
message requesting a referral.

Example:
"Hi [Name], I hope you're doing well. I noticed that [Company] has an opening for
[Position], and I believe my background in [Your Field] aligns well with the role. If you
feel comfortable, would you consider referring me? I'd be grateful for your support."

[Attach your resume]

Page 63
Job Platforms:

Utilize online job platforms like LinkedIn, Indeed, and Glassdoor to discover and apply
for job openings. These platforms allow you to search for positions based on your skills
and preferences, and often provide company reviews and salary insights.

Direct Applications:

Apply directly through company websites or contact hiring managers to express


interest in positions. Tailor your resume and cover letter to align with the specific job
requirements, demonstrating your suitability for the role.

Networking Events:

Attending industry-specific networking events allows you to connect with


professionals, learn about job opportunities, and gain insights into your field. These
events can be in-person or virtual and often include seminars, workshops, and social
gatherings.
1. ?

Page 64
Interview
( Preparation Tips, Questions, How to explain, Body Language)

Preparation Tips:

Research the Company: Understand the company's mission, values,


culture, and recent developments. This knowledge allows you to tailor
your responses and demonstrate genuine interest.

Review the Job Description: Identify the skills and qualifications


required. Align your experiences with these requirements to showcase
your suitability for the role.

1. Practice Common Questions: Rehearse ? answers to frequently asked


interview questions to build confidence and ensure clarity. For
example, prepare to discuss your strengths, weaknesses, and reasons
for applying.

Prepare Questions for the Interviewer: Develop thoughtful questions


about the company or role to ask at the end of the interview,
demonstrating your interest and engagement.

Choose professional attire that aligns with the company's culture.


Dressing appropriately demonstrates respect and helps create a
positive first impression.

By incorporating this tip into your interview preparation, you can present
yourself as a well-prepared and professional candidate.

Page 65
Common Interview Questions and How to Answer Them:

Q1. "Tell me about yourself."

How to Answer: Provide a concise summary of your professional


background, highlighting experiences relevant to the position.

Q2. "Why do you want to work here?"

How to Answer: Discuss aspects of the company that align with your
values and career goals, showing you've done your research.

Q3. "What are your strengths and weaknesses?"


How to Answer: Mention strengths pertinent to the job and areas you're
working to improve, demonstrating self-awareness and a commitment to
growth.
1. ?

Q4. "Tell me about a time when you faced a challenge at work and how you
handled it."

How to Answer: Use the STAR method (Situation, Task, Action, Result) to
structure your response. Describe a specific challenge, the actions you
took to address it, and the positive results that followed.

Example:
1. Situation: In my previous role, we redesigned the user dashboard for
better engagement.
2. Task: I was tasked with implementing a dynamic data visualization
feature using charts.
3. Action: I chose Chart.js, integrated real-time data via APIs, and made it
responsive.
4. Result: The feature increased user engagement by 30% in the first
month.

Page 66
How to Explain
Use the STAR Method: Structure your responses to behavioral
questions by describing the Situation, Task, Action, and Result. This
method provides clear and concise answers.

Be Specific: Provide concrete examples of your achievements and how


they relate to the job you're applying for.

Stay Positive: Even when discussing challenges or failures, focus on


what you learned and how you've grown professionally.

Body Language:

Maintain Good Posture: Sit up straight with shoulders back to convey


confidence and professionalism.

1. ?
Make Eye Contact: Engage with the interviewer through appropriate
eye contact, showing attentiveness and interest.

Smile and Nod: Use facial expressions and nodding to show


understanding and agreement, creating a positive rapport.

Avoid Fidgeting: Minimize nervous habits like tapping or shifting to


maintain a composed appearance.

Mirror the Interviewer's Energy: If the interviewer is calm and relaxed,


match their energy. If they’re more upbeat and enthusiastic, adjust
your tone and pace to match theirs. This creates rapport and makes the
conversation feel more natural.

Pause Before Answering: Instead of rushing into an answer, take a brief


moment to gather your thoughts. This shows that you’re thoughtful
and ensures that your responses are well-considered and clear.

Page 67
THANK YOU

Thank you so much for taking the time to read this e-book.
I truly hope the insights shared have provided you with
valuable guidance and boosted your confidence in your
frontend interview journey.

Remember, learning is a continuous process, and with


persistence and dedication, success is bound to follow.
Wishing you the very best in your career, and may you
Thank you for
achieve allreading this book! I hopegoals!
your professional the insights shared help you feel more
confident in your frontend interview journey. Keep learning, stay persistent,
and success will follow
Keep growing and stay motivated!

Feel free to share your feedback/improvement.

Email : codewithayaan01@gmail.com

Instagram: @_codewithayaan/

024
/2
3/12
2

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy