+Every tag in a page has a display. This controls how it's sized and positioned by the layout engine.
+There are three main values for display: inline, block, and inline-block.
+Most elements are inline or block by default. For example:
+
<style>
+#inline-element {
+ display: inline; /* this is already set automatically - just putting it here for clarity */
+ background-color: yellow;
+}
+
+#block-element {
+ display: block; /* this is already set automatically - just putting it here for clarity */
+ background-color: green;
+}
+
+#inline-block-element {
+ display: inline-block; /* this is *not* set automatically, divs are block by default */
+ background-color: red;
+}
+</style>
+
+<span id="inline-element">
+ text<br />
+ text part 2
+</span>
+
+<div id="block-element">
+ text<br />
+ text part 2
+</div>
+
+<div id="inline-block-element">
+ text<br />
+ text part 2
+</div>
++Gives this result: +
+ + + +texttext part 2 + + +
text part 2 +
text part 2 +
+This is important! Notice that the yellow inline element fits around the text - meaning the size and shape is the same as the contents, even when they're not an even square. +Conversely, the green block element fills the whole width - even though the content is much smaller than that. +And finally, the red inline-block element fills the bounding box: +the smallest rectangle you can draw around the content. +
++Sizes don't always work the same way! For instance, if we change the previous demo code: +
+ +<style>
+#inline-element {
+ display: inline; /* this is already set automatically - just putting it here for clarity */
+ background-color: yellow;
+ width: 100px;
+ height: 100px;
+}
+
+#block-element {
+ display: block; /* this is already set automatically - just putting it here for clarity */
+ background-color: green;
+ width: 100px;
+ height: 100px;
+}
+
+#inline-block-element {
+ display: inline-block; /* this is *not* set automatically, divs are block by default */
+ background-color: red;
+ width: 100px;
+ height: 100px;
+}
+</style>
+
+<span id="inline-element">
+ text<br />
+ text part 2
+</span>
+
+<div id="block-element">
+ text<br />
+ text part 2
+</div>
+
+<div id="inline-block-element">
+ text<br />
+ text part 2
+</div>
++Gives this result: +
+ + + +texttext part 2 + + +
text part 2 +
text part 2 +
+block and inline-block both respect the width, but inline completely ignores it!
+
+Displays are extremely important to understand. There are actually quite a few more beyond these basic ones, +but it's critical to understand the basic ones before moving onto weirder things like flexbox and grid. +I highly recommend reading more on display at Mozilla Developer Network (warning: pretty advanced - we haven't covered all of the material +on that page!). +
+[/] +[#template.html] diff --git a/site/introwebdev/week-8-flexbox-1.html b/site/introwebdev/week-8-flexbox-1.html new file mode 100644 index 0000000..517bd37 --- /dev/null +++ b/site/introwebdev/week-8-flexbox-1.html @@ -0,0 +1,143 @@ +[!] +[=title "Week 8: Flexbox 1"] +[=content-] ++Finally, the oft-teased flexbox arrives! We're not covering all of flexbox in part 1 (there's a LOT), but we'll go over some basic properties and the rough idea. +
++Flexbox is the clever answer to positioning being hard. Rather than having to use terrible absolute positioning tricks, +flexboxes generalize to almost every hard problem - centering, space distribution, automatic reflow (e.g. stacking vertically when screens are too small for horizontal), +etc, and you can do all of this without JavaScript. This is the simplest flexbox: +
+<style>
+span {
+ background-color: red;
+ padding: 5px;
+}
+
+#container {
+ display: flex;
+}
+</style>
+<div id="container">
+ <span> Text 1 </span>
+ <span> Text 2 </span>
+ <span> Text 3 </span>
+</div>
++Produces: +
+ +
+Note the display: flex; - that div is a flexbox! That's all it takes. Unfortunately, this also isn't very useful. Let's make it more interesting
+with the justify-content property:
+
<style>
+span {
+ background-color: red;
+ padding: 5px;
+}
+
+#container {
+ display: flex;
+ justify-content: center;
+}
+</style>
+<div id="container">
+ <span> Text 1 </span>
+ <span> Text 2 </span>
+ <span> Text 3 </span>
+</div>
++Produces: +
+ ++ Nice, fully centered. What about spacing? +
+<style>
+span {
+ background-color: red;
+ padding: 5px;
+}
+
+#container {
+ display: flex;
+ justify-content: space-evenly;
+}
+</style>
+<div id="container">
+ <span> Text 1 </span>
+ <span> Text 2 </span>
+ <span> Text 3 </span>
+</div>
++Produces: +
+ +
+Useful! Note how hard it would be to produce this effect without using flexbox. There are a few other properties for justify-content, all of which are listed
+on MDN.
+
+I hope you can see how powerful flexbox is. We're past the point where you know enough to start building websites, so now it's time to start thinking about designing websites- +flexbox is going to be one of the most effective tools in your arsenal. I would highly recommend practicing on your own! +
++There is a LOT more to flexbox, which we'll be covering over the next few weeks; you can get ahead by reading the CSS-Tricks guide to Flexbox. +While it's advanced, it's a good reference. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-8-grid-1.html b/site/introwebdev/week-8-grid-1.html new file mode 100644 index 0000000..0b9392c --- /dev/null +++ b/site/introwebdev/week-8-grid-1.html @@ -0,0 +1,59 @@ +[!] +[=title "Week 8: Grid 1"] +[=content-] ++Grid is a layout engine like Flexbox, but with a different use case: 2d problems. Rather than +positioning in a single dimension (right/left) like Flexbox, grid allows you to position in 2 dimensions while maintaining many of the same properties. +
++Grids are pretty complicated, and we're going to have at least one entire lecture on them, but we can start now with a very simple use case: +
+<style>
+#grid {
+ display: grid;
+ grid-template-columns: 100px auto;
+ grid-template-rows: 100px auto;
+ height: 500px;
+}
+</style>
+
+<div id="grid">
+<span style="background-color: red;">Square 1</span>
+<span style="background-color: purple">Square 2</span>
+<span style="background-color: green">Square 3</span>
+<span style="background-color: blue">Square 4</span>
+</div>
++Which looks like this: +
+ + +
+ Note something interesting: even though the spans are inline elements, they fill up the whole cells!
+ This is because grid cells are their own kind of display, and you can't override them.
+
+ The grid is set up by the grid-template-columns and grid-template-rows properties. When not present, their default behavior is
+ to evenly space everything and create as many rows/columns as necessary to fit the contents. In this case, each one contains 100px 1fr:
+ this means "make the first row/column 100px, and make the second row/column fill whatever space is left". (The fr unit is actually
+ a lot more complicated than that, but we won't worry about that for now).
+
+ I highly recommend playing with this. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-8-homework.html b/site/introwebdev/week-8-homework.html new file mode 100644 index 0000000..d2f23f7 --- /dev/null +++ b/site/introwebdev/week-8-homework.html @@ -0,0 +1,46 @@ +[!] +[=title "Week 8 Homework"] +[=content-] ++ Because it's essentially an addition to your week 9 homework (sorry!), week 8 will be short. +
+Part 1: Spaaaaaaaaaaaaaace
+
+ Using fixed and absolute positioning, add some more planets to your space gallery (from homework 6)! You should be able to put them in much more
+ interesting places, because you don't have to worry about how to set margins. You may use the img tag for the new planets,
+ but beware images from P4L may be quite large and you'll have to set a width.
+ At least 2 new planets with absolute positions
+ At least 2 new planets with fixed positions
+
+ If you aren't clear on the difference between absolute and fixed positions, review + Week 8: Position. +
+Part 2: Scavenger Hunt
++ Find two new tags that aren't on the Rolling Tags List + (if you've learned tags outside of those, it's fine to reuse a tag you've already used on homework). + One should be block and one should be inline. Do NOT use CSS to override their default behaviors. +
++ Use both tags somewhere on your website, and clearly mark which is inline and which is block. +
++ A new inline tag A new block tag +
+Extra Credit
++ For 10 points of extra credit, teach yourself about sticky positioning and use a sticky element somewhere on your page. + It should be obviously stickied; I'm not awarding this one on a technicality. +
+Self-Study
++ See homework 9. +
+Submission
++ Send a link to your github website to me once it's finished - I use your email dates to track which commit you were on when you "submitted" the assignment. + This assignment is due on March 13th along with Homework 9. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-8-position.html b/site/introwebdev/week-8-position.html new file mode 100644 index 0000000..48f709a --- /dev/null +++ b/site/introwebdev/week-8-position.html @@ -0,0 +1,98 @@ +[!] +[=title "Week 8: Position"] +[=content-] ++Till now, we've mainly relied on the browser to set positions for us by picking wherever there's space. +This isn't a bad way to do it - in fact, this ensures the most support across devices - but before we start +considering more advanced techniques, we should look at positioning. +
+
+The CSS position property has five common values: static, fixed, relative, sticky, and absolute.
+
-
+
-
+
staticpositioning simply accepts wherever makes the most sense to the browser - it's the default for every element. +
+ -
+
fixedpositioning sets a position relative to the viewport: for instance, the floating red div in this page is actually defined +in the code right below this text, but because it hasposition: fixed;, it completely ignores its location in the document! Check it out with the web inspector. + + +fixed position element example+ +
+ -
+
relativepositioning is a bit confusing - essentially, it creates a container for an absolute element, so you can have absolute elements +that sorta-respect document flow. +
+ -
+
absolutepositioning lets you set a position relative to the page: it's likefixed, except it moves when you scroll. +For example, the yellow div in this page is absolute positioned; it's defined below in the code: + + +absolute position element example+ +
+ -
+
sticky: Sticky is a strange one! It goes from being essentiallyrelativeto being essentiallyfixedwhen +a simple condition is satisfied. We won't talk much about sticky in this class, but MDN +has an example as always. +
+
+Once you have a position set, you need some way to actually control where the element goes - these are not the same thing, because CSS is confusing.
+You set the actual location of the element using the top, left, bottom, and right properties.
+For instance, the floating color blocks in this page (use the web inspector to see!) have top: 200px;, which pushes them down from the top
+by 200 pixels, and have either left: 100px; or right: 100px;, which push them to the right from the left edge or to the left from the right edge.
+
+Top, left, bottom, and right should be thought of as setting the distance from the edges of the screen. +
+ +
+A word of caution: you should never use absolute positioning. It's just a bad idea. There are many screens, and fitting absolute positioning to screens of
+different sizes quickly becomes a nightmare. Whenever possible, use grid or flexbox instead - and seriously consider whether or not you actually need
+the fancy positioning, if you aren't able to get it without absolute.
+
+We talked briefly in class about the css transform property. We won't be covering transform any more, but it's pretty interesting -
+I recommend reading MDN's page on transform if you're curious.
+
+ + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus auctor arcu nibh, sit amet tincidunt tortor tincidunt quis. Vestibulum eu nisl sed risus gravida viverra. Vestibulum condimentum turpis quam, eget porttitor sapien blandit sit amet. Cras risus tortor, lacinia et blandit nec, lacinia ac ante. Fusce elementum massa enim, varius vestibulum turpis accumsan ut. Duis in elementum dolor. Maecenas vitae ullamcorper est, in porta mauris. Curabitur bibendum, ipsum ut venenatis ultrices, nunc elit eleifend nunc, tincidunt aliquam turpis justo sit amet diam. Mauris nec metus felis. Praesent dui leo, tristique quis mi eget, egestas lobortis augue. Duis ut laoreet ex, aliquam lacinia lorem. Phasellus finibus velit in interdum mattis. + +Praesent id venenatis libero. Integer facilisis at velit vitae elementum. In a felis a diam facilisis pretium. Phasellus finibus mollis turpis, at sagittis neque commodo in. Fusce eget venenatis ex. Praesent tristique, nulla ac maximus finibus, lectus leo facilisis risus, ut tristique nibh quam sit amet est. Sed vel nisi dictum lorem laoreet tempor. Nunc tempus accumsan tortor, vel aliquet nunc pellentesque a. Fusce faucibus risus nec lorem ullamcorper, in sollicitudin orci pellentesque. Curabitur aliquet congue leo, at viverra orci placerat vel. Mauris id tellus rutrum, blandit tellus a, ornare magna. + +Nunc aliquam, purus at iaculis luctus, nisi massa varius velit, eget condimentum arcu magna vel purus. Nulla nec posuere mi. Fusce nec lacinia eros, sed tristique dolor. Duis pulvinar leo id magna volutpat dapibus. Donec ac condimentum magna. Integer faucibus consectetur elit, quis ullamcorper turpis pulvinar non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu odio rhoncus leo euismod euismod. + +Maecenas ut mi nulla. Fusce at leo interdum, hendrerit ex ac, gravida massa. Vestibulum sit amet finibus risus. Donec a diam lorem. Morbi blandit ac augue sed congue. Proin mauris elit, aliquam quis urna vel, euismod condimentum libero. Quisque ex arcu, dignissim eu bibendum sit amet, tincidunt eget ante. Sed pharetra lorem mauris, a tincidunt nunc pretium non. Integer venenatis in eros in molestie. Pellentesque viverra blandit orci, a laoreet ligula elementum sed. Mauris ac faucibus enim. Suspendisse nec lacinia mauris, in eleifend erat. Aliquam ut turpis dolor. Duis vel bibendum eros. + +Nulla finibus aliquet nisi eu pharetra. Curabitur id libero fermentum arcu aliquam ultrices a a metus. Integer finibus mauris sit amet est consequat luctus. Donec luctus consectetur tellus, sed convallis ante rutrum nec. Integer nec tortor et arcu luctus finibus vitae quis nisl. Praesent vel justo feugiat, cursus elit sit amet, hendrerit est. Aenean semper egestas volutpat. Aliquam fermentum, nulla non tincidunt volutpat, magna ex condimentum lorem, id bibendum felis ante eget neque. Aliquam vel ex id enim semper cursus. Donec mattis erat in nibh fermentum iaculis. Aliquam condimentum consectetur augue, at tempor felis vestibulum non. Aliquam eleifend urna ut metus sodales tempor. Integer tincidunt arcu in orci rhoncus, et viverra sapien ornare. + +Duis venenatis mauris at ex iaculis rhoncus non a augue. Quisque egestas enim nunc, in ultricies erat pretium tempor. Curabitur et purus laoreet, fermentum tortor at, cursus felis. Donec eget neque eu justo vulputate iaculis in at dolor. In iaculis velit id elit blandit bibendum. Etiam eu efficitur ex, vitae porta odio. Fusce tempor purus vitae orci tristique hendrerit. Etiam finibus vitae metus ac luctus. Sed et eleifend eros. Nunc ullamcorper porttitor pharetra. Maecenas aliquam scelerisque purus non aliquam. Phasellus porta lectus mauris. Donec dapibus tincidunt nunc, molestie rutrum odio. + +Etiam tincidunt gravida ligula, in molestie purus commodo non. Duis nec dignissim risus, eu iaculis augue. Sed lobortis semper justo, ut varius nulla porta vitae. Aenean vel interdum dolor. Cras venenatis sagittis nunc sed porttitor. Sed dignissim consectetur erat sed molestie. Mauris vitae turpis non risus auctor maximus vel at nisi. Vestibulum imperdiet, urna sed fringilla sodales, nisl elit sollicitudin erat, quis vestibulum massa felis sed eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Morbi vitae fringilla justo. Etiam pretium a dolor et consectetur. Aenean finibus diam mi. Ut vulputate, nibh vitae posuere feugiat, metus nibh condimentum felis, vitae sollicitudin dolor nibh vel lacus. Phasellus venenatis nisi ut vehicula pulvinar. Integer elementum dolor id massa hendrerit aliquam. Aenean accumsan vehicula faucibus. Nunc fermentum convallis nisl, eu maximus nisi dignissim vitae. Donec magna diam, efficitur in euismod tristique, consectetur ac arcu. In vehicula consequat scelerisque. + +Vestibulum vitae felis eu lorem mattis consectetur. Nullam ligula lectus, ultricies ac porttitor et, sollicitudin imperdiet dui. Pellentesque imperdiet neque a quam congue vehicula. Nulla in turpis ac quam porta mattis. Morbi eget augue ante. Duis non augue sodales magna pharetra semper. Vivamus auctor velit non placerat imperdiet. Donec lacinia risus ipsum, sit amet mattis dolor consequat ac. Nunc et nulla faucibus, sagittis risus eget, interdum mauris. Praesent sit amet sagittis metus. + +Sed rhoncus ullamcorper consectetur. Nullam in commodo lorem. Integer quis vestibulum diam, eget sodales ex. Aliquam luctus sem orci, eu auctor mi mattis at. Suspendisse sit amet mi rhoncus, interdum nibh nec, vulputate ligula. Cras sed velit bibendum metus lacinia egestas quis ac risus. Integer nulla velit, facilisis nec sodales id, bibendum sed ipsum. Praesent id tortor vestibulum, venenatis diam vitae, euismod lacus. Quisque non magna ut neque imperdiet tristique. + +Nulla blandit, elit eu pulvinar congue, est neque venenatis tortor, at interdum massa nunc in risus. Aenean euismod nulla mi, eu hendrerit augue lacinia at. Curabitur nec volutpat risus. Vivamus ultricies mauris non arcu tempus facilisis. Quisque sit amet ex facilisis, aliquet ex sed, varius magna. Sed fermentum, diam ultrices pharetra condimentum, justo tortor rutrum diam, ac condimentum mi ex at massa. Proin bibendum velit non velit pretium convallis. + +Nullam blandit varius orci. Quisque dui sapien, suscipit ac consequat in, posuere eget mi. Ut varius efficitur ex, in congue lectus tempus ut. In hac habitasse platea dictumst. Nam sed dolor tincidunt, elementum purus et, ultrices mi. Cras sollicitudin mauris ac diam dignissim imperdiet. Nunc orci tortor, tempor in dolor in, interdum ultrices turpis. + +In sed tellus nulla. Suspendisse fringilla dapibus turpis quis pulvinar. Aenean ac purus odio. Fusce a quam quis mi convallis ultrices. Donec faucibus dapibus metus vitae molestie. Morbi accumsan lacus id ligula aliquam imperdiet. Quisque feugiat accumsan volutpat. Praesent finibus lobortis erat ut iaculis. Nullam posuere gravida dolor, nec facilisis felis ultrices id. + +Sed vel tortor nec nisl malesuada elementum. Nulla suscipit velit sed neque sodales cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus quis massa et dapibus. Integer ultricies tempus libero, nec molestie felis pulvinar sit amet. Integer consequat lobortis felis elementum egestas. Ut tortor ante, placerat in finibus nec, semper ut leo. Ut molestie velit risus, non placerat enim dapibus a. Fusce ex justo, fringilla vel erat a, hendrerit finibus mi. Vestibulum viverra porttitor ultricies. Maecenas venenatis ante nec porttitor bibendum. Curabitur nec massa ullamcorper, scelerisque nulla id, tempor leo. Phasellus placerat metus sed arcu maximus, id scelerisque leo viverra. Duis placerat ligula sit amet tortor hendrerit, sit amet porta sapien finibus. In quis malesuada neque. Vestibulum fringilla urna id neque mattis feugiat. + +Fusce dictum aliquet sem a ornare. Donec pulvinar augue a risus aliquam, non accumsan erat scelerisque. Vivamus eget tincidunt nisi. Duis interdum commodo condimentum. Phasellus vitae arcu mollis, feugiat leo ut, vehicula ligula. Morbi vitae dolor condimentum, gravida ligula nec, suscipit mi. Fusce pharetra elit at massa auctor finibus. Proin blandit sapien est, vitae pellentesque arcu consectetur eget. Aliquam facilisis, sem ut dictum molestie, magna ex interdum leo, nec bibendum justo tortor at sem. Phasellus imperdiet massa congue lacus interdum, id consectetur mi tincidunt. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-9-grid-2.html b/site/introwebdev/week-9-grid-2.html new file mode 100644 index 0000000..53929ba --- /dev/null +++ b/site/introwebdev/week-9-grid-2.html @@ -0,0 +1,123 @@ +[!] +[=title "Week 9: Grid 2"] +[=content-] ++ We briefly discussed grids already - we're going to go into more detail on them now. + If you haven't, read Grid 1, or you will be very confused. +
++ Note: because this is an incredibly dense bit, there aren't many demos. I highly recommend reading + through CSS Grid Layout Guide by CSS-Tricks - + it's far more interactive and detailed. +
+Grid-Template-*
+
+ We've already seen the grid-template-columns and grid-template-rows properties:
+ they define the widths of the columns of the grid and the rows of the grid. We're going to go into more detail on how they work now.
+
+ First off, the syntax: every use of either property looks like grid-template-dimension: <1> <2> ... <n>;.
+ You can define as many columns as you want, sized however you want! For instance, the magic incantation for "four 50px columns and a fifth which uses up all the remaining space"
+ is simply grid-template-columns: 50px 50px 50px 50px auto;. This is unnecessarily gross, so CSS gives us a useful
+ function: repeat(n, val). This literally just repeats val n times (note: this is not
+ actually universal, it's only for grid). So we can simplify: grid-template-columns: repeat(4, 50px) auto;.
+
+ Pixels are bad, because they don't work the same on every screen. A better unit is %. In the context of grid,
+ percent just allocates space remaining along the axis! So for instance, if we want to have 3 thin inner columns and 2 wide outer columns...
+ grid-template-columns: 35% repeat(3, 10%) 35%;. This will always scale the same way for every screen size!
+
Aside: Percent
+
+ At this point everyone should have the mantra "percent means something different in transform than in top" burned into their brains.
+ The CSS percent unit is delicate and complicated! Whenever you use it, be sure you know what it's doing. Because percent means
+ something different in grid-template-columns than in width...
+
Back on track...
+
+ Of course, percentages aren't the only useful tool here. We also have the fr unit! fr essentially allocates
+ space as evenly as possible, but weighted. So for instance, if we want to have 2 columns of the same width, and a third column twice as big as them,
+ grid-template-columns: 1fr 1fr 2fr; will work perfectly. We could manually calculate grid-template-columns: 25% 25% 50%;,
+ but that's bad.
+
+ There are also two convenient "sorta-units": min-content and max-content. min-content
+ is always the thinnest the column or row can get before the inner items get too cramped and overflow, and max-content
+ is always the widest the column or row can get before the inner items have "too much" space. This is very nice for goldilocks layouts
+ where you want a column to be "just right" and have the others fit around it! For instance, you might have a 2-panel layout with a thin sidebar (maybe containing links!)
+ and a content block; you could do that with grid-template-columns: max-content auto;.
+
Grid-Auto-*
+
+ Templates are nice, but what if we don't know how much content we have? A good example of this situation is a
+ music player app, where you have nice fancy grid tiles for each song, but you aren't sure how many songs there are.
+ Rather than trying to write an infinitely long grid-template-rows, you can set grid-auto-rows: 50px;
+ almost everything works in grid-auto-rows, with the sole exception of fr (you can still use auto for even distribution).
+
+ Whenever the layout engine needs a new row (or column), it will first check if there's a remaining template; and if not,
+ it'll use whatever the grid-auto-* value is.
+
Grid-Template-Areas
+
+ This is the last of the black magic: grid-template-areas and grid-area.
+ Grid-template-areas is a very strange property. It contains arbitrarily many values for rows, and contains strings (in double quotes)
+ describing the area names within columns. For example:
+
.grid-container {
+ grid-template-areas: "b b a"
+ "b b c"
+ "d d d";
+}
+ This doesn't do much without another tag: grid-area. This is applied to grid cells, not to the grid itself! Say it out loud:
+ grid-area applies to the grid cell, not to the grid container!.
+
+ Continuing the example, if we put a few spans defined like so into a grid...
+
<style>
+.grid-container {
+ display: grid;
+ grid-template-areas: "b b a" /* defines 3 rows and 3 columns with nicely labeled cells */
+ "b b c"
+ "d d d";
+ height: 300px;
+}
+</style>
+<div class="grid-container">
+ <span style="grid-area: a; background-color: purple;">Area A</span>
+ <span style="grid-area: b; background-color: green;">Area B</span>
+ <span style="grid-area: c; background-color: orange;">Area C</span>
+ <span style="grid-area: d; background-color: red;">Area D</span>
+</div>
+
+ Note how, without even having to set a grid-template-rows, we got a decent layout!
+ More importantly, we now have elements spanning across grid lines - there are actually 3 columns and 3 rows,
+ but we only have 4 elements filling them!
+
+ grid-template-areas is extraordinarily powerful, and I highly recommend playing with it on your own.
+ Mix it with grid-template-* to control the sizes of your regions!
+
+ I strongly recommend everyone practice grids on their own. +
+[/] +[#template.html] diff --git a/site/introwebdev/week-9-homework.html b/site/introwebdev/week-9-homework.html new file mode 100644 index 0000000..abbda45 --- /dev/null +++ b/site/introwebdev/week-9-homework.html @@ -0,0 +1,99 @@ +[!] +[=title "Week 9 Homework"] +[=content-] ++ In contrast with the highly technical material previous, this assignment is WAY more artistic than usual. + Be creative and have fun with the process; the goals should really be the bare minimum. Try to make something + YOU enjoy looking at (even if it's deeply annoying to grade). +
++ Where the instructions are unclear, you may interpret that as giving you artistic license - the point of this is + to test your creative problem-solving skills, so if you cleverly work around a badly phrased goal, + I won't deduct points. +
++ I really was serious about taking off points for absolute positioning - but parts of this are more fun if you can + use the entire toolbox, so I'll allow it for this one assignment. +
+Part 1: Modern Art
++ Using CSS grid, create a simple collage! Use at least 5 rows and 5 columns. + An example of what I'm talking about (although yours should have more detail): +
+ +
++ Do NOT use an image. I won't be awarding points on a technicality for this, you have to actually USE the grid. +
++ Hint: this is the sort of assignment that's very easily solved if you read the lecture notes. + Simple collage +
+Part 2: Market Research
++ Find a website you like online (it can't be this one, if by some incredible circumstance you like this one), and + use a grid to copy the layout. If it can't be done easily with a grid, pick another one! Make sure to clearly indicate + which website you're simulating. +
++ You do not have to fully faithfully replicate it - as long as the main layout elements are recognizable, it's fine. + Pick your own colors, images, and content (use lorem ipsum!) to avoid a copyright lawsuit. +
++ You can use any other technique we've learned (flexbox, sticky positioning if you did the extra credit, etc), as long + as a grid is a major part of it. + Emulated website + Clear attribution +
++ The previous assignment can be brute-forced with defaults, but this one will require you to think seriously about + space usage, sizes, and alignments. I will be stretching the screen to see how it performs. + Doesn't fail on small or large screens +
+Part 3: To Clip Or Not To Clip
+
+ Find a scene from a book, movie, show, video game, etc that you can roughly replicate
+ using absolutely positioned images (and whatever other elements you need - e.g., span for text!).
+
+ This is a hard one because you'll have to find your own resources - as always, be careful on the Internet, + and make sure to attribute images you use. If you aren't sure how to provide attribution (e.g. it's not clear on the site), + don't use the image. Copyright is serious. +
++ Wikimedia, Pics4Learning, etc are good places to start, mainly because they are the least likely ones to + attract lawyers. +
++ Clearly chosen scene, attributed + At least 3 attributed images composing a set + Some text describing the scene +
+Extra Credit
+-
+
- 5 points if you can recognizably replicate the style of Piet Mondrian or another similar artist in the collage assignment (this may require teaching yourself about
border!)
+ - 5 points if you can integrate a flexbox somewhere useful on the page +
- 10 points if you can figure out how to use
font-familyto switch up the fonts to something less terrible
+ - 15 points(!!!) if you can make your Market Research page convincingly "enterprise". +
- 5 points generally for making it look polished and aesthetic in some other way. +
Self-Study
+
+ We haven't talked about fonts or borders yet. A better-organized course would go into both before layout.
+ If you'd like to correct my failing (and make all of your websites some 10x nicer), read on your own about
+ the Border property and
+ the Font property.
+ It's especially important to understand font, because most of the time you don't want to use it - you want
+ to use its subproperties, font-family and co.
+
+ I'll give 1 point of extra course credit to anyone who can demonstrate + a nice usage of fonts and borders this or next Friday. +
+Submission
++ As always, email me the link to your homework. If I don't get the email, I won't know what commit to read when I grade two weeks later, + and so I'll have to guess. Which can only end badly. +
+[/] +[#template.html]