<div class="note">
<p>This is a group lab. You <strong>MUST</strong> work with 1–2 other people.</p>
<p>Choose one person to submit your work, and make sure everyone’s name is on your submission.</p>
<p>You may submit your answers in a plain .txt file or as a HTML web page.</p>
</div>
<section>
<?= t_head("HTML/Basic CSS", "10") ?>
<ol>
<li>What is the difference between an ID and a class? Under which circumstances is each used? Can you attach an ID to multiple elements? a class? Can you attach multiple IDs to the same element? classes?</li>
<li>
<p>How many things can you find wrong with the following HTML snippet?</p>
<pre><code>...
<body>
<img id="foo" src="foo.jpg">
<div class="bar">
<em>Lorem ipsum<br/>
<br/>
<strong class="bar">dolor</em> sit</strong> amet, ...
</div>
<ul>
<li><a href="http://www.google.com/?q=lorem+ipsum&hl=en">Amet!</a></li>
<ul>
<li id="foo">et al.</li>
</ul>
</ul>
</body>
...</code></pre>
<p>(Hint: there are 7 validation errors and 2–3 Bad Things.)</p>
</li>
<li>In the above snippet, what’s the technical term for <code>a</code>, <code>img</code>, <code>ul</code>, etc.? (All the tags.) What’s the technical term for <code>href</code>, <code>src</code>, <code>id</code>, <code>class</code>, etc.?</li>
</ol>
</section>
<section>
<?= t_head("Layout", "10–15") ?>
<ol>
<li>List the box model properties, in order from the inside to the outside of the element. If all box model properties are set, how do we calculate the element’s width/height?</li>
<li>
<p>All elements fall into a couple of different categories with respect to how they’re stacked on the page.</p>
<ul>
<li>How many of those categories have we learned so far? Name one example of each.</li>
<li>What is the CSS property that allows you to “morph” this characteristic of an element?</li>
<li>What are the differences in the box model between these elements?</li>
</ul>
</li>
<li>How many ways can you think of to hide an element? (Consider using JavaScript/jQuery, too.) What are the differences between them?</li>
<li>Describe how you would use HTML and CSS to layout a page with two columns, both percent-width, but with fixed-width spacing between them.</li>
<li>
<p>Describe the <code>position</code> property and what it’s used for:</p>
<ul>
<li>What are its possible values, and how do they affect placement of the element?</li>
<li>What are the four properties that are commonly used in conjunction with <code>position</code>? (There’s also a fifth, less-common one if you want to list it too.)</li>
<li>How do these four properties affect the placement of the element?</li>
</ul>
</li>
</ol>
</section>
<section>
<?= t_head("The DOM & jQuery", "10–15") ?>
<ol>
<li>What is the DOM?</li>
<li>What is the difference between a DOM object and a jQuery object?</li>
<li>List a few examples of properties and methods on DOM objects, and their equivalents using jQuery.</li>
<li>
<p>How many problems (or potential problems) can you spot in the following JavaScript code?</p>
<pre><code>$('foo').innerHTML = 'Hello world, I'm a string!';
window.onload() = {
$bar = 42;
document.getElementById('.bar').css('width', $bar);
}</code></pre>
<p>(Hint: there are roughly 9 errors, one Inferior Thing, and one Bad Thing. One more if you count the missing semicolon.)</p>
</li>
<li>What is the difference between a property and a variable? a function and a method?</li>
</ol>
</section>
<!-- <section>
<?= t_head("Event Handling & Effects", "10") ?>
</section> -->
<footer>
<p>If you’ve finished everything, good job! Take a look at the <a href="../../lectures/special-effects/#slide24">new Special Effects slides</a>.</p>
</footer>