Skip to content

Links úteis e recursos essenciais para desenvolvedores frontend.

License

Notifications You must be signed in to change notification settings

yurimutti/recursos-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

Background do repositório

Este repositório reúne links úteis e recursos essenciais para desenvolvedores frontend. Aqui você encontrará referências de bibliotecas, frameworks, tutoriais, ferramentas, e dicas que podem agilizar e aprimorar seu trabalho no desenvolvimento de interfaces. O objetivo é ser uma fonte prática de consulta para facilitar o aprendizado e o desenvolvimento de soluções frontend.

Contribuições são bem-vindas! Se você conhece um recurso interessante, sinta-se à vontade para abrir um pull request.

Indice

Avatares

Link Descrição Grátis
Avatar Generator Gerador de avatar para qualquer um fazer seu avatar pessoal facilmente Sim
Random User Generator API para gerar dados aleatórios de usuário Sim
Ui Faces Plugin / API de avatar Um mês

⬆ Voltar para o indice

Compartilhar fragmento de código

Link Descrição Grátis
Carbon Crie e compartilhe belas imagens de seu código-fonte Sim
Ray Crie belas imagens do seu código! Sim

⬆ Voltar para o indice

Compressor de imagens

Link Descrição Grátis
TinyPNG Compressão inteligente de PNG e JPEG Sim
websiteplanet Comprima seus arquivos PNG / JPG em até 80% e mantenha total transparência Sim
Squoosh Compressão de imagens para web em diversos formatos. Sim

⬆ Voltar para o indice

Cores

Link Descrição Grátis
0to255 Ferramenta de cor que facilita o clareamento e o escurecimento das cores Sim
Adobe Color Gerador de paleta de cores Sim
Brand Palettes Códigos de cores e paletas do logotipo Sim
calcolor.co Crie paletas específicas para projetos e compartilhe-as com outras pessoas Sim
Color Hunt Plataforma para inspiração de cores com milhares de paletas de cores Sim
Color.review Avalia contraste entre texto e background Sim
Color-hex Fornece informações sobre cores, incluindo modelos de cores (RGB, HSL, HSV e CMYK) Sim
ColorKit Gera escalas de cores misturando os tons entre duas cores Sim
ColorsLol Paletas de cores excessivamente descritivas Sim
Colorsinspo Paletas de cores que você pode usar diretamente com um clique Sim
ColorSuply Um seletor de cores para designers e ilustradores Sete visitas
ColorZilla Um poderoso editor de gradiente CSS semelhante ao Photoshop da ColorZilla Sim
colourco.de Ferramenta de design online que permite combinar cores de forma fácil e intuitiva Sim
Contrast Ratio Indicador de contraste Sim
Coolors Crie a paleta perfeita ou inspire-se com milhares de belos esquemas de cores Sim
Culrs As cores que funcionam juntas são selecionadas e moldadas em paletas de qualidade que você pode incorporar Sim
Design Seeds Várias paletas de cores Sim
Flat Ui Colors Um conjunto total de 280 cores está ao seu alcance para COPIAR / COLAR para seu próximo projeto, design, apresentação Sim
Khroma Usa IA para aprender de quais cores você gosta e cria paletas ilimitadas para você descobrir, pesquisar e salvar Sim
Name that Color Informa o nome da cor escolhida Sim
Paletton Projetado para ajudar todos os tipos de projetos coloridos, desde o trabalho profissional até os projetos escolares dos seus filhos Sim
Scheme Color Um site bem cotado para baixar, criar e compartilhar milhares de belas combinações de cores Sim
Tint and Shade Generator Crie facilmente tons e sombras que correspondam à saída do Chrome DevTools, PostCSS e Sass Sim
uiGradients Uma coleção escolhida a dedo de lindos gradientes de cores para designers e desenvolvedores Sim
UI Colors Cria uma paleta de cores conforme a escala do TailwindCSS, pode exportar como JSON, SCSS e SVG. Sim

⬆ Voltar para o indice

CSS

Link Descrição Grátis
Animate.css É uma biblioteca de animações prontas para uso em vários navegadores para uso em seus projetos da web. Sim
Animista É um lugar onde você pod e brincar com uma coleção de animações CSS pré feitas, e obter somente as que você vai usar de verdade. Sim
Autoprefixer É um plugin PostCSS que analisa seu CSS e adiciona prefixos de fornecedores. Sim
Bestcssbutton É uma ferramenta online gratuita que permite criar estilos de botões HTML e CSS para vários navegadores. Sim
Box Shadow CSS Generator É uma ferramenta online gratuita para gerar gradientes, border radius, noise texture e box shadow. Sim
Calculadora de especificidade CSS Uma maneira visual de entender a especificidade do CSS. Altere os seletores ou cole os seus. Sim
Can I Use Fornece tabelas de suporte de navegador atualizadas para suporte de tecnologias front-end da web em navegadores de desktop e móveis. Sim
Clip-path converter O conversor está apenas preparando o caminho SVG para ser usado no caminho do clipe CSS. Sim
Contrast Ratio Este texto de amostra tenta demonstrar visualmente como essa combinação de cores é legível, para texto normal, itálico, negrito ou negrito itálico de vários tamanhos e estilos de fonte. Sim
CSS clip-path maker A propriedade clip-path permite criar formas complexas em CSS, recortando um elemento em uma forma básica (círculo, elipse, polígono ou inserção) ou em uma fonte SVG. Sim
CSS Formatter Formate seu CSS, HTML e Javascript para embelezar e limpar seu código para facilitar a leitura. Sim
CSS Gradient É um pequeno site feliz e uma ferramenta gratuita que permite criar um fundo gradiente para sites. Sim
CSS Layout Layouts e padrões populares feitos com CSS. Dependências zero. Sem frameworks. Sem Hacks CSS. Casos de uso reais. Boas práticas. Sim
CSS Validation Service Analisa folhas de estilo em cascata (CSS) e documentos (X)HTML com folha de estilo Sim
CSS3 generator Gerador de código CSS3. Border Radius. Box Shadow. Text Shadow. RGBA. Entre outros Sim
CSS typeset É uma ferramenta prática de tipografia que permite que designers e desenvolvedores testem e aprendam interativamente como estilizar seu conteúdo da web. Sim
Cubic Bezier Gerador de Cubic-Bezier Sim
Pure CSS Components Um conjunto de componentes de interface do usuário comuns usando o poder do CSS e sem Javascript. Sim
Easing functions Easing functions, especificam a taxa de alteração de um parâmetro ao longo do tempo. Esta página ajuda você a escolher a função de atenuação correta. Sim
Fancy Border Radius Um gerador visual para construir formas de aparência orgânica com a ajuda da propriedade border-radius do CSS3. Sim
How To Center Centralizar em CSS é um pé no saco. Essa ferramenta os consolida e fornece o código de que você precisa para cada situação. Sim
HTML5 Canvas Tutorials Diversos tutoriais sobre os recursos do HTML5 e CSS3. Sim
Referência CSS da MDN Use esta referência CSS para navegar por um índice alfabético de todas as propriedades CSS padrão. Sim
Shape Divider Ferramenta gratuita para tornar mais fácil para designers e desenvolvedores exportar um belo SVG. Sim
The Echoplex Flexbox Playground flexbox CSS online e gerador de código. Sim
Transition CSS Repositorio com diversas transações, usando CSS. Sim
Wait Animate O Animate calcula as porcentagens de keyframe atualizadas com um tempo de espera, o que significa que você pode inserir um atraso entre cada iteração da animação usando CSS puro, sem JavaScript. Sim
Wow JS É um plugin JavaScript que revela animações quando você rola. Muito amigo do Animate.css. Sim

⬆ Voltar para o indice

Desafios

Link Descrição Grátis
JavaScript30 30 desafios de JS. Sim
30 days CSS 30 desafios de CSS. Sim
Ace Front-end Ace Front End tem desafios de codificação completos e práticos, com um passeio detalhado de uma solução de entrevista perfeita. Sim
App Ideas Repositorio com diversos projetos separados por niveis. Esta não é apenas uma lista simples de projetos, mas uma coleção que descreve cada projeto em detalhes suficientes para que você possa desenvolvê-lo do zero. Sim
Codier Explore e tente desafios de codificação de front-end. Sim
Codewell Melhore suas habilidades em HTML e CSS praticando em modelos de design reais. Sim
CSS Battle Use suas habilidades de CSS para replicar desafios com o menor código possível. Sim
DevChallenge Melhore suas habilidades com desafios de front-end, back-end e mobile. Sim
Edabit Nossos desafios pequenos são um atalho no labirinto de aprender a codificar. Ganhe XP, desbloqueie conquistas e suba de nível. Fique realmente bom em codificação, muito rápido. Sim
Front-end Challenges O principal objetivo do repositório é testar seu conhecimento usando o desafio de empregos reais. Sim
Frontend Mentor Resolva desafios reais de HTML, CSS e JavaScript enquanto trabalha com designs profissionais. Junte-se a 170.842 desenvolvedores que criam projetos, revisam códigos e ajudam uns aos outros a melhorar. Sim
JSBeginners Obtenha mais de 100 ótimas ideias para JavaScript iniciante Sim
JSchallenger Desafios de Javascript grátis. Aprenda Javascript online resolvendo exercícios de codificação. Javascript para todos os níveis. Resolva tarefas Javascript do iniciante ao avançado. Sim
WoMakersCode Front-end Challenges Uma série de desafios e tutoriais sobre Desenvolvimento Front-end. Sim

⬆ Voltar para o indice

Design Systems

Link Descrição Grátis
Design System Plataforma unificada contendo um banco de dados das diversas Ferramentas de Design atuais, organizado por sistemas, componentes, diretórios e blueprints. Sim

⬆ Voltar para o indice

Hospedagens

Link Descrição Grátis
000WebHost Hospedagem de Sites Grátis com PHP, MySQL, Criador de Sites grátis, cPanel e sem anúncios. Sua hospedagem de sites é quase ilimitada e com domínio. Sim
Github Pages Hospedado diretamente de seu repositório GitHub. Basta editar, enviar por push e suas alterações estarão ativas. Sim
Heroku Heroku é uma plataforma como serviço (PaaS) que permite aos desenvolvedores construir, executar e operar aplicativos inteiramente na nuvem. Não
Fly Fly é uma plataforma como serviço (PaaS) para executar aplicações full stack e bancos de dados próximos a seus usuários. Sim ou preço sob demanda conforme o consumo
CloudFlare Pages Cloudflare Pages é uma plataforma JAMstack para desenvolvedores frontend para colaborar e implantar sites. Sim ou planos de UD$ 20.00 e US$ 200.00
InfinityFree Hospedagem de sites totalmente gratuita com espaço em disco e largura de banda ilimitados. Sim
Netlify Um fluxo de trabalho intuitivo baseado em Git e uma plataforma sem servidor poderosa para construir, implantar e colaborar em aplicativos da web. Sim
Vercel O Vercel combina a melhor experiência do desenvolvedor com um foco obsessivo no desempenho do usuário final. Nossa plataforma permite que as equipes de front-end façam seu melhor trabalho. Sim
Render O Render é uma plataforma de hospedagem em nuvem que oferece serviços para implantar, dimensionar e gerenciar aplicativos e sites. Eles oferecem suporte a diversas linguagens de programação, frameworks e bancos de dados. Sim ou preço sob demanda conforme o consumo
Railway O Railway é uma plataforma que facilita a implantação e o gerenciamento de aplicativos da web e serviços back-end. Ele permite que os desenvolvedores publiquem seus aplicativos na nuvem de forma rápida e fácil, oferecendo suporte a uma variedade de tecnologias e frameworks populares. Sim ou preço sob demanda conforme o consumo

⬆ Voltar para o indice

HTML

Link Descrição Grátis
Dive Into HTML5 Seleção de funcionalidades da especificação da HTML5 e outras especificações interessantes escolhidas a dedo. Sim
HTML5 Boilerplate Ajuda você a criar sites ou aplicativos da web rápidos, robustos e adaptáveis. Sim
Índice de elementos HTML Referência rápida de elementos que são novos ou foram redefinidos em HTML5. Sim
Referência HTML da MDN Esta página lista todos os elementos HTML. Eles são agrupados por função para ajuda-lo a achar o que quer fácilmente. Sim
Validador de código HTML Este validador verifica a validade da marcação de documentos da Web em HTML, XHTML, SMIL, MathML, etc. Sim

⬆ Voltar para o indice

Ícones

Link Descrição Grátis
Boxicons Ícones simples de vetor cuidadosamente elaborados para designers e desenvolvedores. Sim
CSS GG Ícones de interface de usuário CSS, SVG e Figma de código aberto. Disponível em SVG Sprite, componentes estilizados, NPM e API. Sim
Eva Icons Eva Icons é um pacote de mais de 480 ícones Open Source lindamente elaborados para ações e itens comuns. Sim
Favicon Generator Gere todos os ícones de que você precisa para navegadores de desktop, iPhone / iPad, dispositivos Android, dispositivos Windows 8 e muito mais. Sim
Feather Ícones de código aberto simplesmente lindos Sim
Flaticon Baixe gratuitamente ícones vetoriais e adesivos para seus projetos. Recursos feitos por e para designers. Formatos PNG, SVG, EPS, PSD e BASE 64. Sim
Font Awesome Obtenha ícones vetoriais e logotipos sociais em seu site com Font Awesome, o conjunto de ícones e kit de ferramentas mais popular da web. Sim
Free icons A maior base de dados de ícones gratuitos, disponível nos formatos PNG, SVG, EPS, PSD e BASE 64. Sim
Freepik Recursos gráficos para todos encontre Vetores, PSD e Fotos gratis Sim
Heroicons Um conjunto de mais de 450 ícones SVG gratuitos de alta qualidade licenciados pelo MIT para você usar em seus projetos da web. Disponível como ícones SVG básicos e por meio das bibliotecas React e Vue originais. Sim
Icon Icons Melhores ícones gratuitos para uso pessoal e comercial SVG - PNG Sim
Icon Finder O Iconfinder é o maior mercado do mundo para ícones vetoriais e raster nos formatos SVG e PNG. Sim
Icon Moon IcoMoon fornece um pacote de ícones vetoriais, junto com um aplicativo HTML5 gratuito para fazer fontes de ícone personalizadas ou sprites SVG. Plano Grátis, Plano Básico, Plano Ilimitado.
Icons8 Baixe gratuitamente elementos de design: ícones, fotos, ilustrações de UX para seus projetos. Sim
Icons Cout SVGs selecionados, ícones vetoriais, ilustrações, gráficos 3D e animações Lottie. Mais de 3.000 ativos adicionados todos os dias. Sim
Icon SVG Ícones personalizáveis rápidos para seus projetos Sim
Ikonate Ferramenta simples para localizar, personalizar e gerar ícones SVG comuns para o seu projeto. Sim
Ion Icons Ícones projetados para uso em aplicativos da web, iOS, Android e desktop. Suporte para SVG e fonte da web. Sim
Line Awesome Swap Font Awesome para ícones de linha modernos em uma linha de código. Sim
Newsbi Icon Pack Faça o design de maneira mais inteligente. Recursos de UI de classe mundial para economizar custos e ajudar a construir seu produto com mais rapidez. Sim
Noun Project Apresenta a coleção mais diversa de ícones e fotos de todos os tempos. Baixe SVG e PNG. Sim
Pixelart Icons Mais de 350 ícones de estilo pixel art de código aberto, em uma cor e feitos com uma grade de 24x24px. Sim
Radix Icons Um conjunto nítido de 15 × 15 ícones projetados pela equipe Modulz. Sim
Remix Icon É um conjunto de símbolos de sistema de estilo neutro de código aberto elaboradamente elaborado para designers e desenvolvedores. Todos os ícones são gratuitos para uso pessoal e comercial. Sim
Shape SO Shape permite que você personalize o estilo, as cores e as bordas de ícones e ilustrações estáticos e animados. Sim
Simple Icons 1978 Ícones SVG gratuitos para marcas populares. Sim
Steamline Free 100.000 ícones, ilustrações e emoji para todos os seus projetos. Personalize-os de acordo com sua marca em segundos. Plano Gratuito, Plano All icons, Plano All Illustrations, Plano Super Bundle
SVG Icons Escolha um ícone. Tudo que você precisa fazer é copiar e colar o código HTML. Sim
Tabler Icons 1280 Ícones SVG gratuitos totalmente personalizáveis. (Licença MIT). Sim
Tilda Icons Baixe gratuitamente ícones SVG e use-os em seus projetos. Não se esqueça de vincular de volta à fonte. Sim
Lucide Lucide Icons é uma coleção de ícones de código aberto, com suporte para vários frameworks, incluindo Vue.js, React, Svelte, Preact e Angular. Sim
⬆ Voltar para o indice

Ilustrações

Link Descrição Grátis
3000 Hands Uma enorme biblioteca gratuita de formas 3D lindamente renderizadas. Sim
404 illustrations Imagens modernas e prontas para usar na sua página 404. Sim
404 illustrations Fun Faça uma viagem única pelas páginas de erro 404 em seu site. Use essas ilustrações que descrevem melhor do que palavras. Sim
Abstrakt Baixe nossas ilustrações abstratas gratuitas e premium para sua próxima página de destino, aplicativo móvel e apresentação. Sim / 20€ Mês.
Absurd Design Que tal ilustrações absurdas para seus projetos? Leve cada usuário em uma jornada individual através de sua própria imaginação. Sim
Ara Illustration Crie suas próprias composições de cena de ilustração. Obtenha o Ara gratuitamente com licenças pessoais e comerciais Sim
Black illustrations De seus sites, aplicativos da web a aplicativos móveis, criamos esses designs para serem usados em qualquer lugar. Sim / O preço das ilustrações pode variar.
Blob Marker É uma ferramenta de design generativa gratuita feita para ajudá-lo a criar rapidamente formas SVG aleatórias, exclusivas e com aparência orgânica. Sim
Blush Crie e personalize facilmente ilustrações impressionantes com coleções feitas por artistas de todo o mundo. Sim / $ 12 Mês.
Construtor de Ilustrações Crie ilustrações personalizadas com apenas alguns cliques usando nosso construtor online. Sim
Control Uma grande biblioteca de ilustrações com estilo e tipos de ação personalizáveis. Use o construtor para criar a cena que você está procurando. Sim / $38 mês ou $89 trimestral.
Delesign Use nossos designs livres de royalties para seu site, mídia social, blog, boletins informativos por e-mail e muito mais. Sim
Design.ai Ilustrações editáveis em cores gratuitas para elevar suas comunicações visuais. Sim
DrawKit Recursos de ícones e ilustração vetorial desenhada à mão, perfeitos para o seu próximo projeto. Sim
Flow Lava Crie um projeto atraente e único com personagens futuristas por um construtor fácil de usar. Sim / 89$ Trimestre
Frellustrations Coleção de imagens de fundo de ilustrações ou vetores de alta resolução para sites e páginas de destino modernos. Sim
Fresh Folk Uma biblioteca de ilustração de pessoas e objetos. Sim
Get Waves Um gerador de ondas SVG gratuito para criar ondas SVG exclusivas para o seu próximo design da web. Escolha uma curva, ajuste a complexidade, randomize. Sim
Get Illustrations Crie uma biblioteca de ilustrações de integração para seu próximo projeto. Sim
Glaze Produtos, marcas e apresentações memoráveis começam com nosso biblioteca de ilustração royalty-free com curadoria. Sim
Growww Um conjunto de 8 ilustrações simples, em preto e branco e elegantes para páginas de destino, telas de dispositivos móveis e outros fins editoriais. Sim
Humaaans Misture e combine ilustrações de pessoas com uma biblioteca de design. Sim
Illustrations Você pode baixar todas as ilustrações gratuitamente e usá-las para criar um design incrível - páginas de destino, aplicativos móveis ou apresentações. Sim
IRA Design Usando nossos gradientes impressionantes e componentes de esboço desenhados à mão. Sim
Karthik Srinivas Diversas ilustrações e icones para você usar em seus projetos. Sim
Kukla Kit Pacote enorme de elementos 3D acessíveis diretamente do Figma. Sim
Logo Maker Crie um cartão de visita deslumbrante em minutos. Navegue por milhares de designs com curadoria profissional e edite-os com nosso criador de cartões de visita. Sim
Lukasadam Gratuito para uso comercial e pessoal sob a licença CC0 (licença MIT). Nenhuma atribuição necessária. Sim
Manypixels Illustration Gallery Descubra novas ilustrações todas as semanas. Use-os nas páginas de destino, postagens de blogs, boletins informativos, gráficos de mídia social. Sim
Mega Doodles Pack Esta é uma coleção de ilustrações vetoriais desenhadas à mão. Mais de 160 elementos de doodle (nuvens, cactos, estrelas, monstros, donuts, foguetes, pizzas, corações, tênis, lápis, diamantes, gatos, mãos, arco-íris, flechas, telefones celulares, etc). Sim
Mixkit Art Belas Artes e Ilustração para você usar em seu próximo projeto criativo, de graça. Sim
Open Doodles Uma biblioteca de ilustrações esboçadas de pessoas, gratuita para uso pessoal e comercial. Sim
Open Peeps É uma biblioteca de ilustração desenhada à mão para criar cenas de pessoas. Sim
Ouch Ilustrações grátis para melhorar o seu projeto Ouch ajuda os criadores que não sabem desenhar a superar a falta de gráficos de qualidade. Sim
Paper Illustrations Faça seu trabalho se destacar com ilustrações em papel conjunto incrível de ilustrações em papel absolutamente grátis para uso pessoal e comercial. Sim
Sapiens É uma bela biblioteca de ilustrações modulares de personagens baseadas em componentes para Sketch e Figma. Sim
Scribbles Mais de 100 rabiscos vetorizados para apimentar seus projetos de design. Sim
Smash Illustrations Ilustração incrível construtor com colorido e personagens da moda. Sim
Story Set Ilustrações personalizáveis gratuitas incríveis para seu próximo projeto personalize, anime e baixe nossas ilustrações para criar páginas de destino, aplicativos ou apresentações. Sim
Storytale Ilustrações da web de alta qualidade com assinatura simples use essas ilustrações para dar vida aos seus sites, aplicativos e apresentações. Sim
Stubborn Generator Crie seu personagem ideal, alterando e sobrepondo-os, usando nosso gerador absolutamente de graça. Sim
Toy Faces É uma biblioteca divertida e diversificada de avatares 3D para seus modelos de design e projetos comerciais. Sim
Undraw Navegue para encontrar as imagens que atendem às suas necessidades. Use a geração instantânea de imagens coloridas para combinar com a identidade de sua marca. Sim
Vector Creator Maneiras ilimitadas de criar designs incríveis para cada necessidade. Sim
Whoosh! Illustration Kit A mais alta qualidade Mockups, ilustrações e ferramentas de interface do usuário. Sim / O preço das ilustrações pode variar.

⬆ Voltar para o indice

Edição de Imagens

Link Descrição Grátis
Photopea O Online Photo Editor permite editar fotos, aplicar efeitos, filtros, adicionar texto, cortar ou redimensionar imagens. Sim
Canva Uma plataforma de design gráfico que permite aos usuários criar gráficos de mídia social, apresentações, infográficos, pôsteres e outros conteúdos visuais. Sim

⬆ Voltar para o indice

Editor de Markdown

Link Descrição Grátis
StackEdit Você pode sincronizar seus arquivos com o Google Drive, Dropbox e GitHub. Ele também pode publicá-los como postagens de blog no Blogger, WordPress e Zendesk. Sim
Typora Ele remove a janela de visualização, o alternador de modo, os símbolos de sintaxe do código-fonte do markdown. E fornece um recurso de visualização ao vivo. Sim

⬆ Voltar para o indice

Emoji

Link Descrição Grátis
Get Emoji Copie e cole emojis para Twitter, Facebook, Slack, Instagram, Snapchat, Slack, GitHub, Instagram, WhatsApp e muito mais. Sim
Emojipedia O mecanismo de pesquisa de emoji. Uma experiência de pesquisa rápida de emoji com opções para navegar por cada emoji por nome, categoria ou plataforma. Sim

⬆ Voltar para o indice

Extensões do Chrome

Link Descrição Grátis
axe - Web-Acessibility-Testing Encontre e corrija problemas de acessibilidade em seu site usando a extensão ax DevTools Chrome. Sim
ColorZilla Conta-gotas avançada, seletor de cores, gerador de gradiente e outras guloseimas coloridas. Sim
Fonts Ninja Identifique fontes de qualquer site da Web, marque, experimente e compre-as. Sim
GoFullPage Capture uma screenshot de sua página atual inteira sem solicitar nenhuma permissão extra! Sim
JSON Viewer O iluminador JSON / JSONP mais bonito e personalizável que seus olhos já viram, extensão do Chrome para imprimir JSON e JSONP. Sim
Picture-in-Picture Extension Permite que você assista a vídeos em uma janela flutuante (sempre em cima das outras janelas) para que você possa ficar de olho no que está assistindo enquanto interage com outros sites ou aplicativos. Sim
Page Ruler Uma régua do Web Developer \ Designer para obter dimensões em pixels e posicionamento para medir os elementos em qualquer página da web. Sim
Site Palette Extraia cores de qualquer site, extensão que gera paletas de cores. Escolha cores para qualquer site. Sim
Web Developer Adiciona um botão da barra de ferramentas com várias ferramentas de desenvolvedor da web. Sim
WhatFont Com essa extensão, você pode inspecionar as fontes da web apenas passando o mouse sobre elas. Sim
Wappalyzer Wappalyzer é um utilitário de plataforma cruzada que descobre as tecnologias usadas em sites. Ele detecta sistemas de gerenciamento de conteúdo, plataformas de comércio eletrônico, estruturas da web, software de servidor, ferramentas de análise e muito mais. Sim
AdobeXD Rem fix Exiba automaticamente a conversão dos valores PX para REM e Tailwind nos links de desenvolvimento gerados pelo AdobeXD. Sim

⬆ Voltar para o indice

Ferramentas

Link Descrição Grátis
Transform Tools Um conversor de formatos poliglota Sim
SVG 2 JSX Converte seu arquivo SVG num componente React. Sim

⬆ Voltar para o indice

Fontes

Link Descrição Grátis
Adobe Fonts Fontes ilimitadas. Escolha quantas precisar entre milhares de opções. Sem custo adicional. Todas as fontes estão incluídas em sua associação à Creative Cloud. Sim
CSS Font Stack Pilhas de fontes CSS seguras para a Web e fontes da Web. Selecione, visualize e gere CSS e HTML para sua família de fontes. Sim
Font Combinations Explicamos os fundamentos da escolha de ótimas fontes. Também fornecemos alguns dos melhores pares de fontes para usar em seu próximo design, bem como modelos com os quais você pode brincar usando os pares de fontes mencionados. Sim
FontPair Pares de fontes do Google gratuitos para seu próximo projeto criativo Sim
FontSquirrel Sabemos como é difícil encontrar freeware de qualidade licenciado para uso comercial. Selecionamos manualmente essas fontes e apresentando-as em um formato fácil de usar. Sim
Google Fonts Tornando a web mais bonita, rápida e aberta por meio de uma ótima tipografia. Sim
Just My Type Uma coleção de pares de fontes do Typekit e H&FJ. Sim
Modular Scale As escalas modulares multifilamentares são poderosas porque adicionam mais números à sua escala. Sim
Transfonter Esta ferramenta converte qualquer fonte TTF, OTF, WOFF, WOFF2 ou SVG em formatos css @ font-face com arquivos de amostra CSS e HTML. Sim
Typechem Typechem é uma coleção de fontes escolhidas a dedo e pares de cores. Sim
Systemfontstack Graças à criação e compra de fontes pela Apple, Microsoft, Google e outras pessoas, a maioria dos computadores tem boas - não, ótimo - fontes instaladas e são uma ótima opção se você não quiser carregar uma fonte separada. Sim
Fonts In Use Um arquivo pesquisável de design tipográfico, indexado por tipo de letra, formato e tópico. Sim

⬆ Voltar para o indice

Inspirações

Link Descrição Grátis
Awwwards Awwwards são os Website Awards que reconhecem e promovem o talento e esforço dos melhores desenvolvedores, designers e agências da web do mundo. Sim
abduzeedo Um coletivo de escritores individuais que compartilham artigos sobre design, fotografia e experiência do usuário, bem como tutoriais para Photoshop e outras ferramentas. Sim
Best Website Gallery Os mais belos sites escolhidos a dedo para você. Sim
CollectUI Inspiração diária coletada do arquivo daily ui. Baseado em fotos do Dribbble, escolhidas a dedo e atualizadas diariamente. Sim
Commercecream.com Coletamos e destacamos as mais belas experiências de comércio no Shopify para ajudar a inspirar designers, desenvolvedores e comerciantes a criar coisas incríveis. Sim
Css Nectar Uma vitrine de design de sites css para web designers e desenvolvedores. Todos os dias selecionamos o melhor do web design e adicionamos em nossa galeria. Sim
Dribbble É o principal destino para encontrar e exibir trabalhos criativos e lar dos melhores profissionais de design do mundo. Sim
ecomm.design Navegue por nossa coleção dos principais 3194 sites de comércio eletrônico por plataforma, categorias, tecnologias e tráfego. Sim
Httpster É um recurso de inspiração que mostra sites totalmente arrasadores feitos por pessoas de todo o mundo. Sim
interfacely Os melhores designs de UI / UX do mundo com GUIAS! Sim
Land-book Galeria de designs com os melhores e mais cuidadosos websites. Ajudamos os criativos a encontrar inspiração e motivação para fazer coisas radicais. Sim

⬆ Voltar para o indice

JavaScript

Link Descrição Grátis
Animate On Scroll Biblioteca de animação de scroll. Sim
Anime JS É uma biblioteca de animação JavaScript leve com uma API simples. Funciona com propriedades CSS, SVG, atributos DOM e Objetos JavaScript. Sim
GreenSock É uma biblioteca de animação JavaScript padrão da GreenSock que permite criar animações de alto desempenho que funcionam em todos os principais navegadores. Sim
Immediately Invoked Function Expression (IIFE) Blog post sobre, Expressão de Função Imediatamente Invocada (IIFE) Sim
Lightbox É uma pequena biblioteca javascript usada para sobrepor imagens na parte superior da página atual. É fácil de configurar e funciona em todos os navegadores modernos. Sim
Micro JS Conjunto de microestruturas. Microestruturas são definitivamente o canivete do mundo da biblioteca JavaScript: curto, doce, direto ao ponto. E com 5k ou menos. Sim
Dinero.js É uma biblioteca open source para trabalhar com valores monetários no JavaScript. Sim
Date-fns É um pacote open source tendo um conjunto de ferramentas mais abrangente, porém simples e consistente para manipulação de datas no JavaScript. Sim
Moment JS É um pacote open source que pode ser utilizado para validar, manipular e fazer o parse de datas no JavaScript. Sim
Move JS É uma pequena biblioteca JavaScript que torna a animação apoiada em CSS3 extremamente simples e elegante. Sim
Moving Letters Texto animado com JavaScript e anime.js. Sim
Owl Carousel Plugin jQuery habilitado para toque que permite criar um lindo slider de carrossel responsivo. Sim
Parallax Parallax.js reage à orientação do seu dispositivo inteligente, deslocando camadas dependendo de sua profundidade dentro de uma cena. Sim
Particles JS Uma biblioteca JavaScript leve para a criação de partículas. Sim
Eventos JavaScript Referência de eventos no JavaScript. Sim
Referência JavaScript Referencia JavaScript, escrito por MDN. Sim
Regex 101 Testador de expressão regular com destaque de sintaxe, explicação, folha de dicas para PHP / PCRE, Python, GO, JavaScript, Java. Apresenta um questionário e biblioteca de regex. Sim
Rellax JS Rellax é uma biblioteca paralaxe javascript suave e superleve. Sim
Scroll Magic Ajuda você a reagir facilmente à posição de rolagem atual do usuário. Sim
Skrollr É uma biblioteca de animação de rolagem completa. Na verdade, você pode usá-lo e ainda não ter nenhuma rolagem de paralaxe. Skrollr aproveita HTML5 e CSS3. Sim
SlickSlider É uma biblioteca de carrossel. Sim
Swiper É o controle deslizante móvel mais moderno e gratuito com transições aceleradas por hardware e comportamento nativo incrível. Destina-se a ser usado em sites móveis, aplicativos da web móveis e aplicativos nativos / híbridos móveis. Sim
Three JS É uma biblioteca 3D de propósito geral fácil de usar, leve e compatível com vários navegadores. Sim
Typed JS É uma biblioteca que digita. Insira qualquer string e observe-a digitar na velocidade que você configurou, retroceda o que foi digitado e comece uma nova frase para quantas strings você configurou. Sim
T-writter JS É uma biblioteca de efeito de máquina de escrever nativa. Sim
Velocity JS É um mecanismo de animação com a mesma API do $ .animate () do jQuery. Funciona com e sem jQuery. Sim
Vivus JS É uma classe JavaScript leve (sem dependências) que permite animar SVGs, dando-lhes a aparência de estarem desenhados. Sim
Waypoints É a maneira mais fácil de acionar uma função ao rolar para um elemento. Sim
You might not need jQuery O jQuery e seus primos são ótimos e, sem dúvida, use-os para facilitar o desenvolvimento de seu aplicativo. Sim

⬆ Voltar para o indice

Minifier

Link Descrição Grátis
HTML Minifier Ferramenta gratuita baseada na web para reduzir HTML e qualquer CSS ou JS incluído em sua marcação. Sim
CSSNANO O cssnano pega seu CSS bem formatado e o executa por meio de muitas otimizações específicas, para garantir que o resultado final seja o menor possível para um ambiente de produção. Sim
CSSO É um minificador CSS. Ele executa três tipos de transformações: limpeza, compactação e reestruturação. Como resultado, seu CSS se torna muito menor. Sim
UglifyJS 3 É uma excelente ferramenta para ajudá-lo a minimizar seu JavaScript! É uma ferramenta testada e comprovada, usada por bibliotecas como o jQuery. Sim

⬆ Voltar para o indice

Performance

Link Descrição Grátis
GTmetrix Veja o desempenho do seu site, revele por que ele está lento e descubra oportunidades de otimização. Sim
Image Analysis Tool Descubra como as alterações no tamanho da imagem, seleção de formato, qualidade e codificação podem melhorar drasticamente a velocidade de carregamento da página. Sim
PageSpeed Insight Google PageSpeed é uma família de ferramentas da Google Inc, projetada para ajudar nas otimizações de desempenho de um site. Sim
WebPagetest Execute um teste de velocidade de site gratuito em todo o mundo usando navegadores reais em velocidades de conexão do consumidor com recomendações de otimização detalhadas. Sim

⬆ Voltar para o indice

PlaceHolder

Link Descrição Grátis
Lorempixel Placeholder para cada caso. Webdesign ou impressão. É simples e totalmente grátis. Sim
Placeholder Serviço gratuito de placeholder para imagens, preferido pelos designers. Sim
Placekitten Um serviço rápido e simples para obter fotos de gatinhos para usar como placeholder em seus designs ou código. Sim

⬆ Voltar para o indice

Prototipação

Link Descrição Grátis
Akira Akira se concentra em oferecer uma abordagem moderna e rápida para UI e UX Design, visando principalmente designers da web e designers gráficos. Sim
AdobeXD Compartilhe sua história com designs realistas. Wireframes, animações, prototipagem, colaboração e muito mais. Tudo isso em uma ferramenta de design de UI/UX. Sim
Balsamic Esboce suas idéias de interface de usuário e coloque todos na mesma página. Torna o trabalho divertido. Sim
Figma Construída para a web, a Figma é colaborativa por natureza. Além disso, está repleto de recursos de design que você já adora e invenções exclusivas. Sim
inVision A plataforma de design de produto digital que impulsiona as melhores experiências de usuário do mundo. Sim
Sketch Um lar para todo o processo de design colaborativo. 30 dias

⬆ Voltar para o indice

Templates HTML/CSS

Link Descrição Grátis
BootsWatch Templates grátis para Bootstrap. Sim
Free-CSS Modelos CSS gratuitos, layouts CSS. Sim
FreeHTML5 Modelos de bootstrap HTML5 gratuitos e premium. Criamos modelos de bootstrap gratuitos / premium bonitos e funcionais Sim / planos a partir de $19 Dolares
HTML5Up Modelos de sites HTML5 e CSS3 responsivos desenvolvidos por @ajlkn. Sim
HTML5xCSS3 Modelos Css3 e Html5 Responsivos Gratuitos. Sim
lapa.ninja É uma galeria com os melhores exemplos de 4035 landing pages, livros grátis para designers e kits de UI grátis de toda a web. Sim
OnePageLove Sites, modelos e recursos de uma página navegue pelo Inspiration, encontre modelos ou receba por e-mail 100 dicas importantes para Page Hot. Sim
Templatemo Todos os mais de 560 modelos CSS são absolutamente 100% gratuitos para download para uso em seus sites. Você pode usar nossos modelos livremente para fins comerciais ou pessoais. Sim
W3Layouts Temas multiuso para Bootstrap WordPress. Modelos de site de comércio eletrônico entre outros. Sim

⬆ Voltar para o indice

Remove Background

Link Descrição Grátis
Clipping magic O único editor de remoção de fundos no mundo que combina perfeitamente a IA totalmente automatizada com ferramentas inteligentes. Sim
remove.bg Remova Fundos de Imagens 100% automático, em 5 segundos e com zero cliques. Sim

⬆ Voltar para o indice

UI KITS

Link Descrição Grátis
Envato Elements Downloads ilimitados de vídeos, música isenta de direitos autorais, fotos, gráficos, modelos de gráficos e muito mais. 12 arquivos/mês ou US$ 16,50/mês
Figma Freebies Modelos gratuitos de Figma, kits de interface do usuário e recursos. Sim ou premium templates por US$ 446,00
Freebie Supply Os recursos de design mais recentes para Adobe XD, Figma, Sketch, Photoshop e Adobe Illustrator. Sim
Sketch Repo Modelos de Sketch e recursos de Sketch para seu próximo projeto de design. Ícones, maquetes e kits de interface do usuário gratuitos e de alta qualidade para o aplicativo Sketch. Sim
Uplabs UpLabs é o lugar para encontrar recursos de design de alta qualidade para designers, agências de criação e desenvolvedores. 3 downloads de recursos GRATUITOS ou U$9.99/mês ou U$19.99/mês
Xd Guru A maior coleção de recursos gratuitos e premium para Adobe XD. Sim

⬆ Voltar para o indice

IMAGENS

Link Descrição Grátis
123RF Pesquise e faça download de imagens em alta resolução, imagens royalty-free, ilustrações, vetoriais e muito mais. Não
CC Search Uma nova ferramenta de busca Creative Commons para criadores que buscam descobrir e reutilizar recursos livres com maior facilidade. Sim
CleanPNG Descubra imagens e ilustrações de fundo transparentes. Melhor qualidade, download gratuito e ilimitado. Sim
Cupcake Nilssonlee Fotos tiradas por, Jonas Wimmerström, e estão licenciadas sob a licença Creative Commons CC0. Isso significa que você é livre para copiar, modificar, distribuir e executar o trabalho, mesmo para fins comerciais, tudo sem custos e sem pedir permissão. Sim
Death to Stock Death to Stock é uma cooperativa de propriedade de um artista que oferece as mais recentes fotos e vídeos autênticos; com downloads ilimitados e novos trabalhos adicionados a cada mês. Trial
everypixel Localizador de imagens de estoque para todos que odeiam fotos de banco de imagens ruins. Use-o para encontrar as melhores imagens licenciadas pelo menor preço. Mais de 50 fontes de imagem. Não
foodiesfeed Baixe mais de 2.000 fotos de alimentos ⋆ As melhores fotos de alimentos grátis para uso comercial ⋆ licença CC0. Grátis
fotolia Encontre ativos únicos de alta qualidade e crie algo incrível hoje. Imagens Editorial. Integrado em aplicativos. Planos flexíveis. Tipos: Imagens de pessoas, Imagens de comida, Imagens de notícias, Fotos de empresas. Grátis
Freepik Milhões de recursos gráficos grátis ✓ Vetores ✓ Fotos de arquivo ✓ PSD ✓ Ícones ✓ Tudo o que você precisa para seus projetos criativos. Grátis
freestocks Banco de fotos grátis para uso pessoal e comercial. Imagens de alta qualidade para seu site e blog gratuitamente. Grátis
getrefe Fotos da vida real Grátis
gratisography A coleção mais peculiar do mundo de imagens gratuitas de alta resolução que você pode usar em seus projetos pessoais e comerciais. Grátis
Grátis PNG Milhões de arquivos HD png transparentes. Pesquisa gratuita, ilimitada e fácil Grátis
isorepublic Disponibilizamos para download as melhores imagens e vídeos em alta resolução, todos gratuitos para uso pessoal e comercial. Grátis
jaymantri Fotos grátis. faça qualquer coisa (CC0). faça mágica. Grátis
jeshoots Jeshoots é um banco de fotos onde você pode baixar fotos temáticas originais e maquetes de Jan Vasek gratuitamente. Grátis
kaboompics Todos os dias, novas fotos da mais alta qualidade são adicionadas ao Kaboompics. Você pode baixá-los e usá-los para seus próprios fins Grátis
lifeofpix Fotografia gratuita de alta resolução. Compartilhe e baixe imagens gratuitamente. Grátis
littlevisuals Imagens gratuitas de alta resolução. Grátis
negativespace Lindas imagens gratuitas para uso pessoal e comercial. Todas as fotos de negócios, alimentos, pessoas e tecnologia são gratuitas, em alta resolução. Grátis
newoldstock Fotos vintage de arquivos públicos. Livre de restrições de direitos autorais conhecidas. Recapturando a história. Grátis
Pexels Banco de fotos e vídeos gratuitos que você pode usar em qualquer lugar. Navegue por milhões de imagens de alta qualidade livres de direitos autorais e imagens livres de direitos autorais. Grátis
photodune Descubra 2925100 Banco de imagens e fotos royalty-free no PhotoDune. Grátis
ProfilePictureMaker Solte a imagem em qualquer lugar. (1 imagem por vez). PFPMaker - Crie uma foto de perfil incrível a partir de qualquer foto. Grátis
picjumbo picjumbo foi citado como um dos melhores sites de fotos de ações gratuitas por várias publicações online populares e internacionais. Grátis
PNGALL PNGAll é um blog PNG onde você pode encontrar as melhores imagens PNG gratuitas de alta qualidade em várias categorias, como animais, comida, natureza, coisas, objetos e muito mais. Grátis
PNGTREE Baixe grátis de fundo HD de alta qualidade para o seu trabalho impressionante. Pngtree: Biblioteca profissional, baixe gratuitamente todos os dias. Grátis
pixabay Pixabay é uma comunidade vibrante de criativos, compartilhando imagens, vídeos e músicas sem direitos autorais. Grátis
raumrot Se você se inscrever com seu e-mail, receberá 10 imagens a cada 10 dias como forma de descobrir novos conteúdos. Grátis
reshot Projete livremente com downloads instantâneos de ícones SVG com curadoria, ilustrações vetoriais e fotos de arquivo. Tudo grátis com licenciamento comercial. Grátis
Responsive BreakPoints Automatize a geração de breakpoints responsivos. Grátis
shutterstock Encontre imagens para qualquer projeto: e-mails, apresentações, posts para redes sociais. Grátis
splitshire O melhor banco de imagens e vídeos gratuitos que são absolutamente sem quaisquer restrições de direitos autorais (CC0) - gratuitos e legais - sem atribuição necessária. Grátis
stocksnap A melhor fonte de fotos de estoque gratuitas, CC0, faça o que quiser com. Navegue e baixe milhares de imagens livres de direitos autorais. Nenhuma atribuição necessária. Grátis
stockvault 139.883 fotos de stock grátis, texturas, fundos e gráficos para seu próximo projeto. Nenhuma atribuição necessária. Grátis
Stickpng O StickPNG é uma comunidade vibrante de pessoas criativas que compartilham imagens PNG transparentes que você pode baixar gratuitamente. Grátis
tookapic O Projeto 365 é um desafio fotográfico. Tire uma foto por dia para se descobrir, se expressar e melhorar seu dia a dia. Grátis
uhdwallpapers Um site com papéis de parede em alta resolução (UHD 5K, ultra HD 4K 3840x2160, full HD 1920x1080) para telefones e desktop. Grátis
Unsplash Imagens e fotos lindas e gratuitas que você pode baixar e usar em qualquer projeto. Melhor do que qualquer foto royalty free ou banco de imagens. Grátis
visualhunt Pesquise visualmente os melhores produtos e ideias. Com curadoria de especialistas, desenvolvido pela comunidade. Grátis
VectorMagic Vector Magic analisa sua imagem e detecta automaticamente as configurações apropriadas para vetorizá-la. Grátis

⬆ Voltar para o indice

Contribuidores

About

Links úteis e recursos essenciais para desenvolvedores frontend.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published