Log in to Jobaaj

Your email Please enter a valid email address.

Password Forgot Password?

Please enter a valid password.

Don't have an account yet? Sign up

Sign up

Fill out the form to get started

Full name Please enter your full name.

Your email Please enter a valid email address.

Password

Your password is invalid. Please try again.

Confirm password

Password does not match the confirm password.

By continuing you agree to our Terms and Conditions

Already have an account? Log in

Verify your email

We've sent a 6-digit code to

Enter OTP

← Back to sign up

Forgot password

We'll email you a 6-digit code to reset your password

Your email Back to Log in

Please enter a valid email address.

We've sent a 6-digit code to

Enter OTP Please enter the 6-digit code.

Use a different email

Code verified for . Choose a new password.

New password

Please enter a new password.

Confirm new password

Please confirm your new password.

Re-enter the code

Password updated!

You can now log in with your new password.

Front end Development MCQ With Answers

41 practice questions · Last updated on Aug 25, 2026

Q&A guide Share:

Front end Development MCQs

1.What does the CSS box-sizing: border-box declaration do?
2.Which CSS layout module is designed for two-dimensional layouts with rows and columns?
3.In CSS specificity, which selector wins?
4.What does position: sticky do?
5.Which HTML element correctly associates a label with an input?
6.Which Core Web Vital measures visual stability?
7.What does the defer attribute on a script tag do?
8.Which container query property must be set on an element before its children can be queried?
9.What is the difference between em and rem units?
10.Which HTTP status code indicates a resource has moved permanently?
11.What does the viewport meta tag do?
12.Which of these makes a site accessible to keyboard users?
13.What is the Virtual DOM?
14.Why should array index not be used as a React key in a reorderable list?
15.What is the difference between server-side rendering and static site generation?
16.Which CSS property creates a responsive grid without media queries?
17.What does a CORS error in the browser console mean?
18.Which semantic element should wrap the primary content of a page?
19.What does the loading="lazy" attribute on an img tag do?
20.Which of these is a render-blocking resource by default?
21.What is the purpose of the alt attribute on an image?
22.In CSS, what does the :where() pseudo-class contribute to specificity?
23.Which method removes an element from the normal document flow?
24.What does the sessionStorage API do?
25.Which practice most improves Largest Contentful Paint?
26.What is a CSS custom property?
27.Which HTTP header enables HTTPS enforcement for future visits?
28.What does the flex: 1 shorthand mean?
29.Which technique prevents a flash of invisible text while a web font loads?
30.What is the difference between stopPropagation() and preventDefault()?
31.Which ARIA practice is correct?
32.What is code splitting?
33.Which selector targets an element only when it is the last child of its parent?
34.What does the srcset attribute on an img element provide?
35.What does margin collapsing mean?
36.Which is the correct way to make a wide table responsive without breaking the page layout?
37.What is the purpose of a Content Security Policy?
38.Which JavaScript API efficiently detects when an element enters the viewport?
39.What does the prefers-reduced-motion media query allow you to do?
40.Which of these best describes progressive enhancement?
41.What does tree shaking do in a modern build tool?

Front-end interviews cover far more than framework syntax. Expect questions on the box model and specificity, when to use Flexbox versus Grid, positioning and container queries, the critical rendering path and Core Web Vitals, and the difference between server-side rendering, static generation and client-side rendering. Accessibility and CORS come up regularly, and strong candidates are expected to reason about performance with measurements rather than assumptions. The questions below cover the whole stack a front-end engineer owns.

Front end Development MCQ

1.What does the CSS box-sizing: border-box declaration do?

Makes width include padding and border

Makes width exclude padding and border

Removes all borders

Adds a border to every element

2.Which CSS layout module is designed for two-dimensional layouts with rows and columns?

Flexbox

CSS Grid

Float

Position

3.In CSS specificity, which selector wins?

.header .nav .item

#nav .item

div.item

ul li a

4.What does position: sticky do?

Fixes the element to the viewport permanently

Behaves as relative until a scroll threshold is reached, then as fixed within its parent

Removes the element from the document flow

Attaches the element to the page footer

5.Which HTML element correctly associates a label with an input?

with

6.Which Core Web Vital measures visual stability?

LCP

INP

CLS

TTFB

7.What does the defer attribute on a script tag do?

Downloads the script in parallel and executes it after HTML parsing completes

Prevents the script from loading

Executes the script immediately, blocking the parser

Loads the script only on user interaction

8.Which container query property must be set on an element before its children can be queried?

container-type

container-query

query-type

contain-size

9.What is the difference between em and rem units?

em is relative to the parent's font size; rem is relative to the root font size

rem is relative to the parent; em to the root

They are identical

em is an absolute unit

10.Which HTTP status code indicates a resource has moved permanently?

302

301

404

500

11.What does the viewport meta tag do?

Sets the page title

Tells mobile browsers to use the device width rather than a default virtual width

Defines the favicon

Controls the print layout

12.Which of these makes a site accessible to keyboard users?

Removing all focus outlines

Using semantic elements such as button and a, and preserving visible focus indicators

Using div elements with click handlers

Setting tabindex to -1 on all elements

13.What is the Virtual DOM?

A browser API for faster rendering

An in-memory representation of the UI that is diffed against the previous version to compute minimal DOM updates

A replacement for the real DOM

A CSS rendering engine

14.Why should array index not be used as a React key in a reorderable list?

Indexes are too long

The key must remain stable per item, or component state attaches to the wrong element after reordering

Indexes are not unique

React does not accept numbers as keys

15.What is the difference between server-side rendering and static site generation?

SSR builds HTML per request; SSG builds it at deploy time

SSG builds per request; SSR at build time

Both build HTML in the browser

There is no difference

16.Which CSS property creates a responsive grid without media queries?

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))

display: block

float: left

position: absolute

17.What does a CORS error in the browser console mean?

The request was never sent

The server responded but the browser blocked JavaScript from reading the response

The URL does not exist

The certificate is invalid

18.Which semantic element should wrap the primary content of a page?

19.What does the loading="lazy" attribute on an img tag do?

Delays the image by a fixed time

Defers loading until the image is near the viewport

Reduces the image quality

Preloads the image immediately

20.Which of these is a render-blocking resource by default?

An external stylesheet in the head

An image

A script with defer

A font file

21.What is the purpose of the alt attribute on an image?

To display a tooltip on hover

To describe the image for screen readers and when the image fails to load

To set the image caption

To specify the image format

22.In CSS, what does the :where() pseudo-class contribute to specificity?

Zero specificity

The same as a class

The same as an ID

Double the specificity of its argument

23.Which method removes an element from the normal document flow?

position: relative

position: absolute

margin: auto

display: block

24.What does the sessionStorage API do?

Stores data shared across all tabs until manually cleared

Stores data for a single tab, cleared when that tab closes

Sends data with every HTTP request

Stores data on the server

25.Which practice most improves Largest Contentful Paint?

Adding more JavaScript

Optimising and preloading the hero image and reducing server response time

Lazy loading everything including above-the-fold content

Adding more web fonts

26.What is a CSS custom property?

A vendor-prefixed property

A user-defined variable declared with two dashes and read with var()

A property only available in Sass

An inline style attribute

27.Which HTTP header enables HTTPS enforcement for future visits?

Content-Security-Policy

Strict-Transport-Security

X-Frame-Options

Referrer-Policy

28.What does the flex: 1 shorthand mean?

flex-grow: 1, flex-shrink: 1, flex-basis: 0%

flex-grow: 0 only

A fixed width of 1px

One item per row

29.Which technique prevents a flash of invisible text while a web font loads?

font-display: swap

font-weight: bold

text-rendering: optimizeSpeed

font-size-adjust

30.What is the difference between stopPropagation() and preventDefault()?

stopPropagation halts the event travelling through the DOM; preventDefault cancels the browser's default action

They do the same thing

preventDefault stops bubbling

stopPropagation removes the listener

31.Which ARIA practice is correct?

Add role="button" to every clickable element

Prefer native semantic HTML and use ARIA only when no native element fits

Use ARIA attributes on every element

ARIA replaces the need for keyboard support

32.What is code splitting?

Separating CSS from HTML

Breaking the bundle into chunks loaded on demand, typically per route

Splitting code across multiple developers

Minifying JavaScript

33.Which selector targets an element only when it is the last child of its parent?

:first-child

:last-child

:nth-child(1)

:only-child

34.What does the srcset attribute on an img element provide?

Alternative text

A set of image candidates so the browser can choose the best for the device

The image caption

A fallback URL if the image fails

35.What does margin collapsing mean?

Margins are removed entirely

Adjacent vertical margins between block elements combine into the larger of the two

Horizontal margins are added together

Margins convert to padding

36.Which is the correct way to make a wide table responsive without breaking the page layout?

Set the table width to a fixed pixel value

Wrap it in a container with overflow-x: auto

Hide columns on mobile with display: none

Reduce the font size

37.What is the purpose of a Content Security Policy?

To compress responses

To restrict which sources of scripts, styles and other resources the browser will load and execute

To enforce HTTPS

To cache assets

38.Which JavaScript API efficiently detects when an element enters the viewport?

scroll event listener

IntersectionObserver

MutationObserver

ResizeObserver

39.What does the prefers-reduced-motion media query allow you to do?

Reduce image sizes

Disable or soften animations for users who have requested less motion

Lower the frame rate

Disable JavaScript

40.Which of these best describes progressive enhancement?

Adding features only for the newest browsers

Building a working baseline experience first, then layering on enhancements where supported

Removing features on older browsers

Loading all features at once

41.What does tree shaking do in a modern build tool?

Reorders the DOM tree

Removes unused exports from the final bundle

Compresses images

Sorts CSS rules

Jobaaj is a leading job portal in India, offering recruitment, training, placements, and career management solutions.

Legal

Refund Policy
Privacy & Policy
Terms & Conditions

Subscribe to stay tuned for latest job alerts and updates

All trademarks are the property of their respective owners

Log in to Jobaaj

Your email id Please enter a valid email address.

Password Forgot Password?

Please enter a valid password.

Invalid email or password.

Don't have an account yet? Sign up as

Jobseeker

Employer

Sign up

Fill out the form to get started

Your email Please enter a valid email address.

Password Your password is invalid. Please try again.

Confirm password Password does not match the confirm password.

By continuing you agree to our Terms and Conditions

Already have an account? Log in

Forgot password

Instructions will be sent to you

Your email Back to Log in

Please enter a valid email address.

Log in

Don't have an account yet? Sign up

Log in

Don't have an account yet? Sign up

Your email Please enter a valid email address.

Password Forgot Password?

Sign up

Already have an account? Log in

By continuing you agree to our Terms and Conditions

Sign up

Already have an account? Log in

Full Name *

Please Enter Name

Contact Number

Please Enter Contact Number

Your email

Please Enter Email

Password

Confirm Password *

By continuing you agree to our Terms and Conditions

Forgot password?

Enter the email address you used when you joined and we'll send you instructions to reset your password.

Your email Back to Log in

Please enter a valid email address.

Trusted by the world's best teams

Images Library

Edit

Open Lock

Add Category

Add Category Please enter a valid email address.

Your Name Please enter a valid email address.

Your Email Please enter a valid email address.

Sign up

Fill out the form to get started

Your email Please enter a valid email address.

Password Your password is invalid. Please try again.

Confirm password Password does not match the confirm password.

By continuing you agree to our Terms and Conditions

Already have an account? Log in

Forgot password

Instructions will be sent to you

Your email Back to Log in

Please enter a valid email address.

Having an Issue!!

Please tells us more about it!

What are you looking for ?

Job Learnings Recruiter Services Other

Log in to Jobaaj

Sign up

Verify your email

Forgot password

Password updated!

Your next interview starts here

Verify your email

Practice with AI

You're all set

Master your Mock Interviews with AI!

Free Plan

Pro Plan

Elite Plan

Ready to start your AI mock interview?

Front end Development MCQ With Answers

Front end Development MCQ

1.What does the CSS box-sizing: border-box declaration do?

2.Which CSS layout module is designed for two-dimensional layouts with rows and columns?

3.In CSS specificity, which selector wins?

4.What does position: sticky do?

5.Which HTML element correctly associates a label with an input?

6.Which Core Web Vital measures visual stability?

7.What does the defer attribute on a script tag do?

8.Which container query property must be set on an element before its children can be queried?

9.What is the difference between em and rem units?

10.Which HTTP status code indicates a resource has moved permanently?

11.What does the viewport meta tag do?

12.Which of these makes a site accessible to keyboard users?

13.What is the Virtual DOM?

14.Why should array index not be used as a React key in a reorderable list?

15.What is the difference between server-side rendering and static site generation?

16.Which CSS property creates a responsive grid without media queries?

17.What does a CORS error in the browser console mean?

18.Which semantic element should wrap the primary content of a page?

19.What does the loading="lazy" attribute on an img tag do?

20.Which of these is a render-blocking resource by default?

21.What is the purpose of the alt attribute on an image?

22.In CSS, what does the :where() pseudo-class contribute to specificity?

23.Which method removes an element from the normal document flow?

24.What does the sessionStorage API do?

25.Which practice most improves Largest Contentful Paint?

26.What is a CSS custom property?

27.Which HTTP header enables HTTPS enforcement for future visits?

28.What does the flex: 1 shorthand mean?

29.Which technique prevents a flash of invisible text while a web font loads?

30.What is the difference between stopPropagation() and preventDefault()?

31.Which ARIA practice is correct?

32.What is code splitting?

33.Which selector targets an element only when it is the last child of its parent?

34.What does the srcset attribute on an img element provide?

35.What does margin collapsing mean?

36.Which is the correct way to make a wide table responsive without breaking the page layout?

37.What is the purpose of a Content Security Policy?

38.Which JavaScript API efficiently detects when an element enters the viewport?

39.What does the prefers-reduced-motion media query allow you to do?

40.Which of these best describes progressive enhancement?

41.What does tree shaking do in a modern build tool?

Log in to Jobaaj

Sign up

Forgot password

Having an Issue!!

Ticket Id:

Our team will connect with you soon.

Our team will connect
with you soon.