Aulas

Aula 00: Apresentação

• Leitura obrigatória:
  • Descrição do Curso
  • Começando na Web
• Slides: Apresentação
• Atividades: Atividade inicial

Aula 01: Introdução a Web

• Podcast
  • #1 - Surgimento da Internet e da Web
• Leituras obrigatória:
  • História da Web
  • Como a Internet Funciona?
• Vídeos
  • Videoaula
  • A História da Internet
  • A história da Internet no Brasil
• Slides: Introdução a Web
• Atividades: Questionário online

Aula 02: Introdução à HTML

• Leituras obrigatórias:
  • Desenhando uma página Web
  • Programas básicos
  • Lidando com arquivos
  • HTML básico
• Vídeos:
  • Videoaula (Parte 1)
  • Videoaula (Parte 2)
• Slides: Introdução a HTML
• Podcast: #2 - O que é HTML
• Atividades: Atividade 02

Aula 03: Introdução à CSS

• Leituras:
  • O que é CSS
  • Sintaxe do CSS
  • Iniciando com CSS
  • Propriedades CSS
  • Propriedades CSS (em inglês)
• Vídeos:
  • O que é CSS?
• Slides: Introdução a CSS
• Atividades: Atividade 03

Aula 04: Git e Github: trabalho colaborativo e controle de versão

• Leituras:
  • O que é controle de versão
  • Git
  • Github (Inglês)
• Podcast: #4 - Git e Trabalho Colaborativo
• Vídeos:
  • Git e Github para iniciantes by Loiane Groner
  • O que são Git e Github by Alura
• Slides: Git e Github
• Atividades: Atividade 04

Aula 05: Revisão de HTML5 e CSS3 e Seleção do Projetos

• Leituras: CSS com HTML
• Vídeo Tutorial: Aprenda Construir Layouts Elegantes com CSS Grid e Flexbox
• Projetos: Lista de Projetos
• Atividades: Atividade 05

Aula 06: Como a Web funciona?

• Leituras obrigatórias:
  • Como a Web funciona [by MDN]?
  • Como a Web funciona? [by Tableless]
  • O que é um servidor Web?
  • Como navegador funciona?
• Slides: Como a Web Funciona?
• Atividades: Questionário online

Aula 07: Entendendo o protocolo HTTP

• Leituras obrigatórias:
  • Visão geral do HTTP
  • Cabeçalhos HTTP
  • Métodos HTTP
  • Códigos de status HTTP
  • CORS - Controle de acesso
  • Como HTTPS funciona? [em inglês]
• Slides: HTTP - Entendendo o idioma dos navegadores
• Atividades: Atividade 07

Aula 08: Web Design Responsivo

• Leituras:
  • Princípios básicos do Web design responsivo, by Google
  • 9 princípios básicos do web design responsivo, by rockcontent
• Slides: Web Design Responsivo
• Atividades: N/A

Aula 09: Usabilidade e Acessibilidade na Web

• Leituras:
  • Usabilidade
  • Acessibilidade
  • Acessibilidade Toolkit
  • Lighthouse
• Vídeos:
  • Acessibilidade x Usabilidade
  • Diretrizes de Acessibilidade
• Atividades: Aplicar o Lighthouse em todos trabalhos Web desenvolvidos e obter acima de 90 em todos os aspectos.

Aula 10: Introdução à Javascript

• Leituras: Guia JavaScript, By Mozilla
• Slides: Introdução a Javascript
• Atividades: Atividade 10

Aula 11: Entendendo o Javascript assíncrono: callback, promise e async await

• Leituras:
  • Função Callback
  • Gerenciando o fluxo assíncrono de operações em NodeJS
  • JavaScript assíncrono: callbacks, promises e async functions
• Vídeos:
  • O que é código assíncrono | JavaScript
  • Dificuldades em entender callbacks?
  • JS Assíncrono: Entenda de vez Callbacks, Promises e Async/Await
• Atividade em DUPLA: Codificar exemplos de funções assíncronas Javascript utilizando “callback”, “Promise” e “async - await”. Apresentar o código na próxima aula.

Aula 12: Manipulando o DOM (Document Objetc Model)

• Leituras:
  • DOM - Document Object Model, by devfuria
  • Introdução ao DOM, by MDN
• Atividades:
  • Manipulando o DOM HTML com Javascript
  • Desafio da lâmpada

Aula 13: Formulários e integração com APIs

• Leituras:
  • Formulários da Web - Trabalhando com dados do usuário
  • Como estruturar um formulário HTML
  • Usabilidade em fomulários
  • Fetch API e o JavaScript
• Atividades:
  • Integrando front-end com API remota

Aula 14: Testes automatizados

• Leituras:
  • Livro Engenharia de Software Moderna - Cap 8 Testes
  • Cypress + Vuejs – Primeiros passos
  • cypress
• Slides:
  • Testes automatizados [frontend JS]
• Vídeos:
  • Testing+, Curso online do Prof. Paulo Borba da UFPE
  • Cypress (O Teste Front-End Mais Fácil que Você vai Ver) // Dicionário do Programador
• Atividades:
  • Configurar o Jest e Cypress nos projetos de cada equipe e desenvolver pelo menos um teste de unidade e um teste e2e.

Aula 15: Continuous Integration & Continuous Deployment

• Leituras:
  • O que significa integração contínua?, By AWS
  • Atomatize, By Márcio Gurgel
  • GitHub Actions for Firebase
• Slides:
  • Continuous Integration & Continuous Deployment
• Atividades: Adicionar testes automatiados e configurar cada projeto com o Github Actions para fazer deploy automático no Firebase Hosting.

Aula 16: Segurança na Web

• Leituras:
  • Cartilha de segurança na Web
  • OWASP Top 10
  • Deixando seu site seguro
• Slides:
  • Segurança na Web
• Atividades: Implementar as dicas de segurança na Web apresentadas nos slides em seus respectivos projetos.