Frontend Developer Interview Questions for Freshers

HTML Interview - 5 Questions

1. What is HTML5 and what are its new features?

Answer: HTML5 is the latest version of HTML, which includes new semantic elements (like <header>, <footer>, <article>), multimedia support (like<audio>and<video>), and local storage capabilities. It enhances the structure and functionality of web applications, promoting better accessibility and usability.

2. What are semantic elements in HTML?
Answer: Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include , , , and , which help search engines and assistive technologies understand the content structure better.

3. How do you create a table in HTML?
Answer: You can create a table using the <table> element, along with <tr>for table rows, <th> for table headers, and <td> for table data cells:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

4. What is the purpose of the alt attribute in an image tag?

Answer: The alt attribute provides alternative text for images, which is displayed when the image cannot load. It also serves as an accessibility feature for screen readers, helping visually impaired users understand the content.

5.How do you create a hyperlink in HTML?

Answer: You create a hyperlink using the tag with the href attribute:

<a href="https://www.example.com">Visit Example</a>

CSS Interview - 5 Questions

1. What are the different ways to apply CSS to a web page?

Answer: CSS can be applied in three ways:

Inline CSS: Using the style attribute within HTML elements.
Internal CSS: Using a <style> tag within an HTML document's <head> section.
External CSS: Linking to a separate .css file using the <link> tag.

2. What is the CSS box model?
Answer: The CSS box model describes the rectangular boxes generated for elements, which include margins, borders, padding, and the actual content. Understanding this model is crucial for layout and spacing.

3. How can you center a block element horizontally in CSS?
Answer: You can center a block element by setting its width and using margin: auto; on both sides:

.center {
    width: 50%;
    margin: 0 auto;
}

4. What are media queries in CSS?
Answer: Media queries allow you to apply different styles based on device characteristics, such as screen size. For example:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

5. What is Flexbox and how is it used?
Answer: Flexbox is a CSS layout module that allows for responsive design by providing an efficient way to align and distribute space among items in a container, even when their size is unknown. It's especially useful for one-dimensional layouts.

Bootstrap Interview Questions

1. What is Bootstrap and why is it used?
Answer: Bootstrap is a front-end framework that helps in designing responsive and mobile-first websites. It provides pre-styled components and a grid system, enabling faster development.

2. How do you create a responsive layout using Bootstrap?
Answer: Bootstrap uses a grid system based on 12 columns. You can create responsive layouts by using classes like .container, .row, and .col-{breakpoint}-{number}. For example:

<div class="container">
    <div class="row">
        <div class="col-md-6">Column 1</div>
        <div class="col-md-6">Column 2</div>
    </div>
</div>

3. What are Bootstrap components? Give examples.
Answer: Bootstrap components are pre-designed UI elements that can be easily used in applications. Examples include buttons, modals, dropdowns, and alerts.

4. How do you customize Bootstrap styles?
Answer: You can customize Bootstrap styles by overriding CSS classes in your own stylesheet or by using Bootstrap's Sass variables to modify the default styles before compiling the CSS.

5. What is a Bootstrap navbar and how is it created?
Answer: A navbar is a responsive navigation header that can be built using Bootstrap's .navbar classes. Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        </ul>
    </div>
</nav>

JavaScript Interview Questions

1. What is the difference between == and === in JavaScript?
Answer: == performs a loose equality check, allowing type coercion, while === performs a strict equality check, ensuring both value and type are the same.

2. What is a closure in JavaScript?
Answer: A closure is a function that retains access to its outer function’s scope even after the outer function has returned. It allows for data encapsulation and private variables.

3. What are Promises in JavaScript?
Answer: Promises are objects that represent the eventual completion (or failure) of an asynchronous operation. They can be in one of three states: pending, fulfilled, or rejected.

4. Explain event delegation in JavaScript.
Answer: Event delegation is a technique where a single event listener is added to a parent element to manage events for multiple child elements. This improves performance and simplifies event handling.

5. What is the purpose of let, const, and var?
Answer: var is function-scoped and can be re-declared. let is block-scoped and cannot be re-declared in the same scope. const is also block-scoped and is used for constants that cannot be reassigned.

React Interview Questions

1. What is React and what are its key features?
Answer: React is a JavaScript library for building user interfaces, emphasizing a component-based architecture, reusable components, and efficient rendering through the Virtual DOM.

2. What are props in React?
Answer: Props (short for properties) are read-only inputs passed from a parent component to a child component. They enable the flow of data and behavior between components.

3. What is the purpose of the useState hook in React?
Answer: The useState hook is used to add state to functional components. It returns an array with the current state value and a function to update it.

4. What is Redux Toolkit and how does it simplify state management?
Answer: Redux Toolkit is a set of tools that simplifies the process of writing Redux logic. It provides a more concise syntax for creating actions, reducers, and store configurations, reducing boilerplate code.

5. Explain the difference between controlled and uncontrolled components in React.
Answer: Controlled components are those whose value is controlled by React state, while uncontrolled components store their own state internally. Controlled components offer better control over form data and validation.

Redux Toolkit Interview Questions

1. What is Redux Toolkit, and why is it used?
Answer: Redux Toolkit is an official, recommended way to write Redux logic. It simplifies the setup and management of Redux applications by providing tools and conventions that reduce boilerplate code. It includes utilities for creating slices, configuring the store, and managing side effects.

2. Explain the concept of a "slice" in Redux Toolkit.
Answer: A slice is a part of the Redux state and its associated reducers and actions. It is created using the createSlice function, which automatically generates action creators and action types based on the reducers defined in the slice. This helps manage state in a modular way.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
        increment: state => { state.value += 1; },
        decrement: state => { state.value -= 1; },
    },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

3. How do you configure the Redux store using Redux Toolkit?
Answer: You can configure the Redux store using the configureStore function provided by Redux Toolkit. It automatically sets up the Redux DevTools and middleware for you.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
});

export default store;

4. What is createAsyncThunk, and how is it used?
Answer: createAsyncThunk is a function that simplifies the creation of asynchronous actions. It handles the promise lifecycle (pending, fulfilled, rejected) and automatically dispatches the appropriate actions.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetch', async (userId) => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
});

const userSlice = createSlice({
    name: 'user',
    initialState: { user: null, status: 'idle' },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchUser.pending, (state) => {
                state.status = 'loading';
            })
            .addCase(fetchUser.fulfilled, (state, action) => {
                state.status = 'succeeded';
                state.user = action.payload;
            });
    },
});

5. How can you handle middleware in Redux Toolkit?
Answer: Middleware can be added to the Redux store configuration in Redux Toolkit by using the middleware option in the configureStore function. You can also use the getDefaultMiddleware to include the default middleware.

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import counterReducer from './counterSlice';

const store = configureStore({
    reducer: {
        counter: counterReducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

JWT Authentication Interview Questions

1. What is JWT (JSON Web Token)?
Answer: JWT is an open standard (RFC 7519) for securely transmitting information between parties as a JSON object. It is compact, URL-safe, and can be verified and trusted because it is digitally signed. It is commonly used for authentication and information exchange.

2. What are the three parts of a JWT?
Answer: A JWT consists of three parts:

Header: Contains metadata about the token, including the signing algorithm.
Payload: Contains the claims, which are statements about an entity (usually the user) and additional data.
Signature: Created by taking the encoded header and payload, signing it with a secret key, and ensuring the integrity of the token.

3. How does JWT authentication work?
Answer: In JWT authentication:
The user logs in with their credentials.
The server verifies the credentials and generates a JWT containing user information.
The JWT is sent back to the client and stored (e.g., in local storage).
For subsequent requests, the client includes the JWT in the Authorization header.
The server verifies the JWT and grants access to protected resources if valid.

4. What are the benefits of using JWT for authentication?
Answer: Benefits of using JWT include:
Stateless: No need for server-side sessions; the server can be stateless as all necessary information is stored in the token.
Cross-Domain Support: JWT can be used across different domains and is not restricted by CORS policies.
Mobile Compatibility: JWT can be easily used in mobile applications for authentication and session management.
Self-Contained: The token contains all the information needed to authenticate the user, reducing the need for database lookups.

How do you secure JWT tokens?
Answer: To secure JWT tokens:
Use a strong signing algorithm (e.g., HS256 or RS256) and a secret key.
Set an expiration time for the token using the exp claim.
Use HTTPS to prevent interception during transmission.
Consider implementing refresh tokens for long-lived sessions.
Store tokens securely on the client side to prevent cross-site scripting (XSS) attacks.

Git and Version Control Interview Questions

1. What is Git and why is it used for version control?
Answer: Git is a distributed version control system that tracks changes in source code during software development. It allows multiple developers to work on a project simultaneously without conflicting changes.

2. What is a commit in Git?
Answer: A commit is a snapshot of your changes in a Git repository. It records modifications to the files and includes a message describing what changes were made.

3. How do you create a new branch in Git?
Answer: You can create a new branch using the command:

git branch new-branch-name

4. What is the purpose of the git merge command?
Answer: The git merge command is used to combine changes from one branch into another. It integrates the histories of the branches.

5. How do you resolve merge conflicts in Git?
Answer: To resolve merge conflicts, you need to manually edit the conflicting files to choose which changes to keep. After resolving, you stage the changes and create a new commit to complete the merge.

Performance and Optimization Questions

1. What are some common methods for optimizing web performance?
Answer: Common optimization techniques include minimizing HTTP requests, using image compression, leveraging browser caching, minimizing CSS and JavaScript files, and using a Content Delivery Network (CDN).

2. What is lazy loading and how does it improve performance?
Answer: Lazy loading is a technique where resources (like images or scripts) are loaded only when they are needed (e.g., when they enter the viewport). This reduces initial load time and saves bandwidth.

3. How can you improve the loading speed of a website?
Answer: Improving loading speed can be achieved by optimizing images, minifying CSS/JS files, reducing server response time, and using asynchronous loading for scripts.

4. What are Web Workers and how do they enhance performance?
Answer: Web Workers allow scripts to run in the background, separate from the main execution thread, enabling parallel processing. This prevents blocking the UI and improves performance for heavy computations.

5. Explain the concept of "Critical Rendering Path" in web performance.
Answer: The Critical Rendering Path refers to the sequence of steps the browser takes to render a webpage. Optimizing this path (e.g., reducing render-blocking resources) improves load times and user experience.

Blog

Frontend Developer Interview Questions for Freshers

Sudhanshu Gaikwad

Join Our Newsletter. No Spam, Only the good stuff.

Related