week 6

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]