Front end trivia

Prize: Timbits

Rules

  • No looking stuff up on any device
  • Use laptops to chat with remotes
  • Honour system
  • 3 regular rounds: HTML, CSS, JS
  • Every regular round question is worth 2 points
  • 1 point for any partial answer, 2 points for complete answer
  • Lightning round: 1 question in each category
  • Lightning round questions are worth way more
  • ~1-2 minutes per question
  • Each team will pass their sheet to the team on the right for marking
  • Your team's results will be reflected in your annual reviews
  • Just kidding. Nothing matters. Have fun

HTML

1. Which of the following are NOT valid elements in HTML5?

Which of these are NOT valid:

<applet>
<b>
<datalist>
<h7>
<modal>
<slot>
<track>
<wbr>

2. What is the default type attribute of a button?

3. What will get read by a screenreader?

<label for="my-input">Apples</label>
<input id="my-input" aria-label="Oranges" aria-labelledby="my-span">
<span id="my-span">Bananas</span>

4. List 3 ways to associate a label with an element

5. Is it valid to have a <th> within a <tbody>?

CSS

1. What CSS selector allows you to style the parent of a given selector?

2. How much space is there between the 2 <div>s?

<div style="margin-bottom: 10px;"></div>
<div style="margin-top: 20px;"></div>

3. What is the height of #container?

<div id="container">
    <div style="float: left; height: 5px;"></div>
    <div style="float: right; height: 10px;"></div>
</div>

4. List 3 ways to write (pure) red in CSS

<div style="color: _____;">Fill in the blank</div>

5. What are the outer heights of these 2 <div>s?

<div style="box-sizing: content-box; height: 50px; padding: 10px; border: 10px;"></div>
<div style="box-sizing:  border-box; height: 50px; padding: 10px; border: 10px;"></div>

JavaScript

1. What statements are used to declare a variable in JavaScript?

2. What is this?

3. Is an array an object?

4. What does $ mean in vanilla JavaScript?

5. What will get printed to the console?

var myArray = [];

if (myArray) {
    console.log('dogs');
} else {
    console.log('cats');
}

Lightning Round

1. List as many table-related HTML tags as you can.

Example: <td>

2. List as many CSS units relating to size/length as you can.

Example: px

3. List as many array prototype methods as you can.

Example: myArray.forEach()

Front end trivia

By Scott Blinch

Made with Slides.com

Front end trivia

  • 1,199

More from Scott Blinch