week 6

2026-02-12 09:01:04 -05:00
parent b5aa99b64a
commit 5edff913c3
3 changed files with 180 additions and 0 deletions
--- a/site/introwebdev/index.html
+++ b/site/introwebdev/index.html
@@ -52,6 +52,8 @@ TBD. Will post an announcement when this is worked out.
 	<li><a href="week-2-homework.html">Week 2 Homework</a></li>
 	<li><a href="week-3-homework.html">Week 3 Homework (due on January 30th)</a></li>
 	<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>
 </ul>
 <h2>Lecture notes</h2>
 <p>
@@ -62,6 +64,7 @@ I'll be posting these in advance of lectures, so you can review the material bef
 	<li>Week 2: <a href="week-2-doctypes.html">Doctypes</a>, <a href="week-2-html-head-body.html">The HTML, Head, and Body tags</a>, <a href="week-2-metadata.html">Metadata</a>, <a href="week-2-web-inspect.html">Web Inspector</a></li>
 	<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>
 </ul>
 <h2>Generative AI policy</h2>
 <p>
--- a/site/introwebdev/week-6-backgrounds.html
+++ b/site/introwebdev/week-6-backgrounds.html
@@ -0,0 +1,106 @@
 [!]
 [=title "Week 6: Backgrounds"]
 [=content-]
 <p>
 At this point, we've all used enough CSS to make basic layouts and pages with simple color schemes.
 Now we're going to do a deep dive into one of the more complicated topics in CSS: backgrounds.
 </p>
 <p>
 CSS provides two ways to set backgrounds: <code>background-color</code> and <code>background-image</code>. Both
 do exactly what they sound like. You set colors like <code>background-color: red;</code>, and you set images like <code>background-image: url("/path/to/image.png");</code>.
 We're going to focus on background images.
 </p>
 <h2>Background Size</h2>
 <p>
 By default, CSS background images are pretty unpleasant. You usually get a result like this (<code>background-image: url('robot.png');</code>):
 </p>
 <div style="background-image: url('robot.png');height: 300px;background-size: 330px;"> </div>
 <p>
 CSS used the most natural size for the image, and then repeated it to fill empty space.
 Like with HTML <code>img</code> widths, we can actually set a background size! We do this with the <code>background-size</code> property.
 <code>background-size</code> is very cool for many reasons, not least that it accepts <i>percentages</i>: you can set, for instance,
 <code>background-size: 50%;</code> and get a result like this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: 50%;"> </div>
 <p>
 The image takes up 50% of the <i>width</i> of the element, and sets the <i>height</i> to whatever makes sense, so you end up with two repetitions of the image
 and the bottom is clipped. We can do better! <code>background-size: 50% 100%;</code> tells CSS to make each image take up half of the width and all of the height,
 and stretch if necessary:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: 50% 100%;"> </div>
 <p>
 The robots got squooshed!
 If we want more complicated constraints, we can use "auto": for instance, <code>background-size: auto 100%;</code> produces this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 100%;"> </div>
 <p>This sets the background's <i>height</i> to 100% of the element, and sets the background's <i>width</i> to <b>whatever makes the most sense</b>,
 so we end up with unstretched images.
 </p>
 <p>
 We can also use numbers in pixels just like with everything else, e.g. <code>background-size: auto 133px;</code>:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;"> </div>
 <p>
 I recommend playing around with background-sizes a bit on your own.
 </p>
 <h2>Background Repeat</h2>
 <p>
 Repeating backgrounds can be nice to fill space, but they don't always look decent. There's another way!
 We can use the <code>background-repeat</code> property. This accepts a few unusual values: <code>repeat</code> and <code>no-repeat</code>
 (there are more, but they aren't common - check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-repeat">MDN's article on the topic</a>).
 </p>
 <p>
 <code>repeat</code> repeats the background, and <code>no-repeat</code> doesn't. The last size demo from above with <code>background-repeat: no-repeat;</code> set:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;"> </div>
 <p>
 We only get the one. There's no repetition!
 </p>
 <p>
 Just like with <code>background-size</code>, <code>background-repeat</code> can be set for each <i>axis</i>.
 <code>background-repeat: repeat no-repeat;</code> will cause the image to repeat along the horizontal but not repeat on the vertical, like this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: repeat no-repeat;"> </div>
 <h2>Background Position</h2>
 <p>
 As we saw above, when <code>no-repeat</code> is set, we end up with an image in a weird location - the top left corner.
 Enter the <code>background-position</code> property! <code>background-position</code> is very complicated, and we won't
 be covering all of its many powers today: for now, you can use <code>background-position: center;</code> to center the background,
 <code>background-position: x% y%;</code> to put it at a <i>percentage</i> of the container size (just like with <code>background-size</code>),
 and <code>background-position: xpx ypx;</code> to put it at an absolute offset from the top-left in pixels.
 </p>
 <p>
 For instance, <code>background-position: center;</code> does this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: center;"> </div>
 <p>
 This is clearly an improvement. What if we'd prefer it on the other side? <code>background-position: 100% 50%;</code> is the way to go:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: 100% 50%;"> </div>
 <p>
 This literally means "100 percent of the way to the right, and 50 percent of the way down". If we prefer a position in pixels,
 we can also use that, for instance <code>background-position: 133px 133px;</code> yields
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: auto 133px;background-repeat: no-repeat;background-position: 133px 133px;"> </div>
 <p>
 You should usually use percentages or <code>center</code>.
 </p>
 <h2>Better Styles</h2>
 <p>
 The "nicest" way to style your background is through <code>background-size</code>'s two special values
 <code>cover</code> and <code>contain</code>. <code>cover</code> increases the background image's size until it fills the whole background like this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-size: cover;"> </div>
 <p>
 This can be used in conjunction with <code>background-position: center;</code> to get a pretty okay result,
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-position: center;background-size: cover;"> </div>
 <p>
 <code>background-size: contain;</code> does sorta the opposite - it sets the image's size so that the whole image is visible, like this:
 </p>
 <div style="background-image: url('robot.png');height: 200px;background-position: center;background-size: contain;"> </div>
 <p>
 Note that <code>cover</code> will never produce a repeat, but <code>contain</code> can.
 </p>
 [/]
 [#template.html]
--- a/site/introwebdev/week-6-homework.html
+++ b/site/introwebdev/week-6-homework.html
@@ -0,0 +1,71 @@
 [!]
 [=title "Week 6 Homework"]
 [=content-]
 <p>
 This homework is going to be entirely about background images.
 You don't need to know anything not covered in <a href="week-6-backgrounds.html">Week 6: Backgrounds</a>, but
 if you're curious or want a deeper understanding, check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background">MDN on the background property</a>.
 It's complicated because it's powerful!
 </p>
 <p>
 I recommend doing all of this in a new page with its own CSS file.
 </p>
 <h2>Part 1: Space Age</h2>
 <p>
 Download a good space age background image (there are some nice options on <a href="https://www.freepik.com/free-photos-vectors/space-background">freepik</a>).
 Use it to set the background image of a new page on your website.
 <span class="goal">Background image set properly</span>.
 The background image should cover the entire area, should not stretch, and should not repeat - which single CSS property will achieve that?
 </p>
 <p>
 Note that Freepik is <i>licensed</i> - you can't just use the images. Fortunately, their "free tier" only requires you to put an <i>attribution</i> on your site.
 Find Freepik's free-license attribution on your own, and use it correctly on your webpage. <span class="goal">Correct attribution</span>
 </p>
 <p>
 (Note that if you use a service other than freepik it is <b>your responsibility</b> to handle the license correctly - I <i>will</i> be checking.)
 </p>
 <h2>Part 2: Planetarium</h2>
 <p>
 Let's make your space page more interesting! Download some planets (<a href="https://www.pics4learning.com/results.php?search=cat&query=Space_Planets">Pics4Learning</a> has them, and you don't need
 to worry about P4L licensing because this is a school project).
 </p>
 <p>
 Add a few <code>div</code>'s to the page (with their own IDs) and give them planet backgrounds <span class="goal">divs with planet backgrounds</span>.
 Use <code>padding</code> to increase the size of the divs, and use the background properties to set the position and size
 of the planets within their divs <span class="goal">planet backgrounds are sized and positioned</span>.
 </p>
 <p>
 There's no required end result here, so be creative!
 </p>
 <h2>Part 3: Words</h2>
 <p>
 Using <i>whatever technique you think is best</i>, add some Lorem text to the page between some planets.
 <span class="goal">lorem text</span>
 Make sure that it's <i>readable</i>:
 e.g. white on black or black on white, not black on black.
 <span class="goal">text is readable</span>.
 Web developers have to be aware of contrast!
 </p>
 <h2>Extra Credit</h2>
 <p>
 I'll add 3 points of extra credit if you can figure out how to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient">linear-gradient</a> to
 set a spaceage-ey glow effect on your website, and 7 if you can
 find and download a space font and correctly apply it to your text (this is hard!).
 </p>
 <h2>Self-Study</h2>
 <p>
 We'll be learning about fonts soon - to get a head start, read on your own about the font properties in CSS
 and the <code>@font-face</code> declaration.
 </p>
 <p>
 Also, read <a href="https://css-tricks.com/complete-guide-css-grid-layout/">CSS-Tricks' Grids page</a> - it's an excellent
 dive into more advanced layouts. In particular, using a grid to complete
 this homework is a far better solution than the intended one - I won't assign extra credit if you do so, but I will consider
 it to be a fully correct solution.
 </p>
 <h2>Submission</h2>
 <p>
 Upload your page to your Github site and e-mail me the link, no later than February 20th.
 </p>
 [/]
 [#template.html]