Introdução às tecnologias de sites - HTML, CSS, JavaScript e Bootstrap

1. Introdução: Quero agradecer por dedicar um tempo para conferir meu curso Introdução às tecnologias de desenvolvimento de sites. Sou seu instrutor de guerra Williams e fui desenvolvedor web e palestra na última década. Agora, neste curso, veremos todos os conceitos fundamentais necessários para ajudá-lo a ascender ao papel de desenvolvedor web. Vamos analisar o HTML, que é uma linguagem de marcação que nos permite colocar conteúdo em documentos que mais tarde se tornam as páginas da Web reais que gravaram ou em seu navegador. Também observamos o CSS, que é usado em conjunto com HTML para tornar o HTML bonito. Assim, a combinação de HTML e CSS nos permite colocar 1 conteúdo e depois estilo. É a maneira que tanto desejamos. Também vamos dar uma olhada no JavaScript, que é apontado como a linguagem de programação mais popular do mundo. É muito fácil de aprender e é a linguagem mais popular usada em praticamente toda a Internet. Além disso, vamos dar uma olhada estruturas de interface do usuário e vamos nos concentrar no Bootstrap, que é a estrutura de interface do usuário mais popular, que é essencialmente uma biblioteca de pacotes de CSS mais comumente usado estilos , métodos JavaScript e código HTML. Para operar de forma eficiente. Como desenvolvedores, usaremos o Visual Studio Code, que é o editor de texto de código aberto da Microsoft, repleto de ferramentas de produtividade e plug-ins para ajudá-lo a maximizar seu tempo. É muito poderoso e vem com integração para linguagens e estruturas de nível superior. E isso permite nossa integração com o Git. Isso mesmo. Eu mencionei o Git. O Git é uma tecnologia que permite aos desenvolvedores rastrear suas alterações e manter uma sequência lógica de backups de cada versão de seu código. Então, vamos usar o GitHub, que é uma das plataformas de controle de fonte mais populares na Internet, que é baseada no Git. E ele se integrará muito facilmente ao Netlify, o que nos permite implantar na Internet diretamente do nosso repositório do GitHub. Saiba que Netlify nos permite implantar mais uma vez diretamente do GitHub diretamente para a Internet. E isso nos permite fazer isso graça com algumas restrições, mas basta que você tenha uma ideia do que é construir algo e colocá-lo na Internet. Então, sem mais delongas, vamos direto para isso. E mais uma vez, bem-vindo à Introdução às tecnologias de desenvolvimento de sites. 2. Instale o Visual Studio: Tudo bem, bem-vindo de volta, os caras estão começando com a Seção 1 deste curso, que é onde aprenderemos o básico de HTML, CSS e JavaScript. Antes de fazermos isso, precisamos configurar nosso ambiente, não queremos passar por alguns conceitos básicos com você antes mesmo de não carregarmos a ferramenta. Um. Usaremos o Visual Studio Code para este curso ou para esta seção das pontuações. Este Visual Studio Code é um editor de texto muito poderoso que é capaz de lidar com muitas linguagens. Por isso, é perfeito no meu livro para HTML e CSS, JavaScript neste nível. Dito isso, porém, você já pode ter alguma experiência ou ter uma preferência na ferramenta. E existem outras ferramentas como colchetes, ponto IO ou mesmo bloco de notas, bloco de notas Plus I. No entanto, usaremos o Visual Studio Code e recomendo que você use. Também é para que todos os plug-ins e todas as dicas sejam centradas, que eu esteja prestes a mostrar, você pode tirar o máximo proveito deles. Então, chegar lá é simplesmente que você só precisa navegar pelo ponto de código Visual Studio.com. E, em seguida, com base no seu sistema operacional, você pode baixar para Mac, Windows ou Linux. Eu uso o Windows, então eu definitivamente baixaria para Windows. Portanto, a instalação para isso é bastante simples. Tudo o que você precisa fazer Next, Next, Next, Next, e então quando estiver totalmente instalado e você abri-lo, você será recebido com uma tela semelhante a esta, a tela de boas-vindas não, à sua esquerda. E apenas dê um rápido tour deste IDE à sua esquerda. Você terá a opção de examinar e explorar, o que mostra todas as pastas e arquivos em seus projetos atuais. Então, isso é uma coisa que você quer ter certeza. Sempre que você estiver criando um projeto web, você cria uma pasta dedicada a esse projeto específico. Você também poderá pesquisar em todos os seus arquivos de código. Quando você obtê-los, você pode se conectar ao controle de origem e você pode observar a execução na depuração. Saiba, no caso de um documento de site HTML, você não precisa se preocupar em escrever e depurar. Isso é mais para se você tiver alguma estrutura JavaScript complexa trabalhando com ou mesmo Python R C em alguma outra linguagem que precisa ser executada para começar a trabalhar. Não, a guia final aqui é chamada de extensões. E vou apenas apontar você na direção de algumas extensões que definitivamente acharemos úteis. Então, eu tenho um monte de extensões porque uso essa ferramenta há algum tempo. Mas para os propósitos deste exercício, eu encorajaria você a obter um servidor ao vivo. Assim, você pode simplesmente clicar em extensões e digitar servidor ao vivo, pressionar Enter e, em seguida, ele filtrará , você clica nele e, em seguida , poderá instalar. Tudo bem, então vá em frente e obtenha o Live Server. E então eu também encorajaria você a obter o bootstrap para extensão, que eu também instalei. Então, isso acontecerá mais tarde quando nos acostumarmos com o desenvolvimento e assim por diante. E nosso projeto começa a crescer. Url como um você não tem muito tempo para se concentrar nas pequenas coisas. Portanto, essas ferramentas ajudarão você com a produtividade deles em geral. Então você pode ir em frente e conhecer essas duas extensões. E então, quando voltamos, analisamos a criação do nosso primeiro documento HTML. 3. Escreva sua primeira página HTML - Texto e links: Tudo bem pessoal, bem-vindos de volta. Então, nesta lição, vamos começar com nossa criação de documentos HTML. Lembre-se que eu disse que sempre que você é um parafuso para fazer um projeto no projeto web ou qualquer tipo de projeto realmente, sempre se cria uma pasta ou, pelo menos, marcar em algum lugar que este projeto nos ativos relacionados a isso projeto será armazenado. Então, o que vamos fazer é no Visual Studio Code, vamos abrir uma pasta, certo? Você não tem a pasta. Tudo bem. Uma vez que eu costumo fazer é navegar até o local onde sei que meus projetos serão armazenados e, em seguida, criar uma pasta. Então, vou seguir em frente, clique com o botão direito do mouse em dizer Nova Pasta. E isso seria HTML, vou chamá-lo de Fundamentos em HTML. Depois de criar a pasta, entro e, em seguida, seleciono essa pasta, sei o que o Visual Studio fará é, e estou recebendo essa confiança digitalizável e tudo bem. Escolhi os autores de todos os arquivos. Tudo bem. Para ser honesto, às vezes esqueceu esse aviso antes, então isso é bom. Tudo bem, então, o que o código do Visual Studio fará é null definir a solução como padrão para essa pasta. Portanto, nesta Solução, Explorer ou o explorador de qualquer maneira que você verá é o nome da pasta na parte superior. E quando você passa o mouse nessa área, você obtém as opções para adicionar um novo arquivo, uma nova pasta, Atualizar ou recolher. Então, o que queremos fazer é adicionar um novo arquivo. Nenhuma regra de polegar. Toda vez que você é um problema para construir um site, um projeto web, um grupo de páginas da Web, seja o que for, no entanto, você quer classificá-lo em praticamente todos os idiomas e nossa estrutura. Sua primeira página deve ser chamada de índice. A extensão pode ser diferente porque estamos fazendo HTML. Será index.html. É melhor deixá-lo letras minúsculas e tudo em minúsculas porque multiplataforma, algumas plataformas preferiram C minúsculas, algumas não se importam, mas todos ficarão satisfeitos se for minúsculas. Então eu minúsculo ou uma palavra minúscula, index.html, que sempre deve ser seu primeiro arquivo. Então, agora que temos esse arquivo criado, vamos ver o que se passa nesse arquivo. Então, um arquivo HTML é um documento, certo? E, como dissemos, isso é o que é exibido para o usuário. Então, o que você colocar neste arquivo é o que realmente é exibido para o usuário. No entanto, existem certas regras propriedade do buraco em que você coloca conteúdo. Então, no nível muito básico, se eu disse olá mundo, nada muito chique, não parece muito complicado, certo? E então eu posso visualizar isso usando o Live Server. Então, basta clicar com o botão direito do mouse no arquivo e dizer aberto com o servidor ativo. Em seguida, seu navegador será iniciado e você verá o Hello World. E a coisa legal dos barcos Live Server é que se eu colocar esses dois lado a lado e eu digitar qualquer coisa que eu tenha digitado no elevador será atualizado automaticamente para a direita. Faz sentido É um tempo e se não for atualizado ao mesmo tempo, então você sempre pode clicar em Atualizar o que ele sempre manterá o caminhão fora do que você mudar aqui. Agora, se você perceber, toda carga não é possível sem etiquetas de corpo ou cabeça. É por isso que continuo tendo que clicar em Atualizar. Então, toda vez que eu digito nada acontece. Eu tenho que acertar Dinheiro Refresh ou eles, então, isso me avisa. Então é isso que me diz que meu documento precisa de algum trabalho? Meu documento não está atendendo às regras de um documento HTML. Portanto, o HTML tem algumas diretrizes rígidas sobre como o conteúdo deve ser. Pouco número 1, devemos ter essa tag chamada de nó do tipo doc. O ductus basicamente declara ao navegador que ei, eu sou um documento HTML. E é especialmente útil para o último tipo de documentos, que seriam documentos HTML5, que a maioria dos navegadores modernos saibam, ok, eu posso colocar na renderização HTML5 e saber exatamente como tratar o que se passa neste documento. Eu vou mesmo que precisamos de outra tag que diga HTML. Agora observe a anatomia dessas dobras. Você tem um colchete angular aberto ou é isso que me define menos do que assinar. E então você tem o nome da etiqueta e, em seguida, você tem o sinal maior do que ou o colchete angular voltado para a direita para fechá-la para que fique aberta. Tipo de suporte angular aberto no nome da etiqueta, colchetes angulares fechados. Observe também que quando digitei HTML, eu tinha um no topo e , em seguida, outro surgiu com uma barra. Então, literalmente, você está abrindo o puxão no fechamento próximo da guia. Entre o puxão, você coloca o conteúdo. Portanto, o único conteúdo que vai diretamente dentro da tag HTML é outra tag chamada head. Então, abrimos a cabeça do tipo suporte angular, fechamos o suporte angular e, em seguida, outro chamado corpo. Agora observe que ele sempre se volta para ajudá-lo é que o Studio Code está sempre tentando ajudá-lo. E há limitações tanto que o ajudarão por padrão. São extensões. Eu posso aumentá-los para uma fobia, obter o que usaríamos apenas o que temos para não, É bom desenvolver a disciplina de escrevê-los corretamente sem ajuda externa. Então, temos a tag HTML e, dentro disso, temos uma cabeça aberta e fechada. Vou ter um corpo aberto e fechado. Tão parecido com qualquer outro documento. Você tem o cabeçalho e você tem o corpo, e então você também tem um rodapé. Mas conceitualmente você pode colocar o rodapé dentro do corpo nessa situação, mas temos a cabeça e temos o corpo. Então, vamos ver o que estava na cabeça, entre outras coisas. Neste momento, vou me concentrar no título. Então, o título seria minha primeira página da web. Tudo bem. Esse é o título do site e todo o título é o que é exibido nos bairros ou quando você abre o navegador, está na banheira e você verá como o traço da Amazon.com, seja o que for isso que eles estão fazendo. Eles só estão vendo o título é Amazon.com, título é google.com, o que você digitar aqui, é o que aparece no navegador. Somos um wearable para ver que o sobrinho no corpo, no entanto, é aí que o conteúdo real para os objetivos do documento. Então é aqui que eu teria digitado meu Hello World. Agora que fiz tudo isso, deixe-me voltar ao meu Live Server e atualizar e notar que deixe-me voltar ao meu Live Server e atualizar e não há reclamações desta vez do Visual Studio Code, um barco, qualquer coisa sendo uma sorte difícil. Então isso significa que se eu continuar digitando e eu disser, esta é minha primeira página da web, veja como o servidor ativo se sai. Atualizado isso para mim automaticamente. E o Visual Studio Code não está reclamando porque agora está feliz e satisfeito que eu tenha documentos HTML totalmente estruturados. Então, como eu disse, são regras muito rígidas em torno disso. Bem, uma vez que você obtém isso sob sigilo, então você não tem problema. Observe também na guia do navegador, você verá minha primeira página da Web. Então é isso que colocamos no título. E então no documento estão nossos textos. Agora. Sim, temos texto, mas não é necessariamente ideal para nós apenas escrever o texto. Às vezes precisamos estruturar que leva você queria para a esquerda, queremos para a direita. Queremos que esse bloco de texto específico pareça diferente do outro bloco de texto. Então, temos que usar tags diferentes que elas possam ser direcionadas de acordo. Então sim, eu tenho esse pedaço de texto, mas o que vou fazer é colocá-lo no que chamamos de tag p. Então P é abreviação de parágrafo. E o legal sobre o Visual Studio Code é que, quando você passa o mouse sobre esses cães, isso realmente explicaria o que eles representam. Portanto, o elemento p representa um parágrafo. Então, toda vez que você tiver um bloco de texto, recomendo que você o coloque dentro de um tipo p. E então você pode ter várias tags p que dizem coisas diferentes. Esta é a tag p. Tudo bem? Oh, esta é a tag p. Tudo bem. E você tem várias maneiras de receber texto. Então você tem a tag p, você também tem o que chamamos de heterozigotos. Então eu poderia dizer cabeçalho e vou colocar o helloworld dentro das tags de cabeçalho, então é h um. Tudo bem? E então você tem H1 a seis. Então, um é o maior, seis é o menor. Então, vou apenas duplicar esses. Então eu só estou pressionando o Control pressionando C. E percebo que não estou destacando o forro ou qualquer coisa. Basta ver então V e ele duplicará a linha para você com o mínimo esforço. Então vou fazer H2, H3 para cinco e depois seis. Então que não, não esse swale. Eu abro e fecho isso deles corretamente. Eu mudo este para H2O e não estou fechando corretamente. Isso é normal, sempre tentou ser disciplinado. Os navegadores modernos tentaram compensar suas setas. Então, se você olhar no navegador, verá que está vendo esse tamanho decrescente, como eu mencionei de H1 a H6, e está diminuindo. Isso porque está compensando o fato de que eu não fechei a etiqueta corretamente e pressupõe que eu quis dizer tag H2, então já está preenchendo o espaço em branco para mim, mas isso é um não-não. Então, isso é uma coisa a mente. Um barco leva editores. Alguns deles são melhores do que outros em mostrar isso, mas geralmente não dizem, oh, você tem um erro sintático. Eles apenas os deixarão manifestos no visor da página, ou se manifestarão em qualquer situação. E então você achará que seu código é bom, mas é sempre bom ser disciplinado e fazer certo na primeira vez. Então, quando abro uma tag H1, fecho-a. Se eu abrir uma tag H2, fecho-a. Se eu abrir um H3, amarre o fechamento deles. Então, estou apenas clicando duas vezes , copiando e colando. Tudo bem, isso é tudo o que estou fazendo aqui. E então você notaria mais uma vez, nada atualiza na tela porque eles já sabiam que eu imaginei que eu quis dizer cada 234, etc., etc. Também temos as tags p abaixo, e essas são, ok. Agora vamos dar uma olhada em outros rebocadores. Tenho certeza de que você achará útil e provavelmente são as tags ou coisas mais comuns que você veria nos sites. Então, além de textos que variam de grandes a pequenos, tenho certeza de que você está familiarizado com links porque você precisa clicar em um link para mover de uma base para outra, ou clicar em um link para mover de um site para outro, então você tem uma tag chamada tag âncora. Então, se você passar o mouse sobre ele, você vai vê-lo. Se o elemento tiver um atributo , ele representa um hiperlink. Então, um hiperlink, essa é a bela palavra prevendo você terá um link ou essa é uma palavra completa forçando você ter um link, certo? Observe que ele disse um atributo chamado deriva. Então, vamos ver o que é um atributo. Então, temos o puxão e estabelecemos que o que acontece entre a tag aberta e fechada é o conteúdo do tópico. Então, vamos ver, temos essa tag âncora e eu queria vinculá-la à Amazon. Tudo bem, então vai surgir a palavra Amazon aparecer o quê? Não é clicável, veja, não é um link, então esse é o conteúdo da tag âncora. Mas então eu precisava ser clicável. Então, o que preciso fazer é adicionar um atributo. Um atributo vai para dentro do aberto, colocando você que esta é a tag aberta. E eu fui da barra de espaço ANS. E então vou digitar esse atributo H ref. Agora, há vários atributos que podem ser usados. Alguns deles são legais até agora não. Alguns serão ignorados, alguns vão estragar tudo. Tudo bem? Bem, em geral, maioria das vezes você veria como um atributo chamado ID, que é como um nome especial que você está dando a essa tag específica. Tudo bem, então eu posso ver o link, um, esse é o ID deste link. Mas então o atributo que realmente torna o link common law é o atributo, atributo. E então eu teria que digitar o link para onde eu quero ir. Então, vou colocar o URL completo, https dois pontos barra de barra www.amazon.com. Tudo bem, depois de fazer isso, observe como ele muda automaticamente. Saiba que o navegador sabe que este é um link que vai para a Amazon.com. E quando clico nisso com certeza, ele para uma Amazon carregada. Então eu só fiz um clique no meio para que ele aparecesse na banheira diferente. No entanto, se você quisesse que ele aparecesse na guia diferente automaticamente porque se eu clicar nele, será apenas Bros, às vezes, não queremos que isso aconteça com nossos navegadores, certo? Queremos nossa tristeza com nosso site. Às vezes, queremos que eles cliquem no link e façam um pH diferente, mas não se afastem do nosso site. Então, para fazer isso, posso ver que o alvo é igual e, em seguida, dizer sublinhado em branco. Assim, o navegador sabe quando o link é clicado, abra outra guia ou outra janela que eu vejo. Portanto, os atributos permitem que você dê algo especial à tag específica com a qual você está lidando. Agora, e se eu me lembrar que estamos construindo em nosso site. Então, nosso site é uma coleção de páginas da web, certo? Não, só temos uma página chamada index.html. E se eu quisesse navegar entre as páginas? Tudo bem, então eu vou criar outra página, e vamos chamar essa de HTML de ponto de barco. Então esta é minha página de barco. E vou dar a mesma estrutura básica e vou fazê-lo do zero para que você possa ver novamente. Então começamos com o DOCTYPE HTML e, em seguida, abro a tag HTML e, em seguida, temos a inserção de que temos a cabeça e, em seguida, o corpo. Então na cabeça que eu queria ver está uma página de parafuso. E então, no corpo, vou colocar algo simples. E C, cada um, um barco, um discurso. Tudo bem, então é aí que gostaríamos de navegar até a página do barco deles. Então, se eu quisesse um link que navegasse lá e eu vou colocar esse link no topo, porque geralmente é onde a citação da barra de navegação não aspas para ir de qualquer maneira. Então esse link para permitir que ele vá para essas balas ou fala, verei a idade ref é igual a um HTML de ponto de barco. E isso é realmente tudo o que é preciso, certo? Só preciso colocar na ferramenta AS o arquivo para o qual eu quero navegar. Observe que ainda não há nada na página. Por quê? Porque eu não dei o conteúdo. O que se passa entre o aberto e o fechamento é o conteúdo. Então eu vou dizer um ônibus de barco e então podemos chegar estão ligados ao discurso do Ibotta. E quando clicamos nele com certeza, chegamos ao nosso aplicativo parafuso de fala. Então esse é esse buraco. Você pode vincular uma página a outra. Tudo bem, então, quando voltarmos, o que vamos fazer é olhar algumas outras tags de valor agregado, como obter uma imagem e como chegar a uma lista e segurar para começar a sentar formulários. Então fique atento. 4. Explore mais tags HTML - Imagens, formulários e listas: Bem-vindo de volta pessoal. Continuamos aprendendo sobre as tags HTML básicas. Saiba, o que vamos fazer é dar uma olhada em como podemos colocar uma imagem em nosso projeto. Então, vamos fazer isso com a página sobre, já que ela faz muito menos conteúdo e página de índice. Então, para obter uma imagem, vou pular para um dos meus sites favoritos que usam, que é pixabay.com. Então, eles têm lindas fotos de stock de graça. Tudo bem, então vamos pegar o primeiro que vemos. Você pode não estar vendo a flor, mas os conceitos são meios independentemente da imagem que estamos usando, Download gratuito e download. bastante pequeno. Então, vamos em frente e clique em Download. E quando você receber o arquivo, você notará que ele corre bem, vai para sua pasta de downloads ou onde quer que os arquivos baixados sejam padrão no seu computador. No entanto, mais uma vez, quando você está criando um site, você quer todos os seus ativos, todos os arquivos relacionados ao site na mesma pasta e o mesmo local para facilitar o acesso. Porque, como você viu quando estávamos criando a referência de idade para a tag âncora, foi tão fácil quanto apenas ver o nome da página. E se o spandrel não estiver na mesma pasta, então eu teria que qualificá-lo completamente após dois pontos de barra, qualquer que seja a barra de pasta, qualquer que seja a barra de pasta, qualquer que seja pasta de downloads que estiver longe de onde sua pasta do site pode ser artística. Então, colocá-los no telhado do DCM, por assim dizer, é sua melhor aposta em ter facilidade. Assim, você pode ir em frente e encontrar essa imagem em seu sistema de arquivos. Você pode copiá-lo como arrastá-lo e soltá-lo dessa pasta no código do Visual Studio. E ele entrará automaticamente nessa pasta com todos os seus ativos da Web. Tudo bem, então você pode ir em frente e fazer isso. E uma coisa que quero apontar antes de avançarmos é que você pode obter um nome de imagem. Mas então esse nome de imagem pode ficar complicado porque quando você tem que digitar a imagem informada e para cima no tipo Watson, Florida dash dot alfanumérico ou qualquer código, ponto JPEG. Então você sempre quer tentar renomear seus arquivos para algo simples ou algo muito indicativo para que você possa pegá-lo facilmente. Então, vou renomear essa decolagem todos esses números e chamá-lo de ponto de girassol JPEG. As extensões são muito importantes se for P&G, não o altere. Se for JPEG, não o altere. Se for GIF, não o altere. Seja qual for o nome, ele sempre retorna uma rotina, aquele ponto e o que poderia alfabetizar os pontos. Tudo bem, então o ponto de girassol JPEG ou JPEG é o que eles chamam essa combinação de letras. Saiba que temos nossa imagem de girassol dentro de nossa pasta e pronta para uso. Você pode ir para sua página e, em seguida, você pode usar o que você chama de tag IMG. Essa tag é especial porque ao contrário das outras tags, ela é de fechamento automático. Ele não tem IMG aberto e fecha IMG. O corpo abre e fecha, abre e fecha. Isquêmico. Faz isso H1, todos os que olhamos até este ponto, abrem e fecham. No entanto, o IMG está se fechando automaticamente. Agora, como dizemos ao IMG qual imagem ele deve exibir? Bem, usamos atributos. Então, os primeiros atributos, e provavelmente o mais importante é o SRC. Src diz: Onde está a fonte? Tudo bem? Então, a fonte da imagem seria, e seria o caminho da imagem. Então, um barco está bem além do chão, então a fonte é girassol, certo? Eu não notei que o código do Visual Studio realmente fará a sugestão de que tudo o que você está tentando fazer com que o chão da favela pressione Enter e ele automaticamente fará isso para você no servidor ao vivo está assistindo servidor ao vivo será agradável e fácil. Agora, se você quisesse ajustar o tamanho disso, você sempre pode ver que outro atributo chamado width. Então você poderia reduzir esses 200, você poderia aumentá-lo para 900. Bem, é claro que ele queria ter muito cuidado com isso porque a imagem que obtivemos estava neste 64 para comprar algo pixels. Então, eu não gostaria de aumentar a largura para mais do que a imagem é porque então ela começa a ficar pixelada. Então, isso é uma coisa a ter em mente. Ao escolher imagens para diferentes propósitos, certifique-se de que elas sejam grandes o suficiente para a seção em que você deseja. Ou se eles vão para uma seção menor, mas é chamado de impressionante para esse tamanho específico, de modo que ocupe menos espaço em seu disco rígido em geral, e leva menos tempo para carregar o ativos para um site. Imagine tentar carregar esse arquivo de megabyte B3 que realmente vai exibir 200 larguras, certo? Quando se você compactá-lo, provavelmente seria um arquivo de 200 kilobyte. Você está chateado com Lord Foster. Saiba, assim como com a largura, você também pode ajustar a altura e você pode se divertir com esta. Não há muito mais que eu possa dizer sobre isso é que você pode simplesmente se divertir um pouco. Você brinca com as dimensões, se precisar. Então você encontrará imagens diferentes e tentará colocá-las, alinhá-las de acordo. Mas é assim que você obtém uma imagem. Mais uma vez, essa é uma tag de fechamento automático. Existem vários desses. Então alguns deles você nunca usará até que você tenha duas almas. Quero dizer, não mencionei isso, não, mas saiba que eles estão lá. E mesmo que eu não possa te ensinar uma única tag, é que eu não veria que é possível ensinar cada tag em cada cenário em que eles são usados. Eu apenas encorajaria você a experimentar e praticar, e isso é tudo o que você realmente desenvolverá suas habilidades de desenvolvimento web. Agora, da próxima vez que quisermos olhar, bem, realmente duas tags são meio que andam de mãos dadas porque elas fazem coisas muito semelhantes seriam listas? Não. Você estaria familiarizado com as listas se usasse o Microsoft Word e ele quisesse uma lista de marcadores ou se quisesse 123, qualquer forma de listagem, você pode conseguir isso com HTML e seus participantes. Você só tem a tag UL, que é a abreviação de lista não ordenada. E uma lista não ordenada sempre terá um item de lista, um ou muitos itens da lista. Não, nada deve entrar nesta tag UL, exceto nossa etiqueta de item de lista. Depois de colocar a tag do item da lista, então você pode enlouquecer com o que deseja novamente, colocar uma tag p, certo? Lista, item um. Você poderia colocar outro tipo de gravata. Você poderia colocá-lo em H algo alvo, certo? Você poderia colocar uma toalha de cinco anos se quisesse. Qualquer tipo de tipo pode ir, mas você nunca gostaria de colocar essa tag h5 diretamente nessa lista, naquela tag UL rhabdo porque olhe para a neve diferente, essa bala vai embora e então eu tenho certeza vai para Crayola, é sobre outra coisa. Então, como eu disse, pode não dizer na edição terrível com esses erros. Principalmente, ele definitivamente se manifestará no visor. Tudo bem, então você só quer seguir as regras. Ally UL, desculpe, abra a lista não ordenada, então você começa com o item da lista e depois coloca o que deseja no item da lista. Então p tag, 59 anos, coloque uma imagem na tag do item da lista. Isso realmente não importa. Tudo bem, então só queremos saber a outra versão da lista seria a, OH, que seria a lista ordenada. Então, quando queremos 1, 2, 3, lá vamos nós. Então vemos o OLC. Você vê que esses dois são realmente idênticos. Eles são como primos muito próximos, certo? Você vai. E o óleo, ambos têm a mesma estrutura dentro dele. Ambos escavam itens da lista e, em seguida, tudo o que você precisa vai dentro dessa tag de item de lista. Saiba. E vamos dar uma olhada no próximo item principal do ticket, que é o formulário. Então, o que vou fazer cria um novo documento, e este será chamado de HTML de ponto de contato. Contatos ponto HTML. Vou desencadear a mesma estrutura por noaa. Espero que você tenha praticado um 10 anos familiarizado com ele, cabeça e corpo neste momento também, peço sinceramente desculpas por ter esquecido de mencionar que você precisa salvar seu documento a cada alteração. Acho que você descobriu. Eu sei, mas eu era uma supervisão da minha parte. Peço desculpas. Mas você precisa ver as alterações que estiver fazendo antes um servidor ativo escolha adultos e idosos. Uma coisa que eu fiz porque nem sempre me lembro de ver se sou tipo, oh, não, eu não mencionei que você precisa salvar. É porque eu tinha habilitado o salvamento automático. Então, no Visual Studio Code, eles permitem que você diga salvamento automático. Portanto, quaisquer alterações que você fizer serão refletidas, é por isso que meu servidor ativo está sempre atualizando porque ele está sempre salvando automaticamente no sujeito a bugs. Então peço desculpas por não mencionar isso antes de nulo. No entanto, vamos seguir em frente. Então, dentro da nossa página de contato, temos o título. Então, são tomates divertidos. E então, no corpo, vou colocar uma tag H1 que diz font ductus, para que qualquer um que chegar nesta página saiba em qual página eles estão, certo? Agora, geralmente um formulário de contato tem bem, forma, um contato de fala está fora da fazenda. Então, vamos também ver como formulamos formulários e formulários são realmente fáceis. Mas devo mencionar que os formulários são o gateway entre um usuário e seus sistemas internos. Porque toda vez que um usuário digita algo ou insere algo no formulário e clique em Enviar. Na verdade, eles estão enviando sobre d Theta para o seu sistema. Então, mais tarde, quando você chegar a um nível mais alto de desenvolvimento e construir sobre bancos de dados, criando interfaces da Web em cima de um banco de dados. E, como quando estamos fazendo o desenvolvimento principal do ASP.net, analisaremos certos recursos de segurança que precisamos para garantir que incorporamos nossos sistemas. No entanto, por enquanto, vamos seguir em frente. Então, para obter o formulário TO, temos a tag do formulário, certo? E eu disse simples, simples o suficiente. Então deixe-me digitar isso apropriadamente. Formulário. Não, o form tem três tipos de tags que ele pode pegar. Digamos que liberalmente são pelo menos quatro tipos de alvos, certo? Temos o que chamamos de rótulo. O rótulo é importante porque nos diz ou nos permite ver. O campo está prestes a ser editado. Deixe-me acertar minha ortografia. E observe que estou tentando fazer tudo em letras minúsculas, certo? Os rótulos são quais campos, então esse seria FirstName, esse é o meu rótulo, certo? Então eu vou dizer qual controle eu quero aceitar o primeiro nome e eu vou qual controle seria melhor se você dissesse caixa de texto, então você está certo no dinheiro porque geralmente quando você está digitando seu nome, é texto. E você obtém uma caixa que permite inserir texto. Portanto, é uma caixa de texto. Então você provavelmente está pensando, Ok, então há uma caixa de texto que Doug sabe que lá é diferente. Você tem uma tag de entrada. Tudo bem. O que também é o fechamento automático. Saiba que a entrada usa atributos que a ajudam a definir nossa identidade de ruído. Então eu diria que o tipo é igual a 0. E então aqui vemos toda a lista de tipos de entradas, certo? Então, a partir do topo, pode ser uma caixa de seleção colorida, fez todas essas coisas maravilhosas. Mas agora, para o primeiro nome, o que é mais adequado seria a caixa de texto. Então, digite é igual a texto. Tudo bem, vou te mostrar outra coisa. Lembre-se que mencionei anteriormente o atributo ID. Este é um nome especial que damos a essa tag. Bem, se eu ver fname, isso me permite usar esse rótulo e etiqueta C para. E então eu dou o mesmo F9. Tudo bem? E embora um atributo importante que acompanhe as tags de entrada, especialmente quando você está lidando com código do lado do servidor é o nome. Então você diria que o nome é igual. E se o nome, então o nome é muito importante para quando você vai colocar a inteligência usando Python, PHP, C-sharp, como vamos fazer com dotnet Core. Ele permite que esse idioma realmente veja o valor vindo desse controle específico, desse controle específico. Portanto, temos o formulário onde quer que o rótulo, temos uma caixa de texto. Então, FirstName, está feito. Podemos fazer o endereço de e-mail. Então, vamos ver apenas o nome completo em vez de nomes também é um fname. Fname pode ser nome completo, certo? Este aqui, vamos ver, e-mail. Então, quero o endereço de e-mail do usuário que está tentando entrar em contato com o endereço de e-mail. E então vou ver que o tipo é igual a lo e eis há um tipo de e-mail, o e-mail de IDs. Então, estou ligando para esses e-mails. Eu poderia ter qualificado totalmente seu endereço de e-mail inicial e o ID e o nome não precisam necessariamente ser a mesma coisa. Tudo bem. Então, só estou brincando um pouco aqui. Deixe-me expandir esta vaga o código totalmente. Tudo bem, então temos nosso nome completo, temos nosso endereço de e-mail. O que mais precisamos em nosso formulário de contato? Digamos que você precisasse da consulta. Então, mais uma vez, mais desse rótulo e eu vou chamá-lo de consulta ou reclamação, seja lá o que for. E o trabalho vai dizer consulta. Sabe que a consulta seria o que o parágrafo estaria vendo? Estou descontente por causa disso. É por isso que estou entrando em contato. Você quer permitir que eles leiam o ensaio para qual eles vieram aqui, de qualquer maneira, ler. Então é aí que você vai vê-la área de texto, porque ela pega área lhe dá um espaço muito maior para escrever, absorver, modo que leva a seta. E então, mais uma vez, não precisamos tipo porque eles já sabem que é que ocupa área. Mas podemos dar um ID e vou apenas dizer consulta. E mais uma vez, queremos dar o nome para que possamos ver a consulta. Tudo bem, agora vamos dar uma olhada rápida em todo o nosso trabalho duro até agora. Então, o que vou fazer, voltar ao índice e criar outro URL. E este eu vou chamar ponto de contato HTML. E é divertido. Fale conosco. Nenhuma boa regra geral com o design do site e o site porque existem vários documentos, várias páginas, você quer ser capaz de obter de qualquer página para qualquer página de qualquer outro pH, certo? Então, o que você teria que fazer é adicionar uma nova marca âncora que faça referência à página inicial. Tudo bem, então sim, é a página inicial referenciando a página inicial como tudo o que você estaria na página inicial dos nossos sites. Você faz login. A escala de cinza só leva você de volta à página inicial. Não foi a lugar nenhum, certo? Portanto, temos esse link para a página inicial, mas depois podemos copiar esta seção. Tudo bem, eu não quero fazer é apenas usar um var ou o que vamos chamá-lo de pipe no meio. Então, se você estiver usando o teclado ocidental, então isso será a mudança na barra invertida, que geralmente fica acima do botão Enter que lhe dá esse pipe, certo? Então isso se separa nas etiquetas de âncora. E então eu vou colocar essas tags âncora em cada página, certo? Então, tanto o conteúdo, vendo em que página estou. Eu tenho essa navegação improvisada por isso com fugir para mover-se entre as páginas. Vê isso? Então é assim que esses conceitos se reúnem para o design de decida do quadril, certo? Pouco a pouco, você vê como tudo isso interconecta nó e aquele nó que eu resolvi essa navegação entre as páginas. Se eu atualizar ou voltar para navegar, verei que se eu clicar em Home, estou no todo, mas olhe para isso, posso chegar a quem posso chegar a essa maltose. Posso voltar para casa, posso ir para Fale Conosco, olhar para isso, então eu posso voltar para um barco também. Vamos nos concentrar em um contato conosco agora. Então, temos nossos livros didáticos Isso é legal. Olhe para isso, pega caixas e, em seguida, podemos escrever nossa consulta. Isso é bom, mas não estou muito satisfeito com o layout e tenho certeza que você também não está porque tenho certeza que você não está acostumado a ver contato com esses formulários, todos indo em uma linha como essa. Tudo bem? Então, o que gostaríamos de fazer é configurar uma pausa entre eles, certo? Então, para obter o alerta Brick New TAG, temos a etiqueta de fechamento automático BR. Br só quer dizer BreakLine, certo? Você apenas representa o resumo. Então isso será como quando você pressionar Enter no Microsoft Word, você sabe, você está digitando, digitando, digitando, você vai querer ir para a próxima linha. Você pressiona Enter, você digita novamente. Então BR é o que permitirá que você coloque a linha de freio de tijolos entre blocos de conteúdo em sua página. Observe, porém, na página de índice que não precisávamos quebrar quando fizemos o H1 e os p's porque eles meio que vêm com seu próprio mecanismo de frenagem. Então, dentro de uma tag P, se eu quisesse ter um bloco de texto, depois outro bloco de texto, mas dentro da mesma tag p, então eu poderia simplesmente injetar essa tag BR. E vou te mostrar isso rapidamente. Então, digamos que eu tenha, esta é minha primeira página da Web. Posso saber dizer que isso é o que eu quero na nova linha. Não como eu disse que, se eu voltar para minha página de índice, observe que está tudo lá. A linha, se eu pressionei Enter stint no Pieta, aqui está uma tag P abrir e fechar. E vamos colocar três espaços para espaços entre eles e eu volto, sem mudança, certo? Ainda está indo em um olho. E é por isso que precisamos desse tempo de intervalo para depois dizê-lo para ir para a próxima linha e quantas pausas colocarmos, quantas linhas ele apresentar, mas ainda estamos em cena. Etiqueta P. Tudo bem, então isso é segurar essa tag break realmente funciona para nós nessas situações. Então, volte ao nosso formulário Fale Conosco. Dissemos nome completo e seu nome completo. Dê-me um breve e próximo rótulo. Digite o que você precisa inserir, dê Maverick e, em seguida, Enter. O que você precisa entrar? nossa página Fale Conosco se parece com isso. Não. Bem, existem diferentes interpretações de como as formas podem ser. Ainda não estou satisfeito com este. Eu não quero que meus rótulos e minhas caixas de texto sejam meus controles na mesma linha também. Então adivinhe o que posso fazer. Introduza uma pausa. Veja, agradável e simples. Então, rotule, me dê uma nova linha, então me dê a caixa de texto, me dê uma nova linha, então me dê o próximo nível e você pousa isso, certo. Então, ao fazer isso, lá vamos nós, que parece uma forma muito melhor. Essa é uma forma muito melhor do que o que tínhamos apenas nulo. E se quisermos mais espaço, apenas quebramos a linha duas vezes no meio. Então, nome completo e, em seguida, temos um pouco de luz do dia entre eles. Lá vamos nós. Tudo bem. Podemos ler bem. Então, a próxima coisa agora seria um botão. Se você estava olhando e eles dissessem, ok, bem, onde está o botão? Isso é bom. Você precisaria de um botão chamado Solis. Eles vão enviar? Eles precisam de um botão de envio. Então, em tudo isso, eu posso colocar mais dois tijolos e, em seguida, posso ver tipo de entrada é enviado. Tudo bem, então posso dizer que o volume é igual a, e isso me permite ditar o que quero ser impresso no livro para eu possa dizer enviar sua consulta e escrevê-la tão detalhada quanto você precisa estar no momento em que está se fechando automaticamente. Então, barra e o colchete de ir e lá vamos nós , envie sua consulta. Saiba que cada formulário tem o que você chama de ação. Portanto, tenho certeza de que mais permanece quando você preenche um formulário e clica em Enviar, ele geralmente vai para outra página. Normalmente, ele faz uma das duas coisas. Desculpe. Ele informará que o formulário enviado é inválido porque os dados não atendem a determinados requisitos ou vão para outra página até que os dados tenham sido salvos com sucesso. Então posso dizer que o oxigênio do formulário é igual a e então posso desistir da página. Então, se eu disse que o leilão de fazenda é igual a index.html, isso significa que ele irá para a página de índice depois de ter sido enviado. Em qualquer lugar que eu coloquei aqui é onde ele navegaria na ferramenta. Então, se eu disser enviar sua consulta, observe que ela acabou de navegar. Normalmente, não seria o layout da página de índice. Sucesso, PJ ou algo que tivesse a dizer salvo com sucesso. Mas então eu não tenho nenhum tipo de discurso. Então eu estou recebendo o que é chamado de 40 para flecha. E está vendo não conseguir a página. Observe também que os nomes dos controles que eu adicionei ao formulário estão listados na URL. Então isso é o que você chama de string de consulta, certo? Então, se você for no Google ou no YouTube e digitar gatinhos fofos, tenho certeza que o que você vai ver é a pesquisa de barras do youtube.com. Com esse ponto de interrogação. Então talvez a pesquisa seja igual à nossa consulta de pesquisa seja igual ao que você digitou. Então isso é tudo o que realmente está fazendo, mesmo que seja um formulário. Tudo bem? Portanto, os formulários estão em todos os lugares toda vez que você digita informações e clica em um botão, você enviou um formulário. Então, apenas como um teste, vou colocar o nome de alguém, enviar a consulta e ver se o nome é igual ao nome que acabei de inserir. O endereço de e-mail é igual ao endereço de e-mail que acabei de inserir em consultas em branco. Eu não inseri uma consulta. Bem, só estou mostrando o que acontece. Então isso é manter essas linguagens do lado do servidor. Não, posso dizer que me dê essa variável e qualquer valor possível para ela. Tudo isso é enviado toda vez que você envia um formulário. Então deixe-me voltar e configurar a página de sucesso para o envio do nosso formulário. Então, vou dizer novo arquivo. Então, outra maneira de criar uma nova moda é clicar com o botão direito do mouse no Explorer. Portanto, se eu clicar com o botão direito do mouse, recebo a mesma opção para criar um novo arquivo ou uma nova pasta. Então vou dizer novo arquivo, não quero ver o HTML de ponto de sucesso e depois subsetss dot HTML. Mais uma vez, quero que ele possa navegar para onde quer que esteja no meu site. Então, vou dar a ele o mesmo esqueleto HTML. E nesta fase, escrevemos o esqueleto algumas vezes. Então, o Visual Studio Code , mais uma vez, sendo a ferramenta de produtividade que é, nos permite apenas dizer HTML dois pontos cinco e ver o que ele gera para nós. Então, estamos vendo um pouco mais do que onde você ainda vai, mas não desanime com isso porque é muito, muito, muito conveniente, certo? Então, ainda vemos nosso doctype, ainda recebemos nossa tag HTML. Não terei um atributo onde ele diga ao navegador em que idioma o site vai estar. Recebemos algumas metatags que veremos mais tarde. Então, como quase todos FADH, estes são destruição ou analógicos, basta excluí-los. E então obtemos o título e o corpo. Então, o título aqui seria sucesso. E no corpo, vou colocar os links da barra de navegação, citar links da barra de navegação sem aspas, que possamos navegar para onde queremos ir. Dê a tag H1 para ver que você teve sucesso ou seus dados foram vistos como pecaminosos, foram salvos. Tudo bem, então vamos experimentar nosso formulário mais uma vez. Então, vou colocar isso, e esta é minha consulta. Enviar, seus dados foram salvos. Portanto, saiba que nosso sucesso está trabalhando mais uma vez, se você olhar na string de consulta, verá a consulta com os dados enviados. A partir daqui. Eu posso optar por ir sobre o pente. Posso optar por ir para a Amazon, posso optar por ir por todo o lado. Então você vê, os formulários também não são tão complicados. Existem muitos tipos de controles de formulário que você pode usar. Você pode ir em frente e explorar, basta digitar, e eles podem ver o que você obtém para cada um desses tipos. Acabei de mostrar que os mais comuns. Mas você pode obter o número de telefone, você pode obter alcance de pesquisa, senha, todos os tipos de tipos de controle. Por isso, encorajo você a seguir em frente e criar um fórum por razões mais complexas e experimentar os diferentes tipos de controle que existem. 5. Ainda mais tags HTML - Tabelas, comentários e estilos em linha: Ei pessoal, bem-vindos de volta. Então, ainda estamos olhando para HTML e algumas das tags mais populares ou mais usadas. E o próximo é as tabelas. Portanto, as tabelas podem ser um pouco complicadas. Ele e formas geralmente são os mais complicados, mas é por isso que estamos aqui para quebrar essas barreiras em nosso conhecimento. Então, vamos dar uma olhada em quais tabelas são e usaremos a página HTML de pontos barcos para fazer isso. Então, eu só vou me abraçar. Então, no Visual Studio Code, se você passar o mouse sobre os botões, verá cenouras e, na verdade, você pode simplesmente clicar em rebocadores de colapso. Veja isso. Então, vamos começar com isso. Portanto, é um começo da tabela. Sim, você adivinhou. Temos mesa aberta e fechada. Esse é o artigo dele. Não, uma tabela é pensada como uma planilha do Excel ou tenho certeza que você está acostumado com o que uma tabela está em um pedaço de papel se você tiver linhas e colunas. Agora vamos conceituar que, em primeiro lugar, começa com nosso papel. Então, dentro da tabela, nenhum outro conteúdo entra. Mas para um TR, que é abreviação de tabela, papel. Tudo bem, papel das células em uma tabela. Não, eu rolo tem colunas ou prefiro chamar a si mesmos modos é que eles também chamam a si mesmos. Por que eles são chamados de células? Porque são literalmente unidades individuais. Eles não são necessariamente as colunas que vão até o fim. O papel tem células. Então você está apenas colocando uma célula ou TB ou dados de tabela na função diz que muitas células ou como você provavelmente limparia para analisá-las colunas, pois você vai colocar tantas tags td. Então, se eu fosse um anúncio ou talvez o nome, idade, e digamos data de nascimento de várias pessoas fora dos membros da equipe para com nossa empresa, um barco a quem esta página é dedicada, escreva uma bala de fala. Então, estamos listando todos os membros da equipe. Então deixe-me quantificar isso e colocá-lo em talvez uma tag h3 que diga detalhes do membro das coisas. Tudo bem. Então, os detalhes dos membros da equipe, digamos que tivéssemos um TR e, em seguida, o que você gostaria de fazer é dar um cabeçalho para os dados que estarão abaixo. Então, em vez de td, vamos começar com th. É a abreviação de cabeçalho da tabela, certo? Porque geralmente você tem uma regra que diz o que cada coluna representa. Um nome, nome próprio, último nome, idade de nascimento. Bem tabela para que quando você estiver na quinta coluna, você se lembra, Oh, isso é o que isso representa, certo? Então, vamos ter um nome. Vamos ter, digamos algo simples, imagem e identificação da equipe. Tudo bem, essa é a nossa tabela, que é o nosso primeiro rolo, e esse é o conjunto de colunas para todas as células que estarão nas outras linhas. Então esse é o papel um para a segunda regra ou o membro da equipe real, eu só tenho outro TR, em seguida, abra td e, em seguida, o nome aqui seria Lewis sentiu. Tudo bem. O que vou fazer é usar o CV de controle, aquele pequeno atalho para duplicar linhas. Lewis tem 29 anos e sua identificação de equipe é 77. Algo é e todas essas coisas. Lembra-se? Assim, quantos membros da equipe, tantas linhas quanto dinheiro vende dados, posso simplesmente continuar copiando e colando e apenas mudando os dados. Agora, obviamente, isso não é muito dinâmico, especialmente se essa OTAN deveria vir do banco de dados de funcionários. Então, quando começamos a usá-lo dotnet Core, observamos como exatamente automatizaremos toda essa geração. Que estrangeiro? Oh, é muito dinheiro. Bem, então vamos ter a Hannah, como Milton e este problema é 32, e o ID das coisas dela seria a ferramenta 234. Tudo bem. Vamos dar uma olhada na nossa página sobre para que eu possa clicar com o botão direito do mouse e dizer Abrir com o Live Server. E lá vem e lá está nossa tabela abaixo. Então, o que eu queria fazer é comentar tudo o resto que não está diretamente relacionado a essa atividade. Portanto, é um comentário de documento. E comentar significa que o código permanece, mas ele o ignorará quando falarmos sobre comentários. Então, para fazer um comentário em HTML, tudo bem, abra o colchete angular. Eu uso a exclamação são, e tenho dois traços e um aviso de que isso meio que completou isso para mim. Então, o que for dentro desta seta, qual Visual Studio? Está representando como texto verde será ignorado. Então, mesmo que eu me refresque, você não verá toda você não verá toda essa idiota sendo renderizada na praia, certo? Então isso significa que se eu quiser ter um pouco de código ignorado, tudo o que fazer é abrir o comentário e então você vê que ele está colocando tudo isso em verde. E então fecharei o comentário no ponto em que eu queria ser ignorado. Então tudo isso é Nenhum comentário que eu posso simplesmente entrar em colapso. Eu, quando eu atualizo, você vê que tudo isso é ignorado, a imagem desapareceu, as listas desapareceram apenas a tag H1, o comentário e a tag h3 e a Empresa abaixo dos comentários. Tudo bem, então é dele, como é a nossa mesa? Não é muito atraente, mas ei, então temos nome, temos idade, temos identificação da equipe. Essa é a regra do cabeçalho, certo? E então isso é assim, então, então, então, e assim. Tudo bem, então a mesa pode usar algum constante, pode usar algum embelezamento. Quais são os níveis mais básicos? É assim que você cria uma tabela? Não, eu mencionei estilo e na introdução você não se lembra que eu mencionei CSS. Portanto, CSS é a abreviação de folhas de estilo em cascata. E sempre que queremos que nosso HTML procure, particularmente empregamos os serviços de CSS. Então, quando eu disse que a tabela precisava de alguma quantidade de estilo, isso significa que posso adicionar CSS aos documentos que eu possa determinar como a tabela deveria ser. Então este é um bom seguimento para introduzir a bunda em pé. Então, vamos olhar para ele em um nível muito básico e depois voltar e olhar para ele mais detalhadamente. Então, para estilizar a tabela, a primeira coisa que vou fazer é adicionar um atributo chamado estilo, certo? Não, a sintaxe que entra nesse atributo é tal que você tem a primeira coisa que digitar é um seletor, e então você tem dois pontos e, em seguida, os valores acima, então eu os chamo de peers de valor seletor. Então, o seletor é, o que você quer mudar? Que barco esse alternador você quer mudar, eles querem traçar, mudar a cor. Você deseja alterar a cor de fundo. Você quer mudar a borda que você possa ver todos esses seletores que são coisas potenciais que poderíamos mudar. Nem todos eles são aplicáveis porque eu realmente não mudaria o vamos ver. Eu realmente não mudaria a tentativa de encontrar algo sobre essa tabela. Provavelmente não mudaria. Mas eu não alteraria o tamanho da fonte da nossa tabela. Certo? Eu mudaria mais um tamanho da fonte de uma tag p ou algo que esteja mantendo textos, certo? Mas eu não alteraria necessariamente o tamanho da fonte fora da etiqueta da tabela. É aí que o selecionado que você usa é relativo à tag que você está usando. Então eu queria mudar, ver a largura da tabela. Então eu dou um valor a ele. Posso dizer 100%, o que significa que quero que esta tabela se estenda o mais longe possível pela página. Então, vamos dar uma olhada nisso. E então vemos aqui que isso é o que parece, certo? Então, o nome está centralizado, então a tag vai automaticamente para o centro. Mas então, se você der uma boa olhada, é aqui que o conteúdo desse nome começa, é aqui que este começa, é aqui que esse site. Então, se eu quisesse tudo centralizado alinhado, eu também poderia colocar em um estilo que diz centralizar alinhar o texto. Então eu poderia dizer que a estatística é igual à largura 100%. Em seguida, ele continuou múltiplo depois, certifique-se de separá-los via ponto e vírgula. Então, também poderia dizer que o texto alinhe o centro. Então estou dizendo que alinhe todo o texto no centro da mesa, certo? Então, estou apenas mostrando que o CSS inteiro funciona sempre que queremos modificar a aparência de algo na página, começamos com essa estatística. Ok, então, quando voltarmos, vamos olhar mais detalhadamente. Eu disse que a tag de estilo nos permite ditar a aparência de nossas páginas. 6. Introdução ao CSS - Inline internas e internas e externas: Então, na última lição, estamos analisando CSS e como ele funciona. E vimos que a largura mais simples aplica CSS é usar o atributo style. Então, vamos brincar com nossa página de índice e explorar atributos inteiros nos ajuda a estilizar os diferentes blocos de textos ou diferentes áreas ou elementos diferentes você quiser pensar sobre isso, mas podemos direcioná-los individualmente. Então, voltando ao nosso código, podemos ver que na página de índice temos todas essas tags de cabeçalho. E se eu quisesse que a tag H1 fosse vermelha? Então posso facilmente dizer que o estilo é igual ao estilo do sermão é igual a, esses são os nossos atributos. Então dizemos, o que é, um barco, esse elemento que gostaríamos de selecionar. Gostaria de selecionar a cor, depois dois pontos e, em seguida, gostaria de mudar essa cor para vermelho. Então, com CSS, você pode digitar o nome de certas cores, mas eu não acho que elas tenham todas as cores, cada sombra por nome. Então você vê malva, malva não era uma opção, certo? Então, se você conhece a cor pelo nome e é uma cor simples, você pode digitá-la em vermelho, bem. Mas, em geral, o que você usaria é hexadecimal ou RGB. Portanto, RGB é abreviação de vermelho, verde e azul. Então você colocaria em casa muito entre 0 255 de cada um que quiser. Então eu quero 255 vermelho, 0 verde e 0 azul. Tudo bem, veja, me diz que é raro. Também usando o Visual Studio Code, você obtém esse seletor de cores. Então, o que digitei na palavra vermelho ou digitei em RGB. Depois de detectar a cor, você pode obter esse seletor de cores. E se ainda não for o tom desejado, você sempre pode arrastá-lo e ver esse valor RGB mudando de acordo. Tudo bem, então se eu quisesse amarrar essa sombra oferecida, então esse é o RGB. Então o vermelho é vermelho, isso teria sido 255 0, 0. Mas, para as diferentes tonalidades, você pode ser muito específico usando seus valores RGB. Então, vou deixar este usando o RGB. Vou mudar o h3 para ser a cor do estilo é, vamos tentar uma cor simples, azul, certo? E então, a outra maneira que você pode realmente obter uma cor é usando o que você chama hexadecimal. Então você diria uma hashtag e, em seguida, você tem uma combinação alfanumérica de caracteres. Portanto, alfanuméricos significa que você pode escolher entre 0 e 9, e você pode escolher entre a a F nas letras. Tudo bem, então, e então você tem seis deles. Então eu posso ver como 000, sou apenas um aleatório com esse borrão. Não sei o que vou ficar artístico. Estou recebendo um tom de verde aqui, certo? 000 F6 1D me dá o tom de verde. Mais uma vez, se você não gostar, você sempre pode mudar, mas o código do Visual Studio sempre, oh, lá está. Está mantendo o hexadecimal. Então, se você começar com hex, ele vai sobre T In hex realmente pensou que ele ia mudá-lo. Então, o RGB, então olhe para isso. Estou aprendendo também. Tudo bem, então se você selecionar e você pode mover nosso próprio e assim você chegar ao seu hexadecimal. Você pode usar sua palavra e usar o RGB. Agora, com tudo isso feito, fui salvar, mais uma vez o que tenho em todos para ver se assim faz com que você salve suas alterações. E então, quando você pular para sua página, você verá as cores diferentes. Olá mundo, hello world e hello world. Tudo bem, então esse CSS inteiro permite que ele estilize. Como você quer que seu HTML se pareça? Então, se eu quisesse mudar a fonte após o ponto e vírgula, eu poderia colocar outro seletor, o que seria divertido. Digamos, estilo de fonte. Então você tem fonte. Que fonte permite que você coloque em todos esses indivíduos? Pessoalmente, não gosto de usar fontes porque você precisa ser muito específico com onde você coloca quais valores. Então, em vez disso, gosto de ser muito específico e ver que faço exatamente a seleção do estilo da fonte. E então eu posso dizer itálico, mas esse é um autor realmente queria, eu queria fonte. Família. Lá vamos mudar a fonte real. Então você está familiarizado com algumas dessas fontes do Microsoft Word. E alguns deles você pode não necessariamente saber, mas você notará que é meio que colocá-los em lote. Então, isso está vendo escolher RL. Se a IRL não estiver no sistema que está carregando a página, escolha Helvetica. Se isso não estiver na página, então padrão um sensor que 90, muitas vezes as máquinas devem ter de qualquer maneira, certo? Então é praticamente o que essa família de fontes se parece. Como você pode ver. Estou apenas encadeando-os. Então, valor de dois pontos seletor. Então eu quero outro ponto-e-vírgula seletor. Em seguida, selecione Oregon e avalie ponto e vírgula novamente E em alguns seletores pode tomar vários valores separados por vírgula. Tudo bem, então quando eu faço tudo isso e olho para trás, você vê que isso não é um helloworld arial itálico , o que é bom. Assim, você pode adicionar quantos estilos ao mesmo elemento necessário na situação. Então isso é o que chamamos de CSS embutido, certo? Por estar em linha, está embutido na linha do TAG real. Agora, o problema com CSS embutido é que ele é limitado no que pode fazer. Ou seja, e se eu quisesse que todas as tags de cabeçalho tivessem esse tipo de estilo? Agora, o que eu teria que fazer é pegar tudo isso e colá-lo aqui, e depois pegá-lo e colá-lo aqui e colá-lo aqui. E em todos os lugares que eu queria ter que colá-lo. Não sou simples o suficiente. Copie e cole um pouco. Tudo bem. Tudo bem. E todo mundo, embora pareça uniforme, mas então e se seu cliente voltasse e dissesse: oh, eu quero, eu não quero essa sombra fora para isso. Eu queria outro tom fora para isso. Então, não, eu tenho que ir e encontrar a sombra para isso com um deles. Digamos que seja mais leve ou mais rosa. Certo? Ou seja qual for a cor que seja? Não, depois de mudar isso em todos os lugares que eu copiei e colei. Então, embora possa parecer simples porque são apenas seis, se fossem 20 lugares, se você estivesse em várias páginas em todo o site, seria muito ineficiente agora tentar metalizar, copiar e colar em todos os lugares. Tudo bem, então essa é a limitação do CSS embutido. Então, a solução para isso seria que você usará folhas de estilo internas. Assim, uma folha de estilo interna entraria na área principal uma página e, em seguida, ditaria os estilos CSS para todo o pêssego. Então, vamos dar uma olhada no que isso parece. 1, temos um tiro estático, então está na seção da cabeça e abrimos e fechamos o estilo. vida interior. O que vamos fazer é dizer quais tags são tags que queremos segmentar. Então, vou começar de forma simples. Não vou incomodar o styles.css. Vou dizer p tags. Quero que todas as tags p na minha página tenham a cor roxa para, por exemplo. Então, temos duas tags p, certo? Como teríamos visto se estivéssemos usando o interior, tive que pegar o estilo, colá-lo nesta tag p e colar nesta tag p. E para todas as outras marcas P na página, apenas discutimos por que isso é ineficiente. Então, o que posso fazer dentro da folha de estilos interna é C p, o que significa que eu quero direcionar o elemento PTHRP. Então vou abrir e fechar chaves encaracoladas. Tudo bem, então ele vendo, ok, claramente aqui seletor está mirando a tag p. é o que o Visual Studio Code está nos informando, mas não devemos ter nenhum conjunto de regras vazio, é por isso que você vê que é para os nove. Então, está tentando dizer, ei, se você não está disposto a ler CSS, onde não declarar nenhuma seção de elementos para ele, certo? Mas vamos escrever CSS. Então eu vou dizer todas as tags p, quero que você tenha a cor e eu fui mantê-la simples, roxa. Tudo bem. aviso nove desapareceu. E se eu voltar para a página, então não tenho certeza do que aconteceu. Isso é um refrescante para chegar a Mach, mas tudo bem. Aqui vamos nós. Esta é minha primeira página da web. Agora observe que esta é uma tag p e esta é uma tag p e ambas são roxas. Tudo de mim escrevendo tinha um lugar o que eu quero para minhas tags P. Tudo bem, então se eu quisesse todas as tags p, o estilo itálico, é o mesmo formato ter o seletor e temos o valor ponto-e-vírgula. E, em seguida, legibilidade do flare Candace dever nas diferentes linhas. Então, em vez de tentar lê-lo ali mesmo, cruze bacana, certo? Como se fosse retratado aqui, o que eu era confuso para mim, certo? Fica confuso para mim cada intermediário ao longo disso, que isso é muito mais legível. Tudo bem, então todos os Beatles, quero roxo e itálico. Lá vamos nós. Então, com muito pouco esforço, acabei de criar p tag nesta página, roxa e diatônica. Então, vamos transferir esse tipo de marcação nula para nossas tags. Então, temos seis cães H e eu quero que todos eles tenham o mesmo estilo. Tudo bem, todos eles precisam ter a mesma coisa. Então o mais legal disso é que posso encadear tags junto. Então eu posso ver H1, H2, H3, H4 têm 456 suporte encaracolado aberto e fechado. E então adivinhe? Posso colocar todo esse estilo. Eu não preciso das aspas, então eu apenas tomo isso como a chamada, os valores selecionados aparecem. E vou colocá-los em suas respectivas linhas do controle remoto, na linha com um ponto e vírgula. Então, eu posso realmente remover esses atributos de estilo de todas essas tags. E então você notará que UP começa a parecer muito mais limpo. É muito mais sustentável. E quando você olha para trás, foi muito eficaz. Então, todos os cães de borda e todos compartilham o mesmo estilo. E o problema é que, mesmo que você queira algo especial para um dos htdocs, digamos que todos eles deveriam ter uma família de fontes, mas você só quer marcar H1 para mim. Oh, desculpe. Todos eles devem ter a mesma cor e família de fontes, mas são apenas as tags H1, itálico. Você sempre pode, depois de especificar para toda a família, você sempre pode voltar e dizer cada um sozinho. Quero que você tenha isso. Tudo bem? Então, quando você voltar, verá que todos são da mesma cor e da família de fontes, mas apenas uma é itálica. Então é isso que o CSS traz para a tabela. Isso é o que as folhas de estilo internas trazem para a mesa. E saiba que o legal é que, se você precisar compartilhar esses estilos em várias páginas, certo? Porque vamos dizer que em todos os lugares em cada uma das quatro páginas até agora temos uma tag de imagem, temos alguma forma de cabeçalho. Todd. Tudo bem, e temos tags P por todo o lugar e todas essas coisas. Você quer que todas essas páginas tenham as mesmas regras de estilo, que é muito importante para a consistência, porque a maioria, se não todos os sites que você entra, você notaria que sempre há um tema comum entre o texto e como ele é exibido em cada batida. Então é isso que chamamos de modelo que só é realizado garantindo que o CSS seja consistente em todas as praias. Romance. Se quiséssemos isso, poderíamos facilmente usar essa área de estilo e apenas colá-la na cabeça de cada pij, certo? Então entre em contato com o sucesso de um barco e o índice NOL tem o mesmo estilo. Então, se eu navegar por todos eles, cada tag h terá a mesma aparência. Tudo bem? Tudo é consistente, certo? E se eu colocar tags P em qualquer outro lugar, todas elas ficarão assim. Agora isso traz outra ineficiência, certo? O que acontece quando você tem 20 páginas e o cliente diz, eu não queria mais que a tag H1 fosse do aiatolá. Eu provavelmente quero isso. Vamos tentar, vou tentar outra coisa. Vou dizer texto, a decoração é sublinhada. Tudo bem, então, no discurso de sucesso, eu mudei. Quero que seja feito em todas as páginas. Isso significa que não depois disso. E você vê que estamos passando pelo mesmo tipo de cópia e colar que acabamos de tentar promover quando fizemos nosso pavor interno de folha de estilo. Então agora eu tenho que copiar e colar isso em todas as páginas que precisam ter esse estilo. E isso, mais uma vez, é ineficiente. Funciona. Mas não é muito eficiente em termos de manutenção, porque se eu perder uma página, então eu saí para voltar e tentar consertar isso. Então, apresentamos a próxima maneira de fazer CSS, que são folhas de estilo externas. Então, folhas de estilo externas significam que vamos ter um arquivo que bebê criou todo o CSS, mas ele não vai morar dentro do arquivo HTML. Vamos apenas fazer um tweets de referência. Então, vamos dar uma olhada nisso. Então, no nosso Explorer, teremos um novo arquivo, e vou chamá-lo de styles.css. Não importa o que você nomeie o arquivo, como algumas pessoas o chamam de seu site dot CSS. Algumas pessoas chamam isso de estilos CSS que CSS, não importa desde que você o termine com CSS de ponto. Essa é a nossa nova extensão de arquivo, certo? Então, styles.css. E então o que vamos fazer, deixe-me aumentar um pouco a interface. O que vamos fazer em styles.css é rotulado como todo o nosso código CSS. Tudo bem, então, em styles.css, estamos realmente colocados nas aspas são tags p são tags. Todo o estilo CSS que teria em todas as páginas do interno. Então essa sintaxe parece da mesma forma que a interna, exceto que está conhecendo seu próprio arquivo. Então isso significa que o índice não tem mais o estilo porque se eu voltar ao índice, tudo voltará ao normal. Agora que eu tenho Está tudo em um arquivo dedicado, o que eu preciso fazer é fazer em marcha lenta. E vou dizer o link rel é igual à folha de estilo. E então seria uma viagem, onde encontro o estatuto que vimos antes com a etiqueta âncora, tudo o que temos que fazer porque eles estão no mesmo nível. Só precisamos ver hf é igual aos nomes dos arquivos. Então, o nome do arquivo aqui é styles.css e, em seguida, esta é uma tag de fechamento automático. Depois de fazer tudo isso, atualizamos e observamos isso. Nenhuma ordem é restaurada no universo. Tudo bem, então agora podemos repetir essa façanha em todas as outras páginas que têm folhas de estilo internas, eu sou ventos são removidos da trava. Vou removê-lo do do contato. E fui removê-lo do sucesso. Tudo bem. Então, eu só estou fazendo isso para mostrar quando eu navego para um parafuso, tudo o que você sabe, e eu digo a ele para fazer uma referência a essa folha de dados, ele obtém estilos de bucket. Quando vou entrar em contato conosco, entre em contato com doses baço, digo que faça referência à folha de estilo. Tudo está parecendo uniforme, certo? Não é o site mais elegante e você o verá. Mas pelo menos vemos como a uniformidade desempenha um papel importante. Tudo bem? Então é assim que podemos me conhecer. Nossos estilos são um pouco mais globais porque, com uma linha, podemos acessar tudo dentro desse arquivo, que tem muito mais estilos do que um. Tudo bem? Então, esse é o CSS inteiro realmente funciona. E eu, para fazer um vídeo mostrando todas as possibilidades de um par de valor seletor seria quase impossível. Há tantas e são úteis várias coisas e às vezes podem usá-las. Algumas tags não podem. A única maneira de se sentir confortável. Eu não diria um dominado porque faço isso há anos e ainda não citei sem aspas, dominei. O que estou confortável porque eu tenho subdominante explorou, certo? Eu explorei o que os seletores existem. E com uma ferramenta como as avaliações do Visual Studio Code na lista, todas elas podem explorar e ver. Ok, então se eu vir índice, quais são os valores? Posso tentar todos os dois. Posso tentar isso. Posso tentar isso. Veja o que parece. Não, se eu precisar usar seu R nada e, em seguida, nada supera a pesquisa. Quando você tem uma visão específica, você sempre pode pesquisar. Você sempre encontrará material para ajudá-lo com essa visão. Então essa é uma introdução muito rápida ao CSS e como ele funciona. Tudo bem, então quando voltarmos, vamos olhar um pouco mais em todo o fim de semana. Use CSS para segmentar partes específicas de seu site. Ou seja, se eu tiver tags H1, mas particularmente a tag H1, eu queria ter uma aparência específica do que posso realmente segmentar de uma maneira específica. Então, estaremos olhando para isso quando voltarmos. 7. CSS avançado - Aulas, tags e seletores de ID: Tudo bem, então da última vez que estamos aqui, estamos vendo como o CSS funciona. Temos uma boa introdução rápida à sua aparência geral. E como eu disse, é quase impossível ensinar tudo sobre CSS em alguns vídeos, mas você tem que explorar e espero que tenha feito isso. Então, vamos seguir em frente. Não. E nesta lição vamos fazer bem duas coisas. Primeiro, vamos ver como podemos segmentar tags específicas. E queremos ver, sim, temos tags P, mas não quero todos os petabytes desta forma. Eu quero uma tag p específica ou um elemento específico. Eu tenho esse olhar e sentir. E também estaremos olhando todo o fim de semana na verdade estilizar nossa mesa porque nós com a largura 100 e o centro de alinhamento de texto, mas não há nada realmente lá para ver. É uma tabela lá, sem linhas de grade que são características principais de como a tabela deve ser. Então, vemos que a tabela padrão é meio anêmica em sua exibição e gostaríamos fazer com que pareça com a aparência. Então, vamos começar com a forma como focamos em línguas particulares, certo? Então, o que fizemos até agora é dizer que todos os heterodoxos devem ter essa cor e todas as tags H1 devem ser sublinhadas. Agora, e se eu não quisesse necessariamente que todas as tags H1 fossem sublinhadas, certo? Então, nikon, a página de índice que tenho, eu tenho dois cães. Um que diz olá mundo. E vou dizer que este é o índice. Certo? Agora, vamos dizer que temos essa tag H1 neste tipo de tag H1 em todas as páginas que dizemos em qual página estamos. Então poderíamos pensar nisso como um título, certo? Portanto, essas são nossas tags de título ou qualquer tag H1, que é a tag de título que diz a que queremos ter atributos específicos. As outras tags H1 não precisam ter atributos, certo? Então, digamos que o texto seja sublinhado. Tudo bem, vamos deixar isso que leva sublinhado para nulo. Ou vamos tentar fazer outra coisa para dizer que a cor errada de qualquer coisa que seja uma tag de título deve ser quebrada. E vamos ver como isso parecerá. Então, aqui vemos que essa seria a tag de título. Este é o índice e helloworld não é o título, então não quero que ele se pareça com a tag de título. Fotos lá está. E acabei perceber que coloquei esse alvo ou lugar errado. Então deixe-me movê-lo abaixo da nossa barra de navegação sem aspas, certo? Portanto, esta é a página de índice. Este é o título, deixe-me dizer que este é o título. Cada um. Tudo bem. Então eu quero que meu título H1 fique assim. Tanto o helloworld não deve em nenhuma outra marca H1 no tamanho da página não é, o título não deve ser assim. Então, o que posso fazer no meu arquivo CSS é, em vez de apenas segmentar tags H1, eu posso segmentá-las por nome ou ID. Ou podemos definir o que chamamos de nossa classe. Então, vou mostrar-lhe por ID primeiro. Em seguida, analisamos o conceito de IDs quando estamos fazendo nosso formulário. E eu mostrei o id fname, certo? A cada DEZ, dez recebe uma identificação. Portanto, posso ver facilmente nesta tag H1, seu ID é título. Certo? Então, o problema é que nenhum elemento na mesma página deve ter o mesmo ID, certo? Pense nisso como se você não quisesse oferecer aos seus filhos o mesmo nome. Pred você tem gêmeos, você sempre vai nomear dois nomes diferentes. Você gostaria de precisar de gêmeos com o mesmo nome. Então, tipo de tratar os IDEs assim. Você não quer que os elementos na mesma página tenham o mesmo nome. Então, tenho o título na página de contato. Tudo bem. Também posso fazer isso na página sobre. Isso também é bom porque é o único aqui. Mas o que eu nunca deveria fazer é ter esse chamado título e outro elemento chamado título na mesma página. Isso é um não-não. Tudo bem, então agora eu tenho esse elemento chamado Título. Eu quero segmentar qualquer elemento com o título do ID para ter um determinado estilo e o arquivo style.css, posso ver hashtag ou Polônia ou um sinal de número. Você chama de título de hashtag, certo? Então você vê aqui que está vendo o id do elemento é igual a qualquer elemento, cada TAG, p tag, imagem não cortada, seja lá o que for. Quando ele diz que ID é igual ao título, ele aplicará esse estilo a ele. Então, se eu voltar e olhar, sei que a tag do título tem o estilo e a outra não porque eu disse que quero apenas o título para ter esse estilo um barco apenas o título, condutores, apenas o título. Tudo bem, então essa é uma maneira que podemos fazer esse tipo de segmentação. Agora, dada a limitação com o ID é igual ao título, e acho que os navegadores modernos podem compensá-lo. Mas apenas siga meu conselho mais uma vez, estou sendo velho vindo dos dias em que os navegadores não o ajudaram e ajudaram a encobrir seus erros. Estou aconselhando que você não faça com dois elementos tenham o mesmo ID na mesma página. Há outras repercussões, especialmente ao lidar com JavaScript, onde você pode, você terá problemas se tiver mais um elemento com o mesmo ID. Tudo bem? Portanto, dada essa limitação, pode haver momentos em que você precisa. Blocos são dois elementos diferentes que têm o mesmo tipo de estilo, mas você não quer isso em toda a linha. Então, vamos ver. Temos várias tags p. Bata 12345. Tudo bem? Portanto, temos várias tags p. E se eu não quisesse que todos eles fossem roxos e em itálico, certo? Eu só queria que 135 fossem roxos e o aiatolá é o que os riscos deles devem parecer normais. Então, mais uma vez, posso sempre ver todas as tags p devem ter uma postura específica. Então, vou dar a todos eles família divertida. Então, cada tag p na minha página, eu queria ter a família da fonte Arial, sem problema. Todos eles devem ser RL. Legal. No entanto, quero que 135 sejam roxos e em itálico. Tudo bem, então eu posso realmente criar o que você chama de classe. Então, uma aula com é como estilos reutilizáveis. Portanto, enquanto o título ou o uso da ID está direcionando um elemento ou os ganhos, pratique bons os poucos elementos com o mesmo valor de ID, certo? Quando falamos de classes onde criar algum valor abstrato que pode ser espalhado por qualquer tipo de elemento quantas vezes for necessário. Então, vou criar uma aula aqui onde vejo ponto. Vamos dizer para mim Sean. Tudo bem, então o ponto significa sua subclasse e inflamação é o nome da classe. E se você passar o mouse, verá elemento e ele dirá que classe é igual a informações. Então, qualquer elemento que eu queira aplicar que a toda grama de sabor é igual a inflamação como os atributos lá dentro, certo? Então, classe de informação, eu queria ter cor, roxo. E os textos. Não era decoração de texto, não era, era estilo de fonte ser itálico, certo? Então você vê que até às vezes tem que adivinhar, você não vai memorizar todos eles, mas seu campo fica confortável, certo? Portanto, as informações devem ter cor, roxo e estilo de fonte. Saiba se você olhar por nada tem esses estilos aplicados. Não que os rebocadores, não as etiquetas de âncora e saibam que aqueles lá mantêm a cor alterada, mas nada aqui tem essa classe aplicada. Mas se eu quiser usar este vidro em um determinado ou em tags específicas, tudo tem que fazer é ir e dizer que a classe de tag é igual a informações. Eu queria, é em 1, 3 e 5. Saiba quando eu voltar, você vê aqui 1, 3 e 5 têm a, você sabe, a classe ou os estilos aplicados diretamente a eles. Então esse é o poder da classe, certo? Então eu posso criar saberes, qualquer estilo, dar-lhes uma aula, mas posso colocá-los nos elementos específicos. Mais uma vez, nem sempre se aplica a cada elemento porque se eu colocar essa palavra na tag IMG, então deixe-me descomentar o IMG. Então, vou rápido que vamos descomentar é Controle e barra. Então eu só vou para todo esse controle de barra em que ele entra, certo? Portanto, o controle da barra direta comentará incomum para você. Tudo bem, então vamos dizer que tentei colocar essa aula na tag IMG. Não há nada nesta classe que realmente afetaria a exibição da flor, certo? Então, mesmo que a classe esteja lá, se eu for aqui, não haverá nada diferente. E tanto a flor porque não precisa mostrar uma cor, certo? E não tem nenhuma necessidade para ser itálico. Então, embora você possa criar a classe, quero dizer, pode ser usado em qualquer lugar. Não está disposto a sempre ter nossos mixins em nenhum. No entanto, se você tiver um monte de fotos e quiser aplicar o estilo a um conjunto específico de recursos pode ser uma galeria de arte e nem todas as imagens do seu site. Portanto, você não gostaria de se inscrever na tag IMG. Mas o pico específico escolheu talvez exibir imagens, então você sempre pode criar um estilo ou criar essa confiança ou que eu sou Windsor, chamá-lo de DP para imagem de exibição. E então vamos ver, a largura das imagens de exibição deve ser 300, e eu vou usar pixels. E a altura deve ser 200 pixels, todas as imagens de exibição devem ter essas dimensões. Então eu posso ir até minha imagem e posso ver que sua classe é dp. Então, quando eu voltar, é assim que essa imagem se parece. E então, para quantas imagens eu quiser, todas elas vão se parecer com imagens de exibição, certo? Porque todos eles tomaram DP. Então, se eu tiver 50, a imagem não é usada aqui. E o problema antigo, o fato é que todos eles vão reutilizar essa classe. Então você vê que é bom e reutilizável. Claro, essa classe não se aplicaria a algo que é vermelho baseado em texto. Então, se eu quisesse que este item da lista fosse grosseiro para mim Sean. E se você, se você começar a digitar um 0 no topo, você sempre pode usar o Controle e o espaço e isso vai fazer adições para você. Então, em condrules formados, a missão espacial entrou preenche para mim. Então eu vou ver aqui que este item não é uma informação interessante. Tudo bem, então isso é realmente tudo o que existe o CSS, como eu disse, você fica melhor com a prática. Então você só precisa explorar, experimentar coisas novas e é assim que você realmente se sente confortável com isso. Tudo bem, então vamos pular para o estilo da nossa mesa. Observe que um pouco no impressionante fim de semana inteiro, segmente elementos específicos para que possamos, você sabe, desenvolver estilos específicos que são reutilizáveis em muitos elementos. Não, vamos ver como podemos aninhar nossa entrada na podemos aninhar nossa parte juntos elementos dentro dos elementos, certo? Portanto, uma tabela é uma maneira perfeita de demonstrar isso porque vimos que ela faz uma hierarquia de rebocadores. Você tem a mesa, então você tem a TI em qualquer um dos TAs e você tem o T D. Então, sim, você meio que tem que se aprofundar na mesa para obter certas coisas para parecer um certo caminho. Tudo bem? Então, vou primeiro remover esse estilo da tabela. Vou devolvê-lo ao padrão. olhe e sinta nenhum problema. Então vamos dizer que vamos dar um documento de identificação. Então, coisas de identificação, certo? Material de mesa de estilo, membros, certo? o que dissemos que estava aqui. Esses são membros da equipe. Então, estamos no CSS. Eu posso segmentar menos membros da equipe estável vendo a tabela da equipe de hashtags. Tudo bem. Deixe-me verificar se foi o que eu disse. Tabela de coisas. Bom. Apenas certificar-se de girar é certo. E o CSS também diferencia maiúsculas de minúsculas. Então você quer, se você usar um caso comum, reter chaves comuns. Mas é claro, como vimos, minúsculas ouviu amigo SNL. Então, mantenha tudo em minúsculas. Então eu queria parar a tabela para ter ganho uma família de fontes, vamos tentar uma fonte diferente para que possamos ver uma diferença. Correio Novo. Tudo bem. Vou contar a ele troca. Então, não tem fronteiras, certo? Não. Então deixe-me não fazer a troca ainda. Também vou esticar a largura para 100. Então eu estou quase, quase refazendo os estilos que eu tinha inicialmente, certo? Assim, podemos ver que a fonte foi alterada. Não está se esticando na página. E mais uma vez, deixe-me colocar no texto alinhar o centro para que tudo esteja centrado, certo, com boa aparência. Veja, tudo isso foi realizado. Nosso próprio aqui. Então, se você tiver várias tabelas, bem, provavelmente é onde você gostaria de usar essa classe. Se você tiver várias mesas na mesma peça, preciso me mover da mesma maneira. Você gostaria de usar uma classe em vez do Id. Tudo bem, então agora que temos isso, quero dizer ao TDS e a um sermão o que este é o d Hn e esta será a TV ou a célula, certo? Então eu queria para cada um. É isso que deveria ter uma fronteira. Então agora eu quero resolver essas linhas de grade. Vamos ver a tabela da equipe ou a tabela de funcionários da hashtag. Eu quero o TD dentro do seu elemento, bem como o th. Então você vê que estamos aqui, estamos combinando e estamos combinando nosso conceito anterior, onde ele ganha um novo, ganhou trabalho em muitos na fonte. Quase posso separar várias tags e compartilhar estilos. Legal, procuramos com etiquetas de cabeçalho. Saiba que você também está vendo que você pode ver, me dar o elemento pai e olhar para dentro e me tirar os elementos dentro dele desse tipo. Tudo bem, então, em outras palavras, pegue a tabela da equipe e então me dê o diagrama T-H que está dentro dessa tabela. Portanto, temos tags td DOS estilos dentro da tabela chamada tabela Staff. Portanto, essa é outra maneira de segmentar cores específicas, que encadeiam 101. E então, dentro disso, vou dizer, me dê uma fronteira. Então lembre-se que mencionei anteriormente que, com a fonte, você poderia especificar vários valores na borda da placa é muito semelhante. Então eu posso dizer fronteira. Eu queria uma largura de pixel, uma maioria sólida, e ela deve ter a cor. Mas eu também poderia ter dito fronteira. Dash, a largura é de um pixel. Eu poderia ter dito que o estilo de traço de borda é sólido, e eu também poderia dizer a cor do traço da borda. É isso mesmo? Então, só estou mostrando que existem certos elementos. Eles podem agrupar os valores e há certos que eles não podem quebrá-los vendidos como vimos com fundo, família de fontes, tamanho da fonte, etc. Então eu queria ter uma borda, um pixel de largura, sólida cor, e deve ter dados tão sólidos em estilo, desculpe, e esse tom de cinza em sua cor e preenchimento. Então, o preenchimento significa que eu quero empurrar elementos ao meu redor. Nós oito pixels, é melhor que eu queria me encontrar. Pixels mais gordos do que eu seria, certo? Então, se você olhar para a mesa, isso, começaremos a ver esse espaço porque lembre-se antes de tudo estar engasgado. E então pegamos todo o brotamento e mostramos o que o corpo está fazendo. Então, com toda a colocação, tudo está engasgado. Quando eu coloquei o preenchimento, então todo mundo ficou mais gordo, certo? Então, colocou poemas de ajuda que oito quilos de trigo em todas as direções. Mais uma vez, pense nisso assim. Então, não, tudo é nosso. Mas então você percebe que sim, todo mundo tem sua fronteira porque, como eu disse, essas são realmente células. Eles não são realmente linhas e colunas, são realmente células. Então essas células têm sua própria troca, nossas próprias elas. Deixe-me ampliar para que você possa ver um pouco melhor. São células com suas próprias fronteiras. Nenhuma tabela lê parece que é porque isso não parece certo. Parece um monte de caixas. Então, voltando para a mesa de coisas, posso dizer traço de fronteira, traço de borda, colapso. Lá vamos nós, o traço de troca desmoronar e anunciar um colapso. Então, nem todas as fronteiras entram em colapso um sobre o outro. Então eles não se parecem mais com caixas. Não, parece que essa mesa. Tudo bem, dicas e truques. Mais uma vez, a prática se torna permanente. Agora, a última coisa que vou fazer com esta tabela é fazer, ela fez a área do cabeçalho parecer diferente. Então eu quero que isso tenha talvez o mesmo tipo de cor que a etiqueta H1 sem motivo particular, só eu perdendo a própria e explorando. Então eu já disse à TV e ao th, o estilo puro, mas então eu quero um estilo particular apenas para o th, tudo bem, então eu vou dizer que você vai O que eu quero sua cor seja a mesma, a mesma Valor RGB. Não é cor porque a cor muda os textos. Então esse é um bom ponto. Não, mesmo que eu esteja mirando o th, parece que se eu dissesse cor para o th, então o th em si assumirá a cor. No entanto, o que acontecerá é que o texto real dentro da tag. Então, a cor refere-se aos ticks que todas as vezes a cor se refere ao texto. O que você gostaria de fazer é mudar a cor de fundo fora do th, se você quisesse que THE, para ter uma cor diferente e esse ponto, você obteria essa cor. Tudo bem, então a cor sempre será bloqueada por padrão. Se você disser que a cor é outra coisa, que sempre será o texto se você quiser o artigo gemido do bot dos elementos em toda a linha mude, então você precisa usar a cor de fundo. Então, enquanto um botão cresceu cores que eu quero a cor seja branca, o que eu vou ficar louco. Norm.dist use os zeros hexadecimais 0000, desculpe, isso será fff. Peço desculpas ao fff por ficar branco. Tudo bem. Então eu poderia dizer FF, FF, geralmente são seis, mas então algumas cores, quando você chegar ao terceiro, ele vai saber automaticamente, ok, você quis dizer branco, então eu vou saber que é branco apenas como 000, 000 bloco. E eu poderia ter seis zeros, isso ainda é um bloco. E então, quando começo a mudar, as cores diferentes não são números dentro disso, comecei a obter folhas diferentes, certo? Então, se eu dissesse 0, 0, f, então eu recebo o tom de azul. Mostra a você. Então o RGB foi desenvolvido depois de Higgs para ser um pouco mais consistente, menos confuso, seja lá o que for, qualquer casa, deixe-me fazer tudo FFF. Então o texto é nulo, branco. Então eu tenho isso. Eu queria chamá-lo de coral, mas gemido de branco pega o tampo da mesa. E então todas as regras têm isso, certo? Então, há uma série de coisas que você pode fazer como se houvesse tantas opções, tantas coisas para fazer, é quase impossível mais uma vez, mostrar em um ou poucos vídeos, você só tem para explorar. Então eu encorajo você pausar e começar a brincar com certos elementos e certos estilos e ver o que você pode criar o que funciona, onde o que não funciona, estamos e isso é tudo o que você obtém confortável com CSS. Quando voltarmos, vamos dar uma olhada no JavaScript. 8. Explore JavaScript e o console do navegador: Ei pessoal, nesta seção vamos começar a explorar o JavaScript. Javascript é uma linguagem de script que nos permite , como programadores, interagir com os elementos HTML. O problema é que quando o navegador carrega nosso site, seja no Lipset em que estamos trabalhando ou qualquer coisa que esteja sendo construída com código HTML. Uma vez que esse código é renderizado pelo navegador, como vimos para saber, não há nada que possamos fazer para alterá-lo. Portanto, quaisquer modificações que temos que fazer, temos que voltar ao código e modificar o código. E então poderemos ajustá-lo quando atualizarmos a página. No entanto, com o JavaScript, podemos permitir que nossos usuários realmente tenham uma experiência interativa com nosso pH colocando alguma inteligência por trás disso. Então é isso que a linguagem de script realmente faz. Ele adiciona inteligência ao nosso conteúdo estático. O que eu tenho aqui é apenas um navegador. Nós vamos meio que misturar um pouco o código do Visual Studio. E o que vamos fazer é olhar para o JavaScript dentro do contexto de um console interativo que todo navegador realmente tem. Você está usando o Chrome. Estou usando a retina Edge. Você está usando Opera, Firefox, Safari, a maioria, se não todos os navegadores terão esse console interativo e usável para explorá-lo. Então, o que eu fiz foi abrir uma janela privada para borda. E vou clicar com o botão direito do mouse e depois vou descer para inspecionar. Depois de fazer isso, sim, ele nos mostra o código HTML mínimo. E a razão natural é que as instâncias privadas que a página que recebemos aqui não estão tão ocupadas quanto ficaria se você apenas carregasse nossa página normal. Certo? Então essa é a página normal na borda irregular. Este é o privado, então não é tão ocupado. No entanto, o que eu quero que nos concentremos seria o console. Quando clicamos no Console, vemos aqui que o cursor está piscando e está esperando que façamos algo. Portanto, esse console realmente nos permite interagir com JavaScript. Podemos resfriar nosso JavaScript aqui e obter feedback imediato com base no código que estamos escrevendo. O problema é que, quando você atualizar esta página, ela recarregará o console. Então, qualquer código que você tenha escrito seria apagado. Mas depois de interagir com o JavaScript e entender o idioma mais tarde, adicionaremos algum JavaScript ao nosso site com o qual estamos trabalhando. E você vai ver como ele pode persistir a salvar o código que você está escrevendo e reutilizá-lo de acordo. Mas, por enquanto, como eu disse, estamos realmente explorando. A primeira coisa que a maioria dos programadores, certo? E já fizemos isso é o HelloWorld. Então você vê aquela vez que comecei a digitar e você vê que ele está agindo como se o Visual Studio Code estivesse fazendo sugestões. Você pode não precisar de algumas dessas sugestões, mas se você apenas olhar para elas, verá que todas essas coisas são do que o navegador é capaz. Então, todos os navegadores têm bibliotecas integradas para JavaScript. E é por isso que quando você escreve seu código JavaScript aqui, um site no navegador carrega no navegador pode agir de acordo com as instruções, porque o JavaScript é realmente apenas um monte de instruções dizendo o navegador mantém o site deve se comportar praticamente. Se eu quisesse imprimir algo no console. Portanto, esse console é usado para muitas coisas. Ele pode ser usado para fins de depuração enquanto você está criando seu site. Ele pode ser usado para interatividade como aqui. Se eu quiser imprimir, posso ver log de pontos do console, log L-O-G, abrir parênteses e colocá-lo entre aspas e fechar e, em seguida, geralmente em JavaScript e termina com um ponto-e-vírgula. Então eu posso dizer helloworld dentro dessas aspas simples. Isso é um pouco maior. Então console dot log e helloworld. Então, isso é basicamente dizer console no navegador, seja qual for o navegador e ele tem um console, por favor escreva a mensagem de log hello world. Então, quando eu pressiono Enter, olhe para isso, ele realmente imprime Hello World. Esse comando disse ao navegador para imprimir o que leva dentro do console. Eu poderia facilmente mudar isso. Meu primeiro script Java, int enter. Temos essa minha primeira impressão em JavaScript. De tempos em tempos, você verá isso indefinido, mas não precisa se preocupar com isso, a menos que veja as coisas aparecendo em vermelho. Você não precisa se preocupar muito com isso, certo? Então, mais tarde, veremos que estou apenas dando algum contexto para que você não se sinta sobrecarregado com qualquer outra coisa que apareça na tela. É assim que escreveríamos o log do console do navegador. Agora, existem outras ferramentas interativas que você pode usar. Você pode usar o JSFiddle. Existem várias ferramentas JavaScript que permitem escrever o código e executá-lo e ver o efeito imediato. Eu acho que o uso do console nos navegadores, o mais simples possível porque você está recebendo a mesma experiência. Então, mais uma vez, mais tarde, veremos como editamos nosso site. Então essa é uma introdução rápida e suja ao JavaScript, mas temos algumas lições chegando. Fomos ver coisas diferentes que podemos fazer em JavaScript. E você verá que, se você já fez programação, ela se parece com outras linguagens de programação. Se você nunca fez programação, essa pode ser sua primeira linguagem de programação. E os conceitos aqui são transferíveis para todas as outras linguagens de programação que você aprenderá em sua carreira. 9. Demonstrações de JavaScript e declarações variáveis: Tudo bem pessoal, então nesta lição vamos olhar para instruções JavaScript, analisando como podemos declarar variáveis. E apenas entender as regras gerais da linguagem foi como vimos com HTML e CSS até agora, cada uma delas tem seu próprio conjunto de regras, certo? Então, HTML, espera-se que você abra e feche determinadas tags, às vezes não precisa fazer isso. Mas, em última análise, existem regras às quais você precisa aderir se quiser o resultado desejado de seus esforços. O mesmo com o TSS. Portanto, o JavaScript tem regras e, mais uma vez, o que você vai aprender com JavaScript, muito disso é conhecimento transferível. Então, com essa janela do console, vou arrastá-la todo o caminho para torná-la o maior possível na tela. E o que vamos fazer é que eu só vou, você pode clicar nisso ou fazer Control L, ou apenas atualizar sua página sempre que vamos atualizar o console. Portanto, esse é o código da lição anterior. Só vou limpar tudo e depois temos um novo console para trabalhar. Você também pode fazer outras pequenas coisas que filtros de expressão ao vivo. Algumas delas você pode não precisar necessariamente. Saiba. Você pode mostrar e ocultar certas barras laterais do console e mensagens em coisas com base no desempenho do site em que você está. Você também pode filtrar, você pode ver coisas diferentes. Então, como eu disse, o console é usado para registro em log. Então, mais tarde, quando você está bilinear sites enormes, você se acostuma aqui para monitorar certos erros que você pode estar recebendo em um site. Como usuário final , assiste quando você clica em um botão e ele não funciona. Então, você poderia realmente dizer que se o usuário clicar no botão e algo não acontecer como deveria, você pode fazer login no console para que ele possa servir como um aviso de que isso pode estar errado. Portanto, o console é muito poderoso, mesmo que o usemos para aprender a escrever código. E isso é possível por causa dos navegadores modernos. Estou apenas informando que quando você está construindo seu site, você pode usá-lo para obter ajuda real no nível de produção. Tudo bem, então, como eu disse, estamos olhando para declarações. declaração na maioria, se não todas as linguagens de programação é como uma declaração, certo? Então, quando eu disse ponto do console, desculpe, console.log, escreva qualquer coisa. E observe que estou usando minhas teclas de seta para cima e para baixo que me permitem percorrer todos os comandos que executo pela última vez no console enquanto a janela estiver aberta. Então, isso é outra coisa. Bem, se eu atualizar sim. Desde que a janela esteja aberta. Então, se eu limpar, atualizo, posso limpar, e então estou aqui novamente. Esta é uma instrução, não uma instrução em geral, em JavaScript deve terminar com um ponto-e-vírgula. Você pode ter várias declarações pelas quais você passou e ver se eu queria fazer o Hello World e então eu queria escrever outra coisa, eu posso simplesmente ir para a próxima linha, que nos limites de esse console em particular significaria que é difícil pressionar Shift e Enter. Isso significa que eu quero ir para a próxima linha, mas não, não execute a linha ainda. Posso começar a digitar outra declaração. Então este poderia dizer, Olá. Mais uma vez. Essa é outra afirmação. E para quantas declarações eu quiser executar, posso pressionar Shift Enter. Então isso geralmente termina com ponto-e-vírgula. São declarações. Outras coisas que você faria, eu não mencionei variáveis. Então, outra coisa que você faria é declarar uma variável. Portanto, uma variável é como uma área de armazenamento temporária para um valor. Tudo bem, então se eu quisesse armazenar, ver um nome, eu poderia dizer let, isso é uma palavra-chave, let, e então o nome da variável. A variável é o nome do espaço de armazenamento temporário. Então eu poderia dizer o nome iluminado já que pretendo armazenar um nome que fui chamar meu espaço de armazenamento temporário acordo com o que pretendo armazenar. Se eu quisesse guardar a vantagem, eu poderia dizer deixe envelhecer. Então eu posso dar um valor dizendo igual. Então, aqui chamamos o sinal de igual em particular e operador de atribuição. Enquanto arenoso, o que está subscrito em nosso espaço de armazenamento por esse nome. Portanto, observe que estou usando aspas duplas, e estou usando aspas simples, você quase pode usar qualquer uma delas. São situações muito específicas em que você usaria uma e não a outra. Eu quase vou usá-los de forma intercambiável, mas depois você verá quando usaria um e não o outro. Mas em JavaScript, você pode se safar com isso em outros idiomas, talvez você não consiga se safar com isso tão facilmente. Mas, como eu disse, cada idioma era semelhante, tem suas nuances e suas regras. Mas deixei de fora o conhecimento é transferível. Deixe o nome ser igual a, e então você pode colocar em seu nome, eu vou colocar um nome aleatório. Uma vez que eu recebo tal afirmação com um ponto e vírgula, quero outra coisa que borda. E vou atribuir a ele um valor igual a pontuá-lo com um ponto e vírgula. E então, e se eu quisesse imprimir os valores dessas ferramentas? Isso permite que você seja dinâmico porque eu estou apenas, estou vendo, estou colocando esses valores, no entanto, em uma situação real como em nosso site, quando alguém preenche seu formulário, pense você mesmo como usuário. Quando você preenche um formulário e pressiona Enviar, esses valores, são armazenados em algum lugar porque quando você está fazendo logoff, você realmente vê seu nome. É o mesmo nome, endereço de e-mail em quaisquer valores que você colocou no fórum que você verá apresentado a você. Então, claramente, eles estão sendo armazenados em algum lugar. Portanto, essas áreas de armazenamento temporário chamadas variáveis, são realmente projetadas para armazenar temporariamente esses valores enquanto você estiver em nosso site. Mais uma vez, fique mais complicado do que isso. Vamos trabalhar com o que estou vendo agora. Só estou vendo, deixe-me ser igual a esse valor, que h ser igual a esse valor. Então, se eu quisesse imprimi-los de volta, poderia consolar o log e ver o nome. Posso adicionar a ele. Literalmente, estou adicionando. Este é um sinal de mais. Sabemos disso para ser usado para matemática. Mas aqui esta é uma palavra ou duas palavras, este é um número. Portanto, JavaScript é o que chamamos de linguagem vagamente digitada, o que significa que não vai se fixar em qual tipo de dados você está atribuindo. Só estou vendo que cria um espaço de armazenamento temporário , armazene esse valor. Em outras linguagens de programação, haverá estrito onde, se você estiver armazenando um nome, a metade afirmará que esta é uma variável de nome. Se estamos começando na numeralidade, tenho que dizer que esta é uma variável numeral. Em JavaScript não é tão rigoroso. Mais uma vez, idiomas diferentes têm regras diferentes, mas conhecimento transferível independentemente. Então, tudo isso é um monte de declarações que ainda estou para executar. Aqueles. Continuo vendo Shift Enter, Shift Enter e vou para a próxima linha. Da mesma forma que você está escrevendo, lágrimas e vendo o que tendemos a escrevê-lo no Editor de Texto quando chegamos lá até que realmente executemos. Então, quando eu pressiono Enter, ele realmente vai ser executado. Tudo isso vai imprimir hello world, olá novamente. E então olhe portadora, está correndo escondido 50 porque declaramos para espaços de armazenamento temporários. E dissemos imprima o nome mais a idade. Está imprimindo o nome mais a idade. Agora, o que você percebe como um problema? Tenho certeza que você está lá vendo por que os 50 estão ligados ao oculto? Então, a razão para isso é que precisamos formatar bits de dados para que possamos dizer console.log. E então eu posso enfeitar um pouco. Assim, da mesma forma que podemos mais uma variável mais uma variável, posso mais uma string literal. Isso é o que chamaremos assim quando você abrir a aspas e digitar sua própria mensagem e fechá-la. Isso é o que chamamos de string literal. Posso console.log e abrir minha string literal aqui, onde vejo o nome dois pontos, torná-lo mais apresentável, certo? E então eu adiciono a variável name a isso. vírgula é uma declaração. E então isso fará isso em outra linha, console.log. E eu posso prudente o cólon da idade. Observe esse espaço, o espaço, essas colunas dentro dessas aspas. E então eu posso ver isso mais a idade. Eu não pressionei o ponto e vírgula Enter. Lá vamos nós. nome é o que está na variável e a idade é o que está na variável. Não, nada. Eu não espaçei tão velho tanto quanto espaço este guarda. Isso é outra coisa em termos desligados não está nas aspas. Javascript não se importará se você colocar um espaço ou não, desde que a sintaxe esteja correta. Essas são pequenas coisas sobre JavaScript que o tornam tão flexível e fácil de aprender porque é uma linguagem de script muito indulgente. Mas há certas regras que podem quebrar, quebrá-lo como um potencial desenvolvedor em transição para outros idiomas. Mas, por enquanto, isso é tudo o que vamos passar por quatro declarações e como elas funcionam. Sabemos que temos que terminar com ponto e vírgula. Sabemos como imprimir no console, sabemos como declarar variáveis e atribuir valores, e sabemos como imprimi-las de volta e mantém um formato o que imprimimos livro. E se eu quisesse mudar um valor, nome existe para que eu possa dar um novo valor ao nome. Tudo bem, então eu poderia dizer novo valor, dizendo isso para citar. Tudo bem. Então, se eu disser o nome e a idade do console.log novamente, não, ele vai imprimir um novo vídeo. Então, agora você sabe como atribuir e mudar após a atribuição, certo? Essa segunda linha é mais como uma confirmação de que essa linha funcionou. Porque se você fizer algo que não funciona, você teria um certo tipo de erro. Se eu escrevi esta declaração em um monitorado incompleto e isso me dará um erro de sintaxe não capturado e tentasse me dizer o que há de errado com ela. Eles me enviam, estou perdendo isso. Perdão? Este é o console que lhe dá feedback interruptivo. Começa, ao contrário do que vimos com o Visual Studio Code e um HTML onde ele realmente tentará compensar. Este não vai. Ele lhe dirá que você tem uma área que precisa para consertá-la. Tudo bem, então quando voltarmos, veremos algumas opções aritméticas. Operação, desculpe, em JavaScript. 10. Operações de Arithmetic em JavaScript: Ei pessoal, bem-vindos de volta. Nesta lição, vamos analisar operações aritméticas em JavaScript, não é. As operações aritméticas geralmente se referem a uma característica fundamental da maioria, se não todas as linguagens de programação é a capacidade de realizar algumas operações matemáticas. Você pode adicionar, subtrair, você pode multiplicar. Vamos dar uma olhada rápida no que isso parece. Usaríamos JavaScript? Vou limpar o console. Vejamos isso para que eu possa adicionar dois números facilmente. Posso dizer um mais um. Você vê que é, o console está me recebendo feedback interativo. São dois. Então, um mais dez, isso é 11. O sinal de mais quando estamos lidando com vários anúncios, os números como você esperaria, certo? Então, já vimos que o sinal de mais também é amor adicionar uma string ou duas cordas ou um número e uma string. Com uma string ou uma palavra, string é representada pelas a string é representada pelas aspas com aspas simples ou aspas duplas. Ambos representam uma string. Então eu sempre posso ver string 1 porque há momentos em que um numeral ou um número está sendo usado, mas não é necessariamente para fins matemáticos como um número dividido de licença ou algo assim. Não vai ser usado para matemática, o que você chama de número. Então você pode acabar com algo como A1, R1. Mas se esse número acabar sendo usado para fins não matemáticos e você o está adicionando, digamos um numeral, então você vai acabar com algo como um, setenta, cinco, setenta e seis. Porque essa string mais o numeral lhe dará a string e o numeral. No entanto, se eu fosse adicionar dois números, um mais 75, então você obteria o resultado matemático de 76. Essas são pequenas coisas sobre JavaScript que você não verá em muitos outros idiomas, mas esse é um dos principais recursos que você provavelmente pode aproveitar quando, quando aplicável. E se não, então saiba como usá-lo e quando. Isso é adição, multiplicação, é praticamente o mesmo. Então sete vezes h, isso nos dá o produto, certo? Então, em matemática regular, quando estamos escrevendo, usaríamos o símbolo de aparência x ou x? Em ciência da computação e linguagens de programação, um modo geral, você usa o asterisco, e é assim que você retrata a multiplicação. Vamos ver o que acontece quando tentamos multiplicar uma string vezes um numeral. Se eu fizer uma string vezes em numerosas, olhe para isso, estou recebendo buck 76. Não se parece com a adição, a operação de adição quando temos a string mais outra string ou um numeral ou mais qualquer outra coisa quando é uma string mais algo, chamamos essa concatenação. Então nossa concatenação da corda, concatenando algo a uma string. Obviamente, quando estamos fazendo multiplicação, seja uma string ou na verdade um numeral, estamos obtendo os mesmos resultados. Isso está claro. Vejamos a divisão. Então, se eu fizer dez divididos por C5, esperaríamos ver as ferramentas. Então, o visual na programação estaria usando esse sinal, Isso é barra. Então, dez divididos por dois. Se eu fizesse isso com cordas, o que conseguiríamos? Obteria os mesmos resultados? Essa é a visão. E o próximo básico seria, seria subtração. Então 45 menos cinco nos dá 40. Se eu fizer corda 45 menos cinco, ainda recebo 40. Portanto, o sinal de mais é o único que realmente opera de forma diferente quando está lidando com números versus numeral e fluxo. Como podemos ver, todos eles estão nos dando resultados muito semelhantes. No entanto, é sempre bom ser consistente. Então, misturando e combinando que isso geralmente é desencorajado. Eu acho que eles estão apenas compensando o fato de que isso pode acontecer. Mas, em geral, só queria lidar com números quando você está fazendo matemática e deixá-lo assim. Tudo bem? Da mesma forma que poderíamos atribuir a uma variável, valor R1 a uma variável é da mesma forma que podemos dizer que o produto seja igual. E então nós lhe damos os dois números 15 vezes. Não, está dizendo indefinido porque você deu uma declaração e eu estou quebrando minhas próprias regras que terminaram com um ponto e vírgula, mas acabei de criar uma declaração. Eu não disse a ele para fazer nada com o valor. Tem produtos. Tem um valor em produtos, mas não sabe o que, não recebeu um diretório. Então agora eu provavelmente diria que queria ver o que há nos produtos. Então, deixe-me console.log. Então eu escreveria o protocolo. Quando faço isso, posso ver o valor dentro dos produtos. Tudo bem. Só, apenas outra coisa a apontar. Eu não coloquei ponto-e-vírgula e no final disso, sou eu sendo comprado e quebrando regras, certo? O ponto é artefato é porque é apenas uma afirmação que estou escrevendo de cada vez. Está me separando me safar. No entanto, se eu estivesse escrevendo várias instruções em várias linhas nesta instrução ou instruções para serem executadas juntas, provavelmente acabaria em problemas. Então você sempre quer, e com seu ponto e vírgula antes. É praticamente assim que isso se pareceria. Com base nas operações aritméticas simples, você tem alguma acumulativa. Então o que, o que quero dizer com isso é, vamos dizer que temos, vamos, vamos norma um. Essa é uma variável b igual a dez. E então eu queria aumentar isso em cinco. Então, o aumento em um por cinco, isso significaria que eu teria que dizer núm um qualquer valor ou valor novo de um ano será qualquer que seja o seu valor mais cinco e é assim que eu poderia torná-lo 15 porque eu aumentei em cinco. Não. Uma maneira mais curta de fazer isso seria usar o acumulador ou a forma acumulativa. Se eu quisesse aumentá-lo em cinco, eu poderia dizer mais igual a cinco. Tudo bem, então essa afirmação vai avaliar a mesma coisa que dizer, ninguém, pegue a si mesmo e adicione cinco a ela e atenda que é o seu novo valor. Praticamente normal. Cuide do valor e adicione cinco e, em seguida, seja o que for, é isso que estamos atribuindo a ele. Então, se eu aumentar, se eu executar isso, isso não deve se tornar 20. Vá e veja o que quero dizer. Então isso é um acumulador e isso vale para todos os tipos de operações. Se eu quisesse aumentá-lo em cinco vezes, o que significa que eu multiplicaria por cinco. Então, de um modo geral, você diria que núm um é igual à norma uma vezes cinco. Versão encurtada, eu posso apenas c vezes igual a cinco, então isso deve trazê-lo cinco vezes mais. Se eu quisesse diminuí-lo em cinco vezes, então seria dividido igual por cinco. E estou diminuindo em cinco vezes. A mesma coisa seria para a subtração. Então, norma um menos igual e depois cinco. Isso significa tirar cinco dele. Mais uma vez, todos eles ainda estão aumentando o valor que está sendo armazenado em um em relação ao número que estou afirmando aqui. Tudo bem, então é assim que eu a aritmética funciona em JavaScript. 11. Declarações de decisão em JavaScript: Tudo bem pessoal, nesta lição vamos olhar para declarações de decisão, no entanto, na vida cotidiana, vamos esquecer que ambos estão programando. Na vida cotidiana, temos que tomar decisões com certas coisas. Se certos fatores obtiverem, então tomamos certas ações. Esse mesmo tipo de lógica. Se então, ou qual é o caso? O caso pode ser que façamos isso ou tomamos essa ação com base em talvez um valor. Então, quanto dinheiro eu tenho? Se eu tiver $500, então farei isso. Se eu tiver $200, então farei isso, etc. Tomamos decisões sobre várias coisas muito na vida real. Então, é a mesma coisa com a programação. Estamos analisando essas variáveis, que estamos analisando esses valores. E então pense nisso. Se você estiver comprando algo online e fornece determinados valores em determinados momentos, isso pode afetar o preço do item. Se você forneceu um código de cupom, o item seria reduzido em uma certa quantia em dinheiro. Todas essas coisas são apenas programadas e podem ser realizadas usando o mesmo tipo de lógica que estamos vendo são o mesmo tipo de frio que estamos vendo em JavaScript. Se um código de cupom estiver presente, execute esta matemática. Diminua o preço cinco vezes ou subtraia se o preço certo? Só estou te dando um cenário. Então, o que vamos ver é que já demos uma olhada na aritmética. Vamos analisar as decisões agora. A forma mais comum de declaração de decisão que você veria são as declarações if. Porque, assim como o que a veríamos em nossas mentes, se isso conseguir, então é uma construção muito semelhante na programação. Então, na verdade, começaria vendo se você abre parênteses e sempre que eu abro parênteses, eu o fecho porque se você não fechá-lo, ele acabaria com um erro de sintaxe e pode ficar muito irritante. Então, toda vez que abro um parêntese ou mesmo resumos atualmente, abro e fecho ao mesmo tempo. Então você notará que estou fazendo isso. Se dentro dos parênteses é onde você declara sua condição. Então eu já tenho as variáveis núm uma porque estão dentro da mesma janela do console, elas ainda existem até eu fechar o navegador. Então, ninguém está lá. Então eu fui dizer se um entorpecido é maior que dez, então, e então o meu então entra desses aparelhos encaracolados. Então, se houver parênteses abertos, então temos uma condição. Sem aviso prévio, estou usando o mesmo maior que a areia no U-Dub aprendeu na escola. Tenho certeza sobre isso no momento em que estávamos fazendo este curso, você teria aprendido sobre mais do que, menos que sinais. Então isso é maior do que dizer que isso é menor que sinal. Você pode ver maior que, igual e igual a. Se for maior ou igual a dez. Você pode ver se é, se núm um é menor ou igual a dez. Você pode ver se não é igual. Não é igual a isso. Não é igual. E então você pode ver se é equivalente. Eu deveria ter visto equivalente ou não igual, mas tudo bem. Você pode ver o equivalente usando o sinal de igual duplo e, em seguida, a equivalência nós, vamos olhar para algumas variações diferentes de buraco que podem parecer porque o JavaScript pode ficar muito preciso quando se trata de equivalência. Mas o que estou vendo é que esses são seus operadores lógicos maiores que, menores que, não iguais, maiores ou iguais a, menores ou iguais a R, iguais a R equivalentes. Observe que é um duplo igual, não um único, um único meio atribuição. Não consigo ver se núm um é igual a. Isso não executará F para ver se é equivalente. Então, estou verificando esse lado, esse valor, qualquer instrução condicional OR operador, e então esse lado. E então, se for verdade, então eu vou ficar no que vou fazer. Portanto, observe que ele continua sendo executado. Preciso fazer Shift Enter, então começaremos a próxima linha. E, em geral, você quer recuar seu código para ver claramente que esse código que estou prestes a escrever encaixa nessa instrução if. Então, se esse for o caso, então o log de pontos do console. Só vou fazer um console.log. Mas o fato é que dentro desses aparelhos encaracolados você faz quase tudo o que é necessário. Se isso for verdade. O que você vai fazer? Você vai fazer algumas contas? Você vai imprimir algo na tela? Você vai enviar um alerta para algo em algum lugar? Então, posso fazer console.log. madeira é dez. Saiba quais outros cenários Bolt, se for maior do que e se for menor do que na mesma declaração if, eu posso realmente encadeá-lo e dizer o outro. Posso fazer tantos outros se segundos disserem senão se, ou seja, se isso não for verdade, então este. Tudo bem, então estamos criando cenários diferentes. Se isso for verdade, faça isso mais. Se algo mais for verdade nesse cenário, colocamos todo o meu ponto e vírgula. Então faça isso e podemos fazer tantos outros cenários usando else if, caso contrário, se entorpecido um for maior que o estanho. E então a mesma sintaxe se aplica. Cinta encaracolada aberta. Lembre-se de usar Shift Enter quando eles estiverem indo para uma nova linha. E então vou tentar um tipo diferente de impressão. Então, em vez de um console.log, vou fazer um alerta. Alert realmente apareceria em um navegador. Você já esteve em um site e talvez quisesse seguir em frente e não salvou suas alterações nesse alerta no navegador para ver o clique, você precisa clicar nele antes de continuar. Isso é praticamente o que o alerta faz. Então eu posso ver que o número de alerta é maior que dez. Então eu posso dizer o outro, senhor, minha bicicleta e fazer tantos outros. Declarações if como uma necessidade. Mas às vezes você esgota os cenários e , se nenhum desses cenários, vamos extrusão e você queria fazer uma última coisa. Então, há um último recurso se nada mais for verdade. Certo, acho que Global, $500 ganhei para o jantar, se eu tiver $400, vou a um filme por US $300. Eu ia fazer isso. Caso contrário, vou ficar em casa. Que, de outra forma, haveria, ou se você apenas disser o outro, abra a cinta encaracolada, e então você declara o que deseja fazer. Se nada que você declarou acima é verdade, então isso é o que eu fui fazer. Então eu queria fazer um console.log e dizer algo como nada pode acontecer, algo assim. Então este é o seu último ponto. Então, isso é um caso mais simples, caso contrário, você só pode ter se for injusto. Então você não precisa ter mais se for igual a isso, caso contrário, tudo bem, Você poderia até ter uma declaração if para ver se isso é verdade, então faça isso. Se não for verdade, basta ignorá-lo e vai para a próxima linha de código de qualquer maneira. Então, essas são coisas que você pode fazer para atender às decisões. Então, se eu executar isso e pressionar MTC aqui, ele vai para o número do log do console é dez porque tínhamos definido núm um como dez. Então, se eu disser núm um, seu valor não é 25. Vamos ver o que acontece. Então, vou reexecutar essa declaração if. O valor da norma não é 25s será executado pela instrução if novamente. E então eu pressiono Enter, olho para esse alerta, para que esse número seja maior que dez. Então é isso que esse alerta faz. E então, se eu me sentar em um para ser igual a cinco. Então não, não é igual a dez e não é maior que dez. Esperamos que ele vá embora, oh, desculpe. Sim, lá vamos nós. Vai dizer que se nada aconteceu porque isso não é verdade, isso não é verdade. Então, caso contrário, é isso que vamos fazer. Isso é que você toma decisões simples em JavaScript. Saiba que o próximo que vamos olhar é chamado de switch. O interruptor é relativamente fácil. É bastante semelhante, mas é usado em operações diferentes. Então, provavelmente é mais como quatro grades. Então, digamos que as notas sempre foram marcadas intensas. Se você chegar a 100, o apóstrofo tem 50, você mal conseguiu. E se você tem 0, bem, isso não é dezenas, é? Digamos que você tenha três notas possíveis, três valores possíveis. Você terá um 150 são 0. Então eu posso dizer ligar a variável. Então, vamos usar a norma um ou vamos ser mais carrinho e usar grades. Então eu fui deixar a ganância igual a 900. Vamos começar com isso. Então, temos grade sendo igual a 100. Então eu fui tomar nossa decisão com base nesse valor, aquela grade Maya difícil. Fui dizer troque a ganância. Em seguida, abra minhas chaves encaracoladas como de costume. Portanto, observe que as chaves encaracoladas desempenham um papel importante nesses blocos e nessas declarações de blocos. Este é um bloco inteiro, Steven. Isso é uma coisa toda. É de várias linhas e é muito rigoroso nessa estrutura. Uma vez que você entenda essa estrutura que usa parênteses e chaves, ou no switch use novamente entre parênteses, o valor e as chaves, então você deve ficar bem. A instrução switch analisa o valor para ver qual é o valor, qual é o valor e o que devo fazer esse valor? Então, em vez de se e outro e o que quer que tenhamos switch e temos caso. E então olhamos para o valor. Portanto, se o caso for 100, o que significa que esse valor tem, essa variável, tem esse valor. Então eu digo dois pontos. Então, por baixo desse caso, tomo uma ação. Então, console.log, você passou quantas linhas eu precisar que eu possa colocar embaixo desse caso, mas quando eu terminar, vou dizer quebra. Não, estou fazendo tabulação porque estou muito interessado em formatação. Você pode, é muito mais legível quando você recua seu código e você pode ver onde tudo começa e pára. Quando você é iniciante. O editor de texto disparará facilmente. Estou apenas fazendo isso no console interativo para que possamos ver isso acontecendo em tempo real. comutação. E então fazemos esse caso. E então tomamos uma ação ou quantas ações precisarmos. E então, quando terminarmos, temos que dizer pausa. Se não dissermos quebra, o que acontecerá é que quando definirmos respirações instantâneas na prematuridade. Então, quando definimos um segundo caso, se a grade for 50 e então eu digo console, console.log e ver que você mal passou. E então, se eu não tivesse um breve, ele realmente passaria por ambos. Então deixe-me remover o intervalo e mostrar-lhe isso. Então você vê que fez isso e fez isso porque não houve intervalo, você possivelmente mal passa. Claro que isso não é verdade. Você veria a laranja nos nossos 50 passar ou não passou. Então eu preciso ter essa palavra-chave break no final de um caso para que ela saiba que ela deve parar por aí. Não. O que faz o VC que dissemos que, se você tiver 0, então você sente para que possamos adicionar outro caso. Assim, você pode adicionar tantos casos. Lembre-se, cada caso é vendo esse é o cenário. Isso é o que eu queria fazer no caso todo esse estresse ou console.log, então podemos ver que você falhou. Então nós quebramos. Então, se nenhum dos itens acima. Então, assim como com a declaração if ou podemos dizer o outro, Nada mais era verdade. Então, faça isso. Se nada mais for verdade, então é da mesma forma que eu posso realmente ver o padrão, não ouça. Portanto, o padrão significaria que, se nenhum desses casos fosse atendido, apenas o padrão dessa ação. Então, eu poderia console.log. E geralmente quando chega aqui, geralmente é, geralmente é porque algo é inválido. Então, no nosso caso, podemos dizer que é uma grade inválida porque você deve estar recebendo 150 ou 0. Qualquer coisa que não esteja nesses casos pode ser um valor inválido, algo assim. Claro, só estou te dando um cenário. Espero que você esteja pensando nisso e vendo. É assim que eu poderia aplicar isso a outra coisa, certo? Portanto, seria uma grade inválida. Isso é o que vamos dizer ao sistema que, se não detectarmos a nota com base nos casos que todos aprendemos, então é uma nota inválida. Se eu pressionar Enter, é claro, já definimos a grade como 100s. Então, é claro que passaríamos se eu mudar o valor das grades de 50 e, em seguida, executar novamente essa instrução switch, você mal passou. Então, se eu alterar o valor da grade novamente para 0, instrução switch avaliará que você falhou. Tudo bem, então você pode ver que está atingindo cada um desses casos. Agora vamos tentar um caso padrão. Portanto, se não for 150 ou 0 com base em toda a nossa linha, então com base em nosso esboço, ele deve ser visto como uma grade inválida. Então, quando fazemos isso, nota inválida, e isso é basicamente tomar decisões estão atendendo ao JavaScript, é claro, o quão complexo eles ficam com base no cenário e seu contexto sempre determine qual código é necessário para resolvê-lo. Mas é bom saber quais são suas opções e quando usá-las. 12. Declarações de repetição em JavaScript: Ei pessoal, bem-vindos de volta. Nesta lição, vamos analisar declarações de repetição. Então, deixe-me ir em frente e limpar nosso console e vamos começar. repetição vem quando você tem algo que você queria fazer repetidamente e não quer fazer isso manualmente toda vez, certo? Então, digamos que quiséssemos escrever, imprimir os números de um a dez. Você poderia facilmente console.log. Não queremos imprimir console.log. Então você diria, ok, Para em um ponto e vírgula e depois vá para o próximo , e depois console.log. E então nós imprimiríamos a ferramenta. Tenho certeza de que você sabe que você teria que fazer isso até as dez, que quando você pressiona Enter, você realmente obteria o 12345, etc. Trazendo para o console. Obviamente, é muito dinheiro. Bem, eu afirmação de repetição é o que ela sugere. Isso nos ajuda a repetir determinadas operações. E escrevendo essa estrutura de repetição, podemos colocar um comando que diz fazer algo por X quantidade de tempo ou X número de vezes, ou até que uma determinada condição seja atendida. Então, estaremos olhando para tipos de repetição demais. E esses são, os cones são controlados e a condição controlada. Então, vamos começar com os cones são controlados. Um loop controlado por contador geralmente é encontrado na forma do que chamamos de loop for-loop. Portanto, é por X número de vezes. Faça isso, certo? Digamos que queríamos imprimir de um a dez. E é claro que não queremos repetir essa afirmação, então vamos dizer quatro, depois abrir parênteses. E então temos uma variável que vai ser a do nosso Colin, então inicializamos uma, vou chamá-la, eu comprei não precisa ser chamada. Eu poderia ser chamado de cone. Poderia ser chamado basicamente de qualquer coisa. Cachorro Xyz. Ele realmente não importa. Eu sou a variável mais comumente usada que você verá aqui, porque sou abreviação de iterador e o comentário também é chamado de iterador. Portanto, não há nada significativo sobre o olho. É apenas o nome da variável usada para manter os cones fora do número de vezes que manter os cones fora do número de a ação foi repetida. Então isso está inicializando nosso contador. Então temos um ponto e vírgula seguido por essa condição para dizer que devo subir até x número de vezes. Agora observe que vou começar em 0. Poderia começar às dez, pode começar às 20, realmente não importa. No entanto, você quer começar em algum lugar, que a condição faz sentido. Então, obviamente, eu não começaria com esse 20 e depois diria para correr até que eu seja menor que r, desculpe, Rowan, desde que eu tenha menos de dez, porque isso não faria sentido. Eu já sou maior que dez, então essa condição teria sido violada ali mesmo. O que você queria fazer é dizer, começar em 0. Normalmente, é 0. Poderia ser um, mas por onde você começa? Isso afetará a condição. Então, se eu começar em 0, então a primeira linha, e ela terá um valor de 0. A segunda linha terá um valor de uma, a terceira linha e um valor de dois. Então isso significa que quando eu me torna dez, quando eu subir para o valor de dez, eu não é mais inferior a dez, então ele não vai rodar esse. Mas se você chamar isso, se você chamar Antonio dedos de 0, você chama o seu mindinho direito 0, então 12345 aberto para nove, então você teria contado com todos os dez dedos. Então, entre 09 inclusive, há dez corridas. O que fazemos isso você verá o que quero dizer. Então, inverno frio, chama-se i. Então, porque começa em 0, estou vendo garantir que você nunca seja igual a dez porque eu queria correr dez vezes. Acabamos de estabelecer isso. Então vou dizer a ele para incrementar cada vez que Celsius I mais, mais. Isso também poderia ser eu mais dois. Eu mais isso. Depende de quantas vezes eu queria incrementar. Então, se eu dissesse que eu mais dez, aumentaria de 0, faça o que precisa fazer para o 0 R1 chamado Mackenzie todo minuto. Por quanto devo aumentar, aumentar em dez, então isso seria se você quisesse que fosse por dois, você diz mais dois. Aqui. Estamos fazendo isso por mais, mais porque só queríamos aumentar em um de cada vez. E então eu fecho os parênteses. Então, vou abrir as chaves e pular para a próxima linha, é claro usando Shift Enter e depois recuar dentro das minhas chaves. Mais uma vez, estamos começando em 0. Queremos correr de 0 até o número mais próximo, porque não queremos violar isso. E estamos contando por um cada vez que ele for executado. Então, o que queremos repetir? O que quisermos repetir, vamos colocar dentro desses aparelhos encaracolados. Eu não disse onde queríamos contar. Estata ou imprima os números de um a dez. Vou dizer console.log. E então eu imprimirei os números. Tão óbvio que os tipos vão e imprimem manualmente porque isso vai imprimir de uma a n vezes z está apenas mostrando um. Mas está agrupando porque foi impresso dez vezes. Esse é um bom exemplo porque está acumulando, mas isso é o que realmente está acontecendo aqui. Então, se eu tentar isso de novo, quero 12345, não apenas 110 vezes. Isso significa que eu gostaria de imprimir o valor do que está na IA, porque a IA está mudando sempre. Então eu acho que essa é uma boa fonte de números como qualquer um para contar para mim. Então, se eu pressionar Enter, olhe para isso e tudo o que obtemos 0123456789. Ainda não são números de um a dez. Esse era o objetivo, mas estamos chegando lá. Mas se você contar, esta foi a primeira corrida. Eu tinha 0, depois voltou em loop, aumentado em um. A ação fez de novo? Não, porque eu aumentei em um. Não é um. Vá de novo. É 234. Se eu fizer uma contagem 12345678910, ele imprimiu dez números, mas nosso objetivo era imprimir de um a dez. Então, uma maneira fácil de conseguir isso seria que, se eu souber que sempre serei um a menos do que o número que espero. Então eu posso dizer que quando você está imprimindo eu imprimo mais um. Adicione um a i. Sempre que pudermos imprimir, isso significa que teria sido 0, será um, etc, etc. E agora temos até dez. Tudo bem. Agora vamos ver isso de novo. Eu disse que começamos em 0 e vamos até que seja menos de dez. E então, por causa disso, temos que adicionar um. E se não quiséssemos esse trabalho adicional de adicionar um? Então está tudo bem. Eu poderia apenas dizer log do console, imprimir o olho. Eu queria que o primeiro número fosse impresso para ser um. Então, quando eu fizer isso, só vai imprimir 123456789. São nove números. Não estou recebendo os dez. Então, depois de ajustar a condição aqui, tenho que dizer isso e saber que estamos começando em um e eu queria correr até que eu seja menor ou igual a dez. Então, mais uma vez, ele será executado até que essa condição seja violada enquanto estiver contando de qualquer número que sentamos. Qualquer número que esteja na condição. Então, se eu fizer isso, então obteremos 12345678910. Tudo bem, é um loop controlado por contador. Estes são úteis quando você tem listas que você queria passar. Como eu disse, qualquer coisa que você queira repetir por um certo número de vezes. É por isso que chamamos isso de loop controlado por contador. E esse loop, além da definição verbal aqui, parece da mesma forma na maioria dos idiomas. Então, apenas entendendo isso, você dominou esse tipo de loop para pelo menos seis outros idiomas. Tudo bem, agora vamos dar uma olhada no próximo. Este seria um loop while ou um loop controlado por condição. E você realmente tem dois deles. Você tem o tempo e o outro fazer enquanto. Conhecendo o loop while, começamos com a palavra-chave while e, em seguida, ela é controlada por condição. Então, tudo o que ele tem é uma condição. Diria que, embora alguma condição não seja atendida, digamos que ainda queríamos fazer isso contando até dez. Então eu diria que enquanto eu tiver menos de dez anos. E então algum tipo de sintaxe, temos nossas chaves. E então, dentro de nossos aparelhos encaracolados queríamos recuar o que queríamos repetir. Então eu fui dizer, enquanto eu tenho menos de dez console.log. Tudo bem, então esperamos que imprima 10 vezes coisas sem número. Estou perdendo a Altera, e vamos explorar isso. Primeiro. Quando você tentar executar isso, vai dizer a ela que eu não estou definido. Portanto, isso não está definido significa que você está tentando chamar uma variável que ainda não existe, Você não a declarou. Analisamos declarar variáveis anteriormente. Temos que dizer deixar o nome da variável e depois usá-lo. Também analisamos o fato que variáveis que declaramos, ele não tinha claro que o console ainda existe. Então podemos usá-los porque tenho certeza que o nome ainda está aqui. Tudo bem. Ainda posso acessar o nome de todas essas lições atrás porque estou nos mesmos incidentes do console, eles provavelmente estão se perguntando, ok. Então, por que o acesso de contato? Mesmo que tenhamos declarado eu aqui. Então, isso é o que chamaremos de escopo. Dentro do escopo desse loop for-loop, eu existo. Quando o for-loop estiver pronto, eu não existo mais. Portanto, não fui declarado para todo o console e todo o navegador e todo o aplicativo. Foi realmente declarado a este for-loop. Assim como todas as outras variáveis que fizemos, tenho que definir a variável. Deixe-me dar a ele um valor padrão. Vou dizer que eu seja igual a 0. Em seguida, posso chamar o loop while para interagir com a IA. Mas olhe para isso nulo enquanto ele está em execução, em execução, em execução e eles veem esse número. Essa condição não irá interromper o loop. Então, é aqui que os loops controlados por podem ser muito perigosos. Isso é o que chamaremos de um loop ainda finito. Um loop infinito é um loop que vai correr para que a condição seja atendida, mas a operação que está sendo realizada não é voltada para parar a condição. Então eu estou vendo o cólon ton até que eu tenha menos de dez anos, o que já estabelecemos. Aqui está a mesma coisa, certo? Mas eu não estou mudando o valor de eu, eu, meu, tudo o que estou fazendo é dizer enquanto eu tiver menos de dez anos, o que será para sempre porque tudo o que estou fazendo é log do console. Não estou vendo mais, além disso, não estou vendo nada que realmente possa travar sites, travar aplicativos, travar computadores em geral. Portanto, você quer ter muito cuidado, especialmente ao interagir com aplicações maiores, um loop controlado por condição em massa. Tudo bem? Você pode ter que acabar, se você seguir esse comando, você pode ter que acabar no seu gerenciador de tarefas e ir e matar toda a Burroughs nesta sessão porque na verdade não vai parar em execução. Então, se eu causar algum dano ao seu computador, peço desculpas, mas você pode simplesmente ir em frente e excluir e reiniciar seu navegador, voltar para o console e deixar-nos tentar isso novamente. Então, acho que aprendemos nossa lição. Esta é uma nova janela do navegador, então não tenho absolutamente nenhum histórico de nenhuma lição anterior. Então, vamos começar de novo. Então, deixe-me igual a 0. Claro, ele sempre começa definindo nossas variáveis. Portanto, as variáveis precisam existir antes de usá-las. Então vou começar de novo enquanto tiver menos de dez anos. E então volte a próxima linha, abra e feche minhas chaves encaracoladas, sacola e depois recue. Claro, certifique-se de que quando você estiver indo para a próxima linha, você Shift e Enter. Se você acabar executando esse loop novamente, linear saiu para matar a sessão e voltar ao console. Portanto, tenha muito cuidado. Mas o que eu queria fazer aqui é realmente mudar o valor de i com cada iteração para que possamos ter certeza de que o valor ou a condição serão atendidos eventualmente. Então eu posso usar um acumulador aqui onde olhamos para isso, onde apenas dizemos que eu mais igual a, desculpe, um, estamos aumentando em um. Tudo bem? Eu mais igual. Lembre-se de que isso será a mesma coisa que estou fazendo aqui é escrever o que chamaremos de comentário. Tudo bem, então eu é igual eu mais um é a mesma coisa que escrever isso. Agora, a coisa com um comentário é que você pode colocar em um comentário e em qualquer lugar seu código, onde talvez precise se lembrar do que está acontecendo. Há brancos acontecendo, mas não é código real. Então, qualquer coisa que passar por trás dessas barras duplas será ignorada quando todo o bloco de código for Ron. Mas isso pode levar a uma melhor legibilidade para você ou quem mais estiver olhando para o seu código. Então você pode ter o hábito de fazer isso, mas nós olhamos para isso mais tarde. Então, console.log i. Então, depois de registrar I, aumente o valor de I em um e, em seguida, verifique se não tenho menos de dez. Se ainda for inferior a dez, se ainda for inferior a dez, vá em frente e corra novamente e continue fazendo essa verificação. É por isso que é um controle de condição ou não sabe quantas vezes ele deve ser executado. Se fosse menos dez, menos dez aumentaram em um. Negativo nove diz, não está dizendo que eu só vou correr dez vezes, é apenas verificar essa condição. Portanto, pode ser uma situação em que os valores são imprevisíveis. Não sei quais valores espero obter, certo? Não sei quantos valores existem, então só queria correr até saber que estou satisfeito com a condição de sair. É por isso que chamamos isso de loop controlado por condição. Então, além disso, esse é um loop controlado por condição pré-verificação. Ele verifica a condição primeiro. Vamos verificar, tudo bem. Saiba que estou modificando o valor cada vez igual a 0 porque começamos em 0, Jake é ele, é 0, depois o log do console, então ele aumenta e, em seguida, ele verifica novamente. Um ainda é menos de dez? Sim, é. Certo. Amor, etc. e então ele continua e continua até o final, onde isso se tornará dez. E então ele verificaria e veria que, ok, isso não é mais dez não é mais do que dez, então não faça mais. Então é praticamente por isso que passou de 0 a dez desta vez, ao contrário do for-loop que realmente foi exatamente dez vezes. Vejamos outro cenário. E se eu começar com o valor de dez? Então eu fui deixar eu igual a dez. E então eu fui para o mesmo loop. Quando eu fizer isso, pressione Enter. Observe que nada aconteceu porque eu já fui levado. Um olho não é inferior a dez. Então, não tenho nada a ver com essa condição já foi violada. Então, pule isso e passe para a próxima linha de código ou em minúsculas. É por isso que chamamos isso de loop verificado de pré-condição. Tudo bem? Não, está perto. Relativo é o loop do-while, que é apenas uma versão invertida dele. Esse é chamado de loop de verificação de postagem porque ele realmente faz a ação e , em seguida, verifica a condição. Então eu fui deixar eu ser o valor de dez. Observe que quando comecei às dez, ele verificou a condição e não fez nada porque essa condição foi violada. Então, vamos avançar. No entanto, se eu disser fazer, sintaxe é muito semelhante. Eu sempre digo que é devido. E então estamos dizendo o que fazemos? Então abra nossos aparelhos encaracolados. E depois dessa cinta encaracolada de fechamento dizemos enquanto com a condição. Então faça isso ou essas ações enquanto eu tiver menos de dez anos. Bem, adivinhe o que ele vai fazer antes mesmo de verificar se como essa dentina, então se eu pegar o mesmo registro do console, tudo bem, estou satisfeito lá dentro do “do-while”, devemos ver, imprima o valor de I pelo menos uma vez. E então não mais porque eu não tenho menos de dez naquele momento porque tenho dez anos. Então, vamos tentar esse. Isso termina com um ponto e vírgula aqui. Tudo bem, vamos experimentá-lo. Um. Lá vamos nós. Pelo menos obtivemos o valor dez antes de sair e nos demos isso indefinido. Indefinido apenas significa que eu acabei. Tudo bem, corra pelo menos uma vez, então deixe-me fazer um. Tudo bem? E então vamos tentar fazer enquanto. Desta vez vai fazer isso e fazê-lo e fazê-lo nesse ECM. Eu tinha acabado de me envolver em outro loop infinito. Portanto, não vá tão longe. Certifique-se de colocar o I plus é igual a um antes de executar esse código. Então, vou reiniciar meu console. Tudo bem, então reiniciei janela do meu navegador e reescrevi o código. Observe que fiz isso em uma linha. Isso é perfeitamente legal, mas tenho certeza que você está olhando para ele e achando que é um pouco mais confuso que o garoto parecia inicialmente. Então, sim, é legal, mas não é muito legível. É por isso que continuo sugerindo que os espaçamos e recuamos. Tudo bem. Então, vou colocá-lo de volta da mesma forma que você está acostumado. E o que eu fiz desta vez é garantir que eu coloquei no I plus igual a um. Então, só estou mostrando que se você não escrever o código aqui apropriadamente e não o fizer, você não tem a condição correta. Você pode se envolver em um loop infinito, que eventualmente levará a uma memória geral um erro em qualquer máquina. Você queria ter muito cuidado. Então deixe-me tentar isso de novo. Não fui muito cuidadoso na primeira vez, então é por isso que estou te dando o conselho. Tudo bem, então deixo começar em um, direto para o console, o valor de i e depois incrementa e depois verifica após o incremento, qual é o valor? São dois para incutir menos de dez. Então, vamos fazer isso novamente, log do console. E então ele vai e vai e vai até que eu aumente levou dez, então ele verifica se dez é menor que dez. Então diz, ok, eu acabei. Deixe-me cortar ali. Essas são declarações de repetição, é claro, com prática e mais exposição, você verá quando usá-las e segurar que elas são úteis. Mas eu encorajo você a pensar cenários que você gostaria de repetir. Problemas matemáticos pensáveis que são manuais e você pode realmente repetir algumas etapas usando nosso loop e seguir em frente e ter a sensação deles. 13. Funções do Javascript: Tudo bem pessoal, então estamos indo bem. Estamos aprendendo as estruturas de controle da programação geral. Mas dentro do contexto do JavaScript. Como eu disse, a maior parte disso é, na verdade, conhecimento transferível. Então, quando você começa a aprender outros idiomas, você perceberia que muitos da sintaxe iguais ou muito semelhantes e são, você será capaz de transferir o fato de que tudo bem, eu preciso tomar uma decisão ou fazer um loop, etc, em determinados pontos. Não, vamos mudar de marcha e passar para outro tópico, que é um pouco mais complexo, mas muito divertido, muito fácil de entender quando você pegar o jeito. E isso são métodos. Um método em qualquer linguagem de programação é uma maneira escrever código uma vez, mas reutilizá-lo muitas vezes. Por exemplo, log de pontos do console. Esse é um método. Por que eu digo que é um método? Porque é uma linha de código que me permite passar quase tudo, várias vezes. E nunca tenho que escrever nada mais do que essas duas palavras. Portanto, o log é realmente o método e console está realmente dizendo console, que é essa tela preta que estamos escrevendo na gravação, registre qualquer mensagem. Tudo bem. Este é um método que pega um valor e, em seguida, realiza uma ação. Eu não sei como ele faz isso. Por trás disso, essas duas linhas de código são essas duas palavras no código que parecem tão mágicas e podem até parecer complicadas. Há muito mais complicação acontecendo porque leva o valor aqui, faz algo diz a todo o navegador que ele deve apresentar essa mensagem para você, o usuário final, de uma maneira particular. Tudo bem, então é por isso que estou dizendo que não sabemos como ele faz isso. Nós só sabemos que dizemos console.log e ele faz isso. Portanto, isso está tornando esse bloco de código que poderia ser 102050, mais linhas de código, muito utilizável. Chegará um momento no desenvolvimento do aplicativo em que você precisará fazer métodos. No entanto, você não tem muitos métodos internos, porque você tem métodos que permitem manipular strings, você tem métodos que permitem manipular os números que você tem matemática interna, etc. Existem vários deles. Podemos explorar todos eles e realmente e verdadeiramente, alguns deles que você nunca pode usar, e alguns deles você só usa quando absolutamente necessário. Mas o que faremos é ver como podemos criar nossos próprios métodos em JavaScript para nossos próprios propósitos. Vamos começar a escrever nosso próprio método. E às vezes os métodos são chamados de funções. Vice-versa, sempre que você ouvir alguém dizer função ou método, eles geralmente são a mesma coisa. Portanto, a palavra-chave é, na verdade, função. Então você começa vendo a função, como você vê na maioria das vezes depois, quando vamos fazer alguma coisa, temos uma declaração ou uma declaração declarativa, certo? Então, vamos dizer que estou prestes a declarar uma variável. Se declarar, quero uma instrução if, etc. Então eu quero uma função, vou dizer função. E então fui dar um nome a ele. E se quiséssemos uma função que adiciona dois números? Vamos começar de forma simples. Queremos uma função que sempre imprima o hello world. Então, em vez de escrever console.log hello world, toda vez que você quiser que isso aconteça, você quer apenas chamar esse método e ele apenas imprime hello world. Posso dizer print hello world. Então eu fui dar um nome a essa função. As funções são caracterizadas por seus parênteses, independentemente de um valor entrar ou não aqui, elas não são opcionais. Após os parênteses, temos chaves curly abertas e fechadas com o corpo da função. Então aqui escrevemos o que queremos que essa função faça. Como eu disse, estamos mantendo isso simples. Quero um console.log, Hello World. Tudo bem, eu não quero apenas dizer olá mundo da função. Imagine que toda vez que você quisesse fazer isso, você teria que escrever essa linha de código e você queria fazê-lo em vários lugares em seu código, você tem um grande site. Você tem vários lugares que você queria imprimir a mensagem articular. Você não quer ter que escrever isso toda vez. E então, se algo mudar e eles quisessem dizer olá universo, então se você girar 50 vezes, você tem que mudar. Se 50 vezes. Quando você coloca tudo em uma função, basta ir para a função e alterá-la. Tudo bem, então deixe-me, deixe-me voltar ao hello world e mostrar-lhe. Quando pressiono Enter, estou registrando que essa função existe. Não. Se eu quisesse imprimir essa mensagem, tenho duas opções. Posso imprimi-lo manualmente porque não conhecia uma função e existia. E por quantas vezes eu quisesse ter que fazer isso, fazê-lo e fazê-lo. Posso chamar printf hello world, abrir e fechar parênteses. E olhe para isso. Isso é tudo que eu preciso. Isso é o que você chama de chamada de função. Então esta é a declaração da função, desculpe, definição é a definição, a explicação do que é a função, qual é o nome, o que ela deve fazer. E então esta é a chamada de função, significa que eu quero que o código dentro de uma função aconteça neste momento. Então, quantas vezes eu fizer essa chamada de função, ela sempre fará a mesma coisa. Então eu só estou controlando e controlando V e espaçando entre todas as portas. Toda vez que você chamar isso, ele fará a mesma coisa. Então é isso que eu estava vendo tantos lugares quanto você poderia precisar dele em seu site, você escreveu ao mesmo tempo em JavaScript e ele pode usar esse método em cada página, qualquer outro lugar que você queira sabe, digamos que o CEO ou quem quer que fosse aborrecer. Eu disse: Ok, não queremos mais tempo. Queria dizer olá mundo, queria dizer olá universo. Tudo o que você precisa fazer é isso claro, esse objetivo para a definição da função. E não é mais impresso hello world, não é impresso Hello universe. Mas eu gostaria de nomear minha função de acordo com o que ela está fazendo. Estou vendo impressão Hello World, mas estou mudando isso para dizer olá universal meio que queria renomeá-lo para que, se eu tiver que passar este site para meu colega, eles não serão confuso. Por que imprimir hello world está dizendo Olá universo, certo? Então você sempre quer ter em mente que nomear suas funções e variáveis e tudo deve sempre refletir para que serve. Então, quando você sai de férias para Bali e você volta para uma fenda e olha para trás. Você não está confuso em se perguntar, Espere, por que eu fiz isso? O que é tão longe, os nomes lhe dirão, certo? Então, digamos que atualizei esse método, mudei o nome dele e mudei o que ele deveria fazer. Não, em todos os lugares do meu código que tinha a Grã-Bretanha até o, print hello world Eu teria que atualizar para dizer o universo de impressão porque eu sei quando esse pedaço de código causa print hello world, ele ainda está indo ser. Sinto muito. Isso é um pouco de desinformação. Deixe-me voltar atrás. Na verdade, não removi print hello world já faço é modificar o nome. E então esta é, na verdade, uma nova função. Portanto, há impressão Hello world que ainda existe. Mas sabendo que se eu quisesse imprimir o Hello universo, eu teria que dizer print hello universe. E então você verá Hello universe a partir da função. Tão conhecido que me faz de duas funções que fazem duas coisas diferentes. Um imprime hello world, britânica, solo, universal. Onde quer que eu quisesse fazer também. Posso fazer essa chamada de função. Porque estamos em nosso console e não estamos realmente editando um arquivo de texto. É por isso que modificar a definição da função como eu fiz, não removeu o outro funcional e acabou de adicionar uma nova. Se fosse um arquivo de texto, é claro que seria como mudar a frase e isso leva arquivo. Depois de alterar essa frase, essa intensidade é modificada para o resto dos documentos porque não estamos trabalhando com um documento, mas depois você verá como isso funciona. Mas meu ponto é que sabemos que temos duas funções e podemos simplesmente chamar qualquer uma à vontade. Não precisamos escrever este comando Alt manualmente e nos perguntar se é universal nosso mundo, porque sabemos quando chamamos isso imprime Hello universo, o que esperar e o mesmo da impressão Olá Mundo. Tudo bem. Agora vamos dar uma olhada em outro cenário em que talvez você queira passar um valor. Então, como no console.log, na verdade, passamos um valor. Vou chamar isso de parâmetro. O parâmetro é como um experimento variável para a função. E então, quando passamos, um valor, é armazenado nessa variável e, em seguida, podemos processar o que quisermos com esse valor. Então vamos dizer que queríamos me dar qualquer número e eu sempre adicionarei cinco a ele, algo assim, ou lhe darei uma representação percentual dele. Tudo bem? Se eu disser uma função e digamos calcular por cento, estão me dando um decimal. Sim, calcule decimal. Vamos fazer isso. Calcule decimal. Tudo bem. Eu sempre vou dividir qualquer número que você me der por 0. Posso facilmente dizer núm um. Num Estou vendo cria uma chamada de função que é calculado decimal, e espere que um número ou algum valor chamado num seja passado. Então, da mesma forma. A única diferença entre essa função e as que fizemos para a impressão. A única diferença será que este toma esse valor como parâmetro. Mas o que posso fazer aqui é retornar, certo? Então, isso é o que chamaremos de função de retorno de valor , onde ela vai fazer algo e isso geralmente é útil matemática é alguma manipulação. Então você envia o valor original e espera obter algum valor de deslocamento de versão manipulado. O que sua função faria é retornar o valor manipulado. Então eu diria que devolva núm vezes. 0,01, que se minha matemática estiver correta, é apenas a representação de 100 em casas decimais, certo? Outra maneira de fazer isso é dividindo diretamente por um 100. mesma coisa. Tudo bem. Vamos deixá-lo nessa. Tão normal dividido por um 100. E isso deve nos dar a representação decimal. Então, acabei de declarar essa nova função. E então, se eu chamá-lo calcule decimal e passar em lata. Eu passar isso significa que qualquer valor que eu coloquei aqui será armazenado em um. Portanto, ele deve retornar o que eu estiver manipulando ou qualquer manipulação aplicada ao entorpecimento. Então, quando eu chamo isso, recebo 0,1. Sente-se. Se eu chamá-lo novamente com 101, sempre será sem falhas. Faça isso em contas por mim. Então é por isso que eu disse, você pode escrever o código uma vez e, em seguida usar o telefone SHA-1 quantas vezes com quantos outros valores precisar. Muito, muito útil. Portanto, não importa o valor que eu passe, eu sempre vou ganhar dinheiro na representação decimal. Vamos tentar mais um. E se eu dissesse função? Calcular o produto? Este é suposto levar dois números. Então, vamos dizer num1 e num2. E então eu quero calcular o produto desses dois números. Portanto, os produtos seriam eu retornando o valor depois de multiplicar num1 e num2. Isso é tudo o que calculamos produtos. Tudo bem, Enter. Então agora temos essa função também, tantas funções que estou criando. Então você não está limitado, não é como se uma função pudesse existir. Você pode ter tantas funções porque uma vez que seja algo que você pode acabar repetindo, você quer ter certeza de que tem várias funções em toda a linha que possam lidar com a situação aqui. Se eu disser calcular, não decimal desta vez, mas produto, e eu dou 532, então ele retornará cinco vezes 30 para me dar o volume. Tudo bem, então se eu disser calcular decimal para 32, você me devolverá 0,32. Agora assista isso. E se eu dissesse , eu queria, queria a representação decimal da ferramenta cinco vezes 30. Tudo bem, olhe para este nó. Posso chamar isso bem, porque o resultado final que eu quero é o decimal calculado. Dentro disso, posso calcular o produto porque ele vai retornar um valor. Então eu posso tratá-lo como se fosse um número ou uma variável. Então eu posso ver o produto calculado e, em seguida, dar-lhe os cinco os 32. E adivinha o quê? Cinco em 32 seriam os parâmetros conforme descrito pela função para nossos produtos calculados porque foi isso que fizemos na definição. Preciso de dois valores para chamar o cálculo do produto. Eu tenho que dar dois valores. Quando isso for retornado. Esse valor que é retornado não servirá como o volume para o nosso decimal calculado, que definimos para ver me dar um valor e eu fui armazenado nessa variável chamada adenoma e depois dar você apoia os resultados. Então esta é apenas uma grande chamada de função onde estou vendo, dê-me o valor disso. Vou precisar obtê-lo, ir em frente e usá-lo como valor para isso. E isso vai apenas uma corrente de margarida. Portanto, ele atenderá a essa chamada de função que retorna um valor e, em seguida, faz essa chamada de função e que retorna os resultados finais. Tudo bem, posso fazer várias coisas. Quando você está retornando um valor. Se é que você queria armazená-lo em uma variável, você poderia dizer, Deixe a variável b igual a, e então você diz calcular o produto. Então, deixe a variável b igual a qualquer valor retornado. Você só pode fazer isso com funções que retornam nosso log do console para o mundo Intel e o que quer que seja. Isso não vai devolvê-lo. Não está retornando, só está imprimindo. Está carregando diretiva e um final. No entanto, este executa a diretiva e tenta enviar de volta o valor depois. Tudo bem, então quando ele envia de volta o valor, você sempre pode pegá-lo em uma variável ou como vimos, podemos reutilizá-lo de várias maneiras. Mas é apenas uma maneira mais rápida de multiplicar dois números do que escrever isso em todo o lugar porque é, a fórmula muda. Se o preço foi calculado e cada preço deve ser marcado em 10%, então você tem que fazer isso para cada produto no site que seria tedioso. Enquanto que se você escreveu uma função, basta chamar a função sempre. Se, se a fórmula mudar na próxima semana, você só tem um lugar para atender à alteração. Você não precisa ir a todos os lugares que fiz a mudança. Você fez a única alteração na função, então é isso. Tudo bem. Eu sempre posso apenas dizer que me dê o produto de 49. Não sei se eu apontei isso antes, mas quando você tem vários valores, você sempre os separa por vírgula. Tenha valor um, valor dois, vírgula, valor três, coma até em número de valores que você pode ter que você precisa para essa função específica. Para essa conta, calcule o produto de apenas um número. Preciso de uma ferramenta mínima. Se eu quisesse três, eu só tenho que mudar a definição e dizer vírgula três, vírgula quatro, etc. Eu faço isso. Ele calculará o produto, armazenará no produto variável. E então, se eu fizer apenas um registro de console ou o mesmo produto, ele me mostrará que esse é o valor em vez dos produtos. Tudo bem? Isso é tudo o que funciona e isso é tudo que as funções podem tornar sua vida muito mais fácil. Tudo bem. 14. Variáveis e escopo em JavaScript: Tudo bem pessoal, então analisamos as variáveis, analisamos as declarações condicionais, analisamos a repetição e analisamos as funções. Embora não tenhamos discutido é um conceito chamado escopos. Então, antes de ir mais longe, quero que vejamos o que queremos dizer quando dizemos escopos. Quando estou na janela do console geral e digo que algum nome de variável seja igual a, e então eu dou um valor a ela. Para apenas nomear. Essa variável existe dentro do escopo de todo o navegador, dentro do escopo de toda a janela do console I'm. Então eu posso usar o nome em qualquer lugar que eu quiser. Se eu quisesse escrever uma função que imprima nome, nome da impressão, valor, tudo bem. Nem preciso usar um parâmetro para isso porque posso acessar o nome assim que o nome existir dentro do console, posso dizer log de pontos do console e nome da impressão. Então é isso que chamaremos de escopo para que não misture o escopo fora do nome global. Se eu disser valor do nome de impressão, é sempre bom testar nomes. Então, isso é global. Qualquer função, qualquer coisa pode acessar as necessidades. Essa é uma variável global. Tudo bem? Sabe, se eu definir uma função e eu disser print, esse é um valor de string, eu pego um valor aqui, então vamos chamá-lo, vamos chamá-lo string de teste. Isso é o que estou chamando essa variável. É suposto imprimir o que estiver dentro das cordas de teste. Então, vou dizer o fluxo de teste de log do console. Sempre que chamamos essa função, eu só queria imprimir o valor que estava no fluxo de teste. Essa é minha definição. Então, pessoalmente, para saber que temos a função que existe. Então, se eu disser o valor da cadeia de caracteres de impressão, e então eu lhe dou um valor como testar a função de impressão. Seja o que for que eu até, deixe-me pegar minha divisão. Função de impressão de teste. Dê a ela a chamada de função de valor, ele preverá exatamente o que eu enviei. Então isso é algo que eu comprei dose de log do console, certo? Quando ele é enviado por algo, registre-o no console, imprime no console. Então foi isso que eu fiz. Eu criei minha própria função onde posso passar em qualquer string e ela a imprimirá no console. Você pode pensar sobre isso. Mas o que não posso fazer é acessar a string de teste de qualquer lugar. Além da função. Se eu tentei fazer qualquer coisa com a string de teste por si só, se eu tentasse consolar a string de teste de log fora dos limites dessa função, vou receber esse erro. Isso é o que chamaremos mais uma vez de escopo. Portanto, este não é global. A string de teste está dentro do escopo dessa função. Portanto, qualquer variável que seja declarada nos parâmetros aqui, ela é declarada dentro das chaves de qualquer estrutura de controle, seja ela if instrução, switch, instrução, repetição, qualquer coisa. Uma vez que ele esteja dentro dos limites de toda a definição de instruções , ele está dentro do escopo dessa instrução. Lembre-se de quando estávamos fazendo nossas declarações de repetição e eu tinha feito o para eu igual a blá e o que quer que seja. Mas então, quando ele foi experimentado com um tempo, eu tive que definir o olho especificamente porque eu era único do for-loop. Então, na verdade, era um escopo artístico. Só não mencionei isso dessa vez. Tudo bem. Não, você está entendendo por que eu tive voltar e dizer que eu é igual a 0 e depois escrever o loop while porque eu tive que fazer uma variável global chamada I no momento vi que o loop while pude ver que eu existe. Mais uma vez, você pode definir variáveis fora de todo o resto, globalmente para o navegador e globalmente para todos os outros bits de código que serão escritos. Além disso, você pode definir uma variável e usá-la dentro do escopo de uma estrutura de controle específica. Posso facilmente definir outra variável aqui e dizer deixe, deixe-me, deixe-me fazer isso. Então deixe-me alterar essa string de teste acima de si para que saibamos que isso está dentro do escopo da função. Mas eu poderia facilmente encaixar, desculpe, quebrando minhas próprias regras. Lá vamos nós. Então eu poderia facilmente dizer que o sufixo seja igual No escopo da função. E então vamos começar a misturar e combinar saber porque estamos começando a ser profissionais. Então, vou dizer log do console qualquer string que tenha sido passada. Tudo bem, mais o sufixo. É por isso que coloquei esses dois espaços lá. Então é que podemos ter um espaço entre qualquer valor que eu passe manualmente. E então isso vai existir dentro do escopo dessa função. Isso não significa modificar uma definição de função. Enter e , em seguida, qualquer coisa que eu passe para o valor da string de impressão, certo? Se eu disser, estou testando, apenas testando TO no escopo da função, certo? Se eu chamar isso, se eu der a ele meu nome, string, escopo da função, se eu tentar alterar o valor do sufixo, sufixo, você não é igual ao escopo global. Veja que o sufixo é igual ao escopo global, mas não queria dar esse olhar para isso. Então, mesmo que tenha criado uma variável chamada sufixo e esse script de demonstração mais uma vez, é isso que se safa com muita cinza que deveria ter sido aceso sufixo, mas vamos trabalhar com ele. Então, mesmo que eu tenha definido o sufixo no topo aqui com o escopo global da string, quando chamo minha função, o valor que está lá do qual sabemos está vindo. sufixo ainda está no escopo da função. Porque quando chamo a função aqui, dei a ela o valor para a string de teste. Essa string nula tem seu valor. E então eu defino minha versão de função dessa variável chamada sufixo. Então adorei qualquer valor que tenha sido passado, mais esse é o sufixo. Esse é apenas um exemplo de como o escopo funciona. Quando você tem aparelhos encaracolados. Tudo o que você faz dentro das chaves é confinado a isso, essas chaves curly, if statement, function for-loop, seja lá o que for. Se você precisar de novas variáveis apenas para realizar essa operação específica dentro de um conjunto de chaves. Sinta-se à vontade para fazer isso porque essa variável ficará confinada a essa estrutura de controle específica. 15. JavaScript e HTML: Tudo bem pessoal, então estamos olhando para a linguagem Javascript apenas no contexto e nos limites do nosso console em nosso navegador. Vejamos isso dentro do contexto de como ele pode realmente ser usado, que é interagir com o PH HTML regular. O que vou fazer é abrir uma nova janela para o código do Visual Studio. Se você quiser uma nova janela, você pode realmente ir para o arquivo e simplesmente ir para Nova Janela. Portanto, não quero que modifiquemos o site que estamos construindo até este ponto, pelo menos ainda não. Porque, como eu disse, JavaScript é algo que você usa quando você precisa. Não é. Oh, vou experimentar no meu site com ele. Mas é bom saber o poder que ele tem. Então, vamos abrir uma nova janela e, em seguida, vamos criar um novo arquivo. E vamos criar uma nova pasta em algum lugar. Eu só vou criar uma nova pasta chamada G está testando e essa é a que vamos usar R vou usar você pode criar a sua própria. E então eu vou criar um novo arquivo, que é claro que sempre chamamos índice, pois é o primeiro arquivo. Eu só vou girar o Boilerplate HTML5. E vou criar algumas tags de teste. Então, vou dizer testar JavaScript em uma tag p. Tudo bem, já olhamos para nomear nossos elementos. Podemos ter o ID testando JavaScript. Vou chamar este teste de ID em álcool, este teste JavaScript com atributo ID. Vou dar isso para a mesma classe. Então, mais uma vez, isso está mais centrado no JavaScript ainda não em todo o site, pelo menos. Então, estou apenas dando esses valores. Fui mostrar como você pode interagir com seus elementos. Quando eles tiverem, quando você quer apenas as tags p versus você quer um elemento específico com um ID versus uma ou poucas largura, a mesma classe, da mesma maneira que podemos interagir com elas usando CSS quando podemos direcionar o elemento específico com base em toda a tag de elemento ou ID ou classe é muito semelhante ao JavaScript inteiro nos permite direcionar o que precisamos, quando precisamos. Tudo bem. Só estou mantendo isso simples com tudo isso. Só vou entrar ao vivo, certo? Então, agora estamos vivos. Temos nossa pequena página. E então, quando clicamos com o botão direito do mouse e vamos para Inspecionar e simplesmente não vamos janela, podemos ver nossas coisas HTML. Na verdade, podemos pular para o console e podemos realmente começar a interagir com ele. Então, deixe-me limpar o console e ampliar um pouco. Tudo bem, então vamos dizer que queríamos ver todas as tags p em nosso pH, certo? Então, claramente, temos alguns petabytes. Isso é tudo o que colocamos na página. Tag Peta Guan P com um id e classe ou aulas, certo? Então, se eu quiser acessar qualquer coisa, tenho que dizer um documento que você não quer balançar esse documento de tipo, ele destacou a página inteira. Não sei se você tomou nota desse documento representa a página em que você está. Certo? Então, graças ao navegador, temos várias funções disponíveis para nós. Como eu disse, o JavaScript é vasto. Não posso sentar aqui e passar por todas as coisas e assim por diante. Essas coisas que você quer dizer nunca usar ou usaria em circunstâncias muito especializadas. Então, neste caso, vou pegar, então veremos que obtemos elemento por ID, recuperaremos o nome da classe, obtemos pelo nome, obtemos pelo nome da tag e obtemos pelo nome da tag. Vamos começar com o nome falante. Nome da tag significa que quero especificar qual tag estou segmentando, então estou segmentando p tags. Olhe para isso. Não, está me mostrando que tenho uma coleção de quatro de d Tau aqui, p com o teste de ID e P2 com a classe de teste. E então está vendo que o teste tem isso. Então é como se fosse faculdade e isso é o que chamaremos de matriz. Mais tarde, quando estivermos modificando nosso próprio site, trabalharemos com uma matriz. Mas eu só estou trazendo sua prisão para esse cenário é caracterizado pelas chaves quadradas. Então, se eu disser obter elementos por nome de tag, então vou dizer let p tags. Então essa é apenas a variável b igual a. Então eu chamo esse código que nenhuma tag P tem todos os elementos lá. Então eu posso chamar o teste. Posso ligar, vamos chamar testes. E se eu quisesse mudar o valor nele para não poder chamar texto interno interno. Temos essa inteligência. Deixe ser igual a b igual a redefinir um texto do console. Veja o que ele vai acontecer. Então, uma das tags p, quando pressiono Enter, temos esse texto de configuração do console. Então, eu posso realmente usar JavaScript para alterá-lo. Então lembre-se quando a página carrega, tudo não é estático, está lá. A única maneira de mudar algo é voltar ao código do Visual Studio e alterá-lo. Mas é aí que estamos projetando. E se quiséssemos colocar um pouco do poder em nossas mãos de usuários? É por isso que escrevemos JavaScript dentro do nosso código para permitir que essas coisas aconteçam. Aqui estamos vendo a redefinição de texto do console. Tudo bem. Se quiséssemos direcionar o específico, estou vendo muito aqui. Se eu quisesse ser especificamente específico com quais tags de destino eu quero, posso dizer obter elemento por ID. Ao dizer get element by ID, eu especificaria esse nome de ID, o que me permitiria direcionar qualquer valor de id que existe, certo? Ou se eu quisesse obter aqueles com um nome de classe, posso dizer obter elementos por nome de classe, o que neste caso nos daria a classe de teste. Era para chamá-lo de Sean. Enquanto eles fizeram foi imprimir toda a coleção. Então eu posso dizer que B seja igual a, depois reutilize esse comando ou aquela instrução. Não, temos tags de nome de classe com essas duas. Então, a partir daqui, podemos realmente ver qual é o comprimento. Temos dois deles. Podemos ver uma série de coisas e podemos até colocar isso como um loop for-loop onde vamos mudar o valor. Então, há várias coisas que podemos fazer e, como eu disse, não posso esgotá-las, mas essas são algumas pepitas que estou compartilhando com você como um todo. O Javascript permite que ele interaja com a página real. Mais tarde, um em que não cheguei ao nosso site. Veremos como podemos modificar a página real para colocar scripts lá, como podemos colocá-lo em seu próprio arquivo. E vou examinar alguns dos conceitos básicos com você à medida que passamos adicionando o JavaScript real ao nosso projeto de site real no qual temos trabalhando. Então fique atento. 16. Como usar JavaScript: Oi pessoal, bem-vindos de volta. Nesta lição, começaremos a examinar JavaScript. Javascript é outra daquelas linguagens que você só precisa explorar realmente. Mas é uma dessas linguagens que é muito fácil de se atualizar e começar a entender como a programação funciona em geral. Portanto, o JavaScript é algo que está realmente incorporado ao navegador e permite que você modifique em tempo real o que está sendo exibido na tela. Como vimos uma vez ou em HTML, responda adicione o CSS. É mais como um cidadão. Esqueça isso. Enquanto o navegador estiver em execução, ele só renderizará o que foi escrito. Javascript nos permite modificar que, embora o pH seja LPS depois que a Berlim já nos deu nosso documento HTML, é possível ver o conteúdo, os padrões de TI e tudo mais. Não podemos mudar nada. Eu parafusei novamente, mas então podemos permitir que Java ou JavaScript ou outros permitem que todos ainda façam modificações no relógio estão sendo exibidas quase à vontade. Então, vamos fazer alguns experimentos aqui e ver como o JavaScript funciona. Então, a primeira coisa a notar é que precisamos de uma nova etiqueta. E isso geralmente aconteceria no final da tag do corpo. Então, ele vai entrar na etiqueta da cabeça ou no final da tag do corpo. Número um, a razão pela qual você não colocaria na cabeça é mais como renderização. Quando a página está renderizando, você quer tudo na praia, então você quer executar o script porque o navegador renderiza não. Então, se o Oncotype DX primeiro na página, é o que acaba aqui primeiro. A mesma coisa para CSS. É sempre bom renderizar de cima para baixo. Então, se você tiver um estilo de tag p aparecer e então você se acalmar aqui em iterar outro estilo de tag P que contradiz o acima, então ele realmente o substituirá. Então você vai querer tudo em sua página antes que o script seja executado, e é por isso que geralmente o colocamos no final das tags de corpo com base na natureza do trabalho descritivo. Às vezes, pode não funcionar se for colocado na parte superior. Então eu só vou descer aqui, dizer roteiro, tag de script aberto e fechado. Tudo bem, muito importante. E então o que posso fazer é criar uma função ou deixe-me, deixe-me fazer a mais simples. Desculpe, eu queria fazer um alerta. Então, o alerta nos permite exibir uma mensagem na tela. Então, uma vez que a página é carregada, página carregou o alerta J S. Tudo bem, então vamos ver o que isso parece do nosso navegador. Então, se eu navegar até a página de índice, é aí que coloquei o script. Ele está na página de índice e navegue e olha para aquela página carregada alerta JS, já que está aparecendo até mesmo antes dele e CEOs, certo? Então é isso que esse alerta faz. Isso nos permite modificar coisas. Então, se eu colocar algo como um botão, porque de um modo geral, o JavaScript é acionado com base em um evento. Você gostaria que algo acontecesse quando algo mais acontecer ou assim, se eu tiver puxado o botão para cima, digamos que tipo é igual ao botão. E isso é muito importante porque os botões são padrão para enviar botões. Então, onclick, que é o evento. Então, estou vendo quando esse botão é clicado, eu queria chamar a função. Vou salvar o botão clicado. E essa é a função. Então, vou dizer que me critique. Tudo bem, então temos nosso botão ligado até que você deveria chamar o botão clicado como a função. Tudo bem, então deixe-me atualizar esta página e aqui está nossa camarilha. Eu. Quando cliquei, nada está acontecendo. Se eu inspecionar o elemento, você verá que estou recebendo vários erros de console porque ele está vendo ButtonClicked não está definido. Então, ele sabe que deve se voltar para algo em uma camarilha. Mas ButtonClicked não está definido, então ele não sabe o que fazer isso vendo. Certo, vejo que devo fazer alguma coisa, mas não há indicação. Então, na área de script Java, posso ir em frente e definir essa função. Então eu veria literalmente a função e o nome da função com os parênteses abertos e fechados. Então, esses são muito importantes. E então dentro dessa função, vamos ver, eu crio os alertas de nozes para ver. Sou criticado. Tudo bem, então vimos que o JavaScript disparou automaticamente quando acabamos de colocar o alerta lá, ele acabou de ser demitido? No entanto, desta vez estou tentando dizer que ele só dispara quando o botão é clicado. Então, quando eu voltar, vou recarregar a página. Observe que a página está recarregando, não aparecendo alertas. Mas quando clico, recebo o alerta, sou clicado. Então este sou eu, você sabe, sobrepondo, sendo dinâmico. E este é o primeiro passo para tornar algo dinâmico no web design usando JavaScript. Então clique em mim. Quantas vezes você fizer isso, você receberá o alerta a cada vez. Então isso é um evento. Tudo bem, então vamos começar a ficar, como eles diriam, gabar-te com isso. Tudo bem, vamos ver o que podemos mudar na própria página quando o botão é clicado. E se eu quisesse alterar o texto de uma dessas tags quando o botão for clicado. Então clique em mim para alterar o texto ou outro, deixe-me criar outro botão. Então clique em mim. E então vou ver para mudar o texto. Então eu posso ter múltiplos. Então clique no botão para alterar o texto, clicado. Tudo bem, então essa é outra função que eu quero. Então, quantas funções eu precisar fazer, posso encontrá-los telefones celulares para mim e depois ter nossa função para mudar. Leva um clique. Bem, o que vou mudar? Digamos que eu queria mudar o texto desta tag P para P, eu queria mudar esse bastão para ver que fui clicado. Isto é, isto é, é texto JavaScript. Tudo bem, um, eu preciso ser capaz de mirá-lo. Então eu preciso saber por ID. Então fui dar a ele um ID para ver o alvo. Tudo bem. Nada de fundos para apenas segmentar a tag. Lembre-se, verei que você não tem dois elementos com o mesmo ID na mesma página porque isso pode levar a problemas. Então aqui está a exposição a. Quando eu quero obter o elemento pela tag de destino ID, se ele vir dois ou três ou dois ou mais, ele não sabe qual deles está realmente segmentando, então simplesmente não funciona. Tudo bem, para que possamos testar isso mais tarde. Mas agora vou direcionar essa tag P e dizer tag alvo. E então, neste peta ou nesta função, eu vou dizer documentos. Então documento significa que nesta página, quero obter elemento por ID. Então você vê tudo isso que você pode obter por um rebocador imitador e obter meu nome. Ele pode obter o nome da minha classe, nome da classe é igual ao que quer que seja. Então, se você quisesse afetar múltiplos, então novamente pegue o nome da minha classe e fique por inflamação, ele obteria todas essas tags p. Ou você pode obter por ID, ou seja, o específico, certo? Então, obtenha elemento por ID. E então, dentro dos parênteses você tem aspas abertas e fechadas. E então você coloca o nome ou os valores de ID, essa tag de destino é a ID. Certo? Então vou dizer o que quero modificar. Quero modificar o HTML interno em HTML significa o que está dentro dessa tag. Então, o HTML interno aqui será igual a, eu queria dizer texto de script Java. Tudo bem, então vamos ver o que tudo isso vai ceder. Então eu tenho meu barco extra agora lembre-se de que estamos mirando Todd para ver esse texto JavaScript. Eu ainda funciona. Tudo está funcionando e clicaremos nele. Ele sempre mudará apenas para tomadas de JavaScript com base no que escrevemos. Mas se eu atualizar, a página sempre vai refazer o documento HTML original porque é isso que ela sabe. Quando eu clicar novamente, ele o mudará rapidamente, mas não o altera permanentemente através do site. Tudo isso muda no contexto do meu navegador. Agora, em poucas palavras, isso é o que o javascript oferece, certo? Há, há muito mais nisso porque as declarações IF, você tem loops, você tem várias coisas que você pode fazer. contexto determina o que você precisa fazer em JavaScript, para ser honesto, é uma daquelas coisas que é bom ter o conhecimento básico. Mas você realmente não vai acabar usando-o em seu rosto com uma situação em que as alternativas podem não ser tão favoráveis. Portanto, não vou gastar tempo explorando todos os aspectos dessa linguagem. Estou apenas mostrando um todo. Ele ajuda você a modificar o HTML que já foi inserido é seu DOM. É assim que se chama, certo? Então você pode ter essa sensação dinâmica no seu site. Não. Haverá situações em que você deseja que o mesmo tipo de script seja executado em várias páginas. Estamos correndo para o mesmo tipo de território, sabe, como com nosso CSS quando adicionamos nosso CSS na área principal e queríamos que ele fosse em várias páginas onde colocá-lo em nosso arquivo. Então é para lá que vamos. E, em seguida, queremos nossas coisas de script em um arquivo por si só. Então, vou adicionar um novo explorador de arquivos ou ele, ou Explorador de arquivos. E vou chamar esse ponto de script, e nossa nova extensão é js. Portanto, observe que é o código do Visual Studio. Ele sempre lhe dá alguns indicadores que eles podem saber com que tipo de arquivo você está lidando, certo? Então, em um arquivo JS, não precisamos das tags de script. Tudo o que precisamos é da sintaxe JavaScript bruta, certo? Então, script.js, e ele só teria essas funções lá. Então, o buck no arquivo HTML ou uma tag de script saberá que se parece com esse script abrir e fechar. Este, infelizmente, não é de fechamento automático. Ele vem com um atributo chamado SRC que me permite fazer referência ao arquivo script.js. Então eu posso pegar isso e aplicá-lo a cada batida. Então, o contato também tem um botão, digamos Fale Conosco. Botão e clique. Eu queria ver que isso é um alerta, certo? Ou eu sou clicado em vez disso, certo? Então ButtonClicked deve ser chamado no botão de contato clique também, à direita, então inclua este script. E então eu tenho esse tipo de entrada, envie o que está me dando um botão. Mas adivinha o quê? Posso dizer, onclick. Onclick, quero que você ligue. Desculpe, esqueci os nomes das funções. Então, clique, eu queria ligar para o botão Clicked. Tudo bem, então vamos ver como isso funcionará. Então eu sei que na minha página inicial eu me separei, ele chamará o alerta. Tudo bem. Também no Fale Conosco, tenho este botão que, quando clicado, chama a mesma função. Assim, podemos tornar o JavaScript reutilizável em várias páginas. Você tem o JavaScript precisa se aplicar a vários lugares. Você faz isso, certo? E então continuará com sua operação como normalmente faria. Portanto, o JavaScript é compartilhável e você pode entrar em seu próprio arquivo. Nenhuma coisa que eu vou mostrar e então podemos fechar isso para não é o que acontece quando você começa a se misturar rápido. Então, como você vê aqui, temos imagens em um lugar, você tem CSS, arquivo JavaScript, arquivos HTML da web. De um modo geral, gostaria de ver os arquivos misturar semáforo que cada arquivo deve ser sua própria seção. Eles ischium alphas são os mais importantes, então eles precisam estar na pasta raiz, mas os outros precisam ser meio separados porque você pode acabar com vários arquivos CSS, várias imagens para o seu site, vários arquivos de script, etc. Então, o que eu faço é separá-los, digamos que ele crie uma pasta chamada CSS. Então você tem o arquivo, Novo arquivo e nova pasta, ou você pode clicar com o botão direito do mouse e dizer Nova pasta. Eu crio uma pasta para JS ou JavaScript e, em seguida, crio outra para os ídolos de imagens chamam esse IMG. E tenha cuidado porque ele tinha acabado de criar o IMG sob as pastas js. Eu. Deixe-me refazer esse. Portanto, GS, certifique-se de não estar selecionando nenhum outro arquivo ou pasta e está criando. E depois IMG. Lá vamos nós. Então eu posso mover o script para os dados. Então, estou apenas arrastando e soltando. Sim, recebo o rápido movimento. Claro. No entanto, vou mover esse CSS aqui. Pergunte-me novamente, mova e seguida, imagem ou imagens podem entrar lá. Então, não, parece um pouco mais limpo, certo? Eu sei onde meus arquivos HTML estão e quantas imagens eu tenho, elas estão todas em uma única pasta. Todos os arquivos CSS são pasta conhecida, etc. Mas veja o que acontece com o site e tudo volta ao normal. A culinária não funciona, as imagens desapareceram, tudo se foi. Por quê? Porque movemos os locais dos arquivos. Então, isso é outra coisa. Lembre-se que eu sempre disse porque eles estavam no mesmo nível, nós sempre podíamos chamá-los pelo nome. Não, há pasta suficiente e em outro lugar. Então, o que eu tenho que fazer é chamar a pasta e, em seguida, chegar ao rápido. Então, para as folhas de estilo, a pasta é chamada CSS para dizer que HF é estilos de barra CSS. Então, para a página Fale Conosco, agora ele sabe onde obter as folhas de estatísticas corretas. Então, essa é apenas uma atualização rápida que precisamos fazer em todas as páginas. Portanto, todas as folhas de estatísticas não têm estilo CSS. Deixe-me subir e modificar isso. Certo? Então, todas as páginas conhecidas ou que devem ir a pasta CSS para obter as folhas de estilo. Tudo bem, a mesma coisa para os JavaScripts. Observe que nenhum clique está funcionando. Portanto, o arquivo JavaScript está conhecendo scripts de barra js. Certo? Então eu só vou lá, pego o arquivo JS e atualizo em todas as referências por toda parte. E uma vez feito isso, o clique funciona mais uma vez. Tudo bem, então isso é chamado de caminhos relativos, certo? Você sempre deseja manter seus caminhos relativos às cepas de rede de arquivos acessem os outros arquivos. Portanto, a página Fale Conosco é essa raiz, mas então ela tem que entrar em j para chegar ao script. Tudo bem, então essa é outra regra importante. Então, a mesma coisa para as imagens no barco. Isso não é barra IMG, certo? Então, vou apenas removê-los e vou duplicar este por quantas vezes e, em seguida, o pedido é restaurado. Então esse é apenas outro princípio que eu pensei. Oh, posso entrar lá enquanto a variedade de arquivos começa a crescer em seu projeto web, você quer ter certeza de que está separando-os com uma delineação clara para que você saiba exatamente onde encontrar água e todo. 17. Como usar jQuery: Tudo bem pessoal, bem-vindos de volta. Então, acabamos de dar uma olhada no JavaScript na água que você pode fazer por uma neve. Vamos levá-lo um pouco e começar a lamber em uma estrutura chamada jQuery. Saber que uma estrutura é resultado de um grupo de desenvolvedores, geralmente desenvolvedores de código aberto, que basicamente estão nessa coisa há anos. Eles continuam fazendo a mesma coisa repetidamente. E eles acham que se continuarem fazendo isso, então há outra pessoa lá fora que continua fazendo isso também. Então, o que eles fazem é que eles tipo de linguagem de pacote ou certos comandos comumente usados de um idioma específico. Eles os empacotam em um arquivo e, em seguida, fornecem alguns conjuntos de regras sobre como você pode reutilizá-los usando uma fração do código. Então jQuery é esse tipo de estrutura. Então, o JavaScript, como eu disse, é muito poderoso. Há muitas coisas nisso. Mas há certas coisas que exigiriam cinco, 10 linhas de código. E então o que eles fizeram foi tipo de pacote que eu coloco no que chamamos de arquivo jQuery ou biblioteca. Então você pode acessar essas 10 linhas de código usando uma linha de código chamando a função jQuery. Então é isso que vamos ver hoje. Então, o primeiro passo para colocar jQuery em seu projeto seria, bem, existem duas opções realmente, você pode baixar o arquivo. Então você pode realmente ir para JQuery.com. E podemos fazer isso aqui, JQuery.com. E a partir daqui você verá que é leve, compatível com CSS3, e é entre navegadores, certo? E isso dá alguns exemplos da sintaxe. Eles podem realmente ir aqui e obter documentação muito boa de um barco, a API, certo? Você também pode baixar os arquivos. Então, se você baixar o arquivo, então você receberá outro arquivo js como vimos. Ou você pode fazer o que chamamos ou usar o que chamamos de CDN, que é a abreviação de rede de entrega de conteúdo. Portanto, esses são arquivos hospedados na Internet. Então acabei de digitar esse link, Google Apis.com, e é uma versão hospedada dos arquivos JavaScript. Então você vê que o JavaScript agora que passamos é basicamente nada. Tudo isso está fazendo coisas malucas que eu nunca poderia sentar e ensinar de uma só vez. Isso é anos e anos fazendo a mesma coisa em JavaScript todos combinados e o que chamaremos de minificado. Se você tirasse o Min do link, ele pareceria um pouco mais legível, mas mesmo assim, ele ainda está bastante desbloqueado. Você pode ver o quão grande esse arquivo é. Então a minificação é realmente o processo de tomar notas todos esses espaços em branco, o que reduz de forma variável o tamanho, o tamanho geral do arquivo em si, certo? Então é por isso que acabamos com o min. Então o que eu estava dizendo é que, em vez de não carregar esse min e tentar colocá-lo no projeto. Você também tem a opção de apenas referenciá-lo diretamente do site. Então, isso realmente carregaria mais rápido quando seu projeto é visto na internet porque Lord Foster, do servidor do Google, alguém é computado e seria do seu servidor para o computador deles ou para o navegador deles, certo? Então, o que faremos é apenas usar a opção CDN e incluir jQuery em nosso site como o temos. Então vá para o índice. Vamos começar com o índice. O que farei é usar a mesma tag de script exceto que o SRC será o URL do arquivo. Portanto, se você não estiver trabalhando com uma conexão com a Internet, talvez não tenha essa opção. Você vai querer ir tão rápido. Então, se você tiver que baixar o arquivo e isso não for problema, você tem várias opções. Para mim, o mais fácil seria ir aqui emcarregar. Às vezes, o que eu faço é simplesmente ir para a semente, copiar tudo isso de qualquer maneira, voltar, criar um novo arquivo JS. Então isso cria um novo arquivo e eu vou chamá-lo jQuery dot js, certo? E, em seguida, cole o conteúdo do arquivo lá. E então esse é meu arquivo jQuery js. Leia isso. É difícil de olhar, mas é isso que é. Então, em vez de usar a CDN, e eu diria usar nossas bundas em vez de usar o CDN, esse ponto de ponto, você poderia apenas dizer que está referenciando seu arquivo jQuery dot js ou o que você chamar isso, certo? Então você tem várias opções. Mais uma vez, isso deve ser slash jQuery. Lá vamos nós. Tudo bem, então você tem várias opções quando se trata de fazer referência a essa estrutura. Observe também que estou colocando meus próprios scripts porque a coisa é que isso fornece como uma base. Então, uma vez que eu entendo, ele faz um 100, alguns comandos comuns em JavaScript. Talvez eu precise fazer referência a todos esses comandos no meu próprio arquivo de script. Então, o pedido é importante. Deixe-o carregar primeiro e então eu posso fazer referência às coisas jQuery menos 2 em minhas coisas. Então, sempre coloque esses arquivos jQuery topo e todas as outras dependências das bibliotecas e assim por diante. Sempre começa com aqueles antes de você acessar seu código personalizado porque você pode confiar no código desses outros arquivos. Tudo bem, então vamos dar uma olhada no que jQuery pode trazer para a mesa. Tudo bem, então eu sou, não sou de usar meu arquivo de script para isso. Vou escrever meu próprio código jQuery logo abaixo aqui. E ainda vou direcionar isso quando for clicado, certo? Então deixe-me tirar isso onclick ou viver cria outro livro. Na verdade, deixe-me criar outro botão para que possamos reter todos os nossos exemplos. Isso não terá um onclick. Não quero me ver para esconder o título. Então lembre-se de que temos o título. Tínhamos o título. Aqui está nosso título, estava recebendo armas, alto-falantes, apenas tudo por isso queremos esconder esse título quando esse botão for clicado. Tudo bem, então, para começar a usar jQuery, o que você quer fazer é dizer quando o documento estiver pronto, então estou pronto para ser executado. Então você pode ver o documento de cifrão. Esta é uma marca comercial da jQuery. Então lembre-se de você ver no documento antes de ele entrar no arquivo de script R, vimos um documento, certo? Então, no jQuery, você vê um cifrão, parênteses abertos e, em seguida, seja lá o que for mais fácil de segmentar. Então, onde ele está discutindo que todo o documento, se quisesse uma tag p, veria p. Certo? Desculpe, sem aspas. P. Eu tenho, eu mantenho uma pessoa errada, certo? Se eu quisesse mirar. Então, é quase como CSS. Se eu quisesse atingir, tudo bem. Eu posso ver o cifrão superior, abrir parênteses e, em seguida, isso alternar certo? Butt, certo. Não, estou segmentando os documentos inteiros. Estou dizendo document.ready. Neste documento está pronto. Quero executar essa função. Então, dentro dessa função no final com um ponto e vírgula, certo? Assim, a sintaxe pode tomar uma curva de aprendizado, hereditariedade pode tomar outra e incorrer, é por isso que eu continuo vendo a prática se torna permanente. Então cifrão, abra parênteses a toalha que você quer os alvos, que neste caso, eu envio o documento primeiro. E então eu estou vendo o Dr. Reddy, o que significa que é isso que estou esperando em relação a essa tag. Execute esta função. Para que dentro dessa função eu possa ter tantas outras funções, como muitas outras coisas que eu quero fazer. Saiba que a maneira mais curta de fazer isso seria apenas a função C. Então, na verdade, há um caminho mais curto. Então eu estou filmando tudo certo, conheço todos os segredos do universo. Então, a maioria dos exemplos que você veria teria document.ready porque por anos isso é tudo que o jQuery fez isso. Mas em tempos mais recentes, eles forneceram ou resumiram a versão dessa palavra meio que dizem cifrão, parênteses abertos, executam essa função porque já inferirá que eu posso execute essa função somente quando o documento estiver pronto. Tudo bem, então vamos parecer algo como o evento de clique de botão. Então, já vimos como podemos obter um evento onclick usando JavaScript regular com jQuery. Eu posso conhecer C, cifrão, parênteses abertos, e depois ver o botão ou para eliminar, estou procurando como se nos sentássemos. E então, se eu disser um botão, isso vai direcionar todos os livros aqui, o que não é realmente o que eu quero. Quero direcionar esse botão em particular. Então eu posso dar um ID, que sabemos ser um nome totalmente exclusivo. Então vou dizer Hide Title, btn. Então eu costumo fazer isso com meus títulos estão com meus IDs em vez disso. Então eu sei que tipo de elemento ele é. Então, Oculte o título btn. Então, se eu quiser dizer que quero segmentar Hide Title BGN, o que eu realmente faria é abrir aspas. Assim como o CSS, uso a hashtag, coloco o ID dos elementos que estou segmentando. Então eu digo um ponto, clique, certo? Então, estou vendo quando esse elemento é clicado, execute essa função. Tudo bem, então você verá muito disso no jQuery. Você verá o cifrão ou metope, o elemento que está procurando e então o que estou esperando? Então, isso é eventos ao vivo. Então, vimos com document.ready quando o documento estiver pronto, tudo bem, executado. Bem, quando esse elemento for clicado, execute essa função. Então, o que estamos colocando dentro dessa função? Então eu posso ver, e antes de irmos mais longe, estive fazendo isso tudo errado. Se você viu o erro antes eu, então parabéns, você é oficialmente mais inteligente do que eu, mas estamos escrevendo um roteiro, então precisamos do nosso roteiro. Sinceramente, peço desculpas por essa supervisão. E então você começará a ver que o código que indica as cores começa a parecer um pouco mais acolhedor do que apenas o branco leva. Tudo bem, assim como estávamos e vou me certificar de que faço meus recuos. Posso ver onde tudo começa e pára. Portanto, esta é a função principal, e então esse é o evento dentro dessa função principal. Então lá vamos nós. Isso parece um pouco melhor. Agora que estamos no script, você começará a ver mais algumas dicas de código. E se você precisar de ajuda extra, você sempre pode obter os invernos e trechos jQuery das extensões. Digamos que se você apenas fizer sentido hoje e depois procurar por jQuery, você veria trechos diferentes e você pode obter alguma ajuda, ajuda adicional com sua codificação das extensões. Tudo bem, então vamos voltar a isso. Então, Oculte o título btn. Clique quando eu vou fazer é direcionar esse elemento de título por seu ID. Então, mais uma vez, cifrão , aspas abertas, aspas simples, parênteses abertos ou outros. E então as aspas e podem ser singulares, podem ser duplicadas. Isso realmente não importa nesta fase, mas em hashtags que eu D dos elementos pontilham. E então estou vendo todas as funções possíveis que eles podem realizar no jQuery. Vou tentar este que diz Toggle. Por isso, diz exibir ou ocultar os elementos. Então alterne. Agora imagine que você deve ler, isso é tudo o que está em JavaScript para ver. Quando esse botão for clicado, verifique se o título é exibido. Se for exibido, oculte-o. Se não tiver desaparecido , mostre. São duas declarações if e isso é um bloco inteiro de texto, como acabei de dizer, ao contrário de quando o botão é clicado. Tudo bem, título e alvo. Simples, certo? Então é isso que o jQuery traz para a mesa que meio que se condensa. Muito do código estaria escrevendo extensivamente. Então, deixe-me voltar para minha página inicial e meu Live Server parou de funcionar. Então, eu sempre posso clicar com o botão direito do mouse e entrar ao vivo ou simplesmente clicar em Go-live no canto inferior direito. E estamos de volta. Aqui está meu novo botão e veja isso. Quando clico nele, ele está alternando. Bom e simples. Veja tudo o que conseguimos através basicamente de três linhas de código. Tudo bem, então você sempre pode monitorar, você tem eventos em abundância, e eles não estão limitados a botões, mas apenas para mostrar todos os eventos em potencial, você pode obter o valor de alguns TA podem diga à aula, certo? Você pode procurar os irmãos. Você pode alterar a classe, remover a classe, e ela tem uma classe ou remover atributos e adicionar atributos, certo, e se, quando ela foi clicada em vez de alternar, eu quisesse adicionar a classe, Eu escolheria e, em seguida, posso especificar a classe. Então, no styles.css, quais classes eu tenho? Eu tenho dp, tenho, deixe-me criar outra classe. Então eu vou dar isso, eu queria criar uma classe chamada dot sub title. Tudo bem? E o que aconteceria com um subtítulo é que leva a curadoria será digamos que greve através pontilhada, apenas algo diferente. E a cor de fundo será preta. E a cor em si, a cor do texto seria branca. Tudo bem, então vamos tentar isso. Então, quando clicado, eu queria adicionar o subtítulo da classe. Então, sou muçulmanos e digo adicionar o subtítulo da classe. E mais uma vez, tentei ser sensível a maiúsculas e minúsculas da melhor forma possível. Então, vamos ver o que isso produziria. Então, voltando, revigorado para mim, claro, todo mundo é legal. Eu sabia que quando faço isso, olhe para isso. Assim como os carrapatos mudam para branco, então algo aconteceu. Então, vou inspecionar o elemento para ver por que tudo não mudou. Então, se eu inspecionar e dar uma olhada, veja a classe disso chegou a ele. Então deixe-me apenas atualizar e fazer isso de novo. Então, na carga inicial, há nossa tag H1, título e tudo mais. Agora, quando eu clicar, você verá que ele mudou. É. Ele colocou no subtítulo, digamos que mudou em tempo real para nós, certo. No entanto, se olharmos para os direitos, veremos que o título ainda está tendo precedência sobre a legenda. Tudo bem, então todos os elementos não obtiveram porque eles ainda estão sendo substituídos ou substituídos pelo título ou pelo elemento de origem CSS. É por isso que a linha pontilhada não apareceu, o bloco não apareceu. Cor azul branca, está lá. Tudo bem, então sim, você pode brincar com ele e ver como você pode modificar o que vai onde e como manipula os diferentes elementos. Mais uma vez, isso é algo que você usa quando precisar. Você pode sentar e fazer botões e fazer com que ele modifique o DOM o dia todo. Eu poderia dizer que quando eles são clicados, eu quero todas as tags p. Todas as tags p para ter a normalidade HTML interna em nossa largura ou altura, ele seria HTML? Então, às vezes até eu tenho que entrar e digitar C, ok, qual melhor se adapta ao que eu gostaria. Tudo bem, então esta é a consulta J, certo? Então esse sou eu vendo quando clico neste botão, o mesmo para esconder intitulado btn, eu queria adicionar essa classe. Então, vamos mudar sobre a alternância. Uma vez que a alternância funcionou perfeitamente. Tudo bem, então ele deve ocultá-lo e ele deve mudar todas as pétalas HTML para dizer que este é texto jQuery. Então atualizou a página I. Quando clico, vemos que a alternância funciona, mas o texto não está mudando. Tudo bem, tudo bem, não há problema. Então isso significa que a vogal HTML, essas são as subscritas, Há mais alguma coisa? Existem textos. Vamos tentar um texto. Então eu volto, atualizo, e isso ainda não funciona. Vejo meu erro. Eu deveria ter as aspas ao redor das tags p. Então, vamos tentar isso mais uma vez. E tudo isso é só para mostrar que você está trabalhando agora, certo? Então, tudo isso é para mostrar que às vezes você só precisa entrar e explorar para encontrar a solução que você precisa, certo? Então, aqui vemos que sempre que queremos selecionar todas as tags de um determinado tipo, precisamos das aspas ao redor. Quando é documento, precisamos disso, tudo bem. Mas quando queremos direcionar um ID específico, precisamos da nossa hashtag. Se quiséssemos direcionar uma classe em particular, como eu queria p, r, eu queria a classe de informação, então será a mesma coisa. Informações sobre pontos, certo? Então, informações de ponto, qualquer coisa que tenha informações. Então vou dizer que isso é para mim, Sean. Tudo bem. Então, estou mudando todas as tags p para dizer isso. Mas qualquer coisa com a classe de informação que eu queria dizer isso é inflamação. Faça isso. Você vê o texto jQuery. Isso é informação. Tudo bem, então há algumas coisas que você pode usar o jQuery para fazer quando se trata de manipulação. Mas, mais uma vez, para mim, é um uso como você precisa de um tipo de biblioteca. E há muito mais nisso que não poderemos explorar em alguns vídeos. Mais uma vez, a prática se torna permanente. 18. Introdução ao Bootstrap 5: Pessoal, bem-vindos de volta. Então, estamos encerrando nosso básico em HTML e CSS. Já demos uma olhada no básico em JavaScript, e demos uma olhada no framework chamado jQuery, que se baseia em cima do B6. Então, da mesma forma que o jQuery foi projetado para reduzir algumas das repetidas tarefas JavaScript no código. É o mesmo com que o Bootstrap, que é o que veremos no, foi projetado para reduzir parte do código CSS repetido que os desenvolvedores tendem a fazer toda vez que criam um transtorno, eles tendem a fazer essas coisas. Então, o que os desenvolvedores do Bootstrap fizeram foi compilado todas essas funções CSS básicas em um arquivo. E então eles apenas fornecem para você gratuitamente. E você pode usá-lo à vontade. Por isso, é excelente que documentado. Você pode obter a guarda deles para este site acessando bootstrap.com. E a versão mais recente é a versão 5, 1, 0. Mas então eles são usados principalmente um que você provavelmente veria na internet não. Seria 4,6. Uma vez que esse existe há muito mais tempo e trouxe ao barco algumas mudanças significativas desde a versão anterior, que era a versão três. Mas vamos nos concentrar na versão cinco neste momento. E a instalação é bem simples. É o mesmo conceito. Você pode integrar o arquivo em seu sistema local ou ao conjunto de ativos do site. Ou você pode usar apenas a CDN. Então, eles realmente fornecem os links CDN que você teria um link CSS CDN, e eles fornecem um arquivo JavaScript, link CDN. Então, mais uma vez, se você apenas destacar esse URL nesse link CDN e navegar até lá, você realmente veria esse arquivo inteiro. E esta é a versão minificada. Se eu pegar o Min antigo e olhar para o CSS e ele parecer um pouco mais legível. E você vê que é o mesmo tipo de objetivo que estamos escrevendo até este ponto aqui. Apenas mais algumas coisas e um pouco mais de detalhes porque eles cobriram um grande número de cenários praticamente. Tudo bem. Mas para essa situação, vamos usar o link da CDN para integrá-lo nosso site que estamos construindo até este ponto. Então, vamos começar copiando esse URL para que eu possa simplesmente copiar aqui. E depois vou para o arquivo do site e depois o desgaste nos bits de índice. Então, o que vamos fazer é colocá-lo onde sabemos que colocamos nossos arquivos CSS. Então eu tenho meu CSS local, o que ainda é importante porque posso fazer o que eu quiser. Então eu escrevia minha fantasia para meus estilos personalizados e definia meu próprio CSS. Mas eu gostaria de incluir o arquivo bootstrap para o estilo geral. Tudo bem, então novamente eles dirão folha de estilo link rel que passou por disparidade no relvado é igual a. E oh, na verdade, acabei de perceber que temos todo o link. Então deixe-me colar desculpas. Não percebi que conseguimos todo o link. Achei que eles fossem apenas o URL. Então você vê aqui que é a mesma tag de link, apenas um pouco maior. Então, temos que a HRF é igual a essa referência CDN, certo? Mais uma vez, se você não tiver ou não tiver conexão de internet consistente durante a criação e o teste, você sempre pode obter esse arquivo, salvá-lo localmente e seguir o mesmo procedimento como o que fizemos por nós ou folha de dados de baixo custo. Então você obtém a CDN, você tem a folha de estilo rel, e então temos algumas outras coisas desse sinalizador de integridade, que basicamente usa como string codificada para nos ajudar ou ajudar os bairros ou para caminhe a beira, fora do arquivo para se certificar de que este é um cinco legítimo, porque há pessoas lá que colocarão arquivos maliciosos em servidores CDN e, em seguida, anunciar, Oh, sim, você obtendo o Arquivo de bootstrap Javascript , mas o código de integridade não corresponde ao dado pelo distribuidor original. Então, seria convidado. Então é isso que essa verificação de integridade é o tipo disso e a origem cruzada significa que ela pode ser acessada a partir de diferentes recursos são atravessados pela Internet. Portanto, não há necessidade de mudar isso, o que quer que eles nos deram, nós usamos certo? E eles geralmente são importantes para links CDN, é por isso que eles se certificaram de nos dar. Então, o outro seria esse pacote, os arquivos JavaScript, para que possamos copiar isso também. E sei que estou recebendo todo o roteiro. Portanto, não preciso escrever meu próprio arquivo de script, então ainda tenho a CDN para jQuery comentou tudo o que farei é incluir esse arquivo JavaScript acima do jQuery, por exemplo. Então esse arquivo JavaScript lá, não há problema. E então temos outros scripts. Então, a ordem, mais uma vez, sempre importa se você tiver algo que depende do jQuery, jQuery precisa prosseguir com isso. Então eu estou dizendo que porque nas versões anteriores do Bootstrap, bootstrap 4, na verdade tem uma dependência jQuery é se você olhar o pacote ou as partes JavaScript a serem inseridas, você veria o arquivo jQuery sendo referenciado acima. O arquivo bootstrap. Isso porque o Bootstrap JS tinha dependências do arquivo jQuery. Da mesma forma que nosso arquivo de script tem dependências do arquivo jQuery. Então jQuery tem que vir primeiro, depois o nosso. No Bootstrap 5, no entanto, eles se afastaram do jQuery para um ponto que só precisam de um arquivo JavaScript. E isso é tudo o que precisamos. Então ele pode vir antes do jQuery. Agora que fizemos todas essas inclusões, vamos dar uma olhada. Não vou mais alterar o código. Em seguida, a divisão em folhas de estilo e o script. E eu vou apenas ir até a página de índice para que possamos dar uma olhada nela. E se você com muito cuidado, notaria pequenas diferenças com os botões. Deixe os links diferentes apenas colocando esse arquivo CSS, certas coisas mudaram. Tudo bem, então, mais uma vez, esse arquivo CSS tem alguns estilos que cobrem uma ampla gama de coisas que têm alguns textos padrão que realmente boas fontes padrão preferem ter algumas cores padrão são realmente boas. E só colocando o Bootstrap, é um divisor de jogo fora do bastão. Então, se eu comparar em casa com os dedos dos pés de barco, então você vai ver, ok, está de volta ao nosso estilo regular. Então, é claro, há outro refinamento sobre a OMS que esta página parece em comparação com as outras. Enquanto ainda estamos no tópico do Bootstrap, também vamos começar a dar uma olhada no General Lee, certo? Então você teria percebido que a página está esticando o conteúdo na página, em vez disso, está nos esticando esquerda e o mais longe possível. Isso é claramente indicado por um todo disparado isso o que era esse marrom, mas gemeu, OMS muito através do ponto da página se estende porque tudo o que fizemos foi definir este texto. Mas H tags, p tags, uma div, certas tags que sempre irão o mais longe possível em qualquer contêiner em que estejam. Não, esses são os contêineres de palavras-chave porque o que acontece é que nenhum transtorno de você realmente continuar a menos que eles tenham conteúdo preenchendo até a borda. Mas, de um modo geral, eles deixam uma pequena margem para a esquerda e uma pequena margem para a direita. Mas eu não me estendo extremamente esquerda e para a direita fora de determinados sites, certo? Então, com o Bootstrap, é muito fácil realizar algo assim. Então, vamos olhar para um novo elemento e é chamado de div. Uma div realmente não significa nada, mas eu só penso nisso como divisor, certo? Então, uma div seria como caixa. Então, o div geralmente se estende o mais à esquerda, mais à direita possível. O bom disso, porém, é que você pode realmente ditar o comprimento e a largura, a altura e a largura de uma div ou a altura geralmente é determinada pelo conteúdo que você coloque nele em vez disso, e a largura que você pode determinar isso. E então você pode usar esses divs ou caixas de conteúdo e enfiá-los um ao lado do outro, debaixo um do outro e manipular como deseja que os dados sejam exibidos. modo geral, com layouts de sites, você teria uma div, chamaria um contêiner ou um invólucro do qual tudo no pH geralmente entra. Então, vamos chamar isso de um div id é igual ao contêiner. Neste ponto é muito, muito importante usar IDs. Funcionará, mas é muito mais fácil de ler. Quando você usa IDs, o novo mero DFS então quando você não usa, porque quando você tem divs em divs em dibs em desenvolvedores, desenvolvedores e assim por diante. Agora você não sabe qual div é para o que o ID pode ajudá-lo a dizer qual vivemos é para a água, certo? Portanto, dentro do contêiner, você geralmente tem uma seção para a barra de navegação. Então, vou dizer que div id é igual a legal. E eu disse mais fácil e então eu tenho div, id é igual a causa embaixo da barra de navegação, geralmente eles têm o conteúdo, então eu vou apenas dizer conteúdo, certo? E então talvez eu tivesse outro que diz div, id é igual a Rodapé. É aí que eu coloquei que sou uma informação de direitos autorais , esse tipo de coisa. Então, de um modo geral, um site ou uma página da Web tem três seções. O NAV, o conteúdo e o rodapé. Claro, ele pode adicionar mais porque, quando você quiser, lado a lado, usando o conteúdo ou colunas lado a lado no conteúdo, você pode adicionar mais detalhes conforme necessário. Mas, por enquanto, vamos mantê-lo muito simples. Então eu vou pegar meu navbar e colocar o interior da div chamada nav. E então eu vou pegar tudo o que supostamente foi citando conteúdo sem aspas. Vou pegar tudo isso e colocar dentro da div de conteúdo, certo? Nenhum recuo ajuda a legibilidade também. Então eu sempre, você sempre vai me ver recuando meu código para garantir que eu possa ver onde um começa e onde o que foi colocado dentro dele pára. Tudo bem, então div para o nav. Links de navegação. Tudo bem, deixe-me colocá-los lado a lado. Então eu tenho meus links de navegação e, em seguida, tenho título e todo o conteúdo dentro do conteúdo. E então aqui eu vou dizer que este é o rodapé. Certo? Agora, quando olho para trás para a página, nada muda. Leia, tudo parece o mesmo. Então as divs realmente não, você não coloca o xilema magicamente obtém estrutura. É realmente para sua estruturação e sua própria habilidade de manipulação, certo? Então, se eu quisesse que o contêiner não fosse tão largo quanto o pH, eu poderia facilmente ver o estilo e já o fizemos. Por que não usamos a folha de estilos em linha porque a estrutura terá que se estender em várias páginas e seria ineficiente usar o guia de estilo diretamente aqui, mas nós vai estar olhando para isso é suficiente para entender, para exibir o que acontece quando eu digo a 800 pixels. Por 800 pixels significaria que seja qual for o tamanho da tela ou sua resolução de cada vez, é bom levar 800 pixels da esquerda para a direita disso. E é por isso que você vê aquela espinha dorsal marrom cortando. Então, para mim, é aqui que são 100 pixels paradas na tela que estou usando. Tudo bem? Ou se você não quisesse, isso só poderia dizer 80%, certo. Portanto, porcentagem significa que eu não sei o tamanho da tela. E é aqui que você começa a falar sobre web design responsivo, qual o Bootstrap tem total suporte. Quando começar toda a porcentagem de Humboldt, significa qualquer tamanho de tela que eu esteja, vou tentar ocupar 80% disso. Portanto, 80% na minha tela podem parecer diferentes de 80% na tela. O que você sempre será 80% em relação ao tamanho da tela. Agora, a próxima coisa é que você gostaria de uma margem para a esquerda. E, mais uma vez, essas são coisas que os desenvolvedores da Web sempre fazem quando começam a projetar sites. Eles sempre fazem esses pequenos truques para acertar a estrutura e assim por diante. E então isso está entre muito tempo gasto refazendo essa atividade porque o número teria que fazer isso, um estilo, pelo menos na minha folha de estilos e, em seguida, garantir que ela reflita em todas as páginas. Não é bom sobre o Bootstrap é que ele vem com aulas predefinidas. Posso dizer que kras é igual a e vou dizer contêiner. Tudo bem? Não, contêiner. Você pode encontrar documentação para contêiner na documentação do Bootstrap. Tudo bem, então, se você olhar nos documentos e, em seguida, verá começar inicialmente esperando configurar o adicional. Você é basicamente velho corpo helloworld, todas essas coisas maravilhosas. Mas no, deixe-me ver se consigo encontrá-lo agora. E vou mostrar a vocês minha tentativa de encontrar isso para que você possa encontrar layout e contêineres. Lá vamos nós. E ter uma classe chamada container definiria uma largura máxima em cada ponto de interrupção responsivo, seja, apenas usando o contêiner, ele avaliará o tamanho da tela e linha central automaticamente e margens no que você colocar dentro da div que você disse que é o contêiner, certo? E eles dão exemplos de código. Então, diferentes tamanhos de tela novamente dizem que é um contêiner para nossa tela pequena diz que um contêiner para esse contêiner para isso. Mas sem especificar o tamanho, será apenas um contêiner em toda a linha? Não, apenas adicionando contêiner, veja o que acontece. Acho que isso provavelmente é mais como 60 ou 70% da tela. O que estou recebendo margens de ambos os lados apenas fazendo referência àquela classe chamada container. Tudo bem, então como para o meu título, cada título, eu vou tirar isso. Não deixo meu estilo personalizado que meu ruibarbo cresça mais. Eu quero usar um estilo Bootstrap. Então vou dizer que a classe é igual a, e acho que eles têm um chamado jumbotron. E só fazendo isso, oh, bem, nada aconteceu. E acho que isso é porque jumbotron é realmente da versão 4.6 enquanto estamos na versão 5. Então, meu botão, ainda estou vivendo no passado, sem problema. Mas, mais uma vez, é por isso que a documentação é tão legal. Ele sempre pode ir aqui e ver quais são suas opções. Então, certo. Não, estou no documento. Estou olhando para a tipografia sobre o conteúdo e estou vendo as diferentes classes de exibição. Então, digamos que exiba um. Essa é a classe que vou usar insert of jumbotron. Então, digamos que a classe seja igual a exibir um. Fui para o balde. Você pode ver que é significativamente maior do que era antes, certo? Assim, você sempre pode ir e voltar para a documentação e ver quais opções estão brincando com eles e ver o que você pode realizar. Agora, o bootstrap é mais uma vez grande framework, então é bom ter uma boa base no CSS, pelo menos apreciar todos os seletores foram chamados de valores funcionam. Que tipo de elementos em HTML podem levar? Que tipo de estilos são um pouco de compreensão geral disso. E então, com o Bootstrap, você pode construir esse conhecimento. E, na verdade, apenas brinque se você precisar realizar algo e seguir o que é uma documentação e você olha por vezes eu literalmente tenho uma ideia e eu não sei como realizá-la. Eu vou aqui e clico até ver algo que seja útil. Então, vamos falar sobre os botões para que eu não queira aborrecê-lo demais, mas vamos ver os botões e o link. E se quiséssemos modificá-los para ver que ele foi modificado DEAP por padrão. Mas, com o Bootstrap, temos estilos de botões diferentes que podemos aplicar. Então o botão parece, vou dizer feio agora. E se eu quisesse fazer parecer um pouco mais bonito? Se eu quisesse um botão vermelho e a primeira coisa que você diz BTN, então você diz BTN dash, e então que tipo do que você quer. Então eles têm esquemas de cores diferentes, tipo de dor embutida e apenas vão para componentes, vá para Botões e você verá as diferentes opções de botões. Tudo o que você precisa fazer, classe é igual a btn e btn dash esse tipo de que nuance você quer. Um botão azul primário. Isso é secundário, então existe perigo, et cetera, et cetera. Então, vou tentar brincar com isso. Então, classe primária, fui para este. Vamos ver o perigo. Quero nossos botões vermelhos, é perigo. E eu quero que este seja um botão escuro, certo? Não há motivo específico. Só estou brincando com minhas opções. Então, quando vou, vejo que este é primário, este é um perigo, e este é escuro. Não é fácil, certo? Se eu quisesse mudar escuro para verde, eu só mudo para o sucesso. Tudo bem, então, mais uma vez, isso é algo que você pode não se comprometer com a memória. Faço isso há anos. Estou confortável, mas ainda acabo na documentação e não tenho certeza. Então isso é algo que você tem que brincar e explorar. Então, se eu quisesse que meu link, que é essa tag âncora, parecesse com um botão, eu posso realmente fazer a mesma coisa. Na verdade, posso ver btn, btn dash. E digamos que eu queria que este fosse secundário, certo? Então isso significa que deve ser um tom de verde. Lá vamos nós. A Amazon não é um tom de cinza. Então, alguém que vem ao seu site nunca olharia para isso. Um ruído, apenas uma etiqueta âncora, preta na barra de navegação. É claramente apenas um monte de etiquetas de âncora, mas isso também é uma etiqueta de âncora e estes são botões e a carga da mesma maneira. E se eu quiser que um botão pareça uma etiqueta âncora, posso dizer o link BTN dash. E olhe para isso. Nenhum clique me parece com uma tag âncora, então só estou mostrando que, com um esforço mínimo, você pode manipular seu conteúdo facilmente usando o Bootstrap. Apenas colocando a classe de contêiner nesta div de contêineres. Ele transformou a aparência apenas colocando o CSS, transforma a aparência e a sensação. Então, antes de irmos, vou tentar aplicar um bom estilo aos condutores. Então, em primeiro lugar, todas as páginas devem ter a mesma estrutura. Então, o que vou fazer é copiar as novas divs que criei e vou colá-las em todas as páginas. E então, dentro da área de conteúdo, vou substituir esse conteúdo pelo que estava na praia. Então eu já tenho o nav, então não preciso repetir isso com os botões. Posso remover o nav na página do barco, mas tudo o que estava naquele barco pij, eu não vou cortar e vou colá-lo dentro da área de conteúdo. Tudo bem, mais uma vez, lembre-se de recuar o tempo todo para que você possa ver onde o conteúdo começa e pára. E vou fazer a mesma coisa com nossa página de contato. Então cole, remova a área de navegação e, em seguida, marque esse conteúdo capturado e cole dentro da div de conteúdo. Tudo bem, agora todo mundo tem a mesma estrutura de página. No entanto, quando olhamos para ele, não vemos diferença. Literalmente, sem diferença. Tudo ainda parece o mesmo. A única diferença é que não, há uma área de rodapé. Tudo bem. Como fazemos com que todos eles pareçam iguais em termos de nó, uma aparência tangível e se sentir bem, todos eles precisam ter o arquivo CSS para um. Então, vamos colocar esse arquivo CSS e a página de boletins, colocá-lo na página Fale Conosco. Lá vamos nós. E, claro, precisamos do nosso arquivo JavaScript. Então, vou copiar essa referência das escrituras. Portanto, toda página que precisa fazer referência ao bootstrap precisa ter esses dois arquivos sendo referenciados. Tudo bem, então depois de fazermos tudo isso, se olharmos para o nosso pH, não vemos, o contêiner está funcionando. Tudo bem, e vemos que a fonte parece diferente. E Navbar parece diferente. E então até o formulário parece um pouco diferente, parece um pouco mais limpo. Tudo bem, então o bootstrap tem algumas coisas legais que são formulários? Existem algumas cruzes legais que você pode usar até agora. Então é assim que sua forma pode ser potencialmente com o pairar e todas essas coisas maravilhosas. É tão fácil quanto ver a nossa classe, enquanto uma classe é igual ao controle de forma. Então, vou dizer que as probabilidades brutas são rótulo de forma igual para o rótulo e Krazy controla o controle. Então, vamos tentar isso. Então, entre em contato conosco, vamos dizer que o sistema operacional é igual ao controle de formulário. E vou fazer isso em todos os controles de formulário em primeiro lugar. E então você só vê a diferença automaticamente olha para isso. Tudo bem, parece muito melhor na minha opinião. E então temos esse botão feio. Deixe-me este barco feio e bonito então a classe é igual a btn e eu costumo enviar botões que eu gosto verde ou algo assim para indicar M e você está pronto para ir. Então, comece-me com esse sucesso. Tudo bem, e com um esforço mínimo, você estilizou nosso formulário se quiséssemos que o botão fosse maior ou pesquisasse como segundos em que o bloco btn, certo, então ele vai esticar para a direita na tabela de páginas. Ou isso não funcionou. Deixe-me verificar minha documentação. E na documentação, diz que precisamos de botões de bloqueio. A sintaxe precisa se parecer com isso. Tudo bem, mais uma vez, estou vivendo no passado como Bootstrap 4, então não há problema em verificar a documentação e seguir em frente. Tudo bem, então vamos fazer isso com nossos botões. Então, eu só, literalmente, apenas copiei isso do site Bootstrap, mas obviamente não preciso de todo esse código. Tudo o que preciso é do meu botão de entrada dentro desta área. E então preciso ter certeza de que estou usando as mesmas aulas. Então, se eu voltar para minha consulta de envio, é um bloco de BTN, posso remover o excesso de código. Então, às vezes, é isso que eu faço. Desde que eu estive nisso. Eu só vou e recebo a amostra adaptada para o que eu preciso e depois removo o excesso. E lá vamos nós, temos nosso botão de bloqueio. Então, apenas para mostrar como é fácil manipular sua página da Web. Depois de examinar a documentação no Bootstrap, você tem um bom entendimento de todo o CSS no trabalho de classes. E então você pode aplicar o código ao seu arquivo HTML de acordo. Agora, a última coisa que eu queria salientar antes de sairmos é a raposa que, apesar de termos Bootstrap, e Bootstrap claramente tem o seu próprio, vamos dizer citar e citar agenda sem aspas para o que o O pH deve parecer. Você notaria que nossos estilos ainda são meio que prevalecentes. Então, mais uma vez, a ordem é importante quando se trata de seus arquivos, ou seja, CSS e seus arquivos de script, certo? Mesmo colocando o Bootstrap em primeiro lugar, sempre podemos substituir certos estilos usando nosso próprio arquivo CSS. Então, se o Bootstrap não tiver um botão roxo ou você não gosta de cinzas, certo tom de uma cor que o Bootstrap usa. Você sempre pode ir para sua classe de pilha, C, seja qual for a classe que você queira abordar e dizer que se eu quisesse abordar esse BTN, posso apenas dizer dot btn e depois colocar meus próprios estilos. E então ele realmente substituiria o estilo BTN de ponto dentro do arquivo bootstrap. Portanto, é fácil colocar em sua própria agenda ao lado do arquivo bootstrap. Então essa é outra introdução rápida e suja ao Bootstrap. À medida que avançamos e nossas necessidades se tornam maiores, veremos como o Bootstrap realmente nos ajuda como uma ferramenta de produtividade para superar certas tarefas básicas em termos de design de interface do usuário e começar. Então, depois disso, veremos como podemos publicar nosso site no GitHub e, em seguida, por extensão na Internet. 19. Adicione site ao GitHub: Certo pessoal, então, neste momento, analisamos como podemos desenvolver um conjunto básico da web, estático, mas básico e usando HTML, CSS e JavaScript. Então você também deu uma olhada nas estruturas em JavaScript e CSS na forma de jQuery e Bootstrap. Então, neste ponto, você conhece o básico, você tem uma compreensão geral de como criar novos arquivos para vinculá-los. Mantenha o link para outros sites. Hotel colocando suas imagens estilo para todas essas coisas. A única maneira real de crescer é se você trabalhar sozinho e explorar. Portanto, isso é primordial para o seu desenvolvimento como desenvolvedor web. Agora estamos dando um passo frente e estamos olhando para o GitHub. Saiba que o github é uma ferramenta de código aberto usada por milhões de pessoas, nossa, o mundo. E eles o usam realmente para armazenar seus projetos, bem como os colaboradores com outros desenvolvedores. Portanto, ele cria uma boa plataforma para você colocar seu código para realmente rastrear todas as alterações que você está fazendo no seu código. Porque o que acontece é que você pode vir amanhã a fazer uma mudança e então você sente falta de alguma coisa, e então você se lembra do que mudou ou por que mudou. E é difícil desfazer tudo. Então, boas ferramentas de gerenciamento de controle de fonte e trabalho como o GitHub, porque existem outras. Mas esses tipos de ferramentas ajudam você a acompanhar todas as mudanças que estão sendo feitas por você e seus colegas membros da equipe em um projeto específico e todo o envio é muito fácil. Em primeiro lugar, você vai para GitHub.com, você coloca seu endereço de e-mail, você se inscreve. Eu acho que você provavelmente tem que verificar seus cones e outras coisas, mas uma vez que você faz isso, você tem uma conta , é gratuita pelo menos em um nível básico é gratuito e é fácil obter começou. Então, nesta lição, o que vamos fazer é colocar nosso projeto web no GitHub. E então vamos apenas explorar e ainda vai whoa, isso nos ajuda a manter o controle de onde as mudanças à medida que avançamos. Agora esta é minha conta do GitHub, e você pode ver que ela está bastante ativa em alguns projetos e está aberta. Você pode pular no meu perfil se precisar e olhar para qualquer coisa. Tenho alunos de todas as outras pessoas colaborando com e posso ver todas as atualizações acontecendo em tempo real em tudo. Mas, por enquanto, vamos nos concentrar na criação de um novo repositório para o nosso site. Então, basta clicar nesse novo botão, criar um novo repositório. Vou dizer site de teste. Tudo bem. Você pode nomear meu novo transtorno, seja lá o que for, é apenas um contêiner é só ver qual é o nome do projeto. Deixe-me criar um contêiner com esse nome para este projeto, você pode colocar uma descrição, tudo bem, e você pode torná-lo público ou privado. Vou fazer meu próprio privado. Mas se você quiser compartilhá-lo com outras porque certas pessoas ou empresas que gostariam de contratar você realmente adoram ver que você terá um perfil ativo do GitHub. Então você sabe que tem um projeto, trabalha nele, você o coloca no GitHub. Você pode torná-lo público e compartilhar facilmente esse URL com alguém e quem sabe, você pode acabar ajudando outras pessoas com seu código. Para uma lei mais privada, se você estiver trabalhando em algo sério, todos gostariam de torná-lo privado para que não seja publicamente acessível às pessoas. Estou fazendo meu próprio privado, mas sinta-se à vontade para torná-lo público para que você possa mostrar seus amigos e sua família enquanto avança. Então, depois de escolher as opções de visibilidade, você realmente não precisa fazer mais nada, mas você pode clicar em Criar Repositório. Saiba quando o repositório for criado, você obtém esse espaço de teste. Ao contrário do ácido, novamente, esse URL que eles podem compartilhar com as pessoas. Se for público, eles podem navegar bem se estiver espalhado, mas você precisa convidá-los especialmente para vê-lo. Se você quiser. Existem várias maneiras de obter seu código da sua máquina para o GitHub. Um deles, você pode ir em frente e fazê-lo por uma linha de comando e o tipo de manualmente, você pode enviar um repositório existente, ou seja, se você o tivesse em outro lugar, R e outro código aberto plataforma ou plataforma de controle de origem em vez disso, você também pode simplesmente copiá-la. E então você pode importar de algo que não pode relacioná-lo. Então GitHub, Git é o protocolo, get é a tecnologia por trás do GitHub. E você tem outros tipos de tecnologias que fornecem serviços semelhantes, como pratas no curral e Team Foundation Server. Tudo bem, o que estamos usando. Então, com o Visual Studio Code, é muito fácil, pelo menos em tempos mais recentes, porque você pode simplesmente copiar esse URL e depois ir para o Visual Studio Code e informá-lo que este é o seu Repositório Git. Fora disso , se você não estiver usando o Visual Studio Code, também poderá usar a área de trabalho. Assim, você pode clicar em Configurar na área de trabalho e isso levaria você a baixar a ferramenta de desktop se você ainda não a tiver. Na verdade, tenho isso. E, na verdade, parece algo assim. Então este é outro projeto que estou olhando agora. Mas o que ele faz, me dá essa boa interface de usuário. Não preciso digitar nenhum comando ou nada. Tenho uma interface. E posso ver todas as alterações pendentes e posso confirmar, o que significa que posso enviar da minha máquina para o GitHub à vontade. Eu posso puxar para baixo as mudanças. Então, quando você está trabalhando em uma equipe, digamos que vomite, você estava construindo este site. Uma pessoa trabalhou na página inicial em outra e na outra, no contato. Ou talvez uma pessoa que deveria integrar bootstrap ou baixar os arquivos Bootstrap e colocar no projeto e não o comprometeu. E você precisa dele para continuar seu trabalho, então você pode simplesmente clicar em puxar e ele automaticamente, automaticamente, ir e obter qualquer coisa nova no GitHub que você ainda não tem em sua máquina e atualize automaticamente seus arquivos na máquina. Portanto, é uma ótima maneira de se manter em sincronia novamente com os membros da sua equipe. Então, vamos ir em frente e pegar este site do nosso computador e entrar GitHub pelo menos agora para fins Baco, já que somos o único desenvolvedor no projeto, certo? Então, vamos voltar ao Visual Studio Code. Vamos clicar nesta guia Controle de código-fonte aqui. Então, exploramos a pesquisa e o controle de origem. E o que faremos é inicializar o repositório. Posso ser solicitado que você precise instalar o Git localmente em sua máquina. Porque o que acontece é que git é um controle de monitoramento de fonte distribuído, o que significa que você terá seu próprio controle de gerenciamento de origem em sua máquina, mas você também pode sincronizar com o nosso repositório remoto. E se você encontrar 510 alterações em sua máquina e elas mantiverem cones mais curtos quando você tiver conexão com a internet, poderá sincronizar com o controle remoto. E, na verdade, obteria todos os pontos de verificação históricos que você tem em sua máquina e sincronizaria. Então esse é o polar do kit. Então, quando clicamos nisso e dizemos inicializar repositório, você precisa colocar uma mensagem. Então eu sou mensagem para os assentos da Casa e todos andaram com esses chicanos ou ambos. Então vou dizer commit inicial, certo? Você vai me ouvir dizer frango incompetente de forma intercambiável porque usei dois Team Foundation Server onde a nomenclatura veria check-in, o que eles são realmente os mesmos coisa. Então, depois disso, fui a esse carrapato que diz commit. E então só me perguntará saber que Steve muda e ensina as mudanças. Você gostaria de encenar e depois compromete e eu vou dizer sim, vá em frente. E depois disso, ele criou o repositório local. Então, se eu olhar para trás no Explorador de Arquivos, se eu fizer alguma alteração nos arquivos aqui, então ele começará automaticamente a caminhar para dizer, ok, a página do barco foi modificada e Na verdade, posso manter mudanças constantes. Posso abrir as alterações. Posso ver exatamente o que foi modificado entre os dois arquivos. Não foi uma modificação significativa, mas digamos que eu tenha colocado em um novo bloco de texto. Tudo bem, e então eu digo, ok, deixe-me abrir as mudanças, então ele vai me mostrar que esta linha foi modificada. Esse é um novo texto. Então é isso que a fonte controlada traz para essa equação. Então, vou remover o excesso. Isso realmente não importa. O que eu quero saber, porém, é sincronizá-lo com o que está na Internet ou com o GitHub, certo? Então, clicando nessas três setas, posso rolar para baixo até essa parte que diz remoto e, em seguida, adicionar controle remoto. E diz adicionar controle remoto do GitHub, certo? Então eu tenho duas opções. Posso clicar nisso ou posso simplesmente voltar para o meu repositório do GitHub. Obtenha este link, basta copiar isso. E, em seguida, volte para o Visual Studio Code desde que o URL, pressione Enter, para a direita e, em seguida, remova Nim. De um modo geral, você verá as pessoas chamarem a primeira origem remota ou mesquita ou algo que eu apenas chamo de origem. Pressione Enter e, em seguida, não, está me solicitando. Gostaria de executar periodicamente git fetch? Isso significa o que eu gosto de monitorar periodicamente o repositório de relatórios em busca de possíveis alterações. Então, o Fetch veria que você tem essas alterações pendentes, o que significa que elas são essas alterações no GitHub, mas você não as tem em sua máquina, então pull me permitiria obtê-las. Então, acabamos de ver que um pool inteiro funcionaria na versão para desktop. Então, vou dizer Sim, gostaria de fazer buscas periódicas, certo? Agora, depois de fazer isso, posso saber empurrar para o repositório remoto é que posso clicar com o botão direito do mouse e dizer puxar, empurrar ou não clicar radicalmente nos três pontos. Eu posso puxar, posso fazer empurrar. E se eu vir aqui como um puxão, posso fazer uma sincronização. Então, ele enviaria automaticamente o que há de novo de mim para o repositório e plu o que há de novo de lá para mim, certo? Então, ele automaticamente faz essas duas coisas. Então, se eu disser Sync, diria que não tenho upstream. Você gostaria de publicar este ramo, eu direi tudo bem. Então, é só que um gueto estava vazio, mas eu tenho conteúdo. Você gostaria de enviar o conteúdo, apenas uma confirmação. Então, depois disso, se eu atualizar minha página do GitHub, não, vejo todos os meus arquivos no GitHub neste repositório, certo? Mais uma vez, isso está disponível para visualização pública, se necessário. Mas se não, tudo bem. Mas você pode ver todos os seus arquivos e tudo mais. Então vamos dizer não, que eu criei uma nova página. Então eu criei uma nova página e chamo essa postagem. Bom trabalho. HTML de ponto de carga útil, certo? Cada uma página, tudo bem, isso é tudo o que esta página vai ter. Não há problema. Então, neste ponto, você verá que está destacado em verde. Significa que está comprometido, o que significa que é novo, certo? Então, se eu clicar no controle de origem, haverá mudanças de S. Posso inserir minha mensagem e vamos modificá-la uma das páginas, qualquer alteração ou alteração ou alterar o conteúdo ou para o conteúdo existente, adicionando algo novo. Então, se eu adicionei mais uma linha, exiba a imagem nas velocidades orbitais, essa é uma mudança que você verá sendo rastreada. Então, ele está sempre rastreando as alterações que você está fazendo para que você possa ter responsabilidade porque talvez 23 versões na linha, algo pára de funcionar. Ele pode realmente reverter para esse ponto no tempo antes de você fazer essa alteração. Para ver, esta é a versão da qual fui continuar trabalhando. Então, vamos cometer isso localmente. Então, vou clicar no tick. Não há estágio em que as edições Fan diga sim ou posso dizer sempre apenas para me livrar dessa mensagem e depois saber que ela foi comprometida localmente. Eu queria no controle remoto, basta fazer uma sincronização, alguns sincronizando todos os commits entre os dois lados. E depois disso, pequenas barras azuis não. Se eu voltar ao meu repositório e atualizar, começarei a ver as alterações, certo? Então, 20 segundos atrás, esse commit foi enviado. Tudo bem, então se eu clicar em adicionar mais arquivos nele, então me mostra uma sinopse de todas as alterações feitas no arquivo existente, bem como o que foi adicionado. Então, mais uma vez, é uma ferramenta muito poderosa. Você pode convidar colaboradores. Se você e seus amigos ou colegas precisarem trabalhar em algo juntos, ele pode acessar as configurações ou o repositório e ir para Gerenciar acesso. E então você precisa confirmar sua senha. Mas depois de fazer isso, você poderá convidar um colaborador. Então, se você tem um colega que também está no GitHub e quer trabalhar com ele neste projeto em particular, basta ir em frente e colocar qualquer uma dessas opções, encontrá-las, enviar o convite se eles aceitarem, então esse repositório também fará parte de seu exército fora dos repositórios. Eles podem fazer commits e empurrar e puxar exatamente como você naquele momento. Então, isso é tudo o que o GitHub funciona como uma ferramenta de colaboração. Agora, depois disso, vou mostrar como isso também nos ajuda a publicar nosso site silenciosamente e de graça usando outra plataforma chamada Netlify. 20. Crie um site público com Netlify: Tudo bem pessoal, bem-vindos de volta. Então, estamos passando para o próximo desafio, que é publicar ou website na internet para o mundo ver. Então, o que vamos fazer isso usando isso para a Netlify final é uma plataforma maravilhosamente estável que nos permite fazer algumas coisas gratuitamente. E acho que é um ótimo começo para ver como seu trabalho manual pode ser facilmente colocado na Internet e publicado com um esforço mínimo. A primeira coisa vai para Netlify.com. E então você gostaria de se inscrever se ainda não tiver um oponente, o que neste momento, se você não tiver, isso seria compreensível. Eu já faço é que posso fazer login na minha conta. E você vê aqui que eu tenho quantos sites entre projetos pessoais e projetos de alunos, mas eu tenho uma série de projetos inicialmente em casa e ele construiu minutos. Você tem quantos membros se quiser colaborar. E então, é claro, por pouco, um pouco de dinheiro, posso começar a adicionar recursos diferentes ao seu exército de seu conjunto de ferramentas. Então, vamos pular para um novo site de obter CEO fácil. Esse é um novo site do bom. Então, acabamos de examinar o Get Hub e, em seguida, eles permitem a implantação contínua do GitHub, GitHub e Bitbucket. Portanto, a implantação contínua significa que estou fazendo alterações no site e estou levando-o para os nucleófilos do Github monitorando esse repositório do GitHub e automaticamente indo em frente e publicando-o. Então, na verdade, reduz a quantidade de tempo entre fazer uma alteração e ter que atualizar o site. Tudo o que você precisa fazer é verificá-lo no GitHub e a Netlify fará o resto. Portanto, para a publicação inicial, é claro que precisamos conectá-lo ao GitHub. Então, uma vez que eu fizer isso, ele me autorizará porque já me conhece, mas você pode ter que fazer alguns outros passos. Então eu posso escolher qual desses repositórios. E estou tentando lembrar o que chamei de meu e foram sites de teste. Eu posso simplesmente ir em frente e apertar ramo flip side de teste para implantar. Deixamos o mestre e deixamos tudo como está e implantamos o site. Agora lembre-se, desde o primeiro dia que eu disse, vai tornar sua vida muito mais fácil quando você quiser usar letras minúsculas em todos os seus nomes de arquivos e usar o índice de palavras para nomear seu primeiro discurso, seja qual for a sua página inicial precisa ser sempre deve ser índice. Aqui está a exposição a. A Netlify procurará automaticamente o index.html ou o índice. Bem, ele está hospedando sites estáticos, então index.html, se seu arquivo não for nomeado índice ou você tiver maiúsculas, isso reduz a probabilidade de ser uma implantação bem-sucedida no primeiro objetivo. Então, seguir as melhores práticas estão realmente lá. Ou o conceito de seguir as melhores práticas está realmente lá para protegê-lo e economizar tempo e esforços de depuração de algo que poderia ter sido evitado apenas pela nomeação adequada convenções, certo? Então, vou em frente e clique em Implantar site. E isso pode levar alguns minutos. E uma vez feito isso e talvez você precise atualizar a página algumas vezes apenas para garantir que ela ainda não tenha sido publicada, Antony, ela ainda está sendo implantada. Mas depois de implantado, você verá que você tem um URL. Eles geraram um URL aleatório para você, ou seja, nem B. Você sempre pode configurar seu domínio personalizado. que ponto você teria que comprar um domínio, ponto WW, você sabe, meu name.com, esse tipo de domínio que você terá que realmente comprar e você pode comprar segurança também, o quê? graça? Você tem um site que está na Internet. Então, se eu clicar nesse URL, ele realmente vai ao meu site protegido por HTTPS. E eu posso navegar, certo? E tudo o que eu tinha no arquivo web, nos arquivos CSS, nos arquivos JavaScript, nas imagens, todos não são publicados na Internet, certo? Então vamos dizer que fiz uma alteração na minha página inicial, certo? Então, vou fazer essa ferramenta em tempo real para que você possa ver exatamente o que quero dizer tudo que é simplificado das ruas da sua máquina até a Internet. Então eu queria ver o Hello world. Meu site. Meu site é nulo. Tudo bem, isso leva claramente não está na página agora. Então aqui está meu troco. Eu fiz essa mudança. Vou dizer home page atualizada, essa é minha mensagem. Portanto, as mensagens são importantes. É importante ser descritivo porque eles ajudam você no futuro a saber, oh, isso é o que eu fiz desta vez contra os membros da sua equipe que apreciarão uma sinopse das mudanças que entrou com esta galinha. Então eu vou fazer esse commit, certo? E uma vez que eu tenha feito esse commit, vou então empurrar ou deixar-me apenas empurrar, puxar e afundar. E eu só vou ficar bem, não apareça novamente porque você sabe, esses prompts depois de um tempo, eles continuam dizendo a mesma coisa repetidamente. Mas uma vez que eu fizer isso, vou pular, xeque-mate meu trabalho rapidamente só para ter certeza. Tudo bem, e vejo aqui apenas 30 segundos ou vá, atualizei a página inicial, então isso não é no GitHub. Se eu pular para o painel do Netlify e atualizar, você verá que a última publicação foi 119 lida. E se você olhar para ele, implanta, verá que a primeira implantação não teve uma mensagem para a segunda implantação tem a mesma mensagem que acabei de verificar no GitHub. Tudo bem, então, apenas verificando no GitHub, Netlify o monitorou, obteve uma mudança e não está publicando. Então, se eu atualizar o site, há minhas vidas de mudança. Você vê que tudo o que adicionar a fazer é atualizar meu arquivo e confirmar e, em seguida, sincronizar com o GitHub e o pulso foi cuidado. Portanto, essa é uma maneira agradável e fácil de colocar seus sites estaticamente estáticos em funcionamento. Você sabe, entende HTML e CSS. Você sabe como usar o jQuery analítico bootstrap. Assim, você pode criar sites bonitos e ninguém pode colaborar com eles usando o GitHub com bastante facilidade e publicá-los na Internet usando o GitHub e o Netlify com bastante facilidade. 21. Realize a página inicial com Bootstrap slider e layout: Tudo bem, então agora temos uma compreensão clara de páginas inteiras eram um problema básico frio dentro de CSS e JavaScript, todos eles combinados para usar uma página dinâmica. Nós empurramos para o GitHub e até publicamos na Internet. Então essa foi uma boa primeira taxa. Agora vamos colocar todo esse conhecimento para usar e construir algo que seja viável, certo? Então, vamos criar um modelo antigo e melhor com algum conteúdo real usando o Bootstrap. Então, vamos começar a modificar o título ou o topo. O que vemos na banheira da toca que já sabe que o título é o que realmente nos dá a redação, certo? Então, minha primeira página da web, tudo bem. Temos nossa folha de estilo CSS, mas o dobro do ícone que você costuma ver no navegador, certo? Então este pequeno ícone aqui, porque não há nada de prisão feito neste ponto, é chamado de ícone. Então, neste site, ícones, 8.com e você pode filtrar para ícones, depois ícones fav, eu posso apenas procurar por ícones. Eles terão um monte de amostras. Não estou dizendo que você deve usar um desses porque isso geralmente pode funcionar ou ser como um logotipo da empresa ou outra coisa. Mas eu só vou pegar um desses que eu acho legal o suficiente e geral o suficiente. Vamos usar esse código para que eu possa baixar esse ícone. E isso me daria os diferentes tamanhos que estão disponíveis. Então, geralmente, para o nosso ícone fav, você tem o ponto de extensão ICO, que é abreviação de ícone. Ou você pode realmente usar PSP e G's, certo? Então, podemos simplesmente ir em frente e baixar este PNG. E uma vez que você tenha esse arquivo, conhecemos as regras sobre onde Dina com imagens. Queremos colocar este arquivo em nosso projeto em primeiro lugar, então encontramos o arquivo onde quer que ele esteja em nosso sistema de arquivos, e então eu agrado a pasta apropriada, que será a pasta IMG. E então, por extensão, quero ter certeza de que é uma palavra ou um nome que eu possa identificar facilmente. Então eu vou chamá-lo de iPod, ou poderia ter sido local, seja lá o que for, certo? Se você encontrar outra imagem, desde que seja isu ou dot PNG, você deve ficar bem. Então agora que eu tenho esse ícone fav na casa ou em qualquer página para esse assunto. É que eu quero que esse ícone seja exibido e comece a digitar o link do código. Rel é igual a ícones é assim que parece com o código CSS. E então é preciso que um H ref é igual a, eu sei que foi apontado para os ícones fav, então isso não seria barra, desculpe, imagens, onde está, onde está minha pasta de imagens? Img, peça desculpas. Corte favicon dot PNG ou feche essa tag. E apenas para fins de visualização, vamos vê-lo no servidor ao vivo apenas para ver como será o nosso tabu. Um nomear uma olhada nisso, certo? Então este é o antes e depois. Isso foi antes. Não deixa que os documentos pequenos não, você realmente começa a ver esse ícone. Então isso é bom, certo? Então é isso que é preciso para chegar a uma imagem dentro do topo. Não, isso é uma operação relativamente simples, mas sobe em grande caminho. Vamos passar para outra coisa. Então, vamos configurar uma barra de navegação adequada e usaremos o código Bootstrap para fazer essa barra de navegação. Então, para referência, mais uma vez, você pode ir para Bootstrap. Estamos usando o Bootstrap 5 e você pode verificar sua documentação em barras de espera deve procurar por isso se você quiser procurar por algo específico passo de gueto agora, você vê navbar e então ele salta embora e nos mostra as amostras. Então, essas são todas as possibilidades. Ele pode levá-lo para casa navbar, esses são os links. Pode obter uma pesquisa suspensa, certo? Você pode deixá-lo olhar em cores diferentes. Então, isso está tentando encontrar a parte onde as cores. Lá vamos nós. Você pode obter o escuro, o tema azul. Tudo bem, isso é tudo o que você realmente precisa para fazer isso. Só precisa mudar essas aulas. Então, o que vou fazer é pegar emprestado uma dessas amostras e vou mantê-lo simples. Então, vou usar essa amostra aqui. Apenas barra suficiente três links e o link suspenso. Então, vou apenas copiar isso. Tudo bem, pule para o nosso código e toda essa seção que dizia Agora vou substituir o código que estava lá e ver muito mais código. Mas é meio simples no meu livro lido. Então essa parte aqui diz que é o rebocador, é um fluido de recipiente. Em seguida, ele se abre em uma classe em grades para fora XOR com a marca classe navbar. E então esse seria o lugar onde você coloca talvez o nome dos sites não seja um nome de empresa, seja lá o que for. Então, vou dizer meus sites porque é isso que esse site é. Tudo bem? E então ele tem alguns outros botões, sermão por um falou sobre design responsivo. Portanto, esta seção de botão aqui é pelo motivo, se o pH for redimensionado para um tamanho de aplicativo móvel, então você começaria a ver pequenas pílulas. Se você usa nossos sites um redimensioná-lo, não é? Você vê essas pílulas comprando um ingresso suficiente e , em seguida, o navbar cai. Esse pedaço de código não faz isso para você automaticamente, certo? Assim, podemos visualizar isso em alguns navbar em colapso. Isso também é alguns JavaScripts correndo em dinheiro crescido para ajudar com a barra de navegação chegando e não quando ela é então condensada. E então temos nossas etiquetas de âncora. Então eu realmente não deveria ter apagado o alcalóxido, o que é saques deles em páginas diferentes. Então, a primeira etiqueta de âncora estaria em casa. Então, estou apenas barrando esse código. E aqui o H ref diz index.html, é artistas em casa por meio de pré-visualização. Tudo bem. A próxima etiqueta de âncora era para o parafuso. Então eu vou mudar este para um barco. Então, só estou mostrando que não há motivo para se preocupar em copiar e colar. Às vezes, é necessário. Mas no ponto em que você está copiando e colando, você não está entendendo nó que é o problema. Então, queremos ter certeza de que, mesmo que estejamos emprestando o código do bootstrap, sabemos o que estamos modificando porque eles estão familiarizados e confortáveis com essa cotação. Então, o próximo seria entrar em contato com alguém para mudar isso de preços para contato. Lá vamos nós. E então, para o nosso menu suspenso, quero dizer , esta é uma boa amostra, então eu vou dizer sites externos, certo? E por pré-visualização, pode-se ir para a Amazon. Pode-se ir para, eu acho, bem, o link da Amazon aqui embaixo. Sim, nós fazemos. Assim, podemos vincular a qualquer coisa por muito nos links externos. Estes são apenas para alguns de qualquer maneira. Então, a Amazon e isso poderia ser o EB. E então este poderia ser AliExpress ou seja lá o que for, essas amostras. Então você pode colocar essas coisas, se desejar. Para praticar. Não há problema. Vou deixá-los em branco onde eles têm a Amazônia, mas eu sou rotineiramente todos eles. Todos eles para mostrar como seria a lista suspensa. Então é isso para a barra de navegação, somos nós tick preview disso. Então eu só vou pular de volta para o lado que já estamos construindo um começo vendo a diferença, já olhei para aquela barra de navegação. Saiba que é meio discreto, é meio que concordo. Como eu estava dizendo, se você redimensionar os sites, você veria que o suficiente se condensa magicamente e ele começará a soltar ossos para você, certo? Tudo isso, não escrevemos muito código para que isso acontecesse. Isso é tipo de bootstrap fora das caixas. Eu não gosto dessa cor na barra de navegação vai. Então eu queria voltar para minha documentação. Eu olho para as diferentes opções de cores e gosto muito do tema escuro. Então, essas são as aulas que eu preciso para obter o tema escuro. E você percebe que se você ainda tem outra cor em mente, você pode realmente colocar sua cor personalizada usando o estilo embutido, certo? Ou você pode criar uma nova classe e substituí-la. Olhe, pode usar o estilo em linha, conforme recomendado aqui. Embora como eu quero que o navbar dash Dark, BG traço escuro. Então eu vou pular de volta para o meu bar suficiente e é um traço navbar, Light, BG dash. Deixe alguém substituir isso por uma variação escura. E lá vamos nós. Isso começa a parecer um pouco melhor aos meus olhos. Então, digamos que ele tenha bar suficiente, agradável e fácil. E então, é claro, se tivermos o navbar em casa, queremos o mesmo navbar nas outras páginas. Alguém para substituir todas as navbars em todas as outras páginas pela nova barra de navegação. Tudo bem? Então, agora cada página tem a mesma barra de navegação como estamos trabalhando, e não é nova e melhorada. Então, esse é um excelente trabalho. Agora, outra coisa que eu queria apontar, colocamos a barra de navegação dentro do contêiner. Bem, há momentos em que você provavelmente quer que a barra de navegação se estenda o mais à esquerda e na medida do possível, certo? Então você veria alguns sites onde a barra de navegação está realmente pesquisando em toda a página. O conteúdo está confinado dentro da margem. Então isso é realmente possível simplesmente não colocar o nav dentro do contêiner, certo? Então, há essa prévia, como seria isso, e é isso que nossa barra de navegação iria esticar os direitos em toda a página. E, novamente, você pode querer que o distrito da faixa preta em toda a página, mas não necessariamente o logotipo seja tão à esquerda e os links sejam assim. Então é aí que você começa a misturar muito que eu posso ter meio, meio que criado. Então aqui dentro do nervo você veria que eles realmente têm uma div com o fluido do traço do recipiente. Fluido significa que ele vai esticar o olho pela página. Se removermos o fluido e apenas o tornarmos um recipiente comum. E você verá que a viagem se estende pelo que o conteúdo está dentro dos limites de como seria o contêiner. Então, só estou mostrando como você pode misturar e combinar o diferente. Sou aulas e o layout do enxofre só para obter o efeito desejado. Bem, você tem que experimentar. Tudo bem, então vou deixar minha violeta suficiente, é como quando minha barra de navegação se estende, mas os links estão começando onde eles são nulos. Tudo bem, então é isso para o nosso romance. Vamos passar agora para o nosso conteúdo. E o que vou fazer é remover esse conteúdo. Então, para fazer um trabalho rápido, vou colapsar essa div, realçar essas duas lentes pressionando Delete. E para o vento a termo mover isso para fora do recipiente porque um fenol queria se esticar como a barra de navegação. Mas voltaremos ao filtro mais tarde. E o que vamos fazer dentro da nossa era do conteúdo, pelo menos para nossa página inicial, é colocar em um carrossel e talvez alguns títulos. Tudo bem? Mais uma vez, eu não espero que você necessariamente comprometa tudo isso com a memória, apenas rolaria com os socos um, encontre o que precisamos quando precisamos. Tão pequena colisão na documentação do Bootstrap. Vou procurar carrossel. Carrossel é basicamente como aquele slide-show, certo? E aqui está o exemplo de um slide, slide ciclina. Ele pode ter controles de largura ou você pode clicar e navegar ou permitir que os usuários naveguem entre os slides. E acho que gosto daquele, aquele com a navegação. Então o código aqui veria que temos uma div com uma classe, algumas classes, e temos algumas tags de dados. Tudo bem, e então você tem carrossel interior. Com cada slide, temos itens de carrossel. Então, se você quiser 50 fotos, você teria 50 dessas divs. Se você quisesse três. Eu tenho três desses. Praticamente. E então temos botão para voltar e botão para pouco para frente. E é isso mesmo. Então, basta preencher os espaços em branco com as tags básicas com as quais você já está familiarizado, você sabe, sobre a tag de imagem ou, você sabe, segurar para obter o caminho para a imagem. Tudo bem, para facilitar, mais uma vez, podemos copiar e você vê, podemos ver os outros exemplos que você tem legendas. Você pode obtê-los com legendas, certo? E mais uma vez, sente-se e olhe para o código porque não é nada que você não tenha visto antes, certo? Tudo é uma combinação de botões, certo? Então, esses botões corresponderiam esses indicadores aqui em onde, que lado estamos. Então você apenas adiciona quantos botões tiver slides. Ainda temos o mesmo formato que acabamos ver com os itens do carrossel. Tudo bem, apenas isso em vez do item, então você tem a imagem, bem como uma div armazenada no texto que está sendo exibido. Tudo bem, e então você ainda tem seus botões de navegação. Então eu acho que vou usar esse e entrar aqui e olhar para eles dia todo porque aqui está outra Oda, animação legal. Você pode misturá-los e combiná-los, certo? Normalmente, a diferença entre as opções talvez seja como algumas aulas. Então, como o feed de carrossel, esse não está presente neste aqui diz carrossel e depois deslize. Tudo bem, este diz carrossel, deslize e depois alimente. Tudo bem. Assim, poderíamos facilmente pegar esse modelo e , em seguida, torná-lo um desvanecimento. Só estou mostrando que você pode misturar e combinar. Tudo bem, então vou copiar este. Gosto daquele com os botões nele. E não mexa repetidamente no contêiner foi apenas colar. Agora vamos começar a trabalhar na mudança primeiro. Isso disse que eu gosto de um slide de carrossel, então vou procurar nosso ajuste ISO Dash, desculpe, o carro então alimente, certo. Então conheça esse carro. Então, sabemos que é suposto alimentar tanto quanto o próximo cara. Certo? Agora temos os botões. Esses são os pequenos botões de abas na parte inferior. E então eles estão vendo que estão segmentando as legendas de exemplo de carrossel. Portanto, observe essa hashtag. Tudo bem, então esses atributos de dados são o que o JavaScript está usando em propenso a erros para ver. Quando isso for clicado, vou obter esses dados e usá-los para atender às minhas decisões. Então, mais tarde, quando estamos construindo operações mais complexas, teremos que usá-las quando escrevermos algum jQuery. Portanto, não se preocupe com muita coisa agora. Mas é para isso que eles servem. Tudo bem, então temos nossos indicadores div, carrossel, exemplo, legendas, BS, pedalada. Como eu disse, se quiséssemos mais slides, temos que adicionar mais e cetose, sem problema. Então temos o interior do carrossel, jantar de carrossel e cada item. Portanto, o item número 1 precisaria da fonte da imagem. Então, vou usar o chão do meu filho. Então tudo isso é IMG slash girassol dot JPEG. E fora, você geralmente é encorajado a escrever uma alternativa que nos diga com a classificação do site nos mecanismos de busca. E também ajuda na legibilidade para leitores de voz para pessoas que podem ser deficientes visuais. Então é encorajado a dizer isso que quando o leitor chegar lá não soubesse disso, Oh, é cada um de nós no chão. Então eu queria pular, bem, o que é um pico sub B? Esse é o site que eu usei para obter minhas imagens e só estou tirando três imagens que estavam na frente. Eles não precisam usar essas imagens. Então, o que eu encorajaria você a fazer, no entanto, é usar as menções por que estamos recomendando porque olhar para o que está acontecendo com chão Arslan ou girassol é um arquivo enorme. Estes depois do dinheiro, seja 0s tamanho, ou apenas nos certificar de que obtemos uma imagem que se encaixa na área em que esperamos que ela entre, certo? Então, o que vou fazer é obter todos eles como 1280 por 53. Acho que isso deve ser inteligente o suficiente. E vou apenas ir em frente e baixá-los e depois movê-los para o projeto. Então, basta movê-los para a pasta de imagem e renomeá-los. E então eu tirei uma foto da praia, um pássaro e um trevo, que é outro tipo de pássaro. Mais problemas. Então, vou usar essas imagens aqui. Então eu sou z slash beach, certo? E então a saída diz praia. Em seguida, o IMG slash bird. Diz símbolo de vendas de pássaros. Isto é, conheça suas gengivas. Parte mais difícil. Tudo bem? E, claro, se você quiser mudar, é preciso, ele sempre pode ir em frente e mudar o texto. Se você não quiser o texto, basta removê-lo. Então, só estou mostrando isso. Sim. Eu não sei o que você quer. Seu movimento votou tudo quer, embora a parte mais difícil, citação sem aspas, seria a fonte que temos quatro imagens, e eu só tenho três slides, então isso significa que preciso adicionar um quarto. Tudo bem, então vamos dar uma olhada em um processo de estender este. Preciso de um carro novo, então o item, então eu só preciso pegar essa div e vou replicá-la. Não vou tentar redigitar que eu possa cometer esse erro. Sou legal para a aula. Por que redigitá-lo quando tenho um bom exemplo para seguir aqui. Tudo bem, então eu posso colocar o que preciso neste quarto slide. Tudo bem? E este é o quarto slide. Lá vamos nós. Então você muda. O que você precisa mudar? Não há problema. Agora, depois de colocar essa barra, lembre-se de que temos os indicadores de botão. Então, se você não escolheu um modelo com um botão indica isso e tudo bem. Se você quiser remover a botânica indica à medida que você muda de ideia, remova os indicadores do botão. No entanto, vou estender meus indicadores de botão para saber que eles devem ter um quarto. Então eu peguei o terceiro e estou nojento olhando para qualquer coisa que não adote. Então aqui você vê que o padrão 0 é um. E você aprenderia em qualquer linguagem de programação que o cone geralmente começa em 0 em computadores, certo? Então 0 é o primeiro slide, um é o segundo lado, dois é o terceiro slide. Então, obviamente, três seria o quarto slide certo? Agora, depois de colocar minha apresentação de slides, vamos voltar para o site e fechar todo o barulho. E depois há o nosso chão de favela. Há nossa praia. Há o nosso pássaro, e há o trevo, que é um pássaro ouvido. Vemos que os rótulos estão aparecendo. Temos nossos indicadores e tudo, então está funcionando bem. Mas então as imagens ainda são meio grandes. Alguém para começar a usar algum CSS personalizado para reduzir as dimensões da imagem é um pouco de thread. CSS personalizado. Por quê? Porque depois de fazer isso para imagens, queria fazê-lo quatro vezes. Portanto, não vou colocar CSS em linha 4 vezes. Em vez disso, é mais fácil para mim fazer é pular para minha classe de estilo personalizado e criar uma nova classe. E vou chamá-lo de trenó de imagem de slide. Eu sou G. E vou apenas mudar a altura porque é isso que realmente tem um problema com algo como 550 pixels talvez. E então, com essa aula, posso voltar facilmente e deixar que cada imagem não. Então isso é um IMG? Sim, você é o bloco d. Sim, você está com 100 ou w dash 100, isso é bootstraps. Vimos largura 100, mas vou dizer que você também é slide IMG, o que então reduziria o quão alto você é e lá vamos nós. Tudo bem, então parece um pouco melhor. Então, como eu disse, é sempre melhor obter imagens que já estão fazendo menções que você deseja ou você as redimensionar para dimensões que deseja que sejam para essa seção específica. Porque veja como as imagens aumentam quando estou forçando-as a ter um tamanho diferente de seu tamanho natural. Então, vamos voltar ao nosso código. Então, temos nossos carros funcionando. Copie e cole alguns mods em onde estamos executando, onde moro. Agora vamos dar uma olhada em algum layout avançado. Estou dizendo avançado porque vai ser, vai parecer muito limpo e as pessoas olham para seus sites e coisas para fazer algo em títulos. Mas, mais uma vez, o Bootstrap torna tantas coisas tão alcançáveis. Não é engraçado. Tudo bem. Então, vou debaixo do carro. Então este era o nosso carro, então este é o nosso contêiner, este é o nosso carrosséis ou silano configurar nosso contêiner. Vou quebrar a linha e depois vou apresentar uma nova div. Esta div vai fazer com que o GOS chamado roll saiba. Mais uma vez, vamos consultar a documentação. Portanto, há um sistema de grade embutido no Bootstrap que permite dividir seu conteúdo em colunas diferentes. Tudo bem, então aqui está um exemplo para 13 colunas, que é o que estamos prestes a fazer. Você pode usar a regra e o Nietzschean say col, col, col. Francamente, quantas chamadas você fizer, ele tentará o melhor para dividir esse espaço da esquerda para a direita uniformemente entre tantos dados que você tem essa chamada. Se você quiser tamanhos fixos, você pode realmente dizer col dash abaixo dos números. Então, em outras palavras, você quer 5050, podemos usar cores se você quiser 123, ligue, chamada CAFO. Mas se você quiser, deixe-me ver se consigo encontrar um que seja exatamente o exemplo do qual estou falando. Aqui vamos nós. Portanto, existem 12, basicamente concentrados lá, 12 colunas da esquerda para a direita. Então você sempre pode dividi-los uniformemente, certo? Então você pode dividi-lo em quatro, certo? Quatro colunas, cada uma sendo tamanho três. Ou posso dividir isso em três, cada um sendo tamanho para você novamente, dividiu 5050. Então, ambos seriam busca de psi. Ou se você quiser, quer ser significativamente mais amplo que o outro, você pode ver que você é, é base na UR para espécies. Mas qualquer combinação de números que somam até 12 é uma boa combinação para essas divisões. Tudo bem, então, se você percorrer, você começará a ver outros exemplos. Você pode ver um col, md e MD e o LG e os diferentes nomes que você está vendo aqueles realmente se referem a isso como tamanho da tela. Então você pode estar vendo isso em uma tela média, o que seria como uma tela de computador comum decolar para espécies. Mas em você verá como col, dash ASM, o que significa pequeno. Então, enquanto na tela de um computador, ele deve ocupar x número de espécies em uma tela menor como um telefone celular, ocupe mais espaço porque você provavelmente quer que esse elemento seja esticado em todo o tela, ao contrário de Diigo sair da tela como você faria em um computador. Isso é tão fácil fazer esses layouts. Então, como eu disse, eu queria algo mais parecido com isso, três colunas. Então aqui está um exemplo de regra de classe div, chamada, chamada, chamada. Então, na verdade, vou pegar esse código emprestado já, ter os robôs. Tudo bem. Vou apenas substituí-lo e colocar isso. Tudo bem, então minhas três colunas, não há problema. Agora, em vez das três colunas, o que eu quero? Vou colocar um texto de exemplo, e isso é um título e uma tag de parágrafo e botão. E isso é tudo o que estou colocando. Então vou digitar isso do zero com você, certo? Não. Então eles podem entender exatamente o que está acontecendo. Observe que este é um exemplo de ticks. Começa em latim, é uma espécie de lixo. Mas vou te mostrar como obter esse tipo de texto com bastante facilidade. Então, para chamada, para a segunda coluna, quando ter uma tag H2. Mel vai ver que está batendo É o que você quer como seu título. Se você está construindo sites promocionais são protocolos, é aí que você fala os pontos de discussão sobre esta aveia de pão, você sabe, custa amigável, eficaz, eficiente, et cetera, certo? Só te dando ideias. Então esse é o título. Então, na tag p, eu quero um exemplo de texto para que eu possa realmente escrever a palavra lorem, pressionar Enter, e ele irá gerar um parágrafo inteiro fora alarme, então eu tenho certeza que você viu isso em algum lugar da sua vida, em algum lugar na Internet. Se não, tudo bem. Mas o ponto disso acontece titular, então é aqui que você coloca o que quer que seja, você transforma isso em informações úteis. Tudo bem? modo geral, quando você estiver wireframing e quiser mostrar a um cliente watts, o site parecerá que você gostaria de colocar esse tipo de lugar. Bem, um soluto C, ok, se os leva lá, é o que parece. Então, para o último, eu só vou ter essa tag p que tem isso na unidade criptográfica e eu não fui redigitar isso vai, acho que a combinação dessas tags, você já sabe como fazer isso uma tag p com uma etiqueta âncora, btn secundária. Então, sim, eu concordo botão e a função é botão. Então ele sabe que é apenas um botão, certo? Ou deve agir como o dobro ou outro e isso interfere em nada. Exibir detalhes. Tudo bem. Tudo bem. Não, você verá esses tipos de o que devo dizer? Esses símbolos são esses textos Unicode, lugares diferentes estão na Internet. Estes são, ele recebe símbolos especiais em seu site. Por exemplo, geralmente no rodapé, você veria algo como informações de direitos autorais. E como você obtém um sinal de direitos autorais? Então você faz e eu acho que é C. Então, se você acabou de fazer uma explosão e eu usar o scroll, você verá todos os personagens especiais aparecendo no IntelliSense, o que eles representam. Então, se eu disser alguma coisa, essa cópia, lá vamos nós, Isso é um senso de direitos autorais. Então, cópia comercial, ponto e vírgula. Então, quando você vê um Lamberson rock cool, eu não sei que It Rock cool em inglês se traduz sobre UC, é aí que você está recebendo aquela pequena flecha dupla. Tudo bem, então vamos apenas replicar esta seção ou esse código para nossa terceira coluna. E então vamos dar uma olhada rápida. O OK, calma, lá vamos nós. Então, agora temos nossos três títulos abaixo slides e nosso texto de amostra, e nossos botões de grade que não navegam em lugar nenhum. Então, UCO, tudo está se juntando, certo? Então, espero que esteja tão animado com o que estamos realizando. Retinóides que conheço para o rodapé e, em seguida, vou limitá-lo ali para o que estamos fazendo no filtro de fotos de fala. Ou pelo menos no final disso, vou colocar uma regra horizontal para que tenhamos uma pequena linha. Tudo bem, e então eu fui trocar esse filtro para ser algo mais parecido com um puxador de filtro real. Então você verá tags de rodapé, você verá tags de cabeçalho. E é isso que chamamos de HTML semântico. E é apenas um estilo diferente de escrever, mas ainda assim é basicamente se resume a parecer que é apenas um contêiner. E semanticamente, esse contêiner é para o conteúdo do filtro ou mais dentro do conteúdo do filtro. Bem, primeiro, depois que você dá uma classe chamada container, sabemos que o Container está indo para um bootstrap mais. E então, em vez desta tag p, vou adicionar R ou direitos autorais e portanto, cópia comercial, certo? E depois verei meus sites. Isso é 2021. Tudo bem. Então, vemos nosso site novamente, algo que é para que tenhamos nosso nav, você tem o título e então nós temos isso. Não perceba como neste slide são um tipo de mercado. Então, essas são pequenas coisas que elas podem começar a procurar se você quiser alguma luz do dia entre elas. É basicamente tão fácil quanto colocar uma tag de quebra entre o nav e o contêiner. Então você obtém aquele pequeno BH3. Lá vai você. Bom e fácil, certo? O que algumas pessoas também fazem é criar uma div ou algo assim, ou criar uma classe que diz automaticamente, me dê X quantidade de margem do topo. Então eles vão dividir isso na margem do modelo Excel div contêiner da parte superior. Então, se você já quis mudar essa margem, você apenas classe de genes porque ele não pode realmente mudar o quanto intervalo e chegar com o nosso ponto de interrupção. Então é isso mesmo para o que estamos fazendo com a página inicial. A página de morada pode usar algum trabalho. Definitivamente, a página de contato pode usar algum trabalho. Então, quando voltarmos, veremos o estilo do pêssego acima. 22. Redesenho sobre a página com Bootstrap Grid e botões: Tudo bem pessoal. Bem-vindo Buck. Então, já olhamos para restudying ou homepage. Vamos voltar nossa atenção para nosso parafuso ou fala. Sabe, mais uma vez, estes não estão lhe dando prescrição com coisas que você deve fazer experimentos se você não gosta do jeito que eu fiz alguma coisa, sinta-se livre para explorar e tentar outra coisa, certo? Essas são apenas diretrizes. Eu tenho um ponto de vista diferente de você como você faria com outras pessoas. Então, não há problema em experimentar e tentar outra coisa. Tudo bem, então vamos primeiro trazer um parafuso para o mesmo padrão que a página inicial, ou seja, em termos de layout, lembre-se que a consistência é fundamental. Então, pegamos emprestado o navbar, mas fizemos alterações na barra de navegação da página inicial que interpretamos. Também temos alterações nossa área de rodapé que não replicamos. Então, vamos nos concentrar em fazer isso. Então, na seção Navbar, eu tinha tirado o antigo do contêiner ou a média Contian é que vou copiar o novo código navbar para facilitar. E vou recolher esse código navbar, removê-lo. E então esse padrão de barra de navegação desativou a div do contêiner. Enquanto eu estiver aqui, vou fazer a mesma coisa na página de contato, certo? Então, na verdade, gostaria de fazer isso sempre que faço uma mudança, é, eu sei que é global e tentei torná-lo tantos lugares quanto possível, ao mesmo tempo. Então, não me esqueço mais tarde. Então, depois de replicá-lo, navbar, vemos, ok, bom. Está trabalhando no barco, também precisamos fazer isso no rodapé. Então, estamos no código do filtro e ele deve ter um EHR. Então volte para o barco, desabou e eu fui remover completamente essa div de conteúdo. Mas podemos remover esse filtro. Vou colocar em que cada um é e colocar em nosso rodapé, certo? Então, quando olhamos para trás, vemos o rodapé parecendo o que queremos. Agora podemos remover esse conteúdo e começar a redesenho. Ou lembre-se de que tivemos uma pausa aqui entre o conteúdo ou a área do contêiner e o nav Hero. Então, com todas essas alterações feitas, visuais para isso, ambas as páginas mais parecidas com uma página de perfil, certo. Eu quero ver, Ei, este é um parágrafo sobre mim e então provavelmente tem como alguns links sociais. E então, assim como um perfil, você sabe, eu só estou pensando nas diferentes coisas que poderíamos fazer. Então, dentro do contêiner, vamos criar nosso papel. Então, sempre que vamos ter a separação da coluna, então, se tivermos que começar com a classe igual a rolar, então dentro desta linha, eu vou ter uma div. E essa div terá classes iguais. E perceba o quanto Amabile meu recuo. O recuo é muito importante quando se trata da legibilidade mais tarde, certo? Portanto, sempre tente garantir que seu código pareça limpo. Então eu queria dar esse chamado traço oito. Tudo bem, estou dividindo a praia nela e talvez três. Então eu vou ver chamá-lo para este e vou apenas duplicar essa linha e fazer col dash três, mas eu também queria ter um deslocamento col dash. Tudo bem, na verdade estou esquecendo como o código offset faz loop de alguém para pular aqui e procurar compensações, certo? Então o deslocamento, deslocamentos aqui, uma meta, então o deslocamento está na verdade nas colunas estavam na grade. Na verdade, está em colunas. E aqui está uma cotação para o deslocamento. Então, o traço offset, qualquer tamanho da tela, traço, o que quer que ele diga compensa que significa espaço no modo de espera. Você quer entre mim e o que estou ao lado, certo? Então, se estivermos usando e deixe-me copiar isso se eu estiver usando. E três, isso significa que eu posso pelo menos ter um deslocamento de um. Então, um mais três mais oito é igual a 12. Bom, certo? Então, dentro do primeiro, vou ter uma pequena borda quatro. Deusa é igual a talvez texto, informações de traço. Tudo bem, então você verá o que isso significa. Nosso primário, deixe-me torná-lo primário para que você possa ver a cor fica e isso seria um barco eu nisso. Isso é para TAG. E fui ter um parágrafo, como eu disse sobre mim, texto de espaço reservado lorem, e deixá-lo gerar esse texto. Para este texto, vou dar uma aula a ele. Texto. Silenciado. Tudo bem, então se você estiver, se você não está tão familiarizado com as coisas tecnológicas. Não há problema. Bootstrap. Então, se você acabou de digitar texto, salte para essa documentação é o autor das maneiras maravilhosas que eles podem transformá-lo para definir o tamanho, as diferentes cores que eles podem obter com o texto. Todas essas coisas maravilhosas, certo? E, de um modo geral, quando você fala sobre o primário ou o sucesso ou um aviso ou perigo para parecer classes que você estará vendo para BG dash ou BTN, essas parecem palavras-chave e o resultado cores estão disponíveis para seus carrapatos. Então, se você quer texto azul, primer de traço de texto pega informações, texto verde, texto, Fluxus, etc., certo? Então, estou apenas apontando esse dedo do pé. É por isso que você verá muita semelhança entre como essas palavras-chave estão sendo usadas em todo o lugar. Então agora que eu tenho pelo menos pelo menos uma coluna, não tenho. Fui saltar para baixo e começar a acumular colunar. Nesta coluna, o que eu gostaria seria as informações de contato, certo? Então eu vou ter outra idade para a língua que tem o mesmo leva primário. Mas este vai dizer informações de contato, certo? E então eu vou ter, em vez de uma pita, deixe-me usar uma lista não ordenada onde estou indo para alguns dos meus links de mídia social. Então você vê, estou apenas colocando todas essas tags juntas e estou apenas combinando-as para obter o resultado desejado. Então é verdade ou se, oh desculpe, deixe-me abrir e fechar essa TAG de fome para que eu possa me livrar de algumas dessas flechas, certo? Então f é igual a, e vou colocar uma hashtag para null para que o link pareça vivo. Classe é igual, talvez eu possa ver texto SSH silenciado ou traço de texto na íntegra, certo? É só assim que está feito. E quero dizer, mais uma vez, de você pegar esses ticks escuros, branco, você quer um link, pois você sabe que um URL terá um loop específico. Então, se você quiser mudar esse visual, então não há problema. Tudo bem. Então eu queria fazer meus links parecerem escuros. Tudo bem, vamos ver como será isso. E verei um tutor. E então eu vou duplicar isso. Então, um é o Twitter, um é o Facebook. E ganhou poderia ser. Bom trabalho. Tudo bem, então vamos dar uma olhada no que estamos recebendo com esta página. Então é isso que um parafuso significa flamingo para parecer que temos que me ferrar algum bool. Este é um gráfico de barras me incomoda. E então temos nossos links de bloco, certo? Então, mais uma vez, misture muito e experimentos. Então eu queria continuar. Vou criar outra seção abaixo disso. E eu vou chamar essa seção talvez que meu portfólio para algo para acentuar o que eu tenho trabalhado por todos esses anos, talvez. Não sei. Mas vamos dizer que temos, então ainda estamos dentro da div do contêiner, terminamos com esse papel. Então deixe-me entrar em colapso e tirá-lo do caminho. Tudo bem. E então, sob isso, vou ter uma mãe, outra div. Mais uma vez, é sempre bom fornecer seus IDs DBS. Então você poderia chamar essa seção de portfólio apenas no caso ou era portfólio, o que quer que você queira. É sempre bom dar a eles. Então, pelo menos, você pode dizer o que está em qual seção. Claro, não é obrigatório como vimos. Então, nesta seção, vou ter uma tag H1. E como uma pequena separação, vou usar uma alternância de RH entre esses dois. Então eu estou, só estou usando um hey, só estou tentando coisas aqui, certo? Então, um tijolo no alvo de RH, outra quebra. E então eu começo meu portfólio. Então vou dizer meu portfólio. Esse é o título. Tudo bem, então você sabe em que seção estamos. Então eu tenho uma tag p. E então vamos ver, eu quero dar a esta a classe. Você tem outro chamado líder. E eu queria fazer com que seja preciso Dash silenciado também, apenas por um efeito dramático. Está lá, mas é, você sabe, um tipo de círculo. E vou dar esse Lorem. Então esse é o meu parágrafo sobre meu portfólio. E talvez eu possa ter dois botões? Nós os chamamos como um call to action no desenvolvimento web. Eu só fui em frente e os fiz. Então, temos classe, desculpe, H ref, nada vai realmente ir para a classe BTN primária. E então você verá em Y2. Então, muitas aulas únicas que você vê de tempos em tempos, especialmente se você estiver indo por um exemplo de bootstrap. Então este está vendo margem no eixo Y de dois espaços, e isso é tudo o que está vendo. Então, o Bootstrap tem muitas dessas coisas a evitar. Você reduz a necessidade de você realmente ir e escrever aula apenas para ter uma margem de dois. O eixo y é de cima para baixo direito. Então, para apenas lhe dar margem, por que ferramenta, se você quiser apenas sobre o tópico diria vazio ou MB, etc., certo? Portanto, essas são as políticas que você pode procurar e usá-las a seu favor. Agora, depois de fazer tudo isso, tenho as ferramentas que querem dizer, me contratar, queria dizer deixar feedback, certo? E um é primário, um é secundário. Mais uma vez, você pode misturar e combinar suas roupas, mas eu vou apenas pular e ver o que isso parece. Certo, meu portfólio. Então você vê aqui que meu texto de cabeçalho é meio padrão para o que é o meu estilo personalizado. Eu não quero misturá-los muito. BTN Primário e descendentes entendem isso, certo? Tenho duas opções. Eu poderia simplesmente remover todo o meu estilo personalizado, ou eu poderia mais uma vez substituir este até que sua classe seja x86 dash primária. Então, ele só sabe quando você é renderizado, você renderiza como azul e tudo o mais pode parecer na linha, certo? Se quiséssemos que tudo isso fosse alinhado ao centro para que apenas levantá-la em um trenó que eu pudesse pular dinheiro. E eu poderia dizer a essa div que sua classe é igual ao texto, ao centro, para que nós, todo o texto lá não esteja alinhado ao centro, certo? Então, estou apenas mostrando como é fácil começar a fazer algumas modificações malucas com código muito mínimo ao usar o Bootstrap. Então, vamos passar para algum outro conteúdo que possa ser útil no discurso. Agora estamos mostrando um portfólio, então seria romancista prudente novamente. Claro, como uma galeria do trabalho ou algo assim. Talvez nosso fotógrafo ou web designer ou mesmo apenas aquele design próximo ou seja lá o que for, seja ele quem for, sem problema. O que podemos fazer é criar uma mini galeria logo abaixo dessa div para o portfólio. Então, vou apenas criar outra div. Eu queria te dar a galeria de identificação. E então dentro desta div, eu vou ter nosso papel é, você sabe, eu poderia realmente conhecer esse papel div. Então eu queria apenas dizer que cruz é igual a regra e sua galeria de ideias e insight ou quatro rolos, vamos ter div. Então aqui está outra coisa, nula quando usamos o call. Então, e se quiséssemos linhas com três itens cada? Tudo bem, então já analisamos como podemos definir um tamanho usando cores. Está em qualquer coisa. E também vemos que, se apenas dizermos chamá-lo, ele analisará automaticamente a função para muitas colunas. Então, neste caso, quero duas linhas com três itens cada. Então eu posso fazer as contas. Se tiver 12, quero três, isso significa BY colunas E a B para o tamanho para ele. Então eu posso dizer que carros são iguais a col dash quatro. Tudo bem? E posso replicar isso quantas vezes. Então, o que eu quero fazer várias funções. Então, qual padrão é que você cria várias regras e 3 cada ou você pode dessaturar, coloca todas elas na mesma regra. Porque o que acontecerá é que a regra atribuirá automaticamente quatro espaços para espaços para espécies em uma linha, depois vá para a próxima linha automaticamente e continuamente fornecendo o espaço disponíveis são necessários. Então, não precisamos nos preocupar com essa parte. Ainda não estou pronto para duplicar isso porque o código entre eles será bastante consistente. Então, vou fazer um corretamente e nesta cópia e colá-lo, certo? Na verdade, acho que vou usar o cartão Bootstrap para isso. Então, vamos pular para a documentação e procurar por cartões vermelhos. Então você vê aqui um exemplo de como o cartão se parece. Então imagine ter sua galeria e você tem isso único. E você tem três por regra. E você tem sua pequena imagem e talvez o nome da descrição do projeto e algo para eles morderem ou mais alguns detalhes, nosso contato com seu barco, está certo. E tenha todos os exemplos de cartões. Quero dizer, se você não quiser a imagem novamente, faça isso simples. Você tem essa versão, et cetera, et cetera, certo? Então eu acho que vou usar o primeiro exemplo em que teríamos essa imagem e o corpo. Então, isso é, aqui está a citação que precisamos. Só vou copiar isso. Pule para o nosso código. E então dentro do col dash 4, colocamos esse cartão. Então essa é a primeira coluna. Tudo bem, não temos nenhuma imagem. Você pode ir e pegar a imagem em Putin. Vou chamar este carrinho de compras. Então esse é meu primeiro portfólio. E então você pode deixar esse problema antigo. E então eu vou copiar isso. Mais duas vezes. Tudo bem. Então, um é carrinho de compras, este é joalheria, e este é sistema de atendimento. Então, esses são meus projetos em que trabalhei em toda minha operadora teoricamente palestrante. Então, apenas exibindo-os aos visitantes do site. E então, quando eu pulo de volta e vejo como minha página está parecendo, ela está vendo carrinho de compras ou restaurar o sistema de atendimento. Com base no tamanho desses cartões? Eu provavelmente não poderia te levar mais. Eu provavelmente poderia me espremer em outros. Eu poderia facilmente dizer nosso Jacob três espaços em vez de quatro. E, em seguida, adicione outro só para que possamos preencher esse espaço. Tudo bem, isso parece um pouco melhor uso do espaço. Isso se chama cisne. Desculpe, checkout. Tudo bem, então eu não sou exemplo estranho fortalecido onde é usar. Então, só estou mostrando como você pode fazer isso. E então, se eu quisesse uma segunda regra, se eu apenas replicasse todas essas quatro, veja o que acontece, ela simplesmente cria automaticamente a nova regra. Claro, provavelmente vou querer alguma luz do dia entre eles. Então, seria nesse ponto quando as pessoas tendem a querer ter uma div separada para a regra, certo? Então, nesse ponto, o que vou fazer é remover esse ID porque isso não é apenas uma regra de agitação. Também removerei o excesso que já fiz. Então, vou apenas criar outra regra ou melhor, a partir delas, duplicar isso já que estávamos duplicando-as todo esse tempo de qualquer maneira. Então, apenas refatorio nulo, certo? O que é além de partes do processo. Às vezes você faz um design como eu acabei de fazer. Achei que poderia usar a única regra e o que quer que seja, mas não gosto do que parece. Sem problema. Então div sua identificação é galeria. E então dentro da Galleria têm várias funções com várias colunas, como todo esse código de rolo. E eu colo duas vezes dentro da vista da galeria. Então eu tenho essa regra, que é a primeira linha e a nova regra do ciclone. E, quando olho para trás, ainda é meio que parece que ainda está engasgado , mas adivinha? Porque agora eu tenho os dois papéis distintos. Posso facilmente colocar tijolos entre as vidas e olhar para isso. Eu recebo essa luz do dia. Então, esses são todos os contêineres do Dave ajudam você a manter as seções juntas e depois movê-las como uma unidade. Então eu tenho toda essa linha em uma div, todo esse desejo. Então, se eu apenas colocar um ponto de ruptura entre as duas divs, então eu recebo aquela luz do dia que estou procurando. É claro que não temos imagens, então é por isso que só estamos vendo esses links quebrados. Você pode colocar imagens e embelezar e modificar isso como desejar. Mas eu acho que isso é, eu acho que isso é legal. Acho que fizemos um pouco e analisamos várias opções. Conseguimos dividir nossas regras em nossas colunas. E vemos onde dividir ainda mais e misturar e combinar os diferentes elementos que se unem para criar um site. Então, agora estamos, posso fazer isso com a página da Apple. A casa parece assim e isso parece bom para mim. A morada, é claro, consistência mais uma vez, essas chaves, para que você possa ter certeza de que todos os títulos são cores consistentes em todo o seu site. A menos que você deliberadamente quisesse que ele fosse de uma cor diferente, então tudo bem. Isso depende de você. Então, quando voltarmos, veremos redesenhar nosso formulário de contato. Isso definitivamente será uma atividade muito divertida. 23. Realize a página de contato com o Bootstrap Forms: Tudo bem, então estamos de volta e estamos modificando nosso formulário de contato. Então, a coisa sobre formulários é que há pessoas que o tomam como seu trabalho diurno desafiado quanto um rito de passagem para garantir que eles possam projetar um formulário. formulário pode ser tão complexo quanto precisa ser simples, porque é assim que um usuário realmente se sente convidado a interagir com você. Este é o gateway para o seu aplicativo ou no nível básico em que não estamos necessariamente coletando nada muito sensível. Está tudo bem. Podemos apenas passar a escola com isso. Mas, mais tarde, quando começamos a analisar desenvolvimento mais complexo em dotnet, você definitivamente começará a pensar em segurança no geral. Ter uma forma apropriadamente projetada é essencial. Por enquanto, no entanto, estamos focados no layout. Sabe o que vou fazer é pular para o Bootstrap e ver que forma ideias elas têm para nós, certo? Às vezes você quer fazer algo, bem, você precisa de inspiração e não há nada de errado com isso. Então, se eu apenas pular para a documentação do formulário, já examinamos os controles de formulário, tínhamos examinado alguns desses e vimos que temos a classe de controle de painel de formulário que poderíamos usar. Mas também vimos que você tem algumas amostras como se você saltar poetas de controle de formulário, veja, ok, Eles têm um exemplo onde, quero dizer, isso é realmente tudo o que é necessário para o nosso formulário de contato. Tudo bem, então literalmente poderíamos pegar emprestado esses genes são poucas coisas e estaríamos citando sem aspas, feito, certo? Se eu olhar para layouts, com certeza terá algumas boas ideias para OK. Whoa, podemos ter um layout de grade, certo? Então, podemos fazer algumas das tags de entrada com as colunas, certo? Sagrado pode obter o que são chamados de calhas sabem, ter uma largura de calha não tem certeza do que isso faria, mas tudo bem. Aqui está um bom formulário complexo usando o layout da grade respondido. Então, se quisesse, senha e-mail ou talvez um número de contato por e-mail, endereço e tudo para alguém entrar ou se registrar. Você tem toneladas de opções e formas de fazer isso. Tudo bem, então o que eu realmente vou fazer é pegar emprestado esses layouts complexos. São layouts complexos. Claro, podemos encontrar outras coisas para colocar. Então, agora, o que temos para o nosso formulário é apenas o nome completo, o endereço de e-mail e o que suas consultas. Se pegássemos emprestado este formulário complexo, poderíamos facilmente dizer FirstName, LastName. Altere isso para talvez o endereço de e-mail, deixe que essa seja a consulta e remova essas linhas em excesso. E então, é claro, temos o botão para enviar. Então, eu vou fazer isso. Vou apenas copiar este porque eu gosto. Vou pular para o nosso código. E então vou pular para a página de contato também perceber que o filtro precisa de alguma modificação. Então deixe-me apenas Caleb é este nev, vá para o recipiente, remova o conteúdo, todo o conteúdo. Lembre-se de que temos que terminar com essa é a nossa linha. E então eu vou pegar o rodapé emprestado para navegar rapidamente, O que é isso? É só colapsar o que eu preciso ver no momento, pegar o rodapé emprestado, e então eu vou colocá-lo aqui. Portanto, nenhum rótulo duas vezes, mais uma vez, ele existe em Charlotte. Todos os RPGs têm os elementos muito semelhantes. Então é assim que nossa página se parece. Preciso dessa tag de quebra entre o nav e o contêiner. Lá vamos nós. Tudo bem, então vamos começar a modificar ou formar. Portanto, temos nosso formulário, entrada, e-mail. Tudo bem. Eu disse que vamos mudar isso para ser o primeiro nome, sobrenome e endereço para ser o e-mail. Então, em vez de mudar um por um, estou disposto a ser uma bolha estratégica é que já tenho a entrada para e-mail. E eu queria mudar o endereço para e-mail, então vou copiar o rótulo e a entrada do e-mail. E vou substituir a primeira linha de endereço. Observe que se chama duodécimos, não superei isso na div, apenas os dois controles. Então, eu preservei o controle de e-mail. Não, posso ir em frente e modificar isso, o primeiro nome e sobrenome. E, claro, você quer ter certeza de que seus rótulos são muito o que está sendo solicitado. Então, entrada FirstName, FirstName para mão-de-obra para muito é o ID, certo? Então, se for inserir FirstName para mim primeiro, desculpe, acho que está girando o FirstName vermelho para. Então. Precisamos ter certeza de que temos o ID, certo. A mesma coisa para este que era a senha. Não é sobrenome. Então, último nome. E o tipo era senha não é texto e seu tipo era e-mail. É um texto completo para ele. O e-mail ainda está preservado. Então, FirstName, último nome, e-mail, sem problema. E então não faça aqui, podemos remover aqueles que sabemos que não precisamos, então eu não preciso de nada sobre a cidade, zip e qualquer outra coisa. não preciso dessa caixa de seleção. Alguém lasca, mova todas essas coisas. Tudo bem, mas depois endereço dois. Eu definitivamente vou modificar. Então, isso vai ser entrada, consulta. E nenhum suporte de lugar para este. Como quase todos pensavam, isso não é imune a estar na caixa de texto. Essa será uma área de texto. Mas esta é a consulta, certo? Então, área de texto, abra e feche a tag. Não há problema. Toma área. Vou te dar o controle da classe. Portanto, o controle do fórum como sua classe e seu ID será a nova ideia que é a consulta de entrada. Vou remover essa entrada. E o rótulo aqui é que quando você vê sua consulta para o botão, fui renomear isso de ver o San na consulta de envio. Além disso, quero que ele se estenda por alguém para torná-lo btn block. E quando eu dou uma olhada no que temos, então crianças, então o olho, ok. Tudo bem. Isso é bom. Isso é bom de se ver. Isso significa que em algum lugar ao longo do caminho eu tenho rebocadores tão incomparáveis têm o primeiro nome e o sobrenome bem. O endereço de e-mail. Certo. Mas então estou sincronizando o endereço e vendo a entrada dentro de algumas coisas. Então, algo deu errado ao longo do caminho. Precisamos corrigi-lo e isso é mais problema. Então, vamos tentar descobrir isso sacolas. E estou olhando e honestamente não vendo nada de errado. Então, provavelmente, só precisamos atualizar a cadela e DFS da atualização que a página está exibindo melhor. Então eu acho que isso foi apenas um blip no servidor ao vivo. Mas você vê as consequências de não fechá-lo corretamente às vezes, às vezes, quando você faz isso, a página não exibe o que você esperava e o editor não lhe dirá o porquê. Tudo bem, então fique atento quando você ver essas pequenas coisas. E à medida que você cresce, você ficará mais confortável e aprenderá a modificá-los melhor. Mas acho que isso parece uma boa forma. Pode colocar alguma verbiagem na página, não apenas a forma vermelha, mas provavelmente podemos usar como algo que temos no parafuso oh, seção de fala. Então, na página de fotos, tínhamos todo esse barco de conversa em linha quem somos e informações de contato. Acho que isso pode ser útil nesse formulário também, mais uma vez, depende de você. Você pode discordar. Então, na verdade, vou colocar tudo isso acima do formulário. Então, quando alguém navega até a fazenda, eles estão vendo que sou eu, é assim que você pode entrar em contato comigo ou preencher o formulário e enviar sua consulta. Tudo bem, acho que é bom e fácil de fazer. Agora, obviamente, a extensão ou modificações cabe à sua imaginação e seus objetivos. Então, não estou sendo prescritivo, estou apenas dando diretrizes e mostrando como tudo isso pode se juntar com vários elementos do Bootstrap para criar suas páginas. Neste ponto, acho que o site parece bom. Leia meu site. Obviamente, quando você clica nele, ele deve navegar para casa. Não está navegando. Estou clicando em renderizar não está navegando. Então isso é uma coisa que eu gostaria de mudar definitivamente enquanto estou aqui para que isso provavelmente vá para o index.html. Tudo bem, e se eu fizer isso nessa seção, definitivamente terei que fazer isso nas outras. Tudo bem, então acabei de fazer o mod espinhal, você deve ser capaz de ir em frente, copiar e colar e mudá-lo, certo? Mas depois de fazer o módulo, veja que ele funciona, certo? E essas são pequenas coisas que melhoram a usabilidade do seu site. E você quer ter certeza de que seus usuários estão satisfeitos. E quem teria tido uma boa experiência em outra coisa a ter em mente é que menos, é mais. Tudo bem, então, quando voltarmos, vamos verificar todas as nossas alterações no GitHub e depois dar uma olhada em nosso site ao vivo. 24. Complete e atualize o site em Live: Agora vamos fazer o check-in no GitHub e eu vou apenas um pouco de buck chuck e sugere ou veja idealmente, o que você gostaria de fazer é verificar no GitHub cada vez que atingirmos um marco. Então é sempre perigoso quando você faz todos esses desejos, todas essas páginas e você vai e a fivela TVA, certo? Então, sabendo que não tivemos uma fivela ou pelo menos desde esses últimos conjuntos de modificações, não tivemos uma fivela. Se meu computador continuasse entre a última lição, esta lição, todo esse trabalho teria sido perdido. Portanto, é do seu interesse que pelo menos depois de terminar de trabalhar em uma página e você tê-la em funcionamento, e está funcionando que você a verifique no GitHub. Então você economiza esse espaço no tempo. Toda vez que você faz o check-in no GitHub ou no monitor de controle de origem, ou no monitor de controle de origem, é como se você um marcador na quantidade de trabalho que está fazendo ou precisa fazer. Então, é sempre bom manter cones curtos. E você sabe, você sempre terá uma versão recente para reverter para um caso algo aconteça. Então, com tudo isso dito, vamos avançar e atualizar nossas mudanças. E se você espero que tenha passado e coloque outras imagens e atualizou outras coisas. Não há problema. Vou mostrar algumas das outras mudanças que fiz. Um modo muito menor. Então, nas velocidades do índice, tudo foi alterado esses títulos. Apenas alguma coisa. Em vez de bater, bater, bater também fixar o espaçamento entre os cabeçalhos e o controle deslizante, apenas introduzindo nossa tag de quebra entre essas duas divs. Bom e simples. Na página sobre, na verdade, fui e peguei minha pequena imagem que está presa para que ela veja que é o que pode parecer se você não pegou a imagem. É assim que ele pode parecer. Neste ponto, não consegui uma imagem enorme, apenas. Eu consegui a menor imagem de tamanho na verdade da Pixabay. Para este em particular , aqui está. Acabei de baixar o 640 grande assim por diante ou porque não precisava daquela imagem enorme para caber naquele pequeno espaço. Portanto, você sempre vai querer garantir que o tamanho da imagem esteja o mais próximo possível do que você precisa dela. Você não quer que arquivos enormes em seu site dificultem rapidamente a experiência do usuário ou o carregamento do site. E a outra coisa que eu fiz foi enviar os dois botões que são fala de contato. Nesse ponto, indiscutivelmente isso poderia ser redundante porque a página de contato mais alta desalinhada, BAC frondoso irá enviá-lo para a página de contato. Então, na verdade, o que vou fazer aqui, eu sei que parece me contratar para realmente acionar um e-mail. Tudo bem. Então você já clicou em sites que conhecem barqueiros ? Fui clicar nele. Ele está tentando iniciar o e-mail ou exibir o endereço de e-mail para o qual enviar a consulta. Isso é o que vamos fazer aqui. Então eu estou pulando para meus botões e ambos vão para contatos. Mas este que eu me contrato, vou dar-lhe uma diretiva masculina 2. E, em seguida, um endereço de e-mail. Vou dizer test example.com. E eles nos deixarão ver o que acontece quando clicamos. Então deixe feedback, ok, ele navega, tudo bem. No entanto, contratar-me na verdade vai lançar meu cliente de e-mail. Não tenha mais você, o cliente completo, mas na verdade está lançando meu cliente de e-mail e tentando enviar o e-mail para lá. Vê isso? Então é isso que o todo, você sabe, você pode fazer com que seu URL tente enviar uma ferramenta de e-mail e um endereço. Bom e fácil, certo? Então, à medida que estamos indo, como eu disse, a menos que um cenário apareça às vezes, você quer dizer nunca ter que fazer algo quando ele sobe aqui, é bom estar confortavelmente e muitas vezes todo todo. Você pode manobrar a situação e obter o que você precisa definitivo. No entanto, não há curso na Terra que apenas irá ensinar-lhe todas as coisas que você precisa saber de uma só vez. Você tem que experimentar. Você tem que encontrar certas coisas por conta própria. E é assim que você crescerá como desenvolvedor. Então, com tudo o que foi dito e feito, tem caminhadas para que ele saísse. Vamos seguir em frente e verificar nossas mudanças. Então, vamos tão importante para obter a seção. Vou dizer melhor estilo para páginas da web. Tudo bem? E então eu vou apenas ir em frente e me comprometer. Diga sim. E precisamos sincronizar quando 23 pontos puxam, empurram e clicam em sincronizar. E então vou navegar até o site ao vivo. Então, não vou ao GitHub para ver se funciona. Então este é o teste que fui para navegar até o site ao vivo. Eu ainda amo as URLs em algum lugar e olho para isso. Ele é atualizado automaticamente. Portanto, já caminhos que passam por esse estágio de espanto onde é complicado para o GitHub atualiza nosso site. Bem, só estou mostrando que este é nosso trabalho manual ao vivo na internet. Agora todos podem ver o que é watt. Tudo bem. Uma outra modificação que eu acho que gostaria de fazer é mudar a barra de navegação, o link ativo cada vez que manarmos, então, para o contexto, deixe-me apenas ampliar o máximo possível. Então você percebe que toda a falta meio destacada e os outros são tipo de adultos. E mesmo quando clico em um parafuso, casa ainda está destacada e contato com a casa ainda está destacado. E a outra coisa também, que é uma solução fácil, é que o favicon está apenas na página inicial, que tenho certeza que sabemos o remédio para esse. Só precisamos ter certeza de que o ícone 50 está em cada bala de praia. Acho que a questão da barra de navegação é um problema maior. Não é um negócio tão grande, mas, ao mesmo tempo, queremos garantir que a experiência do usuário seja boa. Até agora, teremos que empregar alguns JavaScripts. Então, de volta ao nosso arquivo de código, sabemos que temos script.js e esse é o nosso arquivo de script para todas essas coisas. Temos alguns métodos costeiros que eu realmente vou apagar aqueles que são amostras. Em nenhum lugar vai fazer algo que seja realmente significativo. E vamos misturar algum JavaScript e algum jQuery para fazer isso. E nessa nota, também queremos garantir que nossos arquivos de script estejam presentes em todos os pH. Então você pode simplesmente copiar tudo isso. Tinha que fazer isso. O bootstrap, o jQuery e o arquivo de script, você pode simplesmente copiar tudo isso e certificar-se de que está em todas as páginas logo abaixo da seção de rodapé. Então, em um barco, ele deve estar embaixo da seção do rodapé. Só entraria em colapso todas essas coisas, certo? Ele pode colocá-lo lá. E a mesma coisa para contato. Tudo bem, para que possamos escrever o script uma vez e ele serve em todas as páginas. Então, vamos voltar aos nossos scripts. Eu queria estar usando jQuery, alguém para fazer meu documento ponto a sintaxe de hereditariedade. Ou podemos apenas dizer função de cifrão, abrir e fechar, abrir e fechar, e depois fechar. Então, sempre abra e feche. Só refrigerante. Não nos esquecemos de fechar. Mesmo que o editor possa sugerir isso. Há alguns editores que não necessariamente HE em dois assim. Então, fique com raiva realmente novo para que você possa reduzir a probabilidade de erros com base em seu ambiente. Então, o que eu quero fazer é carregar dinamicamente qual página tem a oitava. Então, para o contexto, em nossa barra de navegação, eu meio que removi que já foi comprado na barra de navegação. Você teria notado que o link inicial estava ativo. Acho que ainda o tenho nos contatos apenas para referência. O link inicial tinha que dar o objetivo deles. Então eles amarraram a grama ativa e um dentro desta área, o coreano PJ. Então, como copiamos o código do bootstrap, ele veio com isso no exemplo de que uma página inicial estava ativa. No entanto, em um site real, você não quer, ou pode ser tão fácil quanto pegar esse código e colocá-lo no pH relativo, certo? Então, se eu estiver na página de contato, verei que o link de contato é o ativo e essa é a praia atual. Se eu quisesse morar na página, eu não parecia bem , claro, não, isso está introduzindo variação na barra de navegação repentina. Então ele recebe uma nova página para ser meticuloso o suficiente para se lembrar de fazer isso. E para mim isso é apenas manutenção difícil. Então você tem essa opção e essa opção funciona, ela funcionará bem. No entanto, eu queria ser um pouco mais dinâmico. Então, o que vou fazer no arquivo de script é primeiro tirar nosso registro todos os caminhos ou para pj é que eu tenho. Então, vamos até aqui. Páginas. E estou disposto a fazer uma artéria, certo? Portanto, as páginas terão uma matriz que tem os diferentes nomes de página. fala do índice de uma bala tem uma página. Desculpe, deixe-me ter meu contato vermelho derramando. E então temos links externos. Mas isso não é realmente uma página PHP que acabou de fazer URLs. Então, essas são as páginas com as quais estou lidando. E se eu adicionar outra página que acabei de adicionar a ela, não vou colocar sucesso porque também é um bar de montanha o suficiente, então eu não preciso fazê-la para institutos. Tudo bem. Então, qualquer coisa que seja Atlanta dentro da barra de navegação, vou estender esta lista de acordo. Então, a próxima coisa que eu quero fazer é obter o nome do caminho. Então var pathname, que quando dizemos path me seria a localização do ponto da janela. Acho que é o nome do caminho. Lá vamos nós. Então, em outras palavras, me dê o URL, certo? Então, quando você está navegando, você está nesta página , nessa página, etc., etc. Em quais URLs você está certo? Agora, depois de fazer tudo isso, vou configurar um pequeno evento ou um evento de clique. Então eu vou dizer, Bem, na verdade, estou pensando em hábitos. Então eu clico em evento pode ser um pouco mais trabalho, porque então eu teria que descobrir. Em qual link foi clicado. E, em seguida, tente localizar esse URL exato e denote para refatorar lote. Então, vou mudar minha estratégia. Em vez disso, vou dizer, me dê todo o NovaLink, então link nav. E então eu vou dizer ponto cada. E espuma adulta Sean, onde eu estou tomando cada um que está sendo iterado novamente, está afirmando que entra em uma variável chamada i. Tudo bem, então, em outras palavras, obtenha tudo com o link de navegação de classe. São nossas reuniões de aula. Então, nada pisca. Novalink é a classe que é dada a cada item de navegação seja link nav, link, certo? Então, estou recebendo todos eles. Então, tantos links como talvez na praia, vou pegar todos eles e passar por cada um. E para cada um que estou olhando, estou chamando i. Então, naquele momento, fui ver se o nome do caminho ou, ou apenas obtive o URL em que estamos. Se o ponto do tema do caminho incluir, ou seja, seja qual for o tema do caminho, se de alguma forma incluir esse item de navegação específico. Tudo bem, então vou comparar nome do item nav com o nome da página. E se o que estou em algum lugar, esse nome está envolvido está incluído no nome do caminho. Então, o que eu quero fazer? Então esta é uma declaração if. Então, se isso for verdade, então faça esse leilão. E então eu vou ter um else se ver esse nome de classe de ponto. O ponto inclui, ou seja, se o item em que estamos, não, se o nome da classe já inclui até então queremos fazer outra coisa. Então, só estou te dando as condições são o esqueleto. Então você tem uma ideia do que estamos tentando realizar. Então, se a página em que estamos não é muito uma dessas do índice, então eu quero, ou pela ironia é desculpa. Então eu quero ver aquela dalda dizendo este sermão. Mas quando quiser obter o item em que estamos durante o evento de disparo em nossa função, temos a palavra-chave, essa classe de pontos. Então essa é uma daquelas coisas dinâmicas que podemos fazer. O que vemos na mosca. Por favor, adicione a oitava da classe. E então vimos isso para tocar em algo mais cedo. Aria página atual, alguém para adicionar atributos que diz REO, página atual também. Tudo bem. Agora, se a segunda condição for verdadeira, a média no nome da classe já inclui ativo, então vou dizer que remova a classe ativa. Portanto, não queremos que ele tenha duas oitavas se já estiver vendo até o corte t, mas certifique-se de adicioná-lo se estivermos na praia do carrinho. Então eu acho que isso está feito. Vamos testar e ver e você quer ter certeza de que suas páginas estão na mesma ordem em que elas apareceriam na barra de navegação. Não misture e combine com eles. Tudo bem, então indexe, em seguida, um barco e contato. Então, no código em qualquer lugar , eu tinha todo o ativo sendo codificado e a área pj sendo codificada. Vou remover isso. Então não, eu fui sozinho o jQuery para fazer todo esse trabalho duro no bug crescido para mim. Então eu o removi da borda. E também é removido dessa tabela de páginas, a área de acordo com pij. E então vamos fazer isso para dar uma volta. Então vamos embarcar aqui, ou é, ou no índice excede os destaques que clicamos em nossos barcos todos olhem para isso. Ele mudou. Nós clicamos em Contato, ele muda em um barco. Nossa casa sobre ele genes. Então, em todos os lugares que vamos, você vê que isso definitivamente mudará. Então não, com tudo isso mudado de madrugada e entardecer para completar antes de eu não conhecer a galinha, vou ter certeza de que todas as páginas do ícone ou o logotipo da empresa em seu código, então eu vou pular para chegar e depois colocar minha mensagem. Fiz dinâmicas, nav links, segui em frente e me comprometi localmente. Eles dirão sempre. E depois que esse comitê for concluído, vou apenas ir em frente e sincronizar para que ele empurre nossas mudanças e então podemos dar talvez um minuto ou 30 segundos como o tronco. E então devemos ser capazes de ver nossas mudanças refletindo no site em uma ordem muito curta. E lá vamos nós. Então eu já estou navegando e você vê que as páginas estão sendo alteradas de acordo. Tudo bem. E então porque há um atraso em quando isso acontece, porque a página carrega do que os drones de script em que você vê tipo de feeds, certo? Então é um bom efeito, o bege carregado sem ele e eles percebem, Oh, eu preciso fazer isso. Então, parece um efeito de desvanecimento. Tudo bem, então acho que é isso para atividades do site do código OBC. Neste ponto, você aprendeu muito. Você tem, você deve estar pelo menos confortável com a sintaxe HTML básica. Mas, mais uma vez, você só precisa praticar e metade dos experimentos. E essa é a única maneira de você realmente crescer nessa disciplina.