make street name sticky

site/camera-info/main.js

@@ -23,6 +23,7 @@ function takepicture() {
   document.getElementById("precanvas").classList.add("took")
     // si c'est portrait, nous doivons le tourner à landscape (parce que le canvas ont besoin d'un photo landscape pour marcher bien)
     // [un peu plus tard] pourquoi a-moi apprendré le français? c'est horrible
+    // [encore plus tard...] c'est "ai-je", pas "a-moi" - j'étais bête!
   if (box.height > box.width) {
     canvas.width = box.height;
     canvas.height = box.width;
@@ -82,48 +83,72 @@ window.app = {
   },
   "details": {
     enter() {
+	if (localStorage.lastStreetName) {
+		document.getElementById("title").value = localStorage.lastStreetName;
+	}
+	else {
+		localStorage.lastStreetName = "";
+	}
     },
     exit() {
-      
+	localStorage.lastStreetName = document.getElementById("title").value;
     }
   },
   "finalresult": {
     enter() {
       (async () => {
         let iframe = document.getElementById("final");
-        const pdfDoc = await PDFLib.PDFDocument.create();
+        const pdfDoc = await PDFLib.PDFDocument.create()
+        const helvetica = await pdfDoc.embedFont(PDFLib.StandardFonts.Helvetica);
+        const helveticaBold = await pdfDoc.embedFont(PDFLib.StandardFonts.HelveticaBold);
         const page = pdfDoc.addPage([1440, 960]);
+	page.setFont(helveticaBold)
         page.moveTo(0, 960 - 96);
-        page.drawText(document.getElementById("title").value, { size : 96 });
+        page.drawText(document.getElementById("title").value, { size : 85, font: helveticaBold });
         page.moveTo(0, 960 - 152);
-        page.drawText(new Date().toLocaleString(), { size : 48});
+        let datestring = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][new Date().getMonth()] + " " + new Date().getDate()
+                          + ", " + new Date().getUTCFullYear() + " at " + new Date().toLocaleTimeString();
+        page.drawText(datestring, { size : 48 });
         let lat = document.getElementById("lat").value;
         let long = document.getElementById("long").value;
         let res = await reverse_geocode(lat, long);
         page.moveTo(0, 960 - 208);
         page.drawText(res, { size : 48 });
         page.moveTo(0, 960 - 256);
-        page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48 });
+        page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48, color: PDFLib.rgb(0, 0.5, 1) });
         page.moveTo(0, 960 - 308);
-        page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
+        page.drawText(document.getElementById("notes").value, { size : 48 });
+
         let static = await maps_static(lat, long);
-        let embeddedImage = await pdfDoc.embedPng(static);
-        let dims = embeddedImage.scale(1);
-        page.drawImage(embeddedImage, {
-          x: 365 * 2,
-          y: 960 - 320 - dims.height,
-          width : dims.width,
-          height : dims.height
-        });
+        let embeddedMap = await pdfDoc.embedPng(static);
+        let dimsMap = embeddedMap.scale(1);
         let image = document.getElementById("precanvas");
         let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
-        let embeddedImage2 = await pdfDoc.embedPng(static2);
-        let dims2 = embeddedImage2.scale(1);
-        page.drawImage(embeddedImage2, {
+        let embeddedPicture = await pdfDoc.embedPng(static2);
+        let dimsPicture = embeddedPicture.scale(1);
+
+	let mapAspect = dimsMap.width / dimsMap.height;
+	let picAspect = dimsPicture.width / dimsPicture.height;
+	let mapRatio = mapAspect / (mapAspect + picAspect); // the proportion of the width filled by the map
+        let picRatio = 1 - mapRatio;
+
+	const fullWidth = 1440;
+	let mapWidth = mapRatio * fullWidth;
+	let picWidth = picRatio * fullWidth;
+
+	let combinedHeight = mapWidth / mapAspect;
+
+        page.drawImage(embeddedMap, {
+          x: fullWidth - mapWidth,
+          y: 960 - 320 - combinedHeight,
+          width : mapWidth,
+          height : combinedHeight
+        });
+        page.drawImage(embeddedPicture, {
           x: 0,
-          y: 960 - 320 - dims2.height / dims2.width * 720,
-          width : 720,
-          height : dims2.height / dims2.width * 720
+          y: 960 - 320 - combinedHeight,
+          width : picWidth,
+          height : combinedHeight
         });
         //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
         const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
@@ -172,4 +197,4 @@ function download() {
   anchor.href = canvas.src;
   anchor.download = getFilename();
   anchor.click();
-}
+}

site/introwebdev/index.html

@@ -56,7 +56,9 @@ TBD. Will post an announcement when this is worked out.
 	<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> 
+	<li><a href="week-9-homework.html">Week 9 Homework (due on March 13th)</a> - walkthrough available <a href="week-9-walkthrough.html">here</a></li> 
+	<li>No week 10, 11, 12 homework</li>
+	<li><a href="week-13-homework.html">Week 13 Homework</li>
 </ul>
 <h2>Lecture notes</h2>
 <p>
@@ -71,6 +73,9 @@ I'll be posting these in advance of lectures, so you can review the material bef
 	<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>
+	<li>Week 11: <a href="week-11-flexbox-2.html">Flexbox 2</a></li>
+	<li>Week 12: <a href="week-12-fonts.html">Fonts</a></li>
+	<li>Week 13: <a href="week-13-hover.html">Hover</a>, <a href="week-13-transitions.html">Transitions</a></li>
 </ul>
 <h2>Generative AI policy</h2>
 <p>

site/introwebdev/week-11-flexbox-2.html

@@ -0,0 +1,66 @@
+[!]
+[=title "Week 11: Flexbox 2"]
+[=content-]
+<p>
+	If you haven't already, read <a href="week-8-flexbox-1.html">Flexbox 1</a>.
+</p>
+<p>
+	To complete our discussion of flexbox, we need to talk first about <i>axes</i>. The core idea is that a flexbox is
+	an <i>axis</i>: it puts content vertically or horizontally. It <i>can</i> violate this with <code>flex-wrap</code>,
+	but please don't do that. We say the axis along which content is distributed is the <b>primary axis</b>:
+	for default flexboxes, this is left/right (horizontal), but they can also be up/down (vertical).
+</p>
+<p>
+	You control the <i>primary</i> axis with the <code>flex-direction</code> property.
+	<code>flex-direction: row;</code> will set the flexbox' primary axis to horizontal,
+	and <code>flex-direction: column;</code> will set the flexbox' primary axis to vertical.
+	The <i>secondary axis</i> will always be the remaining option.
+</p>
+<p>
+	Along the secondary axis (up/down for a horizontal flexbox, left/right for a vertical flexbox), elements
+	may be centered, stretched, or justified to either end: you do this with the <code>align-items</code>
+	property. For instance, <code>align-items: center;</code> will bring all of the elements
+	to the center of the secondary axis. This is pretty useful for building centered layouts! 
+</p>
+<p>
+	Using <code>align-items: center; justify-content: center;</code> centers along both axes (remember, <code>justify-content</code> controls
+	the primary axis!), so for example:
+</p>
+<div style="border: 1px dashed white;display:flex;align-items:center;justify-content:center;height:200px;">
+<div style="background-color: red;">Content 1</div>
+<div style="background-color: blue;">Content 2</div>
+</div>
+<p>
+	Note that we can also force elements to stretch to fill up the secondary axis with
+	<code>align-items: stretch;</code>:
+</p>
+<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:center;height:200px;">
+<div style="background-color: red;">Content 1</div>
+<div style="background-color: blue;">Content 2</div>
+</div>
+<p>
+	What if we want to mix the two? It turns out that we can do that with the
+	<code>align-self</code> property! Note that there is no <code>justify-self</code> property;
+	<code>align-self</code> works because of the assumption that there is only one element
+	at any point on the secondary axis (an assumption violated by <code>flex-wrap</code>, but we won't talk about that here).
+	If we do <code>align-self: center;</code> for the first element...
+</p>
+<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:center;height:200px;">
+<div style="background-color: red;align-self: center;">Content 1</div>
+<div style="background-color: blue;">Content 2</div>
+</div>
+<p>
+	All three properties also support two strange values: <code>start</code> and <code>end</code>.
+	Doing <code>justify-content: end;</code> on the flexbox and <code>align-self: start;</code> on
+	the second content: 
+</p>
+<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:end;height:200px;">
+<div style="background-color: red;align-self: center;">Content 1</div>
+<div style="background-color: blue;align-self: start;">Content 2</div>
+</div>
+<p>
+	Strange! <code>end</code> simply means "the furthest point across the axis" - which is usually
+	as far right (or as far down) as possible. <code>start</code> just means the opposite.
+</p>
+[/]
+[#template.html]

site/introwebdev/week-12-fonts.html

@@ -0,0 +1,62 @@
+[!]
+[=title "Week 12: Fonts"]
+[=content-]
+
+<!-- this is a google fonts embed code: -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+<p>
+	We've already talked briefly in class about fonts - we're going to do a deeper dive today.
+</p>
+<p>
+	Fonts are one of the most crucial styles on the internet. All text has a font!
+	The most impactful CSS property controlling fonts is <code>font-family</code>: this
+	is a deceptive property which can set either a <i>family</i> of fonts or
+	a <i>single</i> font. A family of fonts is a set of fonts that look similar:
+	for instance, <code>sans-serif</code> fonts. On this website, the default is <code>font-family: sans-serif;</code>:
+	you're probably more familiar with the universal default of <code>font-family: serif;</code> (set automatically
+	when you don't have your own - your websites most likely still use it!), which looks like
+	<span style="font-family: serif;">this</span>. Also useful in some areas is <code>font-family: monospace;</code>,
+	which I use for code - it looks like <span style="font-family: monospace;">this</span>.
+</p>
+<p>
+	Surprisingly, these look different across systems! There is no one universal <code>sans-serif</code> font;
+	instead, your operating system and your web browser pick something reasonable. This is generally fine,
+	and indeed helps compatibility (you don't have to guess which fonts are installed!), but does
+	mean pages look slightly different across platforms.
+</p>
+<p>
+	If you want to use a single specific font to ensure the webpage looks the same everywhere,
+	you also use <code>font-family</code>! Instead of one of the actual families (sans-serif, serif, monospace, etc),
+	you use a font's name. For instance, a common font available on the web is Arial - Arial is often
+	the <code>sans-serif</code> default. It looks like <span style="font-family: Arial;">this</span> (if that looks
+	the same as the rest of the text, that means your browser is already using it for <code>sans-serif</code>!)
+</p>
+<p>
+	W3Schools has an exhaustive list of CSS-safe web fonts at <a href="https://www.w3schools.com/cssref/css_websafe_fonts.php">this page</a>.
+</p>
+<p>
+	What if we want more variation? It turns out there are a few properties for this.
+	The simplest is <code>font-size</code>: this sets the height of the characters in text.
+	You can set a font-size to any CSS length, but it's recommended to use specifically the <code>em</code> unit:
+	<code>1em</code> is always the default height of text, so <code>2em</code> is twice as large as default text, etc.
+	Importantly this is always the same on every platform: some browsers have different default heights
+	for text in <i>pixels</i>, but the height is always the same in <i>em</i>.
+</p>
+<p>
+	For instance, <span style="font-size: 2em;">this is 2em text</span>.
+</p>
+<p>
+	We can also set the <code>font-weight</code>: this is actually what the <code>&lt;b&gt;</code> tag changes.
+	<span style="font-weight: bold;">for instance, this text has <code>font-weight: bold;</code></span>.
+</p>
+<p>
+	It's possible to add new fonts not in the CSS-safe list! The easiest way is with <a href="https://fonts.google.com/">Google Fonts</a>.
+	They give you <i>embed codes</i> - a few HTML tags that load the font into your page. You can then use the font in <i>font-family</i>
+	normally. For instance, after embedding Roboto, you'd be able to just <code>font-family: Roboto;</code>, which looks like
+	<span style="font-family: Roboto;">this</span> (use the web inspector to find the Google Fonts embed code for that!)
+</p>
+[/]
+[#template.html]

site/introwebdev/week-13-homework.html

@@ -0,0 +1,101 @@
+[!]
+[=title "Week 13 Homework"]
+[=content-]
+<p>
+This week we're focusing entirely on <code>hover</code> and <code>transition</code>.
+Keep the lecture notes for both handy (<a href="week-13-hover.html">here</a> and <a href="week-13-transition.html">here</a>).
+</p>
+<p>
+Note that parts 3 and 4 are fairly difficult. Get started early!
+</p>
+<h1>Part 1: Ain't It Click?</h1>
+<p>
+	Let's start by using a <code>span</code> to replicate
+	the behavior of the <code>a</code> tag. <span class="goal">uses a span</span>.
+	The end result shouldn't actually be clickable, but should have the same color and hover effect
+	<span class="goal">has a hover effect that changes its color</span>.
+</p>
+<p>
+	It's okay if you can't figure out exactly which colors an <code>a</code> tag switches between;
+	<code>white</code> and <code>yellow</code> (the style I used for this website) is fine.
+	Don't forget the underline! <span class="goal">visually identical to a link</span>
+	(Hint: you may use any technique you wish as long as it's applied to a <code>span</code>,
+	but this exercise is considerably easier if you have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration">text-decoration</a>).
+</p>
+<p>
+	Make sure to use the <code>:hover</code> pseudo-class.
+</p>
+<h1>Part 2: Animate It!</h1>
+<p>
+	Duplicate your replicated link (do NOT change the original!) and
+	add <i>any</i> transition to it	<span class="goal">a working transition</span> - it should be smooth and noticeable,
+	and you should transition at least two properties <span class="goal">multiple properties animated</span>
+	(e.g. both <code>color</code> and <code>background-color</code>). I recommend using
+	this as an opportunity to play around with various transitions.
+</p>
+<h1>Part 3: Functions?</h1>
+<p>
+	<i>This has a bit of math - if you have trouble with that part, please send me an email.</i>
+</p>
+<p>
+	Transitions support a few different types of <i>timing function</i> - these are curves that
+	describe how "fast" it moves between states. For instance, the default curve
+	is an <i>S-shape</i> - it starts out slow, then speeds up around halfway through, then slows down again
+	for the end. This timing function is called <code>ease</code>. It produces a very nice smooth animation that feels natural.
+</p>
+<p>
+	But there are others! So, for this part, <b>practice researching on your own</b>
+	to figure out,
+</p>
+<ul>
+	<li>What curves exist and how they behave</li>
+	<li>How to actually use them</li>
+</ul>
+<p>
+	A good starting point is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition">MDN</a>;
+	you may also find some luck with <a href="https://www.w3schools.com/css/css3_transitions.asp">W3Schools</a>.
+</p>
+<p>
+	Find at least three timing functions (besides the default <code>ease</code>) and
+	demonstrate each of them with <code>background-color</code> and <code>:hover</code>. Make sure to clearly label them.
+	(Read the lecture notes if this is confusing). <span class="goal">At least 3 timing functions, demonstrated properly</span>
+</p>
+<h1>Part 4: Bouncy Gallery</h1>
+<p>
+	Use <code>:hover</code>, <code>transition</code>, and CSS Grid (make sure to read both Grid lecture notes if you're struggling with grid)
+	to make a "bouncy gallery" of transitioned elements <span class="goal">hover, transition, and grid in use</span>.
+	There should be 3 columns and at least 2 rows <span class="goal">3 columns, minimum 6 cells</span>. Explain each effect with text in its cell.
+</p>
+<p>
+	The requirements for this one are loose - you don't have to include any specific combination of effects.
+	However, it would be <i>passable</i> for each cell to contain just a span with an animated background-color
+	using different transition <i>durations</i> and <i>timing functions</i>.
+	<span class="goal">distinct transitions for each demonstration</span>.
+</p>
+<p>
+	The goal of this is for you to experiment with new CSS properties. I highly recommend being creative with this one
+	- you might hit on a design you really like for links or buttons on your website!
+</p>
+<h1>Extra Credit</h1>
+<p>
+	For a whopping 15 points of extra credit, teach yourself about <code>box-shadow</code>
+	and do a transitioned box-shadow on at least one of your Bouncy Gallery elements.
+</p>
+<p>
+	Box-shadow is incredibly fun and worth learning - it adds a 3d "pop" to otherwise flat pages.
+</p>
+<h1>Self-Study</h1>
+<p>
+	As if this homework didn't have enough research! To get ahead on the animations material,
+	read about <a href="https://www.w3schools.com/css/css3_animations.asp">actual animations on W3Schools</a>
+	- CSS exposes a <i>much</i> more powerful way to do animations; it's a lot more complicated than
+	<code>transition</code>, but allows for some incredibly intricate behavior.
+</p>
+<h1>Submission</h1>
+<p>
+	Don't forget to email me before the due date - April 10th.
+	I need to get the email so I know when you finished and can view
+	your website's git history from that date.
+</p>
+[/]
+[#template.html]

site/introwebdev/week-13-hover.html

@@ -0,0 +1,45 @@
+[!]
+[=title "Week 13: Hover"]
+[=content-]
+<p>
+	So far we've gotten pretty good at making simple, functional websites - but, for the most part,
+	they're <i>static</i>! This means they don't have any kind of interaction with the user;
+	they may as well just be a printed page.
+</p>
+<p>
+	This week, we're going to change that! Interactive webpages are a massive topic, but we're
+	going to start with one of the simpler forms - the CSS <code>:hover</code> <i>pseudo-class</i>.
+</p>
+<p>
+	The idea behind a <i>pseudo-class</i> is that it behaves like a normal CSS class,
+	but is set <i>by the browser</i> under specific circumstances. This allows
+	webpages to react to changes. The <code>:hover</code> pseudo-class is probably
+	the most engaging one: when you select an element's hover pseudo-class,
+	the rules will only be applied when that element is hovered by the mouse.
+</p>
+<p>
+	For example, this code makes a simple hover button (assume the HTML is set up with some element which has <code>id="my_button"</code> set):
+</p>
+<pre><code>#my_button { /* this is *always* applied, no matter what */
+	padding: 10px;
+	background-color: purple;
+	color: white;
+}
+#my_button:hover { /* these are only applied when the button is hovered, and override the previous ones */
+	background-color: white; /* we say these are *more specific*, because of the :hover pseudo-class selector */
+	color: purple;
+}</code></pre>
+<p>
+<style>#my_button1{ padding: 10px; background-color: purple; color: white; } #my_button1:hover {background-color: white; color: purple; }</style>
+	The result looks like this: <span id="my_button1">My Button</span> (try putting your mouse over it!)
+</p>
+<p>
+	The use for this is obvious! With <code>:hover</code>, you can produce a lot of
+	really fun effects.
+</p>
+<p>
+	Note that <code>:hover</code> can be applied to <i>any</i> selector, not just an ID selector!
+	<code>.class_name:hover</code>, <code>body:hover</code>, and <code>div.button:hover</code>, are all valid selectors.
+</p>
+[/]
+[#template.html]

site/introwebdev/week-13-transitions.html

@@ -0,0 +1,115 @@
+[!]
+[=title "Week 13: Transitions"]
+[=content-]
+<p>
+	We can make simple static pages, and we can add color and style to them. With <code>:hover</code> (see <a href="week-13-hover.html">Week 13: Hover</a> if you haven't already!)
+	we can make webpages that react <i>instantly</i> to changes.
+</p>
+<p>
+	What if we want to react gradually? For instance, we might want a sidebar to expand slowly, or
+	we might want a link to change color slowly instead of immediately. For this we use
+	<code>transition</code>! Transition is a weird property in that it doesn't set anything
+	itself - it <i>only</i> describes <i>how to transition between other properties</i>.
+</p>
+<p>
+	This means <code>transition</code> is completely useless if we don't have any
+	properties changing on our page. Fortunately, <code>:hover</code> <i>can</i>
+	change properties, so we can animate <code>:hover</code> with a transition!
+</p>
+<p>
+	The syntax looks like <code>transition: property duration;</code>, so for instance,
+	<code>transition: background-color 1s;</code> literally means "take exactly 1 second
+	to go from the old background color to the new one whenever it changes". Applying
+	that to the example from the Hover article:  
+</p>
+<pre><code>#my_button {
+        padding: 10px;
+        background-color: purple;
+        color: white;
+	transition: background-color 1s;
+}
+#my_button:hover {
+        background-color: white;
+        color: purple;
+}</code></pre>
+<p>
+<style>#my_button1{ padding: 10px; background-color: purple; color: white; transition: background-color 1s; } #my_button1:hover {background-color: white; color: purple; }</style>
+        The result looks like this: <span id="my_button1">My Button</span>
+</p>
+<p>
+	Try hovering it - it will take exactly 1 second for it to go from purple to white, and 1 second to go back!
+</p>
+<p>
+	Note that the color still changes instantly - we never told CSS to transition the color,
+	so it didn't. Transition supports comma-separated values like this:
+	<code>transition: background-color 1s, color: 1s;</code>, so let's try that!
+</p>
+<pre><code>#my_button {
+        padding: 10px;
+        background-color: purple;
+        color: white;
+	transition: background-color 1s, color 1s;
+}
+#my_button:hover {
+        background-color: white;
+        color: purple;
+}</code></pre>
+<p>
+<style>#my_button2{ padding: 10px; background-color: purple; color: white; transition: background-color 1s, color 1s; } #my_button2:hover {background-color: white; color: purple; }</style>
+        The result looks like this: <span id="my_button2">My Button</span>
+</p>
+<p>
+	<i>Much</i> smoother.
+</p>
+<p>
+	It bears note that not every property can <code>transition</code>! For instance,
+	<code>font-family</code> can't be transitioned - what would that even do?
+	We call this <i>animatable</i> - any property that is not <i>animatable</i>
+	will not do anything in a transition (or animation - we'll get to animations later).
+	A list of every property that can be transitioned is found <a href="https://www.w3schools.com/cssref/css_animatable.php">on W3Schools</a>.
+</p>
+<p>
+	You can transition things that change the layout! CSS will <i>recompute</i> the layout for you. For instance,
+	if I have,
+</p>
+<pre><code>#my_text_block {
+	margin-left: 200px;
+	margin-right: 200px;
+	background-color: green;
+	transition: margin 1s; /* note that this transitions margin-left and margin-right automatically -
+				  I could specify them separately, but that's a waste of time! */
+}
+#my_text_block:hover {
+	margin-left: 0px;
+	margin-right: 0px;
+}</code></pre>
+<style>
+#my_text_block {
+	margin-left: 200px;
+	margin-right: 200px;
+	background-color: green;
+	transition: margin 1s; /* note that this transitions margin-left and margin-right automatically -
+				  I could specify them separately, but that's a waste of time! */
+}
+#my_text_block:hover {
+	margin-left: 0px;
+	margin-right: 0px;
+}
+</style>
+<p>
+	Then the result is something like,
+</p>
+<p id="my_text_block">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et volutpat nisi. Pellentesque id accumsan arcu. Nunc tempus, lorem ut venenatis blandit, quam orci pretium neque, ac bibendum nulla ex vel lectus. Curabitur viverra justo orci, eget porta erat ultrices a. In dictum ante nec quam semper ultrices. Pellentesque ac interdum tortor. Nam ultrices risus risus, vel vulputate turpis faucibus sed. Aenean eget urna vulputate, vulputate tortor molestie, varius dui. Quisque id ipsum auctor, dapibus lacus eget, laoreet eros. Morbi dignissim velit sed ipsum viverra, egestas efficitur nisl pretium. Cras eu porta turpis.
+</p>
+<p>
+<i>Try hovering it - it'll expand out to the edges!</i>
+</p>
+<p>
+Transitions can also be used with transforms and positions! This is very fun; I'm not going to go through any examples,
+but I <i>highly</i> recommend playing with it. If you need to brush up on <code>transform</code>,
+check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform">MDN's bit on the topic</a>
+(an example transition for a simple 2-second animation would be <code>transition: transform 2s;</code>).
+</p>
+[/]
+[#template.html]

site/introwebdev/week-9-walkthrough.html

@@ -0,0 +1,140 @@
+[!]
+[=title "Week 9 Homework Walkthrough"]
+[=content-]
+<p>
+	Sorry for how confusing week 9 was! To make it more doable, I've written up this step-by-step walkthrough to complete the whole thing.
+	The homework can be found <a href="week-9-homework.html">here</a>; you'll need to have it open to follow this effectively.
+</p>
+<ol>
+<b>Part 1</b>
+<li>
+Read through <a href="week-8-grid-1.html">Grid 1</a> and <a href="week-9-grid-2.html">Grid 2</a> -
+they're useful throughout this entire assignment, so I recommend keeping them open for reference.
+</li>
+<li>
+Use what we've learned about grid to set up a very simple grid with 5 rows and 5 columns. You can use <code>repeat</code> if you want;
+there are quite a few different ways to do this.
+</li>
+<li>
+Set up your grid elements (how you do this is up to you - you could write 25 individual <code>div</code>s, for instance - but there
+<i>is</i> a trick to minimize how much work it takes).
+</li>
+<li>
+Finally, pick colors for the grid. Note that at least a few of these should be shared between cells: you should have a real
+collage, not just a strange checkerboard. See the graphic in the main homework page.
+</li>
+<li>
+<b>Goal 1</b>: Check your collage. Make sure it has at least a few distinct colors, arranged in grid cells properly to give the impression
+of a few large squares that fit together perfectly. It's okay if it isn't "perfect", as long as it's recognizably a grid collage.
+</li>
+<b>Part 2</b>
+<li>
+Search up some websites and pick a good one! While you can use any website you like, here are a few suggestions:
+<ul>
+<li><a href="https://en.wikipedia.org/wiki/Website">The wikipedia page on websites</a>: Don't try to actually replicate Wikipedia's layout
+if you decide to do this one. A simple header and three-column layout would suffice.</li>
+<li><a href="https://www.nasa.gov/">NASA's Homepage</a>: This one might be a little tricky, but the
+layout can mostly be done with a grid.</li>
+<li><a href="https://www.gnu.org/">GNU Foundation</a>: Their page is simplistic and classic, and easy enough to
+do in grid.</li>
+</ul>
+Remember that you don't have to replicate <i>anything but the layout</i> - you don't have to do content or images or anything.
+A very simple grid with some words describing the purpose of each cell (or <i>area</i>) would be fine.
+</li>
+<li>
+Set up your page. Use a large grid covering the whole screen (you may set this up with any technique you like -
+<code>display: grid; height: 100vh;</code> on your grid element is perfectly fine).
+</li>
+<li>
+Use <code>grid-template-rows</code>, <code>grid-template-columns</code>, and the other properties to replicate
+the major parts of your target website's layout - e.g. the main content area, etc. You do not have to use
+<code>grid-template-areas</code> if you don't want to, but it makes this a lot easier.
+</li>
+<li>
+Add elements to the grid and <b>label</b> them: a <code>div</code> containing "this is the header/footer/main content/sidebar/whatever"
+is quite sufficient. You may set borders, background colors, fonts, or any other styles you want on these, but you
+aren't required to.
+</li>
+<li>
+Using <i>whatever technique you can think of</i>, add in some detail - things like the position of links
+in a header (hint: Flexbox is useful for this!) or the padding in a central panel.
+</li>
+<b>Goal 2</b>
+<li>
+Make sure the layout is close enough to be <i>recognizable</i> - it doesn't have to be perfect, but it should be
+clear enough where major elements (e.g. a header, a sidebar) are supposed to go.
+</li>
+<b>Goal 3</b>
+<li>
+Include a link to the website you're replicating somewhere, to make it easier for me to tell
+what the layout does.
+</li>
+<b>Goal 4</b>
+<li>
+Stretch the screen a bit to see how it performs on different sized devices! It doesn't have to work exactly, but
+try to make it consistent across sizes. Note that many websites use various techniques to change their layout
+on different screen sizes - you do <i>not</i> have to implement anything like that.
+</li>
+<li>
+If you need to change something to fix how it behaves on different screen sizes, make sure to
+think about Flexbox: it makes many such problems much simpler!
+</li>
+<b>Part 3</b>
+<li>
+Search for a scene from pop culture that you like. This can be absolutely anything! Some possible examples are,
+<ul>
+<li>The AT-AT scene from <i>Star Wars: The Empire Strikes Back</i> - image hosted <a href="empirestrikesback.jpg">here</a></li>
+<li>The classic baby Simba scene from <i>The Lion King</i> (<a href="lionking.avif">image here</a>)</li>
+<li>The Abbey Road album cover (<a href="abbeyroad.jpg">image</a>); this one might be a little harder but riffing Abbey Road is a tradition</li>
+</ul>
+</li>
+<li>
+Use our normal sources (P4L, Wikimedia, etc) to find 1-2 images representing the <i>setting</i>. They don't have
+to be identical to the real scene - or even anything like it at all! - but go for the same "vibe". For instance,
+much of Avatar's setting could be represented with some images of the Amazon rainforest.
+</li>
+<li>
+Do the same to find 2-3 images of <i>props</i> - things in the scene that aren't actually the main focus.
+For instance, this could be boulders on the ground, or a bunch of tropical fruit in the trees, or
+meteors against the starscape.
+</li>
+<li>
+Pick out 2-3 images of the actual subject: the people and/or things that make up the main focus of the scene.
+</li>
+<b>Goal 6</b>
+<li>
+While you do not have to exactly match the numbers of images described above, make sure there are at least 3 total.
+</li>
+<li>
+Plan out where on the page they should go. Aim for a scene big enough to fill your screen, but not big enough to scroll much. Print out
+the images and do paper cutouts to arrange them, if you want to! You should get a good feel for where on the screen everything should go.
+</li>
+<li>
+For each image, set an <i>absolute position</i>. You can read about absolute positions in <a href="week-8-position.html">Week 8: Position</a>.
+Use the absolute positions to arrange them on the page in a rough approximation of the original scene.
+</li>
+<li>
+Optionally, change the sizes of the images (through whatever technique you like - <code>width</code> in CSS or in the HTML works fine)
+to better fit the goal. If the images are very large, you'll have to do this.
+</li>
+<b>Goal 5 and 7</b>
+<li>
+Set up a text blurb to briefly describe the scene (as short as "Super Mario stomping on a goomba" is fine, this doesn't need to be detailed). 
+</li>
+<li>
+Explain where the scene is from; ideally give me enough information to find the actual scene with a quick Google search. You can
+link to an image of the actual scene if you want, but don't include such an image in your page.
+</li>
+<li>
+Properly attribute all of the images.
+</li>
+</ol>
+<p>
+At this point you'll have a passable result for Week 9. This deliberately doesn't cover the extra credit - you can still attempt
+the extra credit even having followed this guide, but I won't explain how to do it in detail.
+</p>
+<p>
+Make sure to submit it by emailing me once you're done.
+</p>
+[/]
+[#template.html]