You get that interview invite and suddenly your brain’s doing cartwheels. You start thinking about live coding interview, console errors that make no sense, and that one React question you hope doesn’t come up. I’ve been there, frozen mid-sentence when asked about event bubbling or flexbox quirks I swore I knew cold.

Front-end interviews aren’t just about code; they test how you think under pressure. From HTML basics to React state management and accessibility traps, it’s a mental obstacle course. In this post, I’ll walk you through the front-end interview questions that come up over and over again, plus the kind of answers that actually land offers.

I built Interview Coder to help with precisely this: an AI Interview Assistant that throws you real questions, gives instant feedback, and enables you to prep smarter without wasting hours scrolling through random question dumps.

Top 56 Front-End Developer Interview Questions for Freshers

1. What Are Meta Tags In HTML?

Stuff You Stick In The <Head> So Browsers Know What’s Up.

Meta tags sit in the head of your Hypertext Markup Language (HTML). They don’t show on the page, but they do tell browsers things like:

What language are you using
How to scale it on mobile
What the page is called
And what it’s about (helpful for Google)

2. Name A Few Basic Design Elements

The Legos Of Visual Stuff

Design’s not just "make it pretty." Here are a few basics:

Line: Edges, dividers, anything linear
Size: Big vs small; what draws your eye first
Texture: Smooth? Grainy? Feels like something
Color: Obvious but also not. Hue = the color. Value = light or dark. Intensity = how strong.

3. What’s Load Balancing?

Spread The Traffic Out So Your App Doesn’t Cry

When you’ve got a bunch of users hitting your site, you don’t want all of them hammering one poor server. Load balancers send traffic to different backend servers to keep everything running smoothly.

4. What Does NPM Stand For?

It’s How You Install Stuff In JS Land

NPM (Node Package Manager). It’s the thing you use to install libraries (like React), manage dependencies, and run scripts in your project. Basically, your terminal’s best friend if you write JavaScript.

5. What Is The Scope In JavaScript?

Where A Variable Can Be Seen And Used

Variables don’t live everywhere. Some only work inside functions (function scope). Others respect {} blocks (block scope). JS decides what’s accessible based on where it was declared.

6. How are JavaScript and jQuery Different?

One’s The Language. One’s A Shortcut

JavaScript is the real thing. jQuery is a helper library that made JS easier back in the dark ages of Internet Explorer. You’ll still see it, but don’t lead with it.

7. What is a Content Security Policy (CSP)?

A Rulebook That Tells The Browser What It Can Load

CSP is a header your server sends to say, “Only load scripts from these places.” It helps block shady scripts from running on your page.

8. What is Cross-Site Scripting (XSS)?

When Destructive Code Gets Into Your Site And Runs In Someone Else’s Browser

Attackers inject scripts into your site so that users get hit. Protect yourself by cleaning inputs, encoding outputs, and setting a strict CSP.

9. What’s User-Centered Design?

Build Stuff People Actually Want To Use

Instead of guessing, you test your designs with real users, see what breaks, and fix it. It’s less about what looks cool and more about what works.

10. What’s Callback Hell?

When Your Async Code Turns Into A Pyramid Of Doom

You nest so many callbacks inside callbacks that the code gets unreadable. Fix it by switching to Promises or async/await. Trust me, your future self will thank you.

11. Polymorphism

One Function Name. Different Result

I remember first seeing this in Java and thinking, “Wait, how is the same method working across different objects?” Turns out, that's the whole point. With polymorphism, the same method name can live across multiple objects, each doing its own thing. It’s like one button on your UI that opens completely different menus depending on who’s logged in. Wild.

12. Strict Mode

JavaScript, But With Some Discipline

Strict mode in JavaScript is like flipping the “don’t be sloppy” switch. It stops you from doing weird stuff like creating undeclared variables or failing silently. If you've ever screamed at your browser, wondering why nothing works, enabling this might’ve saved your keyboard.

13. KISS Principle

Keep It Simple, Stupid

Honestly, this one punched me in the gut early on. I used to over-engineer everything. Then I learned: simple is king. KISS is just a reminder that clever code isn't better, it's usually worse. The best code reads like a to-do list, not a riddle.

14. SOLID

No, It’s Not A Protein Shake

It’s five principles that’ll keep your OOP code from becoming spaghetti:

S: Single Responsibility
O: Open/Closed
L: Liskov Substitution
I: Interface Segregation
D: Dependency Inversion

If this sounds heavy, don’t worry. You’ll mess it up a few times, then suddenly it clicks.

15. ClickJacking

When The Web Tricks You

Clickjacking is like putting an invisible layer over a button and convincing someone to click it. Think: fake download buttons or hidden likes. To stop it? Lock down your site with X-Frame-Options or CSP frame-ancestors. Don’t let random sites iframe your stuff.

16. Type Coercion

Javascript Doing Javascript Things

You write 5 + "5" and it gives you "55" instead of 10, and you wonder if your brain's broken. That's coercion. JavaScript tries to be “helpful” by converting types behind the scenes. Know when it’s happening, or it’ll bite you hard during debugging.

17. IIFE

A Function That Minds Its Own Business

Immediately Invoked Function Expressions (IIFE) are like self-contained thoughts. You write a function, and boom, it runs right away. Great for keeping stuff out of the global scope and avoiding side effects. Classic move before ES6 modules became a thing.

18. CSS Grid Systems

Boxes In Rows And Columns, Done Right

Building layout with floats? I’ve been there. Stop the madness. CSS Grid gives you proper rows and columns that behave. Want a 3x3 dashboard layout? CSS Grid will actually listen instead of fighting you every step of the way.

19. Mixins

Copy-Paste, But Cleaner

Mixins let you reuse chunks of CSS (especially in Sass). Instead of repeating border-radius: 5px everywhere, you write it once in a mixin and include it wherever. Keeps your code DRY. Saves your sanity.

20. Page Speed

Faster Sites Win. Period

Here’s the cheat sheet:

Compress your images
Minify your CSS/JS
Use caching
Lazy-load offscreen stuff
Don’t ship garbage you don’t need

That’s it. Page speed isn’t mysterious; it’s just about not being sloppy.

21. Semantic HTML

Tag Things With Meaning, Not Just Style

Using <div> for everything is like labeling all your files “stuff”. Use <header>, <main>, <section>, etc., and suddenly your markup actually makes sense to screen readers, SEO bots, and future-you.

22. Inline vs Block Elements

Know How Elements Behave

Inline elements (like <span>) sit inside a line. They don’t break the layout.
Block elements (like <div>, <p>) take up space, and they start on a new line.
Simple rule: if it feels like a sentence part, it’s inline. If it feels like a container, it’s a block.

23. HTML Lists

Bullets, Numbers, And Definitions: Pick Your Fighter

Unordered List

<ul> + <li> → plain old bullets

Ordered Llist

<ol> + <li> → numbered steps

Definition List

<dl>, <dt>, and <dd> → term and definition pairs

Want A Quick Checklist?

<ul>

<li>Learn HTML</li>

<li>Write cleaner code</li>

</ul>

24. <div> vs <span>: Stop Confusing Them

I used to just throw <div>s everywhere like duct tape. If something broke layout-wise, boom wrap it in another <div>. Worked… until it didn’t. Here’s the simple rule:

<div> is block-level. Think of it like a box that takes up the whole line.
<span> is inline. Like a highlighter inside a sentence.

Use divs to group big chunks. Use spans when you don’t want line breaks.

25. What’s <!DOCTYPE html> Actually Doing?

It’s not some magic spell. It's just telling the browser, “Yo, this is HTML5. Don’t go into weird quirks mode.” You only need one line:

<!DOCTYPE html>

Stick it at the top of your HTML file and move on.

26. <iframe>: The YouTube Embed Classic

Anytime you see a map or a video inside a page, that’s probably an iframe doing the heavy lifting. It’s like a mini browser window inside your browser. Useful? Yup. Messy if you don’t sandbox it? Also yup.

27. <b> vs <strong>: They Look The Same, But...

I used to think they were identical. But <strong> actually means something. Screen readers pick it up as necessary.

<b> is just bold.
<strong> is bold and semantic.

Visually similar. Accessibility-wise? Not even close.

28. Meta Tags: Not SEO Hacks, Just Page Setup

You’re not going to rank #1 because you added <meta name="author">, okay? But meta tags do matter for setting up your page right. Charset, viewport, description, etc. they all live in the <head> like polite little header gremlins.

29. What Even Are Tags In HTML?

They’re just instructions wrapped in angle brackets.

Start tag: <p>
End tag: </p>
Attributes live inside: <a href="link">

That’s it. That’s 90% of HTML.

30. CSS: The Reason Your Site Doesn’t Look Like Craigslist

CSS is the ruleset for visuals. Layout. Fonts. Colors. Responsiveness. Write some selectors, set some properties, and make things not look terrible.

31. CSS Selectors: Who Gets Styled

Selectors are how you point to stuff in HTML so you can style it.

Element: p
Class: .box
ID: #main
Wildcard: *
Attribute: [type="text"]
Pseudo: :hover, ::after

If this part confuses you, play with the Chrome dev tools for an hour. Worth it.

32. visibility: hidden vs display:none: They’re Not Twins

These two confuse beginners every time.

visibility: hidden = it's invisible but still takes up space
display: none = it’s gone. The layout forgot it ever existed

Want to hide something temporarily without breaking the layout? Go with visibility.

33. CSS Grid vs Flexbox: Use both. Stop Choosing.

This isn’t a fight. They do different things:

Grid = 2D (rows and columns)
Flexbox = 1D (row or column)

I use Grid for full-page layouts and Flexbox for nav bars, cards, footers, etc.

34. float: The OG Layout Hack

Back before Grid and Flexbox, we used float. You float things left or right and then use clear: both and hope it doesn’t explode.

Still useful for text wrapping around images. Otherwise… probably don’t use it.

35. JavaScript: The Thing That Makes Your Site Feel Alive

You want buttons to do stuff when clicked? Modals to open? Form validation? That’s all JavaScript. It's like the glue between static HTML and interactive behavior.

36. let vs var vs const: Not Just Vibes

Here’s the cheat sheet:

var: old school, function-scoped, weirdly hoisted
let: block-scoped, more predictable
const: same as let, but you can’t reassign

I default to const. Then let me know if I need to reassign. Never var. Ever.

37. == vs ===: Do You Like Surprises?

== will convert types behind your back
=== checks value and type

5 == '5' // true

5 === '5' // false

Use ===. Always. Your future self will thank you.

38. The DOM: HTML, but As A JavaScript Playground

DOM stands for Document Object Model. It’s how JavaScript sees your page. Want to change some text, hide a button, or listen for a click? You’re touching the DOM.

39. Null Vs Undefined: Similar, But Not Interchangeable

undefined = JavaScript doesn’t know what it is
null = You told it it’s nothing

let a; // undefined

let b = null; // null

One is accidental, the other is intentional.

40. React: The UI Library That Took Over The World

React is what I used to land interviews with real companies, not just tutorials. It’s all about components. Reusable pieces of UI that manage their own state.

JSX

HTML inside JavaScript

Virtual DOM

Fast updates

Props + State

Your new best friends

Don’t get lost in the tooling. Just build stuff.

41. What Actually Makes a React App Tick?

Let me break this down like I would to my younger self, panicking the night before an interview.

Components

These are like reusable Lego bricks. You snap them together to build your app. They return JSX (more on that in a sec).

JSX

Feels like writing HTML in JavaScript. It’s fake HTML that turns into real UI when React does its thing.

Props

Data is passed into components from the outside.

State

Data the component keeps for itself, like a personal diary.

Context

If props feel like passing notes in class, think of context as a loudspeaker, share data across components without repeating yourself.

Virtual DOM

React’s way of saying “Don’t touch the real thing unless you absolutely have to.” It compares versions in memory before making changes, which keeps things fast.

You don’t need to memorize all that. But you do need to use them like muscle memory.

42. Wait: What’s the Virtual DOM?

If the real DOM is your apartment, the virtual DOM is a sketchpad version where React figures out what to rearrange before making any changes. It means React doesn’t blindly repaint your UI; it only changes what actually changed. That’s why it feels snappy.

43. JSX = HTML (Kinda) in JavaScript

JSX looks like HTML, but you’re still in JavaScript land. When you write:

function App() {

return <h1>Hello, React!</h1>

}

You’re not writing HTML. You’re writing JavaScript that looks like HTML, and React turns it into real UI code behind the scenes.

If you try to do it without JSX, it's like building Ikea furniture without the manual. Technically possible, but why suffer?

44. React Components: Functions That Return UI

There are two types of React components:

Functional Components

These are just functions. You write a function, return some JSX, and you're good.

Class Components

The old-school way using ES6 classes. They're still around, but most people have moved on.

Today, everyone’s using functional components + hooks. If you’re still clinging to class components, it’s like coding with a flip phone.

45. Angular: Full Stack with Opinions

Angular is like that strict teacher who wants things done exactly one way. It’s built with TypeScript, comes with a ton of rules, and has its own way of handling templates, routing, dependency injection, and more. If you want structure for building large apps, it gives you a lot (sometimes too much).

I tried it once. Felt like getting into a relationship where everything needs to be scheduled, color-coded, and blessed by three architects.

46. AngularJS: The Prequel

AngularJS is the original version before Angular 2 rewrote the playbook with TypeScript. It was cool back when jQuery was still hot.

Think of AngularJS as Angular’s awkward teenage years, all JavaScript, all the time, and kinda messy once your app gets big.

47. Angular Components: HTML + TypeScript + (Optional) Drama

Every Angular component has three main parts:

A TypeScript class to handle logic
An HTML template to show stuff
Optional CSS to make it pretty

Here’s a quick look:

@Component({

selector: 'app-header',

templateUrl: './header.component.html',

styleUrls: ['./header.component.css']

})

export class HeaderComponent {

@Input() title: string

@Input() links: { name: string, url: string }[]

}

It’s like React components, but with more ceremony. You’ll probably spend more time setting things up before you get to the fun part.

48. What is Two-Way Data Binding in Angular?

Think of it like a conversation. Change something in the UI? The model hears it. Update the model? The UI gets the memo. No middleman, no manual syncing just automatic back-and-forth between your data and what’s on screen. Super helpful when you don’t want to play whack-a-mole with inputs and state.

49. What is Lazy Loading in Angular?

Why load the whole house when you just need the kitchen? Lazy loading waits until a user actually needs a feature before it loads the code for it. It keeps your app fast when it matters most at launch. I didn’t take this seriously early on and paid for it with slow load times and bounce rates that made me cry.

50. What Are Angular Pipes?

Pipes are like little helpers that clean up your data before it hits the page. Want your timestamp to look like an actual date? Use a pipe. Want to add a dollar sign to your prices? Pipe it. It's just {{ value | pipeName }} and you’re in business.

51. What Is Vue.js?

Vue’s like the chill friend who doesn’t ask for much but still shows up. It’s a front-end framework that’s light, easy to get started with, and surprisingly powerful once you peel back the layers. I built my first SPA with Vue in a weekend, no rage-quitting required.

52. What Are VueJS Components?

You know how Lego bricks click together to make a spaceship? That’s what Vue components are. Tiny, reusable chunks of UI that make your app way easier to build and way less chaotic to maintain.

53. What Are Props in VueJS?

Props are how you send data from parent to child, like handing down a family recipe. They let one component give another a piece of data without messing with global state or weird workarounds. Dead simple once you try it:

Vue.component('child-component', { props: ['propName'] })

54. What Is A VueJS Router?

Vue Router handles your app’s URLs basically, it’s the thing that tells your app, “Hey, when someone goes to /profile, show them the profile page.” It keeps everything feeling like a real website, even though it’s all running inside a single-page app.

55. What Is Git?

Git is how devs save their work without fear of messing everything up. Want to experiment with new code? Branch it. Want to undo that experiment because it broke everything? Roll it back. Git has your back locally, offline, anytime.

56. What Are The Advantages Of Using Git?

Here’s the real reason teams love Git:

You can break stuff safely
You can see what changed, when, and by whom
You can work on the same code with other people without tripping over each other
It works with GitHub, GitLab, and CI tools,s so your workflow isn’t glued together with duct tape

57. Explain The Difference Between Git and GitHub.

Git is the tool. GitHub is the platform.

Git runs on your machine, allowing you to commit, branch, merge, and repeat.
GitHub operates online with features like pull requests, issue tracking, and team collaboration.

I use Git every day. GitHub? Only when I’m ready to show my work (or argue with my reviewer).

58. What Is A Repository In Git?

A repo is your project’s memory. Every file, every change, every “oops I messed up” — it’s all tracked. Locally, it’s just a folder with a hidden .git folder. Remotely, it’s where your team syncs up. Think of it like Dropbox for code, but with history.

59. What Are The Two Types Of Repositories?

You’ve got two:

Local

lives on your laptop, like a dev sandbox

Remote

lives online (GitHub, GitLab, etc.), where teammates can push/pull code

Local is where you experiment. Remote is where the team meets up. You’ll be using both. A lot.

31 Frontend Developer Interview Questions - Intermediate

1. What is localStorage?

Persistent Key-Value Storage In The Browser

It’s like a tiny, sticky notebook in your browser. You can stash strings as key-value pairs that stay put even after a page reload or browser restart. Useful for stuff like feature toggles or theme settings. Not for passwords. Not for giant blobs. It’s synchronous, so keep it light.

localStorage.setItem("theme", "dark");

localStorage.getItem("theme"); // "dark"

Each browser gives you about 5–10MB per domain. When in doubt, use it for quick UI stuff — not real app state.

2. What is sessionStorage?

Tab-Specific Temporary Storage

Think of it like localStorage’s more forgetful sibling. Same API, but the data dies when you close the tab. It’s good for short-term stuff like onboarding flows or form states you don’t want sticking around.

sessionStorage.setItem("step", "2");

Great for "don’t save this forever" use cases, just don’t rely on it across tabs or sessions.

3. How do you create a table in HTML?

Structuring Data With Table Elements

Basic table syntax hasn’t changed in decades, and it still trips people up. Here's the bare minimum:

<tr>

<th>Country</th>

</tr>

<tr>

<td>India</td>

</tr>

</table>

Use <thead>, <tbody>, and <tfoot> if you want to get fancy. For screen readers, throw in scope="col" on <th> and don’t forget <caption> if the table needs a title. Bonus: Responsive tables are annoying, so go with stacked cards on mobile when you can.

4. Difference between GET and POST in forms

Choosing Between GET and POST

GET sticks the form data in the URL, visible, shareable, and bookmarkable. POST puts the data in the body more privately, better for changes that affect the server state.

If it’s a search box, GET.
If it’s changing something (like submitting a review), POST.

URLs have length limits. Don’t jam JSON in a GET request unless you enjoy debugging weird edge cases.

5. What are HTML attributes?

Modifying Elements With Attributes

Attributes = tiny modifiers you slap on HTML tags to make them behave.

Examples:

class="btn"
href="/about"
data-user-id="123"

data-* is your friend when you want to pass metadata without overengineering things. But don’t overuse it if you find yourself storing half your app logic in data-*, take a breath.

6. What Are Void Elements in HTML?

Tags That Don’t Babysit Content

These are the loners of HTML. Tags like <img>, <meta>, <link>, <br>, <input>, and <hr> don’t need a closing tag because they don’t wrap anything. You can’t stuff content inside them; they straight-up won’t allow it. If you forget and try to jam a <span> inside an <img>, HTML will look at you funny. Also, always use the alt attribute on images. Not just for accessibility, it’s how screen readers (and your future self, debugging) stay sane.

7. What is z-index in CSS?

Who Gets To Sit On Top

Think of z-index as seat priority in a messy UI. Whoever has the higher number shows up in front. Lower number? You’re in the back. Negative z-index? You're in the basement. But here’s where folks mess up: z-index only works inside a stacking context. That means stuff like opacity < 1, transform, and position + z-index combo will create their own little worlds. Be consistent. Don’t just throw 9999 at stuff because something's not stacking right — that’s how spaghetti code starts.

8. What Is the Box Model in CSS?

Why Your Layout’s Always Off By 12px

If you’ve ever screamed at a button that won’t line up right, welcome to the box model. Every element has four parts: content, padding, border, and margin. When you set the width, it usually means just the content unless you switch to box-sizing: border-box, which includes padding and border in the total width. That one line can save you hours of broken layouts. This is the kind of CSS math they don’t warn you about. Get this right or enjoy guessing games every time you design a card component.

9. What Is Flexbox?

The Cheat Code For Layout Sanity

Flexbox is what I wish I had when I was fighting float: left in 2015. It’s for laying stuff out in a single direction, row or column, and keeping things spaced, aligned, and behaving like adults. You set display: flex on the parent, then throw in justify-content, align-items, flex-grow, etc., and suddenly the UI listens. Great for nav bars, button groups, card layouts, basically any time you want things in a line without losing your mind.

10. How Can You Include CSS on a Page?

4 Ways To Style: Choose Your Battles

You’ve got options, but not all of them are smart long-term:

Inline: suitable for quick hacks, terrible for maintainability

<p style="color: blue;">Inline styles live here.</p>

Internal: rules inside a <style> tag, scoped to the page

External file: the cleanest, most scalable way

@import: chaining stylesheets (but watch your load time)
@import url("other.css");

My take? Go external by default. Keep things modular. Load only what matters early, and push the rest down the line. Inline styles are like duct tape, a quick fix, but if your whole app’s held together that way... good luck.

11. What’s a CSS preprocessor, really?

Why I Stopped Copying And Pasting CSS Like A Caveman

Look, writing the same five lines of CSS over and over isn’t a badge of honor; it’s a time sink. Once I hit my third real project, I gave up and used syntactically awesome style sheets (SASS). It lets you use variables, nesting, little helper functions, the stuff CSS should’ve had from day one. Preprocessors compile into regular CSS, so the browser doesn’t care. If you're deep in React, you might lean toward CSS-in-JS or PostCSS instead. No silver bullet here. Just pick what your team won’t rage-quit over.

12. What is hoisting in JavaScript?

JS is Weird, But At Least This One Is Predictable

Back when I started, I spent hours trying to figure out why a variable I hadn’t “written yet” still existed. Surprise: JavaScript moves declarations (not assignments) to the top during compilation. That’s hoisting.

var? It gets hoisted and set to undefined
let and const? They’re hoisted too, but unusable until they're actually defined (hello, temporal dead zone)
Functions? You can call them before they appear because JS lifts them fully

I don’t write code that depends on hoisting anymore; it’s not a magic trick. It's just noise when you’re trying to debug.

13. Implicit vs. Explicit Type Conversion in JavaScript

JS will Do Weird Stuff Unless You Tell It Not To

"5" + 1 turning into "51" is the kind of thing that makes people scream into their keyboard. That’s implicit conversion JS trying to guess what you meant. Want control? Go explicit use Number(), String(), or Boolean() so your intentions aren’t lost in translation. Especially useful when you're dealing with APIs or user input. I’ve seen bugs that only show up when someone types a space in a form field. You don’t want that in prod.

14. What is Implicit Type Coercion in JS?

JS Being “Helpful” In All The Wrong Ways

JS thinks it’s doing you a favor when it turns "5" - 2 into 3. That’s implicit coercion.You didn’t ask for it. It just... happens. It’ll happily turn false into 0, or [] into an empty string.If you’ve ever gotten NaN in a calculation and had no clue where it came from, yeah, that.Use === instead of ==. Write explicit casts when comparing types. Save yourself the 3 am debugging session.

15. Closures: Not Just For Interview Questions

They’re Weird, But They’re Everywhere

Closures sound fancy, but really, it’s just a function remembering the variables from where it was created.

Example:

function outer() {

let count = 0;

return function inner() {

count++;

return count;

}

const counter = outer();

counter(); // 1

counter(); // 2

Useful for memoization, factories, or hiding private values. Just don’t let them hold onto large objects forever; that's how memory leaks sneak in.

16. What Does This Actually Mean In JavaScript?

Context. Context. Context

JS’s this is like that one friend who changes their personality based on who they’re talking to.

Inside a method: this is the object
Inside a regular function (strict mode): this is undefined
In constructors: it’s the new object being made
In arrow functions: this is whatever it was in the outer scope.

If you’re confused, use .bind() or .call() to lock it down. Or avoid this entirely and stick to arrow functions, no shame in that.

17. How Does JSX Actually Run In The Browser?

Spoiler, it doesn’t. Not directly.

The browser doesn’t know what JSX is. It’s just sugar that gets compiled into React.createElement(...) calls. That’s where Babel comes in. During your build step, Babel rewrites your JSX into plain JS that the browser understands. You can’t skip this unless you like error screens.

Just make sure your project has the proper Babel setup, bundler config, and presets. Once it’s working, it’s mostly out of sight. Until something breaks, of course, then you’re back in node_modules hell.

18. What is a React Router?

Making Your Url Do More Than Just Sit There

React Router is how I stop React apps from feeling like a one-page resume. I remember building my first dashboard and wondering why clicking around didn’t change the URL, which felt broken. Then I found React Router. It's just a set of components, BrowserRouter, Route, Link, and useNavigate that let your app behave like a "real" website. You can build nested routes, protected routes, anything. Once you use it, plain React feels like walking without shoes.

19. What are Hooks in React?

State And Side Effects Without The Class Baggage

When React Hooks came out, I was that guy who rewrote everything in my project just to use them. I’m not proud of it, but I get it now. Hooks like useState, useEffect, and useRef let you do all the stuff class components did without the boilerplate. You want logic in small pieces you can reason about? Hooks. You want to make a mess and forget rules? Still hooks, but React will yell at you. Follow the rules of hooks, check React DevTools when things slow down, and you’ll start writing code that doesn’t feel like duct tape.

20. What are Custom Hooks in React?

Your Chance To Stop Copying The Same Logic 5 Times

If I had a dollar for every time I copied the same fetch/useEffect logic across files before writing a custom hook… well, Interview Coder would’ve been bootstrapped earlier. Custom hooks are just regular functions that use other hooks, nothing magic. But they help keep your code clean. Think of them as wrappers for logic you use more than once: form handling, API calls, toggle states. Keep ’em short. Don’t be the person with a 200-line hook doing five things and crying in their test files.

21. What are Lifecycle Methods in React?

The Old-School Way React Components Told You What They’re Doing

Before hooks, lifecycle methods were how React class components told you, “Hey, I just mounted,” or “Hey, props changed.” You had componentDidMount, componentDidUpdate, shouldComponentUpdate, etc. It felt like React was giving you walkie-talkies for each phase. Now we use useEffect or useLayoutEffect in functional components for the same thing. If you're stuck maintaining legacy code, you'll still see these, just don’t bring them into new code unless you enjoy chaos.

22. What are the Main Features of Angular?

When You Want Everything In One Box (Whether You Need It Or Not)

Angular’s like that coworker who brings a complete toolset to fix a loose screw. You get two-way binding, dependency injection, built-in HTTP tools, routing, CLI commands, and the works. If you're building something huge and love structure, Angular has opinions, and it's not shy about them. If you're more of a React/Vue dev, Angular can feel heavy. But hey, the CLI slaps and RxJS is wild (in both good and bad ways).

23. What is Angular CLI?

Your Fastest Way To Not Get Lost In Angular Folder Hell

Angular CLI is the one thing that made me not rage-quit when I tried Angular for the first time. You type ng new and bam, a whole app, with all the correct folders, dependencies, and boilerplate. It’s like having a neat freak teammate that sets up everything for you. Use ng generate, ng build test, and you’ll look like you know what you’re doing, even if you’re just copying StackOverflow.

24. What is a Module in Angular?

Making Your Features Play Nice Without Stepping On Each Other

Modules in Angular are like folders with superpowers. You bundle up components, services, directives, pipes, and tell Angular, “Hey, this is one unit.” Then you decide what to share and what to keep private. Helps with lazy loading and team ownership. Think: feature-first structure if you organize by type (like components/, services/), your future self will hate you. Been there.

25. What is a Directive in Angular?

Teach Your HTML Some New Tricks

Directives in Angular let you bend the DOM to your will responsibly. There are structural directives like *ngIf and *ngFor to add/remove stuff, and attribute directives like ngClass or ngStyle to change how things look. You can also build your own, which I did once to auto-focus an input. Felt like wizardry. Use them when you want logic tied to the view, but don’t want to create a whole component just to add a behavior.

26. What is Scope and Data Binding in AngularJS?

How Angularjs Glued Your Data And Dom Together (And Sometimes Made A Mess)

Back in AngularJS, scope was how you got data into templates. You changed a value in the controller, and boom, the view updated. Sounds great, until it didn’t. Two-way binding was robust, but debugging was like playing whack-a-mole. Most modern frameworks now prefer one-way data flow. It's easier to track what changed and why. So yeah, RIP $scope, but thanks for the memories.

27. What is a Vue Instance? How Can We Create One?

Meet The Object That Kicks Off Your Vue App

The Vue instance is like the root of your app’s family tree. In Vue 2, it’s new Vue({}), and in Vue 3, it’s createApp({}). You pass in data, methods, lifecycle hooks, and mount it to a DOM element. That’s it. Think of it like saying: “Hey Vue, start here and take over this part of the page.” It’s clean, simple, and doesn’t make you scroll 500 lines just to understand what’s going on.

28. What is a Watcher in VueJS?

Run Code When Your Data Changes: On Purpose

Watchers in Vue are like: “Hey, if someValue changes, I want to do X.” You use them for async stuff like waiting a bit before calling an API or syncing with an external library. But don’t use them for everything. If you're just calculating something from other data, use computed properties instead. Watchers are great when you want that manual control, just don’t go wild with them, or you’ll be debugging for days.

29. Explain Virtual DOM in VueJS

Vue's Trick To Update The Page Without Making Your Laptop Cry

Vue uses a virtual DOM because updating the real DOM is slow. Like, "your app stutters when typing" slow. So Vue keeps a lightweight copy in memory. When something changes, it compares the old and new versions, then updates only what’s different. It’s like smart copy-paste. Faster updates, fewer bugs, and you don’t have to think about it unless you forget to add a key in your v-for, then you'll wish you had.

30. Explain Hooks in VueJS

The Part Of Vue 3 That Made React Devs Stop Complaining

Vue 3 added something called the Composition API, aka “hooks.” You use them inside the setup() function to do stuff like manage state, listen to lifecycle events, and share logic. It’s clean, composable, and if you’ve used React Hooks, you’ll pick it up fast. Just remember: onMounted, onUnmounted, ref(), watch(). Those are your new friends. Everything else is a bonus.

31. What is Vue CLI, and How Is It Used?

Stop Wasting Time Setting Up Webpack

Vue CLI is what you use when you want to start coding now and not spend three hours configuring Babel. You run vue create, pick your options, and you’ve got a working app. It comes with stuff like hot reload, linting, and testing out of the box. You can even install plugins later with Vue add. It's like the express lane for shipping Vue projects, and yeah, it actually works.

36 Front-End Developer Interview Questions for Experienced

1. What is an anchor tag in HTML?

How Links Actually Work (And How Not to Screw Them Up)

It’s <a>, not magic. This tag connects stuff to pages, sections, emails, and phone numbers. You throw in an href, and now your button or link actually does something. Want it to open a new tab? Add target="_blank".

Don’t want your tab to get hijacked? Pair it with rel="noopener noreferrer". Accessibility? Make your link text make sense out of context. "Click here" is a crime. Oh, and if you're working with React or Vue? Know when to use native anchors vs router links; it matters for SEO and screen readers.

2. How To Create Scrolling Text Or Images On A Webpage?

Marquee Is Dead. Here’s What’s Not Embarrassing

If you even think about using <marquee>, we need to talk. That thing's been retired since before TikTok existed. You want smooth scrolling? Use CSS @keyframes with transform, such as translateX. Want to scroll only when it’s on screen? Use IntersectionObserver. Want it to loop? Duplicate the content inside the container and animate the wrapper. Bonus points if you prefer reduced motion. Nobody likes nausea with their UI.

3. How Can You Apply JavaScript in your HTML?

Script Tags That Don’t Blow Up Your Page Load

Three options:

Inline scripts (meh, only for tiny stuff).
External scripts with <script src="..."> (do this).
<script type="module"> if you're not living in 2014.

Use defer so your JS waits until the DOM is ready. Use async if it doesn't depend on anything else. No one wants a flickering page because your scripts are blocking rendering. And stop using onclick="...". Add your listeners in the JS file like a grown-up.

4. How do you merge rows and columns in an HTML table?

Making Tables Less of a Mess

Need to combine cells? Use colspan for columns and rowspan for rows. Cool. But keep your structure honest <thead>, <tbody>, <caption>. Don’t make a table just to center two buttons; use flexbox like the rest of us. Also, if someone can’t tab through your table logically, that’s on you.

5. What’s The Deal With <figure> and <figcaption> in HTML5?

Wrangling Images and Text So They Make Sense Together

You’ve seen this image + awkward floating label = chaos. <figure> wraps your image, <figcaption> gives it a built-in caption. Clean, readable, and it means something to assistive tech. Use it with <picture> and srcset to serve the right image at the right size, more control, less guesswork.

6. What are pseudo-classes and pseudo-elements in CSS?

Add Style Without Cluttering Your HTML Like a Hoarder

Want to style a link on hover? That’s a pseudo-class::hover. Want to put something before an element without adding HTML? That’s a pseudo-element:::before. These are your secret weapons when you want to make things interactive without blowing up the DOM. Just don’t forget: specificity will betray you if you get cocky. Test. Everything.

7. What’s the Deal with Media Queries in CSS?

Style That Adapts Like It’s Paying Attention

Back when I built my first responsive layout, I had no clue what I was doing. I just copied and pasted some @media rules from StackOverflow and prayed it wouldn’t break on iPads. Spoiler: it did.

Media queries let your styles pay attention; they apply rules only when the screen (or device) hits certain conditions: width, orientation, resolution, or even user settings like dark mode. I keep it simple, like writing base styles for small screens and then stacking changes for bigger ones. That’s mobile-first, not because it’s trendy, but because it’s harder to scale down than up.

Pair media queries with stuff like rem, %, and vw, and you’ll stop chasing pixel-perfect perfection across 12 devices. Also, does your browser support container queries? Game-changer. But that’s for another post.

8. How I Actually Build Responsive Layouts

Real Patterns That Don’t Break Under Pressure

I used to think "responsive design" meant sprinkling in some @media breakpoints and calling it a day. Nope.

Here’s what I rely on now:

Use max-width and percentage widths; fixed pixels are a trap.
Flexbox is when you need items to flow in one direction and actually behave.
CSS Grid, when layouts get more complicated than my relationship with TypeScript.
srcset and picture tags for images that don’t punish mobile users.
Lazy loading so your page doesn’t chug on first paint.

Also: test your layout on something that isn’t your $3,000 MacBook Pro. Your users probably aren’t using that.

9. How I Keep CSS from Slowing Things Down

The CSS Weight-Loss Plan That Actually Works

Look, shipping a single giant cascading style sheet (CSS) file is like packing your whole wardrobe for a weekend trip. You could, but why?

Here’s my go-to:

Inline only the CSS needed for the first thing users see.
Use rel="preload" to hint at what’s coming, or lazy-load non-critical styles.
Bundle and minify. Obviously.
Gzip or Brotli because nobody wants to download your styles uncompressed.
Add cache headers that don’t expire every Tuesday.
Use CSS modules or scoped styles so your components aren’t stepping on each other.

Tools like Chrome DevTools can show you which styles are slowing your render path. Don’t guess. Check.

10. What “Cascading” Actually Means in CSS

When Styles Argue, Here’s Who Wins

Cascading is the reason your H1 looks weird, even though you “definitely” set the color.

Here’s the truth:

CSS comes from multiple sources, such as browser defaults, your styles, and user settings.
The browser uses a point system (specificity) and a tiebreaker (order) to pick the winner.
Inline styles beat class selectors. ID selectors beat classes.
The last rule wins if the specificity ties.

Once I understood this, debugging stopped feeling like dark magic. You don't need to memorize the whole cascade chart. Just learn how the browser thinks.

11. Redux: The State Manager That’s Overkill… Until It’s Not

Predictable State If You’re Into That Kind Of Thing

The first time I saw Redux, I bounced. Too much boilerplate. Too many rules. But when your app gets big, messy, and full of side effects, Redux starts to make sense.

Why I use it (when I actually need it):

It stores everything in one place, so I don’t have to prop-drill through a six-layer component tree.
The flow is simple: action → reducer → new state.
Middlewares like redux-thunk or redux-saga let me control async behavior without spaghetti code.
Selectors and reselect help me avoid re-render hell.

But for small apps? Probably overkill. Context usually does the job.

12. React Context: Global Values, No Drama

Skip The Prop Parade

I use Context when I don’t feel like passing props through components that couldn’t care less. Theme, locale, and auth info. Context is excellent for those.

Just do this:

Create the context with createContext().
Wrap your app (or part of it) in a Provider.
Read the values using useContext().

If your value changes a lot (like live typing), it’ll trigger re-renders in everything using it. I’ve had that ruin performance before. So memoize, split contexts, or just… don’t put rapidly changing stuff there.

13. Context vs Redux: Pick Your Chaos

Context Is Chill. Redux Is Organized Chaos.

Let’s not pretend this is a “one is better than the other” thing.

Use Context when:

You can share something simple, like dark mode or user language.
You don’t need time travel, devtools, middleware, or fancy debugging.

Use Redux when:

Your app is juggling a lot of state across many parts of the tree.
You need control over side effects, normalized data, or selective updates.

Also, consider your team. If everyone already know Redux? Don’t reinvent the wheel. But if you’re solo and just want global access to a theme, use Context and call it a day.

14. What is Prop Drilling? (And Why It Makes Me Tired)

The Data Version Of Playing Telephone

Prop drilling happens when you pass props down just to hand them off again, like your component is a middleman in a drug deal.

You’ll know it’s bad when:

Your top-level component looks like an airport baggage handler.
You have to scroll just to find where a prop originally came from.

What I do instead:

Use Context or Redux if it’s global-ish.
Use custom hooks to encapsulate logic.
Rethink component boundaries; a deep prop chain is a code smell.

15. Debouncing in JS (The One Trick That Saved My API Bill)

Chill Before You Fire

You don’t need to call an API every time someone hits a key. Seriously.

Debouncing means waiting until the user stops typing (or doing stuff) before running the code. Great for:

Search boxes
Scroll or resize events
Form validation

It’s like saying “hold up” until things calm down. Use setTimeout or lodash.debounce if you’re lazy like me.

Debounce waits until things stop, throttle fires at intervals, no matter what. Know the difference, or you’ll confuse yourself later.

16. Java vs JavaScript: Different beasts, don’t mix them up

People love to argue online like “Java and JavaScript are so different!” Yeah, no kidding. But the confusion still trips up junior devs, and interviewers love sneaking it into trivia.

Here’s the truth:

Java gets compiled and runs on the JVM. Think backend services, banking software, stuff that needs threads and structure.
JavaScript is run in browsers (or Node), loosely typed, and async by nature — it’s everywhere because the web won.

Use Java when you care about raw performance and structure. Use JavaScript when you’re building interfaces or gluing APIs together. Don’t overthink it. Just don’t say “they’re kinda similar” in an interview unless you want a follow-up question you’ll regret.

17. What’s A Template Literal? Backticks With Superpowers

Back in the day, string concatenation in JS was a nightmare. Then came template literals. You slap backticks around your string and sprinkle in ${} wherever you need logic to kick in.

Example

const name = "Roy";

console.log(`Hey ${name}, prep smarter next time.`);

They’re great for:

Multi-line strings without \n madness
Embedding variables cleanly
Writing mini-templates (emails, HTML chunks, etc.)

Just sanitize anything going into HTML. You don’t want your site to turn into a pop-up ad for crypto scams.

18. Higher-Order Functions In React: Not Dead, Just… Older

Everyone’s married to hooks now, but higher-order components (HOCs) are still around and still helpful when done right.

What they do:

Take a component
Wrap it with extra logic (like auth, tracking, feature flags)
Return a new component with that stuff baked in

Use them for cross-cutting stuff that doesn't belong in your main logic. But keep them clean. Don't turn your component tree into a nesting doll of wrappers.

19. Temporal Dead Zone: The JavaScript “gotcha” Nobody Warned You About

TDZ sounds fancy, but it’s basically this:

If you try to use a let or const before declaring it, JS throws a fit. That window between scope entry and declaration is the “dead zone.”

Example

console.log(a); // ReferenceError

let a = 5;

Just declare your stuff before you use it. TDZ bugs are sneaky and dumb, like stepping on Lego in the dark—avoidable pain.

20. call() vs apply(): Same Same But Different

Both methods let you manually set this when calling a function.

call(thisArg, arg1, arg2, ...)
apply(thisArg, [arg1, arg2, ...])

Use call() if you’ve got arguments lined up. Use apply() when your arguments are sitting in an array already. That’s it.

If you want to keep the function but preset this and some arguments for later, use bind().

21. AngularJS Directive Types: Remember This For Trivia Rounds

AngularJS is old but still lurking in legacy codebases. Directives were a way to extend HTML. There are four types:

Element (<my-widget></my-widget>)

Attribute (<div my-widget>)

Class (<div class="my-widget">)

Comment ( )

In real life, you’ll mainly deal with elements and attributes. Class and comment directives are rarely worth the weirdness.

22. AngularJS Factory Method: Just A Fancy Name For A Reusable Function

A factory in AngularJS is a function that returns a thing (usually an object), and Angular injects it wherever you ask.

Good for

Creating services that hold shared logic or data
Keeping setup logic in one place
Making things testable with mockable factories

Factories are singletons, the same instance everywhere unless you’re deliberately breaking that.

23. Digest Cycle in AngularJS: Watchers Gonna Watch

Angular’s digest cycle is how it keeps the UI and data in sync.

When something changes, Angular:

Loops through all the watchers

Checks if anything has been updated

Re-runs until nothing’s left or it hits the limit

If your app feels slow, it’s probably too many watchers or too much happening during each digest. Start profiling and stop blaming the browser.

24. Angular Router: All Roads Lead To A Component

The Angular Router handles which component shows up when someone visits a URL. It supports:

Nested routes
Guards (like route-level auth)
Lazy loading (aka don’t load everything up front)

Structure your routes by features, not random folders. And don’t put too much logic in guards — they’re for access checks, not data juggling.

25. Lifecycle Hooks in Angular: When Your Component Does What

Angular gives you lifecycle hooks so you can plug into different moments of a component’s, well, life.

The big ones:

ngOnInit – run setup logic
ngOnChanges – react to input changes
ngOnDestroy – clean up subs and timeouts

Avoid shoving logic into ngDoCheck unless you hate yourself. Use OnPush if your components don’t need constant checking.

26. What is vue-loader?

How I Stopped Separating Files Like It Was 2012

I used to split my Vue components across three files, including HTML, JS, and CSS. Don’t ask. vue-loader saved me from that mess. It works with Webpack to handle .vue files like a grown-up template, script, and style in one place. You get hot reloading, scoped styles, support for Sass or TypeScript, and sane builds with code splitting baked in. Use it unless you hate yourself.

27. What Does v-cloak Actually Do?

The Vue Directive That Keeps Your App From Looking Broken

Ever load a Vue app and catch raw double curly braces on screen before Vue finishes loading? That flash makes me cringe. v-cloak hides your app’s uncompiled state by applying [v-cloak] { display: none } in your CSS. Once Vue mounts, it removes that attribute and shows the real deal. Use it for quick polish. Combine it with SSR or hydration if you’re fancy.

28. What is a Vue plugin?

Adding Stuff Globally Without Wrecking Your App

Vue plugins let you tack on features like global components, directives, or methods. You install them with app.use() (Vue 3) or Vue.use() (Vue 2). You’ll find them everywhere, from toast notifications to analytics. Just make sure yours doesn’t pollute the global state or break things silently. Been there and debugged that.

29. Who’s Actually Using VueJS in Production?

Yeah, It’s Not Just You In Your Bedroom

Think Vue is only for side projects? Netflix uses it for internal tools. GitLab uses it in their UI. Adobe, Xiaomi, and Alibaba are real companies shipping real products. Vue’s flexible enough for them, which probably means it’s fine for your to-do list too. But seriously, look at how these companies structure their apps if you want to learn from people doing it at scale.

30. How to Install VueJS Without Wasting Time

Get Started Fast Or Go Full Send

Here’s the stack:

CDN: Use this if you’re prototyping and don’t want a build step.
npm: For when you’re using a bundler.
Vue CLI: If you want a batteries-included setup (routing, state, linting).
Vite: This is my go-to: fast dev server, great DX, modern everything.

Use CDN when you want speed. Use CLI or Vite when you're building something you’ll actually ship.

31. Why Bother With "use strict"?

Your Silent Bugs Are Laughing At You

Add "use strict" and suddenly JavaScript stops letting you write cursed code. No accidental globals. No duplicate function args. This behaves like a real language. Just write modules or toss them at the top of your files. It’s like turning the lights on before stepping into a dark basement.

32. Attribute Vs. Property: What’s The Actual Difference?

Source-Of-Truth Fights Between HTML and JS

Attributes are what you write in HTML. Properties are what JavaScript sees after the browser parses the DOM. getAttribute() reads the original tag. element.value shows what’s going on now. Use attributes to set up the page, use properties to react to stuff in real time. Sometimes they sync. Sometimes they don’t. And that’s where bugs are born.

33. == vs ===:Just Don’t Embarrass Yourself

Type Coercion Is A Trap

== compares after converting both sides. 1 == "1" is true. Weird, I know. === compares both type and value, so it gives you fewer surprises. Always default to === unless you have a very good reason. And if you do use ==, write a comment. In the future, you will thank yourself.

34. Why Use srcset in <img> Tags?

Because Not Everyone Has Wi-Fi From The Year 2040

srcset lets the browser pick the right image size based on screen and resolution. Saves bandwidth. Looks crisp. Feels fast. Combine it with sizes, use WebP or AVIF, and throw in loading="lazy" for good measure. Mobile users (and your Core Web Vitals) will thank you.

35. Major HTTP methods that aren’t just GET and POST

Because Apis Speak More Than Two Words

HTTP isn’t just GET and POST. Here's the cheat sheet:

GET – Grab data
POST – Send new data
PUT – Replace existing data
PATCH – Update part of something
DELETE – Remove it
HEAD – Like GET but without the body (for checks)
OPTIONS – Ask what’s allowed

Know which ones are idempotent. Return the correct status codes. If your API returns 200 for everything, stop. Get help.

36. What’s “Progressive Rendering” and why should I care?

Show Stuff Early, Fix The Rest Later

You don’t need to load everything at once. Just make the above-the-fold content show up fast. Then load the rest while users are already reading. Use:

SSR or HTML streaming
Critical CSS
Lazy images/components
Resource hints like preload
Skeleton loaders

Faster first paint = better experience. Your site feels faster without actually doing more work.

Nail Coding Interviews with our AI Interview Assistant − Get Your Dream Job Today

I used to spend 4 hours a night drowning in LeetCode, trying to brute-force my way into a big tech offer. It sucked. Most of it wasn’t even helping, just noise. That’s when I started building something for myself, Interview Coder. Not some magic wand. Just a quiet weapon that sat beside me during interviews and typed when I couldn’t. No one saw it.

No one flagged it. But I started winning one by one. While your bootcamp buddy is panicking over their 300th binary tree problem, you could be cruising through interviews with an assistant that’s actually present when it matters. 87,000+ devs already figured this out. They’re not burning out on prep. They’re closing offers. Skip the grind. Keep your edge. Download Interview Coder and show up ready.