Aula 02: [Prática ao VIVO] Construindo seu primeiro projeto com Programação + IA do ZERO — Transcript

Full transcript

1. 0:16Beleza? Olha, dentro de alguns instantes
2. 0:18vamos estar ao vivo pra nossa aula. Mas
3. 0:20antes de começar eu preciso te mostrar o
4. 0:23que que tá acontecendo no mundo da
5. 0:25tecnologia.
6. 0:26Olá,
7. 0:28que tá um salário em média para começar
8. 0:30entre 4$ 5000. Paula é desenvolvedora 10
9. 0:34anos nesta empresa de softwares. A
10. 0:37profissional vira e mexe e recebe
11. 0:39propostas e outros lugares para
12. 0:41trabalhar.
13. 0:41>> A rotatividade na área é muito grande,
14. 0:43então tem pessoas que entram na empresa
15. 0:44e saem da empresa e quando aparece uma
16. 0:47vaga em outro lugar, eles já procuram um
17. 0:49profissional específico para aquilo
18. 0:51[música] e acabam convidando, né? Ah,
19. 0:52tem uma vaga desse estilo, né? Teu
20. 0:54perfil C da Equa.
21. 0:56>> Essa é a realidade do mercado de
22. 0:58tecnologia da informação. Quem corre
23. 1:01atrás dos profissionais são as empresas,
24. 1:04bem na contramão da crise.
25. 1:05>> Pois é, só que as empresas enfrentam
26. 1:07dificuldade para contratar gente
27. 1:10especializada na área. [música]
28. 1:11>> Cerca de 55% das empresas alegaram falta
29. 1:14de pessoal com qualificação.
30. 1:16>> E para ser cada vez mais diferenciado no
31. 1:18mercado de trabalho, esse profissional
32. 1:20precisa estar em constante atualização.
33. 1:23é o que essa turma aqui está fazendo,
34. 1:25ainda mais nesse mercado tão concorrido.
35. 1:28Afinal, quem entra neste mundo da
36. 1:31tecnologia, da informação tem inúmeras
37. 1:34possibilidades.
38. 1:35>> As empresas estão ávidas aí por mão de
39. 1:37obra qualificada. é uma área que
40. 1:40rapidamente, né, ele consegue através de
41. 1:43treinamentos rápidos, né, eh, encontrar
42. 1:48possibilidade de de de logo conseguir
43. 1:52empreender ou realmente eh aplicar os
44. 1:55ensinamentos, aquilo que ele conseguiu
45. 1:57dos ensinamentos nas empresas. Então é
46. 1:59uma área muito interessante pro pro
47. 2:01jovem que que tá aí pensando em que
48. 2:04carreira seguir.
49. 2:04>> E estamos atrás das pessoas certas para
50. 2:06ocuparem essas posições, né? Temos
51. 2:09demanda de cliente, temos negócios para
52. 2:11implementar e melhorias de produto para
53. 2:14fazer e precisamos desses profissionais
54. 2:16aqui.
55. 2:16>> Vários sistemas precisaram se adaptar
56. 2:18para modelo de trabalho remoto ou
57. 2:20híbrido, né, que já é uma realidade.
58. 2:23Então, uma área que tá sendo muito
59. 2:25requisitada. De acordo com o relatório
60. 2:27da Associação das Empresas de Tecnologia
61. 2:29da Informação e Comunicação, no Brasil,
62. 2:3315 milhão e meio de profissionais estão
63. 2:35empregados nesta área, sendo que cerca
64. 2:37de 40.000 estão aqui no Distrito
65. 2:40Federal.
66. 2:41>> Então, eh, estamos em permanentemente em
67. 2:44busca e desenvolvendo talentos internos
68. 2:47em parcerias com governo, com entidades,
69. 2:50com universidades, buscando repor essas
70. 2:53pessoas o mais rápido possível. A
71. 2:54projeção por novos talentos [música] é
72. 2:56de quase 800.000 profissionais, com
73. 2:59salários variando entre 4 e 5.000. E
74. 3:02entre esses trabalhadores destacam-se o
75. 3:05especialista em nuvem, em inteligência
76. 3:07[música] artificial e o profissional da
77. 3:09segurança da informação.
78. 3:11>> O Fórum Econômico ele indica que
79. 3:13analista e cientista de dados são
80. 3:15funções chaves que devem ser priorizadas
81. 3:18para a requalificação e aperfeiçoamento
82. 3:20profissional nos próximos 5 anos. Quer
83. 3:22dizer, nós estamos nesses 5 anos, né,
84. 3:24pesquisa de 2023, então nós estamos
85. 3:25disso.
86. 3:26>> Estima-se que enquanto a demanda média
87. 3:29seja de 159.000
88. 3:32profissionais,
89. 3:33o Brasil forma apenas 53.000
90. 3:36profissionais por ano. Significa dizer,
91. 3:38portanto, que cada que a cada três vagas
92. 3:43criadas, somente uma é preenchida.
93. 3:45>> O centro histórico do Recife respira
94. 3:47tecnologia. Aqui, prédios centenários
95. 3:50foram recuperados [música] para abrigar
96. 3:52355 empresas de TI e seus 15.000
97. 3:56funcionários. É o maior parque
98. 3:58tecnológico urbano do país, com bons
99. 4:01empregos e salários que vão de R$ 3.000
100. 4:04a mais [música] de 20.000, dependendo da
101. 4:07capacitação profissional. muita
102. 4:09oportunidade para quem tem essa vontade
103. 4:11de aprender sempre, de testar coisas
104. 4:14diferentes. Você tem um [música] grupo
105. 4:15de pessoas que vai ser resistente, que é
106. 4:18o que vai querer culpar a tecnologia
107. 4:20[música] como sendo a responsável por
108. 4:21ele perder o emprego. E outros que vão
109. 4:23agradecer o surgimento de novas
110. 4:25tendências, novas tecnologias, novas
111. 4:27máquinas. Isso é uma velocidade
112. 4:28exponencial. Basta você abrir o teu
113. 4:30celular, você enxerga uma série de
114. 4:33aplicativos, todos os dias tem 100, 50 e
115. 4:36diferentes aplicativos que você não sabe
116. 4:37para que que serve. Então, tem gente que
117. 4:39vai lá testar e outro que vai falar:
118. 4:40"Poxa vida, isso aí tá vindo para tirar
119. 4:42meu emprego". Eu acho que a tecnologia
120. 4:44ela é um divisor de águas, ela vai
121. 4:46provar de fato quem precisa continuar no
122. 4:49mercado de trabalho e aqueles que
123. 4:51automaticamente vão sair. A gente tá
124. 4:53falando muito de uma seleção natural
125. 4:55tecnológica, é uma seleção natural 4.0.
126. 4:58>> Tudo também aponta que em 5 anos o setor
127. 5:00vai precisar de cerca de 800.000 1
128. 5:02profissionais. Ou seja, se especializar
129. 5:05em tecnologia da informação é sim um bom
130. 5:08negócio.
131. 5:09>> É isso, usar a tecnologia a nosso favor,
132. 5:12melhorar vidas, mais emprego, menos
133. 5:15desigualdade.
134. 5:16>> E estamos ao vivo, ao vivo, ao vivo, ao
135. 5:18vivo. Então, seja muito bem-vindo ou
136. 5:20bem-vinda à segunda aula da missão
137. 5:23programação com Iá do Zero. Saiba que
138. 5:26você tá no melhor curso guia definitivo
139. 5:28para você aprender programação, aprender
140. 5:30e a conseguir sua vaga e conseguir
141. 5:32ganhar dinheiro. Porque durante essa
142. 5:34semana, além da gente trazer uma super
143. 5:36recrutadora, a Fernanda, que vai te
144. 5:38ajudar a conseguir seu emprego, mesmo
145. 5:40que você não tenha faculdade, mesmo que
146. 5:41você não saiba nada ainda sobre
147. 5:43tecnologia, a gente vai te ajudar a
148. 5:45conseguir seu emprego. Mas nessa semana
149. 5:47a gente vai te ensinar a fazer frila,
150. 5:49fazer uma grana extra ainda essa semana.
151. 5:52Então se prepare porque hoje vai ter
152. 5:54muito conteúdo. Hoje a gente vai botar a
153. 5:56mão na massa e vai te levar pro próximo
154. 5:58nível. Rodolfo, não sei nada. Calma. A
155. 6:00gente vai te ensinar tudo em detalhes,
156. 6:02tudo de uma forma didática e direto ao
157. 6:04ponto. Boa noite. Boa noite. Boa noite,
158. 6:06meu povo. Cadê o povo do chat? Eu uns
159. 6:1115, 20 minutos antes, eu já chego aqui,
160. 6:13já me preparo, já testo câmera, áudio.
161. 6:15Tudo certo? Tudo certo, equipe? Tudo
162. 6:18certo? Beleza, equipe aqui reunida, a
163. 6:21gente já se concentra e aí eu já fico de
164. 6:22olho no chat e eu fico feliz que eu vejo
165. 6:24que dá sete, às vezes 7 horas já tem
166. 6:27gente aqui no chat se preparando. Então,
167. 6:29parabéns para você que veio, você que é
168. 6:31compromissado, você que realmente quer
169. 6:33mudar de vida. Lembre-se que aqui não é
170. 6:36um curso de programação, aqui não é um
171. 6:38curso de a, aqui é um curso de como
172. 6:40transformar sua vida. Assim como o
173. 6:42Rodolfo saiu de eletricista e se tornou
174. 6:44um profissional que o mercado deseja,
175. 6:46que o mercado quer, que o mercado paga
176. 6:48bem, eu tô fazendo o mesmo por você, te
177. 6:51transformando na pessoa, no profissional
178. 6:53que o mercado quer. Não importa que
179. 6:55agora você é eletricista, não importa
180. 6:57que agora você é Uber, que você trabalha
181. 6:59no iFood, que você é dona de casa, que
182. 7:01você é costureira, que você é porteiro.
183. 7:03Não importa a sua profissão atual. Eu
184. 7:05vou te ajudar durante essa semana a se
185. 7:08transformar numa nova pessoa, num novo
186. 7:10profissional para que você trabalhe da
187. 7:11sua casa, ganhe 4, 5, 6, 10.000 numa
188. 7:14profissão honesta, numa profissão que
189. 7:16valoriza pessoas esforçadas que nem
190. 7:18você. Sabe esse esforço que você coloca
191. 7:20aí de acordar cedo, trabalhar 8, 10
192. 7:23horas? Esse esforço a gente vai
193. 7:25converter ele na tecnologia. E quando
194. 7:28você colocar todo esse esforço na
195. 7:29tecnologia, os resultados vão ser
196. 7:32inimagináveis. Você é um improvável.
197. 7:35Independente da onde que você esteja
198. 7:37agora, aonde você mora, o conhecimento
199. 7:39que você tem, você é o improvável e eu
200. 7:41vou te ajudar a mudar de vida. E a aula
201. 7:44de hoje vai ser muito especial porque na
202. 7:46aula de hoje a gente vai aprender duas
203. 7:47tecnologias sensacionais. Equipe, minha
204. 7:51câmera, equipe, por favor, deu pau de
205. 7:54novo. Tá dando pau. Depois vem o que que
206. 7:55tá acontecendo, mas já voltamos.
207. 7:57Obrigado. Obrigado.
208. 7:59Vamos lá. Na aula de hoje, a gente vai
209. 8:01aprender CSS. a gente vai entrar no
210. 8:03JavaScript. JavaScript, a linguagem mais
211. 8:05utilizada do mundo. Então você já
212. 8:07percebeu que a aula de hoje é só para os
213. 8:09improváveis que realmente querem mudar
214. 8:11de vida. A aula de hoje ela vai ser
215. 8:12muito especial porque a gente vai sair
216. 8:14disso aqui, ou seja, a gente vai sair do
217. 8:16zero do nada porque tá muito feio, sem
218. 8:18graça. E até o final da aula a nossa
219. 8:20aplicação, ela vai est dessa forma aqui,
220. 8:22bonitona, organizada
221. 8:25e a gente vai entrar no JavaScript, no
222. 8:27CSS para que isso seja possível. Ou
223. 8:30seja, a aula de hoje vai ter muito
224. 8:31conteúdo, então já pega papel e caneta
225. 8:33aí para anotar, combinado?
226. 8:37Quero agradecer também nosso super
227. 8:38patrocinador, a Hospinger, junto com a
228. 8:40TMB, patrocinou para que você esteja
229. 8:42aqui. Tem quase 50 pessoas envolvidas na
230. 8:45organização desse evento, apostilas,
231. 8:48materiais de apoio, as nossas IAS para
232. 8:50ajudar você, o nosso suporte humano e
233. 8:52teremos o sorteio do nosso notebook, tá?
234. 8:55Se você não assistiu a aula de ontem,
235. 8:57corre lá, assiste a aula de ontem para
236. 8:58que você continue no conteúdo aqui, tá?
237. 9:00Lembrando que as aulas vão ficar
238. 9:01gravadas até domingo. E eu já queria
239. 9:03começar a aula também é lembrando para
240. 9:04você da Devflix. Então aqui na Devflix
241. 9:07você tem as aulas anteriores, você tem
242. 9:09os materiais de apoio, tá? Hoje vai ter
243. 9:11mais materiais de apoio ainda. Eu não
244. 9:13sei se você pegou os materiais de apoio
245. 9:15de ontem. Deixa eu atualizar aqui. Minha
246. 9:18equipe colocou mais materiais de apoio.
247. 9:20O código da aula de ontem já tá aqui e o
248. 9:23código da aula de hoje a gente vai
249. 9:24colocar aqui também, tá? Eu não sei se
250. 9:26você usou aqui também na Devflix, fale
251. 9:28com Aá. Então você pode entrar aqui,
252. 9:30conversar com a Giovana, tirar dúvidas
253. 9:33de HTML, de CSS, do que você quiser. Ah,
254. 9:36quais são as principais tags HTML? Você
255. 9:39pergunta aqui pra Giovana e a Giovana
256. 9:41ela te responde, ela te ajuda. Teve
257. 9:44dúvida com código? Pode chamar a Giovana
258. 9:46aqui que ela vai te ajudar. E também tem
259. 9:49o nosso suporte humano, né? Aqui debaixo
260. 9:51de mim, ó, tem o o coisinha que você
261. 9:53pode abrir, ó, e falar com o meu suporte
262. 9:56humano. Então, o que não faltam são
263. 9:59ajudas para você mudar de vida. Na aula
264. 10:02de hoje, a gente tá aqui já com uma
265. 10:04manual de instruções. Vai ser bem
266. 10:05rápido, a gente já vai pro conteúdo,
267. 10:06porque hoje a gente vai aprender mais
268. 10:08coisas de HTML. A gente vai entrar no
269. 10:10CSS, vamos ter o nosso momento Red Bull.
270. 10:16Ah, energia lá em cima.
271. 10:18Redboom patrocina
272. 10:20e e vamos aprender JavaScript também,
273. 10:24tá, chat? Vocês estão bem? Gostaram da
274. 10:27aula de ontem? Conseguiram fazer o
275. 10:29código? Se ficou com dúvida, vocês já
276. 10:32tem aonde procurar. Gostaram chat? Ah,
277. 10:36eu recebi vários elogios no Instagram.
278. 10:38Obrigado, obrigado. Eu amo conversar com
279. 10:40vocês no Instagram. A galera gostou da
280. 10:41aula. Legal, legal. Então, para começar
281. 10:43do jeito certo, você já sabe, né? Se não
282. 10:45se inscreveu no canal, se inscreva,
283. 10:46clica no sininho para ser lembrado da
284. 10:48próxima aula e também deixa aquele like,
285. 10:50por favor, né? Quando eu vejo os likes,
286. 10:52eu vejo que vocês estão gostando e aí me
287. 10:54dá mais ânimo para dar a aula. Essa
288. 10:58semana a gente precisa aprender quatro
289. 10:59pilares. Você precisa entender como
290. 11:02funciona a área de tecnologia. Na área
291. 11:04aula de ontem a gente viu muito sobre
292. 11:06isso. Pilar técnico, meu amigo, a gente
293. 11:10não entrou muito a fundo na Iá, mas a
294. 11:11gente vai fazer algumas coisas com Iá na
295. 11:14aula de amanhã. Sério, amanhã você
296. 11:16cancela qualquer compromisso. Se for ter
297. 11:18jogo do Corinthians, do Flamengo, do São
298. 11:21Paulo, do Palmeira, se for ter o seu
299. 11:23casamento, cancela seu casamento, porque
300. 11:26a aula de amanhã, meu amigo, lembrando
301. 11:29que é sequencial, tem que assistir a de
302. 11:30hoje, mas a aula de amanhã você não tem
303. 11:33noção do que vai ter. Não tem noção do
304. 11:35que vai ter, o que que a gente vai fazer
305. 11:37com amanhã, tá certo?
306. 11:40No domingo a gente vai aprender a ganhar
307. 11:42dinheiro. Então se prepare para aula de
308. 11:43domingo. Domingo a gente vai ter a
309. 11:44Fernanda, nossa recrutadora, aqui também
310. 11:46evoluímos, já andamos aqui no nosso
311. 11:48mapa, né? Já chegamos aqui no CSS. E
312. 11:51lembrando que temos aula hoje, aula
313. 11:54amanhã às 8 horas da noite. Sábado vamos
314. 11:57ter uma aula especial que você vai poder
315. 11:59falar comigo, olhar olho no olho, tirar
316. 12:02suas dúvidas, falar dos seus anseios,
317. 12:04dos seus medos, das suas inseguranças e
318. 12:06eu vou te ouvir, tá? Rodolfo, eu quero
319. 12:08estar sábado com você. Como que eu faço?
320. 12:11Amanhã, na aula de quinta-feira, eu te
321. 12:12explico como você vai poder entrar no
322. 12:14Zoom comigo pra gente trocar uma ideia,
323. 12:15tá? E domingo, nossa aula final às 8
324. 12:17horas da noite. Lembrando que nós temos
325. 12:20o nosso sorteio e vai ter diploma no
326. 12:23final. Para participar do sorteio, a
327. 12:25Hostinger vai para mandar para um de
328. 12:27vocês um super notebook, ó, lacradinho,
329. 12:29bonitinho, com cheirinho de novo. Pra
330. 12:32você ganhar esse super notebook, você
331. 12:33tem que pegar as palavraschaves. Cada
332. 12:35aula tem uma palavra-chave. Ontem teve
333. 12:37uma, hoje em algum momento vai ter
334. 12:40outra. E aí, pegando essas
335. 12:41palavras-chaves,
336. 12:43você vai coletar quatro. Quem tiver ao
337. 12:45vivo comigo no domingo, a gente vai
338. 12:46mandar o quiz. Esse quiz você responde
339. 12:48algumas perguntas das aulas. Super
340. 12:50tranquilo. Respondendo o quiz, você leva
341. 12:52o diploma e participa do sorteio que vai
342. 12:55ser na segunda-feira, combinado?
343. 12:57Segunda-feira tem sorteio, materiais de
344. 12:59apoio para te ajudar. O quiz vai ser
345. 13:01melzinho na chup, galera. Ó, ó, ó.
346. 13:03Melzinho na chupeta. Quiz quem assistir
347. 13:06as aulas, ainda mais para quem pegar os
348. 13:08materiais de apoio, tá? E galera, eh,
349. 13:12sendo bem sincero, eu gosto de jogar
350. 13:14real com vocês e eu gosto que vocês
351. 13:17joguem a real comigo. Então, as regras
352. 13:20do jogo, elas são imutáveis.
353. 13:24Anote tudo. Assista aí da TV ou do
354. 13:26computador para você prestar mais
355. 13:27atenção. Eu quero bastante participação
356. 13:30aqui no chat. Sem mimimi no chat. Eu
357. 13:32quero os policiais do chat. Se você vê
358. 13:34alguém reclamando, alguém de mimimi,
359. 13:36alguém chorando, ó, manda essa pessoa
360. 13:38para casa. Aqui é o ambiente de
361. 13:41improváveis. Os improváveis são pessoas
362. 13:43que querem mudar de vida, pessoas que
363. 13:46não aceitam aonde elas estão e elas
364. 13:48querem chegar muito longe, independente
365. 13:50da situação atual, independente do que
366. 13:52falam para essas pessoas. Os improváveis
367. 13:55são pessoas que não têm espaço na vida
368. 13:58delas para pessoas negativas, para
369. 14:02vitimismo, para encheo. Não. Os
370. 14:05improváveis vão mudar de vida na força
371. 14:07do ódio. Vamos lá, gente. Vamos lá.
372. 14:09Vamos junto. Seja um improvável. Então,
373. 14:11você seja também um policial do chat.
374. 14:13Você é improvável. Não deixa ninguém
375. 14:15atrapalhar o seu futuro. Ai, por, n viu
376. 14:18alguém reclamando, ó. Gospe essa pessoa
377. 14:20da sua vida, gospe essa pessoa aqui da
378. 14:23nossa aula, tá?
379. 14:24Desliga a televisão, depois você vê o
380. 14:26resultado do jogo, depois você conversa
381. 14:29com a sua mulher, seu marido. Agora
382. 14:31vamos focar porque as aulas se conectam,
383. 14:33você não pode perder nada.
384. 14:35Até o final da aula de hoje, você vai
385. 14:37ter aprendido CSS, você vai ter começado
386. 14:39o JavaScript, a gente vai aprender boas
387. 14:41práticas, o que que o mercado quer de
388. 14:43você, a gente vai usar muito IA, vamos
389. 14:45evoluir nossa aplicação e vamos aprender
390. 14:48muito mais do que em um ano de
391. 14:50faculdade. Eu sempre recebo mensagem de
392. 14:52pessoas que estão na faculdade e falam:
393. 14:53"Ó, eu não aprendo nenhum 1% na
394. 14:56faculdade do que eu aprendo aqui com
395. 14:57você, tá? Hoje a gente vai ter ebook de
396. 15:00CSS como bônus, apoio de CSS, outro
397. 15:03material. A gente vai ter o código da
398. 15:05aula completa, então fique até o final e
399. 15:08já sabe, nossa hashtag do nosso evento é
400. 15:11#tpago.
401. 15:13Espero ver muita #agtago que me dá muita
402. 15:15energia. OK, vamos pra aula.
403. 15:20Daqui a pouco a gente vai ter um momento
404. 15:21Red Bull. Na aula de ontem você pode
405. 15:24reassistir a aula. Eu recomendo você
406. 15:25reassistir e tentando fazer. E aquilo
407. 15:29que eu falei para vocês, tanto a aula de
408. 15:31ontem quanto a aula de hoje, de amanhã,
409. 15:33são conteúdos novos, são coisas que você
410. 15:35nunca viu. Quando você era um bebezinho,
411. 15:37as pessoas falavam ao seu redor e você
412. 15:39não entendia, você também não conseguia
413. 15:41falar. Até que um dia você falou: "Papá,
414. 15:43mamã!" E aí com o tempo você foi falando
415. 15:46mais palavras, com o tempo você foi
416. 15:48conseguindo formar frases. Aí você
417. 15:50decidiu aprender a ler e escrever.
418. 15:53Demorou você aprender o alfabeto. Depois
419. 15:55você conseguiu juntar as letras para
420. 15:57formar ba bi bobu.
421. 16:00Não foi assim. Ah, B com A, B. B com A
422. 16:05mais N com E é bana. Ah, banana. Ah,
423. 16:09entendi. Não foi do dia pra noite. Só
424. 16:12que aí você vem pra aula, você assiste
425. 16:14uma aula aqui comigo. Aí, programação,
426. 16:16eu não entendi. Claro que você não
427. 16:17entendeu, pô. Você assistiu uma vez.
428. 16:19Tenha paciência. Caramba. Não é do dia
429. 16:22paraa noite que você vai ganhar muito
430. 16:23dinheiro. Eu eu não sou guruzinho de
431. 16:25internet que fica com um papo fiado para
432. 16:27cima de você. Eu falo a real, você quer
433. 16:30tá empregado daqui 4, 5, 6 meses, cara,
434. 16:33dá tranquilo. Só que que você vai fazer
435. 16:35nesses meses? Você vai estudar de
436. 16:37verdade? Você vai se dedicar ou vai
437. 16:40ficar aí de mimimi aí difícil?
438. 16:43Eh, eu mostrei para vocês vários alunos.
439. 16:46Você pode clicar aqui e ver vários
440. 16:47alunos com a vida transformada. procura
441. 16:49essas pessoas no LinkedIn e pergunta
442. 16:51para ela, vai aqui, por exemplo, fala
443. 16:54com o Leozão. O Leozão era despachante.
444. 16:56Fala assim: "Leozão, foi tudo fácil para
445. 16:58você? Do dia paraa noite você ficou,
446. 17:00ganhou muito dinheiro? Leão teve que
447. 17:02estudar. A Stephanie, cara, era
448. 17:04cuidadora de idosos. Hoje ela trabalha
449. 17:05sabe aonde? Olha onde, olha onde ela
450. 17:07trabalha. Vou te mostrar onde ela
451. 17:09trabalha. Ó, iFood, ó. Ó, faz, fala com
452. 17:13a Stephanie depois. Vai lá, chama a
453. 17:15Stephanie, fala: "Stephanie, foi fácil,
454. 17:17cara?" A Stephanie, eu lembro que ela
455. 17:18mandava mensagem no Instagram, [risadas]
456. 17:20ai Rodolfo, eu não sei se eu consigo.
457. 17:23Nossa, travei aqui nessa aula, tal.
458. 17:26Cara, pergunta para ela se valeu a pena.
459. 17:28Tá super bem no iFood, já tá lá, acho
460. 17:30que uns 2 tr anos, já foi promovida.
461. 17:32Então, vamos lá. Quero que você se
462. 17:34esforce. Ontem a gente aprendeu HTML. A
463. 17:37gente viu que o HTML é a estrutura da
464. 17:39internet e que todas as grandes empresas
465. 17:41usam HTML. Ontem você entendeu também
466. 17:44que o CSS é o complemento do HTML,
467. 17:46porque o CSS ele é estilização, é a
468. 17:49parte gráfica. E aí se a gente
469. 17:51transformar o nosso entendimento num
470. 17:55carro, o HTML seria como a estrutura do
471. 17:58carro, chassi do carro. O CSS seria a
472. 18:04lataria, o banco, os faróis. Com CSS o
473. 18:08carro ele vai ficar muito bonito, só que
474. 18:11aí o carro ainda não anda. É o
475. 18:13JavaScript que a gente vai aprender hoje
476. 18:15que vai fazer o carro andar. E com o IA,
477. 18:18o nosso carro, além de andar, ele vai
478. 18:20sair até voando. Então a gente precisa
479. 18:22aprender passo a passo. Não tem como
480. 18:24construir o motor do carro se a gente
481. 18:26não tem a estrutura dele. Primeiro,
482. 18:28estrutura, acabamento. Agora sim, bota o
483. 18:31motor, agora o carro anda. Então vamos
484. 18:33fazer agora a parte gráfica. Lembrando
485. 18:35que eu liberei ontem e hoje também, se
486. 18:37você quiser pegar na Debflix, esse
487. 18:39material que fala um pouco aqui sobre
488. 18:40HTML, CSS e JavaScript. Para dominar CSS
489. 18:44você precisa seguir o passo a passo.
490. 18:46Igual a gente seguiu o passo a passo de
491. 18:48HTML, agora a gente vai seguir o de CSS.
492. 18:51No passo a passo do CSS, você tem que
493. 18:53dominar os seletores, entendeu? O que é
494. 18:55um seletor? O que que é uma propriedade
495. 18:57e os valores. Então, seletor,
496. 19:01propriedade, valor. Dominou esses três,
497. 19:04você vai conseguir evoluir muito. Então,
498. 19:06vamos lá. Ontem eu liberei o código para
499. 19:09vocês, a gente fez isso aqui. Agora a
500. 19:11gente vai partir pro CSS. Eu falei para
501. 19:13vocês, bem, não me gabando, mas eu tive
502. 19:16a oportunidade de trabalhar em grandes
503. 19:17empresas. Até hoje eu presto serviço
504. 19:20para grandes empresas. Ah, esqueci de
505. 19:22falar, mas eu sou no Brasil, eu sou
506. 19:24embaixador da Open Nenai, sabe? O chat
507. 19:25GPT, eu sou embaixador deles. Faço
508. 19:28reuniões frequentemente, às vezes com a
509. 19:29galera dos Estados Unidos, às vezes com
510. 19:31alguns colaboradores aqui do do Brasil.
511. 19:33Eu tenho eu tenho eh as novidades, eu
512. 19:37recebo primeiro que todo mundo, faço
513. 19:39reuniões para eles entenderem eu como
514. 19:41usuário, o que que eu eh enxergo com
515. 19:43melhorias. Então, eu sou um profissional
516. 19:45muito bem visto no mercado, que tive a
517. 19:47oportunidade de trabalhar em grandes
518. 19:48empresas, até hoje presto serviço para
519. 19:50um grande banco, tenho minha própria
520. 19:52empresa, sou embaixador do chat GPT no
521. 19:54Brasil e isso me dá oportunidade de
522. 19:57saber exatamente as melhores práticas. E
523. 20:00quando se fala de melhores práticas para
524. 20:01você se destacar no mercado,
525. 20:04vamos dividir as coisas. Então, dá para
526. 20:06você fazer o seu CSS aqui? Dá, mas não é
527. 20:10legal. O mais legal para você se
528. 20:12destacar, para as empresas verem você
529. 20:14bem, é você clicar aqui, ó, e criar um
530. 20:16novo arquivo que a gente vai chamar de
531. 20:18styles.
532. 20:22Rodolfo, por que styles.
533. 20:26Se você for trabalhar numa grande
534. 20:27empresa, você vai ver que a galera
535. 20:28costuma chamar esse arquivo de index e
536. 20:30esse aqui de style, combinado? Então,
537. 20:33tudo que eu passo aqui para você são
538. 20:35coisas que eu aprendi em grandes
539. 20:36empresas e eu tô passando para que você
540. 20:38se prepare. Quando a Stephanie ela
541. 20:40entrou no iFood, ela já tinha aprendido
542. 20:42muitas boas práticas aqui comigo. Então
543. 20:44ela se destacou na entrevista, se
544. 20:46destacou no processo seletivo, por isso
545. 20:48que ela conseguiu a vaga.
546. 20:50Correto? Vamos lá. Outro ponto
547. 20:53importante, ontem eu falei para vocês,
548. 20:55não sei se você se recorda, que a
549. 20:57programação ela é basicamente você
550. 21:00ensinar o computador o que ele precisa
551. 21:02fazer.
552. 21:03Imagine que você pegou uma criancinha, o
553. 21:05computador e você precisa dar
554. 21:06orientações. Uma criancinha, você tem
555. 21:09que falar exatamente o que ela tem que
556. 21:10fazer. Não adianta você falar pra
557. 21:12criancinha: "Vai lá e faz café". Ela vai
558. 21:14falar assim: "Tá, mas como faz café?" Aí
559. 21:17você vai lá, se você é pai, você sabe,
560. 21:19né? Você vai lá, você pega: "Não, filho,
561. 21:20vamos lá que eu vou te ensinar a fazer
562. 21:21café". Ó, primeiro você pega a água, aí
563. 21:23você coloca para ferver. Terminou de
564. 21:25ferver, filho? Aí você pega lá, ó, o
565. 21:27coador, coloca o pó, aí coloca a garrafa
566. 21:30térmica, aí você vira a água quente,
567. 21:32espera, joga mais água quente, aí
568. 21:34terminou, fecha a garrafa e bebe. Você
569. 21:36tem que ir lá passo a passo. O
570. 21:38computador é a mesma coisa. Programar é
571. 21:40a arte de você ser um bom pai e uma boa
572. 21:42mãe, só que o seu filho é o computador.
573. 21:44Você precisa ir passo a passo orientando
574. 21:48o que ele tem que fazer. Então, não
575. 21:50adianta eu só criar um arquivo CSS e
576. 21:52falar pro computador: "Computador, aqui
577. 21:54tá o meu CSS". Lembrando, o que que é o
578. 21:57CSS? É a estilização. É o que vai deixar
579. 22:01o meu HTML bonito. O CSS ele vai fazer
580. 22:04com que eu saia disso aqui
581. 22:10e transforme nisso aqui. E aí quando, ó,
582. 22:14sair disso aqui e transformar nisso
583. 22:16aqui, tá certo? E aí eu criei o arquivo
584. 22:19CSS. Só que ele tá conectado com HTML,
585. 22:23não tá? Por quê? Eu não falei nada, ele
586. 22:26não é adivinho. O HTML não vai adivinhar
587. 22:29que aqui dentro vai tá os estilos. Para
588. 22:32isso, a gente tem que colocar uma
589. 22:34configuração para avisar aonde vai est
590. 22:37os meus estilos. Configuração.
591. 22:42Configuração. Ô UD, você lembra na aula
592. 22:45de ontem que a gente conversou sobre o
593. 22:47HTML, né? E no HTML, UD, a gente
594. 22:50aprendeu que para você dominar HTML,
595. 22:52você tem que saber algumas coisas. Você
596. 22:54tem que saber sobre conteúdo, sobre
597. 22:55atributos e tem as principais tags
598. 22:58também, por exemplo, a tag HTML, a tag,
599. 23:00a tag body. Você lembra em qual tag fica
600. 23:04as configurações, chat? Vocês lembram
601. 23:07quando eu preciso colocar uma nova
602. 23:09configuração no meu site, eu coloco
603. 23:12aonde, chat? Vamos ver se tem uma galera
604. 23:14aqui, ó. Vamos ver quem que fala
605. 23:16primeiro. Vamos ver. Ah, oh.
606. 23:21A galera tá esperta. é no red, então
607. 23:25configurações é no head. A gente
608. 23:27aprendeu isso ontem. Se você não se
609. 23:29lembra, OK, volta lá na aula, anota e
610. 23:31com tempo você vai pegando. Não é de
611. 23:33cara que você aprende tudo, tá? Então,
612. 23:36configurações é no head, OK? Então, vou
613. 23:39lá no head da minha aplicação e aí a
614. 23:41gente vai colocar a configuração. E olha
615. 23:43só como é fácil. Olha só como é muito
616. 23:46fácil. Olha só, a gente vai escrever
617. 23:48link. Muito simples, só vir aqui. Pode
618. 23:51ser em qualquer lugar, tá? Não precisa
619. 23:53ser exatamente aqui ou pode ser aqui em
620. 23:57cima. Eu gosto de colocar aqui em cima
621. 23:58do title, ó. Aqui em cima do title eu
622. 24:01escrevi link, tá vendo, ó? Link. E aí
623. 24:04veja que o VS Code ele já completa para
624. 24:06nós várias opções. E o que que a gente
625. 24:08quer? Eu quero linkar, conectar o CSS
626. 24:12com HTML. E aí ele tem essa opção, ó,
627. 24:14link 2.css.
628. 24:16Vou clicar aqui e ele já completou para
629. 24:19mim. Só tome alguns cuidados, ó. Eu vou
630. 24:21explicar o que que tá acontecendo aqui.
631. 24:23Lembra que a gente falou ontem do HTML
632. 24:25que o HTML ele tem o quê? Conteúdo e
633. 24:29atributos. Os atributos são
634. 24:31configurações que a gente coloca dentro
635. 24:32das tags. Então eu tenho a tag de link.
636. 24:34Qual que é o objetivo da tag de link?
637. 24:36Linkar, conectar uma coisa com a outra.
638. 24:39Beleza? Primeira atributo que ele tem
639. 24:41aqui é o hell. O hell é abreviação de
640. 24:46relationship.
641. 24:48Relationship em inglês significa
642. 24:52relacionamento. Ou seja, esse cara que
643. 24:55eu quero linkar, qual que é o
644. 24:56relacionamento que ele tem com a minha
645. 24:58página HTML? Ele é o style sheet. Lembra
646. 25:01que o CSS significa cascadian
647. 25:05style sheet? Que que é style sheet?
648. 25:08folha de estilo. Então, o meu CSS é a
649. 25:11minha folha de estilo. Então, eu tô
650. 25:13falando, ó, o relacionamento da minha
651. 25:15página com esse arquivo que eu vou
652. 25:17chamar é que esse arquivo é o meu
653. 25:20estilo, a minha folha de estilo. Ah,
654. 25:22legal. Outra coisa que ele fala é o HF.
655. 25:25O HF é como se fosse a referência, ou
656. 25:29seja, aonde, onde quem,
657. 25:35quem que é o o arquivo, quem que é, a
658. 25:38gente precisa colocar o nome dele. Eu
659. 25:39vou apagar esse aqui que ele colocou
660. 25:40qualquer coisa e a gente vai colocar, ó,
661. 25:43style.css.
662. 25:45Veja que ele tinha colocado com sem, tá?
663. 25:48Se esse nome aqui tiver errado, ele não
664. 25:50funciona. Então, verifica bonitinho se o
665. 25:52nome é o mesmo. Se aqui for abacate,
666. 25:56aqui tem que ser o quê? Abacate.css,
667. 26:00tá? E lembra da aula de ontem?
668. 26:03Tem que acertar aqui, ó, o nome
669. 26:05bonitinho, porque se você errar o nome,
670. 26:07ele não vai ficar certo, tá? Não esquece
671. 26:09de salvar. E agora sim, eles estão
672. 26:12conectados. Agora, pra gente dominar o
673. 26:14CSS, a gente precisa dominar os
674. 26:16seletores, propriedade e valor. Vamos
675. 26:18começar por seletor. Você vai ver que é
676. 26:21muito simples. O que que é seletor?
677. 26:22Seletor é
678. 26:25um cara, se for pegar no dicionário,
679. 26:26seletor é o quê? Seletor é aquele que
680. 26:32seleciona,
681. 26:34escolhe, por assim dizer. O que que é o
682. 26:37seletor? É
683. 26:39o que eu que vou estilizar, quem eu vou
684. 26:41estilizar. Exemplo, eu quero trocar a
685. 26:43cor do H1. Então eu vou lá no styles e
686. 26:46vou colocar o seletor que é H1. Pronto.
687. 26:49E aí, como que funciona? Ó, H1. Coloquei
688. 26:53os bigodinhos e agora eu coloco o que eu
689. 26:56quero mudar. É um pouco diferente como a
690. 26:59gente escreve o HTML e como a gente
691. 27:01escreve o CSS. Lá no HTML, o H1 tinha
692. 27:05que colocar a tag, não tinha aqui, ó.
693. 27:07Aqui eu não preciso, tá? É um pouco
694. 27:10diferente, mas você pega rápido. E tudo
695. 27:12que eu tô falando, se for lá na Devflix,
696. 27:15vai ter aqui os materiais de apoio, ó.
697. 27:17Ah, apoio técnico CSS. Acho que é esse,
698. 27:23ó. Só aqui no apoio técnico CSS,
699. 27:26tudo que eu tô falando, ã, não é esse
700. 27:28aqui não.
701. 27:32Ã, a minha equipe colocou errado. Equipe
702. 27:35concerta aqui para mim. Minha equipe
703. 27:36corrige rapidinho, mas vai ter um apoio.
704. 27:39Tudo que eu tô falando aqui, tudo, tudo,
705. 27:41tudo que eu tô falando, minha equipe já,
706. 27:42já troca. Minha equipe já tá trocando,
707. 27:44tá? Em um minutinho já tá ali. Mas tudo
708. 27:46que eu tô falando aqui tem lá no apoio
709. 27:48técnico que eles vão subir, que eles
710. 27:49subiram errado, mas vão subir certo já.
711. 27:52E aí, qual que é o ponto? Você coloca a
712. 27:53tag que você quer alterar e coloca os
713. 27:56bigodinhos. E aqui dentro eu troco o que
714. 27:59eu quero. Então esse aqui é o seletor.
715. 28:01Então seletor,
716. 28:03por exemplo, pode ser H1, H2, pode ser o
717. 28:06parágrafo, pode ser a imagem e assim por
718. 28:09diante. Aí eu tenho mais dois caras que
719. 28:12eu falei para vocês. Eu tenho a
720. 28:13propriedade e eu tenho o valor.
721. 28:16Propriedade é o que eu quero mudar.
722. 28:17Então, se eu quiser mudar a cor, eu
723. 28:19coloco a propriedade color, que é para
724. 28:21trocar cor, coloco dois pontos e o nome
725. 28:24da cor que eu quero, por exemplo, head,
726. 28:26e termino com ponto e vírgula. Olha só
727. 28:28como é fácil. Eu coloco a propriedade
728. 28:32mais dois pontos mais o valor da
729. 28:37propriedade mais ponto e vírgula. É
730. 28:40sempre assim, é um padrão, padrão,
731. 28:42padrão. Eu vou salvar aqui. Importante
732. 28:44salvar aqui, importante salvar no HTML.
733. 28:46E aí, se você tá com o seu site rodando,
734. 28:49você atualizar ele, você vai ver que
735. 28:51agora ficou vermelho. Por que que ficou
736. 28:53vermelho? Porque eu selecionei o H1, aí
737. 28:57eu preciso colocar tudo dentro dos
738. 28:58bigodinhos. Coloquei a cor, dois pontos,
739. 29:01a cor que eu quero. E lembra que ontem a
740. 29:03gente instalou o color highlight? O
741. 29:05color highlight ele faz isso, ó. Que que
742. 29:08o color highlight faz? Toda vez que eu
743. 29:10digito uma cor, ele coloca para mim a
744. 29:13cor bonitinha. E o mais legal do color
745. 29:15highlight é que você pode colocar o
746. 29:16mouse aqui em cima, ó. E aí, ó, você
747. 29:18pode ir clicando aqui, ó, e trocando as
748. 29:20cores, ó. Ó, veja que tem milhões e
749. 29:23milhões de cores e cada cor tem um
750. 29:24código diferente, tá? E aí tem outras
751. 29:27coisas que eu posso mudar. Por exemplo,
752. 29:29eu quero deixar maior tamanho da fonte,
753. 29:32chama fonte size. E aí eu vou colocar 50
754. 29:36px, tá? Já explico o que que é esse PX
755. 29:38aqui.
756. 29:40Salvei, salvei, salvei. Voltei aqui,
757. 29:43atualizei e ah, então o CSS é isso,
758. 29:47cara. Você dominou CSS, porque CSS é
759. 29:50você entender o que que é o seletor, a
760. 29:52propriedade e o valor. E veja que sempre
761. 29:55se repete, é o seletor, colocar os
762. 29:58bigodinhos. Dentro dos bigodinhos eu
763. 30:00tenho a propriedade, dois pontos, o
764. 30:03valor e termina com ponto e vírgula. é
765. 30:06sempre a mesma coisa. Perfeito. OK. Eh,
766. 30:10eu falei para vocês ali, ó, do PX. O que
767. 30:12que é PX? O PX é uma unidade de medida
768. 30:14chamada pixel. Então, aqui no CSS a
769. 30:17gente tem centímetro, a gente tem o o
770. 30:20metro,
771. 30:21a gente tem o milímetro, só que
772. 30:23normalmente a gente usa o pixel, tá? O
773. 30:26pixel é a unidade de medida mais
774. 30:28utilizada aqui para tamanhos. Perfeito?
775. 30:31OK, deu para entender? Então vamos
776. 30:34começar a estilizar. Eu vou deletar tudo
777. 30:36aqui e vamos começar do zero. Para
778. 30:38começar, eh, presta atenção, ó.
779. 30:41[aplausos] Presta atenção. Muito
780. 30:42importante que a gente vai aprender
781. 30:43agora, ó.
782. 30:47Muito importante que a gente vai
783. 30:49aprender agora. Anota aí. Anota aí o que
784. 30:51eu vou te ensinar. qualquer grande
785. 30:52empresa, grande projeto que você
786. 30:54trabalhar, um programador vai começar o
787. 30:56CSS dele sempre da mesma forma,
788. 30:58colocando um asterisco
789. 31:00e colocando algumas coisas dentro desse
790. 31:02asterisco. No CSS, asterisco significa
791. 31:05tudo. Tudo. Ele vai selecionar tudo.
792. 31:07Exemplo, se eu colocar color head
793. 31:12asterisco e salvar, você vai ver que
794. 31:14tudo ficou com a cor vermelha. Por o
795. 31:17asterisco significa tudo. E por que que
796. 31:19a gente começa sempre assim? Vamos lá.
797. 31:21Cada navegador tem uma configuração
798. 31:25padrão de alguns valores. Por exemplo,
799. 31:27margem. Que que é a margem? Margem é a
800. 31:29distância de um item pro outro. Margem.
801. 31:32Também temos outro distanciamento que a
802. 31:34gente usa, que é o padging. A margem é
803. 31:36do lado de fora dos itens e o pading é
804. 31:38do lado de dentro. Então, se eu tenho um
805. 31:40botão e coloco pading, ele vai
806. 31:42distanciar, por exemplo, a letra do
807. 31:43botão. Então, o botão vai crescendo
808. 31:45porque ele tá adicionando um espaço aqui
809. 31:48dentro. E cada navegador, o Chrome, o
810. 31:51Mozilla, Internet Explorer, eles têm
811. 31:53valores, padrões diferentes. E aí o que
812. 31:55que acontece? Você cria um um sistema
813. 31:57que é para rodar em todos os
814. 31:58navegadores. Só que se você não coloca o
815. 32:01valor de margem, pad, cada um fica de um
816. 32:04jeito. Então, para não acontecer essas
817. 32:06bizarres de ficar cada navegador de um
818. 32:08jeito, os bons programadores eles sempre
819. 32:10começam a aplicação zerando a margem.
820. 32:15Ó, olha como tá, ó. Tá vendo que tem um
821. 32:16espaçamento aqui? Eu não coloquei esse
822. 32:18espaço aqui, mas ele existe. Quando eu
823. 32:20tirar a margem de tudo, olha o que
824. 32:22acontece. Vou atualizar. Pull, já grudou
825. 32:25aqui, ó. Legal. Já tirou a margem. Eu
826. 32:27vou tirar também o pad,
827. 32:29ó. Vou salvar aqui. E aí você vai ver
828. 32:32que, pum,
829. 32:34acho que nada tava com pading, mas eu
830. 32:37eliminei caso tivesse algum valor. E a
831. 32:39gente tem um cara chamado box sizing,
832. 32:41que eu vou colocar como border box. O
833. 32:42que que é o box sizing como border box?
834. 32:45Basicamente, eh, imagine que eu tenho um
835. 32:47botão, eu tenho meu botão ali, ó, meu
836. 32:49button. E aí eu falo que meu botão vai
837. 32:52ter uma altura, exemplo, ó, vou colocar
838. 32:55aqui, ó. Meu botão vai ter uma altura de
839. 32:5820 pixels, mas eu também vou colocar uma
840. 33:00margem nele
841. 33:03de 20 pixels. Aí eu te pergunto, o meu
842. 33:06botão, ele vai ter uma altura de 20 mais
843. 33:08uma margem de 20? No total, ele vai ter
844. 33:1040
845. 33:12ou não? ele vai ter 20, adiciona mais.
846. 33:15Fica muito complicado algumas situações
847. 33:18ficar somando. Quando eu coloco o box
848. 33:20size como border box, se eu falo que o
849. 33:22meu botão vai ter 20, ele vai ter 20
850. 33:24ponto, acabou. Independente do valor de
851. 33:26margem, independente do valor de pading.
852. 33:28Mas não precisa se preocupar com isso
853. 33:30agora, ó. Não se preocupe com isso
854. 33:31agora, tá? Só confia em mim. Todo
855. 33:34projeto que você começar, você vai
856. 33:35começar com esses três aqui, tá? Isso
857. 33:37aqui é padrão. Sempre vai começar assim.
858. 33:40Beleza? Lembrando que lá no nosso
859. 33:42documento,
860. 33:44ó, acho que minha equipe já atualizou.
861. 33:47Minha equipe já atualizou. Tch tchã.
862. 33:50Aqui no nosso apoio CSS, ó, já
863. 33:52atualizado, ó. Tudo que eu tô falando
864. 33:54para vocês tá aqui, ó. Ó, styles,
865. 33:57criando aí, ó. Link 2.Ss. Olha só que
866. 34:01legal. E aí, ó, olha só, explicando aqui
867. 34:04tudo, tudo, tudo e coisas que eu ainda
868. 34:05vou explicar, tá? Tudo aqui, beleza? OK,
869. 34:08OK. OK. Então, tudo isso que eu tô
870. 34:10explicando tá aqui para vocês, tá?
871. 34:12Então, sempre a gente vai começar dessa
872. 34:14forma. Agora vamos começar de fato a
873. 34:17nossa aplicação no CSS. Eu gosto de
874. 34:19começar de cima para baixo, tá? Então, a
875. 34:22primeira coisa que a gente vai utilizar
876. 34:23é o nosso corpo, o nosso body. Eu vou
877. 34:25selecionar aqui nosso body body. E aí, a
878. 34:29primeira coisa que eu vou mexer é no
879. 34:30background,
880. 34:32tá?
881. 34:33Eh, ponto importante antes de continuar,
882. 34:36ontem a gente teve várias tags que a
883. 34:39gente aprendeu, H1, parágrafo, texáa,
884. 34:42button. E aí eu mostrei para vocês o
885. 34:44quê? Tem o material de apoio na aula de
886. 34:46ontem
887. 34:47que era o apoio HTML, que tinha várias
888. 34:51propriedades HTML, né? Ó, todas as tags.
889. 34:54Para hoje o mesmo material, se você
890. 34:56voltar aqui, ó, tem o CSS. Então aqui
891. 34:59dentro do CSS que eu tô dando para
892. 35:00vocês, você vai ter todas as
893. 35:02propriedades, ó. Ah, eu quero trocar cor
894. 35:04color. Tá aqui, ó, explicando como que
895. 35:06troca. Ah, eu quero trocar a cor de
896. 35:09fundo, que é o background. Tá aqui, ó.
897. 35:11Background. Então, perceba que você não
898. 35:14tem que gravar nada. Você não tem que
899. 35:17gravar nada. Fala comigo, galera. Fala
900. 35:19comigo. Programador não tem que gravar
901. 35:21nada. Programador tem que saber
902. 35:23consultar. Você também tem acesso essa
903. 35:26semana
904. 35:27à nossa IA, a a Giovana. Você clica aqui
905. 35:31e fala com a Giovana, ó. Geovana
906. 35:33especialista em CSS. Aí você fala aqui,
907. 35:35ó, com a Giovana, especialista em CSS.
908. 35:37Geovana, eh, qual a propriedade
909. 35:41para eu trocar a cor do fundo da página?
910. 35:46Aí você pergunta pra Giovana, a Giovana
911. 35:47vai te responder e a Giovana vai te
912. 35:49ajudar. Lá dentro da minha formação, a
913. 35:52gente tem uma outras e as que eu ajudo
914. 35:54meus alunos. Isso aqui é para te mostrar
915. 35:56que você não tem que gravar nada, tá? Te
916. 35:58mostrar que no dia a dia o programador
917. 35:59também não tem que gravar nada. Quer
918. 36:01ver? Ó, deixa eu te mostrar aqui,
919. 36:03por exemplo, algumas ferramentas que
920. 36:05você vai ter aí no seu dia a dia, ó. Ó,
921. 36:07lá pros meus alunos, a gente tem uma
922. 36:09área de AS, que é o Clube Agents, que
923. 36:11tem vários agentes de inteligência
924. 36:13artificial para ajudá-los. Então, ah,
925. 36:15especialista em CSS. Ah, qual a
926. 36:19propriedade para trocar a cor de fundo
927. 36:23de uma página? Como eu faço? Ah, não
928. 36:26sei, não lembro. Você clica aqui,
929. 36:28pergunta aí, ó. Ele tá respondendo, ó,
930. 36:30background color, tudo mais, ó, como que
931. 36:32faz? E responde em tempo real. Da mesma
932. 36:35forma, a Giovana ali, a Giovana, quer
933. 36:37ver? Ó, a Giovana já deve ter
934. 36:38respondido, ó. A Geovana já respondeu,
935. 36:40ó. A Giovana, ó, a propriedade
936. 36:42background, você aplica ela no elemento
937. 36:45body, ó, tá explicando tudo bonitinho.
938. 36:48Então, veja que os programadores eles
939. 36:50têm acesso a ferramentas e essas
940. 36:52ferramentas ajudam eles no dia a dia.
941. 36:54Você não ache que você tem que saber
942. 36:55tudo de cor, combinado? Então, não se
943. 36:58assuste. Vamos, o que você tiver de
944. 37:00dúvida que você não entender aqui, você
945. 37:01tem o meu suporte humano, você tem as
946. 37:03Ias, você tem a Giovana para te ajudar
947. 37:05aqui, ó. Giovana para te ajudar, você
948. 37:07tem o suporte aqui humano, só chamar.
949. 37:10Então, o que não vai faltar é ajuda para
950. 37:11você, tá? Continuando, a gente vai
951. 37:13trocar a cor de fundo do background. Eu
952. 37:15vou escolher uma cor aqui que vai ser
953. 37:17#090.
954. 37:19Deixa eu pegar aqui na minha colinha
955. 37:21porque eu não gravo. Eu tenho uma
956. 37:22colinha de cores e essa vai ser a cor,
957. 37:25tá? Expliquei para vocês que a cor ela
958. 37:28pode ter código também. Eu posso colocar
959. 37:30a cor pelo nome dela, por exemplo, red,
960. 37:33black, ou colocar o código da cor que
961. 37:35começa com hashtag e o código,
962. 37:39combinado?
963. 37:40Beleza? Então, aí agora o fundo vai
964. 37:42ficar escuro, ó. Ó.
965. 37:46Beleza. Uma coisa bem chata que tá
966. 37:48acontecendo, a gente já vai até
967. 37:49consertar, é que toda vez que eu tenho
968. 37:50que fazer o reload página, eu tenho que
969. 37:53ficar aqui, ó, clicando em atualizar.
970. 37:56Ontem a gente instalou uma ferramenta
971. 37:57chamado live server. Ó, Live Server.
972. 38:02Se você não instalou, volte na aula de
973. 38:04ontem. O Live Server, ele serve
974. 38:06justamente para isso. Live Server, ó.
975. 38:09Live, live ao vivo. Que que o Live
976. 38:11Server faz? Ele gera para você o seu
977. 38:14site ali no seu computador para que ele
978. 38:17fique dando reset toda vez que você faz
979. 38:20uma alteração. Como que a gente usa o
980. 38:22Live Server? Ó, você vai aqui no seu
981. 38:24site, no HTML, clica com o botão direito
982. 38:26do mouse e Open with Live Server. Ó,
983. 38:30primeira opção, ó. Clica no index HTML,
984. 38:32botão direito, open with Live Server. E
985. 38:35eu sei que são várias coisas novas que
986. 38:37eu tô ensinando, por isso que você tem
987. 38:38que ir anotando, pausa, assiste e vai
988. 38:40anotando, tá? Então agora toda vez que
989. 38:42eu atualizar algo, ele já atualiza para
990. 38:44mim automaticamente. Essa pasta ele
991. 38:46cria, você pode deletar se quiser, não é
992. 38:48importante para nós. Beleza, vamos
993. 38:50continuar. Já coloquei a cor de fundo,
994. 38:51que é o background, background, cor de
995. 38:53fundo. Vou colocar uma cor padrão também
996. 38:56para todos os textos que vai ser E4.
997. 38:58Deixa eu pegar aqui. E4, E4,
998. 39:02E7. Beleza? Essa aqui vai ser a cor de
999. 39:05fundo dos textos, ó. Tá? Que que é o
1000. 39:07color? Vou até colocar aqui para vocês,
1001. 39:09ó. Final da aula eu mando meu código,
1002. 39:11hein? O color é cor dos textos.
1003. 39:15Aí eu tenho também aqui, ó, cor de
1004. 39:19fundo,
1005. 39:21que é o background.
1006. 39:24Ã, outra coisa,
1007. 39:27ã, que mais que eu vou fazer aqui?
1008. 39:31Ó, isso aqui tá muito grudado aqui, ó.
1009. 39:32Tá vendo? Agora eu vou colocar o
1010. 39:33padging. Pading vou colocar de 60
1011. 39:36pixels, tá?
1012. 39:38Tá vendo o que que é o pading? É esse
1013. 39:40espaçamento aqui dentro, ó. Margem é do
1014. 39:42lado de fora, o pading é do lado de
1015. 39:44dentro, tá? Então imagine o quê? Se eu
1016. 39:46coloco, é que o body não tem nada além
1017. 39:48do bor, né? Não tem como. Mas se fosse o
1018. 39:51botão, a margem ela joga do lado de
1019. 39:53fora, o pading do lado de dentro.
1020. 39:56Combinado? Já deixou seu like? Tá
1021. 40:00gostando da aula? Você tá gostando da
1022. 40:01aula, deixa aquele like. Eu tô focado
1023. 40:03aqui na aula. A minha equipe tá aqui no
1024. 40:05chat, então você pode ir colocando suas
1025. 40:07dúvidas que minha equipe vai te
1026. 40:08respondendo, tá? Porque senão eu fico
1027. 40:10maluco aqui, [risadas] tô focando na
1028. 40:12aula e tô tentando, de fundo do meu
1029. 40:14coração, tô tentando explicar da forma
1030. 40:15mais simples possível. Se tá difícil
1031. 40:17para você, calma, pede ajuda, pega as
1032. 40:19apostilas. Se tá muito lento para você,
1033. 40:21tenha paciência que agora eu vou
1034. 40:23acelerar. Ã, por enquanto é isso. Depois
1035. 40:25a gente volta aqui no body.
1036. 40:27Aí depois do body a gente vai ter o H1,
1037. 40:30ó. Eu tenho o body e depois do body eu
1038. 40:33tenho o H1. Então vamos pro H1. O H1 eu
1039. 40:35vou fazer o seguinte, eu vou colocar um
1040. 40:37font size aqui nele de colocar 40
1041. 40:41pixels, tá? E vou colocar uma cor nele
1042. 40:44também vai ser FA, FA, FA, fa, tá? É o
1043. 40:49código da cor dele. E vou colocar também
1044. 40:51um cara chamado font weight e eu vou
1045. 40:52colocar como bolt. Que que é o font
1046. 40:55weight? Vou até colocar aqui. Font
1047. 40:56weight é a grossura
1048. 40:59da fonte.
1049. 41:00E o bold, que que é o bold? Bolt é
1050. 41:05Então eu coloquei bolt
1051. 41:08é a fonte tá bom?
1052. 41:13Fonte size, você já sabe o que que é,
1053. 41:15que é o tamanho do texto. Tamanho do
1054. 41:17texto.
1055. 41:19Então, coloquei o texto agora um pouco
1056. 41:21maior. 40 pixels. Ó, já tá maior. Até
1057. 41:24colocar um pouco menos. Deixa eu colocar
1058. 41:2532. Deixa eu ver. Deixa eu ver se tá com
1059. 41:27zoom também. Acho que minha tela tá com
1060. 41:29zoom.
1061. 41:30Ah, acho que tá parecido, né? Deixa eu
1062. 41:32ver. Acho que tá parecido, tá? Font
1063. 41:35weight. Coloquei um color fa.
1064. 41:38Tá vendo, ó? Já coloquei aqui. Ah, não,
1065. 41:41eu não tô usando mais esse. Eu tô usando
1066. 41:43o
1067. 41:45outro que a gente abriu. Cadê? Cadê? Ele
1068. 41:47abriu em outra aba aqui, ó. Deixa eu
1069. 41:50pegar aqui.
1070. 41:52Deixa eu colocar aqui.
1071. 41:55Beleza. Ó, já tá aqui bonitão.
1072. 41:59Uhum. Uhum.
1073. 42:01Ã, vamos continuar. Agora a gente tem
1074. 42:05aqui o
1075. 42:08H1. E aqui veja que tem uma cor
1076. 42:10diferente, né? Olha só. Deixa eu
1077. 42:12organizar minha tela aqui que tá
1078. 42:13bagunçado.
1079. 42:16Aqui, ó. Tem uma cor diferente, não tem?
1080. 42:18Vamos trocar essa cor. Como que eu troco
1081. 42:20essa cor? A gente tem uma tag chamada
1082. 42:23spam. Spam. Que que é o spam?
1083. 42:28Cond que tá é o com IA, não é? CSS
1084. 42:30gerador com IA. O spam eu vou colocar
1085. 42:34aqui, ó.
1086. 42:36Que que é o spam? O spam não é aquele
1087. 42:38spam do e-mail que você tá acostumado.
1088. 42:39Não, não, não, não, não. O spam do
1089. 42:41e-mail é com N. O nosso é com N. O spam
1090. 42:43ele serve para eu selecionar
1091. 42:47um pedacinho de texto. Então, o que eu
1092. 42:51tô fazendo? Eu selecionei só um
1093. 42:52pedacinho de texto que eu quero colocar
1094. 42:54uma cor diferente. Então eu uso essa tag
1095. 42:56chamado spam. Ela serve para isso. E aí
1096. 42:59eu posso ir ir aqui, selecionar só o
1097. 43:01spam e colocar uma cor diferente que vai
1098. 43:03ser aquele verde que vai ser é 22 C5E,
1099. 43:09que é o verde dev club. Opa, aqui é
1100. 43:12color, né? Então, color. Então, só o
1101. 43:15spam agora vai ter essa cor diferente. E
1102. 43:19deu certo. Ah, show de bola. Agora o
1103. 43:23próximo é esse parágrafo aqui, né?
1104. 43:25Então, a gente tem um parágrafo, ó. Eu
1105. 43:26tenho esse parágrafo, o meu pezinho. Vou
1106. 43:29copiar ele aqui e vou colocar o
1107. 43:32parágrafo bigodinhos. E aí eu vou fazer
1108. 43:35o seguinte, vou colocar uma cor nele que
1109. 43:38é hashag 717171,
1110. 43:42tá? 71 não, aqui é a esquece ponto e
1111. 43:45vírgula, tá? Eu sei que as cores tm
1112. 43:48esses códigos malucos, mas não precisa
1113. 43:50se preocupar, tá? Por primeiro você usa
1114. 43:52o color highlight para escolher a cor,
1115. 43:54ó. Tá vendo, ó? E também se você
1116. 43:56pesquisar no Google, ó, paleta de cores
1117. 44:00CSS.
1118. 44:02Tem vários sites, ó. Vários, vários
1119. 44:04sites, ó. Ó, vários sites que tem tudo
1120. 44:07pronto, ó. Você clica aqui, ó.
1121. 44:10Tá vendo, ó? Tem uma porrada de cor, ó.
1122. 44:13Ah, gostei dessa cor. É só você pegar,
1123. 44:14copiar e colocar no seu código, tá bom?
1124. 44:16Ó. Então, não se preocupe com cores, é
1125. 44:19algo bem tranquilo de mexer. Beleza? tá
1126. 44:23saindo, tá melhorando. Ã, depois do
1127. 44:26parágrafo, o próximo é o textiária. O
1128. 44:29textiária tem um ponto interessante aqui
1129. 44:32que a gente vai eh vai mexer, tá?
1130. 44:37Ah, só esqueci de um detalhe. Eu acho
1131. 44:38que tá muito grudado isso aqui, ó. Vamos
1132. 44:40colocar uma margem, ó. Então, tá muito
1133. 44:42grudado. Eu vou aqui voltar aqui no
1134. 44:44parágrafo. Eu vou colocar uma margem
1135. 44:47nele e vou colocar uma margem de 10
1136. 44:50pixels, tá? Só para ele dar uma
1137. 44:52distanciada, ó. Já deu uma distanciada
1138. 44:55aqui, tá legal? Eu tenho texta. O texti
1139. 44:58área, ele tem um um comportamento
1140. 45:00engraçado, ó. Você pode aumentar ou
1141. 45:03diminuir, mas eu não gosto disso. Eu
1142. 45:05acho que fica muito bagunçado, ó. Então,
1143. 45:07o que que a gente vai fazer no text? Lá
1144. 45:09no lá no HTML, a gente pode fazer uma
1145. 45:11mudança no texta. Que que a gente vai
1146. 45:14fazer? Lembra que a gente tem alguns
1147. 45:16atributos, né? algumas configurações. Eu
1148. 45:19posso fazer o seguinte aqui no meu
1149. 45:21texta, eu posso travar ele. Como que eu
1150. 45:23faço? Primeiro, eu vou colocar a
1151. 45:25configuração chamada rows
1152. 45:283. Que que é rows? Rows em inglês, row.
1153. 45:33Rows são linhas. Então eu vou falar para
1154. 45:36ele que ele vai ter três linhas, ó. Só
1155. 45:38toma cuidado para não grudar, ó. Se
1156. 45:40grudar até muda a cor, porque não
1157. 45:41funciona, tá? Então vou falar que o
1158. 45:43texte vai ter três linhas, combinado?
1159. 45:46Então o meu text área ele vai ter três
1160. 45:49linhas,
1161. 45:52beleza? Ó, uma, duas, 3. Só que mesmo
1162. 45:55assim eu ainda consigo fazer isso aqui,
1163. 45:56ó,
1164. 45:58mudar o tamanho dele. Agora eu vou
1165. 46:00travar isso. Por quê? Eu vou aqui nos
1166. 46:02meus styles, vou selecionar o meu text
1167. 46:05área e tem uma propriedade chamada
1168. 46:08resize.
1169. 46:10E eu vou colocar como nome. N. N é nada.
1170. 46:14Então eu não quero, eu quero eliminar o
1171. 46:16resize. Resize inglês. Resize.
1172. 46:20Size inglês é tamanho, tá? Size é
1173. 46:23tamanho. Então resize seria você eh
1174. 46:27seria o redimensionar. Redimensionar,
1175. 46:31tá? Trocar o tamanho. E eu não quero
1176. 46:34trocar o tamanho disso aqui. Então eu
1177. 46:36coloco como nome. E aí ele não vai
1178. 46:37deixar eu trocar o tamanho. Ó, ó, ó. Tá
1179. 46:40vendo, ó? Ele não deixa mais eu trocar o
1180. 46:42tamanho. Era isso que eu queria. Eu
1181. 46:44quero que ele ocupe mais espaço. Então o
1182. 46:47espaço aqui, o ID eu vou colocar 100%.
1183. 46:52E o wid significa
1184. 46:55largura. Então se eu quero trocar
1185. 46:57largura, vou colocar o ID 100%. Bom, vai
1186. 47:02ocupar todo o espaço, vai, mas a gente
1187. 47:03vai consertar isso daqui a pouquinho,
1188. 47:05tá? Deixa ele ali bem grandão. Ã, que
1189. 47:08mais que eu quero colocar nele? Eu vou
1190. 47:09colocar um pading para ele ficar um
1191. 47:10pouquinho maior. 16 pixels. Você vai ver
1192. 47:13que quando eu colocar o padging, ó, ele
1193. 47:14deu uma crescidinha, ó. Tá vendo, ó? Que
1194. 47:17agora tem um espaçamento. Por o padging
1195. 47:19é o espaçamento na parte de dentro.
1196. 47:22Beleza? E antes que você fique
1197. 47:24preocupado, até vou dar uma pausa aqui,
1198. 47:27por quando eu comecei na programação, eu
1199. 47:29lembro que eu assisti aulas como essa
1200. 47:33e a pessoa ia colocando: "Não, faz isso,
1201. 47:36faz aquilo". e a tela ia se movimentando
1202. 47:38e de repente ficava bonita. E aí eu
1203. 47:40falava: "Caraca, é muito fácil". E
1204. 47:42quando eu ia fazer, eu travava.
1205. 47:44Então, se você tá, putz, o rodou foi
1206. 47:46aqui, foi ali, colocou isso, colocou
1207. 47:48aquilo, meu, eu nunca vou conseguir
1208. 47:50fazer a mesma coisa.
1209. 47:52Respira fundo e lembre-se que eu já
1210. 47:54estive no seu lugar.
1211. 47:58Novamente,
1212. 48:00você acabou de conhecer a letra A e o B,
1213. 48:04só que você já tá olhando o alfabeto
1214. 48:06inteiro e você já quer dominar o
1215. 48:07alfabeto inteiro. Calma, eu estou te
1216. 48:10apresentando várias ferramentas. Você
1217. 48:12vai dominar todas hoje? Não, eu queria
1218. 48:14que você dominasse. Eu também queria ter
1219. 48:16dominado tudo num dia só. Só que a vida
1220. 48:18é assim. A vida é dividida em dois tipos
1221. 48:20de pessoas. as pessoas que vão até o
1222. 48:22final e tem sucesso e quem fica de
1223. 48:24mimimi, quem acha que é difícil e para.
1224. 48:28Ontem eu trouxe minha filhinha aqui,
1225. 48:29cara. Se eu não tivesse tido paciência,
1226. 48:32sentado o bumbinho na cadeira, eu não
1227. 48:34teria uma filhinha linda hoje no meu
1228. 48:35colo brincando comigo. Então, tenha
1229. 48:38paciência. Eu estou apresentando as
1230. 48:40ferramentas. Você vai anotar, depois
1231. 48:43você vai fazer, vai dar pau, você chama
1232. 48:45o suporte, você pede ajuda, você estuda
1233. 48:47de novo, assiste a aula de novo. Ou
1234. 48:49senão contente-se com uma vida medíocre.
1235. 48:53Vira para você e fala: "Ó, eu quero uma
1236. 48:55vida ruim, eu quero ganhar pouco. Eu
1237. 48:57quero ter uma vida ruim pro resto da
1238. 48:59vida, eu quero quero passar perrengue,
1239. 49:02eu gosto do ônibus lotado. Sabe aquele
1240. 49:05cheiro de CC da galera 5:30 da manhã? Eu
1241. 49:07gosto disso. Assume ou não.
1242. 49:12Se dedique e mude,
1243. 49:15escolhas. Combinado? Colocamos o pad e
1244. 49:18que que acontece, ó? Agora tá mais
1245. 49:20distanciado. E uma dica, você não
1246. 49:22entendeu o que que como o que algo faz,
1247. 49:25Deleta,
1248. 49:26deleta, salva e vê o que que mudou. Ah,
1249. 49:29tá. Agora tá grudado a letra. Ó, eu dei
1250. 49:32um zoom aqui, ó. Agora a letra tá tá
1251. 49:34grudada. Se eu tiro o pad e coloco ele
1252. 49:37de novo agora. Ah, tá. Agora distanciou.
1253. 49:40Então vamos lá. Você já entendeu o que
1254. 49:41que é o pé. Aí vou colocar também uma
1255. 49:45borda. Eu quero colocar uma borda bonita
1256. 49:46porque nossa borda tá feia. E aí a borda
1257. 49:49funciona o seguinte. Borda. E a borda
1258. 49:52ela precisa de três configurações. Três.
1259. 49:55Primeiro, o tamanho. Vou colocar um
1260. 49:56pixel. Quero uma borda bem fininha.
1261. 49:58Segundo, se a borda vai ser tracejada,
1262. 50:01se ela vai ser pontilhada ou se ela vai
1263. 50:03ser contínua. A minha vai ser contínua,
1264. 50:06ó, sólida. E por último, a cor da borda,
1265. 50:09que a minha vai ser 27
1266. 50:13e
1267. 50:157A. É isso? Não. Deixa eu pegar aqui a
1268. 50:19cor, ó. Você acha que eu vou gravar a
1269. 50:21cor, né? [suspirando] Minha borda vai
1270. 50:23ser dessa cor, ó. 27 27.
1271. 50:27Mudou uma letrinha, muda tudo, ó.
1272. 50:28Cuidado com os espaços aqui, ó. Um
1273. 50:30pixel, espaço sólid, espaço, a cor.
1274. 50:34Então o tamanho da borda, ela vai ser
1275. 50:37contínua e a cor da borda,
1276. 50:40ó, já tá uma borda bem fininha aqui, ó.
1277. 50:44Ó, bem fininha, tá vendo? Ah, não tô
1278. 50:46enxergando. Coloca aqui, ó, cinco
1279. 50:47pixels. Tá vendo, ó?
1280. 50:51Vendo? Então, um pixel. Outra coisa, eu
1281. 50:54quero minha borda arredondadinha. Eu
1282. 50:57quero minha borda arredondadinha, ó. Bem
1283. 50:59redondinha a borda. Vamos arredondar a
1284. 51:01borda. Tem uma propriedade chamado
1285. 51:04border radius. O border radius. Radius
1286. 51:07ele arredonda a borda. Eu vou colocar
1287. 51:08uma borda arredondadinha de ã acho que
1288. 51:12cinco pixels. Tá bom. Não, 10, né? Vamos
1289. 51:16arredondar a bordinha direito. Aí, ó.
1290. 51:18Ah, a bordinha agora tá arredondada.
1291. 51:20Beleza, beleza, beleza, beleza.
1292. 51:23Ã, vou colocar um background,
1293. 51:26uma cor de fundo, que é hashtag. Deixa
1294. 51:30eu pegar aqui, né? Não vou ficar
1295. 51:31adivinhando cor não. Então, background,
1296. 51:34você já aprendeu cor de fundo. Que que é
1297. 51:36esse cara aqui? Deixa eu pegar aqui para
1298. 51:37vocês, ó. Vou ser legal. Depois final da
1299. 51:40aula eu mando o código, ó. Que que é
1300. 51:41border radius? Arredondar a borda. Que
1301. 51:45que é border?
1302. 51:47O border é
1303. 51:53trocar a cor da borda. Ã, que que é o
1304. 51:56pading? Espaçamento. O que que é o
1305. 51:58resize? Nome já diz, né?
1306. 52:02Ó. Hum. Enfim, dá para entender.
1307. 52:04Background, cor de fundo.
1308. 52:08Ó, cor de fundo já mudou. Opa, tá
1309. 52:10ficando melhor. Ah, agora a gente quer
1310. 52:12mudar a cor que tá ali dentro, né? Então
1311. 52:14eu troco o color. O color eu vou pegar o
1312. 52:17mesmo desse aqui, ó. Cadê? Pode ser esse
1313. 52:20aqui, ó. F fa.
1314. 52:26Opa. Eu não gosto. Tá vendo quando clica
1315. 52:29que fica
1316. 52:31esse esse coisa aqui? Eu não gosto
1317. 52:34disso. Então, esse cara chama Outline.
1318. 52:37Outline. Não, outline é essa cor azul
1319. 52:41feia que fica, ó. Pronto, agora parou de
1320. 52:44aparecer.
1321. 52:46Beleza. Gostei. Gostei. Agora vamos pro
1322. 52:49botão. Vamos pro botão ali. Vamos mexer
1323. 52:52no botão.
1324. 52:54Vamos mexer no botão. Vamos mexer no
1325. 52:56botão. O botão também quero que ocupe
1326. 52:58todo o espaço. Já vai corrigir isso. Eu
1327. 53:00sei que tá tudo bagunçado, mas já vamos
1328. 53:02corrigir isso, ó. Então, botão. Beleza.
1329. 53:06O edit é o quê? Largura. Aí a gente tem
1330. 53:09também a altura. Altura é o right.
1331. 53:14Largura. altura, altura, largura. O
1332. 53:18height, que é a minha altura desse cara,
1333. 53:22eu vou colocar,
1334. 53:25hum, eu não vou colocar altura agora
1335. 53:27não. Eu vou mexer em outras coisas
1336. 53:29primeiro, vocês vão entender o porquê.
1337. 53:30Vou colocar uma cor de fundo que eu
1338. 53:32também não lembro qual que é. Deixa eu
1339. 53:34pegar aqui. Deixa eu pegar aqui. Deixa
1340. 53:36eu pegar aqui. #tananã. Essa é a cor de
1341. 53:40fundo. Beleza. Vamos trocar a cor do
1342. 53:42texto ali. Vamos. Então esse aqui eu vou
1343. 53:45colocar 0909.
1344. 53:50É um preto.
1345. 53:52Me que já tava preto, né? Deixa eu ver
1346. 53:53como que tá ficando. Ah, já era preto.
1347. 53:55Isso aqui não vou nem mexer, tá? Já tava
1348. 53:57numa cor legal.
1349. 53:59Ah, não precisa não. Vou colocar um font
1350. 54:01size nesse cara de 16 pixels, que é no
1351. 54:05texto, né? Então, ó, o texto deu uma
1352. 54:07crescidinha,
1353. 54:09ó.
1354. 54:12Uma crescidinha.
1355. 54:13Vou colocar aqui nesse cara também um
1356. 54:16font weight, que é deixar o texto mais
1357. 54:19grossinho. Beleza? Ok, ok, ok, ok. Vou
1358. 54:23colocar um border radius nesse cara e
1359. 54:26uns 10 pixels também para ele ficar com
1360. 54:28a borda arredondadinha.
1361. 54:31Eu não quero border nesse cara, então eu
1362. 54:32vou tirar a borda. Coloco border nó.
1363. 54:35Esse cara aqui, ó, eu queria borda,
1364. 54:37então eu coloquei um pixel solid e a
1365. 54:39cor. Esse aqui eu não quero bordar, eu
1366. 54:40coloco border non, só isso. Não quero
1367. 54:42borda. O non é nada. Agora ele tirou a
1368. 54:45borda. Beleza. Calma lá que vai ficar
1369. 54:48bonito. Outra coisa, vamos colocar um
1370. 54:50padging nesse cara, ó. Pading 14 pixels.
1371. 54:55Vou colocar aqui um. Ah,
1372. 54:58já tá bem legal.
1373. 55:01Outra coisa, quando eu coloco o mouse em
1374. 55:02cima, eu quero que fique aquela
1375. 55:03mãozinha. Eu quero que mude pra
1376. 55:05mãozinha. Para mudar pra mãozinha, eu
1377. 55:08coloco o cursor como pointer. Ele até
1378. 55:11completou para mim, ó. Cursor como
1379. 55:13pointer.
1380. 55:14Ah, ué, não atualizou.
1381. 55:20Ã,
1382. 55:23não atualizou. Cursor como pointer.
1383. 55:30Oxe.
1384. 55:33Ã, deixa eu colocar aqui uma margem.
1385. 55:34Pera aí.
1386. 55:36margem. Colocar aqui 10 pixels. Será que
1387. 55:39ele tá muito grudado?
1388. 55:42Ã, que estranho.
1389. 55:45Às vezes dá esses pau. Vou fazer o
1390. 55:47seguinte, deixa eu parar aqui, ó. Vou
1391. 55:48rodar de novo. Então, vou parar de rodar
1392. 55:53e vou rodar de novo.
1393. 56:01Tã.
1394. 56:05Vamos ver. Ah, agora funcionou, ó. Agora
1395. 56:08funcionou. Normal. Às vezes você dá um
1396. 56:10resetinho nas coisas, ó. Dei um
1397. 56:12resetinho e agora funcionou. Então, o
1398. 56:13cursor pointer, ó, o cursor como pointer
1399. 56:16ele faz com que com qu eu ocupe todo o
1400. 56:20espaço. Outro ponto é que eu coloquei um
1401. 56:22margem aqui, ó. Uma coisa que eu queria
1402. 56:24ensinar para vocês é que quando eu
1403. 56:25coloco margem, ele aplica em todas as
1404. 56:27direções. Quer ver? Ó, vou mostrar duas
1405. 56:29coisas legais para você. A primeira é
1406. 56:31que agora você vai sentir um hacker.
1407. 56:33Você vai clicar com o botão direito do
1408. 56:35mouse, ó, direito do mouse. Direito do
1409. 56:37mouse. E você vai clicar em inspecionar,
1410. 56:39ó. Direito do mouse, inspecionar. Quando
1411. 56:41você clica em inspecionar,
1412. 56:42principalmente no Google Chrome, tá? Eu
1413. 56:44gosto de fazer isso no Google Chrome.
1414. 56:46Botão direito, inspecionar no Google
1415. 56:47Chrome. O que que vai acontecer aqui?
1416. 56:50Você abre esse menu aqui em elementos,
1417. 56:52ó, e ele mostra tudo que tá na tela. Por
1418. 56:54exemplo, se eu clicar aqui nessa
1419. 56:55setinha, eu posso selecionar meu botão.
1420. 56:58E olha só que legal, quando eu seleciono
1421. 56:59o meu botão, ele fala tudo do meu botão,
1422. 57:01ó. Ele mostra a tagão, ele mostra os
1423. 57:03elementos do meu botão, ó, que eu criei.
1424. 57:05Eu posso chegar aqui e trocar, eh, por
1425. 57:08exemplo, eu vou colocar um height, que é
1426. 57:10altura de 100 pixels. Em tempo real, ele
1427. 57:13troca aqui no meu botão, tá? Olha só que
1428. 57:16interessante, se eu reinicio, ele perde
1429. 57:18tudo. Por quê? Porque isso aqui é só um
1430. 57:21teste, tá? O importante é o que tá no
1431. 57:23código, mas o legal dessa tela é que
1432. 57:25você pode ir vendo os elementos passo a
1433. 57:27passo, ver o código, ver o que tá
1434. 57:29acontecendo. Quando eu coloco aqui eh o
1435. 57:32mouse no botão, veja que ficou um
1436. 57:36marrom ali em volta. Esse marrom é a
1437. 57:39margem e ele ficou também um verde do
1438. 57:42lado de dentro. Esse verde do lado de
1439. 57:44dentro é o padging. Então agora você
1440. 57:45consegue enxergar o pading e a margem,
1441. 57:47ó. E aqui embaixo, olha só, deixa eu,
1442. 57:50equipe, me coloca um pouco pro lado. É
1443. 57:53mais um pouco, mais um. Pode jogar lá do
1444. 57:55outro lado. Boa, equipe. Obrigado. Que
1445. 57:58que é isso aqui, ó? Ele tá mostrando a
1446. 58:00margem. Olha só que interessante, ó. A
1447. 58:02margem. Ele tá mostrando o pading. Ó, o
1448. 58:05pading é verde. Vamos ver esse elemento
1449. 58:07aqui. Acho que tem pading, vai dar para
1450. 58:08ver melhor. Tá vendo o verdinho ali
1451. 58:09dentro, ó? Então, ó, o pading 16.
1452. 58:13Ó a borda. Olha a borda aqui. Esse aqui
1453. 58:15não tem margem. Olha só o tamanho dele.
1454. 58:18Então, é bem interessante que no
1455. 58:20navegador você consegue entender muito
1456. 58:21do que tá acontecendo. E o que eu queria
1457. 58:23mostrar para vocês é o seguinte. A gente
1458. 58:24colocou uma margem em todos os lados, ó.
1459. 58:26E não tá legal porque ele tá deslocando
1460. 58:28ele um pouco. O que eu quero de verdade
1461. 58:30é uma margem só em cima. E para eu
1462. 58:32colocar uma margem só em cima, eu tenho
1463. 58:34a opção de margem só em cima. Como que
1464. 58:37eu faço isso? Se eu quero a margem só em
1465. 58:39cima, eu coloco margem traço top. Então,
1466. 58:43em cima é top.
1467. 58:46cima.
1468. 58:48Se eu quisesse só embaixo,
1469. 58:51baixo é borose.
1470. 58:56Eh, eu misturei aqui, ó. Bor é baixo. Se
1471. 59:02eu quisesse só na esquerda é left e só
1472. 59:05na direita
1473. 59:07right direita. Então eu posso escolher o
1474. 59:10lado que minha margem vai ficar. No meu
1475. 59:12caso, eu quero margem só em cima.
1476. 59:14Coloquei margem bor top. Salvei. E agora
1477. 59:17você vai ver, ó, que ele tá colocando a
1478. 59:18margem, ó, só em cima. Cara, é muito
1479. 59:20legal esse gráfico aqui. Eu gosto
1480. 59:22bastante, tá? E aí você pode ir fuçando.
1481. 59:25Para acessar é só clicar com o botão
1482. 59:26direito no Chrome e na última opção,
1483. 59:29inspecionar. E aí tem esse menu
1484. 59:30elementos aqui. Aí ele mostra tudo,
1485. 59:33tudo, tudo aqui, ó. O CSS é bem legal.
1486. 59:36OK. Outra coisa que eu queria mudar, ã,
1487. 59:40era duas coisas que eu queria falar para
1488. 59:41você. Ah, é o menu inspecionar e a
1489. 59:43margem em cima. Beleza? Já falei outra
1490. 59:45coisa legal que eu queria ensinar para
1491. 59:46vocês, tá? Vai anotando tudo, galera. Eu
1492. 59:48sei que são várias e várias e várias
1493. 59:49dicas, mas vai anotando, você vai
1494. 59:51aprendendo aos poucos. Tenha paciência,
1495. 59:53paciência, sem miimi, pega as apostilas,
1496. 59:56chama o suporte, fala no chat que minha
1497. 59:58equipe vai te ajudar, me chama no
1498. 59:59Instagram. O que você não pode agora é
1499. 1:00:01dar desculpa. A sua família depende de
1500. 1:00:04você, você depende de você, o seu
1501. 1:00:06sucesso vai fazer outras pessoas terem
1502. 1:00:08sucesso, tá certo? O Rodolfo quando
1503. 1:00:11estudou programação e se deu bem na
1504. 1:00:12programação, o meu cunhado virou
1505. 1:00:14programador, meu irmão virou
1506. 1:00:15programador, eu consegui ajudar meus
1507. 1:00:17pais, consegui ajudar minha mulher,
1508. 1:00:19minha filha, várias pessoas mudaram de
1509. 1:00:21vida graças a mim, ao meu esforço. E
1510. 1:00:24você tem o mesmo poder que eu. Você é um
1511. 1:00:26improvável igual eu. Só não pode ficar
1512. 1:00:28de desculpinha, é sentar e estudar. Tá
1513. 1:00:30difícil, chama alguém para te ajudar.
1514. 1:00:32Você tem toda a ajuda do mundo aqui, pô.
1515. 1:00:34Sem mimimi. Vamos lá. Eu confio em você.
1516. 1:00:37Eu acredito em você. Eu acredito tanto
1517. 1:00:38em você que agora eu vou te ensinar mais
1518. 1:00:40uma coisa legal, ó. Lá no Word,
1519. 1:00:43quando a gente quer trocar fonte, a
1520. 1:00:45gente não muda a fonte. Aqui a gente
1521. 1:00:47também consegue, tá? Que que a gente vai
1522. 1:00:48fazer? Deixa eu voltar. Equipe, pode me
1523. 1:00:50voltar. Opa, pronto. Eh, a gente vai no
1524. 1:00:53Google. No Google, você vai procurar um
1525. 1:00:56cara chamado Google Fonts. Aqui no
1526. 1:00:59Google Fonts, a gente pode adicionar
1527. 1:01:01fontes à nossa aplicação, ó. Tem várias,
1528. 1:01:04ó. Roboto, Open Suns, eh, Arial. É, é
1529. 1:01:10que nem o é é que nem lá no Word, né? E
1530. 1:01:14a gente vai usar essa fonte chamado
1531. 1:01:16Inter, tá? Você pode pesquisar aqui, ó,
1532. 1:01:18Inter. Inter não é o Inter de Porto
1533. 1:01:20Alegre, tá? Então, eu pesquisei a fonte
1534. 1:01:22Inter, ó, Inter. Ela é uma das primeiras
1535. 1:01:25aqui, é uma das mais famosas. Eu vou
1536. 1:01:27clicar aqui na fonte e aí você vai, ai
1537. 1:01:30tá em inglês, eu não sei. Clica com o
1538. 1:01:32botão direito do mouse, ó, traduzir para
1539. 1:01:34português, tá? E aí a gente vai clicar
1540. 1:01:37aqui, ó, em obter font,
1541. 1:01:39tá? Ã, o meu ficou bugado assim, tá? Eu
1542. 1:01:42não sei porque o meu ficou em Deixa eu
1543. 1:01:43apagar aqui. Ah, pronto, pronto. Ó,
1544. 1:01:47fonte enter. Beleza, obter fonte. E
1545. 1:01:51agora a gente vai aqui, ó, obter o
1546. 1:01:52código de incorporação.
1547. 1:01:54Beleza? Agora é muito fácil, ó. Ele até
1548. 1:01:57fala como que a gente faz, ó. Incorpore
1549. 1:01:59o código no head do seu HTML. Então, o
1550. 1:02:02que que a gente vai fazer, ó? Eu, deixa
1551. 1:02:04eu subir aqui um pouquinho, ó. Tá vendo,
1552. 1:02:05ó? Incorpore no head. Eu vou copiar, ó.
1553. 1:02:08Copiei o código e a gente vai colocar no
1554. 1:02:10head. Por qu as configurações ficam no
1555. 1:02:12head. Então, eu vou lá no head do HTML,
1556. 1:02:14qualquer lugar. Eu gosto de colocar aqui
1557. 1:02:15em cima do título. Eu vou, ó, vou colar
1558. 1:02:18aqui, ó. Pul. Não precisa entender esse
1559. 1:02:21código, ó. Vou formatar. Agora o que que
1560. 1:02:24acontece? A nossa eh aplicação, ela tem
1561. 1:02:27disponível a fonte. E como que eu faço
1562. 1:02:30para usar? Eu vou salvar aqui. E o
1563. 1:02:32próprio site do Google ensina, ó. É só
1564. 1:02:35você ir lá no seu HTML, no seu CSS, ó, e
1565. 1:02:39colar essa linha aqui, ó, fonte family
1566. 1:02:41inter sanserif. Só essa fonte aqui, ó.
1567. 1:02:44Só essa linha, ó. Eu vou copiar essa
1568. 1:02:45linha, vou lá no meu CSS e eu vou
1569. 1:02:48aplicar ela a tudo, tá? Então, vou
1570. 1:02:50colocar aqui em cima.
1571. 1:02:53Então tudo vai ter essa fonte, tá? Se eu
1572. 1:02:56quisesse só no parágrafo ou só no H1, eu
1573. 1:02:58colocaria aqui no H1, mas eu quero em
1574. 1:03:00tudo. Vou colar ela aqui, vou salvar e
1575. 1:03:03aí você vai ver que agora a minha
1576. 1:03:05aplicação tá com uma fonte bonitona, mas
1577. 1:03:07ela ainda tá toda torta, toda
1578. 1:03:09desconjuntada. Por que que ela tá torta,
1579. 1:03:12desconjuntada? Eu vou te explicar, tá? E
1580. 1:03:14a gente vai corrigir.
1581. 1:03:16Imagine a seguinte situação, ó. Você tem
1582. 1:03:19um livro, você tem um boneco, você tem
1583. 1:03:22aqui, ó, a caixa do óculos. Eh, você tem
1584. 1:03:25esse carinha aqui, uma buzina. Essa
1585. 1:03:27buzina aqui eu toco ela quando um aluno
1586. 1:03:29meu consegue emprego. Eu não vou tocar
1587. 1:03:31ela para você porque a minha filhinha,
1588. 1:03:32Rafaela, hoje não veio me assistir,
1589. 1:03:35então é, ela tá dormindo. Na verdade,
1590. 1:03:37ela veio me assistir, mas já dormiu, né?
1591. 1:03:39Né, filhinha? Filhinha veio me assistir.
1592. 1:03:41Vocês gostaram de conhecer a Rafaela
1593. 1:03:42ontem? Então ela tá dormindo, eu não vou
1594. 1:03:44apertar porque senão vou acordar,
1595. 1:03:45Rafaela, mas toda vez que o aluno meu
1596. 1:03:47consegue emprego, a gente toca, faz
1597. 1:03:48bagunça. Aqui a gente é uma família,
1598. 1:03:49então quando não tem sucesso aqui, todo
1599. 1:03:51mundo faz bagunça, aluno meu ganha
1600. 1:03:53troféu, é mai legal. Mas enfim, a gente
1601. 1:03:55tem várias coisas aqui. Que que a gente
1602. 1:03:57normalmente faz quando a gente quer
1603. 1:03:58organizar as coisas na nossa vida? A
1604. 1:04:00gente pega uma caixa. Aí eu pego na
1605. 1:04:03caixa, coloco esse aqui aqui, esse aqui
1606. 1:04:05aqui, esse aqui aqui e esse aqui aqui.
1607. 1:04:08Olha só a diferença. Tava tudo
1608. 1:04:09bagunçado, de repente eu coloquei tudo
1609. 1:04:11numa caixa e ficou tudo muito
1610. 1:04:13organizado. A programação ela imita a
1611. 1:04:16vida porque a gente também guarda as
1612. 1:04:18coisas em caixas e organiza tudo. O que
1613. 1:04:20tá acontecendo é que eu tô com vários
1614. 1:04:21elementos jogados, ó. Ó, tá tudo jogado
1615. 1:04:25aqui, ó. Aqui no HTML, ó, tá tudo
1616. 1:04:27jogado. Por um lado, eu tenho H1, pro
1617. 1:04:30outro parágrafo. Então, simplesmente eu
1618. 1:04:32joguei eles na tela. O que eu preciso
1619. 1:04:34fazer agora é organizá-los bonitinho. E
1620. 1:04:37como que eu faço isso? Como que eu faço
1621. 1:04:39para organizar, deixar tudo bonitinho? A
1622. 1:04:41gente tem algumas ferramentas para isso.
1623. 1:04:42Uma das ferramentas que ajuda as coisas
1624. 1:04:45não ficarem, por exemplo, ó, o que eu
1625. 1:04:46quero centralizar todo mundo. Então, a
1626. 1:04:48gente, esse cara aqui tá muito grande,
1627. 1:04:49vamos diminuir ele um pouco. E esse aqui
1628. 1:04:51a gente precisa centralizar. Pra gente
1629. 1:04:52centralizar todo mundo de uma vez só, a
1630. 1:04:54gente vai aqui no body e a gente tem
1631. 1:04:55algumas ferramentas. Uma delas é o
1632. 1:04:57display flex. Que que o display flex
1633. 1:04:59faz? Se você for ver a tradução de
1634. 1:05:01display é mostrar, exibir o display
1635. 1:05:06flex, ele vai mudar a forma como a gente
1636. 1:05:08mostra os itens. E além disso, o display
1637. 1:05:10flex ele habilita super poderes.
1638. 1:05:15Super poderes. Por que habilita super
1639. 1:05:17poderes? O display flex ele é muito
1640. 1:05:19usado porque quando eu habilito o
1641. 1:05:21display flex ele vai fazer algumas
1642. 1:05:22coisinhas. Ele libera outras
1643. 1:05:24propriedades. Uma das propriedades que
1644. 1:05:26ele libera é, por exemplo, uma
1645. 1:05:27propriedade para alinhar todo mundo, que
1646. 1:05:29ela só funciona se o display for flex.
1647. 1:05:31Eu coloquei o display flex aqui no body,
1648. 1:05:33mas olha só o que vai acontecer. Olha os
1649. 1:05:35itens, eles estavam um debaixo do outro
1650. 1:05:38e agora tá um do lado do outro. É
1651. 1:05:41normal. O display flex ele faz isso por
1652. 1:05:44padrão. Ele deixa um do lado do outro,
1653. 1:05:45mas é fácil consertar. A gente tem o
1654. 1:05:47flex direction, que é a direção dos
1655. 1:05:49itens. Eles podem ficar como colunas,
1656. 1:05:52coluna um debaixo do outro ou como
1657. 1:05:54linha, um do lado do outro. Eu quero um
1658. 1:05:57do lado do outro como linha. Não, eu não
1659. 1:05:59quero eles em linha, eu quero eles em
1660. 1:06:01coluna. Então eu vou colocar aqui
1661. 1:06:02coluna, tá? Então o display flex, ele
1662. 1:06:07habilita alguns superperes, por exemplo,
1663. 1:06:09flex direction. Olha só que legal. Agora
1664. 1:06:11eu posso escolher se os itens vão ficar
1665. 1:06:12um do lado do outro ou um em cima do
1666. 1:06:14outro. Olha só que legal as habilidades
1667. 1:06:16que o Display Flex me dá. Outra
1668. 1:06:18habilidade que ele me dá é o alinhamento
1669. 1:06:20dos itens. Ó, o aline items, ele vai me
1670. 1:06:22permitir escolher se eu vou alinhar ao
1671. 1:06:24centro, à direita, à esquerda. E aí,
1672. 1:06:27olha o resultado, ó. O resultado. Salvei
1673. 1:06:30aqui. Cadê? Cadê? Cadê? Qual o lado que
1674. 1:06:31é? Sempre bagunça aqui.
1675. 1:06:35Pera aí. Coloca isso aqui no meio. Isso
1676. 1:06:37aqui para cá. Isso aqui para cá. Pronto.
1677. 1:06:39Ó o aline items. Ó, alinhar os itens ao
1678. 1:06:43centro, ó. Opa. já ficaram alinhados ao
1679. 1:06:46centro. Rodolfo, mas esses daqui estão
1680. 1:06:47muito grandes. É, eu esqueci de colocar
1681. 1:06:50um detalhezinho. E até uma coisa legal
1682. 1:06:52para te falar é que programação é assim,
1683. 1:06:54gente. Não adianta querer você sair
1684. 1:06:56fazendo tudo. É normal. Você coloca uma
1685. 1:06:58coisa, vai lá, arruma, vai arrumando,
1686. 1:07:00melhorando, normal. E eu vou explicando
1687. 1:07:03vocês passo a passo. Eu já tô preparando
1688. 1:07:07nossa aplicação para ela ficar bonita
1689. 1:07:08tanto no celular quanto no computador,
1690. 1:07:10tá certo? E aí, olha só que
1691. 1:07:12interessante, se você clica com o botão
1692. 1:07:14direito do mouse em inspecionar, vai
1693. 1:07:16inspecionar, você pode clicar aqui, ó,
1694. 1:07:18nesse carinha aqui, ó. Tá vendo, ó? Que
1695. 1:07:20tem um computadorzinho e um celular. Ele
1696. 1:07:22simula como se tivesse um celular. E
1697. 1:07:24perceba que pro celular ele até que tá
1698. 1:07:26bom, ó. Tá, tá legal, ó. Ficou legal.
1699. 1:07:30Uma coisa, acho que ficou muito
1700. 1:07:31apertadinho aqui. Aí a gente pode ir no
1701. 1:07:33pading, ó, que a gente colocou aqui, ó,
1702. 1:07:35e diminuir, ó. Vou colocar 40, ó. Vamos
1703. 1:07:38ver como fica. Salvei aqui, ó. Ficou bem
1704. 1:07:41legal. Então, perceba que para o celular
1705. 1:07:44ele já tá legal, só que quando eu vou
1706. 1:07:46pro computador, p, fica muito grande. E
1707. 1:07:49aí, que que a gente pode fazer? Limitar
1708. 1:07:51o tamanho que esse negócio aqui cresce.
1709. 1:07:53Como que a gente faz isso? Aqui no nosso
1710. 1:07:57texti área, que é esse cara aqui, ó, o
1711. 1:08:00texti área, a gente tem que ele ocupa
1712. 1:08:04100% do espaço disponível para ele, ó.
1713. 1:08:06Ele tá ocupando todo espaço disponível.
1714. 1:08:08Só que eu quero limitar isso. Então eu
1715. 1:08:10coloco que o máximo que ele vai ocupar
1716. 1:08:12é, por exemplo, 640 pixels. Ou seja, ele
1717. 1:08:15vai ocupar tudo que ele tem direito, só
1718. 1:08:18que ele quando chega em 640 pixels, ele
1719. 1:08:20não cresce mais que isso, ó. Ficou bem
1720. 1:08:22legal. A mesma coisa a gente pode
1721. 1:08:25colocar, ó, pro botão. Ele vai ter no
1722. 1:08:27máximo 100%, mas eu vou travar ele em
1723. 1:08:31640. Agora sim, ó. Ficou bem bem legal,
1724. 1:08:34ó. Ó, bem legal. Ah, esse aqui ficou
1725. 1:08:37muito grudado. Ah, beleza. Vai aqui, ó,
1726. 1:08:39e adiciona um uma margem, ó. Cadê? Tem
1727. 1:08:44margem? Esse cara não tem. Adiciona uma
1728. 1:08:45margem, ó. Margem
1729. 1:08:48em cima. Top. Até lá. 20 pixels. Salvei
1730. 1:08:52aqui. Eh,
1731. 1:08:54ah, eu não quero. Eu quero mais grudado,
1732. 1:08:56menos grudado. Aí vai no seu gosto.
1733. 1:09:00Beleza. Só que temos um problema, né?
1734. 1:09:02Isso aqui não funciona. Não faz nada, ó.
1735. 1:09:04Não faz nada. Não faz nada. Para isso
1736. 1:09:06fazer alguma coisa, a gente vai ter que
1737. 1:09:08colocar a inteligência. A inteligência.
1738. 1:09:12Você lembra do JavaScript? Agora a gente
1739. 1:09:14vai ter que botar JavaScript. OK?
1740. 1:09:19Lembrando, vamos pro JavaScript. Agora
1741. 1:09:22eu sei que olha o tanto de coisa de CSS
1742. 1:09:25que a gente aprendeu, galera. Eu sei que
1743. 1:09:27é muito conteúdo, eu sei que é muita
1744. 1:09:29coisa, só que eu prefiro dar muito
1745. 1:09:31conteúdo e você estudando aos poucos do
1746. 1:09:33que eu te dar só um pouquinho, umas
1747. 1:09:36migalhas e você sair daqui com fome, tá?
1748. 1:09:38Então é muita coisa, mas acabou a aula,
1749. 1:09:42eu vou mandar meu código, revisa o
1750. 1:09:44código, pega a apostila, chama o
1751. 1:09:46suporte, chama Giovana, você tem muita
1752. 1:09:49coisa aqui para te ajudar, tá? Eu
1753. 1:09:51prefiro dar muito conteúdo e você
1754. 1:09:54estudando aos poucos do que dar nada de
1755. 1:09:57conteúdo. Agora, antes da gente pro
1756. 1:09:58JavaScript, a gente já vai pro Jobt,
1757. 1:10:02vamos ter o nosso momento Red Bull.
1758. 1:10:03Daqui a pouco tem palavra-chave também.
1759. 1:10:07Preciso dar um gás para você não
1760. 1:10:09desistir, para você continuar.
1761. 1:10:11Equipe, momento Red Bull, preparado?
1762. 1:10:13Tudo certo? Então, organiza aquelas
1763. 1:10:15telas do jeito que eu gosto e bora pro
1764. 1:10:18momento Red Bull. Organizai. Vamos lá,
1765. 1:10:19galera. Vamos lá.
1766. 1:10:20Já deixa aquele like, tá? Você não deu
1767. 1:10:23show like até agora e vamos pro momento
1768. 1:10:25Red Bull e a gente já faz o Red Bull
1769. 1:10:27rapidinho, tá? E a gente vai pro
1770. 1:10:29JScript, combinado? Então, bora lá,
1771. 1:10:31equipe. Só organizar aqui,
1772. 1:10:35então. Bora lá. Tudo bom, seu Lucas?
1773. 1:10:38Tudo certo cara, como que você tá? Tudo
1774. 1:10:41certo, as minhas maravilhas. E aí, como
1775. 1:10:43é que tá? Beleza.
1776. 1:10:44>> Tudo bem, cara. Obrigada aí pelo seu
1777. 1:10:46tempo tá aqui com a gente.
1778. 1:10:49E eu sempre gosto de trazer meus alunos
1779. 1:10:52aqui porque eles inspiram as pessoas.
1780. 1:10:54Quando eu comecei na programação, Lucas,
1781. 1:10:57eu sempre ficava me perguntando se eu
1782. 1:10:59era capaz. E aí quando eu via pessoas
1783. 1:11:01que conseguiram, eu falei: "Opa, eu acho
1784. 1:11:02que eu consigo". Então, você que tá nos
1785. 1:11:04assistindo, pega o exemplo do Lucas para
1786. 1:11:07você ver que você é capaz, que você
1787. 1:11:09consegue, que esse cara fez, ele merece
1788. 1:11:11muito onde ele chegou. Só que também
1789. 1:11:14você olha e se inspira, fala assim:
1790. 1:11:16"Cara, eu posso chegar lá também, Lucas,
1791. 1:11:19para começar, tem muita gente que tem
1792. 1:11:20preconceito. Ah, mas eu moro em cidade
1793. 1:11:22de interior. Da onde que você é, cara?
1794. 1:11:25>> Cara, é impré de Vaso da Roça, interior
1795. 1:11:28da Bahia, interiorzão mesmo. 14.000
1796. 1:11:30habitantes.
1797. 1:11:32>> Caraca, cara.
1798. 1:11:33>> É uma cidadezinha bem pequena.
1799. 1:11:35Cidadezinha bem pequena.
1800. 1:11:36>> Caraca. E você fazia o que antes de
1801. 1:11:39trabalhar com programação, com
1802. 1:11:41tecnologia? Rodolfo, já fez praticamente
1803. 1:11:44tudo em minha vida. Vou começar do
1804. 1:11:46início. [risadas] Eh, eu já participei
1805. 1:11:50de um de uns vídeos com você, não falei
1806. 1:11:51do início da minha história. Falei ali
1807. 1:11:54quando eu comecei a trabalhar na área da
1808. 1:11:57tecnologia, eu já vendi hambúrguer, já
1809. 1:11:59vendi roupa, já fiz um bocado de loja
1810. 1:12:01virtual, mas até um tempo atrás eu
1811. 1:12:05trabalhava com marketing. No
1812. 1:12:07>> caraca. Então você é o cara que vendeu
1813. 1:12:09hambúrguer, trabalhou com marketing,
1814. 1:12:10então você é aquele brasileiro que
1815. 1:12:12talvez muitas pessoas que estejam nos
1816. 1:12:13assistindo vão se conectar. Que foi o
1817. 1:12:16que aconteceu comigo? Você tentou de
1818. 1:12:17tudo. Você precisava fazer uma grana.
1819. 1:12:20>> Eu tentei vender carro, eu tentei vender
1820. 1:12:21iPhone, eu tentei trabalhar com
1821. 1:12:23marketing também, eu tentei de tudo um
1822. 1:12:25pouco. Então você foi o cara que o que
1823. 1:12:27aparecia você tentava para fazer uma
1824. 1:12:29grana, né? O que aparecia ali, eu
1825. 1:12:32abraçava justamente para fazer a grana,
1826. 1:12:34porque como é no interior, as
1827. 1:12:36oportunidades são muitas, mas se a
1828. 1:12:38pessoa buscar e correr atrás sempre
1829. 1:12:40consegue.
1830. 1:12:41>> É legal. É interessante. Você falou isso
1831. 1:12:43do interior. Muita gente mora em
1832. 1:12:44cidadezinha pequena, igual você mora no
1833. 1:12:45Nordeste. Às vezes a pessoa fala: "Ah,
1834. 1:12:46mas para mim é difícil se eu morasse em
1835. 1:12:48São Paulo, se eu morasse numa capital
1836. 1:12:51grande". Então, a gente já viu que isso
1837. 1:12:53aí não cola.
1838. 1:12:55>> Cara, uma pergunta que eu sempre faço
1839. 1:12:56pras pessoas, por que programação? você
1840. 1:12:59acordou um dia e falou assim: "Ah, vou
1841. 1:13:00virar programador". Tipo, por que
1842. 1:13:02programação? Cara,
1843. 1:13:04>> Rodolfo, eu sempre fui um cara curioso
1844. 1:13:07>> e hoje a programação é não é só ali a
1845. 1:13:09pessoa mexer em códigos, é algo que pode
1846. 1:13:11mudar a vida de outras pessoas, nem só
1847. 1:13:14pessoal, quanto profissional. Eu falo
1848. 1:13:17assim, eu tiro por mim, porque um cara
1849. 1:13:19que saiu R$ 600
1850. 1:13:22basicamente de um salário e através da
1851. 1:13:25programação, tá hoje onde tá, não é um
1852. 1:13:29augezão, mas hoje era tudo que eu queria
1853. 1:13:32a partir da programação. Então eu fui te
1854. 1:13:34seguindo, fui seguindo outras pessoas
1855. 1:13:36que a partir das suas da tua da tua
1856. 1:13:39própria história, a eh a partir da
1857. 1:13:42programação, como mudou tua vida, foi a
1858. 1:13:44partir daí que eu decidi entrar também
1859. 1:13:46nesse nesse mundo da tecnologia.
1860. 1:13:49>> Legal. E e seu primeiro contato com eu
1861. 1:13:51sei que você participou dos nossos
1862. 1:13:53eventos, né? Acho que foi na você
1863. 1:13:54participou da missão programação do
1864. 1:13:56zero, que a gente fez um projeto. Que
1865. 1:13:57projeto que foi quando você participou?
1866. 1:14:00>> Rodolfo. Se eu não me engano, eu fui da
1867. 1:14:01tela do Instagram. Foi Instagram, pô.
1868. 1:14:04Legal.
1869. 1:14:05>> E então a gente fez um projeto junto,
1870. 1:14:06você teve aquele primeiro contato com
1871. 1:14:08programação. E quanto tempo demorou para
1872. 1:14:11você conseguir seu primeiro emprego, seu
1873. 1:14:12primeiro dinheiro com programação? Desde
1874. 1:14:14o evento que você participou comigo, a
1875. 1:14:16missão Programação do Zero até o seu
1876. 1:14:18primeiro emprego? Foi quanto tempo,
1877. 1:14:20>> Rodolfo? Até eu entrar num dev clube
1878. 1:14:24ali, foi mais ou menos uns seis meses
1879. 1:14:26para mim consegui o primeiro.
1880. 1:14:28>> Legal.
1881. 1:14:28>> Foi mais isso. Foi mais focado em
1882. 1:14:30programação e suporte também.
1883. 1:14:33Mas para partir do dev club que eu tive
1884. 1:14:34oportunidade,
1885. 1:14:36>> pô. E interessante, você conseguiu o
1886. 1:14:38primeiro emprego, você você tá na
1887. 1:14:40aliança ainda? Tô na aliança.
1888. 1:14:43>> Ó, vou vou fal vou dar uma dica para
1889. 1:14:44vocês. A importância de você ser
1890. 1:14:47esperto, participar na comunidade, você
1891. 1:14:50ser uma pessoa ativa. Hoje o Lucas
1892. 1:14:53conseguiu o primeiro emprego dele, tava
1893. 1:14:55sempre ali na comunidade interagindo com
1894. 1:14:56a galera. E aí um amigo meu, não sei se
1895. 1:15:00vocês conhecem, o Welton Euller, eh, que
1896. 1:15:03hoje em dia ele é bem famoso, é um amigo
1897. 1:15:05meu, ele o o sócio dele me ligou um dia
1898. 1:15:07e falou: "Ó, preciso de uns caras bons
1899. 1:15:10que entendam de programação". E aí foi
1900. 1:15:13quando eu indiquei o Lucas, o Lucas
1901. 1:15:15passou na mérito dele, eu indiquei, mas
1902. 1:15:17se ele não fosse bem no processo
1903. 1:15:19seletivo, eles foram bem criteriosos
1904. 1:15:21processo seletivo, fizeram teste, ele
1905. 1:15:22passou. E aí você tá no segundo emprego
1906. 1:15:24agora na aliança?
1907. 1:15:26>> Isso.
1908. 1:15:27>> Remoto.
1909. 1:15:27>> Trabalhei e remoto. O primeiro foi
1910. 1:15:29presencial em uma empresa de
1911. 1:15:31telecomunicações que vende internet e
1912. 1:15:34agora na aliança. Tô na aliança até hoje
1913. 1:15:36e pretendo ficar. [risadas]
1914. 1:15:39>> A galera gosta de ir lá, né? Você tá
1915. 1:15:41curtindo trabalhar lá?
1916. 1:15:43>> É uma empresa fora da curva. Perfeito.
1917. 1:15:45>> Que legal, cara.
1918. 1:15:46>> Na minha opinião. Perfeito.
1919. 1:15:47>> Gosto muito do Elton. Welton tá mudando
1920. 1:15:49vidas aí. Eu fico feliz também de poder
1921. 1:15:51est
1922. 1:15:52>> próximo dele. E tem muito aluno meu aí
1923. 1:15:54na aliança, hein?
1924. 1:15:55>> Inclusive, mandar um abraço pro Eer,
1925. 1:15:59>> que deve assistir aí, mandar um abraço
1926. 1:16:00para você e agradecer. Também tem o
1927. 1:16:02Marcos também que foi aluno do do
1928. 1:16:04Rodolfo que trabalha comigo hoje.
1929. 1:16:05>> Ah, o Marquinho tá lá.
1930. 1:16:06>> O Marcos tá lá, trabalho Marquinho.
1931. 1:16:09Legal, cara. E me diz uma coisa, você
1932. 1:16:13começou a estudar programação,
1933. 1:16:14participou da missão Programação do
1934. 1:16:15Zero, virou meu aluno, estudou seis
1935. 1:16:17meses, conseguiu seu primeiro emprego,
1936. 1:16:19agora tá no segundo emprego. O que que
1937. 1:16:21mudou da sua vida? Que que quem que era
1938. 1:16:24o Lucas lá no dia que participou da
1939. 1:16:26missão Programação do Zero? E quem que é
1940. 1:16:29o Lucas agora? O que que mudou?
1941. 1:16:32Rodolfo, o Lucas antes era um cara ali
1942. 1:16:35meio desanimado
1943. 1:16:36porque a gente tentava de tudo e não
1944. 1:16:39dava certo, mas foi a partir da
1945. 1:16:41programação, o seu evento, a programação
1946. 1:16:43do zero, que ali abriu minha mente, que
1947. 1:16:46a partir daí, hoje eu sou um cara novo
1948. 1:16:49em questão pessoal e profissional. Hoje
1949. 1:16:52eu tinha um sonho de casar, casei.
1950. 1:16:54>> Casar, parabéns. É isso, isso que eu
1951. 1:16:57tinha aquele medo de não conseguir
1952. 1:16:59sustentar a família, porque hoje é
1953. 1:17:00difícil. hoje. Aí a programação
1954. 1:17:03literalmente mudou minha vida em todos
1955. 1:17:05os aspectos.
1956. 1:17:07>> Caramba, já tem filho?
1957. 1:17:09>> Ainda não, mas pretendo.
1958. 1:17:11>> Legal, cara. E o que a galera gosta?
1959. 1:17:14Toda vez eu eu já olho pro chat toda vez
1960. 1:17:16o que a galera tá perguntando. Não
1961. 1:17:18precisa falar números, mas questão
1962. 1:17:19salarial, cara. Mudou, melhorou na
1963. 1:17:22programação, tá ganhando bem? O salário
1964. 1:17:24é legal, como que tá aí,
1965. 1:17:27>> cara? mudou e muito. Nem só em questão
1966. 1:17:30dos salários, os benefícios também são
1967. 1:17:31ótimos.
1968. 1:17:33Eu vou colocar aí o que eu recebi uns um
1969. 1:17:36quatro ou cinco vezes a mais.
1970. 1:17:38>> Caraca, velho.
1971. 1:17:40>> É, fora o os benefícios que tem plant
1972. 1:17:43saúde da alimentação, tem muitos
1973. 1:17:45benefícios que valem a pena também.
1974. 1:17:47>> Caraca, mano, que legal. E trabalho de
1975. 1:17:51casa?
1976. 1:17:51>> Trabalho de casa. Home office,
1977. 1:17:53>> maor coisa que existe.
1978. 1:17:55>> Eu gosto também, cara.
1979. 1:17:57Lucas, toda vez que eu faço evento,
1980. 1:17:59muita gente que tá começando, às vezes
1981. 1:18:01tá na faculdade, às vezes tá meio
1982. 1:18:03confuso com programação, eles ficam com
1983. 1:18:05pé atrás de pensar: "Pô, será que é para
1984. 1:18:06mim? Que conselho você daria para essa
1985. 1:18:08galera de um ex-vendedor de hambúrguer,
1986. 1:18:12de um cara que tentou de tudo um pouco e
1987. 1:18:15hoje é programador? Que conselho você
1988. 1:18:16daria para essa galera que ainda tá em
1989. 1:18:18cima do Moro, que fica se perguntando se
1990. 1:18:20consegue, se não consegue? Às vezes
1991. 1:18:21alguns chega no no conteúdo técnico, dá
1992. 1:18:24uma travada. Que conselho você dá para
1993. 1:18:26essa galera?
1994. 1:18:27>> Cara, o meu conselho é que tente
1995. 1:18:31a pessoa ficar ali sempre falando: "Ah,
1996. 1:18:32não consigo, não vai sair do lugar
1997. 1:18:34nunca. Tem que tomar ação." É a famosa
1998. 1:18:37frase da aliança divergente. Tem que
1999. 1:18:39tomar uma decisão de mudar sua vida e
2000. 1:18:41botar as cara. Se não investir, o melhor
2001. 1:18:45investimento que tem, ele é a própria
2002. 1:18:46pessoa. Você não investir em você,
2003. 1:18:48ninguém mais vai investir.
2004. 1:18:51>> É isso aí. Isso aí, cara. Olha, eu
2005. 1:18:55fiquei, eu eu tenho um orgulho muito
2006. 1:18:56grande de pessoas como você. Eh, eu acho
2007. 1:18:58que é um presente muito grande de Deus
2008. 1:19:00eu encontrar pessoas como vocês, de
2009. 1:19:03confiarem no meu trabalho. E assim, é
2010. 1:19:05[roncando] o que eu sempre falo, não é
2011. 1:19:07vir participar do evento, entrar no Não
2012. 1:19:10é sobre isso, é sobre não desistir. Eu
2013. 1:19:12fico muito feliz quando vocês têm
2014. 1:19:13resultado. Eu fico muito triste quando
2015. 1:19:15eu vejo uma pessoa que vem aqui na
2016. 1:19:17primeira aula do evento, aí não aparece
2017. 1:19:18na segunda, vem na primeira, na segunda,
2018. 1:19:21não aparece na terceira. ou às vezes faz
2019. 1:19:23o evento inteiro, mas aí na outra semana
2020. 1:19:25para. Eu fico muito feliz em ver pessoas
2021. 1:19:27que nem você, Lucas, que começaram, que
2022. 1:19:29acreditaram, que respeitaram o processo,
2023. 1:19:33porque as pessoas são muito
2024. 1:19:34imediatistas. Você vê, se você for para
2025. 1:19:36uma faculdade, é 4 anos estudando. Aí
2026. 1:19:39quando eu chego aqui e falo que em seis
2027. 1:19:40meses estudando no seu ritmo da sua
2028. 1:19:42casa, você vai conseguir mudar sua vida,
2029. 1:19:44as pessoas desistem na segunda aula.
2030. 1:19:47Não, não faz sentido para mim isso.
2031. 1:19:49>> Então, eu queria muito que você que tá
2032. 1:19:51assistindo a gente seguisse o exemplo do
2033. 1:19:52Lucas,
2034. 1:19:53>> falasse assim: "Eu vou dedicar seis
2035. 1:19:54meses da minha vida pra programação e
2036. 1:19:56vou fazer isso dar certo". Alguns
2037. 1:19:58conseguem até em menos tempo, mas o
2038. 1:20:00ponto é não desistir, cara. E eu queria
2039. 1:20:03saber quais que são os planos pro
2040. 1:20:05futuro, quais que são as próximas metas,
2041. 1:20:06que que você pensa pro futuro, o que que
2042. 1:20:08você quer para você, paraa sua família e
2043. 1:20:10como que a programação tá envolvida em
2044. 1:20:11tudo isso.
2045. 1:20:12>> Rodolfo, eh, a minha próxima meta é
2046. 1:20:14comprar um carro. Desde novinho eu tenho
2047. 1:20:16vontade de ter um carro, então tô tô
2048. 1:20:20focado nessa meta de comprar um carro e
2049. 1:20:22as outras metas também é viajar
2050. 1:20:25e a programação tá contribuindo com
2051. 1:20:27muito.
2052. 1:20:28>> Legal, cara. Ó, e pega pega os cursos de
2053. 1:20:31investimento lá na nossa plataforma,
2054. 1:20:34aprende a investir esse seu dinheiro,
2055. 1:20:36faz seu dinheiro multiplicar, não entra
2056. 1:20:38em dívida aí, porque às vezes eu vejo
2057. 1:20:40uns programador, amigo meu, que ganha
2058. 1:20:4220, 30.000 e se enfim dívida. Você tá
2059. 1:20:44ganhando bem, então agora é hora de
2060. 1:20:46controlar, investir e aproveitar aí com
2061. 1:20:49a família, cara.
2062. 1:20:49>> Exato. Exato. Tem que ter educação
2063. 1:20:51financeira também. Não adianta ganhar
2064. 1:20:5315, 20, 30.000 sem ter educação
2065. 1:20:55financeira, senão você quebra rapidinho
2066. 1:20:56também.
2067. 1:20:58>> Cara, prazerzão, Lucas. Eu te vejo
2068. 1:20:59sempre lá na comunidade do Dev Club,
2069. 1:21:02você pode contar comigo. Manda um abraço
2070. 1:21:04lá pra galera do Dev Club que trabalha
2071. 1:21:05na aliança. Tem bastante gente lá na
2072. 1:21:07aliança. Ixe, tem o Marquinho, Régis,
2073. 1:21:09eh, o Emanuel, tem o Rafa, tem mais
2074. 1:21:13gente. Desculpa que eu esqueci, mas a a
2075. 1:21:15Aliança é um é uma grande parceira aqui
2076. 1:21:17do Dev Club. Eh, eu recebo mensagem,
2077. 1:21:19muita mensagem do Elder, do Renato,
2078. 1:21:21sempre estão pedindo profissionais e eu
2079. 1:21:23fico feliz também que eles confiam no
2080. 1:21:24nosso trabalho e estão contratando
2081. 1:21:26nossos alunos. Então você que se tornar
2082. 1:21:29meu aluno, participe bastante da
2083. 1:21:31comunidade que a gente tá sempre pegando
2084. 1:21:32gente lá para indicar paraas várias
2085. 1:21:34alianças é só uma das empresas que a
2086. 1:21:36gente indica. Tem várias empresas que
2087. 1:21:37confiam na gente. Cara, obrigadão por
2088. 1:21:40ter vindo aí falar conosco, foi um
2089. 1:21:42prazer. Continue mandando notícias. Eu
2090. 1:21:45gosto muito de ver o futuro dos meus
2091. 1:21:47alunos brilhando. Gosto de ver eles
2092. 1:21:50progredindo. Estamos junto na missão.
2093. 1:21:53>> Precisar. Tô aí, cara.
2094. 1:21:54>> Digo mesmo.
2095. 1:21:56>> Valeu, Lucas. Valeu, Rodolfo.
2096. 1:21:58>> Valeu. Tchau. Tchau.
2097. 1:22:02>> Energias recarregadas agora. Bora lá.
2098. 1:22:04Bora lá. Bora lá. Você já entendeu?
2099. 1:22:07Ah,
2100. 1:22:09você já entendeu que estrutura HTML,
2101. 1:22:13vimos muito HTML ontem. Estilização,
2102. 1:22:17CSS. Eu sei que essa parte do CSS é uma
2103. 1:22:21novidade. Algumas pessoas acham difícil,
2104. 1:22:23mas calma, calma. Que eu falo para
2105. 1:22:25vocês, paciência. paciência. Tira um
2106. 1:22:28tempinho para estudar, para revisar o
2107. 1:22:30que que é isso, que é aquilo. Ficou com
2108. 1:22:32dúvida, olha as apostilas, só baixar,
2109. 1:22:34chama Giovana, chama o suporte. Eu já
2110. 1:22:36falei isso 30 vezes, eu sei, mas eu vou
2111. 1:22:38falar mais 30 para você não desistir. E
2112. 1:22:40aí agora a gente vai pro JavaScript, tá?
2113. 1:22:43Por que JavaScript? O JavaScript é o que
2114. 1:22:46dá inteligência à nossa aplicação, é o
2115. 1:22:48que faz as coisas funcionarem. Sem
2116. 1:22:50JavaScript não tem internet. Só para
2117. 1:22:53você ter uma ideia, 98% e5 da internet é
2118. 1:22:57JavaScript. JavaScript tá em todo lugar
2119. 1:22:59da sua vida e eu já vou te provar isso,
2120. 1:23:01tá? A gente vai entrar em JavaScript
2121. 1:23:03hoje, amanhã tem mais JavaScript e
2122. 1:23:05amanhã tem IA. A gente vai injetar uma
2123. 1:23:07IA dentro da nossa aplicação. E como eu
2124. 1:23:09tava falando para vocês, JavaScript tá
2125. 1:23:11em todo lugar. 98%,5
2126. 1:23:15do site da internet tem JavaScript.
2127. 1:23:17Rodolfo, mas que que o JavaScript faz na
2128. 1:23:18internet? Faz isso aqui, ó. Vou pegar um
2129. 1:23:20site aqui aleatório, por exemplo, a
2130. 1:23:25Amazon. A gente tá aqui na Amazon. Eu tô
2131. 1:23:27aqui na Amazon. Tudo que você tá
2132. 1:23:29enxergando aqui é o quê? É HTML SSS.
2133. 1:23:33Então, eu tenho aqui, ó, um título. Um
2134. 1:23:36título. Esse título aqui é o quê? É um
2135. 1:23:38HTML. O CSS foi lá e colocou uma cor,
2136. 1:23:41organizou. Só que o que que acontece
2137. 1:23:43aqui? Você vai clicar no fone de ouvido
2138. 1:23:47e aí você quer comprar. Que que você
2139. 1:23:49faz? você clica aí adicionar ao
2140. 1:23:50carrinho. É o JavaScript que tem a
2141. 1:23:53inteligência de pegar o produto que você
2142. 1:23:54quer e colocar no carrinho. A hora que
2143. 1:23:56você clicar em comprar, você precisa
2144. 1:23:58colocar o quê? Os seus dados, seu
2145. 1:24:00endereço e os dados do seu cartão. É o
2146. 1:24:02JavaScript que vai pegar os dados do seu
2147. 1:24:05endereço e vai verificar se na sua casa
2148. 1:24:07dá para entregar. O JavaScript que vai
2149. 1:24:09pegar os dados do seu cartão e vai até o
2150. 1:24:12servidor e vai falar: "Ô, servidor, tudo
2151. 1:24:15bom? Aqui é o Java, JavaScript.
2152. 1:24:16JavaScript, ô JavaScript aqui, ó. Ó, ó,
2153. 1:24:19ó. Eu, o JavaScript, quero saber se o
2154. 1:24:21Rodolfo tem crédito aqui, ó, tem o
2155. 1:24:22cartão dele tá com limite para comprar
2156. 1:24:25esse óculos aqui. Aí o servidor vai
2157. 1:24:27responder, o JavaScript volta pra
2158. 1:24:28aplicação e diz se a compra tá aprovada,
2159. 1:24:31se a compra foi negada e assim por
2160. 1:24:33diante. O JavaScript ele vai dar
2161. 1:24:36inteligência à nossa aplicação. Por isso
2162. 1:24:37que eu falo para você, o JavaScript é o
2163. 1:24:40motor, a inteligência da aplicação. Se
2164. 1:24:43você tivesse só HTML, CSS, isso aqui
2165. 1:24:45seria oco, sem graça. não faria nada. Só
2166. 1:24:49que a internet ela ganha essa
2167. 1:24:52inteligência de você poder navegar,
2168. 1:24:54comprar, vender, fazer várias ações
2169. 1:24:57dentro de um site. Graças ao JavaScript.
2170. 1:25:00Quando você digita login e senha, é o
2171. 1:25:02JavaScript que pega seu login e sua
2172. 1:25:04senha, vai até o servidor e fala: "Ô
2173. 1:25:06servidor, tudo bom? Tudo bom,
2174. 1:25:08Instagram?" Ó, o Rodolfo tá querendo
2175. 1:25:10logar. Esse aqui é o login dele e ele
2176. 1:25:12falou que essa é a senha. Posso logar? o
2177. 1:25:14servidor responde, o JavaScript volta e
2178. 1:25:17deixa você logar ou não. O JavaScript
2179. 1:25:19traz toda essa inteligência paraa sua
2180. 1:25:21aplicação. Mas olha só que legal e olha
2181. 1:25:23só como que o Rodolfo pensa no melhor
2182. 1:25:26para vocês. O JavaScript ele é a
2183. 1:25:28linguagem de programação com mais
2184. 1:25:30oportunidades no mercado. Eu mostrei pra
2185. 1:25:32vocês ontem e vou mostrar de novo que o
2186. 1:25:35Stack Overflow, que é um site de
2187. 1:25:38programadores, todo ano eles fazem
2188. 1:25:40pesquisa e aí há muitos e muitos anos o
2189. 1:25:43JavaScript sempre fica em primeiro lugar
2190. 1:25:46da tecnologia mais utilizada no mundo.
2191. 1:25:48Tem muita, muita, muita vaga para
2192. 1:25:50JavaScript. Ó, se você for lá no
2193. 1:25:52LinkedIn e digitar JavaScript, você vai
2194. 1:25:54ver que hoje temos mais de 1 milhão de
2195. 1:25:57vagas abertas para JavaScript. Olha só
2196. 1:26:00que legal. E sabe por que tem tanta vaga
2197. 1:26:02para JavaScript? Porque dá para fazer
2198. 1:26:04tudo com JavaScript. Dá para fazer
2199. 1:26:06sites, dá, mas também dá para usar no
2200. 1:26:08servidores, o LinkedIn, a NASA, o
2201. 1:26:13Twitter, Netflix,
2202. 1:26:15quando eu trabalhei no Santander, no BTG
2203. 1:26:17Pactual, empresas do mundo todo usam
2204. 1:26:20JavaScript nos seus servidores,
2205. 1:26:21Microsoft e por aí vai. Então,
2206. 1:26:25JavaScript, dá para você criar sites,
2207. 1:26:27sistemas web, frontend, dá, mas
2208. 1:26:30JavaScript também dá para você criar
2209. 1:26:33servidores, programas que rodam lá no
2210. 1:26:34servidores, os famosos back ends. Mas
2211. 1:26:37também dá para você fazer o que com
2212. 1:26:39JavaScript? Criar aplicativos de
2213. 1:26:42celular. Sim, vários aplicativos de
2214. 1:26:44celular que você usa no seu dia a dia
2215. 1:26:46foram feitos com JavaScript. Por
2216. 1:26:48exemplo, o
2217. 1:26:51Instagram foi feito com JavaScript,
2218. 1:26:53Facebook foi feito com JavaScript, eh,
2219. 1:26:55Amazon, aplicativo da Amazon,
2220. 1:26:57PlayStation, Puma, NFL, Tesla e por aí
2221. 1:27:02vai. Milhares e milhares e milhões de
2222. 1:27:04aplicativos que você usa aí no seu
2223. 1:27:06celular, que você usa aí no seu celular,
2224. 1:27:08foram feitos com JavaScript. Olha só,
2225. 1:27:11ah,
2226. 1:27:12além disso, JavaScript dá para fazer
2227. 1:27:14programas de computador, sabe? O VS Code
2228. 1:27:18está usando o VS Code, né? Está usando o
2229. 1:27:20VS Code, não tá? Foi feito com
2230. 1:27:22JavaScript. A lista de aplicações que
2231. 1:27:24foram feitas com JavaScript para
2232. 1:27:25computadores é enorme também. Por
2233. 1:27:27exemplo, você tem aqui, ó, o Discord,
2234. 1:27:31JavaScript, Dropbox, Cloud, One
2235. 1:27:34Password, Figma, Loom, Notion, É Postm
2236. 1:27:38Trello, Slack, VS Code e por aí vai.
2237. 1:27:42Twitch, várias aplicações foram feitas
2238. 1:27:45com JavaScript, ou seja, a gente vai
2239. 1:27:47aprender agora uma linguagem de
2240. 1:27:48programação. E com essa linguagem de
2241. 1:27:49programação você pode fazer sites,
2242. 1:27:51servidores, aplicativos, programas de
2243. 1:27:52computador e muito mais coisas.
2244. 1:27:55JavaScript já é utilizada também em
2245. 1:27:56robôs. Dá para você programar robôs com
2246. 1:27:59JavaScript. Olha só o poder dessa
2247. 1:28:01linguagem de programação.
2248. 1:28:03Vamos lá. Vamos lá aprender JavaScript.
2249. 1:28:06Beleza? Vamos dar uma pausa ali no CSS.
2250. 1:28:09Tire tempo para revisar o CSS. E aí a
2251. 1:28:12gente viu que para matar HTML era isso,
2252. 1:28:15para matar CSS é isso. E para você
2253. 1:28:17dominar JavaScript você precisa aprender
2254. 1:28:20duas coisas: o que são variáveis e o que
2255. 1:28:23são funções. Dominando o que são
2256. 1:28:25variáveis e funções, você domina o
2257. 1:28:27JavaScript. Para isso, eu vou chamar
2258. 1:28:29meus colegas de palco aqui. Eh, um já tá
2259. 1:28:32aqui, eu vou chamar o outro. Equipe,
2260. 1:28:33traz para mim. É o segundo. O segundo.
2261. 1:28:36Pera aí. Equipe tá trazendo aqui para
2262. 1:28:37mim. Pera aí. traz aqui, equipe.
2263. 1:28:40Chegou aqui, ó. Ah,
2264. 1:28:44ah,
2265. 1:28:46vamos entender o primeiro conceito que é
2266. 1:28:48variáveis. Só detalhe importante antes
2267. 1:28:51da gente continuar. Detalhes
2268. 1:28:53importantes. Primeiro, tudo que eu estou
2269. 1:28:55explicando aqui, adivinha que que minha
2270. 1:28:57equipe fez? Adivinha? Lá na Davflix vai
2271. 1:29:00ter apostila. Então, vai ter uma super
2272. 1:29:02apostila. Deixa eu até mostrar aqui para
2273. 1:29:03vocês, ó. Vai ter uma super apostila de
2274. 1:29:06JavaScript. Então, tudo que eu explicar
2275. 1:29:08aqui, ó, o que é JavaScript, para que
2276. 1:29:11serve, tãã, empresas que usam, olha,
2277. 1:29:13tudo, tudo, tudo variável. A gente vai
2278. 1:29:15aprender o que é variável. Olha só, tudo
2279. 1:29:17que eu explicar aqui tem na super
2280. 1:29:19apostila de JavaScript, combinado?
2281. 1:29:23Beleza? Outro ponto importante, HTML é
2282. 1:29:26uma linguagem de marcação, não é
2283. 1:29:28linguagem de programação. CSS é uma
2284. 1:29:31tecnologia que estiliza o HTML, também
2285. 1:29:34não é linguagem de programação. Agora,
2286. 1:29:35JavaScript é uma linguagem de
2287. 1:29:37programação. A partir de agora você vai
2288. 1:29:38ser um programador, porque você vai
2289. 1:29:39programar, você vai aprender uma
2290. 1:29:41linguagem de programação. Outro ponto,
2291. 1:29:43JavaScript não é Java. Java não tem nada
2292. 1:29:46a ver com JavaScript. Não fale que você
2293. 1:29:47aprendeu Java. Java e JavaScript tem o
2294. 1:29:49nome parecido, mas são tecnologias
2295. 1:29:52completamente diferentes, não tem nada
2296. 1:29:54nada a ver uma com a outra, tá? É que
2297. 1:29:56nem Ford Volkswagen, tem nada a ver. O
2298. 1:29:58nome pode parecer JavaScript de Java,
2299. 1:30:01mas não tem nada a ver. São diferentes,
2300. 1:30:04combinado? Só o nome que é parecido.
2301. 1:30:06Beleza? Então agora a gente vai aprender
2302. 1:30:08uma linguagem de programação. É isso que
2303. 1:30:09vai garantir o seu emprego, isso que vai
2304. 1:30:11garantir dinheiro para você. Porque um
2305. 1:30:14programador programa e para programar
2306. 1:30:15ele precisa
2307. 1:30:17saber, fala comigo no chat, uma
2308. 1:30:20linguagem de programação. Galera, eu
2309. 1:30:22esqueci de falar, mas tá pago muito
2310. 1:30:25hashtag tá pago. Tão gostando da aula?
2311. 1:30:27Espero que sim, porque eu tô dando o meu
2312. 1:30:29melhor. Eu tô fazendo de uma forma
2313. 1:30:31simples para que você entenda, tá? Outro
2314. 1:30:33ponto muito, muito, muito importante é
2315. 1:30:36sobre o JavaScript.
2316. 1:30:39Muito importante. A gente vai aprendendo
2317. 1:30:41conceito por conceito e as coisas vão se
2318. 1:30:43conectando. A gente tá na nossa segunda
2319. 1:30:45aula, até a quarta aula você vai ver que
2320. 1:30:47tudo vai se conectar, tudo vai fazer
2321. 1:30:50sentido. Você precisa ter paciência. Por
2322. 1:30:53último, pra gente ir lá pra explicação
2323. 1:30:55de variável, muitas pessoas ouvem o
2324. 1:30:57seguinte: "Cara, você tem que ficar
2325. 1:30:59muito bom de lógica de programação e
2326. 1:31:01algoritmo para você ser um bom
2327. 1:31:02programador." A gente já vai entender o
2328. 1:31:04que que é lógica de programação e
2329. 1:31:05algoritmo, tá? Segura aí que você vai
2330. 1:31:07ficar muito bom de lógica de programação
2331. 1:31:08e algoritmo e você vai ver que essas
2332. 1:31:09palavras são chatas, mas é muito
2333. 1:31:12simples. Beleza? Então, para aprender
2334. 1:31:14JavaScript, você virar um programador,
2335. 1:31:15você tem que entender o que é variáveis
2336. 1:31:17e o que são funções. A gente vai
2337. 1:31:18aprender isso agora. Primeiro conceito,
2338. 1:31:21variáveis. O que que é variável? Imagina
2339. 1:31:22a segunda instituação para você gravar e
2340. 1:31:24nunca mais esquecer o que é variável.
2341. 1:31:28Acabou.
2342. 1:31:29Acabou. Toy Storbers, ficaram
2343. 1:31:31desempregados. Esse cara aqui muito
2344. 1:31:33inteligente, o Wood foi lá, estudou a
2345. 1:31:35programação, virou um programador,
2346. 1:31:36começou a ganhar bem o Buz Lighter
2347. 1:31:39na não desmerecendo, mas ele foi
2348. 1:31:41trabalhar como caixa no banco, ganhando
2349. 1:31:43pouco, trabalhando muito. E tudo bem,
2350. 1:31:45então o seu Buzl tava lá no banco
2351. 1:31:47trabalhando como caixa e o Wood pegou
2352. 1:31:50seu primeiro salário como programador.
2353. 1:31:52Ó, ó o Wood, ó, ó o Wood, ó. Wood, Wood
2354. 1:31:55tá ostentando.
2355. 1:31:58Ah, contando uns plaquias de 100. Vocês
2356. 1:32:02lembram dessa música? É muito antigo,
2357. 1:32:03hein? Contando plaquê de 100 dentro de
2358. 1:32:06um Citroen. Você lembra dessa? Meu Deus
2359. 1:32:09do céu. Vamos lá. Vamos lá, Paula. E aí
2360. 1:32:11o Wood pegou o dinheiro dele
2361. 1:32:14e foi lá no caixa e chegou. O B, tudo
2362. 1:32:17bom? Tá aqui, ó. Quero depositar o
2363. 1:32:19dinheiro. Vamos entender uma situação
2364. 1:32:22hipotética. Você ou alguém vai no banco
2365. 1:32:24e deposita o dinheiro. Imagine que se o
2366. 1:32:26caixa do banco pegasse o dinheiro e
2367. 1:32:28simplesmente jogasse no cofre do banco.
2368. 1:32:30Pegou seu dinheiro e jogou no cofre do
2369. 1:32:31banco. Como que o banco saberia
2370. 1:32:35qual é seu dinheiro? Afinal, tem um
2371. 1:32:37monte de dinheiro lá dentro do banco.
2372. 1:32:39Mas qual que é o dinheiro? É seu? Qual
2373. 1:32:40que é do outro? Do fulano, ciclano. Como
2374. 1:32:42que Como que o banco sabe qual que é o
2375. 1:32:44seu dinheiro? Como que o banco sabe?
2376. 1:32:45Galera, coloca aí no chat. Como que o
2377. 1:32:47banco descobre qual que é seu dinheiro?
2378. 1:32:49Como que o banco faz para saber quem que
2379. 1:32:51qual que é o seu dinheiro? Você tem uma
2380. 1:32:54conta, o número de conta é só seu.
2381. 1:32:57Então, quando você vai depositar
2382. 1:32:58dinheiro no banco,
2383. 1:33:00o caixa pede o número da sua conta e aí
2384. 1:33:02ele deposita o dinheiro lá. Aquel
2385. 1:33:05espacinho lá no banco é só seu. Hoje em
2386. 1:33:08dia os bancos são virtuais, não é
2387. 1:33:10digitais. Então, lá no banco tem um
2388. 1:33:13espacinho lá no banco de dados que é seu
2389. 1:33:16e aí é o número da sua conta e lá o
2390. 1:33:17banco sabe quanto que você tem de
2391. 1:33:18dinheiro. Na programação é muito
2392. 1:33:20parecido. Por quê? A gente vai guardar
2393. 1:33:23várias informações no meio do caminho.
2394. 1:33:24Exemplo, você chegou na Amazon e você
2395. 1:33:27quer comprar um produto e você adicionou
2396. 1:33:29o carrinho. Aonde que a Amazon vai
2397. 1:33:31guardar essa informação no site? Vai
2398. 1:33:33jogar em qualquer lugar? Não. Você
2399. 1:33:34precisa de um lugar para guardar os
2400. 1:33:36dados do carrinho. Isso é uma variável.
2401. 1:33:39É um pedacinho da memória do computador
2402. 1:33:42que você separa e você guarda uma coisa
2403. 1:33:44ali. Então você tem um espacinho, você
2404. 1:33:46pode dar o nome que você quiser, você
2405. 1:33:47pode chamar de abacate e você pode
2406. 1:33:49colocar o que você quiser dentro do
2407. 1:33:50abacate. E a hora que você quiser ver o
2408. 1:33:52que tem dentro do abacate, você chama o
2409. 1:33:53abacate e consegue ver. Simples,
2410. 1:33:56tranquilo. Vamos ver na prática, tá? Tá,
2411. 1:33:59Rodolfo, mas aonde que eu vou criar
2412. 1:34:01minha variável? Aonde? É aqui no CSS? é
2413. 1:34:05aqui no HTML ou vamos ser os
2414. 1:34:07programadores da NASA? Lembre-se, eh,
2415. 1:34:10inclusive até mostrei o vídeo para você.
2416. 1:34:11Eu já fui pro Vale do Silício, conheci
2417. 1:34:14vários programadores lá, passei bastante
2418. 1:34:15tempo lá dentro da Apple, Nvidia, eh
2419. 1:34:17Microsoft, eh
2420. 1:34:21a gente foi na Apple, Nvidia, Microsoft,
2421. 1:34:25eh, Amazon, Google e conversar com os
2422. 1:34:29programadores, até fazer amizade com os
2423. 1:34:30programadores. Eu aprendi muita coisa e
2424. 1:34:32eu sempre trago isso para vocês. Eu tô
2425. 1:34:33sempre antenado. Inclusive, por exemplo,
2426. 1:34:35o diretor de tecnologia da Apple, o
2427. 1:34:37Lucas é brasileiro, conheci e fiz
2428. 1:34:38amizade com ele. Ele já até mentorou
2429. 1:34:40meus alunos. De vez em quando ele vem
2430. 1:34:41cá, faz uma call ali com meus alunos no
2431. 1:34:43Zoom. Então, esses contatos eles me
2432. 1:34:45deram experiência de entender o que o
2433. 1:34:48mundo da tecnologia usa e da do jeito
2434. 1:34:50certo. E aí toda grande empresa, ela não
2435. 1:34:53vai jogar os o JavaScript aqui junto com
2436. 1:34:57a HTML. Ela vai criar um novo arquivo
2437. 1:34:59que a gente vai chamar de scripts.js.
2438. 1:35:02Por que scripts.js?
2439. 1:35:04Porque grandes empresas organizam as
2440. 1:35:07coisas e você vai ver que em grandes
2441. 1:35:08projetos o HTML chama index, o Style
2442. 1:35:11chama Styles, o arquivo do CSS, e o
2443. 1:35:13JavaScript chama scripts, tá certo? E
2444. 1:35:16aí, que que a gente vai fazer?
2445. 1:35:18Lembre-se que o HTML ele não vai
2446. 1:35:20magicamente descobrir que tem um arquivo
2447. 1:35:23JavaScript. E aí, o que que a gente faz
2448. 1:35:25aqui no final? Talvez alguém fala: "Ah,
2449. 1:35:28vamos colocar lá no no head, vamos
2450. 1:35:29colocar lá no head". A gente não vai
2451. 1:35:31colocar no head por um motivo, tá?
2452. 1:35:34O HTML ele sempre carrega de cima para
2453. 1:35:36baixo, só que o JavaScript ele precisa
2454. 1:35:39ser carregado depois do HTML do CSS. Por
2455. 1:35:43quê? O JavaScript precisa que a tela
2456. 1:35:45esteja montada. Isso acontece em uma
2457. 1:35:47fração de segundo, mas o JavaScript
2458. 1:35:49precisa que a tela esteja montada para
2459. 1:35:51depois ele vir ler tudo que tá ali na
2460. 1:35:53tela para poder fazer o que ele precisa
2461. 1:35:55fazer, tá? Então primeiro eu executo o
2462. 1:35:57CSS, o HTML para depois chamar o
2463. 1:36:00JavaScript. Por isso que a gente vai
2464. 1:36:02chamar o JavaScript depois do body lá
2465. 1:36:05depois do body. Depois que carregou
2466. 1:36:07tudo, chama o JavaScript. Para isso, a
2467. 1:36:09gente vai colocar uma tag chamada
2468. 1:36:10script. Dessa forma, abre e fecha. E
2469. 1:36:13aqui na tag de abertura, ó, a gente vai
2470. 1:36:16colocar um um. Lembra? Nas tags, a gente
2471. 1:36:19tem o quê? Os
2472. 1:36:22atributos.
2473. 1:36:24Então vamos colocar um atributo aqui,
2474. 1:36:27OK? Beleza? Chamado s. SRC é abreviação
2475. 1:36:32de source. Source em inglês é origem, ou
2476. 1:36:35seja, qual que é a origem do seu
2477. 1:36:37arquivo? Onde que ele tá? Então eu
2478. 1:36:39coloco o src, a gente já tá acostumado
2479. 1:36:40com o igual e o aspas duplas. E a gente
2480. 1:36:43coloca o nome dele, ó. Ó, coloquei um
2481. 1:36:45szinho, ele já completa. E dessa forma
2482. 1:36:47aqui,
2483. 1:36:49dessa forma aqui, com a minha tag
2484. 1:36:51script, eu conecto o HTML com o
2485. 1:36:55JavaScript. OK? E aí agora vamos criar a
2486. 1:36:58nossa primeira variável. para eu criar
2487. 1:37:00uma variável. Até vou colocar minha
2488. 1:37:02colinha aqui, ó. Eu até não falei para
2489. 1:37:04vocês, mas isso aqui são comentários,
2490. 1:37:05tá? São trechos de código que o que não
2491. 1:37:08vai ser executado. E aí, que que é a
2492. 1:37:11variável? Variável você já viu que é um
2493. 1:37:13pedacinho de memória que eu posso
2494. 1:37:17guardar
2495. 1:37:20que eu quiser. Acabando a aula, eu já
2496. 1:37:22mando meu código para você. Então, vamos
2497. 1:37:23criar a primeira variável. Para criar a
2498. 1:37:24variável, eu escrevo a palavrinha let,
2499. 1:37:27por exemplo, se eu quiser letac, tá? Não
2500. 1:37:30posso dar espaço, abacate verde, não
2501. 1:37:32posso fazer isso, tá? Beleza? Letac,
2502. 1:37:35coloco igual. E tudo que eu colocar
2503. 1:37:37depois do igual, ele vai colocar dentro
2504. 1:37:39da variável. Se eu colocar lá lá, lá, lá
2505. 1:37:41dentro vai ter lá lá lá lá. Se eu
2506. 1:37:43colocar um número,
2507. 1:37:46então se eu criar a variável nome
2508. 1:37:50Rodolfo, vai ter a variável nome
2509. 1:37:53Rodolfo. Ah, legal. E sabe o que que é
2510. 1:37:56legal também? Eu posso eh até guardar
2511. 1:37:58coisas do HTML. Se eu quiser, se eu
2512. 1:38:01quiser
2513. 1:38:03clicar nesse botão
2514. 1:38:06e fazer alguma coisa, por exemplo, eu
2515. 1:38:08quero clicar nesse botão e eu quero que
2516. 1:38:09abra alguma coisa. O JavaScript precisa
2517. 1:38:12saber quem é esse botão. E para saber
2518. 1:38:14quem é esse botão, eu preciso guardar
2519. 1:38:16esse botão numa variável. Olha só que
2520. 1:38:19interessante, uma variável pode guardar
2521. 1:38:21o que eu quiser. Ó, guardei aqui o
2522. 1:38:23Rodolfo, posso guardar um número e eu
2523. 1:38:25posso guardar até o botão. Por que que
2524. 1:38:26eu guardo o botão? Para eu saber quem é
2525. 1:38:28o botão lá no HTML e aí eu fazer o que
2526. 1:38:30eu quiser com esse botão, tá certo? E
2527. 1:38:32aí, antes da gente continuar e guardar,
2528. 1:38:35por exemplo, o botão, a gente vai fazer
2529. 1:38:37o seguinte. Eu quero ver na tela, será
2530. 1:38:39que funcionou? Tem um cara chamado
2531. 1:38:42alert. Alerta. Que que é o alerta? Bem,
2532. 1:38:45tudo que eu coloco aqui dentro do
2533. 1:38:46alerta, ó, eu faço o seguinte. Eu
2534. 1:38:48escrevo alert
2535. 1:38:50ponto aqui, ó, as como que chama? Os
2536. 1:38:53parênteses. E aí eu posso colocar a
2537. 1:38:55minha variável aqui dentro. Então,
2538. 1:38:56imagine o seguinte, a minha variável
2539. 1:38:59é como se fosse uma caixa, tá? E aí
2540. 1:39:02dentro da minha caixa, eu posso guardar
2541. 1:39:04o que eu quiser.
2542. 1:39:06Eu quero guardar o Rodolfo. Eu posso
2543. 1:39:11guardar o número, eu posso guardar o que
2544. 1:39:12eu quiser. E toda vez que eu quiser ver
2545. 1:39:13o que tem dentro da minha caixa, eu
2546. 1:39:14posso chamar, por exemplo, o alert. Tem
2547. 1:39:16outras formas também. E é basicamente
2548. 1:39:18chamar o nome da variável que a gente
2549. 1:39:20consegue ver o que tem dentro dela.
2550. 1:39:22Beleza? Coloquei o alert. Alert nome e
2551. 1:39:24olha só o que que vai acontecer agora.
2552. 1:39:26Olha só, quando eu abri a minha
2553. 1:39:28aplicação, ó. Ó, tá vendo, ó? Ele deu um
2554. 1:39:30alerta, ó. alerta e colocou o que tem
2555. 1:39:32dentro da variável. Beleza? Se aqui
2556. 1:39:34tivesse abacate,
2557. 1:39:39ah, abacate,
2558. 1:39:42vou salvar. Aí ele mostraria aqui, ó,
2559. 1:39:45abacate, tá certo? Beleza. Então, já
2560. 1:39:48entendemos. Tem outra forma de eu ver o
2561. 1:39:50que tá dentro da da variável. Tem um
2562. 1:39:51cara chamado console.l log. Eu coloco
2563. 1:39:54aqui os parênteses também. E aí eu
2564. 1:39:56coloco o nome aqui. E aí ele vai mostrar
2565. 1:39:58também na tela, só que de uma forma
2566. 1:40:00diferente. Então eu tenho minha
2567. 1:40:01variável, eu escrevo let e eu posso ter
2568. 1:40:03várias. Eu posso e por exemplo
2569. 1:40:05sobrenome. Então eu vou ter o nome
2570. 1:40:07Rodolfo, sobrenome Mori. Então vou ter
2571. 1:40:11aqui, ó, Rodolfo More. Tenho duas
2572. 1:40:12variáveis. Vou salvar. E aí cadê? Aonde
2573. 1:40:16que mostra na tela? Para ver na tela, eu
2574. 1:40:18clico com o botão direito.
2575. 1:40:20Inspecionar. Inspecionar. Tá. Lembra que
2576. 1:40:24o inspecionário a gente viu os
2577. 1:40:25elementos, mas tem um campo chamado
2578. 1:40:27console, ó, console.log. E olha aqui,
2579. 1:40:30olha aqui. Ah, olha o Rodolfo. Por quê?
2580. 1:40:33Eu pedi para ele colocar na tela. Se eu
2581. 1:40:35quiser ver o sobrenome, eu coloco
2582. 1:40:37console.log.
2583. 1:40:40Sobrenome.
2584. 1:40:43Hum.
2585. 1:40:45Legal. Então, esse é o primeiro
2586. 1:40:46conceito, tá? Mas para que que eu tenho
2587. 1:40:48que saber sobre variável? Bem, guarda
2588. 1:40:50essa informação da variável. Por que que
2589. 1:40:52a gente tem que fazer a saber o que é
2590. 1:40:54variável? Lembra que eu falei para vocês
2591. 1:40:55sobre lógica
2592. 1:40:58de programação
2593. 1:41:00e algoritmo? São palavras bem feias. Mas
2594. 1:41:03o que que é lógica de programação?
2595. 1:41:04Lógica de programação é a eh basicamente
2596. 1:41:08lógica de programação é você saber a
2597. 1:41:11sequência,
2598. 1:41:17colocar assim, ó. Vai ficar muito fácil.
2599. 1:41:21E você entender. Algoritmo é a receita
2600. 1:41:24do bolo
2601. 1:41:26e lógica de programação é fazer o bolo.
2602. 1:41:31Como assim? Algoritmo é uma palavra
2603. 1:41:33muito feia, mas sabe o que que é
2604. 1:41:34algoritmo? Algoritmo é os passos para
2605. 1:41:37fazer alguma coisa. Quando você vai
2606. 1:41:39fazer um bolo, não tem os passos? pega a
2607. 1:41:41farinha, depois coloca, bata os ovos com
2608. 1:41:45a farinha e coloca leite. Eu não sei os
2609. 1:41:46passos, mas não tem um passo a passo. O
2610. 1:41:48passo a passo para fazer qualquer coisa
2611. 1:41:50chama algoritmo. É um nome feio, mas
2612. 1:41:53fazer café tem o algoritmo do café. Ah,
2613. 1:41:56esquente a água e coloque o o pó no
2614. 1:41:59coador, coloque. Então isso é um
2615. 1:42:00algoritmo, passo a passo para fazer
2616. 1:42:02algo, tá, Rodolfo? O algoritmo é o passo
2617. 1:42:04a passo para fazer algo. E lógica de
2618. 1:42:06programação. Lógica de programação é
2619. 1:42:08você saber
2620. 1:42:10os passos para fazer alguma coisa, saber
2621. 1:42:14a lógica que o computador trabalha e
2622. 1:42:16saber o passo a passo para fazer aquilo.
2623. 1:42:18Então agora o que que a gente quer
2624. 1:42:20fazer? Estamos juntando os pontos,
2625. 1:42:22entendemos que é uma variável, a gente
2626. 1:42:24precisa dessa ferramenta. Já entendi o
2627. 1:42:25que é algoritmo e lógica de programação.
2628. 1:42:28Na prática, vai ficar mais fácil. E
2629. 1:42:30agora a gente vai unir tudo isso aqui.
2630. 1:42:31Sabe por quê? Que que eu quero? Eu quero
2631. 1:42:35escrever algo eh quadrado
2632. 1:42:39azul e eu quero que quando eu clicar no
2633. 1:42:43botão, ele vá lá na IA, pegue o código e
2634. 1:42:47esse código eu coloco na tela e fica o
2635. 1:42:49quadrado azul bonito. Então agora a
2636. 1:42:52gente vai escrever o algoritmo
2637. 1:42:56com a lógica de programação para a gente
2638. 1:43:00botar a mão na massa. Por quê? Se a
2639. 1:43:03gente sair fazendo, vai dar ruim. Então
2640. 1:43:05vamos fazer nosso algoritmo aqui. Qual
2641. 1:43:06que é a primeira coisa que tem que
2642. 1:43:07acontecer? Bem, a primeira coisa que tem
2643. 1:43:09que acontecer é eu saber quando o botão
2644. 1:43:11foi clicado. Porque quando eu sei que o
2645. 1:43:13botão foi clicado, eu pego o texto aqui,
2646. 1:43:16mando pra IA, a IA me devolve o código,
2647. 1:43:20eu coloco o código na tela e coloco o
2648. 1:43:23quadrado aqui. Então vamos lá. Primeiro
2649. 1:43:25passo, saber que quem é o botão. Final,
2650. 1:43:30botão foi clicado, mas quem é o botão?
2651. 1:43:31Então, preciso saber quem é o botão.
2652. 1:43:33Depois que eu descobri quem é o botão,
2653. 1:43:35eu preciso saber quando o botão foi
2654. 1:43:40clicado. Quando eu descobrir quem é o
2655. 1:43:43botão e quando o botão for clicado, eu
2656. 1:43:45preciso saber quem é o eh texta. Que que
2657. 1:43:51é o text área? É esse carinha aqui, ó.
2658. 1:43:53Como assim saber quem ele é? Cara, eu tô
2659. 1:43:56aqui no JavaScript. O JavaScript tá
2660. 1:43:58conectado com HTML, mas eu tenho que
2661. 1:44:00falar, ó, cara, esse aqui é o botão, tá?
2662. 1:44:02Quando eu clicar nele, vai acontecer
2663. 1:44:04alguma coisa. Então, beleza, vamos lá
2664. 1:44:06pros passos. Então, eu preciso saber
2665. 1:44:08quem é o botão e saber quando ele foi
2666. 1:44:09clicado. Depois eu tenho que saber quem
2667. 1:44:11é o textária e
2668. 1:44:14preciso
2669. 1:44:16pegar o que tem dentro dele. Depois, que
2670. 1:44:19que eu tenho que fazer? Peguei o que tem
2671. 1:44:21dentro dele. Eu preciso enviar para a
2672. 1:44:24IA.
2673. 1:44:25Depois a IA vai responder. Eu preciso
2674. 1:44:27pegar a resposta da IA e
2675. 1:44:32colocar na tela.
2676. 1:44:35Olha como fazer as coisas de forma
2677. 1:44:37organizada fica muito melhor. A gente
2678. 1:44:39acabou de fazer foi o algoritmo
2679. 1:44:41algoritmo
2680. 1:44:43do nosso sistema. E para fazer esse
2681. 1:44:46algoritmo, a gente usou lógica de
2682. 1:44:48programação. Por que lógica de
2683. 1:44:50programação, cara? A gente seguiu passos
2684. 1:44:53lógicos. A gente seguiu passos que o
2685. 1:44:56comput, como o computador pensa, como o
2686. 1:44:57computador pensa? Não adianta você falar
2687. 1:44:59pro computador, clica no botão, ele vai
2688. 1:45:01falar assim: "Tá, mas que botão?
2689. 1:45:04Qual, como que o computador pensa?
2690. 1:45:07Preciso saber quem é o botão, pô. Já sei
2691. 1:45:09quem é o botão. Agora alguém clicou no
2692. 1:45:11botão. Opa, beleza, clicou. Que que eu
2693. 1:45:13faço agora? Que que eu faço agora? Então
2694. 1:45:16isso é a lógica de programação, você
2695. 1:45:18entender os passos, o passo a passo ali
2696. 1:45:21que o computador precisa para fazer o
2697. 1:45:23que você quer. E o algoritmo é você
2698. 1:45:25descrever esse passo a passo, combinado?
2699. 1:45:28E aí
2700. 1:45:30na aula de hoje a gente entendeu tudo
2701. 1:45:33isso. E aí, o que que a gente vai fazer
2702. 1:45:37amanhã? Amanhã a gente vai executar esse
2703. 1:45:40passo a passo. Para executar esse passo
2704. 1:45:42a passo, a primeira coisa que a gente
2705. 1:45:44precisava era dominar o conceito de
2706. 1:45:47variáveis que a gente já dominou. A
2707. 1:45:49gente já entendeu que variável é um
2708. 1:45:51pedacinho da memória que a gente pode
2709. 1:45:53guardar o que a gente quiser. Por
2710. 1:45:54exemplo, eu vou guardar aqui o letão.
2711. 1:45:58Rodolfo, mas como que eu falo que esse
2712. 1:46:01botão aqui eu vou guardar aqui? A gente
2713. 1:46:04vai parar bem aqui. Amanhã a primeira
2714. 1:46:06coisa que a gente vai fazer assim que
2715. 1:46:07começar a aula é descobrir quem é o
2716. 1:46:10botão. A gente vai guardar esse botão
2717. 1:46:12numa variável e aí quando clicar no
2718. 1:46:14botão, ó, quando clicar no botão, a
2719. 1:46:16gente vai saber disso, ó, e as coisas
2720. 1:46:18vão acontecer. A nossa aplicação, por
2721. 1:46:20enquanto, ela tá bonita, mas nada
2722. 1:46:21acontece quando eu clico no botão. Eu
2723. 1:46:23nem sei quem é esse botão no JavaScript.
2724. 1:46:25E é isso que a gente vai fazer amanhã.
2725. 1:46:27Você já entendeu que JavaScript é
2726. 1:46:31importante? Você já entendeu sobre CSS?
2727. 1:46:34Só que a gente vai ligar os pontos e eu
2728. 1:46:36preciso que você tenha paciência. Por
2729. 1:46:37quê? Se você tiver tempo depois entra
2730. 1:46:41ali no
2731. 1:46:43eh entra ali no YouTube e pesquisa
2732. 1:46:49o discurso do Steve Jobs em Stanford.
2733. 1:46:52Stanford é uma faculdade, ele ele fez um
2734. 1:46:53um discurso lá que ficou muito marc foi
2735. 1:46:55muito marcante aquele discurso do Steve
2736. 1:46:57Jobs e no discurso ele falou assim que é
2737. 1:46:59impossível você entender a vida olhando
2738. 1:47:02pra frente, que as coisas só fazem
2739. 1:47:04sentido quando você olha para trás.
2740. 1:47:06Então agora talvez esteja tudo confuso,
2741. 1:47:09só que lá no domingo à noite, quando a
2742. 1:47:10gente terminar nossas quatro aulas, tudo
2743. 1:47:12vai se encaixar, tudo vai fazer sentido.
2744. 1:47:14Só que você tem que ter paciência, vi
2745. 1:47:16nessa aula, vi na próxima. A aula de
2746. 1:47:18amanhã é extremamente importante porque
2747. 1:47:19amanhã a gente já vai conectar 95% dos
2748. 1:47:22pontos. Amanhã o HTML vai fazer mais
2749. 1:47:24sentido, o CSS vai fazer sentido, porque
2750. 1:47:26o JavaScript vai amarrar muita coisa que
2751. 1:47:29tá solta. Amanhã é como se fosse o
2752. 1:47:32último episódio da série. Sabe aquela
2753. 1:47:34série que tá tudo confuso? De repente no
2754. 1:47:35último episódio eles amarram tudo?
2755. 1:47:37Amanhã a gente vai amarrar tudo e tudo
2756. 1:47:39vai fazer sentido, tá certo? Tenta
2757. 1:47:41recapitular as informações e eu quero
2758. 1:47:42que você lembre que não existe almoço
2759. 1:47:44grátis. O Rodolfo estudando. Isso aqui,
2760. 1:47:47ó, foi em 2018. Eu estudando cansado,
2761. 1:47:52tarde da noite. Ó, meu cachorrinho ali,
2762. 1:47:54coitado. Meu cachorrinho tava ali
2763. 1:47:57compadecido com eu estudando, não
2764. 1:47:58entendendo nada. Mas, meu amigo, a conta
2765. 1:48:01fechou. Eu não sei até se dá para
2766. 1:48:02enxergar, mas tá vendo? Eh, ali no
2767. 1:48:05notebook, na tela de espaço, tá vendo
2768. 1:48:07que tem um negócio meio branco. Sabe por
2769. 1:48:08quê? A, o notebook já tava tão gasto a
2770. 1:48:12tela de espaço que já tinha um buraco na
2771. 1:48:14tela de espaço. Para você ver como meu
2772. 1:48:16computador era bem novinho, já tava
2773. 1:48:18gasto o teclado, tudo cheio de mancha.
2774. 1:48:20Então, não foi fácil chegar onde eu
2775. 1:48:22cheguei, mas a conta fecha. E eu quero
2776. 1:48:24que você sempre se lembre quem é o seu
2777. 1:48:26porquê, quem é o seu por quem, por quem
2778. 1:48:29você tá lutando, por quem que você tá
2779. 1:48:31estudando, por quem que você vai voltar
2780. 1:48:33na aula de amanhã. Então, meu amigo,
2781. 1:48:35hoje a gente aprendeu CSS, a gente
2782. 1:48:38aprendeu várias boas práticas, a gente
2783. 1:48:40avançou muito no nosso projeto, a gente
2784. 1:48:41aprendeu coisas que nenhuma faculdade
2785. 1:48:43ensina, a gente entendeu o que grandes
2786. 1:48:45empresas procuram nos programadores. A
2787. 1:48:47gente viu várias técnicas ali que só
2788. 1:48:50bons programadores têm. Além do mais,
2789. 1:48:52bons programadores, o que grandes
2790. 1:48:54empresas querem, são pessoas que não
2791. 1:48:56desistem. Um monte de gente já ficou
2792. 1:48:58ontem, já ficou pelo caminho. Hoje você
2793. 1:49:00tá mais perto do seu primeiro emprego.
2794. 1:49:02Hoje você tá mais perto dos seus sonhos.
2795. 1:49:04Então não dá para vacilar. Amanhã você
2796. 1:49:06tem que vir e aí você já vai pegar, já
2797. 1:49:08pega seu celular aí, pô, já coloca o
2798. 1:49:10despertador para amanhã 7:30. Não
2799. 1:49:12esquece de revisar, tá? Pegar os
2800. 1:49:15materiais de apoio. Então já pega aí, ó,
2801. 1:49:17ó, ó. Já coloca aí, ó. Amanhã é 7:30 já
2802. 1:49:20coloca aí o despertador. Não vacila. Não
2803. 1:49:23vacila. Porque assim,
2804. 1:49:26quem não vier vai continuar reclamando
2805. 1:49:28da vida, vai continuar deixando tudo
2806. 1:49:30pela metade, vai continuar tendo aquela
2807. 1:49:32vida de sempre. Mais um ano prometendo
2808. 1:49:35um monte de coisa e não cumprindo. Então
2809. 1:49:37bora. Oportunidade foi dada. Eu tô dando
2810. 1:49:39o meu melhor. Eh, faltou explicar alguma
2811. 1:49:42coisa aqui na na aula, alguma coisa que
2812. 1:49:43você não entendeu direito, a explicação
2813. 1:49:45não foi boa o suficiente? Lê a matéria
2814. 1:49:47lá, material de apoio, chama meu suporte
2815. 1:49:50pelo WhatsApp, vai na Devflix, agora eu
2816. 1:49:54vou soltar, a minha equipe vai soltar o
2817. 1:49:55código da aula de hoje. Revisa o meu
2818. 1:49:57código, bate com o seu, vê se tá, se tá
2819. 1:49:59legal. E tô indo lá pro Instagram. Então
2820. 1:50:02eu vou lá pro Instagram, Rodolfo Mori,
2821. 1:50:04me manda direct, a gente conversa, a
2822. 1:50:06gente troca ideia, tire suas dúvidas. O
2823. 1:50:08que você não pode é ficar para trás.
2824. 1:50:09Agora não acabou ainda a nossa aula
2825. 1:50:11porque temos a palavrachave, né?
2826. 1:50:13Precisamos de uma palavra-chave para
2827. 1:50:15hoje. A palavra-chave de hoje
2828. 1:50:18vai ser o seguinte. A palavra chave de
2829. 1:50:21hoje vai ser Red Bull, porque eu já
2830. 1:50:23tomei uns cinco Red Bull
2831. 1:50:26e só quem tiver com muito gás vai voltar
2832. 1:50:28amanhã
2833. 1:50:29para continuar aprendendo. Lembrando que
2834. 1:50:32são quatro palavras chaves, você já
2835. 1:50:33pegou duas, estamos na metade do nosso
2836. 1:50:35evento, não tá na hora de parar, não tá
2837. 1:50:38na hora de desistir, combinado? Eu
2838. 1:50:41espero você na aula de amanhã. E tem
2839. 1:50:44algo muito importante que você tem que
2840. 1:50:45fazer agora, assistir esse vídeo que
2841. 1:50:47minha equipe preparou com muito carinho.
2842. 1:50:49E lembrando que tem muita coisa lá na
2843. 1:50:52Debflix, muita. Tem os materiais de
2844. 1:50:53apoio, você já pode pegar. Eh, e eu
2845. 1:50:56queria que você tirasse tempo para ver
2846. 1:50:58histórias de pessoas que tiveram a vida
2847. 1:51:00transformada por meio da programação,
2848. 1:51:02por meio de pessoas e que seguiram o que
2849. 1:51:05você tá seguindo aqui, mas tem que
2850. 1:51:06seguir até o final. Pesquisa sua
2851. 1:51:08profissão. Ah, você é eletricista.
2852. 1:51:10Pô, ó, tem outros alunos que era
2853. 1:51:13eletricista. O Peter era eletricista.
2854. 1:51:15Ah, você é fotógrafo? Eu tenho aluno que
2855. 1:51:18era trabalhava com fotografia, Beatriz.
2856. 1:51:20Então, independente da sua profissão,
2857. 1:51:22tem gente que já fez a transição de
2858. 1:51:23carreira e você vai poder ser o próximo,
2859. 1:51:26tá? Assiste esse vídeo aí que ele é bem
2860. 1:51:27rápido e eu tô te esperando amanhã. Tô
2861. 1:51:29te esperando lá no Instagram. Valeu.
2862. 1:51:30Assiste aí, hein? Assiste aí.
2863. 1:51:32>> E aí, galera, beleza? Bom, eu sou o Alf,
2864. 1:51:35eu tenho 29 anos. Eu comecei a conhecer
2865. 1:51:38o Rodolfo quando eu tinha mais ou menos
2866. 1:51:39uns 25 anos e cara, eu entrei no Dev
2867. 1:51:43Club e assim eu não digo que nem foi
2868. 1:51:46[música] pelas steacks, nem foi por
2869. 1:51:49desenvolvimento web, nem foi por full
2870. 1:51:51stack, nem nada. O que mais me convenceu
2871. 1:51:54no Rodolfo foi a mudança de mentalidade.
2872. 1:51:56Cara, você vê o Rodolfo assim, ele fala
2873. 1:51:58de uma forma, principalmente dentro da
2874. 1:52:00plataforma de Club, que parece que, sei
2875. 1:52:02lá, você fala: "Cara, eu vou conseguir".
2876. 1:52:04E realmente a gente consegue, porque meu
2877. 1:52:06é só você focar no método, como ele
2878. 1:52:08fala, senta a bunda na cadeira e faz o
2879. 1:52:10que tem que fazer. E meu, eh, pode, às
2880. 1:52:14vezes pode olhar e falar: "Pô, mas ah, o
2881. 1:52:16cara é isso, cara é aquilo, só tá
2882. 1:52:17vendendo um curso." Não é só um curso,
2883. 1:52:19cara. É uma mudança de mentalidade, uma
2884. 1:52:21mudança de vida, sabe? Então assim, eh,
2885. 1:52:24não, não digam que é um curso, é uma
2886. 1:52:27mudança de vida mesmo para quem quer
2887. 1:52:29fazer. É uma excelente oportunidade.
2888. 1:52:31Meu, eu falo que assim, através do
2889. 1:52:34Rodolfo, eu tive só coisas positivas, o
2890. 1:52:38hábito de leitura, o hábito de começar
2891. 1:52:40uma academia, o hábito de ter uma agenda
2892. 1:52:43e me programar dentro dessa agenda, de
2893. 1:52:46ter hábitos alimentares saudáveis, tudo.
2894. 1:52:48Aí você fala: "Pô, mas é um curso de
2895. 1:52:50programação". Exato. Não é só o curso, é
2896. 1:52:53uma mudança de vida. Fala galera, tudo
2897. 1:52:55bem? Chamo é Manuel Júnior, gravando
2898. 1:52:58esse vídeo aqui, né, para falar um pouco
2899. 1:53:00na minha vida antes e depois do Dev
2900. 1:53:02Club. Eh, antes eu trabalhava de
2901. 1:53:05manobrista [música]
2902. 1:53:06num conceituado restaurante aqui do
2903. 1:53:08Recife,
2904. 1:53:10cara. Domingo a domingo pegava de
2905. 1:53:13meio-dia, largava quase a meia-noite,
2906. 1:53:15todos os dias, um domingo a cada seis.
2907. 1:53:19nem vivia mais, na verdade. Eu morava lá
2908. 1:53:21e visitava minha casa.
2909. 1:53:23Eh, conheci o David Club, o cara.
2910. 1:53:27Hoje eu vivo.
2911. 1:53:29É, hoje eu consigo passar mais tempo com
2912. 1:53:32a minha filha, com as minhas filhas, com
2913. 1:53:34a minha esposa, com a minha família,
2914. 1:53:36aproveitar mais, sair mais, [música]
2915. 1:53:38viajar mais.
2916. 1:53:40Então, só tenho agradecer de verdade ao
2917. 1:53:43[música] Rodolfo, a toda a equipe a esse
2918. 1:53:45curso espetacular.
2919. 1:53:47Eh, então o que eu tenho para falar
2920. 1:53:49aqui, galera, não desiste não, tá? Eu
2921. 1:53:51cheguei a desistir um tempo, passei
2922. 1:53:53quase um mês e meio sem eh sem acessar a
2923. 1:53:55plataforma, desanimado, caramba, será
2924. 1:53:58que isso é para mim mesmo? Será que não
2925. 1:53:59é? Fiquei quase um mês e meio. Daí eu
2926. 1:54:02olhei para minhas filhas assim, [música]
2927. 1:54:03que cara, se não é para mim, é para
2928. 1:54:06elas. E foi e foi. Então, não desiste,
2929. 1:54:10galera. Vai ter os momentos de desânimo,
2930. 1:54:13mas
2931. 1:54:14todos vamos vencer, tá? Todos vão
2932. 1:54:17vencer, todos seremos programadores,
2933. 1:54:19ótimos programadores. Então não desiste,
2934. 1:54:22[música] vai em frente porque é topado,
2935. 1:54:25é fácil, é fácil, tá? A didática é
2936. 1:54:29tranquila, é tudo tranquilo. Rodolfo, o
2937. 1:54:32cara é uma máquina, então não desiste.
2938. 1:54:36Se vier aquele desânimo que sempre vem,
2939. 1:54:38é normal, uma coisa nova e tal. Se
2940. 1:54:41pensa, pô, velho,
2941. 1:54:44esse desânimo não vai me derrubar. Eu
2942. 1:54:46tenho que alcançar o topo. Então, bora
2943. 1:54:48lá pra frente, galera, e bora. Não
2944. 1:54:51existe almoço grátis.
2945. 1:54:52>> Fala, pessoal, tudo beleza? Eu me chamo
2946. 1:54:54Luiz Gabriel, tenho 29 anos e atualmente
2947. 1:54:59eu trabalho como desenvolvedor startup.
2948. 1:55:02E minha história começou, né, com o
2949. 1:55:05Dolfo. Eh, eu conheci ele no YouTube,
2950. 1:55:10né? Um amigo meu me indicou o vídeo dele
2951. 1:55:12para poder assistir, né? falou que o
2952. 1:55:14cara é muito bom, né? E aí comecei a
2953. 1:55:17assistir o vídeo dele no YouTube, né? E
2954. 1:55:19aí foi bem na época também que abriu a
2955. 1:55:21primeira turma aí para você programador.
2956. 1:55:25E aí resolvi acreditar, resolvi ele dar
2957. 1:55:27uma chance para poder mudar de vida, né?
2958. 1:55:30Eu já trabalhei basicamente de tudo, né?
2959. 1:55:32Desde servente de pedreiro, de pintor,
2960. 1:55:35já trabalhei vendendo bebida, vendendo
2961. 1:55:37pastel, de tudo, né? Eh, de garçom
2962. 1:55:41também já trabalhei.
2963. 1:55:44Então eu comecei aí a estudar, né? Eu
2964. 1:55:47comprei o curso do Rodolfo, né? Aí virei
2965. 1:55:50sócio, a gente é um dos sócios, né? Eh,
2966. 1:55:54e aí comecei a dar o máximo de mim, né?
2967. 1:55:57Fiz um propósito ali que iria estudar
2968. 1:56:00todos os dias, né? Não ira deixar faltar
2969. 1:56:02nenhum dia, nem que seja 15 minutinhos,
2970. 1:56:04né? É, como o pessoal fala, é melhor
2971. 1:56:07pingar do que secar, né? Então temos que
2972. 1:56:10fazer acontecer, né? Não, não tem almoço
2973. 1:56:13grátis. Então eu comecei a estudar, né,
2974. 1:56:16ali meia hora, uma horinha por dia e
2975. 1:56:19seguindo a risca, né, seguindo o método
2976. 1:56:21do Rodolfo, tudo que ele pedia para
2977. 1:56:23fazer ali, né, fazendo as coisas ali,
2978. 1:56:25pensando, mudando a forma de pensar, né?
2979. 1:56:27Essa é uma das chaves também que vai te
2980. 1:56:29fazer eh crescer, evoluir na carreira,
2981. 1:56:33na vida.
2982. 1:56:35E após dois meses, né, aplicando aí o
2983. 1:56:38método, eu consegui meu primeiro
2984. 1:56:40emprego, consegui meu primeiro sim, né,
2985. 1:56:42que é na onde eu estou até hoje. Então
2986. 1:56:44vai fazer basicamente aí uns [música] 8
2987. 1:56:46meses que eu tô na empresa, né, numa
2988. 1:56:49startup muito boa, né, e graças ao
2989. 1:56:52método do Rodolfo, [música] né, eu segui
2990. 1:56:53o método, né, acreditei, me esforcei
2991. 1:56:56para dar certo, né, e eu tô aí, recebi
2992. 1:57:00meu sim, né, já fiz outras entrevistas,
2993. 1:57:04já recebi mais outro sim, né, em outro
2994. 1:57:08emprego também, outro startup e tudo
2995. 1:57:11isso acreditando no método, né, mudando
2996. 1:57:13a forma de pensar mudando a rotina do
2997. 1:57:17dia a dia, né? Então, dá certo, pode
2998. 1:57:20acreditar, né? Eh, é confiável, é
2999. 1:57:24verdadeiro. É só a prova [música] disso,
3000. 1:57:26né? Antes eu era um emprego que eu
3001. 1:57:30tinha, era bem ruim, não era muito bom,
3002. 1:57:31era bem ruinzinho, né? Tinha que ficar
3003. 1:57:34aí trabalho braçal, não era nem legal. E
3004. 1:57:38hoje eu trabalho home office, né? Na
3005. 1:57:40empresa que eu trabalho em home office.
3006. 1:57:42Então é isso aí. né? Rodolfo aí é um
3007. 1:57:45ótimo mentor, pode contar com ele aí que
3008. 1:57:48o cara, cara é fera.