Front-end Development Part-II

JavaScript isn't enabled in your browser, so this file can't be opened. Enable and reload.

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? *

1 point

.box { overflow: scroll; }

.box { overflow: scroll-x; }

.box { overflow: auto; }

.box { overflow: none; }

Which choice is not a render blocking resource? *

1 point

images

HTML

CSS

JavaScript

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

1 point

ul, li, a

p, b, h3

div, p, em

div, main, h1

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? *

1 point

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.

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? *

1 point

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; }

What is WebP? *

1 point

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

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? *

1 point

every()

map()

forEach()

filter()

In the context of this code, how would you describe user? *

1 point

function

array

variable

object

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

1 point

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

Which line would you add to this code to add "Cosmos" to the list of currencies using JavaScript? *

1 point

currencies.push("Cosmos");

Array.append("Cosmos", currencies);

currencies.add("Cosmos");

currencies(2) = "Cosmos";

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? *

1 point

<nav>

<main>

<ul>

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? *

1 point

flex: 0 0 100;

flex: 1 0 0;

flex: 0 0 auto;

flex: 1 1 auto;

How can you rewrite this function using arrow function syntax? *

1 point

Option 1

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

let product => x*y;

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

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? *

1 point

object-fit: contain

object-fit: stretch

object-fit: all

object-fit: cover

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

1 point

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

_ 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 <html> element (or its nearest positioned ancestor element)? *

1 point

Sticky positioning

Absolute positioning

Relative positioning

Fixed positioning

Lighthouse is a tool for auditing your website. Which choice is not a category of report offered by Lighthouse? *

1 point

performance

UX design

accessibility

SEO

How would you change this code to make Vanilla selected by default? *

1 point

what does the CSS selector a[href$="org"] select? *

1 point

all <a> tags whose href attribute begins with "org"

all <a> tags whose href attribute equals "org"

all <a> tags whose href attribute ends with "org"

all <a> tags whose href attribute contains "org"

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

1 point

the "Can I Use" website

the Web Platform Tests Suite

the CSS specification

MDN property pages

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

1 point

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.

Which choice is not of invoking strict mode in JavaScript? *

1 point

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.

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

1 point

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.

Submit

Clear form

Forms

This content is neither created nor endorsed by Google.