week 11 and part of week 12

2026-03-27 09:21:45 -04:00
parent 55845e6b9f
commit 78a1abff81
3 changed files with 130 additions and 0 deletions
@@ -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>
@@ -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]
@@ -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]