Front-End & Full Stack Developer
Interview Questions
HTML5 Questions
1. 1. Q: What are semantic HTML elements? Can you give some examples and explain why
they are important?
A: Semantic HTML elements clearly describe their meaning to both the browser and the
developer. Examples include <header>, <footer>, <article>, <section>. They improve
accessibility and SEO.
2. 2. Q: How do you make a form in HTML, and what are the different types of input
elements?
A: Use the <form> element with input elements like <input> (text, radio, checkbox,
password), <select>, <textarea> for user input.
3. 3. Q: What is the difference between block-level and inline elements in HTML?
A: Block-level elements start on a new line and take full width (e.g., <div>, <p>), inline
elements do not start on a new line and take only as much width as needed (e.g., <span>,
<a>).
4. 4. Q: What are data-* attributes in HTML5?
A: They allow embedding custom data attributes on all HTML elements, accessible in
JavaScript via dataset property.
5. 5. Q: What is the purpose of the <!DOCTYPE html> declaration?
A: It tells the browser to render the page in standards mode using HTML5 rules.
CSS Questions
6. 1. Q: What are the differences between id and class selectors in CSS?
A: ID selectors (#id) target a unique element and have higher specificity. Class selectors
(.class) can be used on multiple elements.
7. 2. Q: How can you center a div both horizontally and vertically on a web page?
A: Using Flexbox: set display: flex; justify-content: center; align-items: center; height: 100vh
on the parent.
8. 3. Q: What is the difference between position: relative, absolute, and fixed in CSS?
A: Relative positions element relative to its normal position. Absolute positions relative to
nearest positioned ancestor. Fixed positions relative to viewport.
9. 4. Q: What is the box model in CSS?
A: The box model includes content, padding, border, and margin areas that define the space
an element occupies.
10. 5. Q: How do media queries work in CSS?
A: Media queries apply CSS styles conditionally based on device characteristics like width,
height, orientation.
JavaScript Questions
11. 1. Q: What are the different data types in JavaScript? Give examples.
A: Primitive types include string, number, boolean, null, undefined, symbol, and bigint.
Objects and arrays are reference types.
12. 2. Q: Explain the difference between == and === in JavaScript.
A: == compares values with type coercion; === compares values and types strictly.
13. 3. Q: How do you create and use a function in JavaScript? Can you give a simple
example?
A: Function declaration: function greet() { console.log('Hello'); } Call using greet();
14. 4. Q: What is event bubbling in JavaScript?
A: Event bubbling means an event propagates from the target element up through its
ancestors.
15. 5. Q: What is closure in JavaScript?
A: Closure is a function that remembers the environment (variables) where it was created
even after the outer function has finished.
16. 6. Q: What is the difference between var, let, and const?
A: `var` is function-scoped, `let` and `const` are block-scoped. `const` variables cannot be
reassigned.
17. 7. Q: How do you add an element dynamically to the DOM using JavaScript?
A: Use document.createElement() to create, then appendChild() to add it.
18. 8. Q: What is the purpose of the 'this' keyword in JavaScript?
A: 'this' refers to the object from which a function is called, varies with context.
19. 9. Q: What are promises in JavaScript?
A: Promises represent asynchronous operations that may complete in the future with
success or failure.
20. 10. Q: Explain how to handle errors in JavaScript.
A: Use try-catch blocks to catch exceptions, or .catch() for promises.
React Questions
21. 1. Q: What is React?
A: React is a JavaScript library for building user interfaces using components.
22. 2. Q: What is a component in React?
A: A component is a reusable piece of UI, can be a function or class.
23. 3. Q: What is JSX?
A: JSX is a syntax extension that allows writing HTML-like code in JavaScript.
24. 4. Q: What are props in React?
A: Props are inputs to components passed as attributes.
25. 5. Q: What is state in React?
A: State is a component’s internal data that affects rendering and can change over time.
26. 6. Q: What is the difference between state and props?
A: Props are passed from parent to child and are immutable; state is managed within the
component and can change.
27. 7. Q: What is a React hook? Name a few commonly used hooks.
A: Hooks let you use state and other React features in functional components. Common
hooks: useState, useEffect.
28. 8. Q: What is the virtual DOM?
A: A lightweight copy of the real DOM React uses to efficiently update UI.
29. 9. Q: How does React handle events?
A: React events are handled using camelCase attributes and event handlers are passed
functions.
30. 10. Q: What is the purpose of keys in React lists?
A: Keys help React identify which items changed, added, or removed for efficient updates.
Node.js Questions
31. 1. Q: What is Node.js?
A: Node.js is a JavaScript runtime built on Chrome's V8 engine to run JS outside the browser.
32. 2. Q: What is npm?
A: npm is the Node package manager used to install libraries and tools.
33. 3. Q: What is the event loop in Node.js?
A: The event loop handles asynchronous callbacks in Node.js.
34. 4. Q: How do you create a simple HTTP server in Node.js?
A: Using the http module: require('http').createServer((req, res) => {...}).listen(port).
35. 5. Q: What is middleware in Node.js?
A: Middleware functions process requests in frameworks like Express before the final
handler.
36. 6. Q: What are streams in Node.js?
A: Streams are data interfaces for reading or writing data in chunks.
37. 7. Q: What is the difference between synchronous and asynchronous methods in
Node.js?
A: Synchronous methods block execution; asynchronous methods do not.
38. 8. Q: What is a callback function?
A: A function passed as an argument to another function to be executed later.
39. 9. Q: What is Express.js?
A: Express.js is a minimal and flexible Node.js web application framework.
40. 10. Q: How do you handle errors in Node.js?
A: Errors are handled via callbacks (error-first callbacks), try-catch blocks, or promise catch
methods.
Java Questions
41. 1. Q: What are the main features of Java?
A: Java is platform-independent, object-oriented, secure, robust, and has automatic memory
management.
42. 2. Q: What is the difference between JDK, JRE, and JVM?
A: JDK is the development kit, JRE runs Java programs, JVM interprets bytecode.
43. 3. Q: What is a class and an object in Java?
A: A class is a blueprint; an object is an instance of a class.
44. 4. Q: What is inheritance in Java?
A: Inheritance allows a class to acquire properties and methods from another class.
45. 5. Q: What is polymorphism?
A: Polymorphism allows methods to do different things based on the object calling them.
46. 6. Q: What is encapsulation?
A: Encapsulation hides internal data and requires interaction through methods.
47. 7. Q: What is the difference between abstract class and interface?
A: Abstract classes can have method implementations, interfaces only declarations (until
Java 8+).
48. 8. Q: What are Java data types?
A: Primitive types include int, boolean, char, double; reference types are objects.
49. 9. Q: What is the purpose of the main method in Java?
A: Main method is the entry point of a Java application: public static void main(String[]
args).
50. 10. Q: What is exception handling in Java?
A: Mechanism to handle runtime errors using try, catch, finally, and throw.
LeetCode Easy Coding Questions
51. 1. Q: Two Sum: Given an array of integers and a target, return indices of the two
numbers adding to target.
A: function twoSum(nums, target) {
const map = new Map();
for(let i=0; i<nums.length; i++) {
const complement = target - nums[i];
if(map.has(complement)) return [map.get(complement), i];
map.set(nums[i], i);
}
return [];
}
52. 2. Q: Reverse Linked List (array simulation): Given an array, reverse it.
A: function reverseList(arr) {
return arr.reverse();
}
53. 3. Q: Valid Parentheses: Check if brackets in string are validly closed and ordered.
A: function isValid(s) {
const stack = [];
const map = {')':'(', '}':'{', ']':'['};
for(const char of s) {
if(['(','{','['].includes(char)) stack.push(char);
else {
if(stack.pop() !== map[char]) return false;
}
}
return stack.length === 0;
}
Tricky Coding Questions
54. 1. Q: Find the Missing Number: Given array of distinct numbers from 0 to n, find missing
number.
A: function missingNumber(nums) {
const n = nums.length;
const expectedSum = (n*(n+1))/2;
const actualSum = nums.reduce((a,b) => a+b, 0);
return expectedSum - actualSum;
}
55. 2. Q: Merge Two Sorted Arrays: Merge two sorted arrays into one sorted array.
A: function mergeSortedArrays(nums1, nums2) {
let i=0, j=0, merged=[];
while(i<nums1.length && j<nums2.length) {
if(nums1[i]<nums2[j]) merged.push(nums1[i++]);
else merged.push(nums2[j++]);
}
return merged.concat(nums1.slice(i)).concat(nums2.slice(j));
}
56. 3. Q: Check if Two Strings are Anagrams: Determine if two strings contain same
characters.
A: function isAnagram(s, t) {
if(s.length !== t.length) return false;
const count = {};
for(const char of s) count[char] = (count[char]||0)+1;
for(const char of t) {
if(!count[char]) return false;
count[char]--;
}
return true;
}
