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.

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 class e id ?

🔗 Material de Apoio

Referência rápida para uso prático.

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-width e max-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, e const ?
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 if e else ?
O que são loops for e while ?

🔗 Material de Apoio

Referência rápida para uso prático.

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() e async/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.

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 é any e 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 é enum e quando usar?
Como o TypeScript ajuda a evitar erros em tempo de desenvolvimento?

🔗 Material de Apoio

Referência rápida para uso prático.

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, e flatpak ?
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?