week 11 and part of week 12

site/introwebdev/index.html

@@ -71,6 +71,8 @@ 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>
 </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]