O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.

Slide 1

Slide 1 text

… 1

Slide 2

Slide 2 text

2 ```CSS é simples para aprender mas leva anos para se tornar um(a) mestre(a)``

Slide 3

Slide 3 text

Sem Roadmaps E sem frameworks 3

Slide 4

Slide 4 text

afonsopacifer.github.io O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5 4

Slide 5

Slide 5 text

Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 5

Slide 6

Slide 6 text

2015 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Conferência CSS Brasil http://henriquesilverio.github.io/eventos/conferencia-css-brasil-2015 8

Slide 9

Slide 9 text

RIO > SP 9 Rodoviária e amizades (6h)

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

9 / 05 / 15 12

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Começando pelo CSS 5 15

Slide 16

Slide 16 text

CSS 5? 16

Slide 17

Slide 17 text

Que? E o CSS4?

Slide 18

Slide 18 text

Já ta no CSS 5?

Slide 19

Slide 19 text

Lek,

Slide 20

Slide 20 text

Voltando a base

Slide 21

Slide 21 text

World Wide Web Consortium https://www.w3.org/

Slide 22

Slide 22 text

Write Specs Implement Features

Slide 23

Slide 23 text

CSS 4 ? CSS 5 ?

Slide 24

Slide 24 text

Entendendo O passado para explicar o futuro

Slide 25

Slide 25 text

CSS timeline

Slide 26

Slide 26 text

1994 Bert Boss se interessa E começa a ajudar no projeto. Håkon Wium Lie começa o primeiro rascunho doCSS. A primeira apresentação sobre CSS acontece em Chicago na WWW Conference.

Slide 27

Slide 27 text

1995 A W3C se interessa. É criada a primeira lista de e-mails.

Slide 28

Slide 28 text

1996 W3C publica o CSS 1.0 Internet Explorer 3 é o primeiro browser a suportar CSS, Seguido pelo Netscape 4 e o Opera 3.5.

Slide 29

Slide 29 text

1997 O CSS Working Group é o fi cialmente criado.

Slide 30

Slide 30 text

1998 W3C publica a especi fi cação CSS 2.0. Erick Mayer lança a developer suit para o Opera. Esse project melhora o suporte a CSS.

Slide 31

Slide 31 text

2011 W3C lança a especi fi cação do CSS 2.1.

Slide 32

Slide 32 text

2014 W3C lança o HTML 5. O CSS3 deixa seu estado de draft e se torna uma recommendation.

Slide 33

Slide 33 text

1994 1995 1996 1997 1998 2011 2014 2020 CSS 2.0 CSS 2.1

Slide 34

Slide 34 text

A solução?

Slide 35

Slide 35 text

CSS 3

Slide 36

Slide 36 text

Muito mais que animations, fl exbox, borders, etc…

Slide 37

Slide 37 text

CSS 2.1 CSS 3 All CSS Specs Version 2.1 Flex box Selectors Grid Layout Custom properties Media queries LV 1 LV 1 LV 2 LV 4 LV 5 Modules Monolito

Slide 38

Slide 38 text

Um CSS 4 ou CSS 5 Global não faz sentido

Slide 39

Slide 39 text

O que acontece dentro de um level?

Slide 40

Slide 40 text

Working Draft WD Canditate Recommendation CR Proposed Recommendation PR Recommendation REC

Slide 41

Slide 41 text

Conheça os Editores

Slide 42

Slide 42 text

Voltando… 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Primeiro Code in the Dark 44 2016

Slide 45

Slide 45 text

Slide 46

Slide 46 text

@deividmarques 46 Deivid Marques Frontend Developer #Usability #Accessibility Dica sobre como Melhorar com CSS?

Slide 47

Slide 47 text

47 ```adquira um conhecimento profundo de HTML semântico e entenda sobre eixos x,y e z existente nas telas que desenvolvemos, conhecer profundamente de DOM e o CSSOM ajudará a ter um CSS escalável, performático e acessível.``` - Deivid Marques 1/2

Slide 48

Slide 48 text

48 ```Errar e aprender faz parte, então se divirta e solte seu lado artístico, desenhando, pintando, e animando pixels com responsabilidade e acessibilidade, pois além de tudo o código precisa ser compreensível pra humanos e máquinas``` - Deivid Marques 2/2

Slide 49

Slide 49 text

Primeira Front end Week 49 2016

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

53 2/2

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

2015 2016 56 Zé mané Meetup CSS no Google

Slide 57

Slide 57 text

O que rolou nesse ano? 57

Slide 58

Slide 58 text

Slide 59

Slide 59 text

@omariosouto 59 Dev Soutinho Lead Software Enginee. Alura & Creator at DevSoutinho Mario Souto Como escrever CSS Sem gambiarras?

Slide 60

Slide 60 text

60 ```Não dá pra parar chutar CSS sem tentar entender o que você quer fazer``` - Mario Souto (Dev Soutinho)

Slide 61

Slide 61 text

Voltando para 2015… 61

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Um mês após a Conf CSS 63

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Aprendi a Ler a especificação 66

Slide 67

Slide 67 text

Achei algo interessante 67

Slide 68

Slide 68 text

CSS GRID Layout 68 2015

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

@samorim02 71 Simone Amorim A dama Do CSS CSS Software Engineer em Berlim Como escrever CSS Sem o processo de tentativa e erro?

Slide 72

Slide 72 text

72 ```O segredo é iniciar os estudos pelo básico e entender de fato a função de cada propriedade. Pare de tentar aprender na base de tentativa e erro, sei que é muito conteúdo, mas se desafie com a meta de todo dia aprender e entender o que uma propriedade faz, no fim do ano você vai ter aprendido 365 coisas novas e vai alavancar tua experiência com CSS.``` - Simone Amorim (A Dama do CSS)

Slide 73

Slide 73 text

Voltando para 2015… 73

Slide 74

Slide 74 text

Write code Every Day 74

Slide 75

Slide 75 text

Slide 76

Slide 76 text

09 / 05 / 15 76

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Eu me demiti para Estudar 78

Slide 79

Slide 79 text

Front in Rio 79 Adeus joguinhos

Slide 80

Slide 80 text

Slide 81

Slide 81 text

O outro Lado do Evangelista CSS 81

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Slide 84

Slide 84 text

@maujor 84 maujor Um dinossauro apaixonado por Padrões Web Mauricio Samy Silva Manda uma mensagem Para Conferência CSS Brasil

Slide 85

Slide 85 text

85 ```Nunca é tarde para aprender algo novo``` Frase preferida do Maujor, "o dinossauro das CSS", hoje com 76 anos de idade

Slide 86

Slide 86 text

Me Tornei um Evangelista CSS 86

Slide 87

Slide 87 text

Jogos Apenas Com CSS 87 counter-increment: score; content: "Score "counter(score)"/50"; .egg-check:checked + .score-up

Slide 88

Slide 88 text

CSS Das Ruas 88

Slide 89

Slide 89 text

Eu não Sabia Javascript 89

Slide 90

Slide 90 text

Mas Eu Sabia aprender 90

Slide 91

Slide 91 text

Front in Vale 91

Slide 92

Slide 92 text

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

veio da front-end Week… 95

Slide 96

Slide 96 text

@_Gui_Souza 96 Guilherme de Souza Founder & Software Engineer @ Data² | Creator of Infleux Fala ai mano

Slide 97

Slide 97 text

97 ```De um lado, 99,9% do dinheiro no mundo, é digital. Do outro 99,9% dos usuários de computador não sabem programar. A sua responsabilidade como Desenvolvedor, é tornar o mundo acessível criando interfaces que conectem esses dois lados.``` - Guilherme Souza 1/2

Slide 98

Slide 98 text

98 ```A sua responsabilidade como membro da comunidade de Desenvolvimento de software é eliminar a necessidade dessas interfaces.``` - Guilherme Souza 2/2

Slide 99

Slide 99 text

Comunidades 99

Slide 100

Slide 100 text

A comunidade mudou a minha vida 100

Slide 101

Slide 101 text

101

Slide 102

Slide 102 text

Responsabilidade Com suas vozes 102

Slide 103

Slide 103 text

@wharleyornelas 103 wharley ornelas Software Engineer O que a comunidade Representa para você?

Slide 104

Slide 104 text

104 ```O momento que entrei para a comunidade foi o momento da minha virada de chave.``` - Wharley Ornelas 1/3

Slide 105

Slide 105 text

105 ```Que além do meu desenvolvimento profissional me possibilitou sonhar e realizar sonhos que ainda não tinha sonhado, como por exemplo um dia palestrar para 500 pessoas, trabalhar para uma grande empresa em Berlim Alemanha``` .``` - Wharley Ornelas 2/3

Slide 106

Slide 106 text

106 ```Adquirir alguns bens que melhoraram a minha qualidade de vida e da minha família. Além do amplo grupo de amigos que ganhei, e isso você sabe que não tem dinheiro que pague.``` - Wharley Ornelas 3/3

Slide 107

Slide 107 text

Hard Skills? 107

Slide 108

Slide 108 text

108

Slide 109

Slide 109 text

Javascript Das Ruas 109

Slide 110

Slide 110 text

Reddit 110

Slide 111

Slide 111 text

@ananeridev 111 Ana Beatriz Neri Senior Software Engineer @Rocketseat @Womakerscode @WomenTechmakers Como a comunidade Te ajudou na carreira?

Slide 112

Slide 112 text

112 ```A comunidade ajudou na minha carreira de diversas formas positivas mas com certeza a questão da comunicação foi super marcante. Saber com quem como e quando usar as palavras certas e além de sempre buscar formas divertidas de trazer exemplos``` - Ana Beatriz Neri

Slide 113

Slide 113 text

Soft Skills 113

Slide 114

Slide 114 text

Falando Sério 114

Slide 115

Slide 115 text

@diogomoretti_ 115 Diogo Moretti DevRel & DX @frontendbr @frontinfloripa @floripajs Por que você veio de longe para o evento?

Slide 116

Slide 116 text

116 ```EVENTO É O MAIOR INVESTIMENTO QUE VOCÊ PODE FAZER! Eu não compro cursos e não moro em São Paulo, mas hoje estou aqui para meu 31º evento na cidade. Sei que sai mais caro que um curso, porém, PRA MIM, o ganho é maior. Sempre encarei um evento com 10% de conteúdo e 90% de networking. Frameworks se vão, amizades ficam. INTERAJAM!`` - Diogo Moretti

Slide 117

Slide 117 text

Como me tornei um mestre no CSS? 117

Slide 118

Slide 118 text

118 ```Se enxerguei um pouco mais longe,é porque me coloquei nos ombros de gigantes.`` - Newton

Slide 119

Slide 119 text

Hoje eu trouxe aqui a voz de alguns desses gigantes 119

Slide 120

Slide 120 text

Uma provocação & A minha dica 120

Slide 121

Slide 121 text

121

Slide 122

Slide 122 text

122 ```Uma das melhores decisões da minha carreira como desenvolvedor foi ir além de apenas usar ferramentas, eu decidi tentar criá-las`` - Afonso Pacifer