Class Activities

  • Roll call
  • Review Homework

Background images, Layout

.hero {
  background-image: url('images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
.centered {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  • Centering inline elements
    • Simply add text-align: center; to the parent container
.wrapper {
  text-align: center;

Embeddables and tables

  • Add a YouTube video
  • Add a searchbox

<form class="search-form" action="">
<label>Search Google</label>
<input id="searchString" name="q" type="text" placeholder="Search">
<button type="submit" value="Search">
Search </button>

  • Tables
  • Prepare for Presentation #1 next week
    • Clean up sites
    • Walk through each page
  • Pick Tutorial topic


Due next week Assignment 6: Hero, embeddables and transitions

Due next week Pick a Tutorial Topic