# Trilha - Dev. React JavaScript - Básico

# Front-end x Back-end x Full-Stack

---

### **🎥 Vídeo(s) Recomendado(s)**

- <span style="white-space: pre-wrap;">🔗 Vídeo: </span>[Rafaella Ballerini • O QUE É FRONT-END E BACK-END???](https://www.youtube.com/watch?v=Em0R3csNMVE "Rafaella Ballerini • O QUE É FRONT-END E BACK-END???")
    - ⏰ Duração: 6:22

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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)**

- <span style="white-space: pre-wrap;">🔗 Vídeo: </span>[Rafaella Ballerini • O QUE É GIT E GITHUB? - definição e conceitos importantes 1/2](https://www.youtube.com/watch?v=DqTITcMq68k "Rafaella Ballerini • O QUE É GIT E GITHUB? - definição e conceitos importantes 1/2")
    - ⏰ Duração: 15:42
- **Obs.:**<span style="white-space: pre-wrap;"> Não precisa ver parte 2/2, na parte </span>**intermediária** da trilha vamos ver mais a fundo e na prática.

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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)**

- <span style="white-space: pre-wrap;">🔗 Vídeo: </span>[Blog Abri Minha Empresa • FLUXOGRAMA O QUE É E COMO FAZER UM (em 06 Passos Bem Práticos)](https://www.youtube.com/watch?v=J3gZH5w6eBo "Blog Abri Minha Empresa • FLUXOGRAMA O QUE É E COMO FAZER UM (em 06 Passos Bem Práticos)")
    - ⏰ Duração: 8:41
- **Obs.:**<span style="white-space: pre-wrap;"> Só precisa entender os conceitos básicos do que é e como funciona um Fluxograma.</span>

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- Essas perguntas poderão ser usadas futuramente para validação.

#### **❓ Perguntas:**

- <span style="white-space: pre-wrap;">O que é um </span>**fluxograma**<span style="white-space: pre-wrap;"> e para que ele é usado?</span>
- <span style="white-space: pre-wrap;">Quais são os </span>**símbolos básicos**<span style="white-space: pre-wrap;"> de um fluxograma (início/fim, processo, decisão)?</span>
- <span style="white-space: pre-wrap;">Para que serve um </span>**retângulo**<span style="white-space: pre-wrap;"> em um fluxograma?</span>
- <span style="white-space: pre-wrap;">Para que serve um </span>**losango**<span style="white-space: pre-wrap;"> em um fluxograma?</span>
- <span style="white-space: pre-wrap;">O que significa seguir o fluxo com </span>**setas conectando símbolos**?
- <span style="white-space: pre-wrap;">Como você representa um </span>**loop (repetição)**<span style="white-space: pre-wrap;"> num fluxograma?</span>
- <span style="white-space: pre-wrap;">Qual o papel do símbolo de </span>**entrada/saída**?
- <span style="white-space: pre-wrap;">Por que é importante ter apenas um </span>**início e um fim**<span style="white-space: pre-wrap;"> no fluxograma?</span>
- <span style="white-space: pre-wrap;">Como fluxogramas ajudam na </span>**comunicação de processos**<span style="white-space: pre-wrap;"> e entendimento de lógica?</span>

---

### **🔗 Material de Apoio**

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

- [Checklist Fácil • Tipos de Fluxograma](https://checklistfacil.com/blog/tipos-de-fluxograma/?utm_source=google&utm_medium=cpc&utm_campaign=BR-PT-PAID-CF-GOOGLE-SEARCH-MATERIAIS_NOVOS_LEADS--DSA-BLOG&utm_term=&hsa_tgt=dsa-41848713900&hsa_grp=160819188124&hsa_mt=&hsa_cam=21049676815&hsa_ver=3&hsa_src=g&hsa_net=adwords&hsa_kw=&hsa_acc=1374182181&hsa_ad=691717187255&gad_source=1&gad_campaignid=21049676815&gbraid=0AAAAADjCCj-p0Vv-Pmj7q-sqQnJld_iWw "Checklist Fácil • Tipos de Fluxograma")
- [Breezetree • Fluxograma Cheat Sheet ](https://www.breezetree.com/downloads/flow-chart-symbols.pdf "Breezetree • Fluxograma Cheat Sheet ")
- [Canva](https://www.canva.com/pt_br/ "Canva")

###   

# HTML - HyperText Markup Language

---

### **🎥 Vídeo(s) Recomendado(s)**

- <span style="white-space: pre-wrap;">🔗 Vídeo: [Felipe Rocha • Full Stack Club • Curso de HTML Para Completos Iniciantes](https://www.youtube.com/watch?v=r0CWl2EhR6Q "Felipe Rocha • Full Stack Club • Curso de HTML Para Completos Iniciantes")</span>  
    
    - ⏰ 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?
- <span style="white-space: pre-wrap;">Qual a diferença entre </span>**tag**<span style="white-space: pre-wrap;">, </span>**elemento**<span style="white-space: pre-wrap;"> e </span>**atributo**?
- <span style="white-space: pre-wrap;">Qual é a </span>**estrutura mínima**<span style="white-space: pre-wrap;"> de um documento HTML?</span>

---

### **🔗 Material de Apoio**

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

- [HTML Cheat Sheets](https://htmlcheatsheet.com/ "HTML Cheat Sheets")
- [Devhints Cheat Sheets • HTML](https://devhints.io/html "Devhints Cheat Sheets • HTML")
- [Devhints Cheat Sheets • HTML Meta Tags](https://devhints.io/html-meta "Devhints Cheat Sheets • HTML Meta Tags")
- [Devhints Cheat Sheets • Input Tag](https://devhints.io/html-input "Devhints Cheat Sheets • Input Tag")
- [Devhints Cheat Sheets • Applinks](https://devhints.io/applinks "Devhints Cheat Sheets • Applinks")
- [Devhints Cheat Sheets • Internet Explorer](https://devhints.io/ie "Devhints Cheat Sheets • Internet Explorer")
- [Devhints Cheat Sheets • HTML Emails](https://devhints.io/html-email "Devhints Cheat Sheets • HTML Emails")
- [W3Schools • HTML Tutorial](https://www.w3schools.com/html/default.asp "W3Schools • HTML Tutorial")
- [MDN Web Docs • HTML: HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML "MDN Web Docs • HTML: HyperText Markup Language")

# CSS - Cascading Style Sheets

---

### **🎥 Vídeo(s) Recomendado(s)**

- 🔗 <span style="white-space: pre-wrap;">Vídeo</span>: [Felipe Rocha • Full Stack Club • Curso de CSS Para Completos Iniciantes](https://www.youtube.com/watch?v=r11FflkQqJs "Felipe Rocha • Full Stack Club • Curso de CSS Para Completos Iniciantes")
    - ⏰ Duração: 1:13:37

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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.

- [CSS-Tricks • CSS Almanac](https://css-tricks.com/almanac/ "CSS-Tricks • CSS Almanac")
- [CSS-Tricks • CSS Flexbox Layout Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "CSS-Tricks • CSS Flexbox Layout Guide")
- [W3 Schools • CSS Tutorial](https://www.w3schools.com/cssref/index.php "W3 Schools • CSS Tutorial")
- [MDN Web Docs • CSS: Cascading Style Sheets](https://developer.mozilla.org/en-US/docs/Web/CSS "MDN Web Docs • CSS: Cascading Style Sheets")
- [Devhints Cheat Sheets • CSS](https://devhints.io/css "Devhints Cheat Sheets • CSS")
- [Devhints Cheat Sheets • CSS Grid](https://devhints.io/css-grid "Devhints Cheat Sheets • CSS Grid")
- [Devhints Cheat Sheets • CSS Tricks](https://devhints.io/css-tricks "Devhints Cheat Sheets • CSS Tricks")
- [Devhints Cheat Sheets • CSS Flexbox](https://devhints.io/css-flexbox "Devhints Cheat Sheets • CSS Flexbox")
- [Devhints Cheat Sheets • CSS System Fonts](https://devhints.io/css-system-font-stack "Devhints Cheat Sheets • CSS System Fonts")
- [Devhints Cheat Sheets • CSS Webfonts](https://devhints.io/google-webfonts "Devhints Cheat Sheets • CSS Webfonts")
- [Devhints Cheat Sheets • CSS Unicode Symbols](https://devhints.io/unicode "Devhints Cheat Sheets • CSS Unicode Symbols")
- [Devhints Cheat Sheets • CSS Bootstrap](https://devhints.io/bootstrap "Devhints Cheat Sheets • CSS Bootstrap")

# Media Queries no CSS

---

### **🎥 Vídeo(s) Recomendado(s)**

- 🔗 <span style="white-space: pre-wrap;">Vídeo</span>: [Felipe Rocha • Full Stack Club • Aprenda MEDIA QUERIES no CSS em 10 MINUTOS](https://www.youtube.com/watch?v=r11FflkQqJs "Felipe Rocha • Full Stack Club • Aprenda MEDIA QUERIES no CSS em 10 MINUTOS")
    - ⏰ Duração: 10:32

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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.

- [W3 Schools • CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries.asp "W3 Schools • CSS Media Queries")
- [W3 Schools • Responsive Web Design - Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp "W3 Schools • Responsive Web Design - Media Queries")

# JavaScript (JS)

---

### **🎥 Vídeo(s) Recomendado(s)** 

- 🔗 Vídeo: [Rocketseat • TUDO que você deve estudar de JavaScript antes do React](https://www.youtube.com/watch?v=37SwqREHRGI "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](https://www.youtube.com/playlist?list=PLnDvRpP8BnexyabTa4NQrLy3s5NowwAxb "Matheus Battisti - Hora de Codar • Curso de JavaScript 2024")
    - ⏰Duração da playlist completa: 2:33:39

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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.

- [W3 Schools • JavaScript Tutorial](https://www.w3schools.com/js/default.asp "W3 Schools • JavaScript Tutorial")
- [GitHub • Modern JavaScript Cheat Sheet](https://github.com/mbeaudru/modern-js-cheatsheet "GitHub • Modern JavaScript Cheat Sheet")
- [MDN Web Docs • JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "MDN Web Docs • JavaScript")
- [Over API • JavaScript Cheat Sheet](https://overapi.com/javascript "Over API • JavaScript Cheat Sheet")
- [Devhints Cheat Sheets • Canvas](https://devhints.io/canvas "Devhints Cheat Sheets • Canvas")
- [Devhints Cheat Sheets • Dom Selection](https://devhints.io/dom-selection "Devhints Cheat Sheets • Dom Selection")
- [Devhints Cheat Sheets • JavaScript Date](https://devhints.io/js-date "Devhints Cheat Sheets • JavaScript Date")
- [Devhints Cheat Sheets • JavaScript lazy shortcuts](https://devhints.io/js-lazy "Devhints Cheat Sheets • JavaScript lazy shortcuts")
- [Devhints Cheat Sheets • Promises](https://devhints.io/promise "Devhints Cheat Sheets • Promises")
- [Devhints Cheat Sheets • ES2015+](https://devhints.io/es6 "Devhints Cheat Sheets • ES2015+")
- [Devhints Cheat Sheets • JavaScript Arrays](https://devhints.io/js-array "Devhints Cheat Sheets • JavaScript Arrays")
- [Devhints Cheat Sheets • NPM](https://devhints.io/npm "Devhints Cheat Sheets • NPM")
- [Devhints Cheat Sheets • strftime format](https://devhints.io/strftime "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 &amp; Async/Await](https://www.youtube.com/watch?v=WUmAAxH9n-A "Felipe Rocha • Full Stack Club • Curso de JavaScript Assíncrono - Callbacks, Promises & Async/Await")
    - ⏰ Duração: 35:04

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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.

- [W3 Schools • JavaScript Tutorial](https://www.w3schools.com/js/default.asp "W3 Schools • JavaScript Tutorial")
- [GitHub • Modern JavaScript Cheat Sheet](https://github.com/mbeaudru/modern-js-cheatsheet "GitHub • Modern JavaScript Cheat Sheet")
- [MDN Web Docs • JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "MDN Web Docs • JavaScript")
- [MDN Web Docs • Asynchronous JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Async_JS "MDN Web Docs • Asynchronous JavaScript")
- [MDN Web Docs • async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function "MDN Web Docs • async function")
- [Over API • JavaScript Cheat Sheet](https://overapi.com/javascript "Over API • JavaScript Cheat Sheet")
- [Devhints Cheat Sheets • Canvas](https://devhints.io/canvas "Devhints Cheat Sheets • Canvas")
- [Devhints Cheat Sheets • Dom Selection](https://devhints.io/dom-selection "Devhints Cheat Sheets • Dom Selection")
- [Devhints Cheat Sheets • JavaScript Date](https://devhints.io/js-date "Devhints Cheat Sheets • JavaScript Date")
- [Devhints Cheat Sheets • JavaScript lazy shortcuts](https://devhints.io/js-lazy "Devhints Cheat Sheets • JavaScript lazy shortcuts")
- [Devhints Cheat Sheets • Promises](https://devhints.io/promise "Devhints Cheat Sheets • Promises")
- [Devhints Cheat Sheets • ES2015+](https://devhints.io/es6 "Devhints Cheat Sheets • ES2015+")
- [Devhints Cheat Sheets • JavaScript Arrays](https://devhints.io/js-array "Devhints Cheat Sheets • JavaScript Arrays")
- [Devhints Cheat Sheets • NPM](https://devhints.io/npm "Devhints Cheat Sheets • NPM")

# TypeScript (TS)

---

### **🎥 Vídeo(s) Recomendado(s)**


- 🔗 Vídeo: [Felipe Rocha • Full Stack Club • Curso de TypeScript para Completos Iniciantes](https://youtu.be/ppDsxbUNtNQ "Felipe Rocha • Full Stack Club • Curso de TypeScript para Completos Iniciantes")
    - ⏰ Duração: 1:22:38

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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.

- [TypeScript Docs • Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html "TypeScript Docs • Everyday Types")
- [Devhints Cheat Sheets • TypeScript (TS)](https://devhints.io/typescript "Devhints Cheat Sheets • TypeScript (TS)")
- [React TypeScript • Cheat Sheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup "React TypeScript • Cheat Sheet")
- [TypeScript Docs • Cheat Sheets](https://www.typescriptlang.org/cheatsheets/ "TypeScript Docs • Cheat Sheets")
- [TypeScript Docs • The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html "TypeScript Docs • The TypeScript Handbook")

# Linux

---

### **🎥 Vídeo(s) Recomendado(s)**

- 🔗 <span style="white-space: pre-wrap;">Vídeo</span>: [Prof. Juliano Ramos – Linux do Zero ao Hacker! • Guia definitivo do Linux para iniciantes 2025!](https://www.youtube.com/watch?v=ZI5ZQGEHJho "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](https://www.youtube.com/watch?v=wgsuS1lynmY "Winner Dev • Criando chave SSH para o GitHub em 2022 | Simples e Rápido")
    - ⏰ Duração: 3:23

---

### **🗝️ Pontos-chave (Perguntas-guia)**

- <span style="white-space: pre-wrap;">Se você consegue responder isso, você entendeu o módulo. </span>
- 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?

---

### **🔗 Material de Apoio**

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

- [Devhints Cheat Sheets • Linux](https://devhints.io/linux "Devhints Cheat Sheets • Linux")
- [GitHub Docs • Conectando-se ao GitHub com o SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh "GitHub Docs • Conectando-se ao GitHub com o SSH")
- [GitHub • Ubuntu Cheat Sheet](https://github.com/JREAM/ubuntu-cheatsheet "GitHub • Ubuntu Cheat Sheet")