Trilha - Dev. React JavaScript - Básico
- Front-end x Back-end x Full-Stack
- Git e GitHub - Conceitos Básicos
- Fluxograma
- HTML - HyperText Markup Language
- CSS - Cascading Style Sheets
- Media Queries no CSS
- JavaScript (JS)
- JavaScript (JS) Assíncrono
- TypeScript (TS)
- Linux
Front-end x Back-end x Full-Stack
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Rafaella Ballerini • O QUE É FRONT-END E BACK-END???
- ⏰ Duração: 6:22
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é front-end?
- O que é back-end?
- O que é full-stack?
- Como que o trabalho de front-end, back-end, e full-stack trabalham juntos?
Git e GitHub - Conceitos Básicos
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Rafaella Ballerini • O QUE É GIT E GITHUB? - definição e conceitos importantes 1/2
- ⏰ Duração: 15:42
- Obs.: Não precisa ver parte 2/2, na parte intermediária da trilha vamos ver mais a fundo e na prática.
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é Git?
- O que é GitHub?
- Qual a diferença entre Git e GitHub?
- Qual o benefício do uso do Git e GitHub para as empresas?
Fluxograma
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Blog Abri Minha Empresa • FLUXOGRAMA O QUE É E COMO FAZER UM (em 06 Passos Bem Práticos)
- ⏰ Duração: 8:41
- Obs.: Só precisa entender os conceitos básicos do que é e como funciona um Fluxograma.
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é um fluxograma e para que ele é usado?
- Quais são os símbolos básicos de um fluxograma (início/fim, processo, decisão)?
- Para que serve um retângulo em um fluxograma?
- Para que serve um losango em um fluxograma?
- O que significa seguir o fluxo com setas conectando símbolos?
- Como você representa um loop (repetição) num fluxograma?
- Qual o papel do símbolo de entrada/saída?
- Por que é importante ter apenas um início e um fim no fluxograma?
- Como fluxogramas ajudam na comunicação de processos e entendimento de lógica?
🔗 Material de Apoio
Referência rápida para uso prático.
HTML - HyperText Markup Language
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Felipe Rocha • Full Stack Club • Curso de HTML Para Completos Iniciantes
- ⏰ Duração: 42:30
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é HTML e para que ele serve na web?
- HTML é uma linguagem de programação? Por quê?
- Para que servem
<head>e<body>? - O que é uma lista ordenada e não ordenada?
- Qual a diferença entre tag, elemento e atributo?
- Qual é a estrutura mínima de um documento HTML?
🔗 Material de Apoio
Referência rápida para uso prático.
- HTML Cheat Sheets
- Devhints Cheat Sheets • HTML
- Devhints Cheat Sheets • HTML Meta Tags
- Devhints Cheat Sheets • Input Tag
- Devhints Cheat Sheets • Applinks
- Devhints Cheat Sheets • Internet Explorer
- Devhints Cheat Sheets • HTML Emails
- W3Schools • HTML Tutorial
- MDN Web Docs • HTML: HyperText Markup Language
CSS - Cascading Style Sheets
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Felipe Rocha • Full Stack Club • Curso de CSS Para Completos Iniciantes
- ⏰ Duração: 1:13:37
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é CSS e qual o seu papel na web?
- Qual a diferença entre HTML e CSS?
- O que é um seletor CSS?
- O que são propriedades e valores?
- Qual a diferença entre
classeid?
🔗 Material de Apoio
Referência rápida para uso prático.
- CSS-Tricks • CSS Almanac
- CSS-Tricks • CSS Flexbox Layout Guide
- W3 Schools • CSS Tutorial
- MDN Web Docs • CSS: Cascading Style Sheets
- Devhints Cheat Sheets • CSS
- Devhints Cheat Sheets • CSS Grid
- Devhints Cheat Sheets • CSS Tricks
- Devhints Cheat Sheets • CSS Flexbox
- Devhints Cheat Sheets • CSS System Fonts
- Devhints Cheat Sheets • CSS Webfonts
- Devhints Cheat Sheets • CSS Unicode Symbols
- Devhints Cheat Sheets • CSS Bootstrap
Media Queries no CSS
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Felipe Rocha • Full Stack Club • Aprenda MEDIA QUERIES no CSS em 10 MINUTOS
- ⏰ Duração: 10:32
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é uma media query?
- Para que servem media queries no CSS?
- Qual a diferença entre
min-widthemax-width? - O que significa design responsivo?
- Quando usar media queries em um projeto?
- O que acontece se não usar media queries em layouts responsivos?
- Como aplicar estilos diferentes para mobile e desktop?
🔗 Material de Apoio
Referência rápida para uso prático.
JavaScript (JS)
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Rocketseat • TUDO que você deve estudar de JavaScript antes do React
- ⏰Duração: 1:25:23
- 🔗 Playlist: Matheus Battisti - Hora de Codar • Curso de JavaScript 2024
- ⏰Duração da playlist completa: 2:33:39
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é JavaScript e qual seu papel no front-end?
- Qual a diferença entre JavaScript, HTML e CSS?
- O que são variáveis e para que servem?
- Qual a diferença entre
var,let, econst? - O que são tipos de dados em JavaScript?
- O que é uma função?
- O que é um array?
- O que é um objeto?
- O que são condicionais
ifeelse? - O que são loops
forewhile?
🔗 Material de Apoio
Referência rápida para uso prático.
- W3 Schools • JavaScript Tutorial
- GitHub • Modern JavaScript Cheat Sheet
- MDN Web Docs • JavaScript
- Over API • JavaScript Cheat Sheet
- Devhints Cheat Sheets • Canvas
- Devhints Cheat Sheets • Dom Selection
- Devhints Cheat Sheets • JavaScript Date
- Devhints Cheat Sheets • JavaScript lazy shortcuts
- Devhints Cheat Sheets • Promises
- Devhints Cheat Sheets • ES2015+
- Devhints Cheat Sheets • JavaScript Arrays
- Devhints Cheat Sheets • NPM
- Devhints Cheat Sheets • strftime format
JavaScript (JS) Assíncrono
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Felipe Rocha • Full Stack Club • Curso de JavaScript Assíncrono - Callbacks, Promises & Async/Await
- ⏰ Duração: 35:04
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que significa código assíncrono em JavaScript?
- Qual a diferença entre código síncrono e assíncrono?
- O que é a Call Stack?
- O que é uma Promise?
- O que é
async/await? - Qual a diferença entre usar
.then()easync/await? - Em que situações código assíncrono é usado no dia a dia?
🔗 Material de Apoio
Referência rápida para uso prático.
- W3 Schools • JavaScript Tutorial
- GitHub • Modern JavaScript Cheat Sheet
- MDN Web Docs • JavaScript
- MDN Web Docs • Asynchronous JavaScript
- MDN Web Docs • async function
- Over API • JavaScript Cheat Sheet
- Devhints Cheat Sheets • Canvas
- Devhints Cheat Sheets • Dom Selection
- Devhints Cheat Sheets • JavaScript Date
- Devhints Cheat Sheets • JavaScript lazy shortcuts
- Devhints Cheat Sheets • Promises
- Devhints Cheat Sheets • ES2015+
- Devhints Cheat Sheets • JavaScript Arrays
- Devhints Cheat Sheets • NPM
TypeScript (TS)
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Felipe Rocha • Full Stack Club • Curso de TypeScript para Completos Iniciantes
- ⏰ Duração: 1:22:38
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
-
O que é TypeScript e por que ele existe?
-
Qual a principal diferença entre JavaScript e TypeScript?
-
O que são tipos em TypeScript?
-
O que é tipagem estática?
-
O que é
anye por que deve ser evitado? -
O que são tipos primitivos em TypeScript?
-
O que são tipos de união
|? -
O que são tipos opcionais
?? -
O que é
enume quando usar? -
Como o TypeScript ajuda a evitar erros em tempo de desenvolvimento?
🔗 Material de Apoio
Referência rápida para uso prático.
- TypeScript Docs • Everyday Types
- Devhints Cheat Sheets • TypeScript (TS)
- React TypeScript • Cheat Sheet
- TypeScript Docs • Cheat Sheets
- TypeScript Docs • The TypeScript Handbook
Linux
🎥 Vídeo(s) Recomendado(s)
- 🔗 Vídeo: Prof. Juliano Ramos – Linux do Zero ao Hacker! • Guia definitivo do Linux para iniciantes 2025!
- ⏰ Duração: 1:31:45
- 🔗 Vídeo Setup do SSH no Ubuntu: Winner Dev • Criando chave SSH para o GitHub em 2022 | Simples e Rápido
- ⏰ Duração: 3:23
🗝️ Pontos-chave (Perguntas-guia)
- Se você consegue responder isso, você entendeu o módulo.
- Essas perguntas poderão ser usadas futuramente para validação.
❓ Perguntas:
- O que é Linux?
- Qual a diferença entre Linux e Windows?
- O que é uma distribuição Linux (distro)?
- O que é o terminal no Linux?
- Qual a diferença entre interface gráfica (GUI) e linha de comando (CLI)?
- Por que aprender linha de comando é importante no Linux?
- Para que serve o comando
ls? - Para que serve o comando
cd? - Para que serve o comando
pwd? - Como criar pastas e arquivos pelo terminal?
- Como remover arquivos e diretórios?
- Como visualizar o conteúdo de arquivos pelo terminal?
- O que são permissões no Linux?
- Qual a diferença entre usuário comum e root?
- O que faz o comando
sudo? - Como instalar programas no Linux?
- O que é um gerenciador de pacotes?
- Qual a diferença entre
apt,snap, eflatpak? - Como atualizar o sistema pelo terminal?
- O que é SSH e para que serve?
- Como gerar uma chave SSH no Ubuntu?
- Como adicionar a chave SSH no GitHub?
- Como verificar informações básicas do sistema Linux pelo terminal?
- Por que o Linux é muito utilizado em servidores?