linkedin-skill-assessments-quizzes

Front-end Development

Q1. Which image matches the flex layout defined in this style rule?

.container {
  display: flex;
}

.container div:last-child {
  margin-left: auto;
}

Sample

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

Q3. Why would you surround a piece of text with <h1></h1> tags?

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

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

Q6. Which CSS property will not trigger layout recalculation?

Q7. What will be the value of selected?

let pocket = ['turnip', 'stone', 'log', 'apple'];
let selected = pocket[1];

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

Q9. 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';

Q10. What is the <label> element used for?

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

Q12. In this code, what is the term for the h1?

h1 {
  color: red;
  font-size: 5em;
}

Q13. Which HTML will result in text being highlighted in yellow?

.highlight {
  background-color: yellow;
}

Q14. Which choice is not a value of the type attribute of the <input> element?

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

Q16. Which choice is not part of CSS box model?

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

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

Source: ARIA landmarks in HTML5

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

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

Source: CSS units

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

Q22. What is Webpack primarily used for?

Q23. How many columns will there be, given this code?

.container {
  width: 600px;
  column-width: 200px;
  column-gap: 50px;
}

Q24. Which style will change the color of the text?

<cite>Noam Chomsky</cite>

cite {
  text-color: cyan;
}

cite {
  font-color: cyan;
}

cite {
  color: cyan;
}

cite {
  text: cyan;
}

Q25. You find this code in a stylesheet. What is it being used for?

.cf::after {
  content: '';
  display: block;
  clear: both;
}

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

Q27. Which description correctly describes the initial values of flex items if you have applied display: flex to their parent?

Q28. 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.

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

Q30. What will this loop print?

let max = 3;
for (i = 0; i > max; i++) {
  document.write("skrt ");
}

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

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

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

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

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

const user = {
  given_name: 'Joe',
  family_name: 'Bloggs',
  age: 40,
}

<link rel="preconnect" href="https://example.com" />

Source: web.dev

Q37. Which choice is not a render blocking resource?

blog.logrocket

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

Source: Web platform tests site

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

Q40. what does the CSS selector a[href$=”org”] select?

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

Source: MDN docs

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

Q43. Which line would you add to this code to add “Cosmos” to the list of currencies using JavaScript?

var currencies = ['Bitcoin', 'Ethereum'];

/* Missing line */
console.log(currencies);

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

<input type="radio" value="strawberry">Strawberry
<input type="radio" value="vanilla">Vanilla
<input type="radio" value="chocolate">Chocolate

Q45. _ 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).

Source: W3Schools

position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

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

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

Q48. The image below has float: left applied. Text wraps the float on the right and bottom. How would you force the second paragraph to start underneath the float, leaving a gap after the preceding paragraph?

CSS clear

Source: W3Schools

clear: left; When we use the float property, and we want the next element below (not on the right or left), we will have to use the clear property. When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

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

Source: W3Schools

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

Source: W3Schools

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

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="style.css"></noscript>

Source: StackOverflow

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

Source: stackoverflow

Q53. What is the meaning of “tree shaking” in relation to JavaScript performance?

Source: MDN Docs

Q54. What is WebP?

Source: Google Developers

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

Source: MDN Docs

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

Source: Web.dev

Q57. What is yarn?

Source: Yarn Docs

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

Source: MDN Docs

Q59. What is meant by the term “polyfill” when used in web development?

Source: Polyfill

Q60. Which choice is not a JavaScript framework?

Source: Laravel

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

Source: MDN Docs

Q62. Review the CSS below. What color would you expect the background color of the element with a class of .box to be?

.box {
  background-color: blue;
  background: url(images/star.png?raw=png) no-repeat left top;
}

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

Q64. Which code example would center .box inside .container?

<div class="container">
  <div class="box">what a lovely box, very centered</div>
</div>

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

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

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

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

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

Source: MDN Docs

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

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

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

Q69. The CSS box model describes how different parts of a box are calculated. Under the standard box model, what is the total width of the content box plus padding (excluding border and margin) in the following CSS?

box {
  width: 200px;
  padding: 10px;
  margin: 0 15px;
  border: 2px solid black;
}

Note: In the standard box model (box-sizing: content-box), the width property defines the content width. The total width of the visible box is the sum of content width (200px) + left and right padding (2 × 10px = 20px) = 220px. Margin and border are not included in this calculation since the question specifically asks for content + padding.

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

Q70. What is the JavaScript compiler Babel used for?

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

Source: W3 Schools

Source: W3 Schools

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

Q76. What is GraphQL?

Source: GraphQL official website

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

Q78. Which browser is not based on Chromium?

Q79. In supporting browsers, what would be the effect of using font-display: swap, as in the example?

@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Q80. What does the term “code splitting” mean with regard to JavasScript performance?

Q81. The vertical-align property works only on certain elements, or on those that have a certain CSS applied. Which element by default will allow vertical-align to be used?

Q82. Which attribute is used to add text to an image that will be displayed if the image does not load and read out to screen reader users?

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

Reference

Q84. To create a collection of radio buttons associated with the same field, each tag must ____.

Q85. Which statement about HTML syntax is false?

Q86. Which command has no Syntax error in CSS?

Q87. What type of CSS is the following snippet?

<h1 style="color:blue;">
  A Blue Heading
</h1>

Q88. How would you set the value of a property—in this example,—back to the default value, as listed in the specification?

Reference: W3 Schools

Q89. What are the four core principles of web accessibility according to WCAG (Web Content Accessibility Guidelines)?

Reference: WCAG 2 Overview

Q90. Which element creates an ordered list, shown with numbers in the browser by default?

Reference: MDN Web Docs - ol element

Q91. Which choice is not a valid value for the contain property?

Reference: MDN Web Docs - contain property

Q92. What is the default value of the display property of a <div> element in CSS?

Reference: MDN Web Docs - div element

This site is open source. Improve this page.