1. Web Programming Anselm Spoerri PhD (MIT) SC&I @ Rutgers University
Info + Web Tech Course
Web Programming
Anselm Spoerri PhD (MIT)
Rutgers University

2. Survey + Introductions Prerequisites
Lecture 1 - Overview
Course Overview
Learning Goals | Assignments (Exercises | Project | Quizzes | Discussions)
Course Website
Lectures | Schedule | Requirements | Exercises
Sakai
Syllabus | Links to Course Website
Submit Assignments | Forums (Q&A, Discussions) | Wiki (Exercises, Project URLs)
In-Person Class
Review Key Concepts & Steps | Q&A | Lab
Survey + Introductions
Prerequisites
HTML | CSS | JavaScript | Programming Principles
What to Do BEFORE Next Class
View Video Demos | Install | Practice Coding

3. Learning Goals
Learn to Code using Key Web Programming Concepts, Structures and Processes
Understand what constitutes Full Stack development and its related front- and back-end concepts and tools.
Develop code using JavaScript and ECMAScript 6 that makes advanced use of functions, loops, event control, array processing and DOM manipulation.
Create templates, modules and components using front- end frameworks.
Use code editors and workflow tools to effectively develop and debug code.
Employ version control systems, such as Git, to manage source code changes and use and share code on repository hosting services, such as GitHub.

4. Know how to Use Key Code Libraries and Front- and Back-End Frameworks
Learning Goals
Know how to Use Key Code Libraries and Front- and Back-End Frameworks
Create responsive page layouts using front-end frameworks, such as Bootstrap.js and its grid system and components.
Become familiar with Model View Controller (MVC) design-patterns, two-way data binding and how to create templates, modules and services.
Implement single page application using front-end frameworks, such as React.js or Angular.js.
Design single page application using a back-end framework, such as Node.js, to exchange data with a database.

5. Connect to Databases and Data Sources
Learning Goals
Connect to Databases and Data Sources
Implement NoSQL database, such as MongoDB, that works within a back-end framework, such as Node.js.
Learn to Use Online Documentation, Forums and Code created by Others
Debug code by using online documentation and forums.
Interact with other developers online to troubleshoot code and interact with local developers by joining a MeetUp.

6. Individual Exercises (65% of Course Grade)
Exercise 1: HTML, CSS and JavaScript Basics – Style Web Page using CSS and Add Interactivity using JavaScript (7.5%) Due Week 3 | Rev Week 6 Exercise 2: JavaScript Essentials – Control Appearance and Interactivity of Web Page using JavaScript (12.5%) Due Week 5 | Rev Week 8 Exercise 3: Responsive Design using Front-End Framework – Create Responsive Web Page using Bootstrap.js (15%) Due Week 7 | Rev Week 10 Exercise 4: Design of Modular, Reusable User Interface Components using Front-End Framework – Create Web Page Components using React.js (15%) Due Week 9 | Rev Week 12 Exercise 5: Design Single Page Application using Back- End Framework to Exchange Data – Create Single Page Application using JSON, Angular.js, Node.js and Express.js (15%) Due Week 12 | Rev Week 15

7. Term Project and Discussions & Quizzes
Term Project: MEAN Stack Development – Create Web Application using Angular.js, Node.js and Expess.js to Connect to MongoDB Database (20%) Due Week 15 Discussions (7.5%) Week 11 | Week 14 Quizzes (7.5%) – Open Book – 5 best scores and bonus question Week 2 | Week 4 | Week 6 | Week 8 | Week 11 | Week 14 A B+ B C+ C

8. Gameplan
Course Website
Schedule
Lectures
Video Demos | Resources | Handout
LyndaCampus Videos: Login | Transcript | Offline Viewing
Requirements
Exercises
May change content of exercises and their respective course grade percentage

9. Sakai In-Person Class Survey Gameplan
Syllabus | Links to Course Website
Submit Assignments (Exercises | Project | Quizzes | Discussions)
Forums: Q&A and Discussions
Wiki: (Exercises and Project URLs)
In-Person Class
Review Key Concepts and Steps in assigned videos
Q&A
Lab
Survey

10. Anselm Spoerri Your Guide Computer Vision Filmmaker – IMAGO
Information Visualization – InfoCrystal  searchCrystal
Media Sharing – Souvenir
DataVis Material Properties
Rutgers Website

11. HTML Prerequisites Quiz
W3Schools:
examples
elements
links
blocks
lists
layout
html5_new_elements
html5_semantic_elements
Tags-reference
Quiz

12. CSS Prerequisites Quiz
W3Schools:
examples
syntax
howto
boxmodel
positioning
float
navbar
cssref
Quiz

13. JavaScript Prerequisites
W3Schools:
examples
whereto
syntax
statements
variables
assignment
datatypes
functions
objects
scope
events
arrays
array_methods
if_else
loop_for
errors
debugging
best_practices
mistakes
Quiz

14. To Do for Before Next Class
View Video Demos (highlighted in green on Lectures page)
Prerequisites: Video Demos in Week 1
Workflow Tools for Web Development
Learn Atom: The Basics
Up and Running with Git and GitHub
Install
Atom Code Editor
Git Version Control
Practice Coding
HTML & CSS
JavaScript (use W3School resources and video demos in Week 1)