JavaScript, HTML and CSS Interview Questions for Java Full Stack with React
25 JavaScript, HTML and CSS questions with answers for java full stack with react roles — 11 easy, 10 medium, 4 hard.
About JavaScript, HTML and CSS
Strong JavaScript, HTML and CSS fundamentals make React much easier. This topic covers scope, hoisting, closures, this, promises, async and await, the event loop, event delegation and browser storage. It also covers the CSS box model, Flexbox, Grid, responsive design, semantic HTML, accessibility, web performance and front-end security issues such as XSS.
Sheet progressStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
What is the difference between var, let and const?
var is function-scoped, hoisted and initialised as undefined, and can be redeclared, which causes bugs in loops and blocks. let and const are block-scoped and stay in the temporal dead zone until declared, so using them early throws an error. let allows reassignment and const does not, although a const object or array can still be mutated. Use const by default, let when reassignment is needed and avoid var.
02
What is the difference between == and === in JavaScript?
== compares after type coercion, so 0 == '0' and null == undefined are true, which leads to surprising results. === compares both type and value without coercion, so 0 === '0' is false. Always use === and !== in application code. The only common exception is value == null, which checks for both null and undefined in one expression.
During compilation, declarations are moved to the top of their scope. Function declarations are hoisted fully, so they can be called before they appear. var declarations are hoisted and initialised to undefined. let, const and class declarations are hoisted but stay uninitialised in the temporal dead zone, so accessing them early throws a ReferenceError. Function expressions assigned to variables follow the variable's rules.
Every element is a box made of content, padding, border and margin, from inside to outside. By default, width applies only to the content, so padding and border add to the final size. Setting box-sizing: border-box makes width include padding and border, which makes layouts predictable, and most projects apply it to all elements. Vertical margins between block elements can collapse into one margin.
Flexbox is one-dimensional: it arranges items in a row or a column and is great for navbars, button groups, centring and card rows that wrap. Grid is two-dimensional: it controls rows and columns together, ideal for page layouts, dashboards and galleries with grid-template-areas. They work well together, for example a Grid page layout with Flexbox inside each card. Both reduce the need for floats and positioning hacks.
06
Why are semantic HTML and accessibility important?
Semantic elements like header, nav, main, article, button and label describe meaning, so screen readers, search engines and browsers understand the page. Use a real button instead of a clickable div so keyboard and focus work automatically. Add alt text to images, link labels to inputs, keep heading order logical and ensure enough colour contrast. Accessibility follows WCAG guidelines and improves SEO and usability for everyone.
07
Use map, filter and reduce to get the total value of in-stock products.
Check that the page has the viewport meta tag. Use browser device mode to find the element wider than the screen, often fixed widths in pixels, large images, long words or tables. Replace fixed widths with max-width: 100 percent, flexible units and flex-wrap, add overflow-wrap for long text and wrap wide tables in a scrollable container. Build mobile-first with media queries that add complexity for larger screens.
11
How do you handle a Git merge conflict when working in a team?
Situation: two of us edited the same service class in parallel branches. Task: merge without losing either change. Action: I pulled the latest main, rebased my branch, opened the conflicted files and resolved them together with my teammate on a quick call, then ran all tests before pushing. Result: the merge was clean. To reduce conflicts, we now keep branches short-lived and pull from main daily.
12
What is a closure in JavaScript? Give a practical use.
A closure is a function that remembers variables from the scope where it was created, even after that outer function has returned. For example, function counter() { let n = 0; return () => ++n; } returns a function that keeps its own private n. Closures are used for data privacy, function factories, event handlers, debounce and memoization, and React hooks rely on them. Stale closures in effects are a common bug when dependencies are missing.
A promise represents a value that will be available later, handled with then, catch and finally. async/await is syntax built on promises: an async function always returns a promise, and await pauses that function until the promise settles, so asynchronous code reads like synchronous code. Errors are handled with try/catch. Awaiting calls one by one is sequential, so use Promise.all for independent calls to run them in parallel.
14
How does the this keyword work, and how do arrow functions change it?
In a regular function, this depends on how the function is called: the object before the dot in a method call, undefined in strict mode for a plain call, the new object with new, or a value set by call, apply or bind. Arrow functions do not have their own this; they use this from the surrounding scope. That makes arrows ideal for callbacks inside methods, but unsuitable as object methods that need their own this.
function debounce(fn, delay = 300) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const search = debounce(term => {
fetch(`/api/products?q=${encodeURIComponent(term)}`);
}, 400);
input.addEventListener('input', e => search(e.target.value));
// Only the last call within 400 ms actually runs.
16
Call three APIs in parallel and handle failure of any one gracefully.
Events bubble up from the target element to its ancestors. With event delegation you attach one listener to a parent, such as a ul, and use event.target.closest('li') to find which child was clicked. This saves memory compared with a listener on every item and automatically works for items added later. It is commonly used for dynamic tables and lists. React uses a similar idea by attaching listeners at the root.
19
Your team is starting a new React project. Would you use Create React App or something else?
Create React App is deprecated and no longer recommended. For a single-page app backed by a Spring Boot API, Vite is the usual choice because of its fast dev server and optimised builds. If you need server-side rendering, SEO or file-based routing, a framework like Next.js or React Router in framework mode is recommended by the React team. Choose based on SEO needs, hosting and the team's experience.
20
What is the difference between localStorage, sessionStorage and cookies?
localStorage keeps data with no expiry for the origin, around 5 to 10 MB, and is shared across tabs. sessionStorage is similar but cleared when the tab closes and is per tab. Cookies are small, around 4 KB, are sent automatically with every request to the server and can be marked HttpOnly, Secure and SameSite. Use cookies for auth sessions, and storage for non-sensitive UI preferences only, since scripts can read storage.
21
Why should we hire you as a Java full stack developer?
I can contribute on both sides of a feature: I have built REST APIs with Spring Boot, JPA and MySQL, and responsive React screens that consume them. I write tests, use Git properly and have deployed my projects with Docker. I also learn quickly; I picked up Spring Security and JWT for my capstone in two weeks. I am looking for a team where I can grow into an engineer who owns features from design to production.
22
Explain the JavaScript event loop, including microtasks and macrotasks.
JavaScript runs on a single thread with a call stack. Asynchronous work is handled by the browser or Node, and callbacks wait in queues. After the stack empties, the event loop runs all microtasks first, such as promise callbacks and queueMicrotask, then one macrotask, such as setTimeout or an I/O callback, then renders if needed. So Promise.resolve().then(a) runs before setTimeout(b, 0). Long synchronous code blocks everything, including UI updates.
23
Your React app's home page takes 6 seconds to load on mobile. How would you improve it?
Measure with Lighthouse and the browser Performance tab, and check Core Web Vitals such as LCP and INP. Then reduce JavaScript with route-based code splitting and removing heavy libraries, compress and lazy-load images using modern formats like WebP or AVIF with proper sizes, enable gzip or Brotli and long-term caching through a CDN, and avoid render-blocking resources. Server-side rendering or pre-rendering, for example with Next.js, can improve first paint further.
24
A security test shows a stored XSS vulnerability in a comments feature. How do you fix it?
Stored XSS happens when user input containing script is saved and later rendered as HTML. React escapes text by default, so look for dangerouslySetInnerHTML, direct innerHTML or unsafe URL attributes like javascript: links. If rich text is required, sanitise it with a library like DOMPurify, and validate on the server too. Add a Content Security Policy header and keep tokens out of JavaScript-readable storage to limit damage.
25
Memory usage of a single-page app keeps growing the longer it stays open. What could cause this?
Common causes are event listeners, intervals or WebSocket subscriptions that are never removed when a component unmounts, growing global caches or arrays, and detached DOM nodes still referenced by JavaScript. In React, return cleanup functions from useEffect to remove listeners and clear timers. Use the Chrome DevTools Memory tab with heap snapshots to compare before and after navigation and find retained objects.
Frequently asked questions
How important is JavaScript, HTML and CSS in Java Full Stack with React interviews?
Strong JavaScript, HTML and CSS fundamentals make React much easier. This topic covers scope, hoisting, closures, this, promises, async and await, the event loop, event delegation and browser storage. It also covers the CSS box model, Flexbox, Grid, responsive design, semantic HTML, accessibility, web performance and front-end security issues such as XSS.
How should I use the JavaScript, HTML and CSS sheet?
Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.