Sites e ferramentas para Frontend
Tags: frontend, beginners, productivity, webdev
Published: 2024-06-02 18:57:46

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](https://developer.mozilla.org/pt-BR/docs/Web)

React
[https://pt-br.react.dev/learn](https://pt-br.react.dev/learn)

> Em inglês

React
[https://learning-zone.github.io/react-basics/](https://learning-zone.github.io/react-basics/)

CSS
[CSS Tricks](https://css-tricks.com/)


---

### Programas

[VS Code](https://code.visualstudio.com/)

---

#### Ferramentas

Components e efeitos.
[Free Frontend](https://freefrontend.com/)

Buscador para ferraments Frontend
[Coding Heroes](https://codingheroes.io/resources/)

Testar e compartilhar codigo frontend.
[Codepen](https://codepen.io/)

Teste para acessibilidade de cores para TailwindCSS
[Colour a11y](https://colour-a11y.vercel.app/)

> Geradores

Geradores de códigos para várias linguagens e finalidades.
[Web Code Tools](https://webcode.tools/)

Gerador de cores de alto constraste para acessibilidade
[Random a11y](https://randoma11y.com/)

Gerador de paleta de cores para acessiblidade
[Accessible Color Palette Generator | WCAG Compliant](https://venngage.com/tools/accessible-color-palette-generator)

Gerador de botão
[CSS3 Button Generator](https://css3buttongenerator.com/)

Gerador de efeito Glassmorphism(Vidro)

CSS
(Glassmorphism CSS)[https://css.glass/]

Tailwind
(Tailwindcss Glassmorphism Generator)[https://tailwindcss-glassmorphism.vercel.app/]
(gradienty)[https://gradienty.codes/]

> Sites para treinar


> Em Inglês

Recrie paginas da web reais.
[Frontend Practice](https://www.frontendpractice.com/)

Estude resolvendo problemas e questões de entrevistas para emprego.
[Code Wars](https://www.codewars.com/)

Faça os desafios e aprimore seus conhecimentos frontend.
[Frontend Mentor](https://www.frontendmentor.io/)

Aprenda vários tipos de tecnologia em cursos gratuitos geridos pela comunidade.
[Tech IO](https://tech.io/)

Aprenda a codar codando games!
[Coding Games](https://www.codingame.com/start/)

---

##### Extensões VS Code

>Uso geral

[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
Ajuda a renomear tags.

[Bracket Highlighter](https://marketplace.visualstudio.com/items?itemName=Durzn.brackethighlighter)
Realça texto entre símbolos personalizáveis.

[Console Ninja](https://marketplace.visualstudio.com/items?itemName=WallabyJs.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](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)
Assistente para mensagens e descrição para commit em Conventional Commits.

[CSS Var Complete](https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar)
autocompletar variáveis CSS globais (e mais) com suporte a SCSS, LESS e outras linguagens.

[ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
Integrar ESLint (validação de código JS). Instale o ESLint local ou global (usando algum gerenciador de pacotes).

[File Structure Tree](https://marketplace.visualstudio.com/items?itemName=oliverdantzer.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](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
Deixa a indentação do código mais legível.

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Servidor de desenvolvimento local com atualizaçao automática.

[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
Completa automaticamente o nome dos arquivos.

[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
Prettier é um formatador de código automático para várias linguagens.



>AI assistentes de código

[Codeium: AI Coding Autocomplete and Chat](https://marketplace.visualstudio.com/items?itemName=Codeium.codeium)
Completa códigos, conversa e busca em mais de 70 linguagens.

[IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
IntelliCode dá sugestões de código com IA para Python, TypeScript, JavaScript e Java no VS Code.

[IntelliCode Completions](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode-completions)
IntelliCode prevê linhas de código em Python, JS e TypeScript.


>Uso especifico

[Dotenv Official +Vault](https://marketplace.visualstudio.com/items?itemName=dotenv.dotenv-vscode)
Realce, oculte segredos e autocomplete, arquivos ENV.

[Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml)
Suporte para TOML.

[HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
Completa atributos id e class no HTML para VS Code.

[Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
Pré-Vizualização e auto-completação para icones do iconify.

[Inline fold](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold)
Oculta partes do código (útil p/ Tailwind CSS).

[IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
Auto-completa nomes de classes CSS no HTML.

[JavaScript/TypeScript React/Next.js Snippets](https://marketplace.visualstudio.com/items?itemName=afifu.vscode-js-ts-react-nextjs-snippets)
Atalhos para diversas linguagens, bibliotecas e Framework.

[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
Verifica estilo e erros em Markdown/CommonMark.

[MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
Suporte para a linguagem MDX.

[PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
Suporte para a linguagem PostCSS (útil p/ Tailwind CSS).

[Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)
Formata JS/TS com Prettier e ESLint.

[Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
Deixa erros TypeScript mais claros e facilita a sua leitura.

[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
Ferramenta para Tailwind CSS no VS Code.

[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
Cliente REST API para vscode.

[TypeScript Essential Plugins](https://marketplace.visualstudio.com/items?itemName=zardoy.ts-essential-plugins)
Extensão VS Code p/ TypeScript com recursos avançados (sem IA).

---

Imagem da capa por unplash [@kelsymichael](https://unsplash.com/pt-br/@kelsymichael)