Sites e ferramentas para Frontend

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

VS Code

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