A UI Developer is a front-end developer who creates visible and interactive parts of the website or app. It converts the designer's static design into code that allows users to use buttons, menus, and other elements smoothly and easily.
For example, a UI developer writes HTML, CSS, and JavaScript so that the design is responsive to every screen size, animations run smoothly, and the interface is user-friendly.
While preparing for a UI developer interview, you need to recall a wide range of concepts across HTML, CSS, and JavaScript. This guide provides clear, concise answers to the most important questions, along with practical insights to show your depth of knowledge.
Learn the essentials of frontend development with hands-on training in HTML, CSS, and JavaScript. Build stunning, responsive websites and gain the skills to bring your creative ideas to life!
HTML Interview Questions
1. What is the purpose of a doctype?
The doctype tells the browser which version of HTML the page is written in. This means the browser understands how to render the page.
If you're writing modern HTML (which everyone does), you should always write this at the beginning of the page:
<!DOCTYPE html>
Writing this will force the browser to work in "standards mode" and the page will follow the correct rules.
If this is not written, the browser goes into "quirks mode," where the layout may appear different in different browsers.
2. Explain the difference between <div> and <span>.
Both <div> and <span> are HTML containers. Their function is to group elements, but the difference lies in their behavior.
- <div> is a block-level element. It always starts on a new line and takes up the entire width. For example, it's used when you want to create a section, card, or header.
- <span> is an inline element. It sits in the middle of text, taking up only the required space, without creating a new line. For example, it's used when you want to colorize a single word in a sentence or add an icon to it.
3. What is semantic HTML?
Semantic HTML means using HTML tags that clearly convey the meaning and structure of the content. This is not only for visual appeal, but also for understanding. It helps search engines and screen readers understand which part of the page plays what role.
For example, if you create a <div> like a button using CSS, that will work, but if you use the <button> tag, then the browser, search engine and screen reader will all understand that this is a clickable element.
For example:
<header>is the top section of the page,<footer>is the bottom section,<nav>is for navigation links,<article>is for the main content or post.
If you use <div> everywhere, both browsers and search engines will get confused about which part is what.
Semantic tags also make the code readable and improve accessibility (for screen reader users).
4. What is the difference between localStorage and sessionStorage?
Both localStorage and sessionStorage are browser storage. This means that data is temporarily saved in the browser itself, not on the server.
The main difference is:
- Data stored in localStorage will remain there until you delete it yourself. Close the browser and open it again; the data will still be there. Like theme preference of “dark mode” or “light mode”. Even after closing the page, that data will remain there.
- Data stored in sessionStorage is for a single tab only. As soon as you close that tab, the data is lost. For example, if the user is filling a multi-step form, then refreshing the page will not erase the data, but when the tab is closed, everything will be cleared.
5. What are data- attributes?
Data-attributes are a way to store custom data within an HTML element without disrupting the page's design or layout.
For example, if you want to place a product ID on a button, you could write:
<button data-product-id="123">Buy Now</button>
This data-product-id won't be directly visible in the browser, but it can be easily accessed with JavaScript via the dataset property.
The advantage is that you can attach some extra information to the HTML element, such as a user ID, product type, or a custom setting, without affecting the HTML or CSS.
CSS Interview Questions
6. What is CSS specificity?
CSS specificity means that when multiple CSS rules are applied to an element, the browser decides which rule applies.
It's a weighting system:
- Inline styles (like
<div style="color:red">) have the highest priority. - IDs (
#id) have the next priority. - Classes, attributes, pseudo-classes (
.class,[type="text"],:hover). - Elements and pseudo-elements (
div,p,::before) have the lowest priority.
Problems arise when too many rules clash. This is called "specificity wars." Therefore, best practice is to use mostly classes (with a methodology like BEM) and avoid IDs for styling.
7. Describe the CSS Box Model.
The CSS Box Model is a basic rule that describes how every HTML element appears as a box on a page and how this box is spaced.
This box is divided into four parts, from inside out:
- Content: Where the text or image is located.
- Padding: The empty space around the content (inside the border).
- Border: A line that surrounds the padding and content.
- Margin: The space outside the border, which creates distance from other elements.
When you type box-sizing: border-box; the browser counts the padding and border as part of the element's total width and height. This makes layout creation easier and reduces unwanted overflow or alignment problems.
8. What is the difference between Flexbox and CSS Grid?
Flexbox and CSS Grid are both models for creating layouts, but their functions are different.
- Flexbox is a 1D layout system. This means it can either work in rows (horizontal) or columns (vertical).
- CSS Grid is a 2D layout system. It can handle both rows and columns simultaneously.
When to use what:
- Flexbox is best for small elements, such as a navbar, a group of buttons, or aligning content within a card.
- CSS Grid is best for the structure of an entire page, such as a header, sidebar, main content, and footer. It is used to map the entire layout.
9. Explain the difference between a pseudo-class and a pseudo-element.
A Pseudo-class is used when you want to style an element based on its state.
For example:
button:hover {
background-color: blue;
}
Here, :hover means that the style is applied when the user hovers over the button. Other examples: :focus, :first-child, :visited, etc.
Pseudo-elements are used when you want to style a part of an element, such as a portion within it or adding something extra before/after it.
Example:
p::before {
content: "👉 ";
}
Here ::before creates a virtual element that does not actually exist in the DOM, but is visible for styling purposes. The modern syntax :: is used for pseudo-elements to distinguish them from pseudo-classes.
10. How do you approach responsive design?
Responsive design means that your website should display properly on every device, whether mobile, tablet, or desktop.
These days, we follow a "mobile-first" approach, meaning we design for small screens (mobile) first, then add CSS for larger screens using media queries.
The main steps are:
- Setting the viewport:
In the
<head>of the HTML, write:<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser to adjust the page to the screen size
- Using fluid layouts:
Use relative units like
%,vw, andvhinstead of fixed pixels, so that elements adjust to the screen size. - Applying media queries:
In CSS, you can write:
@media (min-width: 768px) {
/* styles for large screens */
}This allows you to set different rules for different screen sizes.
- Optimizing images:
Use
<picture>orsrcsetto load the correct size image for each screen so that the page runs fast and looks good.
JavaScript Interview Questions
11. Explain the difference between var, let, and const.
var, let, and const are all used to create variables in JavaScript, but their rules differ slightly, mainly in scope (validity) and mutability.
- Var:
- It is function-scoped; that is, it will only work within that function.
- You can also declare it again and change its value.
- It is "hoisted", meaning it exists even before declaration, but the value is
undefined.
- Let:
- It is block-scoped (valid only within
{}). - You can change its value, but you cannot declare it again within the same scope.
- It is block-scoped (valid only within
- const:
- This is also block-scoped.
- Once its value is set, it cannot be changed, nor can it be declared again.
- A value must be provided when declaring it, otherwise an error occurs.
Simple rule: In modern JavaScript, const is used first. If it is known that the value will change, then let is used. var is outdated and introduces bugs, so it is rarely used.
12. What is hoisting in JavaScript?
Before JavaScript code is run, its variable and function declarations are moved to the top of their scope.
But only the declaration is moved to the top, not the value assignment (initialization).
For example, if you create a variable with var, you can use it before declaring it, but its value is undefined at that time.
Example:
console.log(a); // undefined
var a = 10;
But if you use let or const, the declaration is also moved to the top, but not initialized.
During this, there is a "temporal dead zone." This means that if you use a variable before it is declared, you will get an error.
13. What is a closure?
A Closure is a concept where a function remembers the variables of its outer function, even after the outer function has finished executing. The function remembers its "creation time" environment or context.
This is very useful when you want to create private variables that cannot be directly accessed from outside.
Example:
function counter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const myCounter = counter();
myCounter(); // 1
myCounter(); // 2
Here, the count variable is protected within the closure. It is not accessible from outside counter(), but is updated with every call.
So closure basically gives a feature like “memory” inside a function.
14. Explain the this keyword.
The "this" keyword refers to the object executing the current function. Its value is determined by how a function is called, not where it is defined.
- In global context: If you're in a browser, "this" refers to the
windowobject. - In object's method: If a function is written inside an object, "this" will point to that object.
- In arrow function: Arrow functions don't create their own "this"; they use the "this" of their outer scope (where they're written). Therefore, they're more predictable.
- In event listener: When an event is triggered, "this" refers to the element that received the event.
You can manually control this with the call(), apply(), or bind() methods.
15. What is the difference between == and ===?
== and === are both used for comparison, but their behavior is different.
==is called the abstract equality operator. It converts values to the same type before comparing them. If you write"5" == 5, it will returntruebecause it converts the string"5"to a number and checks.===is called the strict equality operator. It does not perform type conversion."5" === 5will returnfalsebecause one is a string and the other is a number.
16. What are JavaScript data types?
Data types in JavaScript essentially describe what type of data is stored in a variable. There are 8 types in total: 7 primitive and 1 structural.
Primitive types:
- String - a sequence of characters, such as
"hello" - Number - numbers, such as
42 - BigInt - for very large integers
- Boolean -
trueorfalse - Undefined - a variable is declared but no value is assigned
- Null - intentionally has no value
- Symbol - a unique and immutable value
Structural type:
- Object - a complex type that can store multiple values (including Arrays and Functions).
Also Check:
17. What is event delegation?
Event delegation means that instead of placing separate event listeners on each child element, you **place the listener on a single parent element**.
Let's say you have a <ul> containing many <li>s. If you placed a click listener on each <li>, the code would become long and bulky. With event delegation, you place the listener on only the <ul> and use the browser's event bubbling to determine which <li> was clicked.
Advantages: Simpler code, better performance, and even works for dynamically added elements.
18. Explain prototypal inheritance.
Prototypal inheritance basically means that an object in JavaScript can inherit the properties and methods of another object.
Every object has a hidden property, [[prototype]], which points to another object. When you access a property:
- JS first looks for it in the current object.
- If it's not found, it goes up the prototype chain until it finds the property or returns
null.
ES6's class syntax just makes it a little easier and more readable, but internally it uses the same old prototypal inheritance.
19. What is the difference between null and undefined?
null and undefined both mean "no value," but there's a slight difference.
undefinedoccurs when a variable is declared but no value is assigned. Or the function doesn't return anything.let a;
console.log(a); // undefinednulloccurs when the developer explicitly states, "Hey, there's no intentional value here."let b = null;
console.log(b); // null
undefined is the default behavior of the browser/JS, and null is the developer's intentional choice.
20. What is a Promise?
A Promise is an object that indicates when an asynchronous task (such as fetching data from a server) will complete or fail.
Promises have three states:
- Pending – The task is still being executed, the result hasn't arrived.
- Fulfilled – The task has completed successfully.
- Rejected – The task has failed.
In JavaScript, you can handle these:
.then()→ When the task completes successfully..catch()→ If the task fails..finally()→ Whether the task succeeds or fails, it will always run.
21. What is async/await?
Async/await is a modern JavaScript approach that allows asynchronous code to be written like normal synchronous code, making it easy to understand and read.
- Using the
asynckeyword allows you to declare a function, which will always return a Promise. - Using the
awaitkeyword allows you to pause execution of a function until a Promise is resolved or rejected.
22. What is the Event Loop?
An event loop is JavaScript's way of running tasks in a non-blocking manner by queuing them.
- JavaScript has a call stack where the currently running code is stored.
- A callback queue holds tasks that are not yet being executed, such as a function waiting for data to arrive from an API.
- The event loop continuously checks: if the call stack is empty, it picks up the first task from the queue, puts it on the stack, and runs it.
The advantage of this is that long-running operations (such as API calls or timers) do not block the main thread, and the page's UI remains responsive.
23. Explain the concept of CORS.
CORS stands for Cross-Origin Resource Sharing. It's a security feature of the browser.
If your front-end (such as a website) tries to fetch data from a different domain, protocol, or port (a "Cross-Origin" request), the browser stops it and displays a CORS error.
The browser's CORS checks whether the front-end request is allowed.
This is resolved on the server side. The server must send CORS headers in its response, such as:
Access-Control-Allow-Origin: *
This header indicates which origins are allowed to make the request.
Without this, the front-end will not be able to directly access the data of the other domain from its scripts.
24. What are higher-order functions?
A higher-order function is a function that either takes another function as an argument or returns a function itself.
This is a basic idea of JavaScript's functional programming. It makes code more abstract and reusable.
Common examples you'll often see include:
map()- applies a function to each element of an array and returns a new array.filter()- filters the elements of an array based on a condition.reduce()- combines the elements of an array to create a single value.
25. What is the DOM?
The DOM (Document Object Model) is a programming interface for web documents. It represents the page's structure as a tree of nodes, where each node is an object representing a part of the document (like an element or text). JavaScript can manipulate the DOM to dynamically change the document's structure, style, and content.
Web Performance and Accessibility
26. What is Web Accessibility (a11y)?
Web accessibility, or a11y, means that websites should be designed to be usable by everyone, including those with disabilities.
This includes a few important things:
- Using semantic HTML (e.g.,
<header>,<nav>,<main>) so that screen readers and browsers understand the page correctly. - Providing text alternatives for images (the
altattribute) so that visually impaired users can also understand. - Enabling keyboard navigation, such as with the tab and arrow keys.
- Using ARIA attributes, which provide additional context to screen readers.
27. How can you optimize a website's performance?
Here are some ways to improve website performance:
- Minify assets: Reduce the size of CSS, JavaScript, and HTML by removing extra spaces and comments.
- Compress images: Use formats like WebP and reduce the size with compression tools.
- Browser caching: Store frequently used items locally in the browser so they don't have to be downloaded again with each visit.
- Use a CDN: Place files on different servers so the server closest to the user loads from them.
- Reduce HTTP requests: Don't send too many files separately from the server. Combine them where possible.
- Defer non-critical assets: JavaScript or CSS that is not needed immediately, load them later using
asyncordefer. - Code Splitting: Break large JS bundles into smaller pieces and load them only when needed.
28. What are the different ways to load CSS on a webpage?
- External stylesheet – This is the most common and best way. Attaching a CSS file using the
<link>tag in the<head>.<link rel="stylesheet" href="style.css">
This is easy to maintain and has good performance.
- Internal stylesheet – Writing CSS directly within the
<style>tag in the<head>.<style>
body { background-color: lightblue; }
</style> - Inline styles – Using the
styleattribute directly within the HTML element.<p style="color: red;">Hello</p>
This is generally avoided because it's difficult to maintain.
- @import – Importing another CSS file within a CSS file.
@import url("other-style.css");This can be slow because it blocks parallel downloads, so it's not recommended.
29. What is lazy loading?
Lazy loading stops loading all the images or iframes on a page at once, but rather loads them in batches **as the user scrolls to view them**.
This is very easy in modern browsers. Simply add loading="lazy" to the <img> or <iframe>:
<img src="image.jpg" loading="lazy" alt="Example Image">
This makes the page load faster and doesn't consume unnecessary resources immediately.
Tools and Concepts
30. What is version control, and why is it important?
Version control is a system that tracks changes to your files over time. This means you can see what version a file was in the past and, if desired, restore the old version.
The advantages of this are:
- If multiple developers are working on a team, no one will overwrite the other's work.
- Every change is recorded, making it easier to trace bugs.
The most widely used version control system is Git.
31. What is the purpose of a package manager like npm or Yarn?
Package managers like npm or Yarn manage, install, update, and track the libraries and tools required for a project.
This is very useful for UI or web developers because it handles the dependencies listed in the package.json file.
The advantage of this is that all developers on the team will have the same version of the tools, eliminating the "it's running on my machine, not yours" problem. Project setup is also fast and simple.
Also Read: Top HTML Project Ideas
32. What are CSS preprocessors?
CSS preprocessors are scripting languages that extend the capabilities of CSS.
Normal CSS doesn't have these features, but preprocessors (like Sass or LESS) can:
- Variables - For example, instead of writing a color repeatedly, put it in a single variable.
- Nesting - You can logically organize selectors within one another.
- Mixins and Functions - You can create reusable styles or calculations.
The preprocessed code is then compiled into regular CSS that browsers can understand.
33. What is a build tool, and why would you use one?
A build tool is a helper program that automates development tasks.
For UI developers, tools like Webpack or Vite do the following:
- Bundling JavaScript modules together
- Converting preprocessor code (like Sass or TypeScript) to standard CSS/JS
- Optimizing assets so that pages load faster in production
The biggest advantage is that you can use modern JavaScript and CSS, and these tools automatically make it compatible even with older browsers.
