CSS:

ul {
    MaRGin: 10px;
}

Are CSS property names case-sensitive?

• Yes
• No

HTML:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS:

ul {
    color: red;
}
li {
    color: blue;
}

What is the color of the text Sausage ?

• Red
• Blue
• Neither

HTML:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

CSS:

ul li {
    color: red;
}
#must-buy {
    color: blue;
}

What is the color of the text Sausage ?

• Red
• Blue
• Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

• Red
• Blue
• Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

• Red
• Blue
• Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

• Red
• Blue
• Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

• Red
• Blue
• Neither

Given the HTML below:

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

What is the color of the text Sausage ?

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

• Red
• Blue
• Neither

HTML:

<p id="example">Hello</p>

CSS:

#example {
    margin-bottom: -5px;
}

What will happen to the position of #example?

• It will move 5px downwards
• All elements succeeding #example with move 5px upwards
• Neither

HTML:

<p id="example">Hello</p>

CSS:

#example {
    margin-left: -5px;
}

What will happen to the position of #example?

• It will move 5px left
• All elements preceding #example with move 5px to the right
• Neither

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#i-am-useless {
    background-image: url('mypic.jpg');
}

Are unused style resources still downloaded by the browser?

• Yes
• No
• Sometimes

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

On page load, will mypic.jpg get downloaded by the browser?

• Yes
• No

HTML:

<div id="test1">
    <span id="test2"></span>
</div>

CSS:

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

On page load, will mypic.jpg get downloaded by the browser?

• Yes
• No

CSS:

@media only screen and (max-width: 1024px) {
    margin: 0;
}

What is the use of the only selector?

• Stops older browsers from parsing the remainder of the selector
• Apply the style for screen only and ignore the device max-width
• It does nothing

HTML:

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

CSS:

div {
    overflow: hidden;
}
p {
    float: left;
}

Does overflow: hidden create a new block formatting context?

• Yes
• No

CSS:

@media only screen and (max-width: 1024px) {
    margin: 0;
}

Does the screen keyword apply to the device's physical screen or the browser's viewport?

• Device's physical screen
• Browser's viewport

HTML:

<figure>
	<img src="myimage.jpg" alt="My image">
	<figcaption>
		<p>This is my self portrait.</p>
	</figcaption>
</figure>

Is the above HTML valid?

• Yes
• No

HTML:

<article>
    <h1>Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>

<article>
    <h1>This is awesome</h1>
    <p>I am some other text</p>
</article>

What does the scoped attribute do?

• Applies style rules to elements succeeding it, but with the same parent element
• Applies style rules to all children of the scoped parent element
• Applies style rules to IE browsers only
• None of the above

HTML:

<article>
    <a href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article>

Does HTML5 support block-level links?

• Yes
• No

HTML:

<img src="mypic.jpg" style="visibility: hidden" alt="My picture">

Does the HTML above trigger a http request when the page first loads ?

• Yes
• No

HTML:

<div style="display: none;">
    <img src="mypic.jpg" alt="My photo">
</div>

Does the HTML above trigger a http request when the page first loads?

• Yes
• No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert('Hello World');
    </script>
</head>

Does main1.css have to be downloaded and parsed before Hello World is alerted?

• Yes
• No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

Does main1.css have to be downloaded and parsed before main2.css can be fetched?

• Yes
• No

HTML:

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="main2.css" rel="stylesheet">
</body>

Does main2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page?

• Yes
• No

"1" + 2 + "3" + 4;

What does the above statement evaluate to?

• 10
• 1234
• 37

4 + 3 + 2 + "1"

What does the above statement evaluate to?

• 10
• 4321
• 91

var foo = 1;
function bar() {
	foo = 10;
	return;
	function foo() {}
}
bar();
alert(foo);

What is alerted?

• 1
• 10
• Function
• undefined
• Error

function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = 11;
}
alert(typeof bar());

What is alerted?

• number
• function
• undefined
• Error

var x = 3;

var foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return this.x;
        }
    }
}

var go = foo.baz.bar;

alert(go());
alert(foo.baz.bar());

What is the order of values alerted?

• 1, 2
• 1, 3
• 2, 1
• 2, 3
• 3, 1
• 3, 2

var x   = 4,
    obj = {
        x: 3,
        bar: function() {
            var x = 2;
            setTimeout(function() {
                var x = 1;
                alert(this.x);
            }, 1000);
        }
    };
obj.bar();

What value is alerted?

• 1
• 2
• 3
• 4
• undefined

x = 1;
function bar() {
    this.x = 2;
    return x;
}
var foo = new bar();
alert(foo.x);

What value is alerted?

• 1
• 2
• undefined

function foo(a) {
    alert(arguments.length);
}
foo(1, 2, 3);

What value is alerted?

• 1
• 2
• 3
• undefined

var foo = function bar() {}; 
alert(typeof bar);

What value is alerted?

• function
• object
• undefined

var arr = [];
arr[0]  = 'a';
arr[1]  = 'b';
arr.foo = 'c';
alert(arr.length);

What value is alerted?

• 1
• 2
• 3
• undefined

function foo(a) {
    arguments[0] = 2;
    alert(a);
}
foo(1);

What value is alerted?

• 1
• 2
• undefined

function foo(){}
delete foo.length;
alert(typeof foo.length);

What value is alerted?

• number
• undefined
• object
• Error