art3870 : Schedule

week/session

subject

homework due

assignment due

week one
c 1
m
3/27/2017

introductions
review of html5
review of how to code a page in html5
review of css and linked stylesheet
review of css normalize
handcode of basic html5 layout with zurb foundation 5
http://foundation.zurb.com/

get this book JavaScript and JQuery: Interactive Front-End Web Development
review codeacademy
web fundamentals as needed http://www.codecademy.com/ On your CSUEB Google Drive account, share folder "3870_yourlastname-firstname' with me.

c 2
w
3/29

semantic tags
basic html5 layout
css review, selectors, foundation rows and grids
review of how to code a page in html5
review of css and linked stylesheet
review of css normalize
handcode a basic html5 layout with zurb foundation
http://foundation.zurb.com/
@font-face

READ in the JAVASCRIPT BOOK
(desk reference in the library)
chapter 1 - abc of programming
chapter 2 - basic js instructions

week two
c 3
m
4/3

More on Atom
FileZilla & SFTP to ADA accounts
jsbin
intro Lab 1 - wufoo forms
review form controls
JS - more on date

DUE LAB 0 in class
READ in the JAVASCRIPT BOOK
(desk reference in the library)
chapter 1 - abc of programming
chapter 2 - basic js instructions

c 4
w
4/5

JS - ch 1 & 2 intro to concepts / pseudo code FTP= Filezilla
REVIEW of FORMS - CH 7 (HTML & CSS)

CodeAcademy Javascript 1 & 2
Complete: Code Your Own Adventure!

week three
c 5
m
4/10

Intro to Project 1 Website Redesign group project
intro to wireframing tools with lucidchart
Project Management with Trello

DUE Lab 1 - first draft

c 6
w
4/12

Pitching Project 1 ideas
Forming Teams
Sketching, wireframing and styletiles
working in class

READ in the JAVASCRIPT BOOK
Chapter 3
Codecademy: JS Unit 2 Functions

DUE Lab 1

week four
c 7
m
4/17

Intro Lab 2
READ and DISCUSS Chapter 3 - Objects, Functions, DOM
Creating Arrays and using the date object to change css, images and content
Tricks to Improve and Speed up the Web Design Process

READ in the JAVASCRIPT BOOK
Chapter 4


DUE Project 1:
1.1 sketches & change list and 1.2 content inventory

c 8
w
4/19

CHAPTER 4 - DECISIONS AND LOOPS
Responsive Images in Zurb Foundation
jQuery very light

Codecademy: JS 3 & 4 Loops

week five
c 9
m
4/24

Working on Lab 2 and Project 1 in class
mood boards
card sorting for navigation
OTHER TIPS: READ:
Style tiles and how they work
Overview and Guide to Card Sorting
http://alistapart.com/article/surveying-the-big-screen
http://zurb.com/word/mobile-first
http://styletil.es/

WATCH: INTERACTIVE RAPID PROTOTYPING USING LUCID CHART
Codecademy: JS 5 Control Flow


DUE Project 1:
1.3 wireframes and 1.4 style tiles

c 10
w
4/26

JQUERY
jQuery
jQuery Fundamentals
jQuery selectors
jQuery events
jQuery examples
owl carousel
backstretch
work in class on Project 1

hack your design skills
Codecademy: JS 6 Data Structures & jQuery 1


DUE Lab 2

week six
c 11
m
5/1

User Testing
sign up for a community plan at usability hub (free) and take 5 x 5 second tests
as a group conduct a usability plan with 2 other groups in the room
awesome screenshot
chopapp.com
clueapp.com
reelapp.com
bounceapp.com
usabilityhub.com
wave.webaim.org

watch the following three clips - before class
10 Usability Heuristics
Example Usability Test with a Paper Prototype
Rocket Surgery Made Easy by Steve Krug: Usability Demo
Codecademy: JS 7 & 8 Objects & jQuery 2

DUE Project 1: uploaded to the ADA server before class - 90% complete and ready for USER TESTING

c 12
w
5/3

Project 1 presentation PechKucha Style 20 slides @ 20 seconds each slide
timed google slides - hack the code for 20 second timing
embedded in a separate page at root level, uploaded to ADA
COMPLETE THIS FORM

READ: Chapter 5

DUE Project 1 - responsive redesign

week seven
c 13
m
5/8

CHAPTER 5 - DOM
Intro Lab 3
CSS animation
text animation
Sprite animation with steps:
cssdeck.com/labs/css-image-sprite-animations-with-steps-function
jsbin.com/giwufi
Attaching a CSS animation to an element:
css-tricks.com/controlling-css-animations-transitions-javascript/
Steps and Timing Function:
smashingmagazine.com-understanding-css-timing-functions/
css-tricks.com/restart-css-animation
designmodo.com/steps-css-animations
Paper Prototyping:
alistapart.com/article/paperprototyping
UX prototyping tutorial: Paper prototyping techniques

Codecademy: jQuery 3 & 4

c 14
w
5/10

Demo JS Audio Library
Buzz.js
chiptone sound creator
Bfxr
as3sfxr
Five HTML5 audio libraries
animation, transitions & tranformations
example
work in class on Lab 3

Codecademy: jQuery 5

week eight
c 15
m
5/15

Intro Project 2
review positioning static, relative, absolute and fixed
top, left, right, bottom, z-index
http://www.barelyfitz.com/screencast/html-training/css/positioning/
positioning sandbox

new demo of scrolling events

c 16
w
5/17

SCROLLTOP()
SCROLLLEFT()
codrops
http://codepen.io/
https://www.chromeexperiments.com/
random number out of an array

READ in the JAVASCRIPT BOOK:
Chapters 6- Events & 7- jQuery

animation play state 1
animation play state 2
CSS shapes

DUE Lab 3

week nine
c 17
m
5/22

CHAPTER 6 - EVENTS
jQuery events
event listeners
dom events
work time -- Project 2

DUE Project 2:
sketches of layout of whole page
assets
storyboard (minimum of 3 frames)

c 18
w
5/24

Creating and using SVG images
using Illustrator to create SVG images
css tricks - using svg
SVG: benefits & basics
work time -- Project 2

DUE -
WORKING animated wireframe - moving grey boxes
with JS pixel counter

week ten
c 19
m
5/29

Memorial Day Holiday - no class

c 20
w
5/31

User Testing

90-100% completed site for peer review. Refine after review

DUE site ready for Peer Review

final
w
6/7


FINALs - Class party and Project 2 presentation
Ignite Style 20 slides x 15 seconds
= 5 minutes
Ignite Show
Wikipedia Ignite
How to Give a Great Ignite Talk

PechaKucha style presentations with screenshots of final site, description of idea, and discussion of leaning relatied to javascript and css.
(“it was hard and i made it” - is not a desciption of learning)

DUE scrolling site
DUE any missing work