Executando verificação de segurança...
106
igorxaviers
2 min de leitura ·

🔗 Sites úteis para devs [inspiração/ilustração/icones/mockups/fotos/fontes/cores]

Primeiro post aqui, espero que agregue um pouquinho a todos!

Uma lista de links que podem ser extremamente úteis para os devs front-end:

Inspiração:

Ilustrações

Icones gratuitos

Mockups

Fotos

Tipografia/Fontes

Cores/Paletas

Bibliotecas front-end

Geradores CSS

Ferramentas diversas

Editores/Compiladores online

Geradores IA

Resources em geral

Quem tiver mais sugestões, deixem nos comentários também!!!

Edit: Galera muito obrigado a todos que comentaram e deram um "tabup" nesse post, estou muito feliz que esses links possam vir a ajudar todos 😁

Fonte: https://www.instagram.com/ui.val/

5
JGLinsDias

Igor, abre uma nova categoria, "IA" com geradores de texto e geradores de imagem!

Geradores de Imagem por IA:

https://playgroundai.com/

Geradores de Texto por IA:

https://textsynth.com/playground.html

Alguns outros links que podem ser úteis:

Freebies diários de fontes, ícones, mockups e mais:

https://freedesignresources.net/

MOdelos de Email em HTML:

https://reallygoodemails.com/

Stock para B-rolls e Vídeos free

https://mixkit.co/

E free frontends

https://freefrontend.com/

1
1
4
1
3
3
1
3
1
3
joaolesko

Muito show ter esse tipo de conteúdo pra orientar a galera, principalmente quem esta começando e não sabe onde procurar ainda. Além disso, atualmente estou fazendo a matéria de desenvolvimento web no curso de ADS e em nenhum momento os professores orientaram a utilizar ícones ou imagens de licença livres nos trabalhos. Coisa que é importante, ainda mais pra galera que ta começando, quer montar porrifólio e afins...

1
igorxaviers
Autor
Autor

Exatamente! Muitos desses sites eu descobri pesquisando mesmo, faz muita diferença ter várias opções para conseguir encontrar a melhor opção. Essa parte de utilizar imagens com licença livre é realmente importante!!

obrigado pelo comentário 👌

2
OtavioCleyderman

Aqui um exemplo de post para favoritar(Quando tiver essa opção) pois sempre precisamos de algo que está aqui para os projetos. Sempre bate um branco, um esquecimento e a pesquisa leva um tempinho além do risco de tirar o foco hahaha
Obrigado pelo compilado =)

1
igorxaviers
Autor
Autor

Fico feliz que esse já seja um post pra ser futuramente favoritado 🌟 e que vai ajudar. E realmente ter esses sites facilita muuuito!!

Obrigado pelo comentário 🤗

2
1
2
1
2
kennedybm

Parabéns pela iniciativa, estou reformulando o meu portifolio, e o que mais me trava e me faz passar muito mais tempo, é exatamente essa parte de inspiração, decicidir o que vou fazer

2
1
2
2
1
1
2
2
2
RamsesMartins

Excelente conteúdo! Mas eu adicionaria também o Gitpod e o Codepen.
Gitpod é quase um "VS CODE" virtual em que você consegue abrir e programar em cima dos seus repositórios criados.
http://gitpod.io/

Já o codepen, eu gosto de ver ele como um verdadeiro parquinho, visto que nele você consegue ter acesso a projetos surpreendentes feitos somente com HTML, CSS e Javascript puro.
https://codepen.io/

2
Andretech

Excelente idéia, é muito útil ter estes links na hora de desenvolver. Gostaria de compartilhar alguns que conheço:

Paletas de cores baseadas em fotos da natureza:
Colorpalettes.earth

Gerador de Paletas de cores:
Paletton

Gerador CSS Glassmorphism:
Glassmorphism-Generator

Gerador CSS Neumorphism:
Neumorphism.io

Alguns truques de CSS:
CSS Houdini

Gerador de "bolhas":
Blobmaker.app

Gerador de "ondas":
Getwaves.io

Site que gerar fotos de trechos código para compartilhar:
Carbon

Site para testar a compatibildade de parâmetros com os navegadores:
Caniuse

Documentação para devs:
Devdocs.io

Demonstração do Stable Diffusion 2(IA que gera imagens através de texto):
Stable-diffusion-huggingface

2
2
2
1
2
2
2
2
1
2
1
2
2
2
1
2
2
2
2
2
2
1
2
FeliMatos

Excelente site com várias ferramentas para desenvolvedor, que contém diversos geradores, como gerador de CPF, gerador de cartão de crédito e até gerador de pessoa (com nome, e-mail, cpf, endereço) para você só copiar e colar, e ainda pode ser gerado um json com essas informações.

Além de gerador, o site também possui validadores de documentos, funções strings, funções matemáticas e funções de data.

Pessoalmente, eu utilizo bastante o gerador de pessoa.

O site é esse: https://www.4devs.com.br/

1
2
Moeb

Cara eu queria muito poder favoritar/guardar no meu perfil essa postagem, pq eu sempre busco sites de referência para mockup e ilustração e acaba sendo bem complicado de encontrar. Vou deixar algumas sujestões minhas:

Icons

https://game-icons.net

2
rtakaoka

Opa! Muito obrigado, Igor!
Esses sites vão me ajudar bastante no dia a dia.

Deixo aqui a minha contribuição para quem precisa manipular e converter arquivos, como imagens e PDF (mas não somente esses kkkk).

Tiny Wow 🤯

Sempre que preciso dessas coisas eu uso esse site:

  • Converter PDF em Texto
  • Converter JPG em WEBP
  • Remover fundo de imagem
  • Merge/Split de PDF
  • Extrair imagem de PDF,
  • e por aí vai...
2
1
2
2
2
1
2
1
RodrigoMnds

Gostei bastante da recomendação e gostaria de "re-recomendar" o replit, eu uso o aplicativo dele e recomendo bastante, para quem tem apenas celular para programar é um grande adianto.
Antes do replit eu usava o Acode, que é bom também, além de, diferente do replit, ser offline, mas nesse não há uma grande variedade de linguagens, como o React, que foi o que me fez migrar. Mesmo assim eu continuo tendo ambos no meu dispositivo.
Enfim, quem não começou a programar por não ter computador, recomendo dar uma olhada em um desses.
só para fechar, no Acode eu usava Html, css e js.

1
1
1
1
1
1
1
daniels

Esse é o tipo de post que vale a pena ser salvo, pois agrega valor, já fiz a sugestão dessa feature no projeto no github e em breve voltaremos aqui para salvar esse post.

1
1
1
emendesgs

Muito bom, ajuda muito ter um ponto central de utilitario.

Aqui vai minha contribuição, https://replit.com/ , um editor online com diversos templates de código e mais algumas ferramentas. Sempre uso quando preciso testar algum código rapidamente.

1
1
1
mCszao

Ajudou demais!! Principalmente pra mim que estou no começo sempre acabo ficando um tempo procurando sites para fontes por exemplo

1
1
1
1
1
1
1
1
1
1
1
1
Hayckes

conteudo importanticimo, cansei de encontrar site com uma boa utilidsde para fronte end, mas acabar esquecendo o endereço do site, com uma lista disponibilizada aqui e ainda mais bek organizada, facilitara muito quando eu precisar

1
rbthay

Excelente conteúdo!
Estava procurando ferramentas para efeitos e animação e, com certeza, o post vai ajudar.
Aproveito e deixo uma sugestão para os produtores de conteúdo sobre plugins do figma

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
Jonntz

Cara, você salvou demais!!

Tem muita coisa em muito lugar na Internet e é super necessário agregar tudo em um lugar só pra facilitar principalmente pra quem tá começando.

1
marinacrachi

Conteúdo valiosíssimo!
Pra mim que me considero uma pessoa com muito mau gosto (hahaha, é), é bom ter onde buscar inspirações que fujam do terror que é minha mente 😂

1
gahspar

muito legal,estava pensaando em fazer justamente a mesma coisa mas com projetos no figma para o pessoal que esta iniciante poder exercitar

1
ViniUme

Perfeito

O criador desse post está de parabéns. Seria ótimo se desenvolvessem uma feature para salvar posts, para não perder esse eu vou salvar o link em um bloco de notas.

1
otaviojc

Ha tinha esquecido esses links estão enviando para a pagina destino mas não seria legal eles abrirem outra pagina ao invez de redirecionar? Mas msm assim vlw mesmo eu to aprendendo e sempre corro atras de sites pra buscar cores e icones e isso ja ajuda bakarai!!! :D