Skip to content

Latest commit

 

History

History
331 lines (251 loc) · 8.58 KB

front-end-development-quiz.md

File metadata and controls

331 lines (251 loc) · 8.58 KB

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;
}
  • A
  • B
  • C
  • D

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

  • function scope
  • block scope
  • inline scope
  • global scope

Q3. Why would you surround a piece of text with

tags?
  • 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

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

  • 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

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

  • title
  • class
  • style
  • id

Q6. Which CSS property will not trigger layout recalculation?

  • top
  • opacity
  • width
  • height

Q7. What will be the value of selected?

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

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

  • 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

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';
  • let fuit = 'plum'
  • var fuit = 'plum'
  • const fuit = 'plum'
  • fuit = 'plum'

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

  • 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

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

  • 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

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

h1 {
  color: red;
  font-size: 5em;
}
  • selector
  • combinator
  • declarator
  • markup

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

.highlight {
  background-color: yellow;
}
  • <span class="highlight">#BLM</span>
  • <span style="highlight">#BLM</span>
  • <highlight">#BLM</span>
  • <div id="highlight">#BLM</span>

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

  • range
  • address
  • date
  • password

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

  • all users
  • users who can see the content on screen
  • no users
  • screen reader users

Q15. Which choice is not part of CSS box model

  • margin
  • border
  • padding
  • paragraph

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

  • https
  • org
  • uniswap.org
  • app.uniswap

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

  • <form>
  • <ul>
  • <main>
  • <nav>

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

  • 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

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

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

  • <meter>
  • <range>
  • <datalist>
  • <optgroup>

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

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

.container {
  width: 600px;
  column-width: 200px;
  column-gap: 50px;
}
  • one
  • three
  • four
  • two

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

  <cite>Noam Chomsky</cite>
  • A
cite {
    text-color: cyan;
}
  • B
cite {
    font-color: cyan;
}
  • C
cite {
    color: cyan;
}
  • D
cite {
    text: cyan;
}

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

Q25. 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"};

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

Q27. 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/

  • flex: 1 0 0;
  • flex: initial;
  • flex: 1 1 auto;
  • flex: 1 0 auto;

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

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

Q30. 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">

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

  • parseInt("six");
  • parse_int('6');
  • parseInt("6");
  • parseint("6");

Q32. 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;

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

  • performance
  • UX design
  • accessibility
  • SEO

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

const user = {
  given_name: 'Joe',
  family_name: 'Bloggs',
  age: 40,
}
  • function
  • array
  • variable
  • object