Trilha - Dev. React JavaScript - Básico 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. Checklist Fácil • Tipos de Fluxograma Breezetree • Fluxograma Cheat Sheet Canva 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 e ? 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 class e id ? 🔗 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-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 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 ⏰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. 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() 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 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 é 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 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 , 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 GitHub Docs • Conectando-se ao GitHub com o SSH GitHub • Ubuntu Cheat Sheet