Hi Friends!!
On 23rd June 2025, I attended an interview for the position of Frontend Developer at Redisolve Technologies. It was a good learning experience where I was asked important frontend concepts.
In this blog, I am going to explain all the questions asked in detail with simple words and real examples, so even beginners can understand and learn easily. Let's dive in!
1.How to Optimize Webpage for Performance?
A website must load fast and smoothly for a good user experience.
To optimize performance, we can compress images (like WebP), minify JS/CSS/HTML, and use lazy loading for images and videos. We can also use a CDN to serve content faster and enable browser caching.
Example: Lazy Loading Image
<img src="image.webp" loading="lazy" alt="Sample Image">
2.How to Handle CORS in JavaScript?
CORS (Cross-Origin Resource Sharing) is a browser rule that blocks access to resources from a different origin (domain) unless the server allows it. If the server allows it, it sends this header:
Access-Control-Allow-Origin:
Example Using fetch:
fetch('https://api.example.com/data', { mode: 'cors' })
.then(res => res.json())
.then(data => console.log(data));
3.What is Closure? How does it Work?
A closure means an inner function can access variables from the outer function even after the outer function has finished running.
Closures are useful to create private variables or remember previous data.
Example:
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
4.Client Side Rendering vs Server Side Rendering
-Client Side Rendering (CSR): JS builds the page in the browser.
-Server Side Rendering (SSR): Page built on server, ready HTML sent to browser.
Example:
CSR – React App using Vite.
SSR – Next.js App that sends ready HTML.
5.How to Manage Version and Collaborate in Git?
Git allows teams to work on the same project using branches.
Developers create branches, commit changes, then merge to main branch.
Example:
git checkout -b feature-login
git add .
git commit -m "Added login feature"
git push origin feature-login
6.Explain NPM and Yarn
Both are package managers for JavaScript projects.
npm is default with Node.js, while Yarn was made for speed and security.
You can install libraries, update or remove them easily.
Example:
npm install react
yarn add react
7.How to Debug Frontend Applications?
Debugging finds and fixes errors.
You can use console.log(), browser DevTools (Elements, Network, Sources), and breakpoints to check code flow.
Example:
console.log("Debugging here");
8.Synchronous vs Asynchronous in JS
Synchronous: Code runs line by line, blocking the next line.
Asynchronous: Runs in background (API calls, setTimeout).
Example:
console.log("Start");
setTimeout(() => console.log("Async"), 1000);
console.log("End");
9.How Does Event Loop Work in JavaScript?
The event loop lets JS handle async operations like setTimeout, promises.
Synchronous code runs first; then event loop runs callbacks from queue.
Example:
console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
10.Explain CSS Positions: relative, absolute, fixed
CSS positions decide how an element is placed in a page.
-relative: Moves based on its original place.
-absolute: Moves based on the nearest ancestor with position set.
-fixed: Stays fixed to the window even during scroll.
Example:
.relative { position: relative; top: 10px; }
.absolute { position: absolute; top: 10px; left: 10px; }
.fixed { position: fixed; bottom: 0; right: 0; }
11.What is Media Query?
Media queries make your website responsive — looking good on all devices (mobiles, tablets, desktops).
It changes styles based on screen width or height.
Example:
@media (max-width: 600px) {
body { background: lightblue; }
}
12.What is SPA?
SPA (Single Page Application) loads one HTML file and updates content using JavaScript without refreshing the entire page.
React, Angular, Vue are frameworks for SPA.
Example: Gmail, Facebook — no page reloads when you switch tabs or open mails.
13.Build Tools: Webpack and Vite
Build tools bundle JS, CSS into fewer files to load faster.
Webpack is older, heavy but powerful; Vite is faster with modern features.
Vite Example:
npm create vite@latest
14.Difference Between Development and Production
Development: Unminified code, full error logs, easy debugging.
Production: Minified, optimized, fast loading, errors hidden from users.
Example:
npm run dev # Development Mode
npm run build # Production Mode
15.Difference Between ID and Class in HTML.
-ID: Unique, used once (#id).
-Class: Can be reused for multiple elements (.class).Example:
Example:
<div id="header"></div>
<div class="box"></div>
16.How to Use Box Model in CSS?
The box model shows how content, padding, border, and margin create space around elements.
Adjusting padding/margin controls spacing and layout.
Example:
div {
padding: 10px;
border: 1px solid black;
margin: 20px;
}
17.Difference: Arrow Function vs Traditional Function
Arrow functions are short and do not have their own this.
Traditional functions have their own this and can be hoisted.
Example:
const greet = () => console.log("Hello");
function greetOld() { console.log("Hello"); }
18.Explain em, rem, px in CSS
-px: Fixed size.
-em: Relative to parent element’s font size.
-rem: Relative to root (html) font size.
Example:
html { font-size: 16px; }
p { font-size: 2rem; } /* 32px */
19.What are Template Literals?
Template literals help write multi-line strings and use variables easily.
Use backticks () and ${} to embed expressions.
Example:
const name = "Sathish";
console.log(`Welcome, ${name}!`);
20.var, let, const in JavaScript
var: Function-scoped, can redeclare.
let/const: Block-scoped; const can’t be reassigned.
Example:
var x = 5; let y = 10; const z = 15;
The End!!
This interview helped me revise important frontend concepts like closures, event loop, git, CSS box model, and build tools. These are must-know topics for every frontend developer. I suggest every learner practice these deeply with examples to build strong confidence.
Learning never exhausts the mind. Every interview is a new lesson!!.
Top comments (0)