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

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/

Extremamente util, eu abri somente por curiosidade e me surpeendi de mais... to chocado com esse conteudo insano... Obrigado por compartilhar

Brabissimo!

ícones
https://icomoon.io/

Artigo extremamente util, principalmente para novos projetos que ainda buscam uma identidade visual, ou inspirações.

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...

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 =)

Incrível, conheço um ótimo para almentar a resolução da imagem

https://picwish.com/photo-enhancer#apptype=saas-enhance

nossa vou salvar tudoo aqui , vai me ajudar mesmo kkkk estava precisando

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

muito bom, isso irá ajudar bastante iniciantes.

Excelente! Já salvei aqui nos favoritos pra quando eu precisar de material!

Já favoritei e tenho certeza que o post vai ser muito útil pra mim. E como contribuição eu sugiro adicionar o https://headlessui.com/ como biblioteca front-end.

Toppp já ta salvo

uau, muito legal mesmo todos esses sites, já coloquei aqui no notion e com certeza irei utilizar muito :D

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/

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

Obrigado por compartilhar, eu bem que tava precisando de algumas referencias, kkkkk

Cara, que top, quanto mais referência melhor, show de bola!

Boa, Igor! Resources extremamente úteis pra quem deseja criar algum projeto!

Parabéns, conteúdo de grande valor!

Sensacional, esse tipoo de conteúdo será muito util.

Que isso! Muito bom, parabéns pela iniciativa!

Aqui tem varios sites que focam no uso do Dark Mode - https://www.darkmodedesign.com/

Me ajudou bastante! Eu sempre fico horas precurando cores pra colocar nos projetos.

Extremamente útil, parabéns a todos os envolvidos nesse projeto massa!

Segue minha contribuição para quem está iniciando com o Desenvolvimento Web Vanilla:

https://www.w3schools.com

Vamos pra cima comunidade!

Nesse link pode encontrar diversos componentes e seu código html/css para estilização, super recomendo pra quem busca inspiração.

https://uiverse.io/all

Obrigado desde já pessoal!

Um ótimo post para favoritar, e claro, muito boa as dicas dos sites e com cada tópico explicado, muito bom este post !!

Obrigado pelas referências man! 🤩🤩

Olá pessoal!

Gostaria de contribuir lhes mostrando esse site que também serve para inspiração:

https://www.frontendeverything.in/

Obrigado desde já!

Gosto muito do site https://bootsnipp.com/ com muitas ideias para o que fazer com o bootstrap.

God post, salvou minha documentação no Notion, haha =)

Muito bom! Muito útil.

Muito legal!

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/

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

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...

Se me permite, eu adicionaria na lista o http://tachyons.io/
É excelente para os projetos que trabalhamos!

Parabéns pela iniciativa!

Cade o pix desse ser magnífico, rei dos desenvolvedores sem um guia!? hahaha

Valeu cara, ajudou muito

incrível! deixo aqui minha contribuição que nada mais é que modelos prontos em HTML/CSS
https://csslayout.io/

Muito bom ! Extremamente útil.

Deixo aqui minha contribuição também para Vue, uma lib que venho usando por um tempo.

https://vuetifyjs.com/

Valeu ! Abraço.

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.

Adiciona aí na parte de ícones:

https://tabler-icons.io/

Sobre favoritar o post do amigo, é simples né pessoal: utilize a funcionalidade de favoritos do seu navegador.

Já utilizei inúmeros desses sites no meu dia a dia, realmente umas ótima lista.

Muito show os links

Eu amo o svgrepo para catar uns svg bacana e colocar nos meus projetinhos.
Recomendo a todos.

Bibliotecas para front-end

• https://primereact.org/

Muito bom ter o conhecimento desses sites, salvou demais obrigado!!

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.

Lista muito boa!

Estou deixando uma que uso bastante para gerar Grids

Interactive CSS Grid Generator

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.

Segue mais um para essa lista MA RA VI LHO SA! 😍
https://freefrontend.com

tem esse repositorio de ideias de projetos pra iniciantes https://github.com/florinpop17/app-ideas muito bom também.

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

Muito legal, sempre tenho problema com as idéias e layouts kkkk

Muito bom, já favoritei aqui, muitos eu ainda não conhecia. Seria legal adicionar uns geradores de CSS, como animista , box shadown generetor, cubic bezier, entre outros.

Também tenho alguns:

Comprimi imagens para vários formatos possíveis, reduz muito o tamanho sem perder a qualidade
https://squoosh.app/

Guia, resumo de como usar o BEM (nomear classes no html)
https://9elements.com/bem-cheat-sheet/

Diversos símbolos html
https://www.toptal.com/designers/htmlarrows/

Um resumo visual sobre o GRID
https://grid.malven.co/

Fizeram o Windows 11 em React, é open source, só por curiosidade
https://win11.blueedge.me/

Excelente! Salvando aqui nos meus favoritos.

Muito bom, vou guardar está informação pois sempre utilizamos a maioria informado.

O que acham de criar uma pasta de favoritos com todos esses sites? Vou tentar criar aqui e compartilho com vocês!

Excelente conteúdo!

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

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

Excelente lista de sites, com certeza vem a somar bastante com todos os devs, sempre precisamos de auxilios de sites como o listados acima.

Muito útil, obrigado!

Muito boa a lista. Gostaria apenas de acrescentar o React Framework Ant Design https://ant.design/

Meu, você ajudou muito, fico sempre perdido em onde achar esse links que realmente ajudam no dia a dia valeu!!

Muito útil! Obrigado.

Esse post é ouro!

sensacional o conteudo irmão. Muito conteudo maneiro mesmo

Boaa, vai me ajudar bastante quando eu for fazer meu portfólio!!

Agradeço pelos links, ajudou muito a encontrei até o que não estava procurando...

Muito obrigado pelo post valioso!

Segue os meus 0,02 ml nesse oceano de facilitações:

https://jmespath.org/ # Para ajudar a construir aquela query jmes braba no json.
https://jsonlint.com/ # Para ajudar com o lint daquele json gigante.

Uma boa sugestão para os desenvolvedores é o site Free for dev: https://free-for.dev/#/
Nele temos diversas ferramentas de graça de diversas utilidades, façam um bom uso!

Muito bom, tem o https://dribbble.com/ que eu uso pra me inspirar também, lá tem uma aba somente pra web design.

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.

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 😂

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

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.

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

Sempre bom esse tipo de conteúdo.