Links úteis para desenvolver

Esta página reúne os links que valem a pena guardar: documentação oficial para consultar quando o exemplo da aula não bastar, sites para praticar sem sair do navegador, ferramentas que você vai usar em quase todo projeto e comunidades em português para quando travar sozinho não estiver ajudando. Não precisa decorar nada disso agora — volte aqui sempre que precisar.

Documentação oficial¶

• MDN Web Docs (pt-BR) — referência de HTML, CSS e JavaScript, com exemplos e tabela de compatibilidade por navegador.
• Node.js — Documentação oficial — referência completa da API do runtime usado no back-end das trilhas 2 e 3.
• Express — Guia oficial (pt-BR) — como criar rotas, usar middlewares e tratar erros no framework HTTP do Node.
• Vue.js — Guia oficial — reatividade, componentes e Composition API, a base do Nível 3.
• Vuetify — Getting Started — instalação, componentes e temas da biblioteca de UI Material Design para Vue.
• Pinia — Guia oficial — gerenciamento de estado global recomendado para aplicações Vue 3.
• Vue Router — Guia oficial — rotas, navegação programática e guardas de rota em SPAs Vue.
• Vite — Guia oficial — o bundler e servidor de desenvolvimento usado para criar e servir os projetos Vue.
• MySQL Reference Manual — sintaxe SQL, tipos de dados e administração do banco relacional usado no Nível 3.
• Supabase Docs — banco Postgres gerenciado, autenticação, Row Level Security e API REST automática.
• Firebase Docs — Firestore, Authentication e Hosting como alternativa de back-end gerenciado.
• Docker Docs — imagens, contêineres e Docker Compose para empacotar e rodar aplicações.
• nginx Docs — configuração do servidor web/proxy reverso usado no deploy em VPS.

Aprender praticando¶

• Flexbox Froggy — joguinho que ensina Flexbox fazendo sapos pularem para as posições certas.
• Grid Garden — aprenda CSS Grid regando canteiros com as propriedades de grid corretas.
• CSS Diner — pratique seletores CSS "servindo" os pratos certos em cada nível.
• freeCodeCamp (em português) — currículo gratuito com certificados de HTML, CSS, JavaScript e mais.
• Exercism — exercícios de lógica e algoritmos com mentoria da comunidade, em várias linguagens.
• Frontend Mentor — desafios de HTML/CSS/JS a partir de designs reais, com níveis de dificuldade.
• JavaScript30 — 30 projetos em JavaScript puro, sem framework e sem biblioteca.

Ferramentas online¶

• CodePen — editor online para protótipos rápidos de HTML/CSS/JS e para ver o código de outras pessoas.
• StackBlitz — IDE no navegador que roda projetos Node/Vue completos sem instalar nada localmente.
• CodeSandbox — ambiente online para criar e compartilhar projetos front-end e full-stack.
• Regex101 — testador de expressões regulares com explicação de cada parte do padrão.
• Postman — cliente para testar rotas de API, a mesma ferramenta usada nas aulas de back-end.
• Can I Use — tabela de suporte de recursos de HTML/CSS/JS por navegador.

APIs públicas para praticar¶

• ViaCEP — consulta de endereços a partir do CEP, sem necessidade de chave de API.
• IBGE — API de Localidades — estados, municípios e regiões do Brasil em JSON.
• BrasilAPI — CEP, CNPJ, feriados, bancos e outros dados brasileiros reunidos em uma API aberta.
• JSONPlaceholder — API fake com posts, comentários e usuários para treinar requisições CRUD.
• PokéAPI — dados completos de Pokémon, ótima para praticar consumo de API com paginação.
• OpenWeather — previsão do tempo e clima atual por cidade ou coordenadas (exige chave gratuita).
• The Dog API — imagens e informações de raças de cachorro, com chave gratuita opcional.
• Rick and Morty API — personagens, episódios e locais da série, sem necessidade de chave.

Design, cores, fontes e ícones¶

• Google Fonts — catálogo de fontes gratuitas para usar com @font-face ou <link>.
• Coolors — gerador de paletas de cores com exportação para CSS/HEX.
• Adobe Color — roda de cores para criar paletas harmônicas por regra de contraste.
• Font Awesome — biblioteca de ícones vetoriais amplamente usada em projetos web.
• Material Symbols — ícones do Material Design, os mesmos usados pelo Vuetify.
• Heroicons — ícones SVG simples e gratuitos, em versão outline e sólida.
• unDraw — ilustrações SVG gratuitas e customizáveis por cor, ótimas para telas vazias.

Acessibilidade¶

• W3C WAI — página oficial da iniciativa de acessibilidade do W3C, com as diretrizes WCAG.
• WebAIM — artigos práticos sobre acessibilidade web, leitores de tela e boas práticas de formulário.
• eMAG — Modelo de Acessibilidade em Governo Eletrônico — recomendações de acessibilidade do governo brasileiro.
• axe DevTools — extensão de navegador que audita acessibilidade direto no DevTools.
• WebAIM Contrast Checker — verifica se a combinação de cores atende à taxa de contraste da WCAG.
• NVDA — leitor de tela gratuito para testar navegação por teclado e ARIA no Windows.

Performance e qualidade¶

• Lighthouse — auditoria de performance, acessibilidade, boas práticas e SEO integrada ao Chrome.
• PageSpeed Insights — roda o Lighthouse na sua URL pública e mostra métricas de campo (Core Web Vitals).
• WebPageTest — teste de performance detalhado, com filme da renderização e de diferentes localidades.
• web.dev — guias do Google sobre performance, Core Web Vitals e boas práticas modernas de front-end.
• GTmetrix — relatório de performance com recomendações priorizadas por impacto.
• Chrome DevTools — documentação das abas Elements, Network, Performance e Application do navegador.

Deploy e infraestrutura¶

• Netlify Docs — deploy contínuo de sites estáticos e front-ends a partir do GitHub.
• Vercel Docs — deploy de front-ends (e funções serverless) com integração automática ao Git.
• Render Docs — hospedagem de back-ends Node, bancos de dados e sites estáticos com deploy automático.
• GitHub Pages — hospedagem gratuita de sites estáticos direto de um repositório do GitHub.
• GitHub Actions — automação de build, teste e deploy (CI/CD) disparada por eventos do repositório.
• Let's Encrypt — certificados TLS/SSL gratuitos, a base do HTTPS configurado no nginx.

Comunidades e canais em português¶

• Rocketseat — comunidade e cursos de programação com forte presença em Discord.
• Alura — plataforma de cursos em português com trilhas de front-end, back-end e frameworks.
• DIO — Digital Innovation One — comunidade com trilhas gratuitas, desafios de código e bootcamps.
• Curso em Vídeo — cursos gratuitos em português, incluindo HTML5/CSS3 e lógica de programação.
• Filipe Deschamps (YouTube) — canal brasileiro sobre programação, carreira e tecnologia.
• balta.io — comunidade e cursos em português com foco em desenvolvimento web e boas práticas.

Livros e referências¶

• Novatec Editora — editora de "Criando Sites com HTML", "Padrões JavaScript", "Desenvolvimento de Grandes Aplicações Web" e "Aprendendo a Desenvolver Aplicações Web", da bibliografia dos três níveis.
• Grupo A / Bookman — editora de "Desenvolvimento de Software II" e "JavaScript: O Guia Definitivo".
• FCA Editora — editora portuguesa de "Introdução ao Desenvolvimento Moderno para a Web", da bibliografia dos Níveis 2 e 3.
• Editora Saraiva — editora de "HTML 5 — Guia Prático", da bibliografia do Nível 1.
• Editora Érica (Grupo GEN) — selo técnico que publica "Projetos de Sistemas Web", da bibliografia do Nível 2.
• Pearson — editora de "SOA with REST: Principles, Patterns & Constraints", da bibliografia do Nível 3.
• Eloquent JavaScript — livro gratuito e completo sobre JavaScript, do básico a Node.js.
• javascript.info — tutorial moderno de JavaScript, do zero a tópicos avançados (sem tradução para pt-BR).
• You Don't Know JS — série gratuita que aprofunda escopo, closures, this, tipos e assincronismo em JS.
• MDN — Aprender desenvolvimento web — trilha estruturada de aprendizado, do HTML básico a frameworks.

Roadmaps¶

• roadmap.sh — Frontend — passo a passo visual para se tornar desenvolvedor front-end.
• roadmap.sh — Backend — passo a passo visual para se tornar desenvolvedor back-end.
• roadmap.sh — Full Stack — visão combinada de front-end e back-end para quem quer as duas pontas.
• roadmap.sh — JavaScript — tópicos de JavaScript moderno organizados por ordem de aprendizado.
• State of JS — pesquisa anual sobre uso e satisfação com frameworks e ferramentas JavaScript.
• Developer Roadmap (GitHub) — código-fonte aberto por trás dos roadmaps, com discussões da comunidade.