Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurspk/guiadofrontend
Nesse guia você encontrará tudo para se torna um desenvolvedor front-end, dessa maneira, encontrará mapas mentais, cursos, trilhas e outras ferramentas para poder praticar o conhecimento adquirido.
https://github.com/arthurspk/guiadofrontend
css css3 front-end-development frontend guia guia-de-estudos html html-css-javascript html5 javascript javascript-applications javascript-framework javascript-library roadmap roadmaps
Last synced: 25 days ago
JSON representation
Nesse guia você encontrará tudo para se torna um desenvolvedor front-end, dessa maneira, encontrará mapas mentais, cursos, trilhas e outras ferramentas para poder praticar o conhecimento adquirido.
- Host: GitHub
- URL: https://github.com/arthurspk/guiadofrontend
- Owner: arthurspk
- License: mit
- Created: 2022-03-20T02:03:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-31T20:41:14.000Z (over 1 year ago)
- Last Synced: 2024-10-01T15:41:25.483Z (about 1 month ago)
- Topics: css, css3, front-end-development, frontend, guia, guia-de-estudos, html, html-css-javascript, html5, javascript, javascript-applications, javascript-framework, javascript-library, roadmap, roadmaps
- Homepage:
- Size: 3.07 MB
- Stars: 2,803
- Watchers: 70
- Forks: 255
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Guia do Desenvolvedor Front-end
## :dart: O guia para alavancar a sua carreira
Abaixo você encontrará conteúdos para te guiar e ajudar a se torna um desenvolvedor front-end, caso você já atue como front-end confere o repositório para descobrir novas ferramentas para o seu dia-a-dia, os caminhos que você pode tomar e as tecnologias para incorporar na sua stack para se tornar um profissional atualizado e diferenciado em front-end, faça bom uso do guia e bons estudos!
Segue nas redes sociais para acompanhar mais conteúdo:
[
](https://github.com/arthurspk)
[
](https://www.facebook.com/seixasqlc/)
[
](https://www.linkedin.com/in/arthurspk/)
[
](https://twitter.com/manotoquinho)
[](https://discord.gg/NbMQUPjHz7)
[
](https://www.instagram.com/guiadevbrasil/)
[](https://www.youtube.com/channel/UCzmXzz_VR0Li8-YOvWN_t3g)
## 💌 Doações
> Olá! Se você está lendo isso, é porque provavelmente já conhece o meu repositório no GitHub, que oferece conteúdo gratuito para ajudar desenvolvedores a aprimorarem suas habilidades. E se você está aqui, talvez esteja considerando contribuir com uma doação para apoiar a continuação do projeto.
- [Clique aqui para realizar realizar uma doação! 💓](https://beacons.ai/doacoesguiadev)
> Se você quiser contribuir, existem várias opções disponíveis, incluindo PayPal, PagSeguro, Mercado Pago, Buy Me A Coffe, Pic Pay e Pix. Qualquer doação, por menor que seja, é extremamente bem-vinda e será usada com responsabilidade e transparência. Obrigado por considerar apoiar meu projeto! Juntos, podemos continuar a compartilhar conhecimento e ajudar a criar uma comunidade de desenvolvedores mais forte e colaborativa.
## :closed_book: E-Book
> Este repositório é um projeto gratuito para a comunidade de desenvolvedores. Você pode me ajudar comprando o e-book "e-Front" se estiver interessado em aprender ou melhorar suas habilidades de desenvolvimento front-end. O e-book é completo e cobre tecnologias essenciais como HTML, CSS, JavaScript, React, TypeScript e mais. O valor é simbólico e sua compra me ajuda a produzir e fornecer mais conteúdo gratuito para a comunidade. Adquira agora e comece sua jornada no desenvolvimento front-end.
- eFront - Estudando Desenvolvimento Front-end do Zero. [Clique aqui para comprar](https://hotm.art/cSMObU)
## 📛 Direitos autorais
> Esse projeto tomou como referência para ser feito os roadmaps feito pelo projeto [roadmap.sh](https://roadmap.sh/roadmaps) você pode conferir todo o projeto original feito pelos autores principais pelos links abaixo, desde já agradecendo a todos eles por fornecer esse conteúdo que serviu de extrema importância e de base para a criação deste repositório.
- [Roadmap.sh](https://roadmap.sh/roadmaps) - Site do roadmap.sh onde você encontrará diversos roadmaps em inglês.
- [Repositório Oficial do Projeto](https://github.com/kamranahmedse/developer-roadmap/blob/master/license) - Repositório oficial do projeto em inglês.
## :warning: Nossa proposta
> A proposta deste guia é dar uma ideia sobre o atual panorama e guiá-lo se você estiver confuso sobre qual o próximo aprendizado, não influenciar você a seguir os 'hypes' e 'trendys' do momento. Acreditamos que com um maior conhecimento das diferentes estruturas e soluções disponíveis poderá escolher a ferramenta que melhor se aplica às suas demandas. E lembre-se, 'hypes' e 'trendys' nem sempre são as melhores opções.
## :beginner: Para quem está começando agora
> Não se assuste com a quantidade de conteúdo apresentados neste guia. Mesmo o foco sendo para profissionais já consolidados que desejam se manter atualizados, acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! :punch:
## 🚨 Colabore
- Abra Pull Requests com atualizações
- Discuta ideias em Issues
- Compartilhe o repositório com a sua comunidade
- Mande feedbacks no [LinkedIn](https://www.linkedin.com/in/arthurspk/)
## 🌍 Tradução
> Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece.
・English — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Spanish — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Chinese — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Hindi — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Arabic — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・French — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Italian — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Korean — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Russian — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・German — [Click Here](https://github.com/arthurspk/guiadevbrasil)
・Japanese — [Click Here](https://github.com/arthurspk/guiadevbrasil)
## 🗺️ Frontend Roadmap
## ◾ HTTP
> O Hypertext Transfer Protocol, sigla HTTP é um protocolo de comunicação utilizado para sistemas de informação de hipermídia, distribuídos e colaborativos. Ele é a base para a comunicação de dados da World Wide Web.
- [MDN - HTTP](https://developer.mozilla.org/pt-BR/docs/Web/HTTP) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web
## ◾ HTML
> HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma página da web, sendo assim HTML é uma linguagem essência para você que quer se tornar desenvolvedor front-end.
- [MDN - HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web
- [Cursos de HTML](https://github.com/arthurspk/guiadevbrasil#-cursos-de-html-e-css) - Cursos de HTML do repositório geral do Guia Dev Brasil
## ◾ CSS
> CSS (Cascading Style Sheets) é um mecanismo para adicionar estilo a um documento web. O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags . Também é possível, em vez de colocar a formatação dentro do documento, criar um link para um arquivo CSS que contém os estilos.
- [MDN - CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web
- [Cursos de CSS](https://github.com/arthurspk/guiadevbrasil#-cursos-de-html-e-css) - Cursos de CSS do repositório geral do Guia Dev Brasil
## ◾ JavaScript
> JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide Web.
- [MDN - JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/CSS) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web
- [Cursos de JavaScript](https://github.com/arthurspk/guiadevbrasil#-cursos-de-javascript) - Cursos de JavaScript do repositório geral do Guia Dev Brasil
## ◾ Frameworks
> Framework é um conjunto de códigos prontos que podem ser usados no desenvolvimento de aplicativos e sites. O objetivo dessa ferramenta é aplicar funcionalidades, comandos e estruturas já prontas para garantir qualidade no desenvolvimento de um projeto, cada linguagem possi diversos frameworks que podem ser utilizado para te ajudar em umafuncionalidade específica, por configuração, durante a programação de uma aplicação.
- [Frameworks para HTML](https://www.webfx.com/blog/web-design/html5-frameworks/) - 10 frameworks responsivos para ser utilizado no HTML5
- [Frameworks para CSS](https://rockcontent.com/br/talent-blog/frameworks-css/) - 14 frameworks que podem ser utilizados no seu CSS
- [Frameworks no front-end](https://mundodevops.com/blog/framework-front-end/) - Frameworks mais utilizados no front-end
- [Frameworks e bibliotecas JavaScript](https://blog.geekhunter.com.br/frameworks-javascript-e-bibliotecas-java/#:~:text=Um%20framework%20JavaScript%20%C3%A9%20uma,ficar%20reescrevendo%20linhas%20de%20c%C3%B3digo.) - Frameworks e bibliotecas para ser utilizadas no JavaScript
## ◾ APIs
> O conceito de API nada mais é do que uma forma de comunicação entre sistemas. Elas permitem a integração entre dois sistemas, em que um deles fornece informações e serviços que podem ser utilizados pelo outro, sem a necessidade de o sistema que consome a API conhecer detalhes de implementação do software, as APIs permitem que o usuário final utilize um aplicativo, software ou até uma simples planilha, consultando, alterando e armazenando dados de diversos sistemas, sem que o usuário precise acessá-los diretamente.
- [MDN - APIs](https://developer.mozilla.org/pt-BR/docs/Web/API) - O MDN Web Docs é o website oficial de Mozilla para desenvolvimento de padrões web
- [APIs Públicas](https://github.com/public-apis/public-apis) - Uma lista coletiva de APIs gratuitas para uso em software e desenvolvimento web
## 📚 Recomendação de livros
- [Clean Code - Código Limpo](https://g.co/kgs/62wx9t)
- [Refactoring - Refatoração](https://g.co/kgs/Hf2eY3)
- [Clean Archtecture - Arquitertura Limpa](https://g.co/kgs/Hf2eY3)
- [O programador pragmático](https://g.co/kgs/5nbqB3)
## 🛠️ Ferramentas
> ◾ Sites para desenvolvedor front-end
- [Text Pop 3D](https://textpop3d.web.app/) - Cria efeitos de texto 3D
- [Shape Dividers](https://shapedividers.com) - Gera divisores de formas verticais, responsivos, e animados facilmente com este gerador de divisores de formas SVG
- [Couleur](https://couleur.io) - Uma ferramenta de cores simples para ajudá-lo a encontrar uma boa paleta de cores para seu projeto da web)
- [Baseline CSS Filters](https://baseline.is/tools/css-photo-filters/) - 36 Belos filtros de fotos, com edição simples e CSS para copiar)
- [UI Deck](https://uideck.com) - Modelo de página de destino HTML gratuitos e premium, temas de bootstrap, modelos de React, modelos de Tailwind, modelos de site HTML, e kits de interface de usúario)
- [Naevner](https://naevner.com) - Descrição de cores em linguagem natural, gerador de códigos em cores hexadecimais)
> ◾ Templates HTML gratuitos
- [Bootstrap Made](https://bootstrapmade.com/) - Temas HTML5 + CSS3 gratuitos
- [W3 Layouts](https://w3layouts.com) - Temas HTML5 + CSS3 gratuitos
- [One Page Love](https://onepagelove.com) - Temas HTML5 + CSS3 gratuitos
- [ThemeWagon Freebies](https://themewagon.com/theme_tag/free/) - Temas HTML5 + CSS3 gratuitos
> ◾ Sites para aprender ou treinar CSS
- [CSS Grid Garden](http://cssgridgarden.com/) - Ferramenta online para estudos de Grid (CSS)
- [Flukeout](http://flukeout.github.io/) - Aplicação online para aprender CSS de forma prática
- [Flex Box Froggy](https://flexboxfroggy.com/) - Desafio de Programação Front-end focados na propriedade flex box. IDE integrada.
- [Flexbox Defense](http://www.flexboxdefense.com/) - Aprenda flexbox com um game
- [100 Dias de CSS](https://100dayscss.com) - 100 Desafios de CSS
- [CSS Battle](https://cssbattle.dev/) - Batalhas temporárias de CSS. IDE integrada
- [CSS Tricks](https://css-tricks.com/guides/) - Site para treinar
- [CSS Hell](https://csshell.dev/) - Coleção de erros comuns de CSS e como corrigi-los
> ◾ Geradores de CSS
- [Neumorphism](https://neumorphism.io/) - Tendência aplicação border-radius
- [Fancy Border-Radius](https://9elements.github.io/fancy-border-radius/) - Gerador de formas com border-radius no CSS
- [WAIT! Animate](https://waitanimate.wstone.io) - Gerador de animações de CSS
- [Best CSS Button Generator](https://www.bestcssbuttongenerator.com) - Gerador de butões do CSS
- [HTML CSS JS Generator](https://html-css-js.com/css/generator/) - Gerador de HTML/CSS/JS
- [BennettFeely](https://bennettfeely.com/clippy/) - Criador de clip-path
> ◾ Ferramentas de desenvolvimento
- [Internxt](https://internxt.com/) - Internxt Drive é um armazenamento de arquivos de conhecimento zero serviço baseado na melhor privacidade e segurança da classe
- [Motion](https://motion.dev/) - Uma nova biblioteca de animação, construída na API Web Animations para o menor tamanho de arquivo e o desempenho mais rápido.
- [Hokusai](https://hokusai.app/) - Conteúdo sobre NFT's
- [Hidden Tools](https://hiddentools.dev) - Ampla coleção de ferramentas feitas pela comunidade disponiveís para uso
- [Dev Hints](https://devhints.io) - Coleção de cheatsheets
- [Bundlephobia](https://bundlephobia.com) - Descubra o custo de adicionar um pacote npm ao seu pacote
- [Refactoring Guru](https://refactoring.guru/pt-br/design-patterns) - Padrões de projetos "Design patterns"
- [DevDocs](https://devdocs.io/) - DevDocs combina várias documentações de API em uma interface rápida, organizada e pesquisável.
- [HTML Validator](https://www.freeformatter.com/html-validator.html) - Validação de arquivo HTML
- [HTML 5 Test](https://html5test.com/index.html) - Testa arquivos HTML5
- [Image Slide Maker](https://imageslidermaker.com/v2) - Ferramenta de geração gratuita do Image Slider Maker
- [.NET Fiddle](https://dotnetfiddle.net/) - Codifique e compartilhe projetos C# online
- [1PageRank](http://www.1pagerank.com/) - Rankeie seu site nos mecanismos de buscas e aprenda com a concorrência
- [Any API](https://any-api.com/) - Diretório gratuito com APIs públicas
- [Autoprefixer CSS](http://autoprefixer.github.io/) - Transpile código CSS atual para código CSS com maior cobertura de navegadores antigos
- [Browser diet](https://browserdiet.com/pt/) - Guia de performance para desenvolvimento web
- [Can I email...](https://www.caniemail.com/) - Descubra o que do HTML e CSS pode ser usado em estruturas de e-mail
- [Can I use...](https://caniuse.com/) - Descubra se você pode usar determinadas tecnologias web
- [CloudFlare](https://www.cloudflare.com/pt-br/) - CDN grátis
- [CMDER](https://cmder.net/) - Linha de comando simples, consegue rodar comands bash e Shell, alternativa ao Hyper
- [CodePen](https://codepen.io/) - Rede social de desenvolvedores front-end
- [CodeSandbox](https://codesandbox.io/) - Caixa de área para desenvolvedores web
- [Connection Strings](https://www.connectionstrings.com/) - Site com strings de conexão para diversas plataformas
- [CSS Formatter](https://www.cleancss.com/css-beautify/) - Retire a minificação e formate o código CSS
- [CSS Minifier](https://cssminifier.com/) - Conversor de código CSS para CSS minificado
- [CSS W3.org](https://jigsaw.w3.org/css-validator/) - Validar CSS
- [Debuggex: Online visual regex tester. JavaScript, Python, and PCRE](https://www.debuggex.com) - Construa e teste expressões regulares
- [docsify](https://docsify.js.org/#/) - Crie docs incríveis de projetos
- [EasyForms](https://easyforms.vercel.app/) - API open source que permite criação formulários de contato com HTML puro
- [Editor.md](https://pandao.github.io/editor.md/en.html) - Editor Markdown online e open source
- [ES6console](https://es6console.com/) - Compilador de JS para Ecmascript
- [Firebase](https://firebase.google.com/?hl=pt-BR) - Desenvolva aplicativos mobile e web incríveis este serviço da Google
- [Firefox Developer Edition](https://www.mozilla.org/pt-BR/firefox/developer/) - Navegador web para desenvolvedores web
- [Full Page Screen Capture](https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=pt-BR) - Capture páginas inteiras com uma extensão para Chrome
- [generatedata](http://www.generatedata.com/) - Gerador de dados para testes
- [Git Command Explorer](https://gitexplorer.com/) - Encontre os comandos certos que você precisa sem vasculhar a web
- [GitHub Gist](https://gist.github.com/) - Faça pequenas anotações e pequenos códigos no GitHub Gist
- [Google Transparency Report](https://transparencyreport.google.com/safe-browsing/search) - Verificar segurança de um site
- [Grader](https://website.grader.com/) - Avaliação de site
- [How to Center in CSS](http://howtocenterincss.com/) - Gerador de código para divs ou textos que necessitam de centralização
- [Hyper](https://hyper.is/) - Linha de comando simples, útil e gratuito
- [Joomla](https://www.joomla.org/) - CMS gratuita
- [JS Bin](https://jsbin.com/) - Codifique e compartilhe projetos HTML, CSS e JS
- [JSCompress](https://jscompress.com/) - Conversor de código JS para JS minificado
- [JSON Editor Online](https://jsoneditoronline.org/) - Ferramenta para visualizar e editar arquivos JSON
- [JSFiddle](https://jsfiddle.net/) - Codifique projetos JS online
- [JSONLint](https://jsonlint.com/) - Ferramenta para validar seu JSON
- [JSON Generator](https://app.json-generator.com/) - Ferramenta para gerar JSON com base em template
- [KeyCDN Tools](https://tools.keycdn.com/) - Faça uma análise das suas aplicações web
- [Liveweave](https://liveweave.com/) - Codifique projetos HTML, CSS e JS
- [Lorem Ipsum](https://br.lipsum.com/) - Gerador de texto fictício
- [Mapbox](https://www.mapbox.com/) - Mapas e localização para desenvolvedores
- [Memcached](https://memcached.org/) - Melhore o desempenho de seu website com cache
- [Mockaroo](https://www.mockaroo.com/) - Gerador de dados para testes
- [Mussum Ipsum](https://mussumipsum.com/) - Gerador de texto fictício
- [NPM HTTP-Server](https://www.npmjs.com/package/http-server) - Rode um servidor local com um pacote npm
- [Password Generator](https://danieldeev.github.io/password-generator/) - Um gerador de senhas simples com foco na segurança
- [Online C Compiler](https://www.onlinegdb.com/online_c_compiler) - Ferramenta para compilar C online
- [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) - Ferramenta para debug do ReactJS
- [React Hook Form](https://react-hook-form.com/) - Valide seus formulários de projetos que utilizam React ou React Native
- [RelaX](http://dbis-uibk.github.io/relax/index.htm) - Crie expressões algébricas relacionais de consultas
- [Responsive](http://www.codeorama.com/responsive/) - Teste a responsividade do seu site
- [Shields.io](https://shields.io/) - Gerador de badges para markdown
- [SSL Server Test](https://www.ssllabs.com/ssltest/) - Testar SSL de sites
- [StreamYard](https://streamyard.com/) - O StreamYard é um estúdio de transmissões ao vivo no seu navegador
- [Swagger](https://swagger.io/) - Ferramenta para projetar, construir, documentar e usar serviços da Web RESTful
- [Tabela ASCII](https://web.fe.up.pt/~ee96100/projecto/Tabela%20ascii.htm) - Tabela completa com caracteres ASCII
- [Telegram](https://telegram.org/) - Mensageiro criptografado
- [TinyJPG](https://tinyjpg.com/) - Comprima imagem do formato JPG
- [TinyPNG](https://tinypng.com/) - Comprima imagem do formato PNG
- [Creately](https://creately.com/) - Crie e altere lindos diagramas em tempo real com a sua equipe
- [Carbon](https://carbon.now.sh/) - Crie Snippets de codigo clean e bonitos
- [DbDiagram](https://dbdiagram.io/home) - Crie elegrantes diagramas de banco de dados e gere script ddl
- [SqlDesigner](https://ondras.zarovi.cz/sql/demo/) - Crie Diagramas de banco de dados de maneira rapida e gere script ddl
- [W3.org](https://validator.w3.org/) - Validar HTML
- [WakaTime](https://wakatime.com/) - Gerencie seu tempo de desenvolvimento
- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=pt-BR) - Extensão para Chrome com multi-funções
- [Web.dev](https://web.dev/) - Testar website (criado pela Google)
- [WebPageTest](https://www.webpagetest.org/) - Testar perfomance de site
- [Wedsites](https://wedsites.com/) - Liste suas atividades e acompanhe seu progresso
- [WordPress](https://wordpress.org/) - Criação de blogs
- [XML Sitemaps](https://www.xml-sitemaps.com/) - Criador de sitemaps.xml
- [Minimamente](https://www.minimamente.com/project/magic/) - Efeitos para utilizar no CSS
- [Hamburgers](https://jonsuh.com/hamburgers/) - Menu de hamburgers para utilizar em CSS
- [Hover Effects](https://ianlunn.github.io/Hover/) - Hover effects para utilizar no CSS
> ◾ Design front-end
- [Adobe XD](https://www.adobe.com/br/products/xd.html) - Software de design para projetos
- [Awwwards](https://www.awwwards.com) - Inspiração para interfaces e templates com o que há de mais novo em questão de design de interfaces
- [Bootstrap](https://www.getbootstrap.com/) - Framework CSS
- [BuildBootstrap](https://buildbootstrap.com/) - Crie layout responsivo para o framework Bootstrap na versão 3 e 4
- [Bulma CSS](https://bulma.io/) - Estrutura CSS gratuita baseada no Flexbox
- [Canva](https://www.canva.com/) - Ferramenta de design online
- [Chart.js](https://www.chartjs.org/) - Biblioteca JavaScript de criação de gráficos
- [Colors and Fonts](https://www.colorsandfonts.com/) - Apresenta paletas de cores e tipografia
- [Coolors](https://coolors.co/) - Palhetas de cores e monte a sua própria
- [Colors lol](https://colors.lol) - Repositório de paletas de cores
- [Cruip](https://cruip.com/) - Recursos de templates
- [CSS Effects Snippets](https://emilkowalski.github.io/css-effects-snippets/) - Animações CSS prontas para usar
- [CSS Layout](https://csslayout.io/) - Layouts e padrões populares feitos com CSS
- [CSS Reference](https://cssreference.io/) - Guia visual para CSS com referencias de uso
- [CSS Tricks](https://css-tricks.com/) - Blog com vários tutoriais frontend
- [DevSamples](https://www.devsamples.com/) - Exemplos de códigos fáceis de usar para HTML, CSS e JavaScript
- [Excalidraw](https://excalidraw.com) - Desenhe diagramas como se tivessem sido feitos a mão
- [Fancy Border-Radius](https://9elements.github.io/fancy-border-radius/) - Gerador de formas com border-radius no CSS
- [Figma](https://www.figma.com/) - Desenhe projetos online de apps, softwares e websites
- [Flatui Color Picker](http://www.flatuicolorpicker.com/) - Paleta de cores interativa de forma harmonizar o front
- [Font Flipper](https://fontflipper.com/) - Ferramenta para testar fontes
- [FontPair](https://fontpair.co/) - Ferramenta para combinações de fontes
- [FontSpark](https://fontspark.app/) - Gera fontes aleatórias de uma lista de fontes famosas usadas na web
- [Foundation](https://foundation.zurb.com/) - Framework responsivo
- [Framer](https://www.framer.com/) - Ferramenta de criação de interfaces interativas
- [FreeFrontEnd](https://freefrontend.com/) - Exemplos de códigos, tutoriais e artigos de HTML, CSS, Javascript (Angular, JQuery, React, Vue)
- [Gravit Designer](https://www.designer.io) - Ferramenta de design online com suporte a ilustração vetorial
- [Grid Layoutit](https://grid.layoutit.com/) - Gerador de grid para código CSS
- [HTML DOM](https://htmldom.dev/) - Gerenciar o DOM HTML com JavaScript vanilla
- [Interfacer](https://interfacer.xyz/) - Recursos para criação de interfaces
- [Interfaces.pro](https://interfaces.pro/) - Inspiração para interfaces
- [Invision](https://www.invisionapp.com/) - Software de design para projetos
- [Lottie](https://lottiefiles.com/) - Animações em after effects via json
- [Luna](https://github.com/OfficialMarinho/luna) - Framework CSS brasileiro
- [Material-UI](https://material-ui.com/) - Um framework de interface de usuário para React
- [Mockup](https://mockup.io/about/) - Visualize e colabore no design de aplicativos para dispositivos móveis
- [Nes.css](https://nostalgic-css.github.io/NES.css/) - Framework CSS estilo NES
- [Neumorphism](https://neumorphism.io/) - Tendência aplicação border-radius
- [Normalize CSS](https://necolas.github.io/normalize.css/) - Normaliza estruturas entre navegadores
- [Pixilart](https://www.pixilart.com/draw) - Desenhe pixel arts online
- [Pixlr](https://pixlr.com/br/) - Conjunto de ferramentas e utilitários de edição de imagem baseado em nuvem
- [PSD-To-CSS-Shadow](http://psd-to-css-shadows.com/) - Gera o script para uma sombra (box-shadow & text-shadow) no CSS baseado nas configurações de sombra no Photoshop
- [Pure.css](https://purecss.io/) - Framework CSS responsivo
- [Remove.bg](https://www.remove.bg/) - Remove fundos de imagens automaticamente
- [Sketch](https://www.sketch.com/) - Desenvolvimento de layouts em alta qualidade
- [Squoosh.app](https://squoosh.app/) - Compressor de imagens e comparador, via navegador
- [SweetAlert2](https://sweetalert2.github.io/) - Biblioteca JavaScript de alertas responsivos e customizáveis
- [Tailwind CSS](https://tailwindcss.com/) - Framework de estilo CSS
- [UI Gradients](https://uigradients.com/) - UI gradientes para utilizar
- [Vectorizer](https://www.vectorizer.io/) - Converta imagens como PNGs, BMPs e JPEGs em gráficos vetoriais (SVG, EPS, DXF)
- [Whimsical](https://whimsical.com/) - Flowchart, Wireframe, Sticky Notes e Mind Map
- [X-Icon Editor](http://www.xiconeditor.com/) - Gerador de favicon com alta resolução a partir de imagens
> ◾ Desafios
- [Ace Front End](https://www.acefrontend.com/) - Desafios de programação Front-end. Resultados via texto. IDE integrada
- [AdventoOfCode](https://adventofcode.com/) - Desafios de programação por temporada. Sem IDE integrada. Validação manual feita pelo usuário
- [App Ideas](https://github.com/florinpop17/app-ideas) - Compilado de desafios para você testar seus conhecimentos e aumentar seu portfólio
- [CodePen Challenges](https://codepen.io/challenges) - Desafios de Programação Front-end. IDE integrada
- [Codier](https://codier.io/challenge) - Desafios de Programação Front-end, análise dos resultados feita pela comunidade. IDE integrada
- [CSS Battle](https://cssbattle.dev/) - Batalhas temporárias de CSS. IDE integrada
- [DevChallenge](https://www.devchallenge.com.br/) - Site com desafios de front-end, back-end e mobile
- [Flex Box Defense](http://www.flexboxdefense.com/) - Desafio de Programação Front-end focados na propriedade flex box. IDE integrada.
- [Flex Box Froggy](https://flexboxfroggy.com/) - Desafio de Programação Front-end focados na propriedade flex box. IDE integrada.
- [Front End Challanged Club](https://piccalil.li/category/front-end-challenges-club) - Bogs com desafios de programação front-end
- [Frontend Challengens](https://github.com/felipefialho/frontend-challenges) - Repositório no GitHub com vários desafios solicitados reais solicitados por empresas
- [Frontend Mentor](https://www.frontendmentor.io/) - Desafios de Programação Front-end, análise dos resultados feita pela comunidade, sem IDE integrada
- [Code Well](https://codewell.cc/) - Treine suas habilidade de HTML e CSS com alguns templates
> ◾ Bibliotecas para JavaScript
- [Lax.js](https://github.com/alexfoxy/lax.js)
- [Swiper](https://swiperjs.com/)
- [WOW](https://wowjs.uk/)
- [Animate](https://animate.style/)
- [ApexCharts](https://apexcharts.com/)
- [Particles.js](https://vincentgarreau.com/particles.js/)
- [ScrollMagic](https://scrollmagic.io/)
> ◾ Ferramentas para hospedar seu site
- [Github Pages](https://pages.github.com/) - Hospedado diretamente de seu repositório GitHub. Basta editar, enviar e suas alterações entrarão em vigor
- [Award Space](https://www.awardspace.com/) - Hospedagem gratuita na web + um subdomínio gratuito, PHP, MySQL, instalador de aplicativo, envio de e-mail e sem anúncios
- [Byet](https://byet.host/) - Hospedagem Gratuita e Serviços de Hospedagem Premium.
- [Infinity Free](https://infinityfree.net/) - Free Unlimited Web Hosting
- [1FreeHosting](http://www.1freehosting.com/) - Hospedagem de sites grátis com 100GB de largura de banda
- [Amazon Web Services](https://aws.amazon.com/pt/) - Serviço de aluguel de servidores e outros serviços
- [BlueHost](https://www.bluehost.com/) - Empresa americana de hospedagem de sites
- [DigitalOcean](https://www.digitalocean.com/) - Aluguel de servidores dedicados e compartilhados
- [DreamHost](https://www.dreamhost.com/) - Hospedagem de sites de alta disponibilidade
- [Embratel](https://www.embratel.com.br/cloud/hospedagem-de-sites) - Hospedagem de sites nacional
- [GoDaddy](https://br.godaddy.com/hosting/web-hosting) - Hospedagem de sites internacional
- [GoDaddy](https://br.godaddy.com/) - Empresa de aluguel de servidores compartilhados, dedicados e registro de domínio
- [Google Cloud](https://cloud.google.com/solutions/smb/web-hosting/) - Serviço de aluguel de servidores da Google
- [Heroku](https://www.heroku.com/) - Hospedagem de sites grátis com suporte à NodeJS, Java, Ruby, PHP, Python, Go, Scala e Clojure
- [HostGator](https://www.hostgator.com/) - Hospedagem compartilhada e dedicada para sites e serviços
- [Hostinger](https://www.hostinger.com.br/) - Hospedagem de sites
- [Hostoo](https://hostoo.io/) - Hospedagem de sites em cloud computing dedicado
- [iPage](https://www.ipage.com/) - Hospedagem de sites gringa com descontos para anúncios
- [KingHost](https://king.host/) - Hospedagem compartilhada e dedicada para sites e serviços de marketing por e-mail
- [Netlify](https://www.netlify.com/) - Hospedagem para sites estáticos que combina implantação global, integração contínua e HTTPS automático
- [One.com](https://www.one.com/pt-BR/) - Serviços gerais digitais (incluindo hospedagem de sites)
- [Surge](https://surge.sh/) - Hospedagem gratuita para páginas estáticas
- [Umbler](https://www.umbler.com/br) - Hospedagem compartilhada, cloud computing sob taxação de uso
- [Vercel](https://vercel.com/) - Hospedagem grátis de sites estáticos e serveless
> ◾ Sites para inspirar o seu desenvolvimento
- [Product Hunt](https://www.producthunt.com/)
- [Namify](https://namify.tech/?ref=producthunt)
- [Dribbble](https://dribbble.com/)
- [Pinterest](https://br.pinterest.com/)
- [Deviant Art](https://www.deviantart.com/)
- [Lapa](https://www.lapa.ninja/)
- [Hyper Pixel](https://hyperpixel.io/)
- [One Page Love](https://onepagelove.com/)
- [One Page Love Avatars](https://onepagelove.com/boring-avatars)
- [Land Book](https://land-book.com/)
- [Awwwards](https://www.awwwards.com)
- [Best Folios](https://www.bestfolios.com/home)
- [Sitesee](https://sitesee.co/)
- [Httpster](https://httpster.net/2021/jun/)
- [Builders Club](https://builders-club.com/)
- [CSS Nectar](https://cssnectar.com/)
- [Collect UI](https://collectui.com)
- [Best Web Site](https://bestwebsite.gallery)
> ◾ Banco de imagens gratuitas
- [500px](https://500px.com/creativecommons) - Banco de imagens gratuitas
- [Burst](https://pt.shopify.com/burst) - Plataforma de imagens do serviço de ecommerce Shopify
- [Cupcake](http://cupcake.nilssonlee.se/) - Imagens gratuitas para uso comercial
- [Banco De Imagens Com Diversidade](https://github.com/JulianaHelena5/BancoDeImagensComDiversidade) - Banco de imagens com pessoas diversas
- [DrawKIT](https://www.drawkit.io/) - Ilustrações para qualquer um usar
- [FlatIcon](https://www.flaticon.com) - Banco de ícones vetoriais
- [Flickr](https://flickr.com/) - Rede social de fotógrafos
- [FreeImages](https://pt.freeimages.com/) - Banco de imagens gratuitas
- [FreePik Stories](https://stories.freepik.com/) - Banco de ilustrações gratuitas
- [Freerange](https://freerangestock.com/index.php) - Banco de imagens gratuitas
- [Glaze](https://www.glazestock.com) - Banco de ilustrações, sem direitos autorais
- [Gratisography](https://gratisography.com/) - Banco de imagens gratuitas
- [Humaaans](https://www.humaaans.com/) - Ilustrações de humanóides
- [Icons8](https://icons8.com.br/) - Ícones em diversos estilos
- [Imgur](https://imgur.com/) - Plataforma com milhões de imagens
- [IraDesign](https://iradesign.io/illustrations) - Ilustrações editáveis de cores e objetos
- [Life of Pix](https://www.lifeofpix.com/) - Banco de imagens gratuitas
- [Little Visuals](https://littlevisuals.co/) - Banco de imagens gratuitas
- [Lorempixel](http://lorempixel.com/) - Banco de imagens para uso como template
- [Lukas Zadam](https://lukaszadam.com/illustrations) - Ilustrações SVG em diferentes tamanhos e estilos
- [ManyPixels](https://www.manypixels.co/gallery/) - Galeria de ilustrações com direito a edição de cores
- [Morguefile](https://morguefile.com/) - Banco de imagens gratuitas
- [Nappy](https://www.nappy.co) - Banco de imagens gratuitas (atribuição recomendada)
- [Nos.twnsnd](https://nos.twnsnd.co/) - Arquivo público de fotos antigas
- [OpenMoji](https://openmoji.org/) - Banco de emojis para uso
- [Pexels](https://www.pexels.com/) - Banco de imagens gratuitas
- [PhotoPin](http://photopin.com/) - Banco de imagens gratuitas no estilo criativo
- [Picjumbo](https://picjumbo.com/) - Banco de imagens gratuitas
- [Picsum](https://picsum.photos/) - Banco de imagens para uso como template
- [Pixabay](http://www.pixabay.com) - Banco de imagens gratuitas (não requer atribuição)
- [Public domain archive](https://www.publicdomainarchive.com/) - Banco de imagens gratuitas
- [RemixIcon](https://remixicon.com/) - Banco de Ícones para uso gratuito
- [StockSnap](https://stocksnap.io/) - Banco de imagens gratuitas (não requer atribuição)
- [unDraw](https://undraw.co/) - Ilustrações livres para usar
- [Unsplash](https://unsplash.com/) - Banco de imagens gratuitas
- [Visual Hunt](https://visualhunt.com/) - Banco de imagens gratuitas
- [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page) - Banco de imagens mundial
> ◾ Sites para baixar e encontrar fontes
- [Adobe Fonts](https://fonts.adobe.com/)
- [Google fonts](https://fonts.google.com/)
- [Dafont](https://www.dafont.com/pt/)
- [NetFontes](https://www.netfontes.com.br/)
- [Urbanfonts](https://www.urbanfonts.com/pt/)
- [Befonts](https://befonts.com/)
- [Fonts space](https://www.fontspace.com/)
- [1001 fonts](https://www.1001fonts.com/)
- [Abstract fonts](https://www.abstractfonts.com/)
- [Fontget](https://www.fontget.com/)
- [Material Design Icons](https://materialdesignicons.com/)
> ◾ Sites de paletas de cores
- [Paletton](https://paletton.com/)
- [Adobe Color](https://color.adobe.com/pt/create/color-wheel/)
- [Color Hunt](https://colorhunt.co/)
- [Happy Hues](https://www.happyhues.co/)
- [Coolors](https://coolors.co/)
- [Gradient Hunt](https://gradienthunt.com/)
- [Flat UI Colors](https://flatuicolors.com/)
- [Grabient](https://www.grabient.com/)
- [Pigment](https://pigment.shapefactory.co/)
- [WebGradient](https://webgradients.com/)
- [Color.lol](https://colors.lol/)
◾ Lista de ilustrações
- [DrawKIT](https://www.drawkit.io/)
- [Humaaans](https://www.humaaans.com/)
- [Open Doodle](https://www.opendoodles.com/)
- [Storyset](https://storyset.com/)
- [unDraw](https://undraw.co/)
- [404 Illustrations (by kapwing)](https://www.kapwing.com/404-illustrations/)
- [404 Illustrations](https://error404.fun/)
- [Ouch](https://icons8.com.br/illustrations/)
- [Delesing](https://delesign.com/free-designs/graphics/)
- [Pixeltru](https://www.pixeltrue.com/free-illustrations/)
- [Iconscout](https://iconscout.com/)
> ◾ Site de icones
- [DrawKIT](https://www.drawkit/free-icons/)
- [Eva Icons](https://akveo.github.io/eva-icons/#/)
- [Feather Icons](https://feathericons.com/)
- [Font Awesome](https://fontawesome.com)
- [Heroicons](https://heroicons.dev/)
- [Iconsvg](https://iconsvg.xyz/)
- [Icons8 Line Awesome](https://icons8.com/line-awesome/)
- [Icons8](https://icons8.com.br/)
- [Shape](https://shape.so/)
- [Flaticon](https://www.flaticon.com/br/)
- [Bootstrap icons](https://icons.getbootstrap.com/)
- [devicon](https://devicon.dev/)
> ◾ Extensões para o seu navegador
- [File Icons for GitHub and GitLab](https://chrome.google.com/webstore/detail/file-icons-for-github-and/ficfmibkjjnpogdcfhfokmihanoldbfe)
- [GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl)
- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=pt-BR)
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-BR)
- [Vue Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=pt-BR)
- [Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=pt-BR)