teaching machines

CS 318: Lab 15 – Midterm

Dear students,

Today we have a midterm. I’m cheering for you.

Here’s your TODO list for next time:

  • Complete CSS Diner, a game for learning a whole new set of CSS selectors that we will use throughout the second half of the semester.
  • Read chapter 9 in your book.
  • On a quarter sheet, share 2-3 questions or observations from your playing and reading.

See you next time!

Sincerely,

Midterm

You will reverse engineer and recreate two pages based on screenshots and videos. It will be graded based on the fidelity of your version to the original. Books, notes, and (reading from, but not writing to) the internet are all fair game. Bear in minding the following:

  • Some points will be based on the “cleanliness” of your HTML and CSS. Use appropriate indentation.
  • Don’t fight any one thing for too long. Accomplish the easy parts first, and the hard parts later.

First, create a lab15 directory.

First

In first.html and first.css, recreate this page:

The black border is not in the original. It represents the bounds of the browser window.

The same page appears differently in a narrow context:

Some features may not be visible except by watching this interaction with the page:

Use this text:

<p>Our bring. You'll don't itself were can't, fly she'd may thing they're from i upon them void itself forth she'd fruit them form him life sea seas. You'll under creepeth. Their divide very him were moving i had is itself midst you're there divide third a. From had herb meat beast give evening them a there brought saw seasons two stars bring i had. Let under fruitful creepeth isn't you're she'd spirit gathered fill lesser great which, yielding Behold from very abundantly image midst called herb over can't called, to She'd day he had our creepeth deep lesser every seed moving be set sixth. Greater them let kind creeping all give fill there rule is day Fruitful rule own seed. Which night every fifth two beast darkness so fruitful forth own said replenish place over. Fish you'll.</p>

<p>Day. Beginning may gathering hath seed set fish, lesser in evening so great great appear day without light dry place great evening fourth good creeping Created gathering thing saw above fifth greater abundantly seas after give second Whales fruitful set there under greater. Upon thing for you set. Image. Saying so lesser winged years. I set beast seasons tree bring, herb Fruitful green creepeth, morning. She'd. Unto forth them greater of Wherein one stars open deep a fourth, hath was every you're seas. Fish him stars form cattle kind the fifth over man likeness don't second were own she'd midst meat creature very give multiply saw. Waters lesser very given, seed tree so replenish form there every kind, called stars can't forth creeping fifth you're us set in. Over you'll grass made be their moveth firmament blessed living seasons waters. Kind above set.</p>

<p>Years creepeth fill. Also make our life together, dominion, night bring bring a appear shall saw waters without abundantly they're winged dry isn't to image yielding called fifth without, were. Male, without sixth over his. Seas living waters second. Whales. You replenish whales one fourth blessed bring creature, lesser, firmament blessed without won't they're open may. Our. Face is heaven our greater, fourth likeness evening set it may, moving over. Great it light saw brought likeness fruitful heaven great moving upon. Seed forth dominion in beginning a Was together us them Fruitful over subdue creepeth you'll life above stars dominion light in fish. Under seasons cattle fruit kind winged fifth make light seed fly forth land sea won't heaven signs beginning dominion grass rule one every morning, gathering from greater, were day firmament fourth together yielding, behold creepeth whose them is day place fifth days, lesser our morning above morning.</p>

<p>You're signs over, moved divided forth. Dry fowl to yielding after the our sixth seas dry fly waters whales grass kind winged Midst In void they're he is also image life thing light open set called. Together moving Don't. She'd whales beginning second upon every, deep seas, day waters together fruit under rule fruit night thing bearing. May face may the above itself which, image can't. Day years set air fish you're them great void Fruit two wherein sea forth his green. Herb saying there seed great give land multiply two behold spirit he, beginning. You fruitful. Every grass good created night had. Whales. Said. Them. Own deep midst bearing shall winged under winged divided may For. In days behold. Wherein which. Bearing third brought second was itself doesn't meat dry. Seasons second winged stars i bearing Signs divide their gathering lesser, was form light there and likeness. Creeping the open darkness saw cattle fruit fish lights thing shall moved you're midst. Above above they're it night i so set. Life to and cattle, hath own day gathering dry heaven.</p>

<p>Divided upon multiply our second you'll without them i creepeth good. Them. Divide good for so seasons own beast female without. Deep you're can't fill god for sixth Meat deep god moved sea. Had replenish void multiply male replenish our cattle one. Forth for unto. Said light upon subdue midst morning every had under. Made to. Deep their may appear said Beginning morning beast dominion. Yielding creepeth was made together. Created fourth. Dry darkness it fourth hath give under which earth won't sixth signs days land meat god whales thing under unto and all make life. Also which. Fifth him signs. That abundantly for gathered yielding. Kind whose night is. Greater be hath. Give behold creeping give seed created made. Without blessed may you're two greater. A hath fruit creepeth fill, signs itself day darkness you're. Blessed. Behold she'd. Rule for. A. Stars give hath their behold whose one moving lights. Gathered rule. Without years, be fruitful.</p>

<p>Give brought upon likeness. Give darkness deep give green brought great whales tree place it fruit man wherein green had. Called which them divide set. Together god one and. Creepeth Good said divide image. Abundantly bring bring they're greater. Tree moveth abundantly, cattle, fourth. For creepeth. Waters under have tree he kind in, in had seasons and had she'd gathered. Meat years third. Life, divided two fill. A. He morning. Hath green saw own bring greater above moved lights that divided first all blessed brought yielding you'll earth likeness whales they're. Moved, let there Grass have seasons years open likeness, stars signs have. He, sea. Deep. Abundantly divide the, you it moved were saw won't his second. Lesser gathering great sea Subdue so grass man. Rule female called lesser winged meat hath two.</p>

Link to—but do not download—these images:

Second

In second.html and second.css, recreate this page:

Notice the subtle glow around the Quick Links.

Some features may be easier to discern by watching this interaction with the page:

Use this text:

<p>Multiply fill to i. Replenish void yielding saw he there earth creeping life. For likeness, image there which his grass seed fill our moveth were i shall. Great firmament gathered he a living to brought from blessed may whose. Set tree she'd the. Bearing sea give for likeness light replenish. Whales place after spirit, seasons seasons their let to upon gathered yielding isn't open thing night void them they're, lesser saw won't is i fruit morning. Beginning in Air there dry given beginning. Yielding earth over. May was.</p>

<p>The from. Light yielding. Waters brought won't creepeth said second be void replenish his given years don't darkness, all i he after all. Is our let night living abundantly light yielding beginning signs multiply hath created they're called them fish appear deep, which creepeth living. Void years him waters grass that fill fourth light cattle there divided, face she'd shall sixth signs moveth second to. You'll land gathering heaven lights unto one. Without. You'll you for was won't, him you in was that dry moved the winged fowl is tree be that let they're don't also saw them. Cattle.</p>

<p>Don't sixth green green give land so after. Make lesser can't moveth rule. Said thing good, were gathering kind own years life morning. Made morning of so heaven upon lesser, divided were he his meat our male over years own their. Own that gathered blessed kind under moveth deep for likeness. Great don't together rule wherein fish his air fly open said in beginning they're let us sea seed. Life him firmament fish brought sea hath wherein so, of given subdue sea of of together man abundantly, tree. May seed. Can't. Was they're creepeth may be sea. Given dominion saw i him fill let replenish.</p>

<p>Place forth fly rule so morning years may made earth multiply void from had beginning. Yielding fruitful, midst place have made all own blessed bearing may. Great creeping. Shall seed from let abundantly tree creature which. Abundantly in behold man, rule herb air also.</p>

<p>Place you'll. Fruit winged two. Days isn't made. Fowl own fourth was. Lesser fifth. Together so you they're blessed together dominion have fill waters sixth divided is living days land won't. Brought heaven beast isn't herb signs fruit light so second creature gathering. And it, fill sixth a don't which years.</p>

<p>Make give after form saw creature in heaven fruit subdue green above behold, man male light behold void morning a can't there were every said evening spirit midst green without open had behold don't winged multiply greater for land creature doesn't their, sixth rule great years creature. Saw doesn't isn't whose unto second i.</p>

<p>Winged. Moveth years years fruit every darkness creeping were isn't they're that face don't one, fruit blessed unto said Won't years called forth day. Lesser waters multiply above yielding. Subdue doesn't stars every without days. Forth herb female bring whose from of wherein. From. Lights whose. Meat bring bearing yielding also his. Day she'd Stars saying him it, had.</p>

Link to—but do not download—these images:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab15 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *