SCC 219 - Introduction to WEB Development
Schedule
General
Group Assignment
Video: Group Assignment
Course Introduction
August 17
Introduction
Module 1: HTTP Protocol
August 22
Face-to-face class
Recording : HTTP Protocol 1
August 24
Face-to-face class
Recording : HTTP Protocol 2
Module 2: HTML
August 29 - 31
Hands-on: HTML5 (Lessons 1-11 and 15-25)
In-class Exercise 2
September 5 - 9
Holiday Brazilian Independence Break
September 12
Quiz 1
Video Lessons: Internet History / HTML Origins
Slides: HTML Origins
Video Lesson (Extra):
Curso de HTML5: 02 - História da HTML
Reading Material: HTML5 Tutorial
Nonmandatory:
Module 3: CSS
September 19 - 21
Video Lesson (Extra): Introduction to CSS 3.
Hands-on: CSS3 (Lessons 1-30)
September 26 - 28
Computing Week
Module 4: JavaScript (ECMA6+)
October 3
Quiz 2
Video Lesson: Wat / JavaScript & TypeScript
Hands-on: JavaScript Course (Lessons 1 - 6 & 20 - 31)
October 5
Hands-on: JavaScript vs Java Basics
Slides:
Videos (Extra):
Video Lesson: Functional Programming (16:57 minutes)
Reading Material Tutorials:
The Modern JavaScript Tutorial - Easy consulting tool for using during programming
Nonmandatory:
JavaScript Quiz
JavaScript Hands-on Exercises
JavaScript Job Interview Questions
Module 5: DOM & Events
October 10
Hands-on: JavaScript Course (Lessons 7 - 19)
October 12
Holiday Padroeira do Brasil
Group Assignment: Milestone 1 Presentations
October 17
Groups will present their work
Module 5: DOM & Events (Continuation)
October 19
Quiz 3
Video Lesson: Javascript - DOM (Just the DOM part)
October 24
Quiz 4
Video Lesson: JavaScript - Events
Slides: DOM-Events
Video (Extra): Capture & Bubbling (7 min)
Video Lessons (Extra): DOM and DOM Events:
This Javascript course has many topics with longer individual lessons (more than 20 minutes). You should watch lessons 09 and 10. They cover DOM and DOM events.
Reading Material:
Nonmandatory:
JavaScript Quiz
JavaScript Hands-on Exercises
Interview Questions: Basic DOM and Events
Module 6: AJAX Calls
October 26
Quiz 5
Video Lesson: AJAX Calls
October 31
Video Lesson: Promises & Async/Await
Exercise 8 (2nd day)
November 2
Holiday All Saints Day
Slides:
Video Lessons (Extra):
Reading Material: AJAX W3School Tutorial
Nonmandatory:
Interview Questions: AJAX
Module 7: React or Vue
Use React or Vue materials
November 7
Quiz 6 (Sobre o vídeo Promises & Async/Await)
Choose React OR Vue
Hands-on: React Functional (with Hooks)
Hands-on: Vue (Lessons 1 - 27)
November 9
Exercise 9 (2nd day)
November 14
Holiday Republic Creation
November 16
Video Lesson: Angular vs React vs Vue
November 21
Group Discussion 2 - Presentations
Slides: Angular vs React vs Vue
React Material
Tutorial: React Fullstack - Intro to React
Exercise: FreeCodeCamp - React
Vue Material
Video Course (Extra):
Vue CLI (Lessons 28 - 29)
Vue CLI is a command-line tool to generate Vue applications from official templates (including Webpack integration, etc.).
Projeto GitHub Issues (Lessons 30 - 38)
GitHub Issues is a simple project that shows the issue list of a Github project given the name of a user and one of his projects.
Vídeo Lesson (Alternative): Vue.js
Section 00 shows interesting VS Code extensions for Vue. It is recommended that you watch up to section 19.
Reading Material:
Vue.js Guide Tutorial
Vue.js Cookbook Tutorial
Nonmandatory:
Interview Questions: Vue.js
Module 8: Node.js/ExpressJS
November 23
Quiz 7
Video Lesson: Node.js Intro
Group Assignment: Milestone 2 Presentations
November 28
Groups will present their work
Module 8: Node.js/ExpressJS (continuation)
November 30
Hands-on: Web Application in Node.js: CRUD
Based on the Node.js Course (Lessons 1 - 12)
December 5
Hands-on: Web Application in Node.js: MongoDB
Based on the Node.js Course (Lessons 13 - 22)
Hands-on (Extra): Web Application in Node.js: Vue.js Client
Exercise 11 (2nd Day) and Exercise 12
December 7
No class - C4AI meeting in Piracicaba
Slides: Node.js Intro
Video Lesson (Extra):
Node.js Course (total duration 4:39:00)
This video course teaches how to create the server-side of a Web Application using MongoDB. It teaches everything you need to know to write the server-side of the Group Assignment.
Note: This course uses online resources that have changed over time! Read the corrections in the Errata (from Lesson 13)! If you find other undocumented problems, please report them to us.
Tip: Lessons 30 - 40 teach functionalities not needed to implement the Group Assignment server. However, they are important when implementing real Web Applications. Specially:
Lesson 30: Configuration file
Lesson 31: Password Encryption
Lesson 37: Authorisation
Video Lessons (Extra): Blog Tool Project in Node.js
This course covers Node.js focusing on the creation of applications using traditional HTML pages (not SPAs).
Basic Node.js: (1 - 10) duration 1:38:00
MySQL: (11 - 26) duration 2:15:00
MongoDB: (27 - 30)
Practical project using Express: (31 - 63)
Reading Material:
Node.js Tutorial
Node.js tutorial in VS Code Tutorial
Nonmandatory:
Job Interview Questions:
Module 9: NoSQL Databases
December 12
Quiz 8
Video Lesson: NoSQL
Video presented in the lesson: NoSQL Introduction
Group Discussion 3
December 14
Group Discussion 3 - Presentations
Video Lesson (Extra): MongoDB
Video presented in the lesson: Introdução ao MongoDB I (18:00)
CouchDB Lesson (Extra)
Slides:
Video Lesson (Extra):
The 3 videos shown in the NoSQL Introduction video:
NoSQL, CAP Theorem e BASE (49:00)
Teorema CAP Explicado! (7:00)
Banco de Dados NoSQL (6:00)
Videos About MongoDB
Video presented in the lesson: Introdução ao MongoDB I (18:00)
Introdução ao MongoDB II - Importando e Consultando Documentos (18:00)
Introdução ao MongoDB III - Modelagm de Banco de Dados Não Relacionais (16:00)
Module 10: IndexDB/Workers (Extra)
Video Lesson: Service Worker (13:00)
Service Workers can transform a SPA application in a desktop/mobile application that is, in many aspects, better than a native application.
Video Lesson: IndexedDB (43:00)
Group Assignment
December 19
Final Presentations
December 21
Final Test