SCC 219 - Introduction to WEB Development
Schedule
Module 1: HTTP Protocol
August 18
Live Video Lesson: HTTP Protocol 1
August 23
Live Video Lesson: HTTP Protocol 2
Meeting
Module 2: HTML
August 25
Live Video Lesson: História da Internet / HTML Origins
August 30
Hands-on: HTML5 (Lessons 1-11)
September 1
Hands-on: HTML5 (Lessons 15-25)
Slides: HTML Origins
Video Lesson (Extra):
Curso de HTML5: 02 - História da HTML
Reading Material: HTML5 Tutorial
Nonmandatory:
Module 3: CSS
September 8
Live Video Lesson: Introduction to CSS 3.
Live class
Hands-on: CSS3 (Lessons 1-8)
September 13
Hands-on: CSS3 (Lessons 9-22)
Module 4: JavaScript (ECMA6+)
September 15
Live Video Lesson: Wat / JavaScript & TypeScript
CSS 3 questions
September 20
Live Video Lesson: JavaScript Basics
Hands-on: JavaScript Course (Lessons 1 - 10)
September 22
Live Video Lesson: Group Assignment
Hands-on: JavaScript Course (Lessons 11 - 20)
SemComp 2021
October 4
Live Video Lessons:
Functional Programming
Hands-on: JavaScript Course (Lessons 21 - 31)
Slides:
Video (Extra): Wat (Ruby & JavaScript)
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 6
Live Video Lesson: Javascript - DOM
October 11
Holiday Nossa Senhora Aparecida
October 13
Live Video Lesson: JavaScript - Events
October 18
Questions about the First Review (Milestone 1)
Exercise 5 questions (try to make the exercise during the class)
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 20
Live Video Lesson: AJAX Calls
October 25
Live Video Lesson: Promises & Async/Await
Slides:
Video Lessons (Extra):
Reading Material: AJAX W3School Tutorial
Nonmandatory:
Interview Questions: AJAX
Module 7: Vue.js
October 27
Live Video Lesson: Angular vs React vs Vue
November 1 - 3
Holidays: Todos os santos e Aniversário de São Carlos
November 8
Hands-on: Vue.js (Lessons 1 - 11)
November 10
Hands-on: Vue.js (Lessons 12 - 23)
Slides: Angular vs React vs Vue
Video Course (Extra):
Vue.js (Lessons 24 - 27)
More about Vue Routes.
Vue CLI (Lessons 28 - 29)
Vue CLI is a command line tool to generate Vue applications from oficial templates (including Webpack integration, etc.). There is no need to know Vue CLI to program in Vue, but it does help.
Projeto GitHub Issues (Lessons 30 - 38)
GitHub Issues is a simple project that shows the basic structure of a Vue application. The final application shows the issue list of a Github project given the names of an user and one of his projects (it uses Vue CLI).
Vídeo Lesson (Alternative): Vue.js
In section 00, it show interesting VS Code extensions for Vue. It is recommend 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 15
Holiday: Proclamação da República
November 17
November 22
Hands-on: React Application
November 24
Live Hands-on: Web Application in Node.js: CRUD
Based on the Node.js Course (Lessons 1 - 12)
November 29
Live Hands-on: Web Application in Node.js: MongoDB
Based on the Node.js Course (Lessons 13 - 22)
December 6
Live Hands-on: Web Application in Node.js: Vue.js Client + Node.js Backend
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: Lesson 1 teaches how to set up node, npm, and VS code. You may skip it.
Tip: In lesson 25, the code from lesson 24 is rewritten using Async/Await. If you already know Promises, you may skip lesson 24.
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 1
Live Video Lesson: NoSQL
Video presented in the lesson: NoSQL Introduction
December 8
Live Video Lesson: MongoDB
Video presented in the lesson: Introdução ao MongoDB I (18:00)
CouchDB Lesson (Extra)
Slides:
Video Lesson (Extra):
NoSQL (Semestre Passado)
MongoDB (Semestre Passado)
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 13
Questions about the group assignment problems
December 15
Questions about the group assignment reviews
December 20
Presentations