ei pessoal tudo bem sejam bem-vindos mais uma vez no canal é pra quem já para quem já acompanha o canal já sabe né pessoal obrigado pela audiência é a gente está chegando a quase mil inscritos no canal isso é bem bacana estou muito feliz espero que vocês continuem acompanhando que os vídeos cada vez sejam melhores deixa eu lhe que deixe seu comentário compartilhar nas redes sociais vão aumentar mais ainda essa essa nossa comunidade para quem é novo no canal pessoal a gente tem uma quantidade de vídeos enorme mais 100 vídeos no canal a gente fala
de um iate no js é doc tem uma série de coisas pra você que é um desenvolvedor fux tech ou quer ser um desenvolvedor full speck e essa série de vídeos eu tô trabalhando para criar um site web site normal utilizando butt isto é com o iate e esse segundo vídeo é se você não assistiu o primeiro aproveitar e assistir aí o primeiro vídeo se você não assistiu net já assistiu pessoal esse segundo vídeo a gente vai fazer a nossa barra de navegação para a gente poder navegar no nosso website simples assim e eu vou
utilizar o descreve para que essa barra de navegação seja responsiva todo o nosso site vai ser responsável então o que a gente vai começar a fazer primeiro é pessoal você pode ver que a gente parou aqui na última vez então aproveita a deixa o celular que se inscreve no canal ativo as notificações deixe seu comentário e compartilhar nas redes sociais porque eu vou tirar essa mensagem daqui agora ea gente vai utilizar algumas ferramentas está junto uma delas já vem com o visual studio a code que o emite e uma das coisas que me faz se
você não precisa escrever vários a várias linhas de código para conseguir parar quando você repete alguns elementos do html ea gente vai utilizar essa multiplicação aqui eu vou mostrar para vocês como funciona outra coisa que a gente vai fazer é utilizar esse fonte o som que é hassan e aí tem vários ícones bacanas que é bacana que a gente vai utilizar aqui na nossa aplicação e para utilizar o seu pai no fundo possam pontocom tenho esse houthi liuzzi e tem um link de cdn que você vem aqui explica copia volta no seu visual studio coube
vai no seu público e index.html e copia e cola esse link aí de fonte o som tá e aí a gente tem use e cones vital a gente tem nesse link do lado direito bes 15 onde ele mostra pra você como que funciona para você utilizar ea gente já vai utilizar aqui é que a gente vai utilizar como lobo e tal esse tipo de coisa então já sabe só para romão para recapitular no no vídeo passado boots trepp o iate não djs clinton e até a visual studio code shift do emmett e funk ao som
pessoal e deixa o celular que se inscreva no canal então o pessoal aqui voltar para o nosso arquivo aqui vou tirar tudo isso aqui e aqui dentro a gente vai te começar a utilizar o emite primeiro qual que a tag que eu quero dentro dela o que eu quero quero vários links e quanto os links eu quero então eu quero três vezes três e aí você dá um tabu ele vai criar alguns links pra gente aqui dentro que a gente pode colocar a romã channel login login.asp pessoal é aqui é o que a gente tem
por agora não se relaxa é só isso por enquanto eu só dou uma pausa rápida no vídeo só para tomar alguma coisa pessoal então aqui pessoal a primeira coisa que a gente vai fazer eu quero fazer minha navegação tá eu poderia utilizar a norma list ou lista ordenada ou desordenada seja lá o que for mas eu vou utilizar o link normal porque o que a gente precisa sempre colocar tosse aqui como a gente viu a gente não usa classe a gente usa classe nem então se você tiver estiver utilizando a documentação aí acompanhando a documentação
e no busto epe lembra que tudo que tiver clássico você lisa quase bom pra gente fazer uma navegação a primeira classe que a gente utiliza no navy então clésio name o que a gente vai utilizar primeira coisa é que a gente está fazendo uma barra de navegação então a gente tem um tem uma caixa chamada na'vi mal aí a gente tenha segundo uma segunda classe que a gente vai aplicar aqui e essa segunda classe que ela disse eu vou descrever o primeiro navio e bar e eu vou utilizar pmdb o que é esse m d
a partir do tamanho médio que há uma determinado número de pixels de largura eu quero que esse - expandida porque o que acontece quando a gente desenvolve agora a gente tem que desenvolveu a o ideal claro é que você desenvolva com a parte de que o pessoal chama de mobile first quer dizer o que você sempre começa desenvolvendo pensando no dispositivo móvel primeiro então como a gente começa a pensar nisso a gente pensa já no nosso smartphone então a gente tem que ser o episódio funcione no nosso smartphone ea gente não vai ter uma barra
com vários links no smartphone a gente tem que colocar aquele menino zinho que a gente fica com um aperta com o dedo ali ele abre e fecha e de repente deixar nossa logo ali mas que seja responsivo então pessoal o que essa classe está dizendo ensinave bar traz o ex pm ele está falando a partir do de um dispositivo de médio tamanho você pode expandir o menino então por exemplo no ipad ele expandiria o menu sem ter aquele botãozinho de abril no menu e logo vocês vão ver o que eu quero dizer com isso aí
o que eu posso fazer eu posso colocar por exemplo nada 9 bar a dark que eu quero ver no escuro por exemplo poderia ser também light opa light mas eu quero barco e também eu vou dizer que o bg collor vai ser por exemplo nosso light porque eu quero uma barra a acim beleza vou salvar aqui já que acontece na de bar que deixou na verdade aqui trocar pra dar pra vocês verem qual a diferença se eu salvar aqui voltar olha só eu tenho uma barra de navegação aqui já é como daqui eu poderia colocar
por exemplo light e trocar aqui para light salvar e eu tenho uma barra com essa barriguinha cinza aqui pequenininho o que acontece pessoal o que eu vou fazer por exemplo é que a gente vai fazer com que esse menino seja responsiva e tal não se apegue agora como ele está nesse momento beleza então voltando aqui a gente tem isso e eu vou tocar pra da arte porque eu acho mais fácil de enxergar eu acho mais legal também é bom que acontece tá pessoal primeira coisa que a gente tenha a gente já tenha navegação a gente
tem que transformar esses links tac a gente tem aqui é usando as classes do nosso adn o nosso boots fep eu vou entrar aqui tá e eu vou fazer o seguinte tá estou utilizando nossa linha está ordenada ou desordenada que eu vou fazer vou criar uma dívida nova aqui tá pessoal e aí eu vou puxar esses link esses links aqui a gente tem pra dentro da nossa dívida está então o que a gente vai fazer a primeira coisa que eu vou fazer vou utilizar um cinema aqui tá o pa leste nem e aí esse classe
m eu vou utilizar uma outra classe do css que é o na'vi bar traço nave da porque eu estou falando diretamente do meu livro primeira copa a iacc em cada um dos links o que a gente vai fazer é o seguinte classe nem deixa até marcar tudo que a gente tem aqui acho que comprou são segundo o pessoal que tem um jeito de marcar tudo aquilo que eu não lembro que comprou tá eu vou apertar o control clique a [Música] desculpa pessoal só lembrando um pouquinho aquilo visual studio que às vezes eu esqueço de algumas
coisas aqui com option colocar aqui e aqui aí eu vim aqui ó tudo de uma vez só eu coloco aqui o nosso dois na verdade são dois há duas classes a nave ai ai tentar porque é um item de navegação e também o navio link pra gente deixar isso certinho deixa mostrar pra vocês e agora ó só colocando essas classes aqui pessoal ele já fica com menos em ubá caninha aqui mais bonitinho com a separação só que olha só ele diz miller e ele abre é porque todo o dispositivo móvel york quando eu chego num
no intermediário aqui no md ele expande exatamente como a gente escreveu ali no navy bar ex-pm de beleza pessoal bom voltamos aqui legal nossa barra já está mais ou menos mas ainda falta bastante coisa tá o que eu quero fazer nessa barra de rolagem também pessoal é adicionar um botão adicionar uma blend na verdade eu vim aqui dentro do nosso item de navegação né e vou adicionar um outro item que vai ser a nossa a nossa marca então vou colocar um há também de link e vou usar o colégio inei me surpreende e aí no
navio bartra sobre em branco eu vou colocar a garrafa que a gente não vai utilizar depois clube aqui a gente vai fazer diferente também mas vou deixar aqui por padrão e aqui dentro a gente vai colocar por exemplo deve colocar developer o ano em beleza pessoal e aí que acontece quando eu coloco a salvo aqui que ele vai fazer ele vai criar uma marquinha que a nossa bueno onde a gente teria o nome da nossa marca e quando a gente faz assim ó ele não tá legal ainda ele está do lado direito mas porque a
gente tem que utilizar alguns algumas classes distintas e tal mas olha só ele se destaca em relação aos links que a gente tem aqui beleza bom show de bola voltando aqui a gente até então a nossa nosso à nossa frente né aí o que a gente precisa pessoal uma das coisas importantes que a gente vai precisar precisar colocar aqui é aquele botãozinho né na verdade sem primeiro vou colocar uma coisa vamos voltar aqui no nosso navegador olha só lá no fonte ós am ele tem um carinho aqui ó que quando a gente utiliza ele vai
colocar o nosso o nosso a glass inteiro ele pra colocar um ícone aqui do lado da nossa barra para lá ficar mais legal zinha então eu venho aqui aqui dentro eu coloco um ícone se eu voltar aqui no nosso website a gente tem um um ícone aqui do lado da nossa da nossa do nosso do nosso nome aqui tá bom pessoal então aí pessoal que acontece até se esse ícone aqui ele está ele está muito grudado tarde tinha outra maneira de arrumar depois com css mas só por enquanto é nbsp ponto e vírgula acho isso
adiciona um espaço pequena que entre o ícone aqui já ficou bonitinho tá se a gente quiser a gente pode procurar outros ícones também tem uma pancada de economia está para aumentar o tamanho tem várias coisas aqui e também você pode buscar é outros ícones por exemplo tem ícone em uma lista deixa eu ver que tem nessa tite que tem uma pancada de ícones diferente né aí é que se você quiser você pode buscar esses ícones aqui dentro tá deixando uma coisinha aqui pessoal não lembro de ter entrado aquilo que a gente está utilizando aqui tivesse
tempo manter se como é que depois eu mostro outros no decorrer do a no decorrer do nosso nossos vídeos a pessoa então assim a gente tem um ícone zenha bonitinha que o nosso número está fechando mas não está bem legal ainda a gente vai deixar ele bem mais bacana aqui é bom que a gente precisa fazer pessoal outra coisa que a gente tem que fazer pra gente ter aquele botãozinho legal é que que tem que parece um sanduíche e talvez vocês devem ter visto em alguns sites eu vou utilizar um botão bacana aqui a ecclésia
nem postar isso tem toda a documentação do dobro do esperado mas acompanha a ii e ele tem o nome de todos porque ele é um que abre abre e fecha eu posso dar um time aqui dizer que é boa tem por exemplo tá é e aí existe algumas coisas o pessoal tem um atributo chamado data abortá que a gente dê a gente vai dizer que o que ele vai fazer é colapsa alguma coisa não sei qualquer produção exatamente para a colapsar mas é basicamente quando você clica aqui ele abrir alguma coisa o fecha alguma coisa
aí ele tem outro cara chamado da target que é o quê quem que vai abrir ou fechar que no nosso caso depois vai ser se tem de navegação aqui então a gente vai lá ea gente vai dar um nome pra ele que é o meu sei lá na av [Música] na rebarba com água por exemplo colocar a nave bar nem agora e aí tem os outros a uns outros itens está o que a gente com a gente costuma colocar dentro dele tá um deles a gente tem lá por exemplo vamos colocar aquilo não entra que
kewell ea grasso como aí entre aspas a gente pode até utilizar a utilizar o mesmo nome sem a hashtag aqui tá porque não é um ai de vós também é e aí a estenda vamos colocar para foz falsa e também a gente vai colocar eu ea a lei gol e vamos colocar o navigation é basicamente o que estará a a documentação do debut espectá aí o que acontece a gente quer colocar um em tese o bonitinho aqui tá então a gente pode vim aqui colocar um espectro e dá um colégio inei mps spam e aí
a gente já tenho para 11 uma classe do bootstrapping que mostra que mostra que ele - e então é na rebarba traço toller traço a e ele tem esse ícone aqui que é mostrado na tela então pode ouvir aqui e mostrar aqui pra vocês ele vem aqui ó fecha fecha fecha fecha fecha olha só ele mostra um ícone de navegação aqui ele ainda não está do jeito que a gente quer mas a gente vai arrumar os poucos mas pode ver que quando ele chega no tamanho necessário do que quando aqui ó tem expandido nosso menu
quando ele se fecha ele mostra pra gente outra coisa que eu queria mostrar pra vocês é que se você vir aqui e trouxer ele para depois da navegação e salvar ele vai aparecer do lado direito então você escolhe qual lado que vocês preferem por enquanto eu vou deixar do lado direito olha só é ordem que você colocou ele aqui dentro beleza pessoal acho que está fazendo sentido agora o pessoal que eu vou fazer é é a gente fechar isso separadinho vou criar uma seção secchin aqui dentro e eu vou trazer todo esse meu menu zinho
aqui o papa z é pra dentro da minha sessão e aí na minha secchin eu vou colocar o caos lei e vou correr se preze nem o que a gente vai poder dizer colleps ea gente precisa dar uma dica que é esse item que a gente quer digamos assim colapsar então eu vou dar esse aí que eu usei no da target aqui dentro pra gente poder a fazer um menu funcionar pessoal que acontece vamos lá chover que tá deixou salvar na verdade até acho que vou fazer diferente ah eu vou colocar isso aqui acho que
está sendo uma setinha fazer o seguinte deixou só tirar isso aqui pessoal como é que tá menu aqui quando o chute cá salvar que conecta menu não saber que ele está aqui está o meu o nosso menu utah pessoal aí deixou aqui do lado é que a gente poderia fazer aqui abre uma única dívida na verdade acho que a fazer difícil pontuar colapse aí dentro de si cadê cid ficou leps a gente pode colocar o nosso menu colapse colleps tá aí dentro desse div colleps eu tenho que colocar online o papa waigo de a iurd
pessoal é o mesmo nome que a gente colocou aqui no nosso fechar esta parte aqui que a gente colocou da nudez da tarde está pessoal nave barman tour a gente coloca aqui nesse aí de beleza salvando aqui quando a gente clica nesse botão o que ele vai fazer é abrir ou fechar o menu aí é só clicar aqui ops loops que eu fiz de errado aqui no taim deixa eu dar uma olhada aqui pessoal ano num menu aqui colapse type de toga aqui há dois dias aqui salvando na hora que eu nossa que eu estou
fazendo peraí peraí pessoal deixa eu dar uma olhada aqui andei toga eleita tomou salvar aqui aí olha só pessoal vamos lá nosso menino tá quase lá tá bom pessoal tá aqui ó pode ver que ele aumenta diminui bonitinho tá é ele expande aqui ó da maneira que estava etc e aí vem vindo aqui beleza show de bola se tiveres expandido só que falta algumas coisinhas o pessoal pra gente acertar aqui ó porque o homem não está expandindo tá bom então tem algumas coisas que a gente pode fazer até trocar essa dívida que já usa a
massa 17 em que eu acho que o sexo nem mas fica mais bonitinho né beleza continua funcionando legal fecha aqui só que olha que só a gente tem que arrumar ainda essa é aqui que não tá legal beleza e que acontece pra gente arrumar o que acontece tem que dizer por boots trepp que esse é um item que faz o colégio porque ele não está mostrando o menu a não ser que a gente clique no botão zinho aqui mas quando a gente espande o ele não mostra para a gente arrumar isso simples vem aqui na
nossa 7 e coloca nave bar o lápis quando a gente faz isso o nosso menu continua funcionando e olha a diferença aqui ó ele dá uma ajeitada aqui tá ó e o menu aparece quando a gente se espante eu não tô a fim de arrumar isso agora então eu vou colocar o nosso menu do lado esquerdo tá e ele vai mostrar aqui abaixo beleza pessoal olha só aqui fecha bonitinho tac o nosso - vim aqui do lado tá até se vocês quiserem pessoal deixa eu colocar esse aqui pra baixo vamos colocar esse menu aqui pra
baixo deixa eu ver aqui o teu salvá aqui ó na verdade desculpa ambos que mais pra baixo ele quer mostrar uma coisa pra vocês aqui shift colocar depois da série de shows a marcar esse cara que esse botão inteiro que trazer ele pra fora da sessão e aí o que você pode fazer também se você quiser também acho legal colocar dá para tirar a aba assim não dá para tirar o o o a nossa frente também se a gente quiser fazer isso é óbvio né o que mais se vê aqui colocar se a gente quiser
então a senhora da paz e brincar um pouco com que a gente tem aqui pode deixar com aguente colocado do lado direito etc né então tem algumas maneiras que você pode a gente pode trabalhar aqui há em relação a isso também se quiser pode colocar sua brand a depois do menu várias maneiras de fazer é você escolhe como você quer fazer isso aqui enquanto o shift é por exemplo eu posso fazer isso aqui também beleza pessoal é sempre uma questão de escolha pessoal como que vocês querem fazer com isso com esse seu menu certo pessoal
também o pessoal se vocês olharem aqui o botãozinho ele está crescendo junto né de novo é a maneira que você coloca sua óptica a ordem que vocês colocam as coisas que eu tô copiando aqui a hora em que você coloca as coisas por exemplo se você colocar o botãozinho depois da sua bn e salvar aqui o pessoal olha só ele não desce ele fica lá no topo pió e aí aparece um menorzinho bonitinho aqui e fecha a fé e abre e fecha com ele no topo e pessoal eu acho que era isso que eu queria
mostrar pra vocês né então outra maneira de vocês verem isso também pessoal quando vocês estão dizendo ó ele vai abre e fecha abre fecha aqui abre e fecha tá outra maneira eu acho que é contra o shift com qualquer shift e não é botar aqui nesse botão nesses três botãozinho saque não é desk manager é vir aqui pessoal mortos e aí de vela por a developer tools está ele está reclamando de alguma coisa concreta aqui deixa eu dar uma olhadinha se uma coisa aqui efe aqui o pessoal aqui ó colégio nem dá só pra ter
certeza que para de reclamar aí o que vocês podem fazer o seguinte está vendo que tem esse ícone de vasto bar se você clicar nele o pessoal e diminuir aqui ó ele mostra como é no iphone e como seria por exemplo um ipad próprio exemplo que ele expande por que aquele md está dizendo para expandir a iphone x nem olha só a galáxia 5 ó pessoal mostra em todos eles fica responsivo tá depois a gente vai tirar essa essa esse espacinho aqui no bari a no corpo aqui pra gente pra ficar a barraca completa de
navegação mas é na verdade era isso que eu queria mostrar hoje pra você espera que você espero que vocês tenham gostado e se gostou de seu like deixe seu comentário e se você é novo no canal se inscreve ativando as notificações não perde nada que eu estou postando aí pessoal valeu
