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