Junior Full Stack Developer Interview Questions: What to Prepare

Start with the Full Stack Fundamentals

A junior full stack interview usually checks whether you can explain how a simple web app works from browser to database: HTML and CSS structure the page, JavaScript adds behavior, React manages UI state, Node.js handles server logic, APIs connect the layers, SQL stores data, and Git keeps work reviewable.

Use this guide to practice concise answers first, then connect each answer to a small project you have built. Interviewers rarely expect deep architecture at junior level, but they do expect clear fundamentals, debugging habits, and honest explanations of tradeoffs.

How to prepare

• Be ready to walk through one project from UI event to API request to database query.
• Practice explaining errors you fixed, not only features you shipped.
• Keep answers practical: define the concept, give a small example, and mention one common mistake.

---

HTML & CSS

1. Explain the Box Model in CSS.

Answer: The CSS Box Model is the foundation of layout on the web. Every element is represented as a rectangular box.

• Content: The actual text or image.
• Padding: Transparent area around the content (inside the border).
• Border: A border that goes around the padding and content.
• Margin: Transparent area outside the border (creates space between elements).

Rarity: Very Common Difficulty: Easy

---

2. What is the difference between display: block, inline, and inline-block?

Answer:

• Block: Starts on a new line and takes up the full width available (e.g., <div>, <p>).
• Inline: Does not start on a new line and only takes up as much width as necessary. width and height properties have no effect (e.g., <span>, <a>).
• Inline-block: Like inline elements, but you can set width and height. Useful for grids or navigation menus.

Rarity: Common Difficulty: Easy

---

3. What is Semantic HTML and why is it important?

Answer: Semantic HTML means using tags that convey the meaning of the content, not just its appearance.

• Examples: <header>, <nav>, <article>, <footer> instead of just <div>s.
• Importance:
  • Accessibility: Screen readers use these tags to help visually impaired users navigate.
  • SEO: Search engines understand the structure and importance of content better.
  • Readability: Code is easier for developers to understand.

Rarity: Common Difficulty: Easy

---

4. Explain Flexbox vs. CSS Grid.

Answer:

• Flexbox: A one-dimensional layout model (row OR column). Best for aligning items within a container or distributing space (e.g., a navigation bar).
• CSS Grid: A two-dimensional layout model (rows AND columns). Best for defining the overall layout of a page (e.g., header, sidebar, main content, footer).

Rarity: Common Difficulty: Medium

---

JavaScript

5. What is the difference between var, let, and const?

Answer:

• var: Function-scoped (or globally scoped). Can be re-declared and updated. Hoisted to the top of its scope.
• let: Block-scoped (only exists within {}). Can be updated but not re-declared in the same scope.
• const: Block-scoped. Cannot be updated or re-declared. Must be initialized during declaration. Use this by default unless you need to reassign.

Rarity: Very Common Difficulty: Easy

---

6. Explain async and await.

Answer: async and await (introduced in ES2017) make asynchronous code look and behave more like synchronous code.

• async: Placed before a function, it ensures the function returns a Promise.
• await: Used inside an async function, it pauses execution until the Promise is resolved.
• Benefit: Cleaner and more readable than chaining .then() and .catch().

Rarity: Common Difficulty: Medium

---

7. What is the DOM?

Answer: The DOM (Document Object Model) is a programming interface for web documents. It represents the page so that programs (JavaScript) can change the document structure, style, and content. The DOM represents the document as nodes and objects.

Rarity: Common Difficulty: Easy

---

8. What is the difference between == and ===?

Answer:

• == (Loose Equality): Compares values after doing type coercion (converting them to a common type). E.g., 5 == "5" is true.
• === (Strict Equality): Compares both value and type. No type coercion. E.g., 5 === "5" is false.
• Best Practice: Always use === to avoid unexpected bugs.

Rarity: Common Difficulty: Easy

---

React

9. What is the Virtual DOM?

Answer: The Virtual DOM is a lightweight copy of the real DOM kept in memory.

• Process: When state changes, React updates the Virtual DOM first. It then compares the new Virtual DOM with the previous one (diffing) and calculates the most efficient way to update the real DOM (reconciliation).
• Benefit: Minimizes direct manipulation of the slow real DOM, improving performance.

Rarity: Common Difficulty: Medium

---

10. What are Props and State?

Answer:

• Props (Properties): Read-only data passed from a parent component to a child component. They allow components to be reusable and dynamic.
• State: Data managed within the component. It can change over time (e.g., user input, API response). When state changes, the component re-renders.

Rarity: Very Common Difficulty: Easy

---

11. What are React Hooks? Name a few common ones.

Answer: Hooks are functions that let function components use React features such as state, context, refs, and effects.

• useState: Stores local component state, such as form input or a selected tab.
• useEffect: Synchronizes a component with something outside React, such as fetching data or subscribing to an event. It should not be used for every calculation.
• useContext: Reads shared context without manually passing props through every level.
• Interview tip: Mention the Rules of Hooks: call hooks at the top level of a React component or custom hook, not inside loops or conditions.

Rarity: Common Difficulty: Medium

---

Node.js & Backend

12. What is Node.js and why is it single-threaded?

Answer: Node.js is a JavaScript runtime built on the V8 engine. It runs JavaScript on one main thread, but it can still handle many I/O-heavy tasks because the event loop coordinates asynchronous work.

• Main thread: Executes your JavaScript callbacks.
• Non-blocking I/O: File, network, and database operations can be delegated to the operating system or libuv, then resumed when results are ready.
• Important limitation: CPU-heavy JavaScript can still block the event loop. For expensive work, use a worker thread, a job queue, or move it out of the request path.
• Good example: An API server that waits on many database or network calls.

Rarity: Common Difficulty: Medium

---

13. What is NPM and package.json?

Answer:

• NPM (Node Package Manager): The default package manager for Node.js. It allows you to install and manage libraries (dependencies).
• package.json: The manifest file for a Node.js project. It lists metadata (name, version) and dependencies (libraries required to run the app).

Rarity: Common Difficulty: Easy

---

14. Explain the difference between GET and POST.

Answer:

• GET: Retrieves a resource. It should be safe, meaning it should not intentionally change server state, and it is idempotent, meaning repeating the same request should have the same effect.
• POST: Sends data for the server to process, often to create a resource or trigger an action. It is not guaranteed to be idempotent, so repeating a POST can create duplicate work unless the API protects against it.
• Practical example: Use GET to load a product list; use POST to submit an order or create a comment.

Rarity: Common Difficulty: Easy

---

Database (SQL)

15. What is a Primary Key and a Foreign Key?

Answer:

• Primary Key: A column (or set of columns) that uniquely identifies each row in a table. It cannot be NULL.
• Foreign Key: A column that links to the Primary Key of another table. It establishes a relationship between two tables.

Rarity: Common Difficulty: Easy

---

16. Explain the difference between INNER JOIN and LEFT JOIN.

Answer:

• INNER JOIN: Returns records that have matching values in both tables.
• LEFT JOIN (or LEFT OUTER JOIN): Returns all records from the left table, and the matched records from the right table. If there is no match, the result is NULL on the right side.

Rarity: Very Common Difficulty: Medium

---

17. What is Normalization?

Answer: Normalization is the process of organizing data in a database to reduce redundancy and improve data integrity.

• Goal: Divide larger tables into smaller tables and link them using relationships.
• Forms: 1NF, 2NF, 3NF (Third Normal Form is usually sufficient for most applications).

Rarity: Uncommon (for Juniors) Difficulty: Medium

---

General

18. What is Git and why do we use it?

Answer: Git is a distributed version control system.

• Usage: It tracks changes in source code during software development.
• Benefits: Allows multiple developers to work together (collaboration), keeps a history of changes (versioning), and allows reverting to previous states if something breaks.

Rarity: Common Difficulty: Easy

---

19. What is an API?

Answer: API stands for Application Programming Interface. It is a set of rules that allows different software applications to communicate with each other. In web development, it usually refers to a REST API where a frontend (Client) requests data from a backend (Server).

Rarity: Common Difficulty: Easy

---

20. How do you debug a web application?

Answer: Start by reproducing the issue and narrowing down where it happens: browser, network request, backend handler, or database.

• Frontend: Use browser DevTools: Console for errors, Network for API status and payloads, Elements for HTML/CSS, and React DevTools when relevant.
• Backend: Check structured logs, request IDs, stack traces, environment variables, and database queries. Use a debugger for unclear control flow.
• Good interview answer: Explain one real bug you fixed, what you checked first, and how you confirmed the fix.

Rarity: Common Difficulty: Easy