Curso web1

Projetos práticos

1. Montar um plano de carreira
2. Página de Hello World no github pages
3. Página pessoal no github pages
4. Página de status code HTTP como o httpcats
5. Página totalmente Responsiva de "Em breve" com contador regresivo
6. Usabilidade: Frontend inscrição do Hackathon (Forms)
7. Backend: Servidor para salvar inscrições do Hackathon (CRUD)

Módulo 1 - Programação e Internet

Aula 1 - Carreira em Técnologia

• Áreas em Técnologia
• Papéis comuns
• Posicionamento

Aula 2 - Introdução a Programação

• Arquitetura do Computador
• Arquiteturas de Sistemas
• Arquitetura da Internet
• Casos de uso

Aula 3 - Instalando Ferramentas

• Vscode
• Git
• GitHub
• Nodejs
• Pnpm

Prática:
Montar um plano de carreira

Módulo 2 - Git/Github: Versionamento de Sistemas

Aula 1 - História dos Sistemas de Controle de Versão.

• O problema do versionamento
• CVS, Subversion (SVN) e Git

Aula 2 - Conceitos básicos

• Repositórios, commits, push e pull
• Branch, checkout, merge e Pull Request

Aula 3 - Conceitos Avançados

• Conflitos de Merge
• Rebase
• Github, Issues, Pull Request e Review
• README.md: Introdução ao Markdown

Prática:
Github Page: html<"hello world">

Módulo 3 - HTML: Estrutura da Web

Aula 1 - História da Internet

• Introdução ao HTML
• elementos, tags e atributos
• doctype, html, head, title e body

Aula 2 - Textos e Links

• parágrafos, cabeçalhos (h1-h6), quebras de linha e formatação de texto (b, i, u, s).
• links absolutos e relativos, aninhamento de links, links para seções na mesma página.

Aula 3 - Imagens e Multimídia

• img, src, alt e title, formatos suportados.
• Áudio e Vídeo, formatos suportados, controles de reprodução.

Aula 4 - Formulários e Entradas

• form, action e method.
• input (text, password, email, number, etc.), textarea, select, checkbox, radio.
• button (input type="submit" e input type="reset").

Aula 5 - Como os Navegadores Funcionam

• Solicitação de páginas, renderização e DOM
• Diferenças entre navegadores.
• Ferramentas de desenvolvedor embutidas em navegadores.

Prática
Página pessoal usando github pages

Módulo 4 - CSS: Estilo da Web

Aula 1 - Introdução ao CSS

• seletores, propriedades e valores.
• inline, embedded e external.

Aula 2 - Cores e Fontes

• modelos de cores (RGB, HEX, HSL), nomeando cores, transparência.
• font-family, font-size, font-weight, font-style.
• color, text-align, text-decoration.

Aula 3 - Layouts e Posicionamento

• Box model: margin, border, padding, width, height.
• Posicionamento: static, relative, absolute, fixed.
• Layouts flexíveis: display flex, flex-direction, justify-content, align-items.

Aula 4 - Design Responsivo

• Dispositivos e tamanhos de tela.
• Breakpoints, regras condicionais de estilo.
• Mobile-first, ajuste de layouts e elementos.

Prática
Página de status code HTTP como o httpcats

Módulo 5 - JavaScript: Interação na web

Aula 1 - Introdução ao JavaScript

• Variáveis
• Tipos de dados
• Operadores

Aula 2 - Lógica de programação

• Estruturas de controle
• Funções
• Eventos

Aula 3 - DOM e Manipulação de Eventos

• Selecionando e manipulando elementos
• Eventos e callbacks

Aula 4 - Formulários e Validação

• Capturando dados de entrada
• Validação do lado do cliente

Aula 5 - Comunicação com o Servidor

• Comunicação assíncrona
• Fetch API, GraphQL, gRPC e WebSocket
• Fetch

Aula 6 - Introdução a Frameworks JavaScript

• Vue.js, React.js, Angular - uma visão geral
• Escolhendo um framework

Prática
Página totalmente Responsiva de "Em breve" com contador regresivo

Módulo 6 - Usabilidade na Web

Aula 1 - Design Responsivo

• Princípios básicos de design: equilíbrio, contraste, alinhamento, repetição.
• Elementos de design: tipografia, cores, imagens, espaçamento.

Aula 2 - Usabilidade e Experiência do Usuário (UX)

• Facilidade de uso, eficiência, satisfação do usuário.
• Navegação intuitiva, feedback claro, consistência visual.
• Tipos de testes de usabilidade e ferramentas disponíveis.

Aula 3 - Mobile First

• Mobile First: princípios, benefícios, estratégias de design.
• Exemplos de layouts responsivos e amigáveis para dispositivos móveis.

Aula 4 - Acessibilidade na Web

• Estrutura semântica, descrições de imagens, teclado acessível.
• Ferramentas e recursos para avaliar e melhorar a acessibilidade do site.

Prática
Usabilidade: Frontend inscrição do Hackathon (Forms)

Módulo 7 - Servidores: Serviços da Web

Aula 1 - Introdução a Servidores Web e Node.js

• Conceitos básicos de servidores web
• Instalando e configurando Node.js, package.json, scripts, (postman, insominia, thunder)

Aula 2 - Criando um Servidor com Express

• Rotas, requisições e respostas
• Tratamento de erros, Middleware

Aula 3 - Express e Banco de Dados

• Introdução a bancos de dados (SQL e NoSQL)
• Conectando um banco de dados ao seu servidor

Aula 4 - Implementando CRUD

• Implementando operações Create
• Implementando operações Read
• Implementando operações Update
• Implementando operações Delete

Aula 5 - Autenticação e Segurança

• Estratégias de autenticação
• JWT, sessões, cookies
• Considerações sobre segurança web

Aula 6 - Deploy de Aplicações Web

• Preparando a aplicação para produção: CI/CD e Docker
• Criar conta em algum cloud
• Deploy na cloud

Prática
Backend: Servidor para salvar inscrições do Hackathon (CRUD)