upload 42 minutes past the nick of time

2026-03-05 00:42:20 -05:00
parent 5edff913c3
commit 3aef6fa387
11 changed files with 761 additions and 0 deletions
--- a/site/introwebdev/index.html
+++ b/site/introwebdev/index.html
@@ -54,6 +54,9 @@ TBD. Will post an announcement when this is worked out.
 	<li><a href="week-4-homework.html">Week 4 Homework (due on February 6th)</a></li>
 	<li>No week 5 homework!</li>
 	<li><a href="week-6-homework.html">Week 6 Homework (due on February 20th)</a></li>
 	<li>Week 7 spring break</li>
 	<li><a href="week-8-homework.html">Week 8 Homework (due on March 13th)</a></li>
 	<li><a href="week-9-homework.html">Week 9 Homework (due on March 13th)</a></li> 
 </ul>
 <h2>Lecture notes</h2>
 <p>
@@ -65,11 +68,22 @@ I'll be posting these in advance of lectures, so you can review the material bef
 	<li>Week 3: <a href="week-3-gh-pages.html">Github Pages Intro</a>, <a href="week-3-safety.html">Internet Safety</a>, <a href="week-3-link-style.html">Linked Styles</a></li>
 	<li>Week 4: <a href="week-4-style.html">Style</a>, <a href="week-4-id-class.html">ID and Class</a>, <a href="week-4-divs.html">The Div Tag</a></li>
 	<li>Week 6: <a href="week-6-backgrounds.html">Backgrounds</a></li>
 	<li><i>Spring Break</i></li>
 	<li>Week 8: <a href="week-8-display.html">Display</a>, <a href="week-8-position.html">Position</a>, <a href="week-8-flexbox-1.html">Flexbox 1</a>, <a href="week-8-grid-1.html">Grid 1</a></li>
 	<li>Week 9: <a href="week-9-grid-2.html">Grid 2</a></li>
 </ul>
 <h2>Generative AI policy</h2>
 <p>
 Don't use AI to do your assignments. You're here to learn web development, not to learn AI prompting. I will assign a 0 grade to any assignment
 that I suspect was written by AI.
 </p>
 <h2>Math Things</h2>
 <p>
 For math we briefly mentioned in class but didn't have enough time to cover.
 </p>
 <ul>
 <li>Markov Chains: <a href="https://en.wikipedia.org/wiki/Markov_chain">Wikipedia</a> for reference, <a href="https://setosa.io/ev/markov-chains/">a nice visual guide</a> for first-time learning.</li>
 <li><a href="https://deadlyboringmath.us/posts/a-brief-introduction-to-ai.html">A Brief Introduction to AI Math</a> on DeadlyBoringMath - my math blog (warning: don't read the old physics notes, they are unhinged).</li>
 </ul>
 [/]
 [#template.html]
--- a/site/introwebdev/pietmondrianish.png
+++ b/site/introwebdev/pietmondrianish.png
--- a/site/introwebdev/rolling-css-properties.html
+++ b/site/introwebdev/rolling-css-properties.html
@@ -0,0 +1,6 @@
 [!]
 [=title "Rolling CSS Properties List"]
 [=content-]
 [/]
 [#template.html]
--- a/site/introwebdev/rolling-tags-list.html
+++ b/site/introwebdev/rolling-tags-list.html
@@ -19,6 +19,8 @@
 </ul>
 <h2>H2 Subheading</h2>
 <ul>
 <li><code>&lt;q&gt; ... text ... &lt;/q&gt;</code>: Quoted text, <q>like this</q></li>
 <li><code>&lt;span&gt; ... text ... &lt;/span&gt;</code>: A simple inline container that doesn't apply any styles by default.</li>
 <li><code>&lt;h3&gt;&lt;/h3&gt;, &lt;h4&gt;&lt;/h4&gt;, &lt;h5&gt;&lt;/h5&gt;, &lt;h6&gt;&lt;/h6&gt;</code>: Smaller and smaller headings. Using these is pretty goofy.</li>
 <li><code>&lt;br /&gt;</code>: A line break! Used to make<br>
 newlines like<br>
@@ -26,6 +28,8 @@ these. (Remember HTML mostly ignores newlines unless you add a &lt;br /&gt;)</li
 <li><code>&lt;a href="https://example.com/"&gt; Clickable Text &lt;/a&gt;</code>: A clickable link! Any URL works. The result looks like <a href="https://example.com/">Clickable Text</a>.</li>
 <li><code>&lt;img src="image.png" /&gt;</code> An image.</li>
 <li><code>&lt;p&gt; ... content ... &lt;/p&gt;</code>: A <i>block-level</i> paragraph, used to organize text.</li>
 <li><code>&lt;link /&gt;</code>: This tag is used to link in resources from elsewhere - for instance, <code>&lt;link rel="stylesheet" href="style.css" /&gt;</code> links in
 the CSS from <code>style.css</code>.</li>
 </ul>
 <h2>Don't Forget...</h2>
 <ol>
--- a/site/introwebdev/week-8-display.html
+++ b/site/introwebdev/week-8-display.html
@@ -0,0 +1,169 @@
 [!]
 [=title "Week 8: Display"]
 [=content-]
 <p>
 Every tag in a page has a <i>display</i>. This controls how it's sized and positioned by the layout engine.
 There are three main values for <code>display</code>: <code>inline</code>, <code>block</code>, and <code>inline-block</code>.
 Most elements are inline or block by default. For example:
 </p>
 <pre><code>&lt;style&gt;
 #inline-element {
 	display: inline; /* this is already set automatically - just putting it here for clarity */
 	background-color: yellow;
 }
 #block-element {
 	display: block; /* this is already set automatically - just putting it here for clarity */
 	background-color: green;
 }
 #inline-block-element {
 	display: inline-block; /* this is *not* set automatically, divs are block by default */
 	background-color: red;
 }
 &lt;/style&gt;
 &lt;span id="inline-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/span&gt;
 &lt;div id="block-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/div&gt;
 &lt;div id="inline-block-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/div&gt;
 </code></pre>
 <p>
 Gives this result:
 </p>
 <style>
 #inline-element {
 	display: inline; /* this is already set automatically - just putting it here for clarity */
 	background-color: yellow;
 }
 #block-element {
 	display: block; /* this is already set automatically - just putting it here for clarity */
 	background-color: green;
 }
 #inline-block-element {
 	display: inline-block; /* this is *not* set automatically, divs are block by default */
 	background-color: red;
 }
 </style>
 <span id="inline-element">
 text<br>text part 2
 </span>
 <div id="block-element">
 text<br>text part 2
 </div>
 <div id="inline-block-element">
 text<br>text part 2
 </div>
 <p>
 This is important! Notice that the yellow inline element <i>fits around the text</i> - meaning the size and shape is the same as the contents, even when they're not an even square.
 Conversely, the green block element <i>fills the whole width</i> - even though the content is much smaller than that.
 And finally, the red inline-block element fills the <i>bounding box</i>:
 the smallest rectangle you can draw around the content.
 </p>
 <p>
 Sizes don't always work the same way! For instance, if we change the previous demo code:
 </p>
 <pre><code>&lt;style&gt;
 #inline-element {
 	display: inline; /* this is already set automatically - just putting it here for clarity */
 	background-color: yellow;
 	width: 100px;
 	height: 100px;
 }
 #block-element {
 	display: block; /* this is already set automatically - just putting it here for clarity */
 	background-color: green;
 	width: 100px;
 	height: 100px;
 }
 #inline-block-element {
 	display: inline-block; /* this is *not* set automatically, divs are block by default */
 	background-color: red;
 	width: 100px;
 	height: 100px;
 }
 &lt;/style&gt;
 &lt;span id="inline-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/span&gt;
 &lt;div id="block-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/div&gt;
 &lt;div id="inline-block-element"&gt;
  text&lt;br /&gt;
  text part 2
 &lt;/div&gt;
 </code></pre>
 <p>
 Gives this result:
 </p>
 <style>
 #inline-element-2 {
 	display: inline; /* this is already set automatically - just putting it here for clarity */
 	background-color: yellow;
 	width: 100px;
 	height: 100px;
 }
 #block-element-2 {
 	display: block; /* this is already set automatically - just putting it here for clarity */
 	background-color: green;
 	width: 100px;
 	height: 100px;
 }
 #inline-block-element-2 {
 	display: inline-block; /* this is *not* set automatically, divs are block by default */
 	background-color: red;
 	width: 100px;
 	height: 100px;
 }
 </style>
 <span id="inline-element-2">
 text<br>text part 2
 </span>
 <div id="block-element-2">
 text<br>text part 2
 </div>
 <div id="inline-block-element-2">
 text<br>text part 2
 </div>
 <p>
 <code>block</code> and <code>inline-block</code> both respect the width, but <code>inline</code> completely ignores it!
 </p>
 <p>
 Displays are extremely important to understand. There are actually quite a few more beyond these basic ones,
 but it's critical to understand the basic ones before moving onto weirder things like flexbox and grid.
 I highly recommend reading more on display at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display">Mozilla Developer Network</a> (warning: pretty advanced - we haven't covered all of the material
 on that page!).
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-8-flexbox-1.html
+++ b/site/introwebdev/week-8-flexbox-1.html
@@ -0,0 +1,143 @@
 [!]
 [=title "Week 8: Flexbox 1"]
 [=content-]
 <p>
 Finally, the oft-teased flexbox arrives! We're not covering all of flexbox in part 1 (there's a LOT), but we'll go over some basic properties and the rough idea.
 </p>
 <p>
 Flexbox is the clever answer to positioning being hard. Rather than having to use terrible absolute positioning tricks,
 flexboxes generalize to <i>almost every hard problem</i> - centering, space distribution, automatic reflow (e.g. stacking vertically when screens are too small for horizontal),
 etc, and you can do <i>all of this without JavaScript</i>. This is the simplest flexbox: 
 </p>
 <pre><code>&lt;style&gt;
 span {
 	background-color: red;
 	padding: 5px;
 }
 #container {
 	display: flex;
 }
 &lt;/style&gt;
 &lt;div id="container"&gt;
 	&lt;span&gt; Text 1 &lt;/span&gt;
 	&lt;span&gt; Text 2 &lt;/span&gt;
 	&lt;span&gt; Text 3 &lt;/span&gt;
 &lt;/div&gt;
 </code></pre>
 <p>
 Produces:
 </p>
 <style>
 span.flex-example-1 {
 	background-color: red;
 	padding: 5px;
 }
 #container.flex-example-1 {
 	display: flex;
 }
 </style>
 <div id="container" class="flex-example-1">
 	<span class="flex-example-1"> Text 1 </span>
 	<span class="flex-example-1"> Text 2 </span>
 	<span class="flex-example-1"> Text 3 </span>
 </div>
 <p>
 Note the <code>display: flex;</code> - that div is a flexbox! That's all it takes. Unfortunately, this also isn't very <i>useful</i>. Let's make it more interesting
 with the <code>justify-content</code> property:
 </p>
 <pre><code>&lt;style&gt;
 span {
 	background-color: red;
 	padding: 5px;
 }
 #container {
 	display: flex;
 	justify-content: center;
 }
 &lt;/style&gt;
 &lt;div id="container"&gt;
 	&lt;span&gt; Text 1 &lt;/span&gt;
 	&lt;span&gt; Text 2 &lt;/span&gt;
 	&lt;span&gt; Text 3 &lt;/span&gt;
 &lt;/div&gt;
 </code></pre>
 <p>
 Produces:
 </p>
 <style>
 span.flex-example-2 {
 	background-color: red;
 	padding: 5px;
 }
 #container.flex-example-2 {
 	display: flex;
 	justify-content: center;
 }
 </style>
 <div id="container" class="flex-example-2">
 	<span class="flex-example-2"> Text 1 </span>
 	<span class="flex-example-2"> Text 2 </span>
 	<span class="flex-example-2"> Text 3 </span>
 </div>
 <p>
 	Nice, fully centered. What about spacing?
 </p>
 <pre><code>&lt;style&gt;
 span {
 	background-color: red;
 	padding: 5px;
 }
 #container {
 	display: flex;
 	justify-content: space-evenly;
 }
 &lt;/style&gt;
 &lt;div id="container"&gt;
 	&lt;span&gt; Text 1 &lt;/span&gt;
 	&lt;span&gt; Text 2 &lt;/span&gt;
 	&lt;span&gt; Text 3 &lt;/span&gt;
 &lt;/div&gt;
 </code></pre>
 <p>
 Produces:
 </p>
 <style>
 span.flex-example-3 {
 	background-color: red;
 	padding: 5px;
 }
 #container.flex-example-3 {
 	display: flex;
 	justify-content: space-evenly;
 }
 </style>
 <div id="container" class="flex-example-3">
 	<span class="flex-example-3"> Text 1 </span>
 	<span class="flex-example-3"> Text 2 </span>
 	<span class="flex-example-3"> Text 3 </span>
 </div>
 <p>
 Useful! Note how hard it would be to produce this effect without using flexbox. There are a few other properties for <code>justify-content</code>, all of which are listed
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content">on MDN</a>.
 </p>
 <p>
 I hope you can see how powerful flexbox is. We're past the point where you know enough to start building websites, so now it's time to start thinking about <i>designing</i> websites-
 flexbox is going to be one of the most effective tools in your arsenal. I would highly recommend practicing on your own!
 </p>
 <p>
 There is a LOT more to flexbox, which we'll be covering over the next few weeks; you can get ahead by reading <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">the CSS-Tricks guide to Flexbox</a>.
 While it's advanced, it's a good reference.
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-8-grid-1.html
+++ b/site/introwebdev/week-8-grid-1.html
@@ -0,0 +1,59 @@
 [!]
 [=title "Week 8: Grid 1"]
 [=content-]
 <p>
 Grid is a layout engine like Flexbox, but with a different use case: 2d problems. Rather than
 positioning in a single dimension (right/left) like Flexbox, grid allows you to position in 2 dimensions while maintaining many of the same properties.
 </p>
 <p>
 Grids are pretty complicated, and we're going to have at least one entire lecture on them, but we can start now with a very simple use case:
 </p>
 <pre><code>&lt;style&gt;
 #grid {
 	display: grid;
 	grid-template-columns: 100px auto;
 	grid-template-rows: 100px auto;
 	height: 500px;
 }
 &lt;/style&gt;
 &lt;div id="grid"&gt;
 &lt;span style="background-color: red;"&gt;Square 1&lt;/span&gt;
 &lt;span style="background-color: purple"&gt;Square 2&lt;/span&gt;
 &lt;span style="background-color: green"&gt;Square 3&lt;/span&gt;
 &lt;span style="background-color: blue"&gt;Square 4&lt;/span&gt;
 &lt;/div&gt;
 </code></pre>
 <p>
 Which looks like this:
 </p>
 <style>
 #grid {
 	display: grid;
 	grid-template-columns: 100px 1fr;
 	grid-template-rows: 100px 1fr;
 	height: 500px;
 }
 </style>
 <div id="grid">
 <span style="background-color: red;">Square 1</span>
 <span style="background-color: purple">Square 2</span>
 <span style="background-color: green">Square 3</span>
 <span style="background-color: blue">Square 4</span>
 </div>
 <p>
 	Note something interesting: even though the <code>span</code>s are inline elements, they fill up the whole cells!
 	This is because grid cells are their own kind of display, and you can't override them.
 </p>
 <p>
 	The grid is set up by the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties. When not present, their default behavior is
 	to evenly space everything and create as many rows/columns as necessary to fit the contents. In this case, each one contains <code>100px 1fr</code>:
 	this means "make the first row/column 100px, and make the second row/column fill whatever space is left". (The <code>fr</code> unit is actually
 	a lot more complicated than that, but we won't worry about that for now).
 </p>
 <p>
 	I highly recommend playing with this.
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-8-homework.html
+++ b/site/introwebdev/week-8-homework.html
@@ -0,0 +1,46 @@
 [!]
 [=title "Week 8 Homework"]
 [=content-]
 <p>
 	Because it's essentially an addition to your week 9 homework (sorry!), week 8 will be short.
 </p>
 <h1>Part 1: Spaaaaaaaaaaaaaace</h1>
 <p>
 	Using fixed and absolute positioning, add some more planets to your space gallery (from homework 6)! You should be able to put them in much more
 	interesting places, because you don't have to worry about how to set margins. You may use the <code>img</code> tag for the new planets,
 	but beware images from P4L may be quite large and you'll have to set a <code>width</code>.
 	<span class="goal">At least 2 new planets with absolute positions</span>
 	<span class="goal">At least 2 new planets with fixed positions</span> 
 </p>
 <p>
 	If you aren't clear on the difference between absolute and fixed positions, review
 	<a href="week-8-position.html">Week 8: Position</a>.
 </p>
 <h1>Part 2: Scavenger Hunt</h1>
 <p>
 	Find two new tags that aren't on the <a href="rolling-tags-list.html">Rolling Tags List</a>
 	(if you've learned tags outside of those, it's fine to reuse a tag you've already used on homework).
 	One should be <b>block</b> and one should be <b>inline</b>. Do NOT use CSS to override their default behaviors.
 </p>
 <p>
 	Use both tags somewhere on your website, and clearly mark which is inline and which is block.
 </p>
 <p>
 	<span class="goal">A new inline tag</span> <span class="goal">A new block tag</span>
 </p>
 <h1>Extra Credit</h1>
 <p>
 	For 10 points of extra credit, <b>teach yourself</b> about sticky positioning and use a sticky element somewhere on your page.
 	It should be obviously stickied; I'm not awarding this one on a technicality.
 </p>
 <h1>Self-Study</h1>
 <p>
 	See homework 9.
 </p>
 <h1>Submission</h1>
 <p>
 	Send a link to your github website to me once it's finished - I use your email dates to track which commit you were on when you "submitted" the assignment.
 	This assignment is due on March 13th along with Homework 9.
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-8-position.html
+++ b/site/introwebdev/week-8-position.html
@@ -0,0 +1,98 @@
 [!]
 [=title "Week 8: Position"]
 [=content-]
 <p>
 Till now, we've mainly relied on the browser to set positions for us by picking wherever there's space.
 This isn't a bad way to do it - in fact, this ensures the most support across devices - but before we start
 considering more advanced techniques, we should look at <i>positioning</i>.
 </p>
 <p>
 The CSS <code>position</code> property has five common values: <code>static</code>, <code>fixed</code>, <code>relative</code>, <code>sticky</code>, and <code>absolute</code>.
 </p>
 <ul>
 <li>
 <code>static</code> positioning simply accepts wherever makes the most sense to the browser - it's the default for every element.
 </li>
 <li>
 <code>fixed</code> positioning sets a <i>position relative to the viewport</i>: for instance, the floating red div in this page is actually defined
 in the code right below this text, but because it has <code>position: fixed;</code>, it completely ignores its location in the document! Check it out with the web inspector.
 <!-- hi, intrepid inspector! this is the fixed div: -->
 <div style="position: fixed; padding: 20px; color: white; font-weight: bold; top: 200px; left: 100px; background-color: red;">fixed position element example</div>
 </li>
 <li>
 <code>relative</code> positioning is a bit confusing - essentially, it creates a <i>container</i> for an absolute element, so you can have absolute elements
 that sorta-respect document flow.
 </li>
 <li>
 <code>absolute</code> positioning lets you set a position <i>relative to the page</i>: it's like <code>fixed</code>, except it moves when you scroll.
 For example, the yellow div in this page is absolute positioned; it's defined below in the code:
 <!-- hi again! this is the absolute div: -->
 <div style="position: absolute; padding: 20px; color: black; font-weight: bold; top: 200px; right: 100px; background-color: yellow;">absolute position element example</div>
 </li>
 <li>
 <code>sticky</code>: Sticky is a strange one! It goes from being essentially <code>relative</code> to being essentially <code>fixed</code> when
 a simple condition is satisfied. We won't talk much about sticky in this class, but <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position">MDN</a>
 has an example as always.
 </li>
 </ul>
 <p>
 Once you have a position set, you need some way to actually control where the element goes - these are <i>not</i> the same thing, because CSS is confusing.
 You set the actual location of the element using the <code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code> properties.
 For instance, the floating color blocks in this page (use the web inspector to see!) have <code>top: 200px;</code>, which pushes them <i>down from the top</i>
 by 200 pixels, and have either <code>left: 100px;</code> or <code>right: 100px;</code>, which push them <i>to the right from the left edge</i> or <i>to the left from the right edge</i>.
 </p>
 <p>
 Top, left, bottom, and right should be thought of as <i>setting the distance from the edges of the screen</i>.
 </p>
 <p>
 <b>A word of caution</b>: you should never use absolute positioning. It's just a bad idea. There are many screens, and fitting absolute positioning to screens of
 different sizes quickly becomes a nightmare. Whenever possible, use grid or flexbox instead - and seriously consider whether or not you actually <i>need</i>
 the fancy positioning, if you aren't able to get it without <code>absolute</code>.
 </p>
 <p>
 We talked briefly in class about the css <code>transform</code> property. We won't be covering transform any more, but it's pretty interesting -
 I recommend reading <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform">MDN's page on transform</a> if you're curious.
 </p>
 <b>Lorem ipsum to produce a scrollbar so you can see what happens to positioned elements when they scroll:</b>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor arcu nibh, sit amet tincidunt tortor tincidunt quis. Vestibulum eu nisl sed risus gravida viverra. Vestibulum condimentum turpis quam, eget porttitor sapien blandit sit amet. Cras risus tortor, lacinia et blandit nec, lacinia ac ante. Fusce elementum massa enim, varius vestibulum turpis accumsan ut. Duis in elementum dolor. Maecenas vitae ullamcorper est, in porta mauris. Curabitur bibendum, ipsum ut venenatis ultrices, nunc elit eleifend nunc, tincidunt aliquam turpis justo sit amet diam. Mauris nec metus felis. Praesent dui leo, tristique quis mi eget, egestas lobortis augue. Duis ut laoreet ex, aliquam lacinia lorem. Phasellus finibus velit in interdum mattis.
 Praesent id venenatis libero. Integer facilisis at velit vitae elementum. In a felis a diam facilisis pretium. Phasellus finibus mollis turpis, at sagittis neque commodo in. Fusce eget venenatis ex. Praesent tristique, nulla ac maximus finibus, lectus leo facilisis risus, ut tristique nibh quam sit amet est. Sed vel nisi dictum lorem laoreet tempor. Nunc tempus accumsan tortor, vel aliquet nunc pellentesque a. Fusce faucibus risus nec lorem ullamcorper, in sollicitudin orci pellentesque. Curabitur aliquet congue leo, at viverra orci placerat vel. Mauris id tellus rutrum, blandit tellus a, ornare magna.
 Nunc aliquam, purus at iaculis luctus, nisi massa varius velit, eget condimentum arcu magna vel purus. Nulla nec posuere mi. Fusce nec lacinia eros, sed tristique dolor. Duis pulvinar leo id magna volutpat dapibus. Donec ac condimentum magna. Integer faucibus consectetur elit, quis ullamcorper turpis pulvinar non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu odio rhoncus leo euismod euismod.
 Maecenas ut mi nulla. Fusce at leo interdum, hendrerit ex ac, gravida massa. Vestibulum sit amet finibus risus. Donec a diam lorem. Morbi blandit ac augue sed congue. Proin mauris elit, aliquam quis urna vel, euismod condimentum libero. Quisque ex arcu, dignissim eu bibendum sit amet, tincidunt eget ante. Sed pharetra lorem mauris, a tincidunt nunc pretium non. Integer venenatis in eros in molestie. Pellentesque viverra blandit orci, a laoreet ligula elementum sed. Mauris ac faucibus enim. Suspendisse nec lacinia mauris, in eleifend erat. Aliquam ut turpis dolor. Duis vel bibendum eros.
 Nulla finibus aliquet nisi eu pharetra. Curabitur id libero fermentum arcu aliquam ultrices a a metus. Integer finibus mauris sit amet est consequat luctus. Donec luctus consectetur tellus, sed convallis ante rutrum nec. Integer nec tortor et arcu luctus finibus vitae quis nisl. Praesent vel justo feugiat, cursus elit sit amet, hendrerit est. Aenean semper egestas volutpat. Aliquam fermentum, nulla non tincidunt volutpat, magna ex condimentum lorem, id bibendum felis ante eget neque. Aliquam vel ex id enim semper cursus. Donec mattis erat in nibh fermentum iaculis. Aliquam condimentum consectetur augue, at tempor felis vestibulum non. Aliquam eleifend urna ut metus sodales tempor. Integer tincidunt arcu in orci rhoncus, et viverra sapien ornare.
 Duis venenatis mauris at ex iaculis rhoncus non a augue. Quisque egestas enim nunc, in ultricies erat pretium tempor. Curabitur et purus laoreet, fermentum tortor at, cursus felis. Donec eget neque eu justo vulputate iaculis in at dolor. In iaculis velit id elit blandit bibendum. Etiam eu efficitur ex, vitae porta odio. Fusce tempor purus vitae orci tristique hendrerit. Etiam finibus vitae metus ac luctus. Sed et eleifend eros. Nunc ullamcorper porttitor pharetra. Maecenas aliquam scelerisque purus non aliquam. Phasellus porta lectus mauris. Donec dapibus tincidunt nunc, molestie rutrum odio.
 Etiam tincidunt gravida ligula, in molestie purus commodo non. Duis nec dignissim risus, eu iaculis augue. Sed lobortis semper justo, ut varius nulla porta vitae. Aenean vel interdum dolor. Cras venenatis sagittis nunc sed porttitor. Sed dignissim consectetur erat sed molestie. Mauris vitae turpis non risus auctor maximus vel at nisi. Vestibulum imperdiet, urna sed fringilla sodales, nisl elit sollicitudin erat, quis vestibulum massa felis sed eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Morbi vitae fringilla justo. Etiam pretium a dolor et consectetur. Aenean finibus diam mi. Ut vulputate, nibh vitae posuere feugiat, metus nibh condimentum felis, vitae sollicitudin dolor nibh vel lacus. Phasellus venenatis nisi ut vehicula pulvinar. Integer elementum dolor id massa hendrerit aliquam. Aenean accumsan vehicula faucibus. Nunc fermentum convallis nisl, eu maximus nisi dignissim vitae. Donec magna diam, efficitur in euismod tristique, consectetur ac arcu. In vehicula consequat scelerisque.
 Vestibulum vitae felis eu lorem mattis consectetur. Nullam ligula lectus, ultricies ac porttitor et, sollicitudin imperdiet dui. Pellentesque imperdiet neque a quam congue vehicula. Nulla in turpis ac quam porta mattis. Morbi eget augue ante. Duis non augue sodales magna pharetra semper. Vivamus auctor velit non placerat imperdiet. Donec lacinia risus ipsum, sit amet mattis dolor consequat ac. Nunc et nulla faucibus, sagittis risus eget, interdum mauris. Praesent sit amet sagittis metus.
 Sed rhoncus ullamcorper consectetur. Nullam in commodo lorem. Integer quis vestibulum diam, eget sodales ex. Aliquam luctus sem orci, eu auctor mi mattis at. Suspendisse sit amet mi rhoncus, interdum nibh nec, vulputate ligula. Cras sed velit bibendum metus lacinia egestas quis ac risus. Integer nulla velit, facilisis nec sodales id, bibendum sed ipsum. Praesent id tortor vestibulum, venenatis diam vitae, euismod lacus. Quisque non magna ut neque imperdiet tristique.
 Nulla blandit, elit eu pulvinar congue, est neque venenatis tortor, at interdum massa nunc in risus. Aenean euismod nulla mi, eu hendrerit augue lacinia at. Curabitur nec volutpat risus. Vivamus ultricies mauris non arcu tempus facilisis. Quisque sit amet ex facilisis, aliquet ex sed, varius magna. Sed fermentum, diam ultrices pharetra condimentum, justo tortor rutrum diam, ac condimentum mi ex at massa. Proin bibendum velit non velit pretium convallis.
 Nullam blandit varius orci. Quisque dui sapien, suscipit ac consequat in, posuere eget mi. Ut varius efficitur ex, in congue lectus tempus ut. In hac habitasse platea dictumst. Nam sed dolor tincidunt, elementum purus et, ultrices mi. Cras sollicitudin mauris ac diam dignissim imperdiet. Nunc orci tortor, tempor in dolor in, interdum ultrices turpis.
 In sed tellus nulla. Suspendisse fringilla dapibus turpis quis pulvinar. Aenean ac purus odio. Fusce a quam quis mi convallis ultrices. Donec faucibus dapibus metus vitae molestie. Morbi accumsan lacus id ligula aliquam imperdiet. Quisque feugiat accumsan volutpat. Praesent finibus lobortis erat ut iaculis. Nullam posuere gravida dolor, nec facilisis felis ultrices id.
 Sed vel tortor nec nisl malesuada elementum. Nulla suscipit velit sed neque sodales cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus quis massa et dapibus. Integer ultricies tempus libero, nec molestie felis pulvinar sit amet. Integer consequat lobortis felis elementum egestas. Ut tortor ante, placerat in finibus nec, semper ut leo. Ut molestie velit risus, non placerat enim dapibus a. Fusce ex justo, fringilla vel erat a, hendrerit finibus mi. Vestibulum viverra porttitor ultricies. Maecenas venenatis ante nec porttitor bibendum. Curabitur nec massa ullamcorper, scelerisque nulla id, tempor leo. Phasellus placerat metus sed arcu maximus, id scelerisque leo viverra. Duis placerat ligula sit amet tortor hendrerit, sit amet porta sapien finibus. In quis malesuada neque. Vestibulum fringilla urna id neque mattis feugiat.
 Fusce dictum aliquet sem a ornare. Donec pulvinar augue a risus aliquam, non accumsan erat scelerisque. Vivamus eget tincidunt nisi. Duis interdum commodo condimentum. Phasellus vitae arcu mollis, feugiat leo ut, vehicula ligula. Morbi vitae dolor condimentum, gravida ligula nec, suscipit mi. Fusce pharetra elit at massa auctor finibus. Proin blandit sapien est, vitae pellentesque arcu consectetur eget. Aliquam facilisis, sem ut dictum molestie, magna ex interdum leo, nec bibendum justo tortor at sem. Phasellus imperdiet massa congue lacus interdum, id consectetur mi tincidunt. 
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-9-grid-2.html
+++ b/site/introwebdev/week-9-grid-2.html
@@ -0,0 +1,123 @@
 [!]
 [=title "Week 9: Grid 2"]
 [=content-]
 <p>
 	We briefly discussed grids already - we're going to go into more detail on them now.
 	If you haven't, read <a href="week-8-grid-1.html">Grid 1</a>, or you will be very confused.
 </p>
 <p>
 	Note: because this is an incredibly dense bit, there aren't many demos. I highly recommend reading
 	through <a href="https://css-tricks.com/complete-guide-css-grid-layout/">CSS Grid Layout Guide</a> by CSS-Tricks -
 	it's far more interactive and detailed.
 </p>
 <h1>Grid-Template-*</h1>
 <p>
 	We've already seen the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties:
 	they define the widths of the columns of the grid and the rows of the grid. We're going to go into more detail on how they work now.
 </p>
 <p>
 	First off, the syntax: every use of either property looks like <code>grid-template-dimension: &lt;1&gt; &lt;2&gt; ... &lt;n&gt;;</code>.
 	You can define as many columns as you want, sized however you want! For instance, the magic incantation for "four 50px columns and a fifth which uses up all the remaining space"
 	is simply <code>grid-template-columns: 50px 50px 50px 50px auto;</code>. This is unnecessarily gross, so CSS gives us a useful
 	function: <code>repeat(n, val)</code>. This literally just repeats <code>val</code> n times (note: this is not
 	actually universal, it's only for grid). So we can simplify: <code>grid-template-columns: repeat(4, 50px) auto;</code>.
 </p>
 <p>
 	Pixels are bad, because they don't work the same on every screen. A better unit is <code>%</code>. In the context of grid,
 	percent just allocates space remaining along the axis! So for instance, if we want to have 3 thin inner columns and 2 wide outer columns...
 	<code>grid-template-columns: 35% repeat(3, 10%) 35%;</code>. This will always scale the same way for every screen size!
 </p>
 <h2>Aside: Percent</h2>
 <p>
 	At this point everyone should have the mantra "percent means something different in transform than in top" burned into their brains.
 	The CSS percent unit is delicate and complicated! Whenever you use it, <i>be sure</i> you know what it's doing. Because percent means
 	something different in <code>grid-template-columns</code> than in <code>width</code>...
 </p>
 <h2>Back on track...</h2>
 <p>
 	Of course, percentages aren't the only useful tool here. We also have the <code>fr</code> unit! <code>fr</code> essentially allocates
 	space as evenly as possible, but <i>weighted</i>. So for instance, if we want to have 2 columns of the same width, and a third column twice as big as them,
 	<code>grid-template-columns: 1fr 1fr 2fr;</code> will work perfectly. We <i>could</i> manually calculate <code>grid-template-columns: 25% 25% 50%;</code>,
 	but that's bad.
 </p>
 <p>
 	There are also two convenient "sorta-units": <code>min-content</code> and <code>max-content</code>. <code>min-content</code>
 	is always the thinnest the column or row can get before the inner items get too cramped and overflow, and <code>max-content</code>
 	is always the widest the column or row can get before the inner items have "too much" space. This is very nice for goldilocks layouts
 	where you want a column to be "just right" and have the others fit around it! For instance, you might have a 2-panel layout with a thin sidebar (maybe containing links!)
 	and a content block; you could do that with <code>grid-template-columns: max-content auto;</code>.
 </p>
 <h1>Grid-Auto-*</h1>
 <p>
 	Templates are nice, but what if we don't know how much content we have? A good example of this situation is a
 	music player app, where you have nice fancy grid tiles for each song, but you aren't sure how many songs there are.
 	Rather than trying to write an infinitely long <code>grid-template-rows</code>, you can set <code>grid-auto-rows: 50px;</code>
 	<i>almost</i> everything works in <code>grid-auto-rows</code>, with the sole exception of <code>fr</code> (you can still use <code>auto</code> for even distribution).	
 </p>
 <p>
 	Whenever the layout engine needs a new row (or column), it will <i>first</i> check if there's a remaining template; and if not,
 	it'll use whatever the <code>grid-auto-*</code> value is.
 </p>
 <h1>Grid-Template-Areas</h1>
 <p>
 	This is the last of the black magic: <code>grid-template-areas</code> and <code>grid-area</code>.
 	Grid-template-areas is a very strange property. It contains arbitrarily many values for <i>rows</i>, and contains <i>strings</i> (in double quotes)
 	describing the <i>area names within columns</i>. For example:
 </p>
 <pre><code>.grid-container {
 	grid-template-areas: "b b a"
 	                     "b b c"
                             "d d d";
 }</code></pre>
 <p>
 	This doesn't do much without another tag: <code>grid-area</code>. This is applied to <i>grid cells</i>, not to the grid itself! Say it out loud:
 	<b><code>grid-area</code> applies to the grid cell, not to the grid container!</b>.
 </p>
 <p>
 	Continuing the example, if we put a few <code>span</code>s defined like so into a grid...
 </p>
 <pre><code>&lt;style&gt;
 .grid-container {
 	display: grid;
 	grid-template-areas: "b b a" /* defines 3 rows and 3 columns with nicely labeled cells */
                             "b b c"
                             "d d d";
 	height: 300px;
 }
 &lt;/style&gt;
 &lt;div class="grid-container"&gt;
 	&lt;span style="grid-area: a; background-color: purple;"&gt;Area A&lt;/span&gt;
 	&lt;span style="grid-area: b; background-color: green;"&gt;Area B&lt;/span&gt;
 	&lt;span style="grid-area: c; background-color: orange;"&gt;Area C&lt;/span&gt;
 	&lt;span style="grid-area: d; background-color: red;"&gt;Area D&lt;/span&gt;
 &lt;/div&gt;
 </code></pre>
 <style>
 .grid-container {
 	display: grid;
 	grid-template-areas: "b b a"
                             "b b c"
                             "d d d";
 	height: 300px;
 }
 </style>
 <div class="grid-container">
 	<span style="grid-area: a; background-color: purple;">Area A</span>
 	<span style="grid-area: b; background-color: green;">Area B</span>
 	<span style="grid-area: c; background-color: orange;">Area C</span>
 	<span style="grid-area: d; background-color: red;">Area D</span>
 </div>
 <p>
 	Note how, without even having to set a <code>grid-template-rows</code>, we got a decent layout!
 	More importantly, we now have elements <i>spanning across grid lines</i> - there are actually 3 columns and 3 rows,
 	but we only have 4 elements filling them!
 </p>
 <p>
 	<code>grid-template-areas</code> is extraordinarily powerful, and I highly recommend playing with it on your own.
 	Mix it with <code>grid-template-*</code> to control the sizes of your regions!
 </p>
 <p>
 	I strongly recommend everyone practice grids on their own.
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-9-homework.html
+++ b/site/introwebdev/week-9-homework.html
@@ -0,0 +1,99 @@
 [!]
 [=title "Week 9 Homework"]
 [=content-]
 <p>
 	In contrast with the highly technical material previous, this assignment is WAY more artistic than usual.
 	Be creative and have fun with the process; the goals should really be the bare minimum. Try to make something
 	YOU enjoy looking at (even if it's deeply annoying to grade).
 </p>
 <p>
 	Where the instructions are unclear, you may interpret that as giving you artistic license - the point of this is
 	to test your creative problem-solving skills, so if you cleverly work around a badly phrased goal,
 	I won't deduct points.
 </p>
 <p>
 	I really was serious about taking off points for absolute positioning - but parts of this are more fun if you can
 	use the entire toolbox, so I'll allow it for this one assignment.
 </p>
 <h1>Part 1: Modern Art</h1>
 <p>
 	Using CSS grid, create a simple collage! Use at least 5 rows and 5 columns.
 	An example of what I'm talking about (although yours should have more detail): 
 </p>
 <!-- sorry, intrepid slackers, but I did this in Inkscape so you can't copy it ;) -->
 <img src="pietmondrianish.png" />
 <p>
 	Do NOT use an image. I won't be awarding points on a technicality for this, you have to actually USE the grid.
 </p>
 <p>
 	Hint: this is the sort of assignment that's very easily solved if you read the lecture notes.
 	<span class="goal">Simple collage</span>
 </p>
 <h1>Part 2: Market Research</h1>
 <p>
 	Find a website you like online (it can't be this one, if by some incredible circumstance you like this one), and
 	use a grid to copy the layout. If it can't be done easily with a grid, pick another one! Make sure to clearly indicate
 	which website you're simulating.
 </p>
 <p>
 	You do not have to fully faithfully replicate it - as long as the main layout elements are recognizable, it's fine.
 	Pick your own colors, images, and content (use lorem ipsum!) to avoid a copyright lawsuit.
 </p>
 <p>
 	You can use any other technique we've learned (flexbox, sticky positioning if you did the extra credit, etc), as long
 	as a grid is a major part of it.
 	<span class="goal">Emulated website</span>
 	<span class="goal">Clear attribution</span>
 </p>
 <p>
 	The previous assignment can be brute-forced with defaults, but this one will require you to think seriously about
 	space usage, sizes, and alignments. I <i>will</i> be stretching the screen to see how it performs.
 	<span class="goal">Doesn't fail on small or large screens</span>
 </p>
 <h1>Part 3: To Clip Or Not To Clip</h1>
 <p>
 	Find a scene from a book, movie, show, video game, etc that you can roughly replicate
 	using absolutely positioned images (and whatever other elements you need - e.g., <code>span</code> for text!).
 </p>
 <p>
 	This is a hard one because you'll have to find your <i>own</i> resources - as always, be careful on the Internet,
 	and make sure to <b>attribute images you use</b>. If you aren't sure how to provide attribution (e.g. it's not clear on the site),
 	<b>don't use the image</b>. Copyright is serious.
 </p>
 <p>
 	Wikimedia, Pics4Learning, etc are good places to start, mainly because they are the least likely ones to
 	attract lawyers.
 </p>
 <p>
 	<span class="goal">Clearly chosen scene, attributed</span>
 	<span class="goal">At least 3 attributed images composing a set</span>
 	<span class="goal">Some text describing the scene</span>
 </p>
 <h1>Extra Credit</h1>
 <ul>
 <li>5 points if you can recognizably replicate the style of Piet Mondrian or another similar artist in the collage assignment (this may require teaching yourself about <code>border</code>!)</li>
 <li>5 points if you can integrate a flexbox somewhere <b>useful</b> on the page</li>
 <li>10 points if you can figure out how to use <code>font-family</code> to switch up the fonts to something less terrible</li>
 <li>15 points(!!!) if you can make your Market Research page convincingly "enterprise".</li>
 <li>5 points generally for making it look polished and aesthetic in some other way.</li>
 </ul>
 <h1>Self-Study</h1>
 <p>
 	We haven't talked about fonts or borders yet. A better-organized course would go into both before layout.
 	If you'd like to correct my failing (and make all of your websites some 10x nicer), read on your own about
 	<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border">the Border property</a> and
 	<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font">the Font property</a>.
 	It's especially important to <b>understand</b> font, because most of the time you don't want to use it - you want
 	to use its subproperties, <code>font-family</code> and co.
 </p>
 <p>
 	I'll give 1 point of extra course credit to anyone who can demonstrate
 	a nice usage of fonts and borders this or next Friday.
 </p>
 <h1>Submission</h1>
 <p>
 	As always, email me the link to your homework. If I don't get the email, I won't know what commit to read when I grade two weeks later,
 	and so I'll have to <i>guess</i>. Which can only end badly.
 </p>
 [/]
 [#template.html]