Schedule

Itinerary

Time Activity
8:30–11:50 a.m. Take attendance
Quiz (if on a Friday)
Class lecture
12–12:50 p.m. Lunch at Sargent Residence Hall
1–2:45 p.m. Review previous assignment
Start new assignment, time permitting

Tuesday and Thursday night study sessions are in same location.

Week 1

Date Topic Activity Material Assignment
Monday First webpage
Tuesday HTML elements
Wednesday CSS selectors
  • Read “Getting to know CSS
  • Create a webpage with a linked CSS file. Webpage must contain different elements (of your choosing) with the following: 1 class, 2 classes, 3 classes, 1 ID. Use 10 different elements. Apply different CSS colors and font sizes to the elements of your choosing. Color examples must include named colors, hex values, and RGB values. Font size examples must include units of px, em, and %. Include 15 special characters.
  • Email .zip file of homework in proper format
Thursday Box model
  • Read “Opening the Box Model” and “Setting Backgrounds & Gradients
  • Create a webpage with a linked stylesheet. Webpage must have: 1 example of a solid background color, 1 example of a background image, 1 example of a linear gradient with two background colors, 1 example of a radial gradient with two background colors, and 1 example of a radial gradient background of the visible light spectrum
  • Email .zip file of homework in proper format
  • Study for quiz
Friday Typography
  • Read “Working with Typography
  • Re-create this image of a webpage in HTML and CSS. Use this photo and this Wikipedia link. Use these hints:

    • Include a custom web font from Google with a <link> tag and h1 { font-family: PlayFair Display, serif; }
    • Change the paragraph font to Georgia with p { font-family: Georgia, serif; }
    • Float an image with img { float: left; }
    • The top color of the background gradient is #1AD6FD
    • Center a block-level element by setting a valid width and declaring margin-left: auto; and margin-right: auto;

    Note: Redisplaying the assignment image will result in a score of 0.

  • Email .zip file of homework in proper format

Week 2

Date Topic Activity Material Assignment
Monday Media
  • Review assignment
  • Images, Audio, Video, Frames
  • Read “Adding Media
  • Create an HTML5 webpage for the U.S. Declaration of Independence. Include an appropriate <h1> and the text of the declaration in proper HTML. Also include an image of the declaration, MP3 audio of the declaration being read, video of the American flag, and an <iframe> Google Map of where the declaration is. Create a section where I can e-mail the president. Create a visually compelling, easy-to-read design with a linked stylesheet.
  • Email .zip file of homework in proper format
Tuesday Layout
  • Read “Positioning Content
  • Re-create this image in HTML and CSS. Do not use images. Recall today's lesson about rows, columns, percentages, and clearfix. Simply redisplaying the assignment image itself in a webpage will result in a score of zero.
  • Email .zip file of homework in proper format
Wednesday Tables
  • Review assignment
  • Structure, borders, striping, alignment
  • Day 8 CodePen lecture notes: note 1 and note 2
Thursday Forms
  • Read “Building Forms
  • Create a webpage with an order form for a pizza. Webpage must include: <h1> with “(insert your name)'s Pizza Place,” 3 different pizza sizes (small pizza, medium pizza, large pizza) to order, a different image of each pizza size (use Google Images), 5 different topping choices, an input for a phone number, an input for an email address, and a submit button with a hover state and text that says “Order my pizza.” Should include appropriate labels. A “thank you” page should appear when clicking the submit button. Webpage should be styled appropriately.
  • Study for quiz
Friday Responsive web design
  • Read “Responsive Web Design” chapter
  • Create a responsive webpage with a linked stylesheet that is styled differently for a mobile device (max-width: 320px), a tablet (min-width: 321px) and (max-width: 1024px), and a laptop (min-width: 1025px). For content, find a Wikipedia page that you think is interesting. Include a large portion of the text. Add two different related media types of your choice (<img>, <audio>, <video>) that are flexible. For tablets and desktops, float the text and the media. For mobile, stack the text and the media. Include a new tag in <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.

Week 3

Date Topic Activity Material Assignment
Monday Transforms
Tuesday Transitions
  • Create ten squares of the same size with ten different colors. Three colors should be hex, three colors should be RGB, and four colors should be gradients using hex or RGB. Apply each effect to a different square, specifically:

    • Rotate a square 89deg and scale it by 1.7.
    • Translate a square -15px horizontally and 5% vertically.
    • Add a perspective of 200px, skew a square 10deg vertically, rotate 45deg along X axis, and change transform origin to bottom right.
    • Add a perspective of 148px, and rotate a square along the Y axis by 64deg.
    • Add a perspective of 204px, rotate a square on the X axis by 23deg, scale by 1.64, and scale on the Z axis by 1.99.
    • Add the word “square” to a box and flip the text as if it were to appear in a mirror.
    • Create a transition that changes the background color to #aaa over .5s with a linear transition
    • Create a transition that changes the background color to #57890a over .5s with a linear timing function, the border radius to 50% over 1.3s with an ease-in-out timing function
    • Create an animation on a stage that moves the square in a square path that is a 200px wide and 200px high, changes the square to a circle and fades to #678fa3 halfway through, then changes the circle back to a square at the end and fades back to original color, all with an ease-in timing function
    • Create an animation on a stage that moves the square from the left edge of the browser to the right edge of the browser, over 1s, with an ease-out timing function, that rotates 720deg on the right and back to 0deg on the left, and includes a pause with an :active pseudo-class.
  • Work on final project
Wednesday Frameworks
  • Review assignment
  • Bootstrap framework
Thursday JavaScript
  • Review assignment
  • JavaScript introduction
Friday
  • Animations & Interaction
  • Final projects
  • Post-assessment quiz
  • Student surveys
  • Present final projects
  • Have a great summer 😎