Web Programming Course: Learn Full Stack Development and Web Programming Concepts

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

2. Lecture 1 - Overview • Course Overview • Learning Goals | Assignments (Exercises | Project | Quizzes | Discussions) • Course Website • Lectures | Schedule | Requirements | Exercises • Canvas • Syllabus | Links to Course Website • Submit Assignments | Discussions (Q&A, Graded Discussions) • “In-Person” Online Class on Tuesdays 3pm-6pm • Key Concepts & Steps | Q&A | Lab | Attendance encouraged, not required • Survey + Q&A • 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. 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. Learning Goals • Connect to Databases and Data Sources • Implement (No)SQL database, i.e. MongoDB or MySQL, 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  (15%)Due Week 5 | Rev Week 8 • Exercise 3: Responsive Design using Front-End Framework– Create Responsive Web Page using Bootstrap.js (12.5%)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 Express.js to Connect to (No)SQL Database (20%)Due Week 15 • Discussions (7.5%)Week 11 | Week 14 • Quizzes (7.5%)– Open Book – 5 best scoresWeek 2 | Week 4 | Week 6 | Week 8 | Week 11 | Week 14

8. Gameplan • Course Website • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/Home.html • Schedule • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/Schedule.html • Lectures http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/Lectures.html • Video Demos | Resources | Handout • LyndaCampus Videos: Login | Transcript | Offline Viewing • Requirements • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/Requirements.html • Exercises • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebProg/Exercises.html • May change content of exercises and their respective course grade percentage

9. Gameplan • Canvas • Syllabus | Links to Course Website • Submit Assignments (Exercises | Project | Quizzes | Discussions) • Discussions: Q&A and Graded Discussions • “In-Person” Online Class on Tuesdays 3-6pm • Review Key Concepts and Steps in assigned videos • Q&A • Lab • Survey https://www.surveymonkey.com/r/KD82PL3

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

11. Prerequisites • HTML • W3Schools: http://www.w3schools.com/html/default.asp • examples • elements • links • blocks • lists • layout • html5_new_elements • html5_semantic_elements • Tags-reference • Quiz

12. Prerequisites • CSS • W3Schools: http://www.w3schools.com/css/default.asp • examples • syntax • howto • boxmodel • positioning • float • navbar • cssref • Quiz

13. Prerequisites • JavaScript • W3Schools: http://www.w3schools.com/js/default.asp 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)