Junior Web Developer Interview Questions & Answers
40 questions for Junior Web Developer interviews — 25 easy, 15 medium.
About the Junior Web Developer role
A junior web developer builds and updates web pages from designs, fixes layout bugs and adds interactive features with JavaScript. They work under senior guidance on company websites, landing pages and small modules of larger applications. Interviews focus on HTML, CSS, JavaScript basics, responsive design and a portfolio of two or three live projects hosted on GitHub Pages or similar.
Semantic HTML Responsive CSS JavaScript basics Git and GitHub Browser DevTools
Solved for this roleStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
Show HTML5 built-in validation for a registration form.
HTML5 attributes validate input before any JavaScript runs:
<input type='text' name='name' required minlength='3' maxlength='50'>
<input type='email' name='email' required>
<input type='tel' name='mobile' pattern='[6-9][0-9]{9}' title='10 digit mobile number'>
<input type='number' name='age' min='18' max='60'>
<input type='url' name='portfolio'>
The browser blocks submission and shows a message when rules fail. Server-side validation is still mandatory because client checks can be bypassed.
02
Create a dark mode toggle that remembers the user's choice.
Store the choice in localStorage and apply it on load:
const root = document.documentElement;
const saved = localStorage.getItem('theme');
if (saved) root.dataset.theme = saved;
toggle.addEventListener('click', () => {
const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
root.dataset.theme = next;
localStorage.setItem('theme', next);
toggle.setAttribute('aria-pressed', next === 'dark');
});
Running the first lines in a small inline script in the head avoids a flash of the wrong theme.
Hoisting means declarations are processed before code runs, so they behave as if moved to the top of their scope. Function declarations are hoisted completely and can be called before they appear. var variables are hoisted but set to undefined until assignment. let, const and class are hoisted too, but accessing them before declaration throws a ReferenceError because of the temporal dead zone.
Semantic HTML uses elements that describe meaning, such as header, nav, main, article, section, aside and footer, instead of generic div tags everywhere. It helps screen readers announce page structure, helps search engines understand which content is primary, and makes code easier to maintain. For example, wrapping the site menu in nav lets assistive technology users jump straight to navigation, which a plain div cannot offer.
05
Remove duplicates from an array of numbers and from an array of objects.
For primitives, a Set is simplest; for objects, use a Map keyed by id:
const nums = [1, 2, 2, 3, 3];
const unique = [...new Set(nums)];
const users = [{ id: 1 }, { id: 2 }, { id: 1 }];
const uniqueUsers = [
...new Map(users.map(u => [u.id, u])).values()
];
Both are O(n). A Set compares objects by reference, so it cannot remove two different objects with the same id.
AJAX means updating parts of a page by exchanging data with the server in the background, without a full page reload. Originally it used XMLHttpRequest and XML, but today it is done with the fetch API and JSON. Examples include live search suggestions, adding to cart without reload, and infinite scroll. The server returns data, and JavaScript updates the DOM with the result.
07
How is querySelector different from getElementById and getElementsByClassName?
querySelector and querySelectorAll accept any CSS selector and return the first match or a static NodeList. getElementById accepts only an id and is slightly faster. getElementsByClassName returns a live HTMLCollection that updates automatically when the DOM changes, which can cause surprises inside loops. In practice querySelector is used for flexibility, and the speed difference rarely matters.
08
Uploaded images overflow their containers and break the layout. What is the fix?
Images keep their natural size by default, so a 2000 pixel photo will overflow a 350 pixel card. A global rule img { max-width: 100%; height: auto; display: block; } makes them shrink to fit while keeping the aspect ratio. For fixed-size thumbnails I would add width, height and object-fit: cover so different photo shapes crop neatly without stretching.
09
What is the difference between innerHTML, textContent and innerText?
innerHTML reads or writes HTML markup, so inserting user input through it can run malicious scripts and cause XSS. textContent reads or writes raw text, including hidden elements, and is fast because it does not trigger layout. innerText returns only visible text as rendered, respects CSS, and triggers a reflow, so it is slower. For displaying user data, textContent is the safe default.
The Document Object Model is a tree representation of an HTML page that the browser builds after parsing. Each element, attribute and piece of text becomes a node that JavaScript can read and change through APIs like document.querySelector, element.classList and element.append. When the DOM changes, the browser updates what users see. The DOM is not the HTML source itself; scripts can change it after the page loads.
11
What is the difference between preventDefault and stopPropagation?
preventDefault stops the browser's default action for the event, such as a form submitting and reloading the page or a link navigating. stopPropagation stops the event from bubbling further to parent elements, but the default action still happens. They solve different problems and are sometimes used together. Overusing stopPropagation can break delegated listeners and analytics scripts that listen at the document level.
ARIA (Accessible Rich Internet Applications) adds roles, states and properties like role='dialog', aria-expanded and aria-label so assistive technologies understand custom widgets. The first rule of ARIA is to prefer native HTML elements, because a real button already has keyboard support and the right role. Use ARIA only when building something HTML lacks, such as tabs or a combobox, and keep the states updated with JavaScript.
13
What does the DOCTYPE declaration do in an HTML page?
The DOCTYPE tells the browser which rendering mode to use. Writing <!DOCTYPE html> at the very top puts the browser in standards mode, so CSS box model and layout rules follow the modern specification. Without it, browsers fall back to quirks mode, which imitates old browser bugs and can make widths, margins and table layouts behave inconsistently across browsers.
I enjoy building things people use directly. During college, I made a website for a local library, and seeing members search books online gave me real satisfaction. Web development lets me combine design with logic, from HTML and CSS to PHP and MySQL, and see results immediately. I want to grow in a team that ships real products and eventually take ownership of complete features end to end.
== compares values after type coercion, so 0 == '0' and null == undefined are both true, which can hide bugs. === is strict equality and returns true only when both type and value match, so 0 === '0' is false. Most style guides require === everywhere. One accepted exception is value == null, which conveniently checks for both null and undefined in one condition.
16
What is the difference between pseudo-classes and pseudo-elements?
A pseudo-class selects an element in a particular state, such as :hover, :focus, :nth-child(2) or :checked, and uses a single colon. A pseudo-element styles a specific part of an element or inserts generated content, such as ::before, ::after, ::first-line or ::placeholder, and uses a double colon. For example, a::after can add an arrow icon after links without extra HTML.
In a boolean context, JavaScript converts values to true or false. The falsy values are false, 0, -0, 0n, empty string, null, undefined and NaN; everything else is truthy, including '0', empty arrays and empty objects. This matters in conditions: if (items.length) works, but if (count) fails when count is legitimately 0. The nullish coalescing operator ?? helps by only falling back for null or undefined.
Situation: during my final year, a local coaching institute needed a website. Task: I had to build a responsive site with course pages and an enquiry form in three weeks. Action: I designed the layout in Figma, built it with semantic HTML, CSS Grid and JavaScript, stored enquiries in MySQL through PHP and deployed it on shared hosting. Result: it scored above 90 in Lighthouse and brought enquiries within the first month.
19
Write an accessible login form with proper labels.
Every input needs a label linked through for and id, the right input type and autocomplete hints:
<form action='/login' method='post'>
<label for='email'>Email</label>
<input id='email' name='email' type='email' autocomplete='email' required>
<label for='pwd'>Password</label>
<input id='pwd' name='password' type='password' autocomplete='current-password' required minlength='8'>
<button type='submit'>Log in</button>
</form>
Clicking a label focuses its input and screen readers read the label aloud.
20
Product images look blurry on high-resolution phone screens. How do you fix it?
High-density screens have a device pixel ratio of 2 or 3, so a 300 pixel wide image displayed at 300 CSS pixels looks soft. I would export 2x and 3x versions and serve them through srcset with x descriptors or width descriptors plus sizes. For icons and logos I would switch to SVG, which stays sharp at any size and is usually smaller than multiple raster versions.
21
How do you test a website for cross-browser compatibility?
I check feature support on Can I Use before using new CSS, and use Autoprefixer through the build for vendor prefixes. I test on Chrome, Firefox, Safari and Edge, plus real Android and iPhone devices because Safari on iOS behaves differently. Cloud testing platforms help when devices are missing. I use @supports for progressive enhancement, so older browsers still get a working, simpler layout.
Situation: in my internship, a training institute tracked batches, students and fees in spreadsheets. Task: I had to design a MySQL schema for a web portal. Action: I normalised data into students, batches, enrollments and payments tables, added foreign keys and indexes on common filters, and wrote views for monthly reports. Result: reports that took a day manually now loaded in seconds, and data errors dropped sharply.
Every element is a rectangular box made of content, padding, border and margin from inside to outside. With the default box-sizing: content-box, the width you set applies only to the content, so padding and border increase the final size. Setting box-sizing: border-box makes width include padding and border, which makes layouts predictable. Most projects apply border-box to all elements in a global reset.
24
What is the difference between var, let and const?
var is function-scoped, is hoisted and initialised as undefined, and can be redeclared, which causes bugs in loops and blocks. let and const are block-scoped and sit in the temporal dead zone until their declaration line runs. let allows reassignment, while const does not, although objects declared with const can still have their properties changed. Modern code uses const by default and let only when the value must change.
Specificity decides which rule wins when several match the same element. It is calculated as a score: inline styles highest, then id selectors, then classes, attributes and pseudo-classes, then element and pseudo-element selectors. For example, #menu a beats .nav a. When specificity is equal, the rule written later wins. !important overrides normal rules, but overusing it creates maintenance problems, so keeping selectors flat with classes is preferred.
26
Write CSS for a simple responsive navigation that becomes a column on mobile.
Mobile-first, then switch to a row on wider screens:
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
On phones the links stack for easy tapping. Add a toggle button with aria-expanded if the menu should collapse behind a hamburger icon.
27
Create a responsive card grid that needs no media queries.
auto-fit with minmax lets the grid decide how many columns fit:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
Each card is at least 250 pixels wide and the extra space is shared equally. On a phone it shows one column, on a tablet two and on a desktop three or four, all from three lines of CSS.
28
Write a debounce function and explain where it is used.
Debounce delays a function until calls stop for a given time:
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const onSearch = debounce((e) => fetchResults(e.target.value), 300);
input.addEventListener('input', onSearch);
It is used for search boxes, window resize and autosave, so the API is called once after the user pauses typing.
29
Your page shows a horizontal scrollbar on mobile. How do you find and fix the cause?
Horizontal scroll means some element is wider than the viewport. I would open Chrome DevTools device mode and use a temporary rule like * { outline: 1px solid red } to spot the culprit. Common causes are fixed pixel widths, images without max-width: 100%, long unbroken URLs, and 100vw combined with padding. Fixes include max-width, overflow-wrap: anywhere and box-sizing: border-box. I avoid hiding it with overflow-x: hidden without fixing the root cause.
30
Your code throws 'Unexpected token < in JSON' after an API call. What does it mean?
It means response.json() received HTML instead of JSON, usually an error page, a login redirect, or a 404 page from the server. I would check the response status and body in the Network tab, verify the endpoint URL and method, and confirm the server sets Content-Type: application/json. In code I would check response.ok before parsing so users see a clear error instead of a crash.
31
Describe a bug you found in production and how you handled it.
Situation: after a release, users reported the checkout button did nothing on some phones. Task: I had to find and fix it quickly. Action: I reproduced it on an older Safari, found that a new array method was unsupported, rolled back the change, then added a polyfill and Babel targets for those browsers. Result: the fix shipped the same day, and we added real-device checks to our release checklist.
32
What is the difference between id and class attributes?
An id must be unique within a page and identifies one element, so it is used for anchor links, label for attributes and getElementById. A class can be reused on many elements and is the normal hook for CSS styling and grouping in JavaScript. Ids also have much higher CSS specificity, so styling with ids makes overrides harder; most teams style only with classes.
33
Explain the difference between async and defer on a script tag.
Both download the script in parallel without blocking HTML parsing. An async script executes as soon as it finishes downloading, in no fixed order, so it suits independent scripts like analytics. A defer script waits until the HTML is fully parsed and runs in document order, so it suits application code that depends on the DOM or on other scripts. A plain script tag blocks parsing completely.
Add loading='lazy' so the browser fetches them only when they come near the viewport:
<img src='gallery-1.jpg' alt='Campus' width='600' height='400' loading='lazy'>
<iframe src='https://www.youtube.com/embed/xyz' loading='lazy' title='Demo video'></iframe>
Do not lazy load the main hero or above-the-fold image, because that delays Largest Contentful Paint. For the hero use fetchpriority='high' instead, and always set width and height to avoid layout shift.
35
What is the difference between block-level and inline elements?
Block-level elements such as div, p, h1 and section start on a new line and take the full available width by default. Inline elements such as span, a, strong and img sit inside a line of text and only take as much width as their content. Inline elements ignore vertical width and height settings, which is why developers often switch them to inline-block or block when they need sizing.
static is the default and follows normal flow. relative keeps the element in flow but lets you offset it, and makes it a reference for absolute children. absolute removes the element from flow and positions it against the nearest positioned ancestor. fixed positions against the viewport and stays during scroll. sticky behaves like relative until a scroll threshold, then sticks like fixed within its parent, which is ideal for table headers.
37
Click handlers do not work on buttons added after the page loads. Why?
The listeners were attached with querySelectorAll when the page loaded, so they exist only on the buttons that were present at that moment. New buttons have no listener. The clean fix is event delegation: attach one listener to a stable parent and check event.target.closest('.btn'). Alternatively, attach the listener when creating each new element, but delegation scales better for large lists.
When an event fires, it travels in three phases: capturing from window down to the target, the target phase, and bubbling back up through ancestors. By default, addEventListener handles the bubbling phase, so a click on a button also triggers click handlers on its parent div and body. Passing { capture: true } runs the handler during the capturing phase. Some events like focus do not bubble, but focusin does.
39
Why should external links opened with target='_blank' use rel='noopener'?
When a page opens a link in a new tab, the new page historically got access to window.opener and could redirect the original tab to a phishing page, an attack called reverse tabnabbing. Adding rel='noopener' removes that reference, and noreferrer also hides the referring URL. Modern browsers apply noopener by default for target='_blank', but adding it explicitly is still good practice for older browsers.
40
Write the basic SEO meta tags for a course landing page.
Key tags go in the head:
<title>Full Stack Web Development Course in Noida</title>
<meta name='description' content='Learn HTML, CSS, JavaScript, PHP and MySQL with live projects.'>
<link rel='canonical' href='https://example.com/web-development'>
<meta property='og:title' content='Web Development Course'>
<meta property='og:image' content='https://example.com/og.jpg'>
<meta name='robots' content='index, follow'>
Keep titles under about 60 characters and descriptions near 150 to 160 characters.
Frequently asked questions
What does a Junior Web Developer do?
A junior web developer builds and updates web pages from designs, fixes layout bugs and adds interactive features with JavaScript. They work under senior guidance on company websites, landing pages and small modules of larger applications. Interviews focus on HTML, CSS, JavaScript basics, responsive design and a portfolio of two or three live projects hosted on GitHub Pages or similar.
Which skills are tested in a Junior Web Developer interview?
Expect questions on Semantic HTML, Responsive CSS, JavaScript basics, Git and GitHub, Browser DevTools. Most rounds also ask you to explain a project and solve one practical problem live.
How do I prepare for a Junior Web Developer interview?
Revise HTML Fundamentals, CSS Layout and Responsive Design, JavaScript Core, DOM and Browser Events first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.