> > Front-end Development MCQs > Basic Front-end Development MCQs

Basic Front-end Development MCQ

1. In a grid layout, which property will create gaps between the rows in the grid?

Row-gap

Rowgap

Gutter

Row-gutter

Answer

Correct Answer: Row-gap

Note: This Question is unanswered, help us to find answer for this one

2. Which CSS property and value would correctly remove the bullets from a list item?

List-tem: none

Bullets: hidden

List-style-type: none

List-bullet: none

Answer

Correct Answer: List-style-type: none

Note: This Question is unanswered, help us to find answer for this one

3. What does setting aria-live=polite on a live region achieve?

The screen reader will not notify the user of changes to live regions.

The screen reader will wait until there is a pause to announce changes.

The screen reader will announce all changes immediately.

The screen reader will use a polite voice when announcing changes.

Answer

Correct Answer: The screen reader will wait until there is a pause to announce changes.

Note: This Question is unanswered, help us to find answer for this one

4. What is meant by the term "polyfill" when used in web development?

It is a piece of code that provides modern functionality in browsers that do not support it.

It is a piece of code that hides broken content from old browsers.

It is a term for languages such as Saas that compliles to CSS.

It is a script that runs to add vendor prefixes to modern CSS.

Answer

Correct Answer: It is a piece of code that provides modern functionality in browsers that do not support it.

Note: This Question is unanswered, help us to find answer for this one

5. What is the name of the event that occurs when the mouse pointer hovers over an element?

Load

Mouseover

Hover

Focus

Answer

Correct Answer: Mouseover

Note: This Question is unanswered, help us to find answer for this one

6. What is yarn?

A JavaScript framework that is leaner than React

A JavaScript bundler

A testing framework

A JavaScript package manager

Answer

Correct Answer: A JavaScript package manager

Note: This Question is unanswered, help us to find answer for this one

7. What is the definition of the phrase “Time to Interactive”?

When the browser displays the first bit of content from the DOM

When the user can consistently interact with all of the page elements

When HTML has loaded, but not necessarily JavaScript, CSS, or images

When the user can see the webpage on the screen

Answer

Correct Answer: When the user can consistently interact with all of the page elements

Note: This Question is unanswered, help us to find answer for this one

8. Your website uses CSS Grid Layout extensively, and a visitor who navigates using the keyboard tells you that they seem to jump erratically all over the screen when navigating. What is the most likely problem?

The visitor's browser does not have full support for CSS Grid Layout.

Items have been positioned in such a way that they are in a different order to the source.

The browser has a keyboard navigation bug.

You need to add the tabindex attribute to elements.

Answer

Correct Answer: Items have been positioned in such a way that they are in a different order to the source.

Note: This Question is unanswered, help us to find answer for this one

9. What is WebP?

A method of auditing performance that gives your site a score, which is then used for Google ranking

A next-generation image format offering a smaller file size than equivalent PNG or JPEG images

A new font format that allows a single font to display at different styles and weights

A next-generation PDF format that offers a smaller file size and better accessibility than standard PDF documents

Answer

Correct Answer: A next-generation image format offering a smaller file size than equivalent PNG or JPEG images

Note: This Question is unanswered, help us to find answer for this one

10. What does the term "tree shaking" mean with regard to JavaScript performance?

Only using code that is supported by the newest browsers, and serving the site without JavaScript to old browsers

Removing unused code from the JavaScript files

Splitting code into various bundles so that decisions can be made on loading priority

Allowing the browser to ignore code it believes will perform badly

Answer

Correct Answer: Removing unused code from the JavaScript files

Note: This Question is unanswered, help us to find answer for this one

11. The flex property is often applied to flex items with a value of 1. Using flex: 1 is a shorthand - what does it unpack to?

Flex: 0 0 100;

Flex: 1 0 0;

Flex: 0 0 auto;

Flex: 1 1 auto;

Answer

Correct Answer: Flex: 1 0 0;

Note: This Question is unanswered, help us to find answer for this one

12. You discover that CSS is being loaded on a website using the following code. Why might a web developer have done this?

The CSS is being loaded asynchronously in order to prevent render blocking.

This will stop the CSS being loaded for old browsers that do not support the techniques in use.

This is part of a stylesheet-switching script to load different themes for the site.

This will stop the CCS being loaded on slow data connections

Answer

Correct Answer: The CSS is being loaded asynchronously in order to prevent render blocking.

Note: This Question is unanswered, help us to find answer for this one

13. You are designing a site and creating a navigation bar linking to the main sections. Which HTML element should you use to indicate that this is the main navigation?

Answer

Correct Answer:

Note: This Question is unanswered, help us to find answer for this one

14. Which array method should you apply to run a function for every item within an array, returning an array of all items for which the function is true?

Every()

Map()

ForEach()

Filter()

Answer

Correct Answer: Filter()

Note: This Question is unanswered, help us to find answer for this one

15. You have created a box that has a height set with CSS. Which line of CSS would add scroll bars if the content is taller than the box, but leave no visible scroll bars if the content fits into the box?

.box { overflow: scroll; }

.box { overflow: scroll-x; }

.box { overflow: auto; }

.box { overflow: none; }

Answer

Correct Answer: .box { overflow: auto; }

Note: This Question is unanswered, help us to find answer for this one

16. _ moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's element (or its nearest positioned ancestor element)?

Sticky positioning

Absolute positioning

Relative positioning

Fixed positioning

Answer

Correct Answer: Absolute positioning

Note: This Question is unanswered, help us to find answer for this one

17. In normal flow, some elements display as block elements default and others inline. which choice contains only block-level by default elements?**

Ul, li, a

P, b, h3

Div, p, em

Div, main, h1

Answer

Correct Answer: Div, main, h1

Note: This Question is unanswered, help us to find answer for this one

18. You have a set of images that are slightly different sizes and aspect ratios. You don't mind if you crop off some of the image, but you want each image to completely fill a square box without being distorted. Which property and value would achieve this?

Object-fit: contain

Object-fit: stretch

Object-fit: all

Object-fit: cover

Answer

Correct Answer: Object-fit: cover

Note: This Question is unanswered, help us to find answer for this one

19. Which choice does not provide information on browser support for a particular CSS property?

the "Can I Use" website

The Web Platform Tests Suite

The CSS specification

MDN property pages

Answer

Correct Answer: The Web Platform Tests Suite

Note: This Question is unanswered, help us to find answer for this one

20. Which choice is not a render blocking resource?

Images

HTML

CSS

JavaScript

Answer

Correct Answer: Images

Note: This Question is unanswered, help us to find answer for this one

21. A webpage has rel="preconnect" added to a link resource. What will this do?

It will tell the browser that this link is a site belonging to the current domain.

It will do nothing a because this is a deprecated attribute that browsers do not support.

It will tell the browser that a connection will be made to another origin and to start getting ready as soon as possible.

It will tell the browser that a resource is needed, and that it should start getting fetched as soon as possible.

Answer

Correct Answer: It will tell the browser that a connection will be made to another origin and to start getting ready as soon as possible.

Note: This Question is unanswered, help us to find answer for this one

22. How can you rewrite this function using arrow function syntax?

Let product => (x,y) {x * y;}

Let product = (x,y) => x*y;

Let product => x*y;

Let product = (x,y) -> x*y;

Answer

Correct Answer: Let product = (x,y) => x*y;

Note: This Question is unanswered, help us to find answer for this one

23. Which choice is a correct use of the parseInt() function in Javascript that parses a string and return an integer?

ParseInt(

Parse_int('6');

parseInt("6");

parseint("6");

Answer

Correct Answer: parseInt("6");

Note: This Question is unanswered, help us to find answer for this one

24. You have placed an image in a directory named images and want to reference it from a page located in the root of your site. Which choice would correctly display the image on the page?

< img src="image.jpg">

< a href="images/image.jpg">

< img src="images/image.jpg">

< img href="image.jpg">

Answer

Correct Answer: < img src="images/image.jpg">

Note: This Question is unanswered, help us to find answer for this one

25. What will this loop print? let max = 3; for (i = 0; i > max; i++) {document.write("skrt "); }

Skrt skrt skrt

Skrt skrt

Skrt skrt skrt skrt

Nothing

Answer

Correct Answer: Nothing

Note: This Question is unanswered, help us to find answer for this one

26. A video on your webpage does not display and the console shows an error about mixed content. What is happening?

The webapge is using a DOCTYPE, which renders it incapable of displayed video in addition to other web content.

Your browser does not support HTML5 video.

The video is from a source that cannot be displayed in your location for legal reasons.

The page is loaded via HTTPS, but the video is being served insecurely as HTTP and the browser is blocking it.

Answer

Correct Answer: The page is loaded via HTTPS, but the video is being served insecurely as HTTP and the browser is blocking it.

Note: This Question is unanswered, help us to find answer for this one

27. Which description correctly describes the initial values of flex items if the only thing you have done is apply display: flex to their parent?

Items display in a row, lined up at the start, and do not stretch to fill the container

Items display in a column, lined up at the start, and do not stretch to fill the container

Items stay in a column until you add some flex properties.

Items display in a row, lined up at the start, and stretch to fill the container

Answer

Correct Answer: Items display in a row, lined up at the start, and do not stretch to fill the container

Note: This Question is unanswered, help us to find answer for this one

28. What is the correct way to initialize an array of galaxies in JavaScript?

String[] galaxies = new Array("Milky Way", "Whirlpool", "Andromeda");

Let galaxies = {Milky Way, Whirlpool, Andromeda};

Galaxies = ["Milky Way", "Whirlpool", "Andromeda"];

Var galaxies = {"Milky Way", "Whirlpool", "Andromeda"};

Answer

Correct Answer: Galaxies = ["Milky Way", "Whirlpool", "Andromeda"];

Note: This Question is unanswered, help us to find answer for this one

29. You find this code in a stylesheet. What is it being used for? .cf::after { content: '';

Display: block; clear: both;}

Inserting content that cannot be seen by screen readers

Fixing an Internet Explorer 11 bug

Clearing floats in float-based layouts

Creating a new block formatting context

Answer

Correct Answer: Clearing floats in float-based layouts

Note: This Question is unanswered, help us to find answer for this one

30. How many columns will there be, given this code? .container { width: 600px; Column-width: 200px; column-gap: 50px;}

One

Three

Four

Two

Answer

Correct Answer: Two

Note: This Question is unanswered, help us to find answer for this one

31. What is Webpack primarily used for?

Sharing JavaScript code with other people

Making JavaScript-reliant sites accessible to users who do not have JavaScript turned on

Bundling individual JavaScript files for use in your website

Source control

Answer

Correct Answer: Bundling individual JavaScript files for use in your website

Note: This Question is unanswered, help us to find answer for this one

32. Which HTML element represents either a scalar value within a known range OR a fractional value?

Answer

Correct Answer:

Note: This Question is unanswered, help us to find answer for this one

33. How does the rem unit represent a font size?

Font sizes are expressed relative to the font size of the containing div element

Font sizes are expressed relative to the font size of the parent elements

Font sizes are relative to the base font size of the operating system.

Font sizes are relative to the root em unit used in the HTML element.

Answer

Correct Answer: Font sizes are relative to the root em unit used in the HTML element.

Note: This Question is unanswered, help us to find answer for this one

34. Which HTML element is not considered a landmark element?

Answer

Correct Answer:

Note: This Question is unanswered, help us to find answer for this one

35. Which part of the URL https://app.uniswap.org/pool specifies the domain name

Https

Org

Uniswap.org

App.uniswap

Answer

Correct Answer: Uniswap.org

Note: This Question is unanswered, help us to find answer for this one

36. Which choice is not part of CSS box model

Margin

Border

Padding

Paragraph

Answer

Correct Answer: Paragraph

Note: This Question is unanswered, help us to find answer for this one

37. Which choice is not a value of the type attribute of the element?

Range

Address

Date

Password

Answer

Correct Answer: Address

Note: This Question is unanswered, help us to find answer for this one

Buy us a coffee

Front-end Development Subjects

More Resources

Front-end Development MCQ

Front-end Development Skill Assessment

Front-end Development PDF

Related MCQs

Ionic Framework MCQs

Laravel Framework MCQs

Web Building MCQs

Web Development MCQs

Web Graphics Design Principles MCQs

Basic Front-end Development MCQ

1. In a grid layout, which property will create gaps between the rows in the grid?

2. Which CSS property and value would correctly remove the bullets from a list item?

3. What does setting aria-live=polite on a live region achieve?

4. What is meant by the term "polyfill" when used in web development?

5. What is the name of the event that occurs when the mouse pointer hovers over an element?

6. What is yarn?

7. What is the definition of the phrase “Time to Interactive”?

8. Your website uses CSS Grid Layout extensively, and a visitor who navigates using the keyboard tells you that they seem to jump erratically all over the screen when navigating. What is the most likely problem?

9. What is WebP?

10. What does the term "tree shaking" mean with regard to JavaScript performance?

11. The flex property is often applied to flex items with a value of 1. Using flex: 1 is a shorthand - what does it unpack to?

12. You discover that CSS is being loaded on a website using the following code. Why might a web developer have done this?

13. You are designing a site and creating a navigation bar linking to the main sections. Which HTML element should you use to indicate that this is the main navigation?

14. Which array method should you apply to run a function for every item within an array, returning an array of all items for which the function is true?

15. You have created a box that has a height set with CSS. Which line of CSS would add scroll bars if the content is taller than the box, but leave no visible scroll bars if the content fits into the box?

16. _ moves an element completely out of the page's normal layout flow, like it is sitting on its own separate layer. From there, you can fix it in a position relative to the edges of the page's element (or its nearest positioned ancestor element)?

17. In normal flow, some elements display as block elements default and others inline. which choice contains only block-level by default elements?**

18. You have a set of images that are slightly different sizes and aspect ratios. You don't mind if you crop off some of the image, but you want each image to completely fill a square box without being distorted. Which property and value would achieve this?

19. Which choice does not provide information on browser support for a particular CSS property?

20. Which choice is not a render blocking resource?

21. A webpage has rel="preconnect" added to a link resource. What will this do?

22. How can you rewrite this function using arrow function syntax?

23. Which choice is a correct use of the parseInt() function in Javascript that parses a string and return an integer?

24. You have placed an image in a directory named images and want to reference it from a page located in the root of your site. Which choice would correctly display the image on the page?

25. What will this loop print? let max = 3; for (i = 0; i > max; i++) {document.write("skrt "); }

26. A video on your webpage does not display and the console shows an error about mixed content. What is happening?

27. Which description correctly describes the initial values of flex items if the only thing you have done is apply display: flex to their parent?

28. What is the correct way to initialize an array of galaxies in JavaScript?

29. You find this code in a stylesheet. What is it being used for? .cf::after { content: '';

30. How many columns will there be, given this code? .container { width: 600px; Column-width: 200px; column-gap: 50px;}

31. What is Webpack primarily used for?

32. Which HTML element represents either a scalar value within a known range OR a fractional value?

33. How does the rem unit represent a font size?

34. Which HTML element is not considered a landmark element?

35. Which part of the URL https://app.uniswap.org/pool specifies the domain name

36. Which choice is not part of CSS box model

37. Which choice is not a value of the type attribute of the element?

38. Which HTML will result in text being highlighted in yellow? .highlight {background-color: yellow;}

39. In this code, what is the term for the h1? h1 { color: red; font-size: 5em; }

40. What is the element used for?

41. What does the === comparison operator do?

42. Which attribute must have a unique value each time it is used in an HTML document?

43. When might an empty alt attribute be the correct value?

44. Why would you surround a piece of text with

45. Variables declared with the let keyword have what type of scope?