Front-end Development MCQs
Front-end Development MCQs
Our experts have gathered these Front-end Development MCQs through research, and we hope that you will be able to see how much knowledge base you have for the subject of Front-end Development by answering these 60+ multiple-choice questions.
Get started now by scrolling down!
1: Variables declared with the let keyword have what type of scope?
A. Function scope
B. Block scope
C. Inline scope
D. Global scope
2: Why would you surround a piece of text with tags?
A. To indicate that this text is the main heading on the page
B. To make the text bold
C. To ensure that search engines treat the keywords as being important for this page
D. To demonstrate to screen readers that this text is important
3: When might an empty alt attribute be the correct value?
A. When you cannot think of useful alt text
B. When you don't think it would be interesting to someone who cannot see it
C. When the image has come from a CMS
D. When the image is purely decorative
4: Which attribute must have a unique value each time it is used in an HTML document?
A. Title
B. Class
C. Style
D. Id
5: Which CSS property will not trigger layout recalculation?
A. Top
B. Opacity
C. Width
D. Height
6: What will be the value of selected? let pocket = ['turnip', 'stone', 'log', 'apple']; Let selected = pocket[1];
A. Log
B. Apple
C. Stone
D. Turnip
7: What does the === comparison operator do?
A. It sets one variable equal to another in both value and type
B. It tests for equality of type only
C. It tests for equality of value only
D. It tests for equality of value and type
8: In the following code, the variable fruit has been assigned a value of apple. How would you change the value to plum? let fruit = 'apple';
A. Let fruit = 'plum'
B. Var fruit = 'plum'
C. Const fruit = 'plum'
D. Fruit = 'plum'
9: What is the
A. To identify the difference parts of a figure
B. To explain what needs to be entered into a form field
C. As a caption for images
D. As a heading for tables
10: The browser finds some CSS that it does not understand. What is likely happen?
A. The page will not display
B. An error message will be displayed
C. The browser will not load the stylesheet
D. The browser will ignore the unknown CSS
11: In this code, what is the term for the h1? h1 { color: red; font-size: 5em; }
A. Selector
B. Combinator
C. Declarator
D. Markup
12: Which HTML will result in text being highlighted in yellow? .highlight {background-color: yellow;}
A. #BLM
B. #BLM
C.
D.
13: Which choice is not a value of the type attribute of the element?
A. Range
B. Address
C. Date
D. Password
14: You have used display: none in your stylesheet. Which users will be able to see or hear this content?
A. All users
B. Users who can see the content on screen
C. No users
D. Screen reader users
15: Which choice is not part of CSS box model
A. Margin
B. Border
C. Padding
D. Paragraph
16: Which part of the URL https://app.uniswap.org/pool specifies the domain name
A. Https
B. Org
C. Uniswap.org
D. App.uniswap
17: Which HTML element is not considered a landmark element?
A.
B.
C.
D.
18: Which statement is true when an HTML tag has been deprecated?
A. It employs code that can be viewed only on a desktop computer
B. It is obsolete and is not recommended for use in marking web content
C. It employs code that will require users to update their browsers
D. It employs incorrect syntax that will cause the browser to crash
19: How does the rem unit represent a font size?
A. Font sizes are expressed relative to the font size of the containing div element
B. Font sizes are expressed relative to the font size of the parent elements
C. Font sizes are relative to the base font size of the operating system.
D. Font sizes are relative to the root em unit used in the HTML element.
20: Which HTML element represents either a scalar value within a known range OR a fractional value?
A.
B.
C.
D.
21: What is Webpack primarily used for?
A. Sharing JavaScript code with other people
B. Making JavaScript-reliant sites accessible to users who do not have JavaScript turned on
C. Bundling individual JavaScript files for use in your website
D. Source control
22: How many columns will there be, given this code? .container { width: 600px; Column-width: 200px; column-gap: 50px;}
A. One
B. Three
C. Four
D. Two
23: You find this code in a stylesheet. What is it being used for? .cf::after { content: '';
A. Display: block; clear: both;}
B. Inserting content that cannot be seen by screen readers
C. Fixing an Internet Explorer 11 bug
D. Clearing floats in float-based layouts
E. Creating a new block formatting context
24: What is the correct way to initialize an array of galaxies in JavaScript?
A. String[] galaxies = new Array("Milky Way", "Whirlpool", "Andromeda");
B. Let galaxies = {Milky Way, Whirlpool, Andromeda};
C. Galaxies = ["Milky Way", "Whirlpool", "Andromeda"];
D. Var galaxies = {"Milky Way", "Whirlpool", "Andromeda"};
25: Which description correctly describes the initial values of flex items if the only thing you have done is apply display: flex to their parent?
A. Items display in a row, lined up at the start, and do not stretch to fill the container
B. Items display in a column, lined up at the start, and do not stretch to fill the container
C. Items stay in a column until you add some flex properties.
D. Items display in a row, lined up at the start, and stretch to fill the container
26: Which line of code, if applied to all flex items in a flex container, would cause each flex item to take up an equal share of the total width of the container? For example, if there are four items, they would get 25% of each/
A. Flex: 1 0 0;
B. Flex: initial;
C. Flex: 1 1 auto;
D. Flex: 1 0 auto;
27: A video on your webpage does not display and the console shows an error about mixed content. What is happening?
A. The webapge is using a DOCTYPE, which renders it incapable of displayed video in addition to other web content.
B. Your browser does not support HTML5 video.
C. The video is from a source that cannot be displayed in your location for legal reasons.
D. The page is loaded via HTTPS, but the video is being served insecurely as HTTP and the browser is blocking it.
28: What will this loop print? let max = 3; for (i = 0; i > max; i++) {document.write("skrt "); }
A. Skrt skrt skrt
B. Skrt skrt
C. Skrt skrt skrt skrt
D. Nothing
29: 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?
A. < img src="image.jpg">
B. < a href="images/image.jpg">
C. < img src="images/image.jpg">
D. < img href="image.jpg">
30: Which choice is a correct use of the parseInt() function in Javascript that parses a string and return an integer?
A. ParseInt(
B. Parse_int('6');
C. parseInt("6");
D. parseint("6");
31: How can you rewrite this function using arrow function syntax?
A. Let product => (x,y) {x * y;}
B. Let product = (x,y) => x*y;
C. Let product => x*y;
D. Let product = (x,y) -> x*y;
32: Lighthouse is a tool for auditing your website. Which choice is not a category of report offered by Lighthouse?
A. Performance
B. UX design
C. Accessibility
D. SEO
33: A webpage has rel="preconnect" added to a link resource. What will this do?
A. It will tell the browser that this link is a site belonging to the current domain.
B. It will do nothing a because this is a deprecated attribute that browsers do not support.
C. It will tell the browser that a connection will be made to another origin and to start getting ready as soon as possible.
D. It will tell the browser that a resource is needed, and that it should start getting fetched as soon as possible.
34: Which choice is not a render blocking resource?
A. Images
B. HTML
C. CSS
D. JavaScript
35: Which choice does not provide information on browser support for a particular CSS property?
A. the "Can I Use" website
B. The Web Platform Tests Suite
C. The CSS specification
D. MDN property pages
36: 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?
A. Object-fit: contain
B. Object-fit: stretch
C. Object-fit: all
D. Object-fit: cover
37: What does the CSS selector a[href$="org"] select?
38: Which choice is not of invoking strict mode in JavaScript?
A. It eliminates some JavaScript silent errors by changing them to throw errors.
B. It prohibits some syntax likely to be defined in future versions of ECMAScript.
C. It forces the writing of valid HTML and CSS.
D. It fixes mistakes that make it difficult for JavaScript engines to perform optimizations.
39: In normal flow, some elements display as block elements default and others inline. which choice contains only block-level by default elements?**
A. Ul, li, a
B. P, b, h3
C. Div, p, em
D. Div, main, h1
40: _ 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)?
A. Sticky positioning
B. Absolute positioning
C. Relative positioning
D. Fixed positioning
41: 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?
A. .box { overflow: scroll; }
B. .box { overflow: scroll-x; }
C. .box { overflow: auto; }
D. .box { overflow: none; }
42: 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?
A. Every()
B. Map()
C. ForEach()
D. Filter()
43: 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?
A. Tr:nth-child(2) { background-color: #ccc; }
B. Tr:nth-child(2n+1) { background-color: #ccc; }
C. Tr:nth-child(2+1) { background-color: #ccc; }
D. Tr:nth-child(2n) { background-color: #ccc; }
44: 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?
A.
B.
C.
D.
45: You discover that CSS is being loaded on a website using the following code. Why might a web developer have done this?
A. The CSS is being loaded asynchronously in order to prevent render blocking.
B. This will stop the CSS being loaded for old browsers that do not support the techniques in use.
C. This is part of a stylesheet-switching script to load different themes for the site.
D. This will stop the CCS being loaded on slow data connections
46: 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?
A. Flex: 0 0 100;
B. Flex: 1 0 0;
C. Flex: 0 0 auto;
D. Flex: 1 1 auto;
47: What does the term "tree shaking" mean with regard to JavaScript performance?
A. Only using code that is supported by the newest browsers, and serving the site without JavaScript to old browsers
B. Removing unused code from the JavaScript files
C. Splitting code into various bundles so that decisions can be made on loading priority
D. Allowing the browser to ignore code it believes will perform badly
48: What is WebP?
A. A method of auditing performance that gives your site a score, which is then used for Google ranking
B. A next-generation image format offering a smaller file size than equivalent PNG or JPEG images
C. A new font format that allows a single font to display at different styles and weights
D. A next-generation PDF format that offers a smaller file size and better accessibility than standard PDF documents
49: 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?
A. The visitor's browser does not have full support for CSS Grid Layout.
B. Items have been positioned in such a way that they are in a different order to the source.
C. The browser has a keyboard navigation bug.
D. You need to add the tabindex attribute to elements.
50: What is the definition of the phrase “Time to Interactive”?
A. When the browser displays the first bit of content from the DOM
B. When the user can consistently interact with all of the page elements
C. When HTML has loaded, but not necessarily JavaScript, CSS, or images
D. When the user can see the webpage on the screen
List of Front-end Development ...
Related Front-end Development MCQs:
Available in:
Front-end Development MCQs
