├── README.md └── src ├── WAI-ARIA.md ├── _model.md ├── chrome-devtools.md ├── concepts.md ├── css-performance.md ├── flexbox.md ├── fundamentals.md ├── grid-layout.md ├── grids.md ├── html-elements-5-1.md ├── html-elements.md ├── linked-data.md ├── markdown.md ├── microdate.md ├── open-graph.md ├── others.md ├── pug.md ├── react.md ├── resets.md └── twitter-card.md /README.md: -------------------------------------------------------------------------------- 1 | # Crazy Learning 2 | 3 | - [Markup](#markup) 4 | - [Style](#style) 5 | - [Behavior](#behavior) 6 | - [Others](#others) 7 | 8 | ## Markup 9 | - For browsers 10 | - [ ] [HTML elements](src/html-elements.md) 11 | - [ ] [New HTML5.1 elements](src/html-elements-5-1.md) 12 | - For screen readers 13 | - [ ] [WAI-ARIA](src/WAI-ARIA.md) 14 | - For Robots 15 | - Search engine 16 | - [ ] [Microdate](src/microdate.md) 17 | - [ ] [Linked Data](src/linked-data.md) 18 | - Share 19 | - [ ] [Open Graph](src/open-graph.md) 20 | - [ ] [Twitter Card](src/twitter-card.md) 21 | - For Humans 22 | - [ ] [Markdown](src/markdown.md) 23 | - Preprocessors/template engine 24 | - [ ] [Pug](src/pug.md) 25 | 26 | ## Style 27 | - Fundamentals 28 | - [ ] [Fundamentals](src/fundamentals.md) 29 | - Cross Browser 30 | - [ ] [Resets](src/resets.md) 31 | - Responsive Web Design 32 | - [ ] [Concepts](src/concepts.md) 33 | - [ ] [Grids](src/grids.md) 34 | - Layout 35 | - [ ] [CSS Flexbox Layout](src/flexbox.md) 36 | - [ ] [CSS Grid Layout](src/grid-layout.md) 37 | 38 | - Performance 39 | - [ ] [Performance](src/css-performance.md) 40 | 41 | ## Behavior 42 | - Javascript Library 43 | - [ ] [React](src/react.md) 44 | 45 | ## Browsers 46 | - Chrome 47 | - [ ] [Developer tools](src/chrome-devtools.md) 48 | 49 | ## Others 50 | - [ ] [Others](src/others.md) 51 | -------------------------------------------------------------------------------- /src/WAI-ARIA.md: -------------------------------------------------------------------------------- 1 | # WAI-ARIA 2 | 3 | - [ ] [Iniciando com Acessibilidade Web](https://www.youtube.com/watch?v=YjA7woDBryg) 4 | - [ ] [Frontinsampa 2015 - Vanessa Me Tonini: WAI-ARIA: Acessibilidade em tempo real](https://www.youtube.com/watch?v=l_NBdzqYm44) 5 | - [ ] [Accessible Rich Internet Applications](https://www.w3.org/TR/wai-aria-1.1/) 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/_model.md: -------------------------------------------------------------------------------- 1 | # Example 2 | 3 | - [ ] []() 4 | - [ ] []() 5 | - [ ] []() 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/chrome-devtools.md: -------------------------------------------------------------------------------- 1 | # Browsers 2 | 3 | - [ ] [Segredos do Chrome DevTools](https://www.youtube.com/playlist?list=PLiGzvgwA5Gmgnq5vPjJxW52hDiX3ndL53) 4 | - [ ] []() 5 | 6 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) -------------------------------------------------------------------------------- /src/concepts.md: -------------------------------------------------------------------------------- 1 | # RWD Concepts 2 | 3 | - [ ] [Design Responsivo I – O que é e por que usar](http://blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/) 4 | - [ ] [Design Responsivo III – Media Queries e Compatibilidade](http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/) 5 | - [ ] [Design Responsivo na prática: do rascunho ao digital](https://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/) 6 | - [ ] [Design Responsivo na prática 2: do layout ao HTML](https://tableless.com.br/design-responsivo-na-pratica-2-layout-ao-html/) 7 | - [ ] [Como testar design responsivo](https://tableless.com.br/como-testar-design-responsivo/) 8 | - [ ] [Imagens Responsivas de Alta Performance](https://tableless.com.br/imagens-responsivas-de-alta-performance/) 9 | - [ ] [Uma tonelada de Truques de Web Mobile](https://www.youtube.com/watch?v=aH9eVa2cTcM) 10 | - [ ] [Design Responsivo & Retina Display: desenvolvimento web em alta resolução](http://blog.popupdesign.com.br/design-responsivo-e-retina-display-desenvolvimento-web-em-tempos-de-alta-resolucao/) 11 | - [x] [User-first Responsive Web Design](https://www.youtube.com/watch?v=9R21WDH14Fg) 12 | - [ ] [Não interessa, eu quero responsivo!](https://www.youtube.com/watch?v=ib8QJfJb8N8) 13 | - [ ] [Uma pergunta e três ideias mágicas](https://www.youtube.com/watch?v=VJModxNnmy0) 14 | - [ ] [Mobile First está errado?](https://www.youtube.com/watch?v=Rrys1PVR5tQ) 15 | - [ ] [Responsive Web Design e a Ubiquidade da Web](https://www.youtube.com/watch?v=9PQgEl8dOAY) 16 | - [ ] [Desenvolvimento Responsivo e Viewport](http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/) 17 | - [x] [As Media Queries são só um detalhe](https://www.youtube.com/watch?v=_bT_9cQpZDw) 18 | - [ ] []() 19 | 20 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 21 | -------------------------------------------------------------------------------- /src/css-performance.md: -------------------------------------------------------------------------------- 1 | # CSS Performance 2 | 3 | - [ ] [Performance em CSS](https://www.youtube.com/watch?v=m1iV2C44Duc&t=23s) 4 | - [ ] []() 5 | - [ ] []() 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/flexbox.md: -------------------------------------------------------------------------------- 1 | # CSS Flexbox Layout 2 | 3 | - [ ] [Flexbox Layout: O guia definitivo](https://www.youtube.com/watch?v=qBxGXb4iTQw&t=1830s) 4 | - [ ] [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 5 | - [ ] [Awesome Flexbox](https://github.com/afonsopacifer/awesome-flexbox) 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/fundamentals.md: -------------------------------------------------------------------------------- 1 | # Fundamentals 2 | 3 | - [x] [A regra CSS e sua sintaxe](http://www.maujor.com/tutorial/sintaxetut.php) 4 | - [x] [Vinculando folhas de estilo à documentos](http://www.maujor.com/tutorial/insetut.php) 5 | - [x] [Unidades de medidas CSS](http://www.maujor.com/tutorial/unidades-de-medidas-css.php) 6 | - [x] [Definindo cores em uma regra CSS](http://www.maujor.com/tutorial/cores.php) 7 | - [x] [Abreviando declarações e valores em regras CSS](http://www.maujor.com/tutorial/abreviacss.php) 8 | - [x] [Herança CSS](http://www.maujor.com/tutorial/heranca-css.php) 9 | - [x] [Guia definitivo das pseudoclasses e pseudoelementos das CSS](http://www.maujor.com/tutorial/guia-definitivo-das-pseudoclasses-e-pseudoelementos-css.php) 10 | - [ ] [A especificidade e o efeito cascata](http://www.maujor.com/tutorial/especificidade.php) 11 | - [x] [Why I'm Excited About Native CSS Variables](https://philipwalton.com/articles/why-im-excited-about-native-css-variables/) 12 | - [x] [CSS Custom Properties for Cascading Variables Module Level 1](https://drafts.csswg.org/css-variables/) 13 | - [x] [What is the difference between CSS variables and preprocessor variables?](https://css-tricks.com/difference-between-types-of-css-variables/?ref=webdesignernews.com) 14 | - [ ] [Lea Verou - CSS Variables: var(--subtitle);](https://www.youtube.com/watch?v=2an6-WVPuJU&feature=youtu.be) 15 | - [ ] [David Khourshid's Reactive Animations with CSS](https://youtu.be/lTCukb6Zn3g) 16 | - [ ] [Harry Roberts Pragmatic, Practical, and Progressive Theming with Custom Properties](http://csswizardry.com/2016/10/pragmatic-practical-progressive-theming-with-custom-properties/) 17 | - [ ] [Roman Komarov's Conditions for CSS Variables](http://kizu.ru/en/fun/conditions-for-css-variables/) 18 | - [x] [#019 - Trabalhando com CSS Custom Properties - Quick Tip #001](https://www.youtube.com/watch?v=NAp1FX9mGPU&list=PLgcWRW66amTnK9RhsViFHd3B7-pUW02U1) 19 | - [x] [#020 - Fallback nativo em variáveis CSS - Quick Tip #002](https://www.youtube.com/watch?v=3joOXJkSM58&list=PLgcWRW66amTnK9RhsViFHd3B7-pUW02U1&index=2) 20 | - [x] [#021 - Criando mixins com CSS nativo - Quick Tip #003](https://www.youtube.com/watch?v=hs1mASz6coA&list=PLgcWRW66amTnK9RhsViFHd3B7-pUW02U1&index=3) 21 | - [x] [#022 - Construindo uma Style API com HTML e CSS - Quick Tip #004](https://www.youtube.com/watch?v=KYym_KyiVm8&index=4&list=PLgcWRW66amTnK9RhsViFHd3B7-pUW02U1) 22 | 23 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 24 | -------------------------------------------------------------------------------- /src/grid-layout.md: -------------------------------------------------------------------------------- 1 | # CSS Grid Layout 2 | 3 | - [ ] [CSS Grid Layout Module Level 1](https://www.w3.org/TR/css3-grid-layout/) 4 | - [ ] [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) 5 | - [ ] [CSS grid: isso muda tudo de novo](http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/) 6 | - [ ] [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 7 | - [ ] [Grid by Example](http://gridbyexample.com/examples/) 8 | - [ ] [Grid by Example - What is CSS Grid Layout?](http://gridbyexample.com/what/) 9 | - [ ] [Grid by Example - CSS Grid Layout](http://gridbyexample.com/) 10 | - [ ] [CSS Grid Layout Examples](https://igalia.github.io/css-grid-layout/) 11 | 12 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 13 | -------------------------------------------------------------------------------- /src/grids.md: -------------------------------------------------------------------------------- 1 | # Grids 2 | 3 | - [ ] [Design Responsivo II – Grids e Texto](http://blog.popupdesign.com.br/design-responsivo-grids-e-texto/) 4 | - [ ] [Criando grids semânticos VS não semânticos](https://www.youtube.com/watch?v=fHM2MUn1gwg&t=70s) 5 | - [ ] [Grid System responsivo e semântico](https://www.youtube.com/watch?v=0lPHaKX7XlU&t=69s) 6 | - [ ] [Perguntas Frequentes sobre Grids](http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/) 7 | - [ ] []() 8 | 9 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 10 | -------------------------------------------------------------------------------- /src/html-elements-5-1.md: -------------------------------------------------------------------------------- 1 | # HTML 5.1 Elements 2 | 3 | - [x] [O que há de novo no HTML5.1?](https://speakerdeck.com/afonsopacifer/o-que-ha-de-novo-no-html5-dot-1) 4 | 5 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 6 | -------------------------------------------------------------------------------- /src/html-elements.md: -------------------------------------------------------------------------------- 1 | # HTML Elements 2 | 3 | - [x] [Semântica: uma jornada pelos componentes web por Bernard De Luna](https://www.youtube.com/watch?v=57ZtsK0Y4vo&t=2s) 4 | - [x] [DIVE INTO HTML5](https://diveintohtml5.com.br/) 5 | - [x] [HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 6 | - [x] [Favicons](https://tableless.com.br/favicons/) 7 | 8 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 9 | -------------------------------------------------------------------------------- /src/linked-data.md: -------------------------------------------------------------------------------- 1 | # Linked Data 2 | 3 | - [ ] [Linked Data, JSON-LD e Web Semântica](https://www.youtube.com/watch?v=vAjBRcg3ydM&t=1s) 4 | - [ ] []() 5 | - [ ] []() 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/markdown.md: -------------------------------------------------------------------------------- 1 | # Markdown 2 | 3 | - [ ] [EMOJI CHEAT SHEET](http://www.webpagefx.com/tools/emoji-cheat-sheet/) 4 | - [ ] [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) 5 | 6 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 7 | -------------------------------------------------------------------------------- /src/microdate.md: -------------------------------------------------------------------------------- 1 | # Microdate 2 | 3 | - [ ] [Schema.org – Dando significado ao conteúdo na internet](http://blog.popupdesign.com.br/schema-org-dando-significado-ao-conteudo-na-internet/) 4 | - [ ] [Frontinsampa 2014 - Dados sobre Dados: Microdata e Open Graph](https://www.youtube.com/watch?v=GOOuxWXsG-E) 5 | - [ ] [Testing-tool](https://search.google.com/structured-data/testing-tool/u/0/) 6 | 7 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 8 | -------------------------------------------------------------------------------- /src/open-graph.md: -------------------------------------------------------------------------------- 1 | # Open Graph 2 | 3 | - [ ] [Facebook Open Graph](http://blog.popupdesign.com.br/facebook-open-graph/) 4 | - [ ] [The Open Graph protocol docs](http://ogp.me/) 5 | 6 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 7 | -------------------------------------------------------------------------------- /src/others.md: -------------------------------------------------------------------------------- 1 | # Others 2 | 3 | - [x] [The Creative Developer](https://www.youtube.com/watch?v=LGD6ZeFPX80) 4 | - [ ] [500 days of open source](https://www.youtube.com/watch?v=toCdZ2e9Dh4&index=11&list=PLg2lQYZDBwORUpJTu5MxI71iEQIyc_Lno) 5 | - [x] [Falando sobre Cultura de Desenvolvimento](https://www.youtube.com/watch?v=-ARjmc29kuE&t=5s) 6 | - [ ] [Como o time de front-end da Locaweb trabalha](https://www.youtube.com/watch?v=y1uMzmn0JoA) 7 | - [ ] [A "saudável" vida de um desenvolvedor front-end em uma startup](https://www.youtube.com/watch?v=ciWxHqg1NCA) 8 | - [ ] [O front, as minas e pah!](https://www.youtube.com/watch?v=YQ9oAps5eVY&t=681s) 9 | - [ ] [O Poder está no frontend](https://www.youtube.com/watch?v=cmT3clnhbiQ&t=36s) 10 | - [ ] [FrontinSampa 2012 - Tema Surpresa](https://www.youtube.com/watch?v=y8UUKv7j0l0) 11 | - [ ] [Frontinsampa 2016 - Palestra Surpresa (2012 feelings)](https://www.youtube.com/watch?v=jR3ysN9wiTk&t=157s) 12 | - [ ] [A web está morrendo e você é o culpado](https://www.youtube.com/watch?v=RIEsNPCP-PI&t=2s) 13 | - [x] [palestra o começo do high stakes lifestyle | gabriel goffi](https://www.youtube.com/watch?v=0ePSkO_bD84) 14 | - [x] [Como falar de um jeito que as pessoas queiram ouvir](https://www.youtube.com/watch?v=WURqliMkxXg) 15 | - [x] [Mentalidade da alta performance: cinco passos simples](https://www.youtube.com/watch?v=ea_o7Ce_Iec) 16 | - [ ] [gabriel goffi.](https://www.youtube.com/watch?v=tPEl_b-H6tA&list=PLARP07eD9DM-sOB5CcNBkWfK96uKNAErs) 17 | 18 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 19 | -------------------------------------------------------------------------------- /src/pug.md: -------------------------------------------------------------------------------- 1 | # Pug 2 | 3 | - [ ] [overview](https://dev.twitter.com/cards/overview) 4 | - [ ] []() 5 | 6 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 7 | -------------------------------------------------------------------------------- /src/react.md: -------------------------------------------------------------------------------- 1 | # React 2 | 3 | - [x] [Quick Start](https://facebook.github.io/react/docs/hello-world.html) 4 | 5 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 6 | -------------------------------------------------------------------------------- /src/resets.md: -------------------------------------------------------------------------------- 1 | # Resets 2 | 3 | - [ ] [Repensando CSS Resets](https://tableless.com.br/repensando-css-resets/) 4 | 5 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 6 | -------------------------------------------------------------------------------- /src/twitter-card.md: -------------------------------------------------------------------------------- 1 | # Twitter cards 2 | 3 | - [ ] [Documentation](https://dev.twitter.com/cards/overview) 4 | - [ ] [Validator](https://cards-dev.twitter.com/validator) 5 | 6 | ### [<-- Back](https://github.com/simoneas02/crazy-learning/) 7 | --------------------------------------------------------------------------------