550 Frontend Interview Questions (HTML, CSS and JavaScript) for 2027

Published October 2026 · avivashishta.com

You commented frontend, so here are all 550, free, with a link for each: 183 HTML questions and 212 CSS questions with written answers, plus 155 JavaScript "what's the output?" questions with explanations. They come from three GitHub repos, and every link jumps straight to its answer. I removed one CSS question its repo repeats.

The short version: most frontend rounds start with HTML and CSS, not React. Get the box model, Flexbox and Grid, and semantic HTML solid, then do the JavaScript output questions. Build the 3 small things below and you can talk through all of it.

The three repos

learning-zone/html-basics ~600 ★

github.com/learning-zone/html-basics

183 HTML interview questions with answers and code, from tags and forms to accessibility, SEO and web components.

learning-zone/css-basics ~780 ★

github.com/learning-zone/css-basics

212 CSS interview questions with answers, from the box model and specificity to Grid, animations and stacking contexts.

lydiahallie/javascript-questions ~65K ★

github.com/lydiahallie/javascript-questions

155 "what's the output?" JavaScript questions, each with the answer and an explanation of why. MIT licensed.

The 4 I'd start with

Box model and specificity. Box model and selectors and specificity. Every CSS round starts here.
Flexbox and Grid. Flexbox, CSS Grid and responsive design. Expect to build a layout live.
Semantic HTML and accessibility. HTML tags, forms and accessibility. The section most candidates skip and interviewers notice.
The JavaScript output questions. All 155 in Part 3. Read the code, guess the output, then read why.

What to build to prove you get it

A responsive landing page using Grid for the layout and Flexbox inside each section, with no CSS framework.
An accessible sign-up form with labels, error messages and full keyboard support.
A CSS-only animation, like a loading spinner or a card flip, using transitions and transforms.

You don't need all 550. You need to centre a div five different ways and explain why each one works.

Jump to a topic

HTML: Introduction (26) · HTML Tags (17) · HTML Events (10) · HTML Forms (13) · HTML Tables (8) · HTML Lists (6) · HTML Iframe (4) · Html Url (7) · Html Svg (4) · HTML Canvas (1) · HTML Storage (6) · HTML APIs (6) · HTML Drag and Drop (3) · HTML Web Worker (5) · HTML Accessibility (6) · Miscellaneous (12) · HTML Media (4) · HTML5 Advanced APIs (6) · Service Workers & Web Workers (3) · IndexedDB & Advanced Web Storage (2) · Atomic Design & Pixel Perfect Design (2) · SEO Basics & Advanced (4) · HTML Performance Optimization (6) · HTML Tags & Elements (Intermediate) (14) · Web Components (4) · HTML Security (4)

CSS: Introduction (5) · Box Model (12) · Selectors & Specificity (8) · Positioning (5) · Flexbox (4) · CSS Grid (6) · Pseudo-Classes & Pseudo-Elements (12) · Transitions & Animations (9) · Transforms (8) · Media Queries & Responsive Design (19) · CSS Variables (10) · Typography & Text (15) · Colors & Gradients (15) · Z-index & Stacking Context (7) · Overflow & Clipping (10) · Display & Visibility (7) · Miscellaneous (51) · Technical Lead Role (9)

JavaScript output: Questions 1 to 31 (31) · Questions 32 to 62 (31) · Questions 63 to 93 (31) · Questions 94 to 124 (31) · Questions 125 to 155 (31)

Part 1: HTML interview questions (183)

Source: github.com/learning-zone/html-basics

Introduction (26)

HTML Tags (17)

HTML Events (10)

HTML Forms (13)

HTML Tables (8)

HTML Lists (6)

HTML Iframe (4)

Html Url (7)

Html Svg (4)

HTML Canvas (1)

Explain about HTML Canvas?

HTML Storage (6)

HTML APIs (6)

HTML Drag and Drop (3)

HTML Web Worker (5)

HTML Accessibility (6)

Miscellaneous (12)

HTML Media (4)

HTML5 Advanced APIs (6)

Service Workers & Web Workers (3)

IndexedDB & Advanced Web Storage (2)

Atomic Design & Pixel Perfect Design (2)

SEO Basics & Advanced (4)

HTML Performance Optimization (6)

HTML Tags & Elements (Intermediate) (14)

Web Components (4)

HTML Security (4)

Part 2: CSS interview questions (212)

Source: github.com/learning-zone/css-basics

Introduction (5)

Box Model (12)

Selectors & Specificity (8)

Positioning (5)

Flexbox (4)

CSS Grid (6)

Pseudo-Classes & Pseudo-Elements (12)

Transitions & Animations (9)

Transforms (8)

Media Queries & Responsive Design (19)

CSS Variables (10)

Typography & Text (15)

Colors & Gradients (15)

Z-index & Stacking Context (7)

Overflow & Clipping (10)

Display & Visibility (7)

Miscellaneous (51)

Technical Lead Role (9)

Part 3: JavaScript "what's the output?" questions (155)

Source: github.com/lydiahallie/javascript-questions

Questions 1 to 31 (31)

Q1: What's the output?: function sayHi() {
Q2: What's the output?: for (var i = 0; i < 3; i++) {
Q3: What's the output?: const shape = {
Q4: What's the output?: +true;
Q5: Which one is true?: const bird = {
Q6: What's the output?: let c = { greeting: 'Hey!' };
Q7: What's the output?: let a = 3;
Q8: What's the output?: class Chameleon {
Q9: What's the output?: let greeting;
Q10: What happens when we do this?: function bark() {
Q11: What's the output?: function Person(firstName, lastName) {
Q12: What's the output?: function Person(firstName, lastName) {
Q13: What are the three phases of event propagation?: - A: Target > Capturing > Bubbling
Q14: All object have prototypes.: - A: true
Q15: What's the output?: function sum(a, b) {
Q16: What's the output?: let number = 0;
Q17: What's the output?: function getPersonInfo(one, two, three) {
Q18: What's the output?: function checkAge(data) {
Q19: What's the output?: function getAge(...args) {
Q20: What's the output?: function getAge() {
Q21: What's the value of sum?: const sum = eval('10*10+5');
Q22: How long is cool_secret accessible?: sessionStorage.setItem('cool_secret', 123);
Q23: What's the output?: var num = 8;
Q24: What's the output?: const obj = { 1: 'a', 2: 'b', 3: 'c' };
Q25: What's the output?: const obj = { a: 'one', b: 'two', a: 'three' };
Q26: The JavaScript global execution context creates two things for you: the global object, and the "this" keyword.: - A: true
Q27: What's the output?: for (let i = 1; i < 5; i++) {
Q28: What's the output?: String.prototype.giveLydiaPizza = () => {
Q29: What's the output?: const a = {};
Q30: What's the output?: const foo = () => console.log('First');
Q31: What is the event.target when clicking the button?: Click!

Questions 32 to 62 (31)

Q32: When you click the paragraph, what's the logged output?: Click here!
Q33: What's the output?: const person = { name: 'Lydia' };
Q34: What's the output?: function sayHi() {
Q35: Which of these values are falsy?: 0;
Q36: What's the output?: console.log(typeof typeof 1);
Q37: What's the output?: const numbers = [1, 2, 3];
Q38: What's the output?: (() => {
Q39: Everything in JavaScript is either a...: - A: primitive or object
Q40: What's the output?: [[0, 1], [2, 3]].reduce(
Q41: What's the output?: !!null;
Q42: What does the setInterval method return in the browser?: setInterval(() => console.log('Hi'), 1000);
Q43: What does this return?: [...'Lydia'];
Q44: What's the output?: function* generator(i) {
Q45: What does this return?: const firstPromise = new Promise((res, rej) => {
Q46: What's the output?: let person = { name: 'Lydia' };
Q47: What's the output?: const person = {
Q48: What's the output?: console.log(3 + 4 + '5');
Q49: What's the value of num?: const num = parseInt('7*6', 10);
Q50: What's the output?: [1, 2, 3].map(num => {
Q51: What's the output?: function getInfo(member, year) {
Q52: What's the output?: function greeting() {
Q53: What's the output?: function Car() {
Q54: What's the output?: (() => {
Q55: What's the output?: class Dog {
Q56: What's the output?: const set = new Set([1, 1, 2, 3, 4]);
Q57: What's the output?: // counter.js
Q58: What's the output?: const name = 'Lydia';
Q59: What's the output?: const numbers = [1, 2, 3, 4, 5];
Q60: What's the output?: const user = { name: 'Lydia', age: 21 };
Q61: What's the output?: const person = { name: 'Lydia' };
Q62: What's the output?: const settings = {

Questions 63 to 93 (31)

Q63: What's the output?: let num = 10;
Q64: What's the output?: const value = { number: 10 };
Q65: What's the output?: [1, 2, 3, 4].reduce((x, y) => console.log(x, y));
Q66: With which constructor can we successfully extend the Dog class?: class Dog {
Q67: What's the output?: // index.js
Q68: What's the output?: console.log(Number(2) === Number(2));
Q69: What's the output?: const name = 'Lydia Hallie';
Q70: What's the output?: console.log('🥑' + '💻');
Q71: How can we log the values that are commented out after the console.log statement?: function* startGame() {
Q72: What's the output?: console.log(String.raw`Hello\nworld`);
Q73: What's the output?: async function getData() {
Q74: What's the output?: function addToList(item, list) {
Q75: What's the output?: const box = { x: 10, y: 20 };
Q76: What's the output?: const { firstName: myName } = { firstName: 'Lydia' };
Q77: Is this a pure function?: function sum(a, b) {
Q78: What is the output?: const add = () => {
Q79: What is the output?: const myLifeSummedUp = ['☕', '💻', '🍷', '🍫'];
Q80: What is the output?: const list = [1 + 2, 1 * 2, 1 / 2];
Q81: What is the output?: function sayHi(name) {
Q82: What is the output?: var status = '😎';
Q83: What is the output?: const person = {
Q84: What is the output?: function checkAge(age) {
Q85: What kind of information would get logged?: fetch('https://www.website.com/api/user/1')
Q86: Which option is a way to set hasName equal to true, provided you cannot pass true as an argument?: function getName(name) {
Q87: What's the output?: console.log('I want pizza'[0]);
Q88: What's the output?: function sum(num1, num2 = num1) {
Q89: What's the output?: // module.js
Q90: What's the output?: class Person {
Q91: What's the output?: let newList = [1, 2, 3].push(4);
Q92: What's the output?: function giveLydiaPizza() {
Q93: What's the output?: const person = {

Questions 94 to 124 (31)

Q94: What's the output?: function getItems(fruitList, ...args, favoriteFruit) {
Q95: What's the output?: function nums(a, b) {
Q96: What's the output?: class Person {
Q97: What's the output?: const info = {
Q98: What's the output?: const getList = ([x, ...y]) => [x, y]
Q99: What's the output?: const name = 'Lydia';
Q100: What's the value of output?: // 🎉✨ This is my 100th question! ✨🎉
Q101: What's the value of output?: const one = false || {} || null;
Q102: What's the value of output?: const myPromise = () => Promise.resolve('I have resolved!');
Q103: What's the value of output?: const set = new Set();
Q104: What's its value?: Promise.resolve(5);
Q105: What's its value?: function compareMembers(person1, person2 = person) {
Q106: What's its value?: const colorConfig = {
Q107: What's its value?: console.log('❤️' === '❤️');
Q108: Which of these methods modifies the original array?: const emojis = ['✨', '🥑', '😍'];
Q109: What's the output?: const food = ['🍕', '🍫', '🥑', '🍔'];
Q110: What does this method do?: JSON.parse();
Q111: What's the output?: let name = 'Lydia';
Q112: What's the output?: function* generatorOne() {
Q113: What's the output?: console.log(`${(x => x)('I love')} to program`);
Q114: What will happen?: let config = {
Q115: Which method(s) will return the value 'Hello world!'?: const myMap = new Map();
Q116: What's the output?: const person = {
Q117: Which of the following options will return 6?: function sumValues(x, y, z) {
Q118: What's the output?: let num = 1;
Q119: What's the output?: const person = {
Q120: What's the output?: const groceries = ['banana', 'apple', 'peanuts'];
Q121: What's the output?: const config = {
Q122: What's the output?: const name = 'Lydia Hallie';
Q123: What's the output?: const add = x => y => z => {
Q124: What's the output?: async function* range(start, end) {

Questions 125 to 155 (31)

Q125: What's the output?: const myFunc = ({ x, y, z }) => {
Q126: What's the output?: function getFine(speed, amount) {
Q127: What's the output?: const spookyItems = ['👻', '🎃', '🕸'];
Q128: What's the output?: const name = 'Lydia Hallie';
Q129: What's the output?: const randomValue = 21;
Q130: What's the output?: const myPromise = Promise.resolve('Woah some cool data');
Q131: What's the output?: const emojis = ['🥑', ['✨', '✨', ['🍕', '🍕']]];
Q132: What's the output?: class Counter {
Q133: What's the output?: const myPromise = Promise.resolve(Promise.resolve('Promise')
Q134: How can we invoke sum in sum.js from index.js?: // sum.js
Q135: What's the output?: const handler = {
Q136: Which of the following will modify the person object?: const person = { name: 'Lydia Hallie' };
Q137: Which of the following will modify the person object?: const person = {
Q138: What's the output?: const add = x => x + x;
Q139: What's the output?: class Counter {
Q140: What's missing?: const teams = [
Q141: What's the output?: const person = {
Q142: What's the output?: class Bird {
Q143: Which of the options result(s) in an error?: const emojis = ['🎄', '🎅🏼', '🎁', '⭐'];
Q144: What do we need to add to the person object to get ["Lydia Hallie", 21] as the output of [...person]?: const person = {
Q145: What's the output?: let count = 0;
Q146: What's the output?: function getFruit(fruits) {
Q147: What's the output?: class Calc {
Q148: What's the output?: const user = {
Q149: What's the output?: const fruit = ['🍌', '🍊', '🍎']
Q150: What's the output?: const animals = {};
Q151: What's the output?: const user = {
Q152: What's the output?: const promise1 = Promise.resolve('First')
Q153: What should the value of method be to log { name: "Lydia", age: 22 }?: const keys = ["name", "age"]
Q154: What's the output?: const createMember = ({ email, address = {}}) => {
Q155: What's the output?: let randomValue = { name: "Lydia" }

How I'd use this

Answer out loud before you open the answer. Frontend interviews test how you explain, not what you recognise.
Open DevTools while you revise CSS. Change a property, watch what happens, and you'll remember it.
Do 10 JavaScript output questions a day. Write down why for every one you get wrong.
Build the 3 things above, deploy them, and put the links on your resume.

Next: 518 JavaScript interview questions and 446 React interview questions.

Follow @avi_vashishta29 for one practical AI dev resource a day.

← Portfolio · Blog