[Música] fala pessoal jancer aqui o vídeo de hoje é o primeiro vídeo aí né A primeira aula aí do nosso curso de HTML e CSS né a gente vai estar abordando aqui é esse vídeo né introdução Então a gente vai estar entendendo um pouco ali sobre o ambiente né a configuração do ambiente que a gente vai estar usando para desenvolver né para prosseguir para realizar o curso e também falar um pouco aqui do HTML do CSS para quem que a gente usa o que o que eles são né enfim é mais uma abordagem assim bem
rápida mesmo e a configuração do ambiente também ela é bem simples então a gente não vai tá estendendo muito aqui não tá beleza então já vindo aqui pra minha tela né Eh eu separei aqui os tópicos que a gente vai estar falando hoje as aulas normalmente terão esse padrão né eu vou separar tópicos que a gente vai est abordando apresentando eles no início e de acordo a aula for prosseguindo a gente vai eh abordando esses tópicos tá então Começando aqui né sobre o HTML CSS eu já deixei aqui uma aba do navegador aberta S eu
até pesquisei ali do visual Studio code que a gente vai chegar nele ainda mas quando a gente fala de html CSS e a gente tá falando de websites né do ambiente web e quando a gente abre aqui por exemplo eu pesquisei aqui né visual Studio code ele já me deu aqui o site do visual Studio code se a gente entra aqui a gente já tem é um website né o o a própria pesquisa do Google isso aqui já é um website né E esse Website em si ele é estruturado usando HTML né então toda essa
estrutura todos esses textos a posição dos textos na verdade não é bem a posição porque já começa a entrar no CSS Mas o conteúdo da página né e a estrutura dela é feita em HTML tá então essa página aqui do Google Chrome do Google né que tá mostrando esses meus esses resultados ela tá em HTML e pra gente ver a estrutura dessa página eu posso clicar com o botão de direito aqui e clicar em insect né para inspecionar se se o senhor tiver em português e ele vai abrir essa aba aqui para mim nessa aba
A gente consegue ver a estrutura do da página em si né na primeira opção aqui no no no menu superior das opções nós temos elementos console sources se a gente clica em elementos ele vai dar para mim aqui todo o HTML dessa página né que é a estrutura dela e a estrutura né uma vez que a gente tem a estrutura a gente pode aplicar os estilos nessa estrutura né que aí que entra o CSS então a gente pode usar o CSS para pegar aquela estrutura HTML e modificar ela trocar posição trocar e fonte tamanho cor
enfim toda a personalização que a gente consegue que a gente vê na web é feita usando o CSS né então a junção desses duas eh ferramentas dá pra gente aí o o o o Web né né o elemento o o ambiente web que a gente tem e só brincando com o inspecionado Chrome aqui né que é uma ferramenta muito poderosa na verdade não nem inspecionar né se a gente vem aqui no no próprio Chrome em si é que aqui eu tô usando Chrome né E você pode estar usando em qualquer outro é navegador tá só
que às vezes alguns detalhes que eu vou usar no Chrome Pode não ter no navegador você tá usando mas o o o principal que a gente vai est abordando no curso tanto faz aí o navegador que você está utilizando né e aqui a gente pode pesquisar ó por Web Store já tem até ali no histórico né pra gente entrar na na loja aqui do Chrome né no Chrome Web Store e se eu pesquiso aqui por developer Tools eu vou ter uma extensão aqui que é muito interessante tá pra gente se eu não me engano não
é developer Tools né web Tools web developer Tools é uma extensão que essa aqui ó web developer que ajuda a gente para desativar ou ativar algumas coisas aí no ambiente de desenvolvimento web né então ajuda bastante e nesse caso aqui ó que a gente tá aqui no visual Studio code no inspecionando aqui né Falando de estrutura de html CSS eu posso vir aqui na extensão né no Chrome eu clico ali em extensão tá aqui o Web developer eu já tenho instalada ele vai me aparecer aqui um menu se eu clico em CSS aqui ó tem
aqui a opção disable All Styles então quando eu clico nisso aqui ele vai olha só é ficou até bugou tudo aqui né que eu até estranhei porque apareceu aquele só a lupa né mas realmente tipo assim disable ele vai tirar todo o CSS então se eu olho para essa página usando só HTML o visual dela é esse ó tudo quebrado tudo fora de posição né enfim uma bagunça completa né e o CSS tem esse poder né de transformar essa estrutura que não faz sentido nenhum aqui na real faz N mas tá muito bagunçado transformar isso
em algo extremamente útil né que é essa página aqui de pesquisa do Google Tá certo então dá dessa introdução aí né Do que é o HTML e o CSS a gente pode começar a falar aqui sobre é eu já falei até sobre o navegador né que você pode estar usando navegadores diferentes O importante é a gente ter um Dev Tools né que é essa isso aqui que eu que eu acessei com inspecionar e com esse Dev to que a gente vai est conseguindo ver a estrutura que a gente tá fazendo brincar com alguns estilos com
algumas coisas mas o fato é que o browser quando a gente criar o nosso arquivo HTML CSS esse arquivo vai ser interpretado pelo navegador né pelo Browser certo então já falamos disso aqui tudo vamos voltar aqui e para falar de editor de texto né e falando de editor de texto eu já até usei o exemplo aqui do próprio visual Studio code né que eu tinha pesquisado que a gente vai precisar de um editor né de texto um lugar ali onde a gente vai conseguir criar arquivos editar arquivos salvar arquivos e eu recomendo muito visual Studio
code até porque a gente vai usar uma extensão bem interessante que ajuda a gente tá desenvolvendo o nosso código ali HTML CSS tá então uma vez pesquisando aqui no Google por visual Studio code a gente vai ter aqui algumas opções e o link de download né então aqui você escolhe né a plataforma que você quer e faz o download aí do Instalador né uma vez que o instalador tá na sua máquina eu tenho ele aqui n em uma pasta é só executar aqui ele vai dar problema porque eu tô com o visual Studio code rodando
né então ter que fechar aqui essas pastas pra gente conseguir abrir o instalador e mesmo assim ele não vai e mesmo assim ele não vai eu tinha tava com algumas pastas do vscode aberta em outra em outro desktop aqui mas quando a gente executa o executável né a gente abre esse executável a gente aceita os termos né A instalação é bem simples também você pode criar um top icon enfim algumas opções aqui essa opção do pef é é interessante adicionar pef né Eh dá next ali clique em instal ele vai instalar né eu não vou
fazer essa instalação agora porque eu já tenho na minha máquina tá certo e uma vez instalado é só executar aqui o visual Studio code o meu por padrão ele abre como administrador né E caso você queira isso também eu até recomendo porque a Às vezes a gente pode ter alguns problemas pro vs code não tá executando como administrador você no Windows né pesquisa aqui por visual Studio code ele vai abrir aqui ele vai mostrar aqui o resultado né do visual Studio code você clica com o botão direito e aqui ó Open file location ele vai
abrir e a localização desse arquivo né da do atalho que abre esse arquivo se você quiser você pode clicar com o botão direito e Open file location novamente né que aí ele vai abrir realmente onde tá instalado esse executável E aí Aqui você clica com o botão direito e clica em propriedades né propriedades e com as propriedades abertas você clica em compatibilidade e marca aqui né Essa caixinha para executar esse programa como administrador e aí sempre que você for abrir o vs code ele vai abrir né como administrador certo é só dar um apply um
ok E aí tudo bem Beleza então vindo aqui no vi code então vindo aqui no vs code né quando a gente abre a primeira vez o o visual vai ser um pouco diferente desse meu que tá aqui né porque como eu já tinha o vs code instalado né e o visual que ele vai abrir aqui no no seu vai ser um pouco diferente mas a interface é a mesma né e e o que eu fiz aqui foi basicamente abrir uma pasta né Ou seja você vai aqui em file e Open folder e vai abrir alguma
pasta aí que para você salvar os seus arquivos tá porque a gente vai precisar de uma pasta para armazenar aí os arquivos que a gente vai desenvolvendo então eu já tinha aqui uma pasta aberta né uma pasta criada né paraas gravações e eu tô abrindo essa pasta aqui né TR HTML CSS e tem um um um detalhe a mais aqui do meu que no seu provavelmente não vai ter que é essa configuração de workspace no no visual Studio code a gente pode configurar ambiente de trabalho tá então eu criei esse workspace aqui específico para a
gente ter extensões específicas que eu vou est abordando aqui no próximo tópico Tá beleza então uma vez instalado o vs code aberto e você quando você já escolheu uma pasta para ser aberta né aqui em file Open folder para salvar os nossos arquivos a gente já pode começar a falar aqui das extensões tá porque se eu venho aqui nesse meu né e clico aqui em extensions na nesse menu lateral esquerdo ele vai e mostrar aqui algumas extensões que eu já tenho instaladas tá E e as mais importantes aqui pro curso é na verdade a mais
importante né é o nosso Live server tá que é uma extensão que tem aqui no visual Studio code que ele vai abrir pra gente o arquivo html no Browser ele vai criar um servidor e para que para que esse servidor realmente é é para basicamente sempre que houver uma edição no arquivo HTML ou seja sempre que eu adicionar alguma coisa e salvar ele atualiza a extensão atualiza esse servidor e já reflete lá no meu browser lá no meu navegador as alterações se a gente não usa a extensão Live server sempre que eu alterar o arquivo
HTML eu tenho que ir manualmente aqui na página e dar um refresh né atualizar a página para ela pegar as alterações então Live server ajuda a gente nisso e torna muito mais fluido o o processo de desenvolvimento né Eu visto que sempre que eu editar alguma coisa eu só dou um control S aqui salva o arquivo e já posso ver as alterações lá no Browser Tá além disso eu tenho o tema né o meu tema aqui que é o Drácula caso você este se perguntando e tem aqui esse auto Close tag e Auto rename tag
que como o HTML ele é feito de tags né eu crio uma tag abrindo e fechando essas extensões também ajuda bastante na questão de refatoração só que não é nem tanto né e fora isso outras extensões interessantes que eu tenho aqui é o link junto com o prier né esse para aqui ajuda a gente lá nos arquivos JavaScript no próprio HTML e CSS também para refatorar o código né se para ter um padrão de refatoração de fatoração aí do código mas não é tópico pra gente tá entrando aqui agora né Na verdade nesse curso em
si a gente não vai est usando tanto assim os benefícios dessas extensões mas as mais importantes realmente é o Live server a mais importante aqui que eu recomendo de verdade que você tenha é o Live server Tá certo então com isso aí a gente mata aqui todos os tópicos pra aula né falamos do editor de texto das extensões do navegador e do HTML CSS em si e eu já vou finalizar a aula pra gente já partir pra próxima aula quando a gente vai entrar mais a fundo aí no HTML e na estrutura dele Beleza então
para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
