Technical Questions for GenC Next Web UI Section
Q1. Which of the following properties does the Promise object support?
A. State
B. Result
C. Pre
D. Both A and B
Answer: D
Explanation:
A JavaScript Promise object can be: Pending, Fulfilled, or Rejected.
● While pending → result is undefined
● When fulfilled → result is a value
● When rejected → result is an error object
Q2. First JavaScript was known as _______ and after that it was known as _______, then finally
became JavaScript.
A. Mocha, LiveScript
B. E-script, Mocha
C. LiveScript, Mocha
D. LiveScript, E-script
Answer: A
Explanation: JavaScript was first called Mocha, then LiveScript, and finally became
JavaScript.
Q3. [Link]() returns a value in the __________ range.
A. 0 to 1
B. 1 to 100
C. -1 to 1
D. None of the mentioned
Answer: A
Explanation: [Link]() returns a floating-point pseudo-random number in the range 0
(inclusive) to less than 1 (exclusive).
Q4. What will be the output?
const x =[15, 4, 19, 26, 51];
const y = [Link] (myFunction);
function myFunction (value) {
return value > 18;
}
[Link](y);
A. 51, 26, 19
B. 19, 26, 51
C. 15, 4
D. Error
Answer: B
Explanation: filter() creates a new array of elements passing the test → Output: 19, 26,
51.
Q5. What will be the output?
const x =[45, 4, 9, 16, 25];
const y = [Link] (myFunction);
function myFunction (value) {
return value * 2;
}
[Link](x);
[Link](y);
A. 90, 8, 18, 32, 50
B. 45,4,9,16,25 | 90,8,18,32,50
C. 45,4,9,16,25
D. Error
Answer: B
Explanation:
● map() creates a new array with results → [90, 8, 18, 32, 50]
● Original array remains [45, 4, 9, 16, 25].
Q6. What will be the output?
const person = { fname: "Sakku", lname: "Sharma", age:20 };
let text = "";
for (let x in person) {
text += person[x];
}
[Link](text);
A. SakkuSharma20
B. Sakku Sharma 20
C. fname: Sakku lnameSharma age20
D. None
Answer: A
Explanation: for...in iterates over object keys. Values appended = "SakkuSharma20".
Q7. Which of the following represents valid template literals in JS?
A. ‘Welcome to Prepinsta’
B. "Welcome to Prepinsta"
C. `Welcome to Prepinsta`
D. None
Answer: C
Explanation: Template literals are defined using backticks (``) and allow multiline strings &
interpolation.
Q8. Correct way to add a background image in a <div> (image = img_girl.jpg) is:
A. <div style="background-image - 'img_girl.jpg';">
B. <div style="background-image - url('img_girl.jpg');">
C. <div style="background-image: url('img_girl.jpg');">
D. None
Answer: C
Explanation: Correct syntax:
<div style="background-image: url('img_girl.jpg');"></div>
Q9. Which is the correct CSS code for setting the body background color to green?
A. * { backgroung_color - green; }
B. body { background-color:green; }
C. #body { background-color:green; }
D. .body { background_color - green; }
Answer: B
Explanation: Correct CSS:
body { background-color: green; }
Q10. What will be displayed?
<h2 id="first"></h2>
<script>
var str = 'Let\'s';
[Link]("first").innerHTML = str;
</script>
A. Let
B. Let\’s
C. Let’s
D. Error
Answer: C
Explanation: The backslash escapes the apostrophe → Output is "Let’s".
Interview-Based Question
Q11. What is the difference between HTML and HTML5?
Answer: HTML (HyperText Markup Language) is the standard markup language for
creating web pages. HTML5 is the latest version of HTML, which introduces new
elements, attributes, and behaviors, and supports multimedia, graphics, and more
semantic elements.
● HTML5 supports audio, video, canvas, SVG, and new form controls.
● It provides better support for web applications.
● It improves semantic structure with new tags like <article>, <section>, <nav>,
<header>, and <footer>.
Q12. Explain the box model in CSS.
Answer: The CSS box model describes the rectangular boxes generated for elements
in the document tree and consists of:
● Content: The actual content, like text or images.
● Padding: Space between content and border.
● Border: Surrounds the padding (if any) and content.
● Margin: Space outside the border, separating the element from others.
The total size of an element is the sum of content width/height + padding + border +
margin.
Q13. What are semantic HTML elements? Give examples.
Answer: Semantic HTML elements clearly describe their meaning to both the browser
and the developer. They improve accessibility and SEO.
Examples:
● <header>: Defines a header for a document or section.
● <nav>: Defines navigation links.
● <article>: Defines an independent piece of content.
● <section>: Defines a section in a document.
● <footer>: Defines a footer for a document or section.
Q14. How do you optimize a website's performance?
Answer:
● Minimize HTTP requests by combining files.
● Use CSS sprites for images.
● Minify CSS, JavaScript, and HTML.
● Use asynchronous loading for JavaScript.
● Optimize images (compression, correct formats).
● Use browser caching.
● Use Content Delivery Networks (CDNs).
● Reduce server response time.
● Use lazy loading for images and videos.
● Avoid unnecessary plugins and heavy frameworks.
Q15. What is the difference between class and ID selectors in CSS?
Answer:
● ID selector (#id): Unique identifier for a single element on a page. Should be used
only once per page.
● Class selector (.class): Can be applied to multiple elements. Used for grouping
elements with similar styles.
Specificity of ID selectors is higher than class selectors.
Q16. Explain the concept of responsive web design.
Answer: Responsive web design ensures that web pages render well on a variety of
devices and window or screen sizes. It uses flexible grids, flexible images, and CSS
media queries to adapt the layout.
Q17. What is the difference between inline, inline-block, and block elements?
Answer:
● Inline: Elements do not start on a new line and only take up as much width as
necessary (e.g., <span>, <a>).
● Block: Elements start on a new line and take up the full width available (e.g.,
<div>, <p>).
● Inline-block: Behaves like inline elements but allows setting width and height.
Q18. How do you handle browser compatibility issues?
Answer:
● Use feature detection (e.g., Modernizr).
● Use CSS prefixes for experimental features.
● Use polyfills to add missing functionality.
● Test on multiple browsers.
● Use progressive enhancement and graceful degradation.
● Avoid deprecated or non-standard features.
Q19. What are media queries in CSS?
Answer: Media queries allow CSS to apply styles based on device characteristics like
screen width, height, resolution, orientation, etc.
Q20. Explain the difference between relative, absolute, fixed, and sticky positioning in
CSS.
Answer:
● Relative: Positioned relative to its normal position.
● Absolute: Positioned relative to the nearest positioned ancestor (not static).
● Fixed: Positioned relative to the viewport; stays in place during scrolling.
● Sticky: Toggles between relative and fixed depending on scroll position.
Q21. What is the purpose of the DOCTYPE declaration in HTML?
Answer: The DOCTYPE declaration tells the browser which version of HTML the page
is written in, ensuring proper rendering. For HTML5, it is:
<!DOCTYPE html>
Q22. How do you include JavaScript in a web page?
Answer:
● Inline within <script> tags in HTML.
● External JavaScript file linked with <script src="[Link]"></script>.
● Using defer or async attributes to control loading behavior.
Q23. What is the difference between == and === in JavaScript?
Answer:
● == compares values after type coercion.
● === compares both value and type (strict equality).
Example:
Q24. Explain event delegation in JavaScript.
Answer: Event delegation is a technique where a single event listener is added to a
parent element to manage events for its child elements, leveraging event bubbling. It
improves performance and simplifies code.
Q25. What are closures in JavaScript?
Answer: A closure is a function that remembers the environment in which it was
created, allowing it to access variables from its outer scope even after the outer function
has finished executing.
Q26. What is the difference between var, let, and const in JavaScript?
Answer:
● var: Function-scoped, can be redeclared and updated.
● let: Block-scoped, can be updated but not redeclared in the same scope.
● const: Block-scoped, cannot be updated or redeclared; must be initialized.
Q27. How do you prevent default behavior in JavaScript events?
Answer: Use the method [Link]() inside the event handler.
Q28. What is the DOM? How do you manipulate it?
Answer: The Document Object Model (DOM) is a programming interface for HTML and
XML documents. It represents the page so scripts can change the document structure,
style, and content.
Manipulation methods include:
● [Link]()
● [Link]()
● [Link]
● [Link]
● [Link]()
● [Link]()
Q29. Explain the difference between synchronous and asynchronous JavaScript.
Answer:
● Synchronous: Code executes line by line, blocking further execution until the
current task completes.
● Asynchronous: Code can execute without blocking, allowing other operations to
run while waiting for tasks like network requests.
Q30. What is AJAX? How does it work?
Answer: AJAX (Asynchronous JavaScript and XML) allows web pages to update
asynchronously by exchanging data with a server behind the scenes, without reloading
the whole page.
It uses XMLHttpRequest or the modern fetch API to send and receive data.
Q31. What are promises in JavaScript?
Answer: Promises represent the eventual completion (or failure) of an asynchronous
operation and its resulting value. They have three states: pending, fulfilled, or rejected.
Q32. What is the difference between null and undefined in JavaScript?
Answer:
● undefined: Variable declared but not assigned a value.
● null: Explicitly assigned to indicate "no value".
Q33. Explain the concept of RESTful APIs.
Answer: REST (Representational State Transfer) is an architectural style for designing
networked applications. RESTful APIs use HTTP requests to perform CRUD operations
on resources, typically using JSON.
Q34. What is CORS, and how do you handle it?
Answer: CORS (Cross-Origin Resource Sharing) is a security feature that restricts web
pages from making requests to a different domain than the one that served the web
page.
Handled by configuring server response headers like Access-Control-Allow-Origin.
Q35. What is the difference between GET and POST HTTP methods?
Answer:
● GET: Requests data from a server; parameters sent in URL; idempotent.
● POST: Sends data to a server; parameters sent in request body; used for
creating resources.
Q36. How do you secure a web application?
Answer:
● Use HTTPS.
● Validate and sanitize user inputs.
● Implement authentication and authorization.
● Protect against XSS, CSRF, and SQL injection.
● Use secure cookies.
● Keep software updated.
● Use Content Security Policy (CSP).
Q37. What is Cross-Site Scripting (XSS)?
Answer: XSS is a security vulnerability where attackers inject malicious scripts into
trusted websites, which execute in users' browsers.
Q38. What is Cross-Site Request Forgery (CSRF)?
Answer: CSRF is an attack that tricks a user into submitting unwanted actions on a
web application where they are authenticated.
Q39. Explain the concept of cookies and sessions.
Answer:
● Cookies: Small pieces of data stored on the client side.
● Sessions: Server-side storage of user data, identified by a session ID stored in a
cookie.
Q40. What is the difference between localStorage and sessionStorage?
Answer:
● localStorage: Data persists even after the browser is closed.
● sessionStorage: Data persists only for the duration of the page session.
Q41. What are web sockets?
Answer: WebSockets provide a full-duplex communication channel over a single TCP
connection, enabling real-time data transfer between client and server.
Q42. What is the difference between a library and a framework?
Answer:
● Library: Collection of functions you call to perform tasks.
● Framework: Provides a structure and calls your code (Inversion of Control).
Q43. What is React? How is it different from Angular or Vue?
Answer: React is a JavaScript library for building user interfaces using components and
a virtual DOM. Angular is a full-fledged framework, and Vue is a progressive framework.
React focuses on the view layer only.
Q44. Explain the virtual DOM.
Answer: The virtual DOM is a lightweight copy of the real DOM. React uses it to batch
updates and efficiently update the real DOM by diffing changes.
Q45. What is the purpose of WebPack or other module bundlers?
Answer: Module bundlers, such as Webpack, bundle JavaScript files and assets into
optimized bundles for deployment, supporting features like code splitting and hot
module replacement.
Q46. What is the difference between REST and GraphQL?
Answer:
● REST: Multiple endpoints for different resources; fixed data structure.
● GraphQL: Single endpoint; clients specify exactly what data they need.