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()