Front Place - Ferramentas Para o Dia a Dia do Dev Front-end

Ferramentas de Desenvolvimento

Visual Studio Code

Um dos melhores e mais usados editores de texto! O VS Code suporta quase todas as principais linguagens de programação. Várias já vêm integradas, como JavaScript, TypeScript, CSS e HTML.

O CodePen é um ambiente de desenvolvimento social para designers e desenvolvedores front-end. Crie e publique um site, mostre seu trabalho, construa casos de teste para aprender e debugar, e encontre inspiração.

CodeSandbox

É uma alternativa ao CodePen, oferecendo recursos mais avançados. Esse editor online executa um bundler no navegador, permitindo a importação de módulos npm diretamente.

Guia de Consulta do Emmett

O Emmet é uma poderosa ferramenta integrada ao Visual Studio Code que acelera a escrita de código HTML e CSS. Com esse guia de consulta rápido, você terá a mão tudo o que precisa para usar essa poderosa ferramenta.

HTML5 - Recursos

Referência do HTML5 da MDN

Você não precisa saber todos os elementos HTML de cabeça, certo?Aqui está uma excelente documentação de referência para você usar quando quiser.

Lista de Entidades HTML

Aqui está uma lista com os nomes de referência de caracteres que são suportados pelo HTML e os pontos de código aos quais eles se referem. É sempre muito útil ter entidades a mão.

Entidades HTML por CSS-Tricks

Essa lista de entidades HTML foi organizada por um dos maiores e mais reconhecidos websites da comunidade front-end, então não deixe de dar uma consultada.

CSS - Recursos

Referência do CSS3 da MDN

Assim como no HTML, você também não precisa saber de cor todas as propriedades CSS. Use essa documentação e não se preocupe.

Referência do CSS3 da Codrops

Outro guia de referência, dessa vez organizado pela Codrops. Não deixe de conferir.

Can I Use?

Tabelas de suporte a navegadores atualizadas para tecnologias front-end em navegadores de desktop e móveis.

Selectors Explained

Nessa ferramenta, você insere o seletor CSS que deseja e ele te explica o que ele faz e como funciona, assim como sua especificidade.

30 Seletores CSS pela Envato

Você aprendeu os seletores básicos de ID, classe e descendentes em CSS e achou que já era o suficiente? Se sim, você está perdendo um nível enorme de flexibilidade.

CSS for People Who Hate CSS

CSS para Pessoas que Odeiam CSS é um excelente guia sobre como escrever um código CSS melhor, mais limpo e mais reutilizável.

Flexbox por Malven

Um verdadeiro mapa para você consultar sempre que precisar de uma propriedade Flexbox. Desenvolvido pela Malven Co., um estúdio de desenvolvimento focado em design liderado por Chris Malven.

Grid Layout por Malven

Nos mesmos moldes da página de Flexbox, aqui temos também um maravilhoso guia para as propriedades do Grid Layout para você ter sempre a mão e não se perder.

JavaScript - Recursos

Referência do JS da MDN

Mais um guia de referência pela documentação da MDN, dessa vez para o JavaScript. Aqui você encontra muito conteúdo, inclusive avançado.

Precedência de Operadores

Link específico da documentação da MDN que trata desse tópico tão importante. Muito útil para determinar quais operadores JavaScript são avaliados primeiro.

Referência de Eventos JS

Lista de referência prática de todos os eventos DOM com explicações, bem categorizada.

Ref. de Manipulação do DOM

Chamado de "You Might Not Need jQuery", mas pode ser usado como uma referência completa para manipulação do DOM.

Princípios para um bom JS

Trata-se de uma guia de estilo para escrever um código JavaScript mais consistente e idiomático. Embora nada aqui seja mandatório, é sempre bom ter um guia.

Ferramentas de Fontes e Tipografias

Google Fonts

O recurso nº 1 para webfonts gratuitos e fáceis de usar. Possui uma enorme biblioteca de fontes.

Fontsquirrel

As melhores fontes 100% gratuitas para uso comercial. Outra enorme biblioteca de fontes bem conhecida.

50 fontes da Creative Blog

Lista de 50 fontes gratuitas, desde fontes de inspiração vintage até serifas planas, para uma variedade de projetos.

MyFonts

premium

A maior biblioteca de fontes premium do mundo, se você precisar de mais do que fontes gratuitas para seu próximo projeto, aqui é o lugar certo.

Guia Prático para Tipografia

Recurso incrível para aprender sobre tipografia. Aprenda noções básicas de tipografia em menos de 30 minutos.

Ferramentas para Cores

Open Color

Um esquema de cores de código aberto, otimizado para User Interface (UI). Um excelente recurso para escolher cores logo de início, a partir do zero.

Tailwind Colors

Outro excelente e popular conjunto de paletas de cores. A Tailwind Labs Inc. traz uma seleção de cores para todos os seus projetos.

Flat UI Colors

Um bom ponto de partida para escolher uma cor de design plano para o seu próximo projeto. Aqui você encontra diversas combinações de cores e tipos diferentes de paletas.

Material Palette

Mais um conjunto de ótimas cores, inspirado no material design. Gere e baixe você mesmo sua paleta de cores.

Color Hunt

Não tem ideia de que cor usar no seu projeto? A Color Hunt te ajuda a “caçar” suas cores com lindas paletas.

LOL Colors Palettes

Inspiração de paletas de cores selecionadas. Mais uma fonte de ótimas paletas de cores.

UI Gradients

Coleção de lindos gradientes de cores para você escolher e exportar para o seu projeto.

Paletton

Uma ferramenta muito popular para criação de combinação de cores. A Paletton te permite ver com clareza se as cores combinam bem ou não, e te ajuda a montar a paleta do seu projeto.

Tint and Shade Generator

Esse gerador de tonalidades e sombras permite a criação de versões mais claras e mais escuras de qualquer cor de base. Perfeito para hovers, bordas e gradientes.

Color Contrast Checker

Todo desenvolvedor deve ter a preocupação de verificar se seu website é acessível para todos. Por isso, trago aqui essa ferramenta para verificar se duas cores possuem uma boa relação de contraste.

Imagens e Vídeos

Unsplash

Considerado por muitos desenvolvedores como o melhor recurso grátis de fotos de alta resolução, o Unsplash traz mais fotos do que você pode imaginar.

Acredite, esse é um banco de imagens enorme!

Pexels

Também muito conhecido na comunidade, o Pexels é outro ótimo recurso para fotos e vídeos gratuitos, criados por fotógrafos de todo o mundo.

ISO Republic

Fotos gratuitas e premium para o seu projeto. Aqui você pesquisa facilmente por tópicos o que precisa.

Pixaby

Mais de 5 milhões de fotos, vetores e ilustrações de arte gratuitos que você pode usar onde quiser.

unDraw

Centenas de ilustrações gratuitas e de código aberto para seus sites. E um detalhe incrível: as cores são personalizáveis.

DrawKit

Recursos de ícones e ilustrações vetoriais desenhados à mão, perfeitos para o seu próximo projeto.

UI Faces

Uma biblioteca crescente de avatares gratuitos de alta resolução gerados por IA para modelos de design, cuidadosamente selecionados para atender a todas as suas necessidades criativas.

Obs.: Não os use para pessoas reais...

Random User Generator

Gere dados aleatórios de usuários, incluindo fotos. É tipo um Lorem Ipsum, mas para pessoas.

Coverr

O melhor recurso para vídeos incríveis e gratuitos sobre todos os tópicos imagináveis. Uma fonte de vídeos facilmente pesquisáveis.

Melhores Ferramentas para Ícones

Ionicons

Ícones de design premium para uso em aplicativos da Web, iOS, Android e desktop. Suporte para SVG. Código totalmente aberto, licenciado pelo MIT e desenvolvido pela Ionic.

Obs.: 100% gratuito mesmo para uso comercial.

Hero Icons

Lindos ícones SVG feitos à mão, pelos criadores do Tailwind CSS. Um conjunto de ícones de 230 peças, disponível em estilos de contorno e sólido.

Melhor usado em 24px X 24px.

Phosphor Icons

Outro lindo conjunto de ícones SVG, sendo esses um pouco mais quadrados. Contam também com espessura e cor personalizáveis.

Font Awesome

Uma fonte de ícones altamente popular, composta por mais de 2.000 ícones grátis espalhados por inúmeras categorias.

Line Awesome

Este site se coloca como uma alternativa ao Font Awesome, trazendo ícones de linha 1, ou seja, linhas finas e contornos sem preenchimento sólido, o que lhes confere uma aparência limpa e elegante.

Iconmonstr

Mais de 4.500 ícones simples e gratuitos em mais de 300 coleções, perfeitos se você precisar de um único ícone e não de um conjunto completo.

Icons8

premium

Um recurso premium incrível. Possui mais de 175.000 ícones, alguns gratuitos, em inúmeros estilos e categorias.

Inspiração para Design

Land Book

Encontre as melhores inspirações de design para o desenvolvimento de sites escolhidas a dedo. A Land Book é uma vitrine de belos web design com curadoria para criativos, atualizada diariamente.

One Page Love

Lindos sites One Page para inspiração e referências. Cada análise inclui uma captura de tela completa do design do site, juntamente com recursos incríveis.

Awwwards

Os prêmios de design, criatividade e inovação na internet estão aqui. Este site apresenta designs mais criativos.

Page Flows

Um dos melhores sites contendo exemplos de fluxo de usuários de dispositivos móveis e da Web, trazendo uma coleção de produtos comprovados.

Dribbble

Esse, sem dúvidas, é um dos lugares mais bem conhecidos, então entre e inspire-se com o trabalho de milhões de designers e agências de primeira linha ao redor do mundo.

Blogs e Comunidades

Stack Overflow

A maior comunidade de programadores. Pergunte e encontre respostas para perguntas sobre HTML, CSS e JS.

CSS Tricks

Uma página indispensável para quem é desenvolvedor front-end. Excelentes artigos, guias e até mesmo um almanaque, tudo sobre desenvolvimento front-end, com foco em CSS.

Smashing Magazine

Um blog que fornece artigos confiáveis, úteis, mas, acima de tudo, práticos para web designers e desenvolvedores. Seus criadores não se importam com tendências, mas sim com coisas que funcionam ou falham em projetos reais. Excelente fonte independente há 17 anos.

Codrops

Outro blog, com artigos e tutoriais sobre as últimas tendências e técnicas da web.

Front End Front

Um lugar onde os desenvolvedores front-end podem fazer perguntas, compartilhar links e mostrar seu trabalho.

Teste, Otimização e Deploy