Essential Front‑End Interview Q&A: HTML, CSS, JavaScript, Ajax & jQuery

HTML & CSS

1. Talk about your understanding of web standards.

Web standards ensure consistent rendering across browsers and devices by following W3C specifications.

2. List at least three HTML entities.

  < > ® © (see W3Schools for more).

3. Difference between cellpadding and cellspacing ?

cellpadding

defines the space between cell border and content; cellspacing defines the space between adjacent cells.

4. What CSS selectors exist? Which properties inherit? How is specificity calculated? New CSS3 pseudo‑classes?

Selectors: id ( #myid), class ( .myclassname), tag ( div), adjacent ( h1 + p), child ( ul > li), descendant ( li a), universal ( *), attribute ( a[rel="external"]), pseudo‑class ( a:hover, li:nth-child). Inherited: font-size, font-family, color, etc. Non‑inherited: border, padding, margin, width, height. Specificity order: !important > id > class > tag. CSS3 pseudo‑classes include p:first-of-type, p:last-of-type, p:only-of-type, p:only-child, p:nth-child(2), :enabled, :disabled, :checked.

5. Differences between display and visibility ?

display:none

removes the element and its space; visibility:hidden hides the element but preserves its layout space.

6. How to achieve absolute positioning?

Use position:absolute with appropriate top, left, etc., relative to the nearest positioned ancestor.

7. Purpose of table-layout and border-collapse ?

table-layout

controls automatic column width calculation; border-collapse determines whether cell borders are collapsed into a single border.

8. Briefly describe the box model.

Content, padding, border, and margin define an element’s total size.

9. Uses of target attribute values (_top, _parent, _blank, etc.).

Controls where linked documents open (same window, parent frame, new tab, etc.).

10. How do you handle browser compatibility?

Use feature detection, vendor prefixes, polyfills, and test across major browsers.

11. Difference between GET and POST?

GET appends parameters to the URL, limited length, suitable for data retrieval; POST sends data in the request body, no length limit, suitable for modifications.

12. Differences between XHTML and HTML?

XHTML is XML‑based, requires well‑formed markup, lowercase tags, and a root element; HTML is more forgiving.

13. Inline, block‑level, and void elements? Differences?

Block: div, p, h1, ul, ol, dl, dt, dd. Inline: a, b, br, i, span, input, select, img, strong. Void:

<br>, <hr>, <img>, <input>, <link>, <meta>

(plus less common void tags). Inline elements flow horizontally and cannot contain block elements; block elements start on a new line.

14. Ways to include CSS and differences between link and @import ?

Inline, embedded, external ( link), and @import. link is an HTML tag loaded with the page; @import is a CSS rule loaded after the CSS file, with older browser support issues.

15. Browsers you have tested and their rendering engines?

IE (Trident), Firefox (Gecko), Chrome (WebKit/Blink), Opera (Blink). Rendering engine parses HTML/CSS; JavaScript engine executes scripts.

16. Explain CSS sprites and when to use them.

Combine multiple small images into one large image to reduce HTTP requests; suitable for static, small, frequently used graphics.

17. Methods to clear floats and their pros/cons.

Set parent height, add empty clearing div, use :after with zoom, set overflow:hidden or auto, make parent float with width, use display:table, or add br with clear:both. The :after method is widely preferred.

18. Role of DOCTYPE and differences between standards and quirks mode.

DOCTYPE tells the browser which parsing mode to use; missing or incorrect DOCTYPE triggers quirks mode, which emulates legacy behavior. Standards mode follows modern specifications.

19. Drawbacks of iframe ?

Blocks onload events, hampers SEO, shares connection pool, can affect parallel loading.

20. How to enable communication between multiple browser tabs?

Use WebSocket, SharedWorker, or storage events from localStorage / sessionStorage.

21. Implement a clickable circular area on a page.

Use map + area, SVG, border-radius, or JavaScript geometry calculations.

HTML5

1. Advantages of HTML5 over HTML4 and handling new tag compatibility.

HTML5 introduces semantic elements, multimedia tags, and APIs. For older browsers, create elements via document.createElement or use polyfills like html5shiv.

JavaScript

1. How to trigger page navigation and include external JS?

Use window.location.href = 'url' or location.assign(). Include external scripts with <script src="..."></script> in <head> or before </body> .

2. Event for input validation?

Use the change event.

3. Difference between undefined and null ?

null

is an object representing “no value”; converting to number yields 0. undefined is a primitive indicating an uninitialized variable; converting to number yields NaN.

4. Difference between === and == ?

===

checks both type and value; == performs type coercion before comparison.

5. How to test if a variable is a number and detect its type?

Use isNaN() for numeric check; typeof and instanceof for type detection.

6. What are BOM and DOM? Your understanding of DOM?

DOM represents the document structure; BOM provides browser-specific objects like window, navigator, etc.

7. Uses of Array methods join , push , splice , slice and differences between splice and slice .

join

concatenates elements; push adds to the end; splice modifies the original array; slice returns a new array.

8. How to prevent form submission?

Return false from the onsubmit handler.

9. Dynamically manipulate tables?

Use DOM methods like insertRow, deleteRow, insertCell, deleteCell.

10. Difference between String.match and RegExp.exec ?

match

returns matches (first or all with global flag); exec can be used iteratively to retrieve all matches.

11. Write a regex to validate a mobile phone number.

/^1[3-9]\d{9}$/

(example for Chinese mobile numbers).

12. Purpose of i and g flags in regex?

i

– case‑insensitive; g – global search.

13. Add trim() to String prototype.

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); };

14. Overview of cookies and how to handle them in JS.

Cookies store small key‑value pairs; use document.cookie to read/write.

15. Explain Array.sort() and its comparator.

Sorts array elements; comparator function determines order (negative, zero, positive).

16. Differences among innerHTML , outerHTML , innerText .

innerHTML

returns HTML inside an element; outerHTML includes the element itself; innerText returns plain text.

17. How to repeatedly call a function foo() ?

Use setInterval(foo, interval) or setTimeout recursively.

18. Difference between setTimeout and setInterval .

setTimeout

executes once after delay; setInterval repeats execution at fixed intervals.

19. Adding elements to an array.

push()

adds to the end; unshift() adds to the beginning; splice() can insert at any index.

20. Pros and cons of JavaScript.

Pros: easy to learn, no compilation, rich built‑in objects. Cons: not ideal for large‑scale applications.

21. Built‑in JavaScript objects?

Math

and the global window object.

22. List native JavaScript objects.

Object, Function, Array, String, Boolean, Number, Date, RegExp, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError.

23. Types returned by typeof .

"object", "number", "function", "boolean", "undefined", "string".

24. Three explicit and two implicit type conversions.

Explicit: parseInt, parseFloat, Number. Implicit: ==, ===.

25. Differences between IE and DOM event flow.

Execution order, parameter differences, presence of "on" prefix, and this binding.

26. Difference between event binding and ordinary events.

Event binding attaches handlers to DOM elements; ordinary events are not tied to specific elements.

27. What is event delegation?

Leverage bubbling so a parent handles events for its children.

28. What is a closure? Characteristics and impact on pages.

A closure is a function retaining access to its lexical scope. Characteristics: encapsulation and persistence. Excessive closures can cause memory leaks.

29. Distinguish local, built‑in, and host objects.

Local: can be instantiated (Array, Object). Built‑in: provided by the language (Math, JSON). Host: supplied by the environment (window, document).

30. Write an array deduplication method.

Create a result array and a lookup object; iterate, add unseen items to result and mark them in the object.

31. Understanding of the this object.

this

points to the caller, the new instance when using new, or the event target in handlers.

32. What does eval do?

Evaluates a string as JavaScript code; generally discouraged due to security and performance concerns.

33. What does the new operator do?

Creates an empty object, sets its prototype, binds this to it, and returns the object.

34. Difference and usage of call() and apply() .

apply

takes an array of arguments; call takes arguments individually.

35. How to obtain the User Agent string?

Use navigator.userAgent.

36. Explain the same‑origin policy.

Scripts can only access resources from the same protocol, host, and port; it protects against cross‑site data theft.

37. Differences among cookies, sessionStorage , and localStorage .

Cookies are sent with each HTTP request; sessionStorage persists per tab session; localStorage persists across sessions with larger capacity.

Ajax

1. What is Ajax?

Asynchronous JavaScript and XML – a technique for asynchronous page updates.

2. How to fetch data with Ajax?

Create an XMLHttpRequest, open with method/URL/async flag, set headers if needed, send, and handle onreadystatechange when readyState===4 and status===200.

3. Explain XMLHttpRequest .

Browser object enabling asynchronous HTTP requests; originally ActiveX in IE5, now native in modern browsers.

4. Your understanding of Ajax and a simple example.

Ajax improves UX by loading data without full page refresh; a basic example involves creating XMLHttpRequest, opening a GET request, and updating the DOM in the callback.

5. What is JSON?

Lightweight data‑interchange format based on a subset of JavaScript; widely used with Ajax.

6. How have you handled cross‑origin requests?

Used JSONP, script src, proxy servers, CORS headers, or domain relaxation.

7. Methods for real‑time communication between page and server.

WebSockets, long polling, Server‑Sent Events, or Flash sockets.

8. How to solve Ajax character encoding issues?

Ensure consistent UTF‑8 encoding on both client and server, set correct Content-Type, and encode request parameters.

9. Explain JSONP and why it isn’t true Ajax.

JSONP injects a <script> tag to bypass same‑origin restrictions; it doesn’t use XMLHttpRequest.

10. Ajax pros, cons, and cross‑origin solutions.

Pros: asynchronous UI, reduced server load, partial page updates. Cons: security concerns, SEO limitations, debugging difficulty. Cross‑origin: JSONP, iframes, window.postMessage, server proxies.

11. JavaScript prototype and prototype chain?

Objects inherit from a prototype object via the [[Prototype]] chain, enabling shared properties.

jQuery

1. Why use jQuery?

Simplifies DOM manipulation, event handling, Ajax, and cross‑browser compatibility.

2. Difference between JavaScript and jQuery.

jQuery is a library that wraps native JavaScript to provide a more convenient API.

3. How to bind events in jQuery?

Use .bind() or shortcut methods like .click(), .hover().

4. Methods to get HTML, text, attributes, input values, and create nodes.

.html()

, .text(), .attr(), .val(), and $("<tag>") to create elements.

5. How to insert a node into the page?

Use .append() or .prepend().

6. Uses of ajax , get , post , ajaxSetup , getJSON .

ajax

is the core method; get / post are shortcuts; ajaxSetup sets defaults; getJSON fetches JSON and parses it.

7. How to retrieve complex data (object) from server?

Request JSON and let jQuery parse it via getJSON or .ajax with dataType:'json'.

8. Purpose of addClass and css .

addClass

adds a CSS class; css sets inline styles.

9. How to get an element’s actual position?

Use .offset() for document coordinates or .position() for relative coordinates.

10. Uses of bind , unbind , hover .

bind

attaches an event; unbind removes it; hover binds mouseenter and mouseleave.

11. Knowledge of jQuery plugins and mechanisms.

Plugins extend jQuery via $.fn or $.extend; common plugins include jQuery UI, jQuery Cookie, jQuery Timer.

Other Topics

1. Common HTTP status codes you know.

100 Continue, 200 OK, 201 Created, 202 Accepted, 301 Moved Permanently, 302 Found, 303 See Other, 304 Not Modified, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable.

2. Performance optimization methods.

Reduce HTTP requests (sprites, minify, CDN), use Gzip, cache assets, minimize DOM operations, use className for styling, avoid global variables, preload images, place scripts at the bottom.

3. Graceful degradation vs. progressive enhancement.

Graceful degradation: core functionality works in old browsers with fallback solutions. Progressive enhancement: start with basic features and add advanced capabilities for modern browsers.

4. Common causes of memory leaks.

Unreleased references, circular references, timers with string callbacks, closures retaining large objects.

5. Difference between threads and processes.

Processes have separate memory spaces; threads share memory within a process, allowing higher concurrency.

6. Steps from entering a URL to page render.

Cache lookup → DNS resolution → TCP handshake → HTTP request/response → HTML download → DOM construction → resource fetching (CSS, JS, images) → layout → paint → render.