This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Preps

This class is flipped, it’s vital that you prepare for the in-class activities by completing these preparations.

1 -

Array Champion 3000

Psst: have a look at the JavaScript Console 💁

2 - Prep 01: 1.3, 2

Section 1.3 - The Client-Server Model
Chapter 2 - How the Web Works

Read FunWebDev Chapter 1.3 and Chapter 2, then take the quiz in Canvas.

3 - Prep 02: 3.2, 3.4, and 3.5 & 8.2-8.5

3.2 - HTML Syntax
3.4 - Structure of HTML Documents
3.5 - Quick Tour of HTML Elements
8.2 - Where Does JavaScript Go?
8.3 - Variables and Data Types
8.4 - Conditionals
8.5 - Loops

Read

  1. FunWebDev Chapter 3.2, 3.4, and 3.5.
  2. FunWebDev Chapter 8.2-8.5.

Simple Single Page

  1. Download the textbook cover images at the following links (Notice when you hover over the links that your browser’s status bar shows the address as an image file. In cases like this, consider right-clicking and choosing the appropriate option, e.g. Save Link as....)
  2. Use it to complete Hands-On Project 1 from the textbook’s page 117.
  3. Submit your ch03-proj01.html to the corresponding Gradescope assignment.

CodingBatJS

  1. Download codingjs-1.js
  2. Complete the following CodingJS activities (we recommend you do NOT do this in a Private tab):
    1. Warmup-1 – sleepIn
    2. Warmup-1 – monkeyTrouble
    3. Warmup-1 – sumDouble
    4. Warmup-1 – frontBack
    5. Warmup-1 – intMax
  3. Paste each of your solutions from the above into the corresponding places in codingjs-1.js and submit this file to the corresponding Gradescope assignment.

4 - Prep 03: 3.3, 3.6, and 5.1 & 8.6-8.7-8.8.1

3.3 - Semantic Markup
3.6 - HTML5 Semantic Structure Elements
5.1 - HTML Tables
5.3 - Introducing Forms
5.4 - Form Control Elements
5.5 - Table and Form Accessibility
8.6 - Arrays
8.7 - Objects
8.8 - Functions
8.8.1 - Function Declarations vs. Function Expressions

Read

  1. FunWebDev Chapter 3.3, 3.6, and 5.1 (skip chapter 4).
  2. FunWebDev Chapter 8.6-8.7 and 8.8.1.

Semantic Elements

  1. Download and extract the zip file containing the starter files
  2. Your goal is to complete Project 2 in Chapter 3 (pg. 118)
  3. Follow the instructions to replace the <div> and <p> tags with semantic tags according to this figure.
    1. You will also need to move and add tags as needed, such as with the <figure> element and the copyright statement.
  4. Submit only the ch03-proj02.html file to the corresponding Gradescope assignment.