Common Front-End Interview Questions on HTML, CSS, and JavaScript
The article presents a curated list of front‑end interview questions spanning HTML, CSS, JavaScript, and related topics, offering concise prompts on standards, browser behavior, performance, security, and development practices for candidates and interviewers alike.
This article compiles a comprehensive set of front‑end interview questions covering HTML, CSS, JavaScript, and related topics, useful for both interviewers and candidates.
HTML Questions
Doctype purpose? How to distinguish strict mode from quirks mode and what is their significance?
Why does HTML5 only require writing <!DOCTYPE HTML> ?
What are inline elements, block‑level elements, and void elements?
Difference between using link and @import for importing styles?
Explain your understanding of browser engines.
What are the common browser engines?
What new features does HTML5 introduce and which elements are removed? How to handle compatibility for new HTML5 tags?
How to differentiate HTML from HTML5?
What is your understanding of HTML semantics?
How does HTML5 offline storage work and what is its underlying principle?
How does the browser manage and load offline storage resources?
Describe the differences between cookies, sessionStorage , and localStorage .
What are the drawbacks of using iframe ?
What is the purpose of the label element and how should it be used (with for attribute or wrapping)?
How to disable autocomplete for HTML5 forms?
How to achieve communication between multiple tabs in a browser? (Alibaba)
How to make WebSocket compatible with older browsers? (Alibaba)
What are the possible uses of the Page Visibility API?
How to create a clickable circular area on a page?
Implement a 1px high line without using border that looks consistent in both Quirks mode and CSS‑compatible mode across browsers.
What is the purpose of web page captchas and what security problem do they solve?
Differences between title and h1 , b and strong , i and em ?
CSS Questions
Explain the standard CSS box model and how it differs from the box model in older versions of IE.
What CSS selectors exist and which properties are inheritable?
How is the CSS specificity algorithm calculated?
What new pseudo‑classes were added in CSS3?
Methods to center a div , a floated element, or an absolutely positioned div .
List possible values of display and describe their effects.
What are the origins for relative and absolute positioning?
What new features does CSS3 provide?
Explain CSS3 Flexbox (flexible box layout) and its typical use cases.
How to create a triangle using pure CSS?
Design a full‑screen “puzzle” layout.
Common compatibility issues and their solutions.
Why does a gap appear between li elements and how to fix it?
Typical browser compatibility problems, their causes, and common hacks.
Why initialize CSS styles?
How does the containing block calculation for absolute differ from normal flow?
What does the visibility: collapse value do across browsers?
Interaction effects when combining position , display , margin‑collapse , overflow , and float .
Understanding Block Formatting Context (BFC).
How CSS weight (specificity) is computed.
When and how to clear floats.
Use of media queries for mobile layouts.
Experience with CSS preprocessors and preferences.
Methods to optimize CSS performance.
How browsers parse CSS selectors.
Choosing odd vs. even fonts and the reasoning.
When to use margin vs. padding .
Approach to modularizing styles (e.g., component extraction).
Is a vertical percentage height relative to the container’s height?
Principle behind full‑screen scrolling and related CSS properties.
What is responsive design, its core principles, and IE compatibility strategies?
Parallax scrolling effects and page‑specific animations.
Difference between single and double colon syntax for ::before and ::after .
How to remove the yellow background that Chrome adds to autofilled form fields.
Understanding of line-height .
What display value an element gets after being floated (it becomes block ).
How to make Chrome render text smaller than 12px.
Techniques to make fonts appear clearer and thinner (e.g., -webkit-font-smoothing: antialiased ).
Meaning of the oblique value for font-style .
Why position:fixed may not work on Android and how to fix it.
Minimum interval for manual animation frames and the reasoning (Alibaba).
When does display:inline-block show gaps?
Handling non‑smooth scrolling when overflow: scroll is used.
Layout where one child fills remaining height of a container.
Differences between image formats (png, jpg, gif, webp) and appropriate use cases.
What is cookie isolation and how to prevent cookies from being sent with resource requests.
Effect of placing style tags before vs. after body .
JavaScript Questions
Basic data types in JavaScript.
Fundamental JavaScript coding standards.
Prototype and prototype chain characteristics.
Types of values (primitive vs. reference) and memory diagram.
How to implement inheritance in JavaScript.
Various ways to create objects.
Scope chain explanation.
Understanding of the this object.
Purpose of eval .
Difference between window and document objects.
Difference between null and undefined .
Write a generic event listener function (coding test).
Result of ["1", "2", "3"].map(parseInt) ?
Event model differences between IE and Firefox and how to stop propagation.
What is a closure and why use it?
Meaning of "use strict" and its effects.
How to determine if an object belongs to a particular class.
What does the new operator actually do?
Examples of functionality built with vanilla JavaScript.
Function that never looks up the prototype chain (e.g., Object.create(null) ).
Understanding of JSON.
Explain the following code: [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
Methods for lazy‑loading JavaScript.
What is Ajax and how to create one?
Difference between synchronous and asynchronous execution.
How to solve cross‑origin issues.
Handling mismatched page and resource encodings.
Approaches to modular development.
Differences between AMD and CMD specifications.
Core principles of RequireJS (dynamic loading, deduplication, caching).
Design a custom RequireJS implementation.
Understanding of ECMAScript 6.
Why ES6 introduced class syntax.
Various asynchronous loading techniques.
Difference between document.write and innerHTML .
DOM operations: add, remove, move, copy, create, find nodes.
Difference between .call() and .apply() .
Native array and object methods.
How to implement a class in JavaScript and instantiate it.
Scope and hoisting in JavaScript.
Techniques for writing high‑performance JavaScript.
Common causes of memory leaks.
Overview of jQuery source and implementation principles.
What does jQuery.fn.init return and why it returns this ?
How to convert an array to JSON string and back with jQuery.
Implementation of jQuery.extend and deep copy.
Difference between jQuery.extend and jQuery.fn.extend .
How jQuery implements queues and typical use cases.
Differences among bind() , live() , delegate() , on() .
How jQuery allows multiple events on a single object.
Custom events in jQuery and the purpose of the fire function.
Which method connects jQuery with the Sizzle selector engine ( jQuery.fn.find() ).
Performance optimization techniques for jQuery.
Differences between jQuery and jQuery UI.
Differences between jQuery and Zepto and their use cases.
How to solve the “click‑through” issue in Zepto.
How to customize components in jQuery UI.
Design a single‑page application that handles browser forward/back navigation correctly.
Detect whether the script runs in a browser or Node environment (Alibaba).
Minimum touch target size on mobile devices.
Handling rapid consecutive events that cause jQuery slideUp lag.
Difference in parsing when a script tag is placed before or after the closing body tag.
Why mobile click events have a 300 ms delay and how to eliminate it.
Knowledge of major JavaScript frameworks (Angular, Backbone, Ember, React, Meteor, Knockout) and their pros/cons.
Underscore.js extensions and useful utility functions.
Explanation of scope and variable hoisting in JavaScript.
Operations that cause memory leaks.
Node.js suitable scenarios.
Familiarity with routing, middleware, clustering, nodemon, pm2, and server‑side rendering in Node.
How Backbone implements MVC.
What is front‑end routing, when to use it, and its advantages/disadvantages.
Understanding of WebKit and browser debugging tools.
Testing front‑end code (BDD, TDD, unit testing with Mocha, Sinon, Jasmine, QUnit).
Front‑end templating engines (Mustache, Underscore, Handlebars) and their usage.
Basic usage of Handlebars.
How Handlebars processes and caches templates.
Implement thousand‑separator formatting in JavaScript using regex and replace.
Methods to detect browser versions.
Event order when both capture and bubble listeners are attached to the same element.
Other Topics
Typical company workflow and cross‑department collaboration.
Challenging technical problems you have faced and how you solved them.
Design patterns such as Singleton, Factory, Strategy, Decorator.
Commonly used libraries, front‑end tools, and projects you have built.
Approach to page refactoring.
Unique features of IE compared to other browsers.
Reference to the claim that 99 % of websites need refactoring.
Concepts of graceful degradation and progressive enhancement.
Understanding of public‑key and private‑key encryption.
Server‑to‑client data push techniques (e.g., WebSocket, Server‑Sent Events, long polling).
Pros and cons of Node.js.
Front‑end performance optimization methods you have used.
HTTP status codes and their meanings.
Detailed page load process from URL entry to full rendering.
Possible reasons for a website feeling slow in certain regions and mitigation strategies.
Steps to diagnose and improve slow app startup and rendering.
Other technical skills beyond front‑end and your strongest expertise.
Preferred editors and development environments.
Understanding of the front‑end engineer role and its future prospects.
Views on Web App, hybrid App, and Native App.
Differences between mobile front‑end development and traditional web front‑end.
Opinions on overtime work.
Project management practices.
Current popular technologies and frequently visited websites.
Designing architecture for massive concurrent traffic.
Knowledge of open‑source tools like Bower, npm, Yeoman, Grunt, Gulp and essential fields in package.json .
Maintaining simple module code structure and clear relationships as a project grows.
Understanding of Git concepts: branch, diff, merge.
Approach to front‑end testing under tight deadlines.
SEO basics and meta‑data meanings.
Improving user experience on mobile (Android/iOS).
Brief description of your mobile app development process.
Your role and impact within the current team.
Definition of a full‑stack developer.
Showcase of your most proud project.
Personal technical blog and technologies used.
Thoughts on front‑end security.
Understanding of web injection attacks, especially XSS and CSRF.
Memorable technical challenges in projects and their solutions.
Current learning pursuits and future 3‑5 year plans.
Self‑assessment of strengths and weaknesses.
Managing a front‑end team.
Architecture Digest
Focusing on Java backend development, covering application architecture from top-tier internet companies (high availability, high performance, high stability), big data, machine learning, Java architecture, and other popular fields.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.