Unknown

eu saí do zero Total vi que eu não sabia nada e mais ou menos S meses um pouco um pouco menos de estudo eu consegui o primeiro emprego eu até achei relativamente rápido eu só fiz uma entrevista tem gente que precisa fazer muito mais entrevista antes contratado recebi a notícia Foi duas semanas de Treinamento devou a entrevista a gente já começou o treinamento no outro dia com um mês acompanhando o método dos gêmeos eu consegui o meu primeiro emprego agora que eu tô empregada na área eu me sinto muito mais confiante eu acredito que aprender

com o método certo faz totalmente diferença cara dois meses eu nunca imaginei que em dois meses eu ia est eu até entreguei o projetinho hoje e os minhas deram alguns feedbacks e tal eu nunca im em dois meses eu consegui fazer aquilo você se sente motivada a continuar é muito louco porque agora quando eu olho uma página falo Ah que eu posso fazer assim eu posso começar assim eu posso meter uma dia aqui posso fazer um C assim E você já vai começando a montar uma página na sua cabeça quando você consegue fazer uma coisa

é um sentimento muito bom quando você consegue terminar um projeto é um sentimento muito [Música] [Música] seja muito bem-vindo muito bem-vinda mais uma live de projeto aí da semana do zer programador contratado mais uma não a primeira né Mas como já teve outros eventos não deixa de ser mais uma eu sou Ricardo dias para quem não me conhece sou Roberto Dias boa noite para todo mundo que tá aí no chat como é que vocês estão E aí pessoal boa noite sejam bem-vindos bem-vindas para quem não sabe semana do zero programador contratado é uma semana de

imersão onde a gente te dá o mapa percorre ele junto contigo também para te ensinar a entrar no mercado de programação em até 7 meses né com esse planejamento de estudo de 7 meses né que a gente coloca dentro do mapa para que tu consiga se preparar pro mercado de de trabalho na área de programação recebendo um ótimo salário também para começar a trabalhar né salário aí na média de r$ 3.000 que é o salário do do programador iniciante tá a gente vai mostrar um mapinha que a gente vai J só iniciante eu falei isso

do Júnior isso isso aí eh eu vou mostrar um mapinha pessoal para vocês Deixa eu botar ele na tela aqui que vai ser o mapa que vocês vão receber na semana do zero programa do contratado aí você vão receber na sexta-feira tá deixa eu botar aqui ó vocês estão vendo aí né Sim esse é o mapinha tá gente só vai dar um leve spoiler né porque ele é bem extenso então vocês vão depois vocês vão baixar e vão conseguir ler ele com calma né mas esse aqui é um mapa Dev tá ele tem bastante ele

tem os pilares né que a gente ensina no nosso método aí para quem quer aprender programação de um jeito mais tranquilo sem ficar batendo cabeça né porque tem muita coisa que tu consegue fazer que tu precisa né para começar a aprender programação Mas vocês já vão ter o mapa o que é ótimo né um mapa é algo que já foi e é um caminho que já foi percorrido por outras pessoas mais experientes e vocês vão só percorrer esse caminho depois usando o mapinha não vão ficar batendo cabeça e tentando adivinhar para onde que vocês tem

que ir né com o mapa bastante direção perguntou esse mapa é de graça Sim a gente vai entregar o mapa de graça durante o evento para quem tiver inscrito no evento né então Caso tu não esteja inscrito ou inscrita ainda no evento tem o link aí na descrição da Live para te fazer a tua inscrição gratuitamente e a gente vai vai dar um mapinha Vai dar pdfs vai dar várias coisas para vocês de graça durante a semana tá assistindo pelo Instagram digita Aí a palavra projeto pode digitar aí no no chat mesmo que tu vai

receber o link para assistir a Live no YouTube tá aqui é bem melhor de ver os códigos né hoje a gente vai botar a mão na massa mesmo e praticar fazer código pelo Instagram vai ser mais complexo de tu ver né porque é bem menor né então digita projeto que tu vai receber o link e pode vir pro YouTube com a gente não se inscreveu no evento ainda se inscreve que ainda d tempo tá mas vai ficar aberto por tempo limitado as as inscrições no evento link tá aqui embaixo na descrição da Live as inscrições

vão encerrar amanhã tá então corre para se inscrever para receber o mapa que nem o Beto falou tudo isso que vocês vão receber todos os materiais extras só recebe quem tá inscrito no evento né de um like também pessoal no vídeo né na Live de hoje se curtirem o conteúdo curtirem as explicações se inscrevam no canal também tá E se eu não me engano só pode comentar quem é inscrito no canal Então se tu quer participar comentar no chat se inscreve a gente faz aulas gratuitas também aqui no YouTube YouTube toda quinta-feira às 6 horas

18 horas tá então se tu quer participar das aulas gratuitas se inscreve aí que tu vai receber também a notificação para participar dessas aulas tem o podcast toda terça-feira podcast Dev em dobro enfim muito conteúdo para ajudar vocês aí a conseguir o primeiro emprego de programação esse é o nosso objetivo com todos os conteúdos Então segue se isso te interessa e no Instagram também né @dev indobro a gente tá lá no Instagram como Dev indobro se tu quiser seguir a gente lá também pessoal quem tá no YouTube não precisa digitar projeto tá no chat é

só pro Instagram isso Ó já começou prem atenção nas instruções que a gente vai passando Às vezes a gente fala uma coisa e vocês fazem outra às vezes ou vai atrás do que os outros pão estão fazendo mas se tu parar presta atenção às vezes também o chat atrapalha porque a gente fica lendo o chat né e não presta atenção durante a explicação também da aula a gente vai a gente vai fechar o chat tá mas prestem atenção nas coisas que tá falando o o YouTube tu não precisa digitar projeto é só para quem tá

lá no Instagram porque daí a pessoa digita projeto lá no chat do insta e vem pro YouTube é o YouTube é melhor de ver os códigos né que nem o Cadu comentou é eh pessoal a gente garante se tu assistir a todas as aulas do evento a gente vai fazer o teu tempo valer muito a pena né porque a gente compilou 13 14 anos de experiência na área de Tecnologia de programa ação em uma semana não é não é fácil fazer isso né mas a gente acredita que a gente fez um bom trabalho um ótimo

trabalho né fazendo o mapa todos os conteúdos e te dando essa visão Geral de que Como que tu vai entrar na área com uma estratégia né porque se tu tentar sem uma estratégia vai ficar bem mais difícil certo então é um compilado com as melhores dicas as dicas que a gente gostaria de ter recebido inclusive quando a gente começou e não tinha né E são dicas que a gente sabe que funcionam também Porque nossos a gente já muitas pessoas né usaram esse método né o método que a gente vai passar aí para vocês dentro do

evento os pilares e conseguiram entrar na área então se essas pessoas conseguem conseguiram né Tu também vai conseguir se tu seguir direitinho aí todas as instruções que a gente vai passar Beleza então é isso eh a gente já teve também onde vocês estão agora né nesse começo de os primeiros passos né bem no comecinho e às vezes a gente sabe que dá de dar o próximo passo né Vocês já deram um passo muito importante que é est aqui na live E participar da semana né e provavelmente vocês têm interesse na área de programação O que

é ótimo porque é sim uma área muito boa para se começar mas como qualquer coisa que tu inicia né a aprender dá aquele friozinho na barriga mas não se preocupem vocês vão sair do evento com conhecimento da base da programação html CS e o JS a gente vai mostrar para vocês do desenvolvimento web e com um mapa também para seguir depois do evento e vocês podem entrar no discord também né tem o link aqui na descrição o a guilda deve deve em dobro né que é o nosso servidor do discord aberto mesmo depois que o

evento fechar pode continuar lá no discord tem mais de 20.000 pessoas lá iniciantes também que estão estão lá se ajudando todo dia a conseguir o primeiro emprego Tá mas tu precisa prestar muita atenção nos detalhes aqui tem que nos acompanhar direitinho do começo ao fim para est o mais preparado possível beleza e a gente vai recompensar como sempre os comprometidos e as comprometidas que vão até o fim do evento tá porque no evento a gente vai sortear um notebook no valor de R 4000 para uma pessoa que tá realmente comprometida beleza como é que vai

funcionar então prestem atenção agora nas regrinhas do como é que vai funcionar o sorteio Beleza cada aula da semana do zero programador contratado a gente passa uma senha uma palavra que é uma senha para vocês é uma palavra em cada aula eh E no fim elas vão formar uma frase beleza é bem simples então anota em cada palavra que a gente vai passar nas três aulas Então ontem já teve uma aula se tu não assistiu no final aqui da Live a gente vai passar lá de novo tu pode assistir ela depois mas a gente já

passar uma palavra na primeira aula segunda-feira a gente vai passar mais uma palavra amanhã na quarta e a terceira na sexta beleza durante as aulas ali os níveis da semana do zero programador contratado que vocês vão assistir no domingo vocês vão vocês vão receber a quarta beleza e aí vocês vão formar essa frase e no domingo mesmo a gente faz uma live também às 8 horas participa lá da Live porque a gente vai mandar o o link do formulário para vocês preencherem as palavras na Live beleza aí tu coloca tuas informações a frase e as

pessoas que fizerem isso vão estar concorrendo ao sorteio do notebook é bem simples tá a gente vai reforçando essas regras ao longo do evento Não se preocupem Mas quem tá aqui já recebeu aí de já recebeu as regrinhas aí antes da da das outras pessoas tá Então essa é Nossa forma de agradecer pessoas que as pessoas que foram até o fim né do evento é um presente que realmente vai ajudar uma pessoa a entrar na área de programação ou estudar né programação ou jogar um joguinho de vez em quando porque ninguém é de ferro também

né se tu quiser jogar o teu joguinho aí no teu Notebook novo pode também só claro que com equilíbrio né tem que estudar programação também para entrar na área conseguir o primeiro emprego aí poder comprar depois quantos notebooks tu quiser falei né ontem a gente liberou a primeira palavra na aula um da semana do zero programador então não perde a chance de concorrer ao notebook vai lá pega a palavra depois da Live aqui tá vai est isso aí todas as aulas vão estar disponíveis até o domingo então tu vai ter bastante tempo para assistir pega

a palavrinha guarda e vai acompanhando o evento que tu vai receber as próximas pessoal a área de programação ela é a área que a gente indica para todos os nossos amigos todo mundo que a gente conhece né Às vezes a gente pega um Uber e tá conversando sobre trabalho né E às vezes a gente até fala com Uber né tinha pensou em ser programador né né não porque a gente quer forçar as pessoas mas é porque quando a pessoa tá dizendo Ah não tô gostando muito do que eu faço não sei o quê A gente

sempre fala poderia trabalhar com programação né dá essa chance a gente fala pras pessoas e pessoal não falem as palavras no chat quem falar a palavra no chat vai ser banido beleza a a as palavras são para as pessoas que estão comprometidas assistindo as aulas se tu liberar a palavra no chat tu tá concorrendo ao sorteio do notebook com Talvez uma pessoa que não tenha assistido não vai assistir e só tá participando para concorrer ao notebook não é isso que tu quer né Imagino que tu queira concorrer com pessoas que tão comprometidas que nem tu

então tu pegar e dar palavra assim tu tá dando praticamente de graça a oportunidade de uma pessoa de qualquer pessoa concorrer mesmo que não tenha participado de nada não tenha visto nenhuma aula não tenha visto quando a gente quando a gente falar para vocês mandarem coisas no chat chat vocês podem mandar Mas se a gente não falar não falou Não mandem né Não mandem que nem já aconteceu não mande as palavras erradas também né É também se a gente ver alguém mandando alguém mandando qualquer tipo de mensagem que vai que é para atrapalhar os outros

ou para atrapalhar o evento a gente vai banir a pessoa né então não Não façam isso tá prestem atenção aí no que a gente tá falando para vocês mandarem no chat Show onde é que eu tava Ah tava falando sobre sobre isso né sobre a área de tecnologia que el é uma área que valoriza muito quem se esforça e quem vai até o fim das coisas né infelizmente a gente sabe que metade de vocês que estão aqui hoje não vão aparecer na live dois na Live de projeto Dois de da quinta-feira tá podem ver 1000

10000 pessoas quase né marquem o que eu digo lá na na live dois a gente vai ver isso aí Metade já não vai tá naquela Live e acredito que tá tudo bem né não é para todo mundo também talvez não seja o momento da pessoa né de entrar na área de tecnologia Mas a gente pode garantir para vocês quem for até o final quem se esforçar quiser realmente entrar na área vai ser valorizado tanto profissionalmente quanto financeiramente também né Vocês sabem que a área de Tecnologia é uma área que paga muito bem e se é

isso que tu quer ou poder trabalhar de casa poder sei lá ser um nômade digital viajar o mundo enquanto tu tá trabalhando tu só precisa do teu Notebook conexão com a internet e tu consegue consegue trabalhar de qualquer lugar do mundo beleza então se tu quer qualquer uma dessas coisas Então vale a pena o esforço de tu entrar na área de tecnologia São poucas horas da tua vida que tu vai investir para começar a construir esse teu futuro né então é o melhor momento para aprender programação agora a área tá aquecida a área sempre esteve

aquecida né Não eu nunca vi um um momento que a área de tecnologia saturou né que nem a a galera costuma falar aí de forma errada né porque uma coisa que saturou não tem mais não tem mais como entrar né E muito pelo contrário muita gente tá entrando mas só entra quem se compromete Essa é a verdade Só entra quem Só entra quem é bom e quem tem uma estratégia também né e a estratégia a gente vai passar aí para vocês a gente vai dar o conteúdo que é um conteúdo incrível ele vale realmente ouro

assim e é um conteúdo que a gente não vê ninguém dar assim para pro iniciante então aproveitem tudo mastigadinho tudo explicadinho os porquês das coisas é só aplicar essas dicas e tu vai ver resultado bem rápido Tu vai conseguir sair do evento com o teu primeiro projeto Talvez tu já esteja estudando programação há um tempo e tá meio travado mas fazendo direitinho aqui você vai conseguir sair com com bastante conhecimento e com um projeto para mostrar também que é o Projeto do poked devs que a gente vai mostrar aí em seguida também acho que é

isso então p acho que é isso sem mais delongas vamos direto agora ao assunto da Live né tema da Live de hoje a gente vai fechar o chat também tá pessoal V fechar o chat aí para que vocês prestem atenção agora na explicação teórica e prática e o tema da Live de hoje é HTML a base do front Change iniciando o projeto nessas lives do projeto aqui do evento a gente vai se aprofundar mais no mundo da programação na prática né a gente mostrar o HTML o CSS e o JavaScript e fazendo um projeto né

que daí tu vai conseguir realmente fazer junto com a gente do zero mesmo que tu não saiba nada de programação tu vai conseguir fazer a gente vai explicar da forma mais didática possível e tu vai até poder usar isso depois né reproduzir o que a gente tá fazendo nesse primeiro projeto para criar outros projetos depois para ti para colocar no teu portfólio teu Currículo enfim inclusive vocês podem fazer o projeto junto com a gente hoje e customizar ele né se tu quiser também mudar as imagens D enfim os textos e depois postar lá no nosso

discord no no canal de vitrine porque a gente vai pegar os projetos mais Leais lá e vai colocar no nosso Instagram depois assistam a Live com calma tá isso é uma dica ela vai ficar salva aí durante o evento até domingo porque às vezes tentar fazer junto e prestar atenção é difícil e daí tu vai poder tu pode se perder a programação é muito de detalhes às vezes Tu perde um detalhe ali uma coisa muito simples básica e tu se perde e já não consegue voltar tu tu pode voltar à Live né tu tem essa

opção aí no YouTube tranquilamente e mas se tu se perdeu deu algum problema Para de tentar fazer junto e presta atenção porque daí depois amanhã por exemplo tu pode reassistir a Live e daí você tentar fazer no teu projeto tá mas se quiser fazer junto com a gente tiver um pouco mais de experiência pode fazer também só prestem bastante atenção nos detalhes que a gente vai passar então ho a gente vai te apresentar o HTML né e a gente vai falar a importância dele de forma geral pra web também né você vai perceber que ele

tá muito mais próximo do do que tu imagina do que tu pensa porque tu usa a internet já né tu tá aqui no YouTube por exemplo o YouTube é um site da Web ele foi feito em tecnologias web né HTML CSS JavaScript E tu já tá habituado a isso né então para não ficar só na teoria a gente vai te ajudar aí a desenvolver o teu primeiro código HTML tá Caso tu já esteja aprendendo programação já esteja um pouco mais avançado ainda assim vai ser um conteúdo muito valioso porque tu vai aprender coisas novas aqui

com certeza então eu vou te mostrar o projeto que a gente vai fazer hoje né pelo menos a parte de html deixa eu mostrar botar aí na tela aqui ó esse é o projetinho que que a gente vai fazer hoje né então a gente vai fazer hoje a parte de html a parte mais básica mais simples tá Depois a gente vai fazer a parte do CSS na quinta-feira e depois a gente vai fazer a parte do JavaScript também que é essa troca de dos personagens aqui né dos dos nossos bichinhos Beleza então hoje a gente

vai fazer a parte de de html disso eh que é a parte mais mais simples né a parte de marcação que a gente chama mas extremamente importante é é o esqueleto é web da web né basicamente com que vocês vão aprender hoje vocês vão poder aplicar isso também nos projetos de vocês na Live três no no sábado a gente vai ensinar vocês a subirem esse projeto no github né numa URL para que vocês possam compartilhar isso com outras pessoas mandar pro tio mandar pra tia mandar pros amigos então vocês vão ter um projeto já num

num link né na web para compartilhar isso ou botar no teu portfólio no teu currículo enfim tá então bora lá eu vou apresentar fazer uma apresentação aqui de uma de um é uma apresentação que a gente tem do HTML tá botar na tela aqui compartilhar tá o palco apresentar volar Então tá aqui então HTML a base do frontend o HTML a a sigla né do HTML significa eh a hypertext markup language a gente vai falar por que que ele é o primeiro passo de um desenvolvedor web front Change né o desenvolvimento frontend é o desenvolvimento

da parte visual né da parte mais que o usuário vê ali e backend é a parte mais por debaixo dos panos coisas que a gente não vê tá então a gente vai falar um pouco mais sobre o frontend aqui então o HTML é a sigla para hypertext markup language né que nem eu falei ou linguagem de marcação de hipertexto então como o nome diz o HTML é uma linguagem de marcação né existe toda uma treta se o HTML é ou não é uma linguagem de programação né na verdade isso não importa muito para nós o

que importa é que o HTML vai nos ajudar a estruturar uma página ele é como se fosse um como se fosse o esqueleto de um site mesmo Ah deixa eu ver se tá compartilhando certo aqui não não tá compartilhando certo tem que a tela inteira aqui fador pode ficar de olho aí também para ver se tá tudo dando certo Mas é isso então eh a gente pode usar como exemplo o site da Netflix tá vou até Abrir o site da Netflix aqui ah tá abriu aí sim beleza então no site da Netflix né Para nós

humanos fica fácil de olhar e identificar elementos como parágrafos títulos uma lista tu olha algumas coisas aqui nesse site e tu já bate o olho e já identifica né Por exemplo Ah aqui é um título aqui é um botão botão de entrar né então consegue batendo o olho identificar algumas coisas mas o computador por mais esperto que ele seja ele não consegue fazer isso eles precisam que a gente diga para eles de fato o que que é cada uma dessas coisas tá então aqui por exemplo é exatamente isso ó consegue bater o olho identificar botão

título aqui tem outro botão aqui tem um campo para botar e-mail um link mas o computador ele precisa que a gente fale para ele então o que que é o HTML o HTML em si ele é o esqueleto do site ele é a estrutura do site né para que a gente consiga trabalhar com HTML a gente tem que usar um conceito que é que são as tags as tags são como se se fossem pequenas peças que a gente usa para montar a página então aqui por exemplo seria um um uma tag de parágrafo né as

tags elas são escritas assim essa é a a a sín taxe de uma abertura de uma tag cada tag dessas aqui elas representam alguma coisa na tela né então que a gente viu aqui cada uma dessas dessas coisas que a gente vê que a gente bate o olho identifica a gente tem que dizer pro computador o que que são Então as tags servem para isso aqui por exemplo nesse botão entrar a gente vai ter uma tag específica para botão vai ser a buton aqui nesse saiba mais a gente vai ter uma tag específica para link

que é a tag de a de Ancora Então a gente vai usando essas tags para montar nossa página como se fosse mesmo montando um quebra-cabeça e as tags a gente para escrever as tags a gente precisa né fazer dessa maneira aqui então essa tag de p seria é tag de um parágrafo então quando a gente quer escrever um parágrafo na tela a gente precisa usar a tag P para isso a gente tem a abertura da tag que é um sinal de menor o nome da tag que nesse caso é p e o sinal de maior

então isso aqui a gente consegue criar uma abertura de tag depois a gente pode ter um conteúdo dentro da tag como por exemplo nesse caso da tag p o conteúdo é esse eu sou um parágrafo né então a gente abre a tag aqui que a gente viu an antes ali no slide anterior coloca o conteúdo e fecha a tag na na apresentação no site né no navegador ali nesse caso aqui no Chrome ele vai aparecer assim eu sou um parágrafo então ele só aparece o texto não aparece as tags então o navegador identifica isso né

E mostra só o texto como se fosse um um parágrafo e depois a gente tem aí daí só uma coisa do conteúdo da tag né a a tag ela pode ou não ter um conteúdo tá você é importante lembrar por exemplo algumas tags não t como a tag IMG tag IMG é uma tag que a gente usa para representar uma imagem então quando a gente quer por exemplo botar aquela imagem lá do dos poked devs lá dos bichinhos a gente precisa usar uma tag de imagem para colocar aquelas imagens Então é assim que a gente

vai fazer só que ela não tem um conteúdo ela Fecha aqui ó Barra e o sinal de de maior aqui então ela já fecha eh que a gente chama de self closing ela se fecha por si própria e o fechamento da tag é assim a gente tem o sinal de menor barra nome da tag sinal de maior então com com isso aqui a gente sabe que a gente fechou a tag então a gente sempre tem que lembrar de abrir e fechar as tags né se a gente abre uma tag e coloca um conteúdo e não

fecha é como se ela fosse vazando ela vaza pros outros conteúdos Ali pras outras tags e fica tudo errado então a gente tem que sempre que lembrar de abrir e fechar no vscode vocês vão ver que o vscode ele já meio que faz isso para nós ele abre e fecha já então poupa aí um um um possível erro humano né da gente esquecer de fechar uma tag E como eu falei né algumas tags se fecham sozinhas que a gente chama de self closing como a tag IMG por exemplo Então é assim a tag MG também

ela ah a barra nem precisaria pode botar a barra ou não mas as duas formas funcionam e só ela é diferente né ela não tem o nome da tag no fechamento então algumas tags são assim tá a estrutura completa é essa então abertura de tag conteúdo e o fechamento da tag isso aqui a gente tem uma que a gente chama de um elemento HTML né então isso aqui vai ser representado como um texto lá no nosso site daí falando um pouquinho mais sobre as tags a gente tem um conceito que são os atributos né os

atributos são o que é próprio característico de algo ou de alguém então algumas tags vão ter atributos que a gente pode colocar para definir alguma coisa uma característica daquela tag por exemplo né então um atributo ele é escrito assim o nome do atributo sinal de igual abre aspas duplas o valor e fecha aspas duplas então a gente com isso aqui a gente consegue definir um atributo de classe com um valor parágrafo para essa tag classe depois a gente vai ver na aula de CSS esse Class aqui né uma classe ele serve para estilizar então com

isso eu poderia estilizar este parágrafo aqui né depois lá dentro do do CSS aqui falando um pouquinho sobre a estrutura base de um HTML então o HTML ele vai ter algumas estruturas tá algumas tags específicas para montar ele da melhor forma Então primeiramente a gente tem o HTML a tag HTML então tudo que tiver assim entre sinal de maior e menor é é o é uma tag tá então aqui tem o nome da tega HTML e ela representa a raiz do documento HTML aqui a gente tem uma outra tag que é tag de head que

contém informações sobre o documento HTML como título da página por exemplo head seria como se fosse cabeça né em inglês traduzindo essas informações elas não aparecem pro usuário exceto o favicon e o título da página título da página é aquele título que aparece lá na aba né navegadora e o favicon é aquele iconz que aparece do lado do título e tem o Bari a tag de Bari que é a tag de corpo essa tag é a tag que contém o conteúdo visível da página Então dentro do R tudo todas as tags que a gente colocar

dentro da head de fato elas não aparecem né pro usuário final a não ser essas duas mas no B tudo que a gente colocar ali vai aparecer a gente gosta de fazer uma representação do HTML assim que daí fica mais fácil de lembrar a gente tem a tag de html por fora de tudo e dentro a gente tem a tag de head que é a cabeça da pessoa o HTML seria como se fosse a pessoa inteira né o indivíduo o head seria como se fosse a cabeça da pessoa do bonequinho é onde estão os pensamentos

né da pessoa que é a parte que a gente não vê a gente não vê o que que a pessoa tá pensando e tem o body logo depois que é o corpo da pessoa que é a parte que a gente vê de fato corpo as roupas então a gente consegue meio que definir ah essa representação para lembrar então dentro do Head a gente vai ter coisas que o usuário final não vê e dentro do Body a gente vai ter coisa que o usuário final vai ver então bora pro código tá a gente vai começar a

codificar o nosso primeiro projetinho nosso primeiro site em HTML e CSS e JavaScript tá hoje começando pelo HTML Então deixa eu tirar aqui a apresentação quando o Beto faz isso lembrando do que vocês para tirar dúvidas pessoal sobre a parte do código Ah não consegui fazer uma coisa que vocês fizeram ou meu código tá dando problema a gente não conseguiria tirar essas dúvidas no chat aqui da Live né seria impossível porque a gente precisaria ver o código então se tu quer ter suporte técnico das suas dúvidas entra no discord o link do discord tá aí

na descrição é a comunidade Dev em dobro lá no discord tem um linkzinho aí é só ler os links que tem na descrição e ele tá ali é um dos links que tá ali na descrição da Live tá pessoal antes da gente abrir o vest code aqui eu vou te ensinar como que baixa e instala o vest code Caso tu não tenha feito isso ainda então a gente pode usar aqui a própria aba do Netflix digitar vs code no Google né vai abrir as as pesquisas do Google tu vai vir nesse download visual Studio code

página de download aqui na página de download vai ter um botão alguns botões na verdade dependendo do sistema operacional que tu usa então Ah tu usa o Windows então é esse aqui ó Windows 10 111 tu usa o Mac então é esse aqui ou se tu usa o Linux é um desses aqui beleza Daí tu só clica ele vai começar a baixar aqui né daí tu salva aqui em algum lugar do teu computador é um executável abre o execut n executa el abre ele daí é next next next aquele aquela velha forma de instalar coisas

só cuidado na hora de tem uma hora ali do do Next aparece uma opção para te marcar para abrir com code aí tu marca essas opinas que tem ali para abrir com code daí tu CONSEG botão direito numa pasta e abrir aa com code mais fác facil te trabalho tá então eu vou já tenho o v code instalado aqui eu vou abrir ele né tu pode abrir o teu aí também quando abre ele da primeira vez ele vem assim vou dar um zoom até aqui para ficar melhor de vocês verem tá ele vai vir assim

e a primeira coisa que a gente vai mostrar para vocês do vs code é como instalar algumas extensões para facilitar o nosso código então aqui do lado na esquerda tem essa aba de extensions então tu clica aqui Aqui tem uma busca aqui em cima clica aqui e daí tu digita portuguese é esse aqui ó que tem esse globin clica essa é uma extensão que transforma o vs code a língua do vs code para português do Brasil Então tu vem aqui nesse botão install clica ele vai pedir para te reiniciar aqui embaixo ó nesse botão azul

Tu clica aí ele vai reiniciar o ves code daí est for notar ó já tá todos os textos traduzidos A grande maioria dos textos tá traduzido certinho Tá pode ser que tenha algum outro que não esteja mas eles estão constantemente atualizando isso aí beleza outra extensão vamos clicar aqui ó em extensões outra extensão bem importante é o Live Opa Live server é é essa aqui então clica e instala ela também Live server é uma extensão que vai ajudar a gente a recarregar a página sempre que a gente fizer uma alteração isso vai dar bastante produtividade

para nós depois eu vou mostrar na prática Beleza então só Instala aí essa não precisa reiniciar depois tu vem aqui na busca de novo digita Omni Omni vai baixar essa aqui ó instalar essa aqui Omni cima instalar vai abrir essa caixinha aqui em cima ó daí tu clica nesse primeiro Omni beleza Tá feito Olha já mudou as cores já tá bem mais bonitinho ele muda as cores ele muda a extensão ele muda o tema Todo do teu B code para deixar mais agradável outra extensão que a gente pode instalar é o vs TR espaço code

espaço icons é esse aqui aqui ó vs code traço icons vem aqui nesse botão instala também vai abrir essa caixinha tu seleciona vs code icons Isso é para deixar os ícones do teu projeto ali do da tua barra de essa barra aqui de essa aba de explorador mais bonitinhos esses iconeinstagram extensões e a gente pode instalar mais um que é o Color High h i g h escrever só isso ali já acho que já vai achar às vezes ele demora para carregar ele fica nessa Binha aqui essa essa Barrinha aqui daí ele demora um pouco

tá mas já carregou aqui vou clicar em color Highlight aqui ó vou instalar também is aqui é para deixar a cor gente escrever um ex decimal de uma cor e vai deixar a corzinha aparecendo Qual é para facilitar nossa nossa visão das cores depois a gente vai explicar o que que é esse esse he decimal tá esse monte de numerozinho e letrinha lembrando né Beto tu fez muito rápido eu não consegui ver tu pode voltar à Live volta à Live e faz o passo a passo ali de novo que é simples mas aí tu pode

voltar e ver novamente uhum aí né explicando por quê porque se a gente for ficar parando toda hora para mostrar tudo detalhadamente a gente vai levar 4 horas para fazer aqui o projeto e não é isso que vocês querem né então né É só por isso é isso aí e vai ter vai ter mais tempo para ver né vai ficar gravado aí até o final do evento também outra coisa que a gente vai fazer aqui Ah tu vai clicar aqui ó Nessa engrenagenzinha esquerda e daí tu vai vir em configurações aqui tu vai escrever Word

w o r d vai vir aqui ó Word wrap se o te tiver off marca on beleza isso aqui Vai facilitar a leitura das Linhas no nosso código quando tiver linhas muito grandes ele vai quebrar para baixo então Vai facilitar pra gente hã outra coisa aqui em cima ó em arquivo menu arquivo tu vai vir aqui em salvamento automático se o teu não tiver com essa com esse cheque marcado clica para marcar ó assim é ele tá sem marcar tá então tu clica e daí ele vai marcar ali Isso aqui vai servir para quando a

gente digitar algum texto no code ele vai salvar automaticamente então a gente não precisa ficar dando control s ou vindo aqui em arquivo salvar toda hora tá quando a gente digitar alguma coisa ele já vai salvar vai nos ajudar bastante também a ser mais produtivo Então é isso deixa eu uma coisa que vocês podem fazer daí já deixa eu tirar aqui é criar uma pasta no computador de vocês aí que vai ser a pasta do projeto então eu já cria aqui ó projeto Traço poked devs não vai tá para ler muito bem aí Eu acho

mas não dá para aumentar né a fonte do Windows Então é isso aqui projeto traz poked devs cria uma pasta clicando em cima com botão direito tem essa opção abrir com code pode clicar aqui e ele vai abrir essa pasta do teu projeto para ti no code para ti poder começar a trabalhar ah Bet eu não tenho a opção abrir com code tranquilo pode abrir o teu vs code pode clicar aqui né vs code visual Studio code abre vem aqui em arquivo Abrir pasta e daí tu vem aqui e seleciona a pasta do teu projeto

e clica em selecionar pasta ele vai abrir também da mesma maneira Beleza então é isso aí aqui a gente vai ter esse menu lateral né primeiro primeiro a primeira aba é o explorador é onde vai est os arquivos aqui em cima ó vai ter esse projeto poked devs que é a tua pasta basicamente a gente pode criar um arquivo novo aqui dentro da pasta pelo vest code clicando Aqui ó Novo arquivo aí tu digita index pon HTML quando a gente quer criar um HTML a gente precisa colocar uma extensão com o ponto HTML para dizer

esse arquivo é um HTML é um arquivo de html beleza e o index é uma é um padrão de nomenclatura sempre que tiver index no nome muitos servidores já vão identificar esse arquivo e já vão abrir ele automaticamente Isso vai acontecer lá no github quando a gente for subir esse arquivo vai acontecer Exatamente isso então o nome precisa ser index P HTML tudo minúsculo se tu escrever index com maiúsculo com i maiúsculo por exemplo já vai dar problema então é é o que eu falei façam exatamente da forma que a gente tá fazendo todas as

palavras tudo certinho tá então é isso como é que a gente cria uma estrutura de html aqui é muito simples o o ves cod Nos ajuda muito nisso tu digitar HTML aqui e selecionar essa opção aqui ó HTML 2.5 ele já vai criar toda a estrutura para nós então essa estrutura que a gente viu né tinha o HTML a tag HTML né a tag Head e a tag bar Então essa é a estrutura do HTML tem essa tem essa primeira tag aqui que é o DOC Type só para dizer que esse é um arquivo do

tipo né doc Type arquivo do tipo HTML só para ele saber que é HTML né Quando for abrir no navegador por exemplo Beleza então é isso a estrutura tá aqui criada e agora vamos pro Body né que é esse essa parte aqui então dentro da tag do Body a gente pode começar a escrever as coisas que vão de fato aparecer pro usuário então eu posso escrever uma tag aqui então lembrando né quando eu quero escrever uma tag eu eu digito sinal de menor o nome da tag P sinal de maior quando eu faço isso o

ves code já autocompleta para mim Ah uma coisa tavam perguntando aí Ah eu posso programar celular sim dá para programar pelo celular só que daí tu não vai usar o v code que é essa ferramenta que a gente tá usando aqui tu vai usar o replete ou algum out aplicativo aí de celular para fazer código tá no nosso canal tem um um vídeo do replit daí tu pode usar para fazer o fazer o código tá a gente não vai mostrar o replit aqui na live porque seria praticamente impossível mostrar as duas coisas ao mesmo tempo

né Então a gente vai mostrar o b code depois tu pode usar o vídeo lá do canal para adaptar e usar também a comunidade do discord lá da guia do Dev indobro para tirar as tuas dúvidas tá então eu abri e fechei a tag e eu posso daí escrever o o texto né o conteúdo da tag eu sou um parágrafo beleza como é que eu vejo o meu site né no navegador como é que eu vejo ele funcion para isso a gente vai usar o Live server que a gente instalou aquela extensão aqui ó tem

um botão go Live aqui embaixo tu pode clicar nele ou tu pode apertar aí no teu teclado Alt L Alt L Alt L leão ou de ovo aí ele vai abrir o teu navegador padrão aí né No meu caso é o Chrome Então ele abriu aqui ó com a tag aqui vou dar um zoom para vocês verem melhor então a tag já está aqui então aqui já tá o meu site minha página né com a tag Então é isso Parabéns vocês criaram o primeiro código primeira página aí HTML de vocês a página mais rápida do

mundo porque ela não tem nada né só carrega um um parágrafo Tá mas agora a gente vai começar realmente a criar o nosso código aqui então primeira coisa que eu que a gente pode fazer antes de sair metendo a mão do código né é voltar aqui no vest code ISO aqui eu V eu vou clicar em Down show alguém para ele não mostrar de novo essa opção e a gente vai criar a estrutura de pastas do nosso projeto aqui tem várias padrões que dá para seguir mas não faz tanta diferença num projeto simples como esse

tá o grande objetivo é que teu projeto fique organizado mesmo uma dica importante né como eu já falei tentem seguir o nome dos arquivos nomes de pastas Toda A nomenclatura que a gente usar aqui no projeto a gente aconselha que tu Siga a risca para evitar quebrar a cabeça com erro simples tá Segue o que a gente tá fazendo depois se tu quiser tu pode mudar e experimentar coisas mas quando teu projeto pronto tá então vamos lá vamos montar a estrutura da da seguinte maneira primeiro a gente vai e criar uma pasta aqui dentro então

aqui dentro do nosso projeto tu vai vir aqui nesse botão nova pasta E tu vai digitar src src é uma pasta de source né seria a fonte Seria onde vai estar todos os nossos arquivos mais importantes Tá feito isso a gente vai criar mais algumas pastas aqui dentro tá então clica com clica em cima desse dessa pasta assim como eu tô fazendo para selecionar ela clica no botão direito em cima dela e e vem nova pasta daí tu vai criar mais uma pasta imagens a enter e daí clica em cima do src de novo aqui

ó certifica que ele tá marcado aqui com esse und underline aqui clica o botão direito em cima do src nova pasta de novo é CSS então ele vai ficar assim a estrutura de src CSS imagens index P HTML pode clicar em cima do src de novo clicar com botão direito nova pasta e cria mais uma pasta JS tá então vai ter três pastinhas no CSS vai ficar nossos estilos que a gente vai fazer na aula de quinta na pasta de imagem vai ficar as imagens dos dos poked devs e na pasta JS vai ficar os

scripts que a gente vai fazer no sábado beleza tu pode clicar com botão direito em cima do src e vir aqui ó em revelar no explorador de arquivos tu consegue ver a pasta basicamente no teu computador tem tá assim pasta CRC e o index na raiz e dentro da pasta CRC Se tu entrar tem que ter as três pastinhas assim se tu fez assim tá tudo certinho se tu não fez assim volta na Live rever como é que eu fiz e faz da mesma maneira tá tem que est assim das imagens né eu vou colocar

as imagens do projeto na pasta de imagens a gente já tem essas imagens né E a nossa equipe vai pegar o zip das imagens e vai mandar lá no canal projeto traço poked devs que tá lá no nosso discord aberto na Gu Dev em dobro e daí a gente vai postar essas imagens lá tá daí como é que tu vai fazer para baixar as imagens né basicamente quando tu for pegar essas imagens eu vou até baixar ela aqui também já quando for baixar tu vai baixar um um um zip né então vai ser aqui ó

vai abrir a a janelinha vai ter o imagens. zip tu vai selecionar aí a pasta que tu quer né sal v e vai dar um abrir na pasta aqui eu já vou eu já posso ir direto na minha pasta né então projeto poked devs src imagens Na verdade eu vou salvar em outro lugar eu vou salvar no na área de trabalho mesmo tá daí eu vou lá na área de trabalho onde eu salvei clico com botão direito em cima do Zip veen aqui no Seven Zip né tem que ter um programa aí de Zip instalado

no teu computador o s Zip esse o set Zip é de graça Então pode usar ele daí tu vai vir aqui em extrair para imagens basicamente o que ele vai fazer é extrair uma pasta imagens com as imagens dentro essas imagens aqui beleza então tu pode abrir essa pasta de imagens selecionar todas as imagens dá um control clicar o botão direito em cima delas e Copiar todas abrir a pasta do teu projeto pode fazer aquilo que eu falei né pode vir aqui no no teu projeto do do vscode clicar aqui com o botão direito aqui

em cima em qualquer lugar na na pasta vir em revelar no explorador de arquivos e Navegar até a tua pasta de imagens clicar o botão direito e colar basicamente copiar e colar as imagens do Zip pra pasta do teu projeto bem simples beleza daí tu vai ter todas as imagens aqui já no teu projeto pra gente usar depois tá E é isso daí inclusive as imagens mudaram né não sei se vocês perceberam mas a gente depois que a gente já tinha feito aquelas outras a gente pensou vamos fazer eh pok devs nossos customizados a gente

usou uma ia para fazer eles diferentes e ficaram bem legais né inclusive uhum e Mas é isso só por isso que mudou né caso alguém esteja se perguntando é então beleza então é isso a estrutura inicial Tá pronta e como é que a gente começa a fazer um site né iso é uma dúvida que muita gente tem e que já é uma boa dica aí que a gente dá para vocês eu vou abrir de novo aqui o a nossa apresentação eu vou ir até a parte onde a gente fez um uma representação do site aqui

aqui ó tá Então esse é o nosso site 100% funcional né que a gente tá fazendo e a gente usa esse conceito de caixas né dentro do HTML como vocês viram ali né tem o bar dentro do bar tem pode ter um um p pode ter uma uma div né que é uma outra tag de divisão e dentro a gente vai colocando coisas como se a gente fosse colocando caixas dentro de caixas dentro de caixas então isso começa pelo B depois vai ind tem o tem a Main né nesse caso aqui que a gente vai

criar e assim por diante geralmente trabalhando em uma empresa vocês vão receber essa parte visual de outro profissional geralmente o designer essa parte que a gente chama de layout essa esse layout ele é feito em ferramentas específicas como o figma por exemplo isso não é parte do trabalho do programador né programador não não faz layouts geralmente e quem faz o layout é outro profissional depois ele passa esse layout para vocês transformarem em código como vocês como se vocês transformassem uma imagem em código então aqui a gente não tem layout né no projeto a gente não

fez um layout no figma eh por ser um projeto bem simples a gente fez isso tudo direto no código mesmo mas tu pode imaginar que isso aqui é um layout que nos passaram né que a gente recebeu de um designer por exemplo e agora tu vai precisar transformar isso em código HTML CSS JS Então agora que a gente já tem uma ideia da da estrutura que é essa aqui ó a gente a gente pode seguir isso para pensar em quais as tags né Quais as caixas que a gente vai ter que usar para criar esse

layout no nosso código então a gente fez essa representação para ajudar vocês a pensarem né então aqui nessa caixa Vermelha em volta de tudo seria o nosso Body depois dentro do Body a gente tem essa caixa laranja seria o o Main o Main é uma tag tá pessoal também então a gente vai ter várias tags aqui que a gente vai falando ao longo da Live então o HTML tem muitas tags tem 142 tags ah Beto mas eu preciso saber todas eu preciso decorar todas essas tags não princípio de Pareto vocês vão aprender só 20% dessas

tags E com isso vocês vão poder fazer 80% das coisas A grande maioria das tags vocês não não usam vocês usam muito mais poucas tags tá então Não se preocupem com isso não vocês não vão ter que aprender todas decorar todas a gente vai falar algumas aqui bem importantes essas você precisam prestar atenção mas depois você vai aprendendo o resto né ao longo do dos teus estudos Então a gente vai ter o Main que engloba tudo aqui né dentro do Body a gente vai ter uma outra div que é uma tag também de divisão que

é a poked devs que é essa rosa que fica dentro do M aqui ó em volta também de tudo o Main é uma tag só explicando o Main né Main é uma tag semântica que a gente chama né n a gente poderia usar uma div em vez de usar o Main mas o Main geralmente Onde fica o nosso conteúdo principal do nosso site Então em vez de usar Mad a gente pode usar o Main pro conteúdo principal porque daí fica mais semântico dá um significado maior para TAG então a semântica no HTML é bem importante

então a gente vai ter algumas tags semânticas como o Main o nave aqui aqui também ó que é uma tag de navegação navigation né para criar menus para criar listas então aqui por exemplo ó esse nave é a lista dos poked devs que tá em azul aqui e o div cartões poked Dev É esse aqui que tem o as informações do cartão do poked então tem uma caixa dentro de uma caixa dentro de uma caixa e dentro e daí dentro dessa caixa tem duas caixas então a gente pode ir montando isso na nossa cabeça né

separando as coisas em caixinhas Então é isso vamos pro vest code agora e começar a criar as nossas tags só antes antes de ir pro vest code vamos dar uma respirada dar uma uma pausa pra gente também te falar que aprender a programar já é E vai ser algo cada vez mais importante e imprescindível na sociedade em qualquer área Então quem aprender a programar vai ficar não vai ficar sem emprego porque a tecnologia só avança e o mercado precisa de bons desenvolvedores desenvolvedoras tanto em qualquer área mesmo assim hoje em dia a informática né a

tecnologia ela tá em tudo não tem muitas áreas que podem te dar o benefício da da área de programação hoje poder trabalhar de casa ganhar bons salários né des desde o começo da carreira trabalhar em empresas do exterior ganhando em dólar então isso são muitas são muitos benefícios que a área dá que outras áreas não dão quem acha que programar é minimamente interessante e quer ser valorizado realmente né Trabalhando em alguma coisa que que gosta e realmente valorizado ganhando bem não pode perder a chan de começar a aprender junto com a gente então hoje tu

tá dando o primeiro passo aí parabéns mas segue assim até o final tá isso que a gente tá mostrando aqui no evento com certeza vai fazer vocês economizarem alguns anos batendo cabeça sem saber o que estudar sem saber para onde ir Qual o passo dar depois então participem de todas as aulas peguem todos os materiais que vai ser vai valer muito a pena se tu chegou agora aí atrasado essa é a primeira Live de projeto que a gente tá fazendo da semana do zero programador contratado a gente vai a gente já começou o HTML e

esse projeto vai ter três partes HTML CSS e JavaScript então o CSS vai ser na quinta e o JavaScript vai ser no sábado no domingo a gente vai sortear um notebook também então participem aí da semana porque quem pegar todas as palavras no domingo a gente vai liberar a última palavra e vai fazer o sorteio aí pra galera comprometida Então já marca na tua agenda aí po falar Ah não eu ia falar exatamente isso Marcar na agenda de vocês aí para vocês verem a aula de amanhã né a quarta-feira 8 horas a gente liberar o

nível dois que seria a segunda aula da semana do zero programador onde a gente vai falar dos quatro grandes Marcos de aprendizagem que vão te tornar um programador em tempo record Então pessoal mais um aviso também que é que é interessante a nossa equipe ela vai ela vai compartilhar ou já compartilhou nos Stories do nosso Instagram no @dev dobro vários conteúdos legais que a gente fez sobre HTML também então já vai ser mais um conteúdo legal para tu aprofundar depois Principalmente um dicionário de tags HTML para iniciantes então vai lá no nosso Instagram para pegar

esse conteúdo depois também vai ficar nos Stories tá lembrando todas as aulas saem do ar no domingo então não deixa para assistir depois tudo no final da semana Beleza vai assistindo aí participando ao vivo junto com a gente que daí tu vai conseguir fazer o projeto tranquilamente não vai ter problema nenhum até domingo tu vai conseguir terminar se inscreve no evento também se tu ainda não é inscrito link tá aí na descrição e vamos voltar pro projeto aí uhum dá seguimento Então vamos voltar pro projeto vamos voltar lá pro nosso vs code no index atml

aqui e an gente primeira coisa a gente pode mudar esse title essa tag title essa tag title é a tag de título do nosso documento então eu posso escrever aqui poke devs traço semana do zero ao programador contratado o title como eu falei é o texto que aparece na aba do navegador como é que eu vejo isso abrindo no navegador né então já tem o nosso o nosso projeto aberto aqui aqui em cima se vocês forem ver já tá ali ó poked devs traz semana do zero ao programador contratado beleza por que que ele já

mudou né porque a gente tá com o Live server ativo aqui eu só vou dividir a tela tá pessoal na metade aqui do B code pra esquerda e o navegador pra direita pra gente poder ver as coisas acontecendo se eu botar aqui ó batata ele deveria ter atualizado não atualizou ah não tá atualiza aqui em cima eu vou escrever embaixo na verdade para ficar mais fácil de ver depois do parágrafo aqui batata então ó batata eu não salvei eu não fiz nada eu só escrevi batata e ele já salvou automaticamente e recarregou o site aqui

na direita isso porque a gente ativou o salvamento automático e a gente tá usando Live server Então vai ser muito bom pra gente poder ver as coisas acontecendo H em tempo real a gente não precisa ficar salvando recarregando aqui a página vai tudo acontecer em tempo real depois a gente pode vir aqui ó na tag de html no na no atributo lang né Lembrando que as tags T atributos e dentro aqui do valor que tá en né a gente pode botar PT br br maiúsculo tá só pra gente identificar que a língua dessa página é

PTBR né português do Brasil tá agora vamos criar a estrutura macro do projeto nosso HTML já tem a tag Body aqui né então é aqui dentro que a gente vai começar a colocar as outras tags então lembrando da apresentação lá a tag Main fica dentro da tag né então a gente pode vir aqui apagar esse P que a gente não vai usar e a gente pode já escrever Main beleza ele vai abrir e fechar para nós uma outra coisa que que é legal do vest code ó se eu se eu não escrever o sinal de

de de maior aqui maior ou de menor menor menor nunca sei eu posso escrever já o nome da tag Main daí ele vai dar ali ó abreviação emet daí eu posso dar um enter ele já vai também autocompletar para mim se vocês forem usar o autocomplete né só lembrem de botar isso hã ele cria toda a tag o abertura fechamento tudo sozinho tu não precisa ficar digitando é assim tá só lembre de não escrever assim ó se tu escrever assim e tentar fazer não vai funcionar então não pode ter isso isso aqui tira esse bendito

negocinho também se aparecer o m aqui ó e não apareceu abreviação tu pode vir aqui até o final da palavra e no teclado apertar control espaço daí ele reaparece daí tu dá um enter tá e dentro da Main fica a div de conteúdo né que a gente vai chamar depois de poked devs então só deixa eu voltar lá na apresentação para mostrar isso né Hã ó tinha o body daí tem o Main que a gente já criou e tem a div poked devs Então vamos criar ela dentro do Main também ó div e dentro do

dessa divide de de conteúdo aí vai ter uma div de do dos cartões e e uma navegação né então lembrando a gente criou aqui o body criou o Main criou a div Pokedex e agora dentro da div Pokedex a gente tem duas caixas que é essa aqui do cartão e a da navegação Então dentro dessa div aqui a gente pode criar mais duas mais uma div né div e embaixo Aqui né A gente pode criar um nave tá então vai ficar assim uma caixa dentro do Body dentro da Main mais uma caixa e dentro mais

duas caixinhas tá essa é a estrutura macro né agora uma coisa que a gente pode fazer também é colocar as classes nos nesses essas tags para que depois a gente consiga dar os estilos para esses elementos na aula de quinta-feira ah a utilização das classes né como é clas funcionam vai ficar mais claro na na na Live de projeto 2 na qua mas basicamente elas servem para estilizar as tags HTML e também ajudam a gente a situar dentro do código entend O código melor Então vamos criar essas classes aqui deixa eu abr aqui então aqui

ó na nessa div primeira div D um espaço e digita CL e d um enter el também vai autocompletar para ti eu posso escrever na mão igual abre e fecha aspas duplas pode também pode se quiser tá então vai ficar Class igual abre e fecha aspas duplas e daí aqui dentro vai o nome dessa classe V chamar ela de pok devs po de assim pok devs tá acho que poderia dar um zoom um nível de zoom azão hein depois a gente pode botar mais um div mais uma classe aqui dentro dessa outra div Class que

vai ser a cartões traço po Dev aqui não tem s tá poed mesmo ã notem que aqui eu separei elas com if os nessas duas palavras por quê Porque é uma classe com um nome composto Bic quando a gente quer criar uma casca nome composto a gente tem que botar um assim ele vai entender que isso aqui é uma classe só cartões né a gente não escreve assento cedil tá deem sem acento sem cedil sem nenhum dessas caracteres especiais então vai ficar meso e aqui na nave a gente pode criar mais uma classe que vai

ser a listagem Beleza se a gente olhar aqui no nosso site ó só de botar deixa eu abrir o nosso nosso site que a gente tá fazendo esse aqui ã só de botar deixa eu dar um zoom out agora né demais mas só de botar aqui as as classes não muda nada agora na verdade não tá aparecendo nada porque não tem conteúdo nenhum aqui no nosso Body né se eu botasse Oi aqui daí apareceria alguma coisa ó tá mas daqui a pouco a gente vai botar coisas aqui para aparecer então das classes é isso e

fica até mais claro o que que são né cada uma dessas coisas também com as classes agora vamos voltar e criar o HTML de mais algumas partes partes mais internas tá a gente pode começar pela div de cartões Pokémon Pokémon não poked devs que é onde vai ficar os cartões de cada poked a imagem e as informações então lá na nossa apresentação deixa eu mostrar para vocês a gente também criou como é que ficaria isso Ó então a gente já fez aqui a parte mais macro de fora então a gente vai indo para dentro né

Agora vamos pensar nessa parte aqui do cartão do do cartão mesmo cartão do poked Então dentro do vai ter essa div cartão pok deev que é essa aqui com a cor azul dentro dela vai ter duas dives duas outras dives uma div cartão trá topo que é essa aqui vai ficar as informações do Topo e a imagem e uma outra div embaixo que é a div de cartão informac coins são as informações do Pokémon pok Dev vai ser difícil agora mas é isso até a é uma div com duas dives dentro uma caixa com duas

caixas dentro então vamos fazer isso aqui na no no código cartões poked Dev a gente vai vir aqui ó aqui dentro vai dar um enter deixa eu dar um um zoom e vamos criar essas essas dives Então vamos criar div ter uma div e mais duas dives dentro né dessa maneira e a gente já pode botar as classes vai ter uma classe na primeira div que vai ser cartão traço pok Dev e n na div mais de dentro aqui vai ter também uma classe que vai ser a cartão traço topo e nessa vai ter uma

classe que vai ser cartão traço informa coins tá vai ficar assim ã aqui nessa primeira div a gente pode depois aqui do da do fechamento da das aspas Dá um espaço criar mais um atributo então a gente pode ter vários atributos no na mesma tag tá não tem problema ID igual abre fecha asas duplas e da gente vai colocar um ID essa esse atributo de ID que que ele é basicamente ele é uma identificação um ID né uma identificação dessa div geralmente o ID é único Então a gente vai criar só um ID na mesma

página né vou chamar de ã cal traço devu devu o nome desse desse bichinho cada bichinho vai ter um ID isso aqui a gente vai usar depois para poder ã mudar se eu não me engano lá no JavaScript tá então já deixa ele aí já deixa preparado e depois V mais para dentro ainda de cada uma das dives para colocar os conteúdos daí do do Dev aqui no caso né no cartão topo se a gente olhar aqui ó a gente vai ter esse o nome né nome dele o tipo dele elétrico o número de identificação

dele e a imagem tá então vamos criar essas tags lá dentro para cada uma dessas coisas a gente vai uma tag também né então pro nome por exemplo a gente pode usar uma tag de H2 H seria de heading que é um cabeçalho né a gente pode criar um cabeçalho essa tag de H ela tem do um ao seis então posso tem um H1 H2 H3 H4 h5 h6 o peso o o número indica o peso né o 1 é o maior mais peso semântico mais importância né é mais importante o título mais importante da

página é o H1 mas a gente vai criar um H2 porque ele não é um título tão tão importante assim tá o nome do do do bichinho Então é isso então H2 daí eu já posso escrever aqui dentro o nome dele né o Dev Shu e também posso dar uma classe para ele nome tá depois logo embaixo Aqui ó eu vou criar mais mais uma tag que vai ser a tag do número dele que daí eu posso usar uma outra tag que é a tag de spam spam daí eu posso digitar dentro ó # 0001

é 001 só tá então é o número dele ali que a gente viu lá na apresentação do cartão topo é isso eh depois aqui deixa eu ver cartão topo ah na verdade tem uma outra div aqui que a gente não botou eu acho deixa eu pegar esse pegar todo isso aqui vou dar um cont control X para recortar eu vou criar mais uma div aqui depois dentro do cartão topo Class detalhes daí dentro dela vou botar o H2 e o spam então vai ficar assim tá uma divide Class cartão topo tá aí dentro uma div

de CL detalhes e os detalhes aqui então só na verdade só agrupe eles né agrupe o nome e o spam dentro de uma outra div aqui isso aqui vai ser Vai facilitar a nossa visão estilização depois lá no CSS tá depois logo embaixo dessa divide classe detalhes eu vou criar mais um spam que vai ter a classe tipo e dentro aqui eu vou escrever elétrico que é aquele que é o tipo dele né que a gente viu aqui elétrico e apesar de ficar feio tu poderia botar um do lado do outro aí para eles verem

o que que tá aparecendo no HTML lá uhum não vai ter muita coisa tá pessoal porque né ó Então por enquanto assim Dev Shu 001 e elétrico que é as coisas que é os conteúdos que eu coloquei aqui de novo né ele não as tags El ele nunca vai colocar na tela tá ele vai interpretar o que que é cada coisa e vai daí aparecer o H2 por exemplo aqui aqui ele colocou aqui ó Dev Shu ele colocou de uma maneira um texto maior com mais destaque com um um bold aqui um né ã eu

tô com zoom aqui tá pessoal se eu quiser tirar o zoom do navegador eu clico no navegador e dou um control z0 daí eu tiro o zoom ou eu dou um control mais para dar zoom tá eu tô dando zoom aqui só para ficar mais fácil de vocês verem pode diminuir a largura do Chrome daí tu consegue dar zoom no no code tá então tá assim depois depois aqui do spam do elétrico eu vou criar mais uma div com uma classe cartão traço imagem e dentro dessa div eu vou criar uma imagem então IMG tag

IMG que é tag de imagem quando eu dou um enter ele cria a tag para mim aqui já com os atributos padrões dela e daí esse atributo src que é o Source né A fonte é onde tá essa imagem que eu quero carregar no meu projeto então eu posso dar ponto barra ponto barra é um é um comando que a gente basicamente diz olha a raiz do desse arquivo que eu t meendo que no caso é o index então na raiz doex tem o index e a pasta src code me ajuda já mostrando para mim

o que tem dou ent na src vem aqui na pasta de imagens dou um enter e daí eu carrego a imagem do dev.png enter eu faço isso ele já carrega aqui a imagem no site então quando a gente quer carregar imagens é com a tag IMG no Alt seria o texto alternativo né caso de algum problema nessa imagem eu posso ter um texto alternativo dizendo o que que é então aqui dentro eu posso escrever Dev Shu basicamente só para ter esse texto Então se ter algum problema na minha imagem aqui por exemplo ó pelo menos

o texto aparece isso aqui é bom para leitores leitores de tela também né pessoas que não que não enxergam por exemplo usam leitores de tela e o leitor diz o que que tem ali então é bom para acessibilidade tá é isso e daí a gente pode ir aqui pro cartão informações dentro do cartão traço informar coins eu vou ter também uma div de classe descricão que é a descrição né E dentro dela eu vou ter aqueles textos né ah eu vou ter esse texto descrição e o texto do próprio Dev então eu posso botar aqui

deixa eu botar ele aqui de volta para aqu ele descrição eu posso ter um H3 num heading 3 que é um pouco menos importante né por isso que a gente bota um número maior né é meio contraintuitivo Mas é isso mesmo o menor é o mais importante então H3 descrição E logo depois do H3 eu posso criar um uma tag de parágrafo eh que daí eu vou botar o texto do Dev sho vou copiar o texto do Dev Shu aqui só para não a gente não precisar ficar escrevendo tudo isso um comando legal também do

best code shift Alt F quando vocês dão shift Alt F ele indenta o código aqui ficou meio zoado eu posso até dar uma arrumada ó se eu quiser não vai dar mas eu vou arrumar assim eu vou dar um control um shift Tab para ele puxar eu seleciono as as as linhas que eu quero puxar e dou um shift Tab daí ele deixa arrumadinho assim então ficou aqui ó descrição e o texto esses textos aqui a gente vai mandar para vocês também lá no canal projeto traço poked deves do discord então entrem entrem lá e

a nossa equipe vai mandar para vocês todos os textos de todos os os poked devs tá assim Vocês não precisam ficar escrevendo a gente também não precisa ficar escrevendo aqui tudo todos esses textos na Live então o pessoal vai mandar lá e a gente criou basicamente o primeiro aqui né o nosso primeiro cartão poked que é o do Dev Shu mas a gente tem que criar os outros né a gente tem deixa eu ver quantos que são aqui seis seis né 1 2 3 4 5 6 a gente tem seis quando a gente clicar a

gente vai ter que trocar a imagem o o nome o tipo o número e a descrição Então a gente tem que criar mais seis desses dessas div cartão poked com cada um dos seus dos seus dos seus poked devs tá eh eu vou eu não vou criar tá na mão também porque ISO que daria um um belo um trabalho então eu vou copiar aqui o código que a gente tem e vou colar e tu faz a mesma coisa nossa equipe vai mandar aí no discord o código completo Daí tu só copia e cola então tu

vai copiar o código que eles vão mandar lá daí tu pode vir aqui ó Nessa primeira div de classe cartão poked vai selecionar ela nota que sempre que tem uma abertura e um fechamento de div tem uma linha aqui ó que que Segue até fechamento uma linha mais mais branca aqui ó tu consegue ver exatamente onde é o fechamento da div se tu botar o mouse em cima clicar em cima da div também ele te mostra aqui ó o fechamento Isso é muito bom sabe onde onde que começa e onde que termina aí tu pode

vir aqui selecionar toda essa div de cartão poked Dev e colar a que a gente vai te mandar tá deixa eu ver se vai ficar certo só né né div tem uma outra div aqui é É isso aí tá E daí tu pode indentar o código usando o shift Alt F aqui também então basicamente vai ficar assim aí lá no no no nosso site funcional ele já vai aparecer todos ó fazer todos os qualer deves aqui então é isso simples teve algum problema alguma dúvida volta na Live só mostra no segundo aí o que que

mudou porque muda o nome muda o o número muda o tipo é eu fiquei ali na imagem né mas é isso aqui ó basicamente muda o nome do o nome do poked aqui no ID muda também o nome aqui ó nas classes aqui era tipo elétrico aqui vai ser tipo fogo cada um vai ter uma classe do seu tipo isso vai servir depois pra gente estilizar ele também com a cor aqui certinha então quando é fogo tem essa esse fundo laranja quando é água tem o fundo azul então por isso que tem essa classe tipo

daí tem o nome tem o número tem o tipo aqui né também muda a própria imagem né Aqui eu só vou botar ponto barra então é acho que esse esse ponto aqui esse esse código sem ponto pode dar problema depois no no github Então acho que é melhor a nossa equipe mudar isso é tá sem ponto e não tá dando problema né então Hã tá sem ponto desde de sempre eh botem o ponto barra em tudo aqui nas imagens ponto barra ponto Bar Ponto bar Cadu falou que não dá problema mas botar também não vai

não vai matar ninguém mas se tu não botar é possível que funcione também nosso código lá no no github tá funcionando tá mas é isso então agora agora a gente já fez a parte dos cartões né todos os cartões então agora a gente tem que fazer a parte da listagem ã a listagem ela fica logo depois da div de cartões uma coisa que também é legal aqui do vs code é que tu consegue vir nessas setinhas aqui ó das dives e Minimizar elas ó fica mais fácil de ver o código pode por exemplo vir aqui

na nas dividas dos dos cartões e Minimizar que daí fica mais fácil de ver o código Ó tem a dívida de cartões daí tem cada uma das dívidas aqui do do poked específico se quiser ver de novo Tu clica aqui para abrir tá Daí o cartões é isso daí a gente tem que criar a listagem né se a gente voltar lá no na nossa apresentação Cadê esse aqui a gente consegue ver aqui que tem o cartões tem a dívid de cartões e do lado dela tem a dívid de listagem né então elas são irmãs e

as duas ficam dentro da div poked devs então aqui a gente tem a a poked o cartões e daí então a nave tem que ficar logo do lado dessa aqui então tu pode também clicar em cima ver onde é que fecha né Fecha aqui e aqui tem a nave Então a gente vai utilizar o nave agora navegação né no caso Então dentro da div nave a gente vai criar uma tag ul ul eh a nave eu já expliquei né uma uma tag de navegação geralmente a gente usa para listas ou para menus a ol é

uma tag de eh unordered list uma lista desordenada então quando a gente quer criar uma lista a gente vai usar essa tag de Então a gente vai criar o l e dentro a gente vai criar uma outra tag que é uma li o li seria o list item ou item de lista Então a gente tem uma lista com a gente pode ter uma lista com vários itens né pode ter por exemplo assim TRS itens quatro itens exatamente isso que a gente vai ter vai seis it item para cada poked dentro aqui da nossa tag de

well a gente pode criar eh dentro da L não tem classe mas aqui na li tem então aqui na li a gente vai criar uma classe porque Dev espaço ativa que que é isso né ativou quando eu dou um espaço no atributo de classe eu tô basicamente criando duas classes para esse elemento então tô dizendo que ele vai ter uma classe poked e também uma classe ativo tá essa classe ativo vai servir para mostrar ele lá depois por primeiro quando a gente abrir o site daí depois quando a gente for clicando nos outros itens da

lista a gente vai mostrando aquele poked respectivo eh além disso a gente tem botar um ID logo aqui depois do do CL Dev cada um vai ter um ID também dentro da lista se a gente for lá na nossa apresentação a gente consegue ver que a gente tem uma imagem do do Dev e o nome dele então exatamente isso que a gente vai criar aqui uma imagem TG psrc imagens Dev mesma imagem e no Alt a gente vai [Música] escrever também tá e embaixo a gente vai escrever daí o nome dele para isso a gente

vai usar um spam dev como é que fica isso no nosso site né Vamos abrir aqui então logo depois aqui deles vai ter essa vai ter a imagem do Dev Shu e a lista quando a gente tem esses pontinhos representação lista né dos itens da lista tá por isso que fica esse esses pontinhos daí a gente vai ter que ter também né uma li para cada poked então eu vou vou copiar Esses códigos Ah eu acho que esse código eu não sei se eu se a gente mandou pra equipe ess você tu pode só copiar

colar e escrever porque é rápido de fazer aí fáil para todos vamos vamos lá então segundo aqui vai ser Class não poderia copiar colar embaixo e mudar só o que precisa entendeu não precisaria digitar tudo Ah sim V fazer assim ó V apagar todas as ali deixar só a primeira ass pessoal copia a estrutura da li ela é igual certo então se se ela é igual só vai mudar as informações do daquele poked Dev específico então a gente pode copiar toda a estrutura Cola embaixo e altera só o que precisa entendeu só tomando cuidado para

alterar direitinho ali as coisas que precisa aí vocês vão ganhar tempo não precisa digitar tudo de novo ah C mas eu tô aprendendo não deveria digitar tudo P se tu quer se tu tá começando e tu quer digitar tudo todo HTML do zero beleza maravilha vai pode fazer mas geralmente no dia a dia do trabalho a gente vai dar um jeito de fazer do jeito mais simples né que é copiando colando e alterando as informações então seleciona todo ali control c para copiar control V para colar aqui logo embaixo daí tu tira a classe ativo

desse escreve o nome do do bichinho aqui né esse aqui é o script aqui também na imagem é o script ppng e aqui é scpt deixar com a primeira letra maiúscula em todos essa classe ativo ela se vocês viram lá na apresentação ela o item da lista ele fica marcado com um laranjinha indicando que aquele item é o que tá mar é aquele porque Dev é o que tá ativo no momento né O que tá aparecendo quando a gente clica então é basicamente para isso que serve essa classe é no site funcionando né agora por

isso que esse por isso que só um tem a classe ativo né só o primeiro quando carrega a página vem vem ele ativo troca o ID para code V 2e né troca a imagem para code v e o nome aqui também no Alt cola de novo Psy coder Psy coder e no Alt Psy coder cola de novo sharm Dev sharm andev sharm Dev sharm mandev cuidado nos nomes né pessoal se vocês errarem aqui um ID alguma coisa depois pode dar problema ficou Charmander ah charman Dev aqui também tem que trocar ó aqui é script terceiro

é code V code V aqui é Psy coder aqui é Charm Dev e esse aqui é o de vli puff Devil Puff a imagem é o Devil Puff o alt é o Devil Puff e aqui no sp Dev Puff Beleza acho que é isso basicamente eh criamos todas as as listas n se a gente olhar no HTML aqui ó basicamente o que a gente vai ver é isso aqui deixa eu dar um control zer aqui ó vai ter a imagem e o nome imagem e o nome imagem e nome e é isso só revisem né

olhem se o nomezinho tá condizente com o a imagem é só D deem essa revisada aí no de vocês também Uhum Então é isso a gente já tem aqui o HTML principal do projeto basicamente a estrutura né as tags então vocês viram aí né que a gente montou a estrutura com algumas tags é como se a gente montasse um quebra-cabeça ali com algumas um as tags indicando né O que que é cada coisa eh a gente vai fazer mais uma coisa agora que é basicamente colocar as fontes né preparar o projeto para as fontes e

ele tá bem estranho né o site aqui nosso site tá bem estranho obviamente porque a gente só colocou o HTML mesmo né Depois a gente vai estilizar todas essas tags mas eh CAD V é esse o a nossa equipe Já postou no Insta lá aquele post da Live e daí me avisa por favor eu não vou conseguir ver porque tô transmitindo a Live Deixa eu ver se eu consigo abrir em outro vou dar uma olhada equip pode olhar também e avisar mas é isso gente terminou a estrutura básica mas a fonte aqui ela tá meio

tá meio feia ó se a gente olhar a fonte aqui aqui em cima o Dev Shu e o texto e tudo mais comparar com a fonte que tá no site finalizado tá bem diferente ó ela é uma fonte mais estilizada mais bonitinha Então a gente vai deixar os deixar essa fonte preparada no nosso projeto também para que fique uma uma fonte bonita Então basicamente eu vou vir aqui dentro do Head então aqui ó no Head logo depois do title vocês podem já dar uns espaços aqui e a gente vai usar uma fonte do Google então

para isso a gente vai usar o Google fonts Então abre aqui o teu navegador e procura Google fonts no Google mesmo a primeira primeiro site é o Google fonts brows aqui aqui em cima na busca search fonts tu vai buscar pela fonte a gente vai usar a fonte popins p o PP e NS selecionar Poppins bem nesse botão aqui ó get Font daí que tem eh esse ele vai ficar marcado ali em cima ó é aqui pode vir não aqui pera aí aqui ó get Ed fonte get Ed Font daí vai abrir essa tela daí

tu pode importar a fonte do Google fonts no teu HTML basicamente é essa opção do link aqui ó então tu copia isso aqui tudo tu pode vir aqui nesse botão copy code se quiser aí pode vir na teu HTML e colar exatamente ali depois do title mas dentro do Head tá antes do fechamento do Head a shift F para indentar o teu código deixar ele bonitinho daí para usar essa fonte né se a gente só botar ele aqui não acontece nada ó no site não acontece nada não mudou a fonte ainda para mudar a fonte

a gente precisa estilizar essa fonte então a gente pode vou te mostrar aqui um exemplo tá deixa eu abrir aqui o cartão do do Dev Shu aqui no H2 mesmo dele logo depois aqui do do atributo de assim vou criar mais um atributo Style igual abre e fecha aspas duplas isso que tu não precisa fazer Tá eu vou só explicar como é que funciona a fonte ali só para deixar isso pronto mas essa fonte o estilo a gente vai botar no CSS depois aqui dentro eu vou digitar fonte traço Family dois pontos e depois de

dois pontos abre e fecha aspas simples Poppins fecha com ponto e vírgula ficar assim quando eu faço isso o texto aqui ó do devu já mudou eu vou tirar o Style todo e daí fica olhando aqui para ver a mudança ó essa é a fonte padrão Essa é a fonte estilizada com Poppins tá então todos os nossos essas Fontes depois vão ser estilizada com essa Poppins mas a gente vai fazer isso pelo CSS tá que é a forma correta essa forma aqui não é a melhor forma de fazer então eu vou apagar vou deixar como

tava antes só classe nome mesmo e e basicamente é isso pessoal o resultado final ficou esse feioso aqui mas a gente vai estilizar isso na próxima próxima Live né H Conseguiu ver Aí sim dá para botar na tela aqui mas eu vou da eu vou te derrubar aí do teu terminou Sim a nossa equipe postou lá no Instagram pessoal um post para te comentar lá o que que tu aprendeu Qual foi o teu maior aprendizado da Live de hoje sobre HTML tá se tu comentar lá Reza a lenda que aumenta em 95% a chance de

o notebook no final do sorteio então não custa nada tu comentar lá e engajar com a gente a gente vai ler os comentários e ver o que que tu aprendeu o que que tu mais gostou da Live de hoje e com HTML Pronto acho que ficou bem claro né que ele é a estrutura nosso rosto Ah sim ele é a estrutura base paraas páginas a partir daqui a gente vai continuar daí estilizando fazendo a parte de JS de de interação depois mas o HTML é um é um é um primeiro passo muito importante para um

desenvolvedor FR Change que quer trabalhar com com web né e mas é importante que vocês coloquem esses projetos em algum lugar também depois né então para que os próprios recrutadores possam ver isso ver a habilidade de vocês e chamar vocês para uma entrevista então a gente liberou quer falar aham a gente a a gente mandou isso né uma aulinha extra para vocês lá no discord como um bônus ensinando vocês a personalizarem o github de vocês n o github é a rede social dos programadores que vocês também colocam Os projetos que vocês estão fazendo como vitrine

né pros recrutadores para outras pessoas poderem olhar então a gente mandou lá no discord como que vocês personalizam o github para deixar o github de vocês diferente mais legal mais interessante tá tá lá no no discord então se não entrou no discord Entra lá e a gente mandou esses todos esses conteúdos lá pode pedir ali pra equipe que eles te mandam se tu não achar a gente mandou também acho que no no nos grupos de whats por e-mail também todas as informações tá também tem no nosso Instagram no no dind dobro nos destaques do nosso

Instagram também vai ter explicado Como que pega essa aula do de com personal analizar o github de vocês tá então vai lá no destaque que tem como pegar essa aula presente ali também coisa bem importante que a gente não falou mas a gente vai pegar o código que a gente fez hoje e vai subir ele e vai mandar um link para vocês para vocês eh poderem baixar esse código se vocês quiserem né acompanhar ele pegar e enfim olhar para ver se tá igual ao teu ou não comparar né com o teu código e a gente

vai mandar esse link para vocês depois tá lembrando Amanhã a gente vai fazer discord isso ho até agora quando Cadu finaliza aí eu posso ir ir subindo ele pode ser a segunda aula pessoal é amanhã né segunda aula é quarta-feira então vai ter uma aula daí né não é uma live é uma aula e na quinta-feira tem Live tá então só para vocês terem esse cronograma aí em mente lá no discord também tem um canal que tem o cronograma tu tem dúvida do que que vai rolar na semana Olha lá no cronograma que tu vai

saber direitinho mas na aula de amanhã a gente vai falar sobre o atalho do mapa primeira vaga em 7 meses então lá a gente vai ter essa aula onde a gente vai falar os Marcos quatro grandes Marcos de aprendizagem que a gente considera muito importantes para que nesses S meses de estudo tu consiga a base para que tu comece a poder aplicar para paraas vagas no mercado né construa a tua experiência essa aula é bem importante né não perde porque vai te dar daí o o um aprofundamento do caminho que tu precisa seguir ali para

conseguir virar um programador iniciante Beleza então se tu quer ser avisado da aula 2 de amanhã se inscreve no na semana do zero ao programador né O link tá aí na descrição da Live a gente já falou e entra nos grupos de whats também porque é lá que a gente consegue avisar vocês aí de tudo que tá rolando dentro do evento e estando ali no Whats tu vai receber a notificação na hora que a aula é lançada tu vai receber notificação sobre os materiais que tu vai poder eh retirar também né tudo gratuito então eh

só segue ali no no WhatsApp também né se inscreve no WhatsApp para não perder as notificações e na aula de amanhã a gente vai liberar a palavra número dois a segunda senha para vocês participarem do sorteio do notebook no valor de r$ 4000 na Live de domingo Então olha a aula amanhã pega anota a palavrinha né não manda para vinha PR os outros né que não assistiram o evento porque senão que nem a gente falou tu vai concorrer com pessoas que muitas vezes não assistiram as aulas não é bom tu concorrer com pessoas que não

tão comprometidas né concorram com as pessoas que realmente vão até o final quinta-feira a gente vai continuar o projeto Então a gente vai ensinar o que que é o CSS daí né deixar o nosso site bonitinho dessa vez né Não ele não vai ficar mais feio do jeito que ele tá a gente vai estilizar ele usando CSS e vocês vão começar a aprender aí uma linguagem nova também então não perde a Live de quinta-feira às 8 horas também né todas as lives aí são todos os conteúdos né as aulas as lives a gente libera às

8 horas e avisa vocês se inscreve as inscrições São só até amanhã né Depois a gente vai fechar Então se inscreve aí para não perder qualquer dúvida que tu tiver manda no discord da guilda né porque a gente não consegue nas lives responder dúvida técnica porque não tem como a gente tem que ver o código inclusive já fica a diga para vocês Ah tem teve erro no teu código zipa o teu código e manda ele zipado ou tira um print dá um jeito de mostrar pros pros monitores pra gente ali dentro da comunidade Qual é

o erro né Porque daí a gente consegue ajudar de forma mais rápida e mais fácil só falar Ah tá dando erro no meu código Tá mas aonde né Ah tá dando erro nas imagens explica mais né tenta já desenvolver essa tua habilidade de de comunicação explicar as coisas para que a gente consiga ter bem direitinho bem explicadinho o que que é o erro e te ajudar de uma forma bem mais rápida né ninguém quer ficar esperando para ser ajudado né e com mais informações a gente consegue ajudar mais rápido é isso aí pessoal eu subi

o zip lá já tá a gente vai a equipe vai mandar o link do Zip aqui no no chat dá para fixar também o link no no chat pra galera esa e vai mandar lá no no lá no discord também tá no canal projeto poked devs é uma página ali do HTML daí vai pedir o teu e-mail tu bota o mesmo e-mail que tu botou no teu no no cadastro ali do tua inscrição é só para liberar o o código mesmo tá Não esse e-mail não é usado depois para nada mas só para liberar o

código ali tu bota o mesmo e-mail e era isso Beleza vamos pegar aqui algumas dúvidas se se tiver algumas dúvidas se vocês tiverem dúvidas podem mandar eh não dúvidas técnicas né Tem uma dúvida técnica de algum problema vai lá do vai lá no discord e pergunta paraa galera JGT falou comecei do zero e entendi tudo ô delícia muito bom que bom ficamos felizes Eh manda o discord aí da dupla o discord tá na descrição da Live tem um link ali do nosso discord a guilda a guilda Dev em dobro tá Vine boladão com JS ainda

teria que fazer a criação das outras imagens tu dizes no HTML não sei se eu entendi muito bem mas sim tem que ter todas as imagens todos os poked ali no HTML aa muito boa mas não consegui acompanhar tranquilo clud pode rever a Live vai ficar gravada aí Se tiver dúvida vai lá no discord pergunta pra galera baixa o código aí que a gente vai mandar compara com o teu mundo P Falou boa explicação sensacional obrigado Petr só não entendi o que é a tag SP e Alt a tag Spa é uma tag não é

uma tag semântica assim ela não tem um significado tão tão importante né geralmente é pra gente escrever textos textos mais curtos mais com não não tem que não tenam significado tão forte e e o alt é um atributo na verdade né um atributo da tag ele serve para eu expliquei lá no comecinho Mas é ele é o texto alternativo da imagem quando dá algum problema na imagem é o out que vai aparecer daí ele vai tá lá escrito que que é a imagem isso também é bom para leitores de tela para quem não não enxerga

né pessoal quem se perdeu teve algum problema isso é normal tá eh não não se comparem com as outras pessoas só porque tem Teve gente que falou que entendeu se tu não entendeu é normal é revê a Live tira as tuas dúvidas lá no discord porque daí tu vai entender com certeza tá vai ficar gravado aí até domingo então tu pode ver quantas vezes quiser e é normal não entender de primeira mas com certeza tu consegue entender aí e também na aula de CSS de quinta né a gente vai daí estilizar essas tags então vai

ficar mais fácil ainda então se tu não entendeu muito bem já participa da Live de quinta porque lá daí tu vai Talvez entender bem melhor tinha falado que não encontrou o link mas caso você não tem não vejam o link de um F5 que o link tá aí na descrição só olhar direitinho que ele tá aí né e o que Falou meu querido uma dúvida na área de linguística precisa saber falar em inglês ou só ler escrever em inglês não precisa saber falar em inglês para começar a estudar programação pode começar a aprender sem saber

inglês depois tu é bom que tu aprenda porque muito conteúdo tá em inglês tu pode trabalhar para empresas do exterior mas no começo para aprender até para trabalhar não precisa ter um um inglês não precisa dominar inglês não o essar falou sou completamente leigo e compreendi Praticamente tudo que foi abordado graças à didática Que bom ficou muito feliz n achei que eu tava indo meio rápido mas acho que vai passar talvez tenha sido um pouco rápido mas né vai passar a aula ainda tá pra galera poder assistir sim ã Bom eu acho que é bastante

dúvida né pessoal mas se vocês tiverem dúvidas mandem lá no discord também a gente vai conversando com vocês por lá ã customiz o projeto mandar o link aí é que consegi mandar o link no chat e fixar pra galera pegar vou ver a equipe falem com nós falem com nós falem com conosco mandei o zip tá mandaram sim mandou o zip no quanto Cadu V eu vou vou lendo aqui discord YouTube qual a diferença entre as lives e as aulas as lives são a lives lives de projeto as aulas são aulas sobre a áa de

programação e também tem Ah o mapa né mapa do zero até o teu primeiro emprego então lá a gente percorre o mapa gente mostra os benefícios da área o que estudar quais linguagens quanto tempo então são são complementos muito importantes a aula as aulas são importantíssimas se se eu precisasse priorizar alguma coisa eu priorizaria as aulas as aulas são gravadas né Elas não são ao vivo as lives são ao também tem essa diferença inclusive aproveitando o gancho das aulas Bora vamos vamos lançar a aula um aí pra galera porque são aulas bem importantes né pessoal

e se tu ainda não assistiu e tu tá querendo continuar aí na Live tá querendo mais conteúdo a gente vai passar a aula um agora no fim da Live para quem não assistiu né a gente liberou ela ontem e essa aula é bem bem legal bem importante a gente fala das maiores Recompensas da área de programação e para assistir a aula dois Amanhã tu precisa ter assistido o nível um que é a aula que a gente vai passar daqui a pouquinho quer ler essa depois a gente a gente bota aula ou não pessoal o link

o link para fazer o download aí da do código que a gente fez hoje tá na tá fixado no chat tá só botar teu e-mail ali ah alguém falou que não conseguiu baixar pelo celular depois dá para dar uma revisada ali mas não era para dar problema tá É mas ele vai te redirecionar para um drive e daí tu só faz o download ali então vamos botar a aula um aí para vocês assistirem nessa aula a gente fala de dos salários né salários que tu pode esperar virando programador que vão desde r$ 3.000 como programador

iniciante né numa média podem chegar a salários de 10 20 de r$ 3.000 vocês vão ver ali na na aula como programador Sênior né claro depois de bastante depois de bastante tempo de experiência né mas né qual é a área que tem salários aí com esse desse nível né Muito difícil inclusive dá para ganhar mais trabalhando remotamente né a gente vai mostrar também na na aula salários de de de fora do Brasil né que pagam em dólar e vão além de R 30.000 Beleza então a gente vai dar só mais essa chance para quem não

viu a aula e não pegou a palavra vamos passar a aula agora ao vivo para vocês poderem pegar a palavra e concorrer ao sorteio também ela uma aula bem rápida Mas ela tá cheia de formações valiosas ali não esquece de anotar a palavra também para poder participar do sorteio domingo e concorrer ao notebook pessoal tá perguntando se vai ter palavra Hoje não tem palavras chave em lives as palavras chaves são sempre nas aulas na verdade agora tem né É porque como a gente passa a aula no final passa a aula e passa a palavra Mas

se vocês querem a palavra pal antes assistam as aulas tá e o código tá a gente já mandou também mandou lá no discord no canal projeto poked devs e tá fixado aí no chat também do do YouTube então fiquem agora com a aula um da semana dos er programador contratado da que a gente fala das oportunidades aí na área de tecnologia um abraço ficou até agora João perguntou eu ainda posso assistir a aula um pelo link que eu recebi sim também tchau valeu pessoal abraços para vocês boa noite se vê aí quinta-feira na Live né

[Música] falou seja muito bem-vindo e muito bem-vinda a semana do zero ao programador contratado eu sou Ricardo Dias e eu sou Roberto Dias e nós somos programadores há mais de 12 anos recrutadores na área de tecnologia e especialistas em empregabilidade na área de programação e também somos os criadores do Devin do e aqui na semana do zero ao programador contratado a gente vai te dar um mapa com um passo a passo capaz de te conseguir o primeiro emprego de até R 3.000 como programador em 7 meses mesmo que tu esteja começando do zero e nunca

tenha visto nada de programação na aula de hoje vamos te passar informações extremamente importantes e valiosas e muita gente não sabe sobre as oportunidades que a área de programação proporciona a gente vai falar sobre salários vaga de Júnior sem experiência no currículo se tu deve ou não fazer uma faculdade e sobre a possibilidade de trabalhar de casa em empresas do exterior ganhando em dólar Então bora é possível sim conseguir o teu primeiro emprego de até r$ 3.000 em 7 meses começando do zero e se tu tá duvidando que isso é possível dá uma olhada aí

na história Desse pessoal que conseguiu a primeira vaga com o programador usando essa metodologia que a gente vai te ensinar é essa semana Fala galera eu sou o Antônio tenho 28 anos sou de Natal Rio Grande do Norte eu era tendente de caixa eu conheci o canal do gêmeos no YouTube Comecei a assistir muitos vídeos com e do absoluto zero em fevereiro em setembro eu fui contratado por uma empresa multinacional com uma sede na China e uma filial aqui no Brasil em São Paulo e hoje eu trabalho remotamente aqui da minha casa para essa empresa

eu tive oportunidade de conhecer o método dos gêmeos depois de 3 meses de estudo eu já estava fazendo algumas entrevistas e o meu SIM definitivo veio após 5 meses de método eu me perdia muito procurando tentando fazer um projeto aqui outro ali e com eles não com eles eu fui passo a passo certinho do jeito que era para ser e começou a dar certo começou a andar entendeu eu já vinha estudando algum tempo e graças a metodologia dos gêmeos eu consegui minha vaga em seis meses poucas vezes eu estive tão feliz na minha vida quanto

T agora para falar a verdade mesmo porque agora eu tenho uma visão assim de futuro entendeu de que algo de que o futuro tem algo melhor para mim entendeu os conselhos deles eu comecei a aplicar e logo depois em dois meses já em abril Eu Fui aprovado agora vai fazer já tô para fazer quase um ano de empresa eu sou o Vitor Eu tenho 23 anos eu moro Inter coatiara Amazonas eu estava meio perdido na área eu estudava né é diversos assuntos sem ter assim uma direção correta para seguir na área estudando sozinho é muito

difícil Eu tenho um planejamento né de estudos só pela didática que eles mostraram no evento eu achei ele muito interessante né e coisas que eu não conseguia entender estudando sozinho eu consegui entender ali com eles naquele momento e é um método assim muito direcionado não tem muita rolação né é aquilo que realmente o mercado pede né quais tecnologias seguir Quais coisas que são essenciais para aprender de cada tecnologia é seguindo método do gêmeos eu consegui ali por volta de se meses é minha primeira vaga né estudando todos os dias Agora que eu consegui a vaga

me sinto realizado né porque era um sonho que eu tinha a gente sabe que o instinto quando tu vê essas pessoas falando das suas conquistas é pensar Ah mas eles são geniozinho para conseguir isso tão rápido ou Ah eles devem ter estudado 10 horas por dia e não tu não precisa de nenhum dom especial para ser programador essas pessoas são pessoas comuns que estão migrando de área que tem as suas dificuldades diversas aí que nem tu mas que seguiram o planejamento correto e não mediram esforços para conseguir mudar de vida com a programação mas para

entrar em uma boa empresa existe um caminho certo a ser percorrido e a gente vai te dar um mapa completo desse caminho aqui na semana do zero ao programador contratado e ó só para que tu tenha uma visão das vagas que existem para programadores iniciantes olha as que a gente encontrou fazendo uma busca rápida produção Solta esse VT [Música] aí beleza e agora tu tá pensando asbo Ok essas vagas existem mas conseguir um emprego em 7 meses é muito pouco tempo mas a gente garante que não é porque quem aplica direitinho o método que a

gente desenvolveu tem esses mesmos resultados Mas agora vamos contar um pouquinho da nossa história com programadores para que tu saiba de onde veio esse [Música] método eu sou Ricardo Dias e eu sou Roberto dias nós somos gêmeas né como dá para perceber Mas a gente não é parecido só Na aparência a gente tem praticamente os mesmos gostos a gente gosta de anime de Mangá de mm RPG de quadrinho videogame hambúrguer pizza gosta de comprar bonequinho também gosta de gatinho de café todos esses gostos aí de nerd Né desde o Maternal a gente tá junto na

verdade até antes disso né dentro da barriga da nossa mãe a gente passou pela Maternal passou pela escolinha depois a gente foi pro Ensino Fundamental ensino médio tudo junto sempre até que a gente chegou na faculdade e na facudade a gente fez exatamente o mesmo curso também que foi análise e desenvolvimento de sistemas e a gente se formou em 2009 e depois de ter feito aí a faculdade a gente ainda continuou nossa jornada juntos a gente trabalhou nas mesmas empresas a gente teve também a nossa própria empresa né E toda essa jornada aí tem já

faz uns 15 anos né desde que a gente começou na faculdade até todo o trabalho que a gente teve aí nessas empresas então desde lá até agora a gente já fez Praticamente tudo aí que a área de programação tem para oferecer Inclusive a gente já trabalh para empresas bem conceituadas na área que estão até lá no gptw para quem não sabe o gptw significa great Places to work e ele agrega várias empresas do Brasil e do mundo também que são os melhores lugares para se trabalhar mas vamos voltar um pouco aí depois de da gente

terminar o colégio a gente chegou naquele ponto que todo mundo chega de ter que escolher uma faculdade né rola aquela pressãozinha da família tu tem que escolher alguma coisa e a nossa primeira escolha de faculdade foi economia acabou não rolando graças a Deus porque eu acho que a gente seria bem frustrado trabalhando com a economia hoje e não t entrada na área de tecnologia principalmente né E daí a gente pensou o que mais a gente gosta de fazer então jogar videogame Óbvio Então vamos fazer uma faculdade de desenvolvimento de jogos né obviamente muito fácil é

achando que seria muito fácil mas ok E no fim essa faculdade ela não conseguiu fechar a turma porque teve uma procura muito baixa nesse momento aí a gente pensou bom faculdade de jogos não rolou mas a gente também gosta de ficar o dia inteiro na frente do computador às vezes então talvez a Faculdade de Tecnologia ela faça sentido pra gente né vamos tirar de letra Easy totalmente fácil só que engano nosso né a gente acabou tendo bastante dificuldade no começo dos estudos a gente achou algumas matérias da Faculdade bem difíceis e o pior tinham colegas

nossos que entendiam algumas coisas mais técnicas com mais facilidade isso dava uma raiva né Inclusive a gente ficava se perguntando né Será que essa área é realmente para mim né visto que eu não entendo merda nenhuma do que que tá acontecendo mas com muita força de vontade a gente foi levando a faculdade e se virando com que a a gente aprendia lá mas só um detalhe a faculdade não aprofundava quase nada na programação em si guardem essa informação porque ela vai sair bem importante daqui a pouco o primeiro problema a gente já falou né que

era que a gente tinha bastante dificuldade em algumas matérias da Faculdade e agora vem o segundo como a faculdade não aprofundava tanto na parte da programação em si a gente acabava não botando muito a mão no código a gente não se sentia muito confiante de conseguir chegar lá e aplicar para uma vaga de emprego e também não sabia nem muito bem como se se preparar para conseguir uma vaga né como fazer uma entrevista por exemplo é para vocês terem uma ideia eu só consegui o meu primeiro emprego depois de 2 anos estudando na faculdade e

para mim foi pior ainda eu só consegui uma bolsa depois de formado então foi 3 anos depois de começar a estudar mas pelo menos o primeiro emprego veio né o primeiro emprego chegou só que quando a gente achou daí que tava Tudo se encaminhando apareceu daí o terceiro problema nos nossos primeiros dias de emprego a gente percebeu que a gente sabia muito pouco da programação que as empresas usavam no mundo real Muito provavelmente porque que a faculdade geralmente não foca tanto no conhecimento da programação que o mercado pede foca mais no conhecimento um pouco mais

acadêmico dentro da empresa a gente travava muito para fazer as tarefas sozinhos né a gente dependia bastante dos nossos colegas mais Senior e hoje em dia a gente sabe que a gente deveria ter focado em ficar bom desde cedo nas tecnologias que o mercado realmente precisa algo que hoje parece muito Óbvio para nós mas não é pra maioria das pessoas que tá começando e não foi para nós também lá no começo mas mesmo com todos os desafios aí a gente conseguiu chegar lá a gente trabalhou aí como programadores Sênior especialistas ganhando um salário de mais

de r$ 1.000 e depois dessa evolução aí na nossa carreira Ficou bem claro pra gente todas as oportunidades que cara de programação tem mas também ficou claro que é possível chegar aonde a gente chegou na metade do tempo se a pessoa tem um bom passo a passo para seguir e também a ajuda de mentores de pessoas para ajudar ela que já percorreram esse caminho e sabem atalhos né para chegar mais rápido no objetivo de aprender programação e trabalhar na área nessa nossa jornada de mais de uma década no mercado de tecnologia a gente sempre incentivou

vários amigos nossos conhecidos e até mesmo nosso irmão mais novo né e a entrar na programação porque a gente queria que eles também aproveitassem todos os benefícios que a gente conseguiu trabalhando na área eu era até meio chato Ainda sou na verdade né naquela época a gente pegava táxi e apresentava a palavra da programação até pro taxista hoje eu pego um Uber e eu faço a mesa coisa apresento a palavra da programação pro Uber lá e muitas dessas pessoas começaram de fato a estudar programação que foi muito legal e quando a gente conversava com elas

foi ficando óbvio que elas estavam passando pelas mesmas dificuldades que a gente passou por exemplo não sei se eu preciso de faculdade para virar programador não sei qual o melhor caminho que eu tenho para seguir parece que os conceitos não entram na minha cabeça ou tô estudando Há muitos meses e parece que eu não saio do lugar e também uma que a gente vê bastante que é tô com dificuldade de conseguir meu primeiro emprego mas a diferença é que agora a gente sabia exatamente como resolver todos esses problemas e foi aí que a gente pensou

como a gente pode passar todas essas dicas e atalhos para mais pessoas que estão começando e com isso surgiu o nosso canal o Dev em dobro onde a gente dá as melhores dicas para quem tá iniciando na programação que são dicas que realmente ajudam a pessoa a chegar onde a gente chegou na metade do tempo e Com todas essas dicas e atalhos a gente viu que dava para fazer literalmente um mapa que te leva do zero até a tua primeira a vaga de programação da forma mais eficiente e rápida a gente se dedicou bastante para

criar esse mapa e esse evento aqui também que tu tá participando e a gente começou a passar esse método aqui que a gente vai te mostrar para todo mundo que queria aprender programação E em menos de um ano a gente reuniu dezenas de milhares de pessoas aí ao redor do Brasil que começaram a aplicar e conseguir vagas no mercado de tecnologia usando essa metodologia a cada dia tem mais e mais pessoas vindo nos contar o quanto o nosso método fez diferença resol veu problemas e principalmente também gerou resultados mudando a vida dessas pessoas que conseguiram

o primeiro emprego como programador ou programadora em 7 meses recebendo um salário de até R 3.000 Então aproveita o máximo desse mapa e desse evento que com certeza vai mudar tua [Música] [Aplausos] [Música] vida nessa aula a gente vai te falar sobre as maiores oportunidades que a área de programação proporciona como tu tá começando aprender sobre programação agora provavelmente Tu não tem noção de tudo que a área pode te oferecer Então a gente vai te dar um gustinho do que te espera na tua carreira de programador e a última oportunidade é a que a gente

considera a melhor de todas então fica até o final oportunidade número um trabalhar mesmo sem faculdade Beto eu preciso de faculdade para trabalhar na área bom essa é rápida não não precisa Então pode ir pra próxim [Música] [Risadas] [Música] a verdade é que a faculdade não é obrigatória e nunca foi para quem quer virar programador Digamos que como quase 9999% das pessoas tu quer escolher uma carreira que com certeza vai te dar um bom salário pode ter certeza que a maior parte delas vai exigir faculdade quer ser um advogado e ganhar muito bem Tem que

fazer faculdade arquiteto Engenheiro faculdades super difíceis inclusive quer ser médico e ganhar uma bolada faculdade também E ainda por cima em Muitas delas aí mesmo depois de mais de 4 anos de estudo tu ainda vai começar na área sendo recompensado com o quê um belo salário mínimo e essa é uma grande vantagem da área de programação não é necessário fazer uma faculdade para virar um programador pelo menos ainda então aproveita e a gente fala isso porque a gente fez faculdade e saiu da faculdade sem saber programar quase nada ah mas CAD e beta então vocês

são bos Olha se tu olhar a grade curricular da grande maioria das faculdades aí tu vai ver que só algumas matérias são de programação de fato que o objetivo da faculdade geralmente não é aprofundar na programação propriamente dita e sim te dá uma visão Geral de várias áreas da tecnologia fora que o objetivo da faculdade é te dar um ensino mais acadêmico e não tão prático Tá mas então como se tornar um bom programador sem faculdade se o teu objetivo é ser um programador profissional o ideal é focar toda a tua energia em aprender a

base da programação e construir projetos para demonstrar as tuas habilidades porque é isso que os recrutadores procuram pensa comigo Digamos que tu é dono de uma empresa de tecnologia a empresa batat Tec e eu vou te dar duas opções de programador para contratar opção um alguém que acabou de se formar na faculdade tá com o diplominha ali na mão mas não tem projetos não tem sites não desenvolveu quase nada que comprova o conhecimento dele e acreditem isso acontece bastante ou opção dois alguém sem diploma mas com conhecimentos comprovados através de vários projetos práticos que ele

mesmo fez ou seja uma pessoa que claramente tem noções de programação do mundo real que é utilizada no dia a dia da empresa e vai poder colaborar pra evolução dela é claro que tu vai escolher a segunda opção para trabalhar na batata Tec tu só não vai escolher se tu for maluco Inclusive a gente como recrutadores já escolheu diversas vezes esse tipo de profissional porque em algumas empresas que a gente trabalhou a gente também recrutava os programadores Juniores que entravam para trabalhar com a gente e no final das contas a gente queria uma pessoa que

tinha conhecimento prático me chamo Mateus tenho 20 anos metade do ano passado mais ou menos foi quando eu realmente comecei a ver mais coisas sobre programação sobre curso sobre a área de Tecnologia em si foi quando eu comecei realmente me interessar assim para buscar para pesquisar mas eu não tinha noção nenhuma consumia muito conteúdo solto mas eu queria entrar na área e não não tinha conhecimento nenhum de direito assim de programação a plataforma foi o que mais me chamou a atenção foi a questão da da organização sabe tipo por etapas tudo bem organizado assim então

acabou por ter conseguido fazer algo assim tipo logo de cara e funcionando ali mostrar para outras pessoas um site ali publicado tipo me deu empolgação e também pela didática de vocês eu tô trabalhando como desenvolvedor web Júnior com foco no front end mas já cheguei mexer algumas coisas de backend também 5 meses que eu comecei a realmente estudar o curso fui especializando especializando e aplicando pra vaga até conseguir o primeiro emprego quando eu consegui foi uma virada também de de chave assim na minha cabeça muito grande que eu consegui realmente entrar no mercado e ver

que aquilo ali valeu a pena sabe tipo foi foi muito bom oportunidade número dois ver resultado rápido uma característica muito legal da programação é que com o estudo e dedicação é possível ver resultado muito rápido em alguns meses tu pode aprender o suficiente para criar projetos fazer um frea para alguém ou até ser contratado por uma empresa e o resultado além de ser mais rápido é bem recompensado também assim como quando a gente começa ali a aprender a tocar violão a gente só percebe que tá aprendendo realmente quando tu consegue tocar a primeira música né

na programação a gente também só percebe que tá aprendendo quando a gente consegue fazer o nosso primeiro site sozinho mesmo que simples e com um bom planejamento dá para fazer isso sim em dois meses claro que é assim né pessoal em dois ou três meses tu não vai conseguir criar o Mercado Livre 2.0 mas pode ser o suficiente aí para quem sabe até ganhar uma graninha fazendo um fre aí para conhecido teu até um freela para quem não sabe esse termo é um trabalho de freelancer tu presta um serviço para alguém por exemplo tu cria

um site aí pra padaria da esquina da tua casa e recebe um dinheiro por esse serviço mas se o teu objetivo é entrar em uma empresa o ideal é que tu se prepare um pouquinho mais tá mas não se preocupa porque a gente vai te dar o caminho Claro e mais eficiente para fazer isso a gente estipulou que com 7 meses de estudo sabendo no que focar tuas energias é possível sim que tu aprenda a base necessária para que tu consiga a tua primeira vaga como programador e ganhando a média salarial do programador Júnior que

é de até r$ 3.000 Meu nome é Bruno sou de Recife Pernambuco tenho 34 anos migrei de carreira nesse ano eu era da área de eletrotécnico sou eletrotécnico formado mas antes disso conhecimento na na programação Era Zero quando eu fechei com vocês a falta que eu tava sentindo foi suprida e consegui a minha a minha entrevista com com o ce e no dia seguinte já apareceu a vaga eu apliquei aí demorou um tempinho me chamaram na foi na primeira entrevista né é muito gratificante ver que seu esforço foi recompensado imaginar que seria tão rápido eu

não imaginava no nível dois a gente vai explicar direitinho o porquê do número sete e te apresentar os Marcos de aprendizagem do programador iniciante Então a gente vai te dar de bandeja a lista completa de tudo que tu precisa aprender durante esses meses aí para conquistar o conhecimento base de programação que é suficiente para conquistar a tua primeira vaga e um spoiler é bem menos coisa do que tu imagina oportunidade número três trabalhar mesmo sem experiência mas ok eu não tenho faculdade e nem tenho experiência meu currículo só tem o meu nome como é que

alguma empresa vai querer me contratar é meio óbvio que se teu Currículo só tem o teu nome o que que tu tá estudando agora no momento e uma biografia ali falando que tu gosta de longas caminhadas na praia Ninguém vai querer te contratar por isso que a gente fala tanto da importância de fazer bons os projetos eles que vão realmente comprovar a tua experiência com programação mas gêmeos o que que seriam bons projetos um site uma Landing page ou qualquer projeto que de novo demonstre na prática que tu tem as habilidades técnicas de programação que

as empresas precisam Porque mesmo que tu tenha o currículo lotado de cursos se tu não conseguir demonstrar tudo o que tu aprendeu nesses cursos através de projetos o recrutador não vai ter certeza do teu nível de conhecimento e se tu tá realmente apto a trabalhar então agora que tu já sabe a importância de ter bons projetos continua acompanhando a semana do zero ao programador contratado que durante o evento a gente vai botar a mão na massa mesmo e criar um projeto ao vivo e do zero junto contigo esse projeto de programação que tá aparecendo aí

na tela agora e não se preocupa tu vai conseguir fazer ele mesmo que tu não saiba absolutamente nada de programação oportunidade número quatro trabalhar remotamente de qualquer lugar para qualquer lugar trabalhar remotamente virou algo comum depois da pandemia né mas para programa Ades isso sempre foi comum em comparação a outras áreas enquanto na maioria das áreas as pessoas precisam trabalhar presencialmente pegando chuva buzão lotado e perdendo o seu precioso tempo se deslocando tu pode evitar tudo isso na tua vida e continuar trabalhando remoto do conforto da tua casa E além disso quando a gente fala

de trabalho remoto a nossa vida ganha todo um novo leque de oportunidades muita gente quer trabalhar remoto simplesmente porque prefere ficar em casa com a família ou que é mais produtivo sozinho que nem a gente a gente adora trabalhar de casa mas também tem as pessas pessoas que usufruem do trabalho remoto para se mudar para outros estados ou países por exemplo viram nômades digitais vão pra Tailândia lá se mudam com frequência ou viajam também enquanto trabalham sem falar que trabalhando remotamente tu pode trabalhar para empresas de qualquer lugar do mundo sim fica pensando aí que

tem poucas opções porque a tua cidade é pequena e não tem empresas de tecnologia Mas tu pode simplesmente aplicar para vagas remotas de grandes cidades aí do Brasil como São Paulo por exemplo ou qualquer outro lugar do Brasil e do mundo inclusive e a gente já vai falar sobre essa última parte que é de longe a mais lucrativa de todas Olá pessoal meu nome é Dener Eu tenho 23 anos sou do interior da Bahia Uma cidadezinha chamada Conceição do Coité antes do curso era atendente de padaria e assim Eu sempre tive interesse em estudar programação

estudei muito por conta própria só que eu estudava bastante nada entrava na minha cabeça não tinha uma metodologia e através do gêmeas eu pude seguir uma diretriz onde eu aprendi do básico ao avançado segui todo o passo a passo do zero e eu tenho certeza que isso fez toda a diferença hoje graças a isso eu sou desenvolvedor frontend é trabalho em Startup de tecnologia trabalho com outros colegas também do do curso meu trabalho é home office então melhorou muito minha qualidade de vida eu sei que o esforço tem que vir primeiramente de mim mas os

gêmeos fizeram um trabalho muito incrível com muita dedicação com muito amor e eu acho que isso fez Total diferença então meu muito obrigado aos gêmeos aí oportunidade número cinco ganhar bem e ganhar melhor ainda a gente já falou um pouco hoje sobre a média salarial do programador Júnior que é de r$ 3.000 segundo o site glassdor O glassdor é um site onde os próprios programadores informam o seus salários que recebem nas empresas onde eles trabalham mas o que muita gente não sabe é que na área de programação é possível dobrar de salário em até 2

anos a gente tem mais um irmão que já respondendo a dúvida de várias pessoas aí não é nosso trigêmeo ele também é programador inclusive sim três programadores e ele é um ótimo exemplo desse caso ele era programador Júnior tava ganhando lá r$ 500 e recebeu uma proposta em outra empresa oferecendo um salário de R 6.500 isso apenas do anos depois e eu também sou um bom exemplo disso em uma das empresas que eu trabalhei recentemente até eu comecei recebendo um salário de R 7.500 E só 1 ano e meio depois eu passei a ganhar um

pouco mais do que o dobro disso e tu pode estar pensando ah mas lá no glassdor tá dizendo que a média salarial de um Devid Júnior é de r$ 3.000 mas as vagas que eu vejo de iniciante eu encontro por aí elas pagam muito menos do que isso mas não se preocupa que a gente tenha solução para isso e para receber essas dicas aí Segue acompanhando esse evento até o fim que a gente vai te mostrar o que que tu tá fazendo de errado nessa tua procura por vagas oportunidade número seis trabalhar para empresas gringas

é claro que essa parte exige um conhecimento Extra que é de idiomas caso trabalho para uma empresa que não fala português mas a gente não poderia deixar de falar sobre essa super oportunidade que a área de programação proporciona pras empresas gringas contratar brasileiro é mais barato e para nós a moeda estrangeira geralmente né é muito muito mais valorizado do que o Real bom é só olhar aí quanto é que tá o dólar atualmente então acaba sendo um ótimo negócio pros dois lados já que a empresa paga menos contratando brasileiro mas mesmo assim esse salário para

nós acaba sendo muito maior e a gente trouxe aqui alguns exemplos de vagas em empresas do exterior que tu pode trabalhar mesmo morando aqui no Brasil e convertemos também os salários para real na cotação atual dá uma olhada aí [Música] k [Música] [Aplausos] [Música] [Aplausos] [Música] [Aplausos] [Música] essas vagas aí que vocês viram são para programadores Juniores elas exigem um pouco mais de experiência do que as vagas que tu vai encontrar aqui no Brasil mas com um bom plano de estudo aí um bom planejamento que a gente sempre fala com dois ou três anos de

experiência tu Com certeza pode conseguir uma vaga dessa meu nome é Alan eu tenho 29 anos sou de Piras caba interior de São Paulo no Brasil mas faz 4 anos que eu moro na Inglaterra hoje eu me sinto muito mais confiante e cada vez mais empolgado para aprender mais hoje no momento tô estudando react com certeza acho que eles me ajudaram muito como eu falei em cada passo assim porque o primeiro foi de dar a direção do que eu deveria estudar segundo o método como eles ensinam acho que ajudou demais facilitou demais tô me sentindo

muito realizado depois de ter conseguido o primeiro emprego porque é muito gratificante saber que há um ano atrás eu comecei uma mudança de carreira e para mim foi mais rápido do que eu esperava Eu não esperava ter assim tão rápido eu vejo um futuro maravilhoso na área a área só tende a crescer agora e tô muito empolgado e só para te dar uma ideia de escalabilidade de salário da nossa profissão a gente separou também aqui algumas outras vagas mais avançadas então dá uma olhada aí nessas vagas de pleno que tu pode começar a aplicar depois

de uma média de 2 anos de experiência como Júnior [Música] e a gente sabe também que é um futuro mais a longo prazo para quem tá começando mas só para te mostrar as grandes oportunidades que um programador Sênior pode ter depois de em torno de 6 anos de experiência dá uma olhada aí nessas vagas [Aplausos] [Música] então a gente te mostrou aqui oportunidades de curto médio e longo prazo mas o teu foco agora tem que se começar para que tu consiga chegar lá no médio no longo prazo e ser cada vez mais valorizado como programador

tu precisa dar o primeiro passo e a gente tá aqui para te levar desde o zero Total mesmo que tu não saiba nada de programação até a tua primeira vaga mas uma dica de ouro para vocês aí precisa começar do jeito que dá mesmo sem um computador incrível mesmo que tu não tenha muito tempo para estudar que tu se ache muito velho ou muito novo ou mesmo que tu não aprenda nada novo há muito tempo tu pode sim se comprometer hoje a dar o primeiro passo para mudar de vida e a melhor parte é que

é só seguir o mapa que a gente vai te dar e tu vai ver que vai ser infalível nessa aula a gente te mostrou as maiores oportunidades que a área de programação proporciona te provamos que é possível conseguir a tão almejada vaga de até R 3.000 te demos vários ex tempos aí para te motivar te mostramos vagas atuais de programadora iniciante que tu pode conseguir depois de 7 meses de aprendizado mesmo sem ter experiência de mercado no currículo que mostramos também que tu não precisa fazer faculdade de TI para conseguir ótimas vagas Caso tu não

tenha tempo não tenha dinheiro ou não tem interesse a gente falou também sobre a escalabilidade de salário da nossa profissão né te mostrando que é comum até que o salário dobre em até 2 anos e falando também sobre o trabalho remoto e a possibilidade de trabalho no exterior recebendo o teu salário em em moeda estrangeira a gente tem certeza que tu se interessou por todos os benefícios que a área de programação proporciona mas para atingir tudo isso tu precisa de um bom método e saber o que tu tem que aprender para não ficar Confuso com

esse monte de conteúdo aleatório que tem aí pela internet é porque sem um bom plano de Missão tu vai ficar batendo cabeça estudando assuntos inúteis e que não vão te deixar mais próximo de aprender programação e conseguir entrar na área e vai ser na aula dois que a gente vai te apresentar esse plano com os quatro Marcos que a gente iria se a gente tivesse começando hoje na programação e a aula dois vai rolar na quarta-feira às 8 horas então salva um tempinho na tua agenda e amanhã terça-feira às 8 horas a gente vai começar

esse projeto aí que tá aparecendo na tua tela a gente vai fazer uma live explicando o que que é o HTML e vamos usar o HTML para começar a construir esse projeto Então se tu quer ver ao vivo dois programadores seniores fazendo um projeto do zero e junto contigo aparece na Live amanhã e enquanto a próxima aula não chega tu tá convidado e convidada a entrar na nossa comunidade de programadores in antes a guilda Dev em dobro e deixar um comentário por lá sobre o que que tu achou dessa aula e qual desses benefícios de

programação mais te interessa lá na comunidade tem milhares de programadores E aspirantes como tu que estão constantemente se ajudando e tirando dúvidas também sobre programação e sobre o mercado de trabalho a gente não cansa de falar sobre a necessidade de que tá presente numa comunidade de programadores para poder trocar experiências referências e também tirar dúvidas com quem já passou pelo que tu tá passando agora e essa é uma ótima oportunidade para começar para para entrar na comunidade na guilda da vindo é só clicar no botão aqui embaixo e se tu quiser receber conteúdos extras e

o link de acesso pras próximas aulas no teu celular aqui embaixo também tem um botão pro grupo de WhatsApp da semana do zero ao programador contratado e apesar desse grupo também ter bastante gente só nós e a nossa equipe pode enviar mensagem por lá então não se preocupa que não vai virar uma bagunça de mensagem que nem o teu grupo de família cheio de mensagem bom dia nessa edição da semana do zero ao programador contratado a gente vai presentear uma pessoa comprometida com notebook no valor de R 4000 essa é a nossa forma de ajudar

ainda mais uma pessoa que se comprometeu de ir até o fim do evento vai funcionar assim ó em cada um dos quatro níveis do evento a gente vai te dar uma palavra-chave uma na segunda-feira uma na quarta uma na sexta e uma no domingo teu objetivo é assistir as aulas até o fim e juntar essas quatro palavras e no domingo às 8 horas da noite a gente vai fazer uma live onde a gente vai disponibilizar um formulário para que tu preencha com essas quatro palavras e com as tuas informações pessoais pra gente poder entrar em

contato contigo Caso tu seja o sortudo ou sortuda que vai ser sorteado ao vivo no domingo mesmo e se tu tiver ao vivo na Live e mandar as quatro palavras parabéns vai ser recompensado com um notebook no valor de r$ 4000 então fica aí mais uma motivação para que tu te comprometa a não perder nada nessa semana que além de mudar a tua vida e te ajudar a conquistar uma carreira também pode te dar um equipamento incrível para te ajudar nessa jornada então presta muita atenção a palavra de hoje para concorrer ao notebook é consigo

a nota ela aí e boa sorte no sorteio no domingo e no domingo a gente vai te explicar direitinho todas as regras e não esquece que tu tem que est ao vivo lá na domingo para poder concorrer ao notebook mas já te adianto que duas delas são tu tem que est nos seguindo no Instagram e também tu tem que se inscrever no nosso canal o Dev dobro no YouTube tu aí que vai ganhar hein tô sentindo boa sorte a gente se vê na próxima [Música] aula l