A ideia é que essa postagem seja mantida pela comunidade, toda nova sugestão será verificada adicionada.
Documentações
html, css, javascript e mais...
MDN Web Docs
React
https://pt-br.react.dev/learn
Em inglês
React
https://learning-zone.github.io/react-basics/
CSS
CSS Tricks
Programas
Ferramentas
Components e efeitos.
Free Frontend
Buscador para ferraments Frontend
Coding Heroes
Testar e compartilhar codigo frontend.
Codepen
Teste para acessibilidade de cores para TailwindCSS
Colour a11y
Geradores
Geradores de códigos para várias linguagens e finalidades.
Web Code Tools
Gerador de cores de alto constraste para acessibilidade
Random a11y
Gerador de paleta de cores para acessiblidade
Accessible Color Palette Generator | WCAG Compliant
Gerador de botão
CSS3 Button Generator
Gerador de efeito Glassmorphism(Vidro)
CSS
(Glassmorphism CSS)[https://css.glass/]
Tailwind
(Tailwindcss Glassmorphism Generator)https://tailwindcss-glassmorphism.vercel.app/[https://gradienty.codes/]
Sites para treinar
Em Inglês
Recrie paginas da web reais.
Frontend Practice
Estude resolvendo problemas e questões de entrevistas para emprego.
Code Wars
Faça os desafios e aprimore seus conhecimentos frontend.
Frontend Mentor
Aprenda vários tipos de tecnologia em cursos gratuitos geridos pela comunidade.
Tech IO
Aprenda a codar codando games!
Coding Games
Extensões VS Code
Uso geral
Auto Rename Tag
Ajuda a renomear tags.
Bracket Highlighter
Realça texto entre símbolos personalizáveis.
Console Ninja
Console Ninja é uma extensão do VS Code para debug. Ela mostra logs e erros no editor, funciona com várias tecnologias e tem versões gratuita e paga.
Conventional Commits
Assistente para mensagens e descrição para commit em Conventional Commits.
CSS Var Complete
autocompletar variáveis CSS globais (e mais) com suporte a SCSS, LESS e outras linguagens.
ESlint
Integrar ESLint (validação de código JS). Instale o ESLint local ou global (usando algum gerenciador de pacotes).
File Structure Tree
Esse é mais focado para usuários windows, ele gera a árvore de arquivos o teu projeto de forma facil com apena um clique.
indent-rainbow
Deixa a indentação do código mais legível.
Live Server
Servidor de desenvolvimento local com atualizaçao automática.
Path Intellisense
Completa automaticamente o nome dos arquivos.
Prettier - Code formatter
Prettier é um formatador de código automático para várias linguagens.
AI assistentes de código
Codeium: AI Coding Autocomplete and Chat
Completa códigos, conversa e busca em mais de 70 linguagens.
IntelliCode
IntelliCode dá sugestões de código com IA para Python, TypeScript, JavaScript e Java no VS Code.
IntelliCode Completions
IntelliCode prevê linhas de código em Python, JS e TypeScript.
Uso especifico
Dotenv Official +Vault
Realce, oculte segredos e autocomplete, arquivos ENV.
Even Better TOML
Suporte para TOML.
HTML CSS Support
Completa atributos id e class no HTML para VS Code.
Iconify IntelliSense
Pré-Vizualização e auto-completação para icones do iconify.
Inline fold
Oculta partes do código (útil p/ Tailwind CSS).
IntelliSense for CSS class names in HTML
Auto-completa nomes de classes CSS no HTML.
JavaScript/TypeScript React/Next.js Snippets
Atalhos para diversas linguagens, bibliotecas e Framework.
markdownlint
Verifica estilo e erros em Markdown/CommonMark.
MDX
Suporte para a linguagem MDX.
PostCSS Language Support
Suporte para a linguagem PostCSS (útil p/ Tailwind CSS).
Prettier ESLint
Formata JS/TS com Prettier e ESLint.
Pretty TypeScript Errors
Deixa erros TypeScript mais claros e facilita a sua leitura.
Tailwind CSS IntelliSense
Ferramenta para Tailwind CSS no VS Code.
Thunder Client
Cliente REST API para vscode.
TypeScript Essential Plugins
Extensão VS Code p/ TypeScript com recursos avançados (sem IA).
Imagem da capa por unplash @kelsymichael
Top comments (5)
Arrasou, parabéns por reunir tantos conteúdos importantes!
obrigade por me dar forças pra criar esse artigo <3
Muito legal seu artigo! Pensa em fazer outro com algum comparativo, por exemplo: Thunder vs Insomnia ou VSCodium e VSCode?
Abraço!
[Espero que esteja tudo bem por aí em RS]
Agradeço a sugestão ^-^
Eu posso pesquisar e ver se consigo fazer um comparativo.
Essa lista foi feita com tudo que costumo usar, vou adicionar os que você sugeriu na postagem, muito obrigade de novo.
Sobre a situação por aqui, agora que a agua desceu a cidade virou um lixão a ceú aberto, e as pessoas que tiveram os lares atingidos vão receber apoio financeiro, mas a gente sabe que o problema é de urbanização e ambiental, só nos resta rezar ;(
Ótimo artigo! Aliás achei uma extensão do VS que tinha perdido haha o Inline Fold