Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/EduardoRotundaro/awesome-frontend

:eyeglasses: Uma lista de links, documentações e artigos úteis para o desenvolvimento de aplicações frontend.
https://github.com/EduardoRotundaro/awesome-frontend

List: awesome-frontend

awesome-frontend awesome-list front-end front-end-development frontend frontend-development frontend-web

Last synced: 16 days ago
JSON representation

:eyeglasses: Uma lista de links, documentações e artigos úteis para o desenvolvimento de aplicações frontend.

Awesome Lists containing this project

README 

        
![Awesome Frontend](https://github.com/EduardoRotundaro/awesome-frontend/blob/master/images/cover.png?raw=true)



> Uma lista de links, documentações e artigos úteis para o desenvolvimento de aplicações frontend.



 

 



---



 

 



# Conteúdo



| Conteúdo | O que tem? |   |

| ------ | ------ | ------ |

| 🤯 **Conceitos** | Artigos e links para aprender/lembrar conceitos importantes | **[Ver](#conceitos)** |

| 🔨 **Desenvolvimento** | Ferramentas úteis para desenvolvimento | **[Ver](#desenvolvimento)** |

| 🆒 **Dicas** | Coleções de dicas e utilidades | **[Ver](#dicas)** |

| 📂 **Bibliotecas** | 🚧...👨‍💻...🚧 | **[Ver](#bibliotecas)** |

| 📑 **Style guides** | 🚧...👨‍💻...🚧 | **[Ver](#style-guides)** |

| 💄 **UI** | 🚧...👨‍💻...🚧 | **[Ver](#ui)** |

| 👉🏻 **Gerador de CSS** | 🚧...👨‍💻...🚧 | **[Ver](#gerador-de-css)** |

| 🎨 **Cores** | 🚧...👨‍💻...🚧 | **[Ver](#cores)** |

| 🏃 **Animações CSS** | 🚧...👨‍💻...🚧 | **[Ver](#animações-css)** |

| 📝 **Markdown** | 🚧...👨‍💻...🚧 | **[Ver](#markdown)** |

| 📋 **Listas** | 🚧...👨‍💻...🚧 | **[Ver](#listas)** |

| 🅰️ **Fontes** | 🚧...👨‍💻...🚧 | **[Ver](#fontes)** |

| 👍🏻 **Ícones** | 🚧...👨‍💻...🚧 | **[Ver](#ícones)** |

| 🎴 **Imagens** | 🚧...👨‍💻...🚧 | **[Ver](#imagens)** |

| 🈵 **Lorem Ipsum** | 🚧...👨‍💻...🚧 | **[Ver](#lorem-ipsum)** |

| 💡 **Design** | 🚧...👨‍💻...🚧 | **[Ver](#design)** |

| 👓 **Listas Awesome** | 🚧...👨‍💻...🚧 | **[Ver](#listas-awesome)** |

| ❓ **Tutoriais** | 🚧...👨‍💻...🚧 | **[Ver](#tutoriais)** |

| 📰 **Artigos** | 🚧...👨‍💻...🚧 | **[Ver](#artigos)** |

| 💻 **Sites de Artigos e tutoriais** | 🚧...👨‍💻...🚧 | **[Ver](#sites-de-artigos-e-tutoriais)** |

| ⚛ **React.js** | 🚧...👨‍💻...🚧 | **[Ver](#react)** |

| 🔻 **Vue.js** | 🚧...👨‍💻...🚧 | **[Ver](#vue)** |

| ⬇️ **Extensões** | 🚧...👨‍💻...🚧 | **[Ver](#extensões)** |

| 📔 **Documentações** | 🚧...👨‍💻...🚧 | **[Ver](#documentações)** |



 

 

 



---



 



## Conceitos



* [7 Regras para criar UIs Part I](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda) - Uma lista com 7 "regras" para seguir ao criar interfaces de usuário (parte I).

* [7 Regras para criar UIs Part II](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96) - Uma lista com 7 "regras" para seguir ao criar interfaces de usuário (parte II).

* [30 seletores CSS](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) - Uma lista com 30 formas de selecionar elementos com CSS.

* [BEM](http://getbem.com/introduction/) - Padrão de nomenclatura de classes CSS para um projeto organizado.

* [Código Limpo com Javascript](https://github.com/ryanmcdermott/clean-code-javascript) - Conceitos de código limpo aplicados em Javascript.

* [Conteúdo do Head](https://github.com/joshbuchea/HEAD) - Uma lista com tags para inserir no HEAD da página e o porquê de inseri-las.

* [Frontend Checklist I](https://codeburst.io/the-front-end-checklist-8b2292fdda44) - Uma lista de itens necessários/obrigatórios em uma aplicação frontend.

* [Frontend Checklist II](https://github.com/thedaviddias/Front-End-Checklist) - Outra lista de itens necessários/obrigatórios em uma aplicação frontend.

* [HTML5 Cheatsheet](https://medium.com/level-up-web/the-mega-html5-cheatsheet-e8c479b1c521) - Uma lista com todas as tags HTML e uma descrição sobre quando dever ser utilizadas.

* [Javascript Design Patterns](https://levelup.gitconnected.com/basic-javascript-design-patterns-decorators-facades-and-proxies-2309eb485229?gi=780fb3bb5092) - Decorators, Facades e Proxies explicadas e exemplificadas em Javascript.

* [+ Javascript Design Patterns](https://github.com/nnupoor/js_designpatterns) - Mais alguns design patterns explicados e exemplificados em Javascript.

* [Micro-frontend](https://medium.com/@dudousxd/microservi%C3%A7os-%C3%A9-coisa-do-passado-agora-a-moda-%C3%A9-micro-front-end-303ace0aa6de) - Artigo sobre o conceito de micro frontends.

* [Mobile First](https://medium.com/nossa-coletividad/por-que-%C3%A9-t%C3%A3o-f%C3%A1cil-errar-no-mobile-first-b51f8103e06a) - Um guia sobre o conceito "Mobile First".

* [Organizando o HTML](https://css-tricks.com/how-to-section-your-html/) - Estruturando o HTML da forma correta.

* [Padrões de Arquitetura](https://proandroiddev.com/mvc-mvp-mvvm-clean-viper-redux-mvi-prnsaaspfruicc-building-abstractions-for-the-sake-of-building-18459ab89386) - Padrões explicados: MVC, MVP, VIPER, MVVM, MVI, FLUX, REDUX.

* [Padrões de Arquitetura II](https://levelup.gitconnected.com/software-architecture-the-important-architectural-patterns-you-need-to-know-a1f5ea7e4e3d) - Os mais importantes padrões de arquitetura.

* [SEO](https://rockcontent.com/blog/o-que-e-seo/) - Um guia sobre SEO.

* [SOLID](https://medium.com/joaorobertopb/o-que-%C3%A9-solid-o-guia-completo-para-voc%C3%AA-entender-os-5-princ%C3%ADpios-da-poo-2b937b3fc530) - Um guia completo sobre SOLID.

* [Testes](https://medium.com/@caiovaccaro/arquitetura-front-end-testes-3d4e3f514486) - Um artigo sobre testes em frontend.

* [UI Patterns](http://ui-patterns.com/) - Design patterns na criação de interfaces de usuário.

* [Validação de formulários](https://medium.com/@andrew.burton/form-validation-best-practices-8e3bec7d0549) - Um artigo com as melhores práticas para validação de formulários.



**[⬆ Voltar ao menu](#conteúdo)**



 



---



 



## Desenvolvimento



* [4Devs](https://www.4devs.com.br/) - Ferramenta para desenvolvedores: geradores, validadores, funções...

* [Can I Use?](https://caniuse.com/) - Informa se determinado recurso é suportado por browsers ou por determinadas versões.

* [Conventional Commits](https://www.conventionalcommits.org/pt-br/v1.0.0-beta.4/) - Uma convenção simples para dar um significado legível às mensagens de commit.

* [Free Formatter](https://www.freeformatter.com/) - Ferramenta para desenvolvedores: formatadores, validadores, minificadores de código, conversores...

* [Gitmoji](https://gitmoji.carloscuesta.me/) - Uma forma visual de categorizar os commits de um projeto.

* [Oh Shit Git](https://ohshitgit.com/) - Uma lista com comandos GIT que podem salvar.

* [Pingdom Website Speed Test](https://tools.pingdom.com/) - Uma ferramenta online para testes de performance em sites.

* [REPL](https://repl.it/) - Uma IDE online, com suporte a mais de 50 linguagens.



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Dicas



* [30 Seconds of Code](https://www.30secondsofcode.org/) - Outra coleção de dicas e utilidades Javascript.

* [33 JS Concepts](https://github.com/leonardomso/33-js-concepts) - 33 conceitos em Javascript que todo desenvolvedor "deve" conhecer.

* [Apps Ideas](https://github.com/florinpop17/app-ideas) - Uma coleção de idéias para criar aplicações para aprender um novo conceito, uma nova tecnologia ou aumentar o portifólio. ★

* [CSS Protips](https://github.com/AllThingsSmitty/css-protips) - Coleção de dicas e utilidades CSS.

* [JS Tips](https://www.jstips.co/) - Coleção de dicas e utilidades Javascript.

* [Web Development Roadmap](https://github.com/kamranahmedse/developer-roadmap) - Um roteiro de estudo, focado em áreas de desenvolvimento web.



**[⬆ Voltar ao menu](#conteúdo)**



---



 



 



 



 



 



 



# 🚧 👨‍💻 🚧



 



## Bibliotecas



#### CSS



* [960 Grid System](https://960.gs/) - sistema de grid com 12 ou 16 colunas.

* [Pure CSS](https://purecss.io/start/) - pacote de módulos CSS leve e responsivo.

* [Purge CSS](https://www.purgecss.com/) - remova códigos CSS não utilizados.

* [Post CSS](https://postcss.org/) - criação e edição de estilos CSS com plugins.

* [Tailwind](https://tailwindcss.com/) - framework CSS para criação rápida de estilos.



**[⬆ Voltar ao menu](#conteúdo)**



#### SASS



* [Andy.scss](http://gillesbertaux.com/andy/) - coleção de mixins utilitários.

* [Bourbon](https://www.bourbon.io/) - coleção de ferramentas SASS.

* [Breakpoint SASS](http://breakpoint-sass.com/) - coleção de Media Queries.

* [CSS Owl](https://cssowl.owl-stars.com/) - coleção de mixins utilitários.

* [Pleeease](http://pleeease.io/) - pré-processador de CSS.

* [SASS CSS3 Mixins](https://github.com/matthieua/sass-css3-mixins) - coleção de mixins utilitários.



**[⬆ Voltar ao menu](#conteúdo)**



#### Utilitários



* [Analyze CSS](https://github.com/macbre/analyze-css) - analisar performance de arquivos CSS.

* [Base](https://getbase.org/) - framework CSS responsivo.

* [Bulma](https://bulma.io/) - framework CSS baseado em Flexbox.

* [Clipboard](https://github.com/zenorocha/clipboard.js) - biblioteca utilitária para "Copy to clipboard".

* [Dinero](https://sarahdayan.github.io/dinero.js/module-Dinero.html) - biblioteca para manipulações com dinheiro.

* [Format.js](https://formatjs.io/) - biblioteca para formatações.

* [History](https://github.com/browserstate/history.js) - biblioteca de histórico e estados.

* [Is.js](http://is.js.org/) - biblioteca para validações.

* [Lodash](https://lodash.com/docs/4.17.15) - biblioteca de utilidades em JS.

* [Luxon](https://moment.github.io/luxon/) - biblioteca de manipulação de datas me JS.

* [Math.js](https://mathjs.org/) - biblioteca de utilidades matemáticas.

* [Moment.js](https://momentjs.com/) - biblioteca de manipulação de datas me JS.

* [Pug](https://pugjs.org/api/getting-started.html) - template engine.

* [Voca.js](https://vocajs.com/) - biblioteca para strings em JS.



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Gerador de CSS



* [Auto Prefixer](https://autoprefixer.github.io/)

* [CSS Matic](https://www.cssmatic.com/)

* [CSS Type Set](http://csstypeset.com/)

* [CSS3 Maker](https://www.css3maker.com/index.html)

* [Enjoy CSS](https://enjoycss.com/)

* [Flexy Boxes](https://the-echoplex.net/flexyboxes/)

* [Grid Maker](https://grid.layoutit.com/)

* [Responsive Patterns](https://bradfrost.github.io/this-is-responsive/patterns.html#layout)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Fontes



* [Dafont](https://www.dafont.com/mtheme.php)

* [Google Fonts](https://fonts.google.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Cores



* [Adobe Colors](https://color.adobe.com/pt/create/color-wheel)

* [Brand Colors](https://brandcolors.net/)

* [Coolors](https://coolors.co/app)

* [Flat UI Colors](https://flatuicolors.com/)

* [Gradient Generator](https://www.ccbg.io/generator)

* [HTML Color Codes](https://htmlcolorcodes.com/)

* [UI Gradients](https://uigradients.com/#VerBlack)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Ícones



* [Feather](https://feathericons.com/)

* [Font Awesome](https://fontawesome.com/icons?d=gallery)

* [Fontello](http://fontello.com/)

* [FreePik](https://www.freepik.com/)

* [Google Material Icons](http://google.github.io/material-design-icons/)

* [Icons8](https://icons8.com/icons)

* [Icon Monster](https://iconmonstr.com/)

* [Material Design](https://material.io/resources/icons/?icon=account_circle&style=baseline)

* [Octicons](https://octicons.github.com/)

* [Simple Icons](https://simpleicons.org/)

* [The Noun Project](https://thenounproject.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Listas



* [Emojis](https://eduardorotundaro.github.io/emoji-list/)

* [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)

* [Emoji Pedia](https://emojipedia.org/)

* [HTML Symbols](https://www.toptal.com/designers/htmlarrows/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Animações CSS



* [Animate](http://cssanimate.com/)

* [Animate.css](https://daneden.github.io/animate.css/)

* [Animista](https://animista.net/)

* [Hover](http://ianlunn.github.io/Hover/)

* [Infinite](http://tilomitra.github.io/infinite/)

* [Motion](http://pavlyukpetr.com/awesome/#)

* [Reboundgen](http://dwarcher.github.io/reboundgen/examples/)

* [Tuesday](http://shakrmedia.github.io/tuesday/)

* [Vivify](http://vivify.mkcreative.cz/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Design



* [Code My UI](https://codemyui.com/)

* [Collect UI](http://collectui.com/)

* [Dribbble](https://dribbble.com/)

* [Free Frontend](https://freefrontend.com/)

* [Httpster](https://httpster.net/)

* [Inspiration UI](http://inspirationui.com/)

* [Lapa Ninja](https://www.lapa.ninja/)

* [One Page Love](https://onepagelove.com/inspiration)

* [Page Flows](https://pageflows.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## React



* [Ant Design](https://github.com/ant-design/ant-design)

* [Awesome React](https://github.com/enaqx/awesome-react)

* [Awesome React Components](https://github.com/brillout/awesome-react-components)

* [Blueprint](https://blueprintjs.com/docs/)

* [Material Design](https://mdbootstrap.com/docs/react/components/demo/)

* [Material UI](https://material-ui.com/)

* [Next.js](https://nextjs.org/)

* [Semantic UI](https://react.semantic-ui.com/)

* [Styled Components](https://github.com/styled-components/styled-components)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Vue



* (Em desenvolvimento...)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Markdown



* [Dillinger](https://dillinger.io/)

* [Stack Edit](https://stackedit.io/app#)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Tutoriais



* [Flex Box Froggy](https://flexboxfroggy.com/)

* [Flukeout](https://flukeout.github.io/)

* [Internet Is Hard](https://internetingishard.com/)

* [GRID By Example](https://gridbyexample.com/learn/)

* [React Patterns](https://krasimirtsonev.com/blog/article/react-js-in-design-patterns)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Style guides



* [CSS & SASS](https://github.com/airbnb/css)

* [Javascript](https://github.com/airbnb/javascript)

* [React](https://github.com/airbnb/javascript/tree/master/react)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Artigos



* [9 Flexbox Features](https://dev.to/melnik909/top-9-features-of-flexbox-that-you-may-don-t-know-1n10)

* [Code Geekz](https://codegeekz.com/)

* [Frontend Development Roadmap](https://pbs.twimg.com/media/EKL1hGPXYAA3zt0?format=jpg&name=4096x4096)

* [Lazy Loading Images](https://css-tricks.com/the-complete-guide-to-lazy-loading-images/)

* [Media Queries](https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/)

* [SASS Structure](https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4)

* [You Dont Know JS](https://github.com/getify/You-Dont-Know-JS)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Sites de Artigos e tutoriais



* [Code House](https://codyhouse.co/)

* [CSS Author](https://cssauthor.com/)

* [CSS Tricks](https://css-tricks.com/)

* [Egg Head](https://egghead.io/)

* [freeCodeCamp](https://github.com/freeCodeCamp/freeCodeCamp)

* [Site Point](https://www.sitepoint.com/blog/)

* [Tutorial Zine](https://tutorialzine.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Lorem Ipsum



* [Lorem Ipsum Generator](https://loremipsum.io/generator/?n=5&t=p)

* [Mussum Ipsum](https://mussumipsum.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Imagens



* [Lean Logo Maker](https://leanlogomaker.com/)

* [Logo Makr](https://logomakr.com/)

* [Online Logo Maker](https://www.onlinelogomaker.com/logomaker/)

* [Unsplash](https://unsplash.com/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## UI



* [Bootstrap](https://getbootstrap.com/docs/4.4/getting-started/introduction/)

* [Foundation](https://get.foundation/index.html)

* [Shoe Lace](https://www.shoelace.style/)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Listas Awesome



* [Awesome](https://github.com/sindresorhus/awesome)

* [Design](https://github.com/gztchan/awesome-design)

* [Design Patterns](https://github.com/DovAmir/awesome-design-patterns)

* [Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools)

* [Frontend](https://github.com/grab/front-end-guide)

* [MongoDB](https://github.com/ramnes/awesome-mongodb)

* [Node.js](https://github.com/sindresorhus/awesome-nodejs)

* [React](https://github.com/enaqx/awesome-react)

* [React Tips](https://github.com/vasanthk/react-bits)

* [React Components](https://github.com/brillout/awesome-react-components)

* [React Native](https://github.com/jondot/awesome-react-native)

* [Redux](https://github.com/markerikson/react-redux-links)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Documentações



* [CSS](https://www.w3schools.com/css/default.asp)

* [React.js](https://pt-br.reactjs.org/docs/getting-started.html)

* [SASS](https://sass-lang.com/documentation)



**[⬆ Voltar ao menu](#conteúdo)**



---



 



## Extensões



* [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

* [Redux DevtTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=pt-BR)

* [Wave Evaluation Tool](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)



**[⬆ Voltar ao menu](#conteúdo)**



* [30 Seconds Of Code](https://github.com/30-seconds/30-seconds-of-code)

* [Javascript Algorithms](https://github.com/trekhleb/javascript-algorithms)

* [Learn Layout](http://learnlayout.com/)

* [Svelte](https://svelte.dev/)