Junior Full Stack Developer Interview Questions: Complete Guide
Milad Bonakdar
Author
Ace your Junior Full Stack Developer interview with this comprehensive guide covering HTML, CSS, JavaScript, React, Node.js, and SQL basics.
Introduction
Breaking into the tech industry as a Junior Full Stack Developer requires a solid grasp of both frontend and backend technologies. Interviewers look for potential, problem-solving skills, and a good understanding of the fundamentals.
This guide covers essential interview questions across the full stack: HTML/CSS, JavaScript, React, Node.js, and SQL. Mastering these concepts will give you a strong foundation for your upcoming interviews.
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.
widthandheightproperties have no effect (e.g.,<span>,<a>). - Inline-block: Like inline elements, but you can set
widthandheight. 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 anasyncfunction, 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"istrue.===(Strict Equality): Compares both value and type. No type coercion. E.g.,5 === "5"isfalse.- 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 you "hook into" React state and lifecycle features from functional components.
useState: To manage local state.useEffect: To handle side effects (data fetching, subscriptions, DOM updates).useContext: To subscribe to React Context (global state).
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 Chrome's V8 engine.
- Single-Threaded: It uses a single main thread with an Event Loop to handle requests.
- Non-Blocking I/O: Instead of creating a new thread for every request (like traditional servers), it delegates I/O operations (database, file system) to the system kernel. When the operation finishes, a callback is added to the queue.
- Benefit: Highly scalable for I/O-bound applications (real-time chats, APIs).
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: Used to retrieve data from a server. Parameters are sent in the URL. Should be idempotent (safe to repeat).
- POST: Used to send data to a server to create/update a resource. Data is sent in the request body. Not idempotent.
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
NULLon 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:
- Frontend: Using Browser Developer Tools (Console for errors, Network tab for API calls, Elements tab for CSS/HTML).
- Backend: Using
console.log(or a logger), debugging tools in IDEs (VS Code debugger), and checking server logs.
Rarity: Common Difficulty: Easy
