40 HTML, CSS, and JavaScript Interview Questions and Answers

40 HTML, CSS, and JavaScript Interview Questions and Answers

If you're hiring for a front-end role, you already know that a resume full of buzzwords tells you almost nothing about whether someone can actually build a working page. That's why a solid list of css html javascript interview questions matters, whether you're a hiring manager screening candidates or a developer prepping for your next interview. Get the questions right and you separate people who understand the DOM, the box model, and closures from people who just memorized syntax.

This list covers 40 html css javascript interview questions and answers, ranging from beginner basics to the kind of scenario-based questions that trip up even experienced developers. We've grouped them by topic so you can quickly find what you need, whether you're building a technical screen from scratch or brushing up before a panel interview.

Recruiters running high-volume front-end hiring know that manual screening at this level doesn't scale, and it helps to understand how resume screening software actually parses a CV. That's where AI-powered video interviews and scored transcripts, like the ones you get with a free recruiter account that includes AI interviews and a full ATS, help you apply the same rigor across every candidate without spending hours per resume.

1. HTML fundamentals questions

Every technical screen should start here, because if a candidate can't explain what a tag is supposed to do beyond "it makes a box," the rest of the interview won't matter much. These foundational html css and javascript interview questions separate people who write markup out of habit from those who understand why browsers, screen readers, and search engines interpret structure the way they do. Use them early, before you move into layout or scripting, to weed out candidates who can't explain their own code.

What are semantic HTML elements and why do they matter?

Semantic elements are tags like <header>, <nav>, <main>, <article>, and <footer> that describe the meaning of the content they wrap, not just how it should look. A good candidate will explain that semantic markup gives screen readers and search engine crawlers a map of the page, so a visually impaired user navigating with a screen reader can jump straight to <nav> or <main> instead of wading through generic <div> soup. Semantics also make code easier for other developers to read six months later, which matters more than most junior candidates expect.

A page built entirely from <div> tags might look identical to a semantic one, but only one of them is usable by every visitor and every crawler.

What is the difference between div, section, and article?

This question exposes candidates who copy-paste layouts without thinking about document structure. A <div> is a generic, meaningless container used purely for styling or scripting hooks. A <section> groups related content that typically has its own heading, like a "Reviews" block on a product page. An <article> is content that could stand alone and be redistributed independently, such as a blog post or a news story, even if it's syndicated elsewhere. Strong candidates will point out that <section> and <article> can be nested inside each other depending on whether the content is thematically grouped or self-contained.

How do HTML5 and HTML4 differ?

HTML5 introduced native support for audio, video, and canvas rendering without relying on Flash or third-party plugins, along with semantic tags that replaced generic <div id="header"> patterns. It also added form input types like email and date, built-in client-side validation attributes, and APIs for offline storage and geolocation. According to the W3C's HTML5 specification, these changes were designed to reduce reliance on external scripts for common interactive behavior. The table below summarizes the practical differences a candidate should know cold.

2. HTML forms and accessibility questions

Forms are where accessibility either works or quietly fails, and interviewers who skip this topic miss a huge chunk of real-world front-end work. These interview questions on html css and javascript should confirm a candidate can build a form that's usable by keyboard-only users and screen readers, not just one that looks clean in a design mockup. If someone can't explain labels or validation attributes, they'll ship inaccessible forms without noticing.

What is the purpose of the label tag and how does it improve accessibility?

The <label> tag ties a text description to a specific form control using the for attribute, which must match the input's id. This connection means screen readers announce the label when the input receives focus, and clicking the label text itself activates the associated checkbox or radio button, a detail many candidates forget. Without proper labels, a screen reader user hears "edit text" with no context about what to type.

A form without labels might work visually, but it's invisible to anyone relying on assistive technology.

How do you validate a form using HTML5 attributes without JavaScript?

HTML5 gives you required, pattern, min, max, and input types like email and number that trigger built-in browser validation before submission. A strong candidate mentions that this reduces reliance on custom JavaScript validation for basic checks, though server-side validation remains non-negotiable since client-side rules can always be bypassed.

What is the difference between GET and POST in a form's method attribute?

GET appends form data to the URL as query parameters, making it visible, bookmarkable, and limited in length, which suits search forms. POST sends data in the request body, keeping it hidden from the URL and better suited for sensitive submissions like login forms or file uploads. Candidates should note that GET requests are cacheable and idempotent, while POST requests typically aren't.

3. HTML5 APIs and multimedia questions

Modern front-end roles expect candidates to handle media without reaching for third-party plugins, so these interview questions for html css and javascript check whether someone understands what the browser can do natively, which is exactly what you want to confirm before you hire vetted HTML5 developers in India. A candidate who still assumes you need Flash or a heavy library for video playback is behind the curve, and that gap shows up fast once you ask them to embed a simple audio clip.

How do you embed video and audio in HTML5?

HTML5 gives you native <video> and <audio> tags with attributes like controls, autoplay, and loop, removing the need for browser plugins entirely. A solid answer includes the <source> element for providing multiple file formats, since not every browser supports the same codec:

<video controls width="600">
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  Your browser doesn't support video.
</video>

Candidates should also mention the fallback text inside the tags, which displays only if the browser can't render the element at all.

What is the canvas element used for?

The <canvas> element gives JavaScript a blank drawing surface for rendering graphics, animations, and even game loops directly in the browser, pixel by pixel, using the Canvas API. Unlike an <img>, nothing appears until script draws on it, which is why candidates should be able to describe getting a rendering context with getContext('2d') before drawing shapes or images.

Canvas isn't a container for content, it's a blank surface that only shows what JavaScript tells it to draw.

How does the picture element support responsive images?

The <picture> element lets you serve different image files based on screen size, resolution, or format support, wrapping multiple <source> tags with a fallback <img>. This matters for responsive images because it cuts wasted bandwidth on mobile devices instead of forcing everyone to download a desktop-sized file, which strong candidates connect directly to page load performance.

4. CSS box model and specificity questions

Layout bugs almost always trace back to a misunderstanding of the box model or specificity rules, which is why these css html javascript interview questions show up in nearly every front-end screen. Candidates who can recite selector syntax but can't explain why one style overrides another will struggle the moment a real stylesheet grows past a few hundred lines. Use this section to test whether someone reasons about layout or just guesses and refreshes the browser until something looks right.

What is the CSS box model and how do its parts interact?

Every element renders as four nested boxes: content, padding, border, and margin, stacking from the inside out. Padding adds space inside the border, margin adds space outside it, and the box-sizing property decides whether width calculations include padding and border or ignore them. Good candidates mention that box-sizing: border-box is the modern default most teams reach for, since it keeps width predictable regardless of padding changes.

How is CSS specificity calculated?

Specificity is scored using four weighted categories, from inline styles at the top down to universal selectors at the bottom.

Higher scores win regardless of source order, and !important overrides everything except another !important rule with equal specificity.

Specificity isn't about which rule you wrote last, it's about which selector carries more weight.

What is margin collapsing and how does it differ from padding?

Margin collapsing happens when the vertical margins of adjacent block elements merge into a single margin equal to the larger of the two, rather than stacking. Padding never collapses, since it's part of the element's own box rather than the space between boxes. Strong candidates note that collapsing only affects vertical margins between block-level elements, not horizontal margins or flex/grid children.

5. CSS selectors and responsive design questions

Selectors and responsive units decide whether a candidate can write CSS that scales, or CSS that only works on the exact screen they tested on. These interview questions css html javascript cover the syntax someone should already have memorized, plus the reasoning behind why modern teams avoid fixed pixel values wherever they can.

What are the different types of CSS selectors?

CSS selectors range from simple element selectors like p to class selectors (.card), ID selectors (#header), attribute selectors ([type="text"]), and pseudo-classes like :hover or :nth-child(). Combinators matter too: a space means descendant, > means direct child, and + means adjacent sibling. Candidates who only know class and ID selectors usually haven't touched a large, maintained stylesheet where combinators keep specificity under control.

How do media queries enable responsive design?

Media queries apply CSS rules conditionally based on viewport width, height, orientation, or resolution, using syntax like @media (max-width: 768px) { ... }. A strong candidate explains mobile-first design, writing base styles for small screens first, then layering in min-width queries for larger breakpoints rather than the reverse. This approach, recommended in Google's web.dev responsive design guidance, avoids overriding desktop styles repeatedly.

Mobile-first isn't a trend, it's the difference between adding complexity as screens grow and stripping it away.

What is the difference between em, rem, and px units?

Pixels are fixed and don't scale with user font-size preferences, which hurts accessibility for users who increase browser text size. em units scale relative to the parent element's font size, which can compound unpredictably in nested components. rem scales relative to the root <html> font size, giving predictable, consistent scaling across a whole page, which is why most teams default to rem for typography and spacing.

6. CSS flexbox and grid layout questions

Layout questions separate candidates who memorized properties from those who actually reach for the right tool on the job. These html css js interview questions test whether someone can explain not just syntax but the reasoning behind choosing one layout system over another, which matters far more once a design gets complicated.

How does flexbox align and distribute items?

Flexbox arranges items along a single axis, either row or column, using a parent display: flex container. The justify-content property controls spacing along the main axis, while align-items controls positioning along the cross axis, and flex-wrap lets items drop to a new line instead of squeezing into one row. Strong candidates mention flex-grow, flex-shrink, and flex-basis together, since they control how individual items expand or shrink relative to their siblings.

When should you use CSS grid instead of flexbox?

Grid handles two-dimensional layouts, rows and columns simultaneously, while flexbox only manages one axis at a time. A candidate who reaches for grid on a full page layout with header, sidebar, and footer, then switches to flexbox for aligning icons inside a button, understands the distinction. Grid also supports named template areas, which make complex layouts far more readable than nested flex containers.

Flexbox arranges a line of items, grid arranges an entire page.

How do you center an element vertically and horizontally with CSS?

The cleanest modern approach uses flexbox on the parent:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Grid works just as well with place-items: center. Older candidates might mention absolute positioning with negative margins or transform: translate(-50%, -50%), which still works but requires more code for the same result.

7. CSS preprocessors and architecture questions

As stylesheets grow past a few dozen components, raw CSS starts to buckle under duplication and specificity wars. These interview questions on css html and javascript check whether a candidate has ever worked on a codebase big enough to need structure, or whether they've only ever styled small, single-page projects.

What are the benefits of using Sass or Less?

Preprocessors add variables, nesting, mixins, and functions on top of plain CSS, then compile down to standard stylesheets browsers can read. A candidate should explain that Sass variables let you define a color or spacing value once and reuse it everywhere, so a rebrand means editing one line instead of hunting through hundreds. Nesting also mirrors HTML structure, which keeps related selectors grouped instead of scattered across a file.

What is object-oriented CSS and the BEM methodology?

BEM stands for Block, Element, Modifier, a naming convention that keeps class names predictable and specificity flat:

.card {}
.card__title {}
.card--featured {}

Object-oriented CSS applies similar thinking, separating structure from skin so a .button class controls layout while a modifier controls color. Strong candidates mention that BEM avoids the specificity battles nested selectors create, since every class carries roughly the same weight.

Naming conventions like BEM aren't about style, they're about making sure two developers never fight the same selector by accident.

How do CSS custom properties differ from preprocessor variables?

Custom properties, written as --primary-color: #333;, live in the browser itself and can be read or changed at runtime with JavaScript, unlike Sass variables which only exist at compile time. This makes custom properties ideal for theme switching, like toggling dark mode, since you update one value and every element referencing it updates instantly without recompiling anything.

8. JavaScript variables and data type questions

Once a candidate moves past markup and styling, JavaScript questions reveal whether they actually understand how the language behaves under the hood or just copy patterns from tutorials. These javascript html css interview questions on variables and types catch subtle bugs before they ship, since scoping mistakes and type confusion cause more production incidents than almost anything else in front-end code, and you can pair them with entry-level JavaScript questions for junior candidates.

How do var, let, and const differ?

var is function-scoped and gets hoisted with a default value of undefined, which is why it can be referenced before its declaration line without throwing an error. let and const are block-scoped, meaning they only exist inside the nearest {}, and both sit in a temporal dead zone until their declaration runs, so accessing them early throws a ReferenceError instead of silently returning undefined. const prevents reassignment of the variable binding itself, though it doesn't freeze the contents of an object or array assigned to it, a distinction candidates often get wrong.

What are the primitive and non-primitive data types in JavaScript?

JavaScript has seven primitive types, and everything else counts as an object, a split worth reviewing alongside a full breakdown of how strings, numbers, booleans, and arrays behave in JavaScript.

Primitives are compared by value and stored directly, while objects are compared by reference, so two arrays with identical contents still aren't equal with ===. Strong candidates bring up typeof quirks here too, especially that typeof null returns "object" due to a long-standing language bug.

What is the difference between null and undefined?

undefined means a variable was declared but never assigned a value, while null is an intentional assignment representing "no value." A function that doesn't explicitly return anything gives back undefined, whereas a developer sets null deliberately to signal emptiness.

undefined means nobody assigned a value yet; null means someone assigned emptiness on purpose.

9. JavaScript functions, scope, and closure questions

Closures trip up more mid-level candidates than any other JavaScript concept, mostly because they can use them without understanding why they work, which is why they sit at the heart of most JavaScript questions written for the intermediate level. These html css and javascript interview questions and answers on functions and scope tell you whether someone actually reasons about execution context or just pattern-matches code they've seen before. If a candidate can explain hoisting and closures in plain language without stumbling, they've probably debugged real production issues, and you can follow up with JavaScript coding challenges they have to solve live.

What is a closure and why is it useful?

A closure forms when a function retains access to variables from its outer scope even after that outer function has finished running. This lets you build private state without classes, like a counter function that increments a variable no outside code can touch directly. Strong candidates mention practical uses: memoization, event handler factories, and module patterns that predate ES6 modules all lean on closures to keep data encapsulated.

A closure remembers where it came from, even after the function that created it has already returned.

How does hoisting affect variable and function declarations?

JavaScript moves declarations to the top of their scope during compilation, but only the declaration, not the assignment. Function declarations hoist completely, meaning you can call one before it appears in the file, while var variables hoist as undefined and let/const sit in the temporal dead zone until their line executes. Candidates who mix this up usually explain hoisting as

10. JavaScript objects, prototypes, and class questions

Objects sit at the center of nearly everything in JavaScript, so interviewers use this topic to check whether a candidate understands the mechanics underneath the syntax sugar. These interview questions in html css and javascript move past basic types and into how JavaScript actually models inheritance, which is different enough from classical OOP concepts like encapsulation and polymorphism that even experienced developers coming from Java or C# stumble here.

How does prototypal inheritance work?

Every object in JavaScript holds an internal link to another object called its prototype, and property lookups walk up this chain until they find a match or hit null. Unlike classical inheritance, where a class blueprint defines behavior once, prototypal inheritance lets objects share behavior directly through live references, so changing a method on a prototype instantly affects every object linked to it. Strong candidates mention Object.create() as the cleanest way to set up this link explicitly, rather than relying on constructor functions alone.

Prototypal inheritance isn't about copying behavior into every object, it's about pointing to a shared object further up the chain.

What is the difference between ES5 constructor functions and ES6 classes?

ES6 class syntax is largely syntactic sugar over the same prototype mechanism ES5 constructor functions used, but it adds cleaner syntax for inheritance through extends and super, plus stricter behavior like throwing an error if you call a class without new, a distinction that shows up constantly in deeper JavaScript interviews for senior hires. Constructor functions require manually wiring up Prototype.constructor and prototype chains, which classes handle automatically behind the scenes.

What are the different ways to create objects in JavaScript?

Candidates should be able to list several approaches without hesitation:

• Object literals: { key: value }
• Constructor functions with new
• Object.create() for explicit prototype linking
• ES6 classes
• Factory functions that return plain objects

Each approach trades off readability and control differently, and a candidate who only knows object literals hasn't worked on anything requiring reusable, structured object creation.

11. JavaScript asynchronous programming questions

Asynchronous behavior separates candidates who understand JavaScript's single-threaded nature from those who just chain .then() calls without knowing why anything works. These interview questions on css html and javascript get grouped under async more than any other topic because most production bugs trace back to race conditions, unhandled promise rejections, or code that assumed a network call would finish instantly, and the same ground gets covered in 30 advanced JavaScript questions on async behavior and internals.

What is the event loop and how does it manage async code?

JavaScript runs on a single thread, so the event loop manages everything else by checking whether the call stack is empty, then pulling tasks from the microtask queue (promises) before the macrotask queue (setTimeout, DOM events). This ordering explains why a resolved promise callback runs before a setTimeout(fn, 0) callback, even when both get scheduled at the same moment, a detail documented in MDN's event loop guide.

The event loop doesn't make JavaScript multithreaded, it just decides what runs next once the current task finishes.

How do promises and async/await simplify asynchronous JavaScript?

Promises wrap an eventual value in one of three states, pending, fulfilled, or rejected, replacing nested callback pyramids with chainable .then() and .catch() calls. async/await is syntactic sugar over promises, letting a candidate write asynchronous logic that reads top to bottom, with try/catch handling errors the way synchronous code would.

What is the difference between synchronous and asynchronous functions?

Synchronous functions block execution, meaning each line waits for the previous one to finish before running, which freezes the browser during long operations. Asynchronous functions hand off work, like a fetch request, and let the rest of the script continue, only returning to handle the result once it's ready. Candidates who confuse the two usually write code that blocks the UI thread without realizing why the page froze.

12. JavaScript DOM and event handling questions

DOM manipulation is where JavaScript actually touches what the user sees, and interviewers use this topic to check whether a candidate writes efficient event handling or bolts a listener onto every single element and hopes performance holds up. These html/css javascript interview questions matter most for roles building data tables, dynamic lists, or anything with dozens of clickable rows, since naive event binding falls apart fast at scale.

What is event delegation and why is it efficient?

Event delegation attaches a single listener to a parent element instead of binding one to every child, then relies on event.target to figure out which child actually triggered the event. This matters enormously for lists that grow or shrink dynamically, since a delegated listener automatically covers new elements added later, while individually bound listeners would need to be reattached every time. Strong candidates mention that delegation also cuts memory usage, since one listener on a parent costs far less than a thousand listeners on a thousand rows.

One listener on a parent element can do the job of a thousand listeners scattered across its children.

How do event bubbling and event capturing differ?

Bubbling means an event fires on the deepest target first, then travels upward through each ancestor, which is the default behavior in most browsers and the mechanism that makes delegation possible. Capturing runs the opposite direction, from the outermost ancestor down to the target, and only triggers when a listener explicitly passes { capture: true } as an option. Candidates should note that stopPropagation() halts this travel in either direction, which matters when nested elements shouldn't both react to the same click.

What is the difference between mouseenter and mouseover events?

mouseover fires every time the cursor crosses into an element or any of its children, which can trigger repeatedly during a single hover if the element contains nested content. mouseenter fires only once, when the cursor first enters the element's boundary, and ignores movement between child elements entirely. Teams building hover-based tooltips or dropdown menus almost always reach for mouseenter to avoid the flickering caused by repeated mouseover firing.

13. Browser storage, performance, and security questions

Senior candidates need to talk fluently about where data lives in the browser and how careless code opens the door to attackers. This final set of html css javascript interview questions and answers for experienced developers checks whether someone has actually shipped production code, not just built weekend projects, since real users trigger performance and security issues far more often than tutorial examples ever do.

How do cookies, localStorage, and sessionStorage differ?

Browsers offer three main ways to persist client-side data, and each behaves differently enough to matter for real applications.

Candidates should mention that cookies get attached to every HTTP request automatically, which makes them useful for authentication tokens but wasteful for large data, while localStorage and sessionStorage stay entirely client-side and never touch the network.

What is the difference between reflow and repaint?

Reflow recalculates layout, positions, and dimensions across the page whenever something changes size or moves, like adding a new element or resizing a window. Repaint only redraws pixels, such as changing a background color, without touching layout at all, which makes it far cheaper for the browser to handle. Good candidates explain that batching DOM changes together, rather than triggering reflow repeatedly inside a loop, keeps scrolling and animations smooth on lower-powered devices.

How do you prevent security risks like XSS when using innerHTML?

Setting innerHTML with unsanitized user input lets attackers inject scripts that execute inside a victim's browser, a classic cross-site scripting attack documented in OWASP's XSS prevention guide. Safer alternatives include textContent for plain text output, or a sanitizing library when rendering actual HTML from users is unavoidable.

The moment unsanitized user input reaches innerHTML, you've handed control of the page to whoever typed it.

Preparing for interview day

Running through 40 css html javascript interview questions won't guarantee a perfect hire, but it does mean you're testing for understanding instead of memorization. Candidates who can explain the box model in their own words, walk through a closure without stumbling, or tell you why they'd reach for grid over flexbox on a given layout are the ones who've actually built things, not just studied for a test. Treat this list as a starting point, then adapt the depth using our wider collection of technical interview guides by language and role, based on whether you're screening a junior developer or someone with five years of production experience.

Once you know which questions matter for your role, the harder part is scaling that same rigor across dozens of resumes without burning a week of your week. If you're hiring for React, Node.js, or SQL-heavy front-end roles, you can browse verified front-end developer profiles screened for HTML, CSS, and JavaScript and shortlist faster than any manual review ever could.

For engineers

Find work worth your time.

Live engineering roles across India and the US, matched to your stack. Build a profile recruiters actually discover.

Browse jobsHow it works