Web Development Interview Questions and Answers
HTML Interview Questions
Q: What is HTML?
A: HTML (HyperText Markup Language) is the standard language used to create and structure content on the
web.
Q: What does DOCTYPE mean in HTML?
A: It declares the version of HTML and helps the browser render the page correctly.
Q: Explain the purpose of the <meta> tag.
A: Provides metadata such as character encoding, viewport, and SEO info.
Q: What is the difference between HTML and XHTML?
A: HTML is lenient; XHTML is strict and XML-based.
Q: What is semantic HTML?
A: It uses tags that convey the meaning of the content (e.g., <article>, <header>).
Q: Describe the difference between <div> and <span>.
A: <div> is block-level; <span> is inline-level.
Q: Explain the use of the <canvas> element.
A: Used to draw graphics via JavaScript.
Q: What are data attributes in HTML5?
A: Custom data storage using data-* attributes.
Q: What is the purpose of the alt attribute in the <img> tag?
A: Provides alternative text for accessibility.
Q: How do you create a hyperlink in HTML?
A: Use the <a> tag with href attribute.
Web Development Interview Questions and Answers
Q: What is the purpose of the <head> tag in HTML?
A: Contains metadata and links to resources.
Q: Explain the difference between <ol> and <ul> elements.
A: <ol>: ordered list, <ul>: unordered list.
Q: What is the significance of the lang attribute in HTML?
A: Specifies document language for SEO and accessibility.
Q: What is the purpose of the <form> element in HTML?
A: Used to collect and send user input to a server.
Q: How does the target attribute work in HTML forms?
A: Specifies where to display the form response (_self, _blank, etc.).
CSS Interview Questions
Q: What is CSS and what does it stand for?
A: CSS stands for Cascading Style Sheets, used to style HTML elements.
Q: Explain the difference between inline, block, and inline-block elements.
A: Inline: no line break; Block: full width; Inline-block: behaves like inline but accepts width/height.
Q: Describe the box model in CSS.
A: Includes content, padding, border, and margin.
Q: What is the purpose of the clear property in CSS?
A: Prevents elements from wrapping around floated elements.
Q: Explain the difference between position: relative; and position: absolute;.
A: Relative: positioned relative to its normal position; Absolute: positioned relative to nearest positioned
ancestor.
Web Development Interview Questions and Answers
Q: What is the CSS selector specificity and how is it calculated?
A: It's the priority rules of selectors; calculated based on inline styles, IDs, classes, and elements.
Q: How can you center an element horizontally and vertically using CSS?
A: Use flexbox or position + transform techniques.
Q: Explain the purpose of the float property in CSS.
A: Used to float elements left or right, wrapping content around it.
Q: Describe the difference between padding and margin.
A: Padding is inside the border; margin is outside the border.
Q: How does the display: none; property differ from visibility: hidden;?
A: Display: none removes element; visibility: hidden hides it but keeps space.
Q: What is a CSS preprocessor, and why might you use one?
A: Tools like SASS/LESS that extend CSS with variables, nesting, etc.
Q: What is the 'box-sizing' property in CSS?
A: Controls box model calculation: 'content-box' vs 'border-box'.
Q: How do you include external stylesheets in HTML?
A: Use <link rel='stylesheet' href='style.css'> in <head>.
Q: What is the difference between em and rem units in CSS?
A: em is relative to parent; rem is relative to root.
Q: How does the z-index property work in CSS?
A: Controls stacking order of elements along the z-axis.
JavaScript Interview Questions
Q: What is JavaScript?
Web Development Interview Questions and Answers
A: JavaScript is a high-level, dynamic programming language used to make web pages interactive.
Q: Explain the difference between let, const, and var in JavaScript.
A: var is function-scoped; let and const are block-scoped. const is immutable.
Q: Describe hoisting in JavaScript.
A: Variables/functions are moved to the top of their scope before code execution.
Q: What is the purpose of the this keyword in JavaScript?
A: Refers to the object it's called on, depends on context.
Q: What are closures in JavaScript?
A: A closure is a function with access to its outer function's scope even after the outer function has returned.
Q: Explain the concept of prototypal inheritance in JavaScript.
A: Objects can inherit properties from other objects via prototypes.
Q: How does event delegation work in JavaScript?
A: Events bubble up the DOM tree, so handlers can be placed on a parent.
Q: Describe the difference between == and === in JavaScript.
A: == checks value only; === checks value and type.
Q: What is the purpose of the async keyword in JavaScript?
A: Defines an asynchronous function that returns a Promise.
Q: How do you handle errors in JavaScript?
A: Using try...catch blocks or .catch() in Promises.
Q: Explain the concept of callback functions.
A: Functions passed as arguments to be called later.
Web Development Interview Questions and Answers
Q: What is the difference between null and undefined in JavaScript?
A: null is intentional absence; undefined is lack of assignment.
Q: Describe the role of the bind method in JavaScript.
A: Creates a new function with a specified this value.
Q: What is the purpose of the map function in JavaScript?
A: Creates a new array by applying a function to each element.
Q: Explain the concept of promises in JavaScript.
A: An object representing a future completion/failure of an async task.
Q: What is the event loop in JavaScript?
A: Handles asynchronous callbacks by putting them in a queue and executing them sequentially.
Q: Describe the difference between null, undefined, and undeclared in JavaScript.
A: null: value is empty, undefined: variable declared but not assigned, undeclared: variable not declared.
Q: How do you create an object in JavaScript?
A: Using object literal: let obj = { key: 'value' }.
Q: Explain the purpose of the localStorage and sessionStorage objects.
A: Store data in browser (local: persistent, session: per tab).
Q: How does the typeof operator work in JavaScript?
A: Returns a string indicating the type of the operand.
