SCC 219 - Introduction to WEB Development
Schedule
Course Introduction
March 14
Introduction
Module 1: HTTP Protocol
March 18
Test 1
Video Lesson: HTTP Protocol 1
March 21
Test 2
Video Lesson: HTTP Protocol 2
Original Lesson: HTTP Protocol 2 (2021-08)
Module 2: HTML
March 25
Hands-on: HTML5 (Lessons 1-11)
March 29
Hands-on: HTML5 (Lessons 15-25)
April 1
Test 3
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
April 4
Video Lesson (Extra): Introduction to CSS 3.
Hands-on: CSS3 (Lessons 1-15)
April 8
Hands-on: CSS3 (Lessons 15-30)
April 11 - 15
Holiday Easter Break
Module 4: JavaScript (ECMA6+)
April 18
Test 4
Video Lesson: Wat / JavaScript & TypeScript
Hands-on: JavaScript Course (Lessons 1 - 6 & 20 - 31)
April 21-22
Holiday Tiradentes
April 25
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
April 29
Hands-on: JavaScript Course (Lessons 7 - 19)
Group Assignment: Milestone 1 Presentations
May 2
Groups will present their work
May 6
Groups will present their work
Module 5: DOM & Events (continuation)
May 9
Test 5
Video Lesson: Javascript - DOM (Just the DOM part)
May 13
Video Lesson: JavaScript - Events
May 16
Test 6
Exercise 8 (2nd day)
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
May 20
Test 7
Video Lesson: AJAX Calls
May 23
Test 8
Video Lesson: Promises & Async/Await
Exercise 9 (2nd day)
Slides:
Video Lessons (Extra):
Reading Material: AJAX W3School Tutorial
Nonmandatory:
Interview Questions: AJAX
Module 7: React or Vue
Use React or Vue materials
May 27
Video Lesson: Angular vs React vs Vue
May 30
Hands-on: React Functional (with Hooks)
Hands-on: Vue (Lessons 1 - 27)
June 3
Exercise 10 (2nd day)
June 6
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
June 10
Video Lesson: Node.js Intro
June 13
Test 9
Hands-on: Web Application in Node.js: CRUD
Based on the Node.js Course (Lessons 1 - 12)
June 16-17
Holiday Corpus Christ
June 20
Hands-on: Web Application in Node.js: MongoDB
Based on the Node.js Course (Lessons 13 - 22)
Exercise 12 (2nd day)
June 24
Hands-on: Web Application in Node.js: Vue.js Client (Lessons 1- 11)
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:
Group Assignment: Milestone 2 Presentations
June 27
Groups will present their work
July 1
Groups will present their work
Module 9: NoSQL Databases
July 4
Test 10
Video Lesson: NoSQL
Video presented in the lesson: NoSQL Introduction
Group Discussion 3
July 8
Questions about the group assignment
July 11
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
July 15
Final Presentations
July 18
Final Presentations
July 22
Final Test