Front End Development MCQ Questions

Front end Development MCQ

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

2. Why would you surround a piece of text with

tags?

function scope

block scope

inline scope

global scope

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

to indicate that this text is the main heading on the page

to make the text bold

to ensure that search engines treat the keywords as being important for this page

to demonstrate to screen readers that this text is important

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

when you cannot think of useful alt text

when you don't think it would be interesting to someone who cannot see it

when the image has come from a CMS

when the image is purely decorative

5. Which CSS property will not trigger layout recalculation?

title

class

style

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

top

opacity

width

height

7. . What is the element used for?

log

apple

stone

turnip

8. . The browser finds some CSS that it does not understand. What is likely happen?

It sets one variable equal to another in both value and type

It tests for equality of type only

It tests for equality of value only

It tests for equality of value and type

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

let fruit = 'plum'

var fruit = 'plum'

const fruit = 'plum'

fruit = 'plum'

10. . You have used display: none in your stylesheet. Which users will be able to see or hear this content?

to identify the difference parts of a figure

to explain what needs to be entered into a form field

as a caption for images

as a heading for tables

11. Which choice is not part of CSS box model

The page will not display

An error message will be displayed

The browser will not load the stylesheet

The browser will ignore the unknown CSS

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

selector

combinator

declarator

markup

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

#BLM

14. Which statement is true when an HTML tag has been deprecated?

range

address

date

password

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

all users

users who can see the content on screen

no users

screen reader users

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

margin

border

padding

paragraph

17. What is Webpack primarily used for?

https

org

uniswap.org

app.uniswap

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

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

It employs code that can be viewed only on a desktop computer

It is obsolete and is not recommended for use in marking web content

It employs code that will require users to update their browsers

It employs incorrect syntax that will cause the browser to crash

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

22. 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?

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

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

one

three

four

two

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

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

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

flex: 1 0 0;

flex: initial;

flex: 1 1 auto;

flex: 1 0 auto;

28. 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?

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.

29. What does the CSS selector a[href$="org"] select?

skrt skrt skrt

skrt skrt

skrt skrt skrt skrt

nothing

30. Which choice is not a result of invoking strict mode in JavaScript?

< img src="image.jpg">

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

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

< img href="image.jpg">

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

parseInt("six");

parse_int('6');

parseInt("6");

parseint("6");

32. _ 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)?

let product => (x

y) { x * y; }

let product = (x

y) => x*y;

let product => x*y;

let product = (x

y) -> x*y;

33. 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?

performance

UX design

accessibility

SEO

34. 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?

function

array

variable

object

35. You want to create striped table rows using CSS without adding a class to any element. Which CSS would correctly apply the background color to every odd row in your table?

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.

36. 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?

images

HTML

CSS

JavaScript

37. 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?

the "Can I Use" website

the Web Platform Tests Suite

the CSS specification

MDN property pages

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

object-fit: contain

object-fit: stretch

object-fit: all

object-fit: cover

39. What is WebP?

all tags whose href attribute begins with "org"

all tags whose href attribute equals "org"

all tags whose href attribute ends with "org"

all tags whose href attribute contains "org"

40. 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?

it eliminates some JavaScript silent errors by changing them to throw errors.

it prohibits some syntax likely to be defined in future versions of ECMAScript.

it forces the writing of valid HTML and CSS.

it fixes mistakes that make it difficult for JavaScript engines to perform optimizations.

42. What is yarn?

currencies.push("Cosmos");

Array.append("Cosmos"

currencies);

currencies.add("Cosmos");

currencies(2) = "Cosmos";

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

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

tr:nth-child(2) { background-color: #ccc; }

tr:nth-child(2n+1) { background-color: #ccc; }

tr:nth-child(2+1) { background-color: #ccc; }

tr:nth-child(2n) { background-color: #ccc; }

48. CSS Logical Properties and Values now have wide-ranging support in browsers. If you wanted to use the logical version of width, which property name would you choose?

49. Which color value will create a background color that is semitransparent?

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

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

51. You are creating a responsive design, but when you view your site on a smaller screen, you notice that images are causing a horizontal scroll bar. How can you solve this problem without stretching any images out of shape?

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

52. How would you round the value 11.354 to the nearest full integer?

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.

53. What is the JavaScript compiler Babel used for?

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

54. What is the correct way to link to an external stylesheet from the head of an HTML document?

a JavaScript framework that is leaner than React

a JavaScript bundler

a testing framework

a JavaScript package manager

55. Which href attribute creates a link to the telephone number 1-(704) 555-1151?

56. In the color value hsl(38, 90%, 60%), what does 38 represent?

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.

57. What is a skiplink?

58. On a page with many images, what would be the effect of adding loading="lazy" to the tag?

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.

59. What is GraphQL?

60. Which choice will place a multiline text input field on the page?

list-tem: none

bullets: hidden

list-style-type: none

list-bullet: none

61. Which browser is not based on Chromium?

A .container { display: flex; align-items: center; }

B .container { display: flex; align-items: center; justify-content: center; }

C .box { align-items: center; justify-content: center; }

D .container { display: flex; align: center; }

62. What does the term "code splitting" mean with regard to JavasScript performance?

65. Hich pseudo-class allows you to selectively show a focus ring on elements only if keyboard navigation is detected?

Set object-fit: contain on the images.

Set max-width: 100% on the images.

Set width: 100% on the images.

Set resize: true on the images.

Front end Development MCQ With Answers

Front end Development Interview Questions for Freshers