🔷 HTML INTERVIEW QUESTIONS (Project-
Based)
1. What HTML version did you use in your project?
Answer:I used HTML5, which provides semantic tags, better structure, improved accessibility,
and supports modern APIs like canvas and local storage.
2. Why did you use semantic HTML tags?
Answer:Semantic tags like
, and
improve:
Code readability
SEO
Accessibility
Screen reader support
3. Which semantic tags did you use in your project?
Answer:I used:
for navigation and title
for stock data sections
for individual stock cards
for project information
generated by "Markdown to PDF Fast Converter" 👉 [Link]
4. Why not use only
tags everywhere?
Answer:Using only
reduces clarity and accessibility. Semantic tags clearly describe content purpose, helping
browsers and assistive technologies.
5. How did you structure the HTML of your stock dashboard?
Answer:
Header → App name & navigation
Main section → Stock input and prediction result
Charts section → Graphs
Footer → Credits
6. How did you link CSS and JavaScript files?
Answer:
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML
7. Why is the tag important?
Answer:It ensures responsive design on mobile devices by controlling scaling and layout.
8. Did you use forms in your project?
Answer:Yes, forms were used to take stock symbol or input data from the user.
9. What input types did you use?
Answer:
text for stock symbol
generated by "Markdown to PDF Fast Converter" 👉 [Link]
number for prices
submit button
10. How did you validate user input?
Answer:Using:
HTML attributes (required, min, max)
🔷
JavaScript validation before processing data
CSS INTERVIEW QUESTIONS (Project-
Based)
11. How did you style your stock cards?
Answer:I used:
Flexbox/Grid for layout
Border radius for smooth UI
Box shadow for card effect
12. Why did you choose Flexbox/Grid?
Answer:
Flexbox → one-dimensional layouts (rows/columns)
Grid → complex dashboard layouts
13. Difference between Flexbox and Grid?
Answer:
FlexboxGrid1D layout2D layoutRow OR columnRow AND columnContent-drivenLayout-driven
14. How did you make your UI responsive?
Answer:
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Media queries
Flexible units (%, rem)
Flexbox/Grid
15. What are media queries?
Answer:They apply CSS based on screen size.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML @media (max-
width: 768px) { .container { flex-direction: column; } }
16. What is the CSS box model?
Answer:Content → Padding → Border → Margin
17. How did you center elements?
Answer:
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML display: flex;
justify-content: center; align-items: center;
18. What is z-index and did you use it?
Answer:Controls stacking order. Used for dropdowns or overlays.
19. Difference between display: none and visibility: hidden?
Answer:
display: none → removes element
visibility: hidden → hides but keeps space
generated by "Markdown to PDF Fast Converter" 👉 [Link]
20. How did you handle hover effects?
Answer:
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML .card:hover {
🔷
transform: scale(1.05); }
JAVASCRIPT INTERVIEW QUESTIONS
(MOST IMPORTANT)
21. What role does JavaScript play in your project?
Answer:JavaScript handles:
User input
API calls
Data processing
DOM updates
Chart rendering
22. How did you fetch stock data?
Answer:Using Fetch API to call backend or external API.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML fetch(url)
.then(res => [Link]()) .then(data => displayData(data));
23. What is Fetch API?
Answer:Fetch API is used to make asynchronous HTTP requests and returns a Promise.
generated by "Markdown to PDF Fast Converter" 👉 [Link]
24. Difference between fetch() and axios?
Answer:
fetch is built-in
axios is third-party
Axios handles JSON automatically
25. What is a Promise?
Answer:A Promise represents a value that may be:
fulfilled
rejected
pending
26. What is async/await?
Answer:Cleaner way to handle promises.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML async function
getData() { const res = await fetch(url); const data = await [Link]();
}
27. How did you manipulate the DOM?
Answer:Using:
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML [Link]
ntById() [Link]() innerHTML
28. How did you show prediction results dynamically?
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Answer:By updating HTML elements using JavaScript after API response.
29. What is event handling?
Answer:Handling user actions like click or submit.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML [Link]
stener("click", predict);
30. What is preventDefault()?
Answer:Prevents page reload on form submission.
31. What is localStorage? Did you use it?
Answer:Used to store user preferences or last searched stock.
32. Difference between var, let, and const?
Answer:
var → function scoped
let → block scoped
const → cannot be reassigned
33. What is arrow function?
Answer:Short syntax for functions.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML const predict =
() => {}
34. What is JSON?
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Answer:JavaScript Object Notation used for data exchange.
35. How did you handle errors?
Answer:Using .catch() or try…catch.
36. What is debouncing/throttling?
Answer:Used to limit API calls when user types continuously.
37. What is CORS?
Answer:Browser security feature restricting cross-origin requests.
38. How did you improve frontend performance?
Answer:
Minimized DOM updates
Used async operations
Optimized CSS
39. What challenges did you face in frontend?
Answer:Handling async data, UI responsiveness, and error handling.
40. How would you improve the UI further?
Answer:
Better animations
Dark mode
🔥
Real-time updates
FINAL INTERVIEW CLOSING QUESTION
41. Explain your project frontend in 1 minute.
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Answer:“My project frontend is built using HTML5, CSS3, and JavaScript. HTML provides
structure using semantic elements, CSS ensures responsive and user-friendly design using
Flexbox and media queries, and JavaScript handles user interaction, API calls, and dynamic
stock prediction display. The UI updates in real-time without page reload, providing a smooth
experience.”
Alright Suhel, here’s a complete, interview-oriented JavaScript Q&A pack 🔥 This is freshers
→ mid-level safe, covers theory + practical + traps, and is enough if you understand it
properly.
1️⃣
I’ve grouped questions the way interviewers think.
JavaScript Basics
Q1. What is JavaScript?
Answer:JavaScript is a high-level, interpreted, dynamically typed scripting language used to
create interactive and dynamic web applications. It runs mainly in the browser and also on
servers using [Link].
Q2. Is JavaScript compiled or interpreted?
Answer:JavaScript is interpreted, but modern engines (like V8) use Just-In-Time (JIT)
compilation to improve performance.
Q3. What are JavaScript data types?
Answer:Primitive types (7):
String
Number
Boolean
Undefined
Null
Symbol
BigInt
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Non-primitive:
Object (arrays, functions, objects)
Q4. Difference between null and undefined?
nullundefinedIntentional absence of valueVariable declared but not assignedType = object
(bug)Type = undefined
Q5. What is typeof operator?
Answer:Used to check data type of a variable.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML typeof 10;
2️⃣
// "number" typeof null; // "object" typeof undefined; // "undefined"
Variables & Scope
Q6. Difference between var, let, and const?
FeaturevarletconstScopeFunctionBlockBlockRedeclareYesNoNoReassignYesYesNoHoisting
Yes (undefined)Yes (TDZ)Yes (TDZ)
Q7. What is Temporal Dead Zone (TDZ)?
Answer:The time between variable declaration and initialization where accessing let or const
causes an error.
Q8. What is scope in JavaScript?
Answer:Scope defines where a variable can be accessed.
Global Scope
Function Scope
Block Scope
generated by "Markdown to PDF Fast Converter" 👉 [Link]
3️⃣ Hoisting & Execution
Q9. What is hoisting?
Answer:JavaScript moves variable and function declarations to the top of their scope before
execution.
Q10. Are functions hoisted?
Answer:
Function declarations → Yes
Function expressions / arrow functions → No
4️⃣ Functions
Q11. What are arrow functions?
Answer:A shorter syntax for functions that do not have their own this.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML const add = (a,
b) => a + b;
Q12. Difference between arrow function and normal function?
Normal FunctionArrow FunctionHas own thisInherits thisHas arguments objectNo
argumentsCan be constructorCannot
Q13. What is callback function?
Answer:A function passed as an argument to another function and executed later.
Q14. What is higher-order function?
Answer:A function that takes another function as argument or returns a function.
generated by "Markdown to PDF Fast Converter" 👉 [Link]
5️⃣
Examples: map, filter, reduce
Closures & Lexical Scope
Q15. What is a closure?
Answer:A closure is when a function remembers variables from its outer scope even after the
outer function has executed.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML function outer()
{ let count = 0; return function inner() { count++; return
count; }; }
Q16. Real-world use of closures?
Answer:
Data hiding
Private variables
Event handlers
6️⃣
Currying
Arrays & Objects
Q17. Difference between array and object?
ArrayObjectOrderedUnorderedIndex-basedKey-value pairs
Q18. Common array methods?
Answer:
map()
filter()
generated by "Markdown to PDF Fast Converter" 👉 [Link]
reduce()
forEach()
find()
some(), every()
Q19. Difference between map() and forEach()?
mapforEachReturns new arrayReturns undefinedUsed for transformationUsed for iteration
Q20. What is reduce()?
7️⃣
Answer:Used to reduce an array into a single value.
Objects & this
Q21. What is this keyword?
Answer:this refers to the object that is currently calling the function.
Q22. How this behaves?
Global → window
Object method → object itself
Arrow function → lexical parent
Q23. Difference between call, apply, and bind?
8️⃣
callapplybindArguments separatelyArguments as arrayReturns new function
Asynchronous JavaScript
Q24. What is asynchronous JavaScript?
Answer:Allows execution of long tasks without blocking the main thread.
Q25. What is callback hell?
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Answer:Nested callbacks making code unreadable and hard to maintain.
Q26. What are promises?
Answer:An object representing eventual completion or failure of an async operation.
States:
Pending
Fulfilled
Rejected
Q27. What is async/await?
Answer:A cleaner way to handle promises that looks like synchronous code.
Q28. Difference between then() and async/await?
9️⃣
Answer:async/await improves readability and error handling using try/catch.
Event Loop & Web APIs (IMPORTANT)
Q29. What is event loop?
Answer:The event loop manages execution of:
Call Stack
Web APIs
Callback Queue
Microtask Queue
Q30. Difference between microtask & macrotask?
Answer:
Microtask → Promises
Macrotask → setTimeout, setInterval
generated by "Markdown to PDF Fast Converter" 👉 [Link]
🔟
Microtasks execute first.
DOM & Browser
Q31. What is DOM?
Answer:DOM is a tree structure representation of HTML that JavaScript can manipulate.
Q32. How to select elements?
Answer:
getElementById
querySelector
querySelectorAll
Q33. What is event delegation?
1️⃣1️⃣
Answer:Handling events at parent level instead of child elements.
ES6+ Features
Q34. What is destructuring?
Answer:Extract values from arrays or objects.
Q35. What is spread operator?
Answer:Used to expand elements.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML const arr2 =
[...arr1];
Q36. Difference between spread and rest?
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Spread → expands
Rest → collects
1️⃣2️⃣ Equality & Coercion
Q37. Difference between == and ===?
=====Loose equalityStrict equalityType conversionNo conversion
Q38. What is type coercion?
1️⃣3️⃣
Answer:Automatic conversion of one data type to another.
Error Handling
Q39. How to handle errors?
1️⃣4️⃣
Answer:Using try…catch…finally
Memory & Performance
Q40. What is garbage collection?
1️⃣5️⃣
Answer:Automatic memory management by JavaScript engine.
Tricky / Output Questions (Interview
Favorite)
Q41.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML [Link]([]
== []);
generated by "Markdown to PDF Fast Converter" 👉 [Link]
Answer: false (different references)
Q42.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML [Link](0 ==
false);
Answer: true
Q43.
Plain
textANTLR4BashCC#CSSCoffeeScriptCMakeDartDjangoDockerEJSErlangGitGoGraphQLGroo
vyHTMLJavaJavaScriptJSONJSXKotlinLaTeXLessLuaMakefileMarkdownMATLABMarkupObj
[Link] BuffersPythonRRubySass (Sass)Sass
(Scss)SchemeSQLShellSwiftSVGTSXTypeScriptWebAssemblyYAMLXML [Link](typeo
f NaN);
1️⃣6️⃣
Answer: "number"
Project-Based Questions
Q44. How did you use JavaScript in your project?
Answer (template):“I used JavaScript for form validation, API handling using fetch/axios,
dynamic UI updates, and handling async operations using async/await.”
Q45. How do you handle API calls?
Answer:Using fetch or axios with async/await and proper error handling.
generated by "Markdown to PDF Fast Converter" 👉 [Link]