Let’s shake things up a bit today. When game developers get together to build a game in a very short amount of time, they call that a game jam. We will have a web jam. I want to devote all of today’s lab time to that, so I won’t be doing any talking.
Here’s your TODO list:
See you next time!
Today we will have a “web jam.” Instead of giving you a particular page to try and recreate, you and your partner choose a theme, and make a page that fits the theme in some way.
We do impose one learning goal, inspired by some of your questions. Many sites these days start off with images that entirely fill the viewport. As the viewer scrolls, the image appears to stick, either scrolling more slowly than the content below or not scrolling at all. For example, scroll over the web page for musician Nils Frahm.
Follow these steps:
partners.htmland include your first names and last initials.
index.htmland CSS in
divas the very first element of
bodyto hold your first full-viewport image. But don’t use an
imgelement; we’ll use the
background-imageproperty of the
divin a moment. Instead, make the
diva member of the
fullclass. Give it a unique
full. Size the
divso that it fills the viewport. For units, we’ve seen
pt. There’s also
vh, which are percentages of the viewport’s width and height, respectively. To make an element span 25% of the viewport, we’d set its width to
id. Set its background image. The image should fill the screen, but scroll up as the other content shoves it offscreen. Confirm this.
fullto tweak the image’s properties. Set the background’s size to
coverso that it fills the
divcompletely. Adjust the position so that its centered. Adjust
fixedso that the image doesn’t move when its scrolled. Confirm that the image “sticks” as the content scrolls over it.
divs in class
fulland with unique
ids and background images.
Commit and push your work. Verify that all pages have been uploaded by visiting
https://USERNAME.github.io/cs318/lab14 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.