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.
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
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
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!
Intro to Project 1 Website Redesign group project
intro to wireframing tools with lucidchart
Project Management with Trello
DUE Lab 1 - first draft
Pitching Project 1 ideas
Forming TeamsSketching, wireframing and styletilesworking in class
READ in the JAVASCRIPT BOOK
Chapter 3
Codecademy: JS Unit 2 Functions
DUE Lab 1
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
CHAPTER 4 - DECISIONS AND LOOPS
Responsive Images in Zurb Foundation
jQuery very light
Codecademy: JS 3 & 4 Loops
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
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
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
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
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
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
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
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
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)
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
Memorial Day Holiday - no class
User Testing
90-100% completed site for peer review. Refine after review
DUE site ready for Peer Review
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