Crie seu primeiro site com HTML, CSS e JavaScript

1. Nossas boas-vindas!: Neste curso para iniciantes absolutos, vou mostrar-lhe como começar com HTML, CSS e JavaScript criando esta página de produto simples, bonita e responsiva. Não se preocupe se você não tem experiência com desenvolvimento web, porque nós vamos passar por absolutamente tudo passo a passo. Então vamos começar instalando o editor de texto que vamos usar para criar nosso site, que é VS Code, que você vê aqui à esquerda. E então vamos trabalhar em HTML. Nós vamos criar esta página web usando apenas HTML. E neste ponto vai parecer algo assim. Não muito bonita. E então vamos passar para CSS. Vamos usar a magia do CSS e transformar esta página em algo assim. Também vamos usar CSS para torná-lo responsivo para que o layout mude no celular. Portanto, esta página da Web parece boa para qualquer pessoa que está visualizando obter independentemente de seu dispositivo. Uma vez que terminamos com CSS, vamos passar para JavaScript, e vamos apenas adicionar um pouco de JavaScript para fazer este banner de cookies aparecer depois de cerca de dois segundos e fazê-lo desaparecer quando o usuário clica neste botão Fechar. E, no final, vamos adicionar alguns retoques finais, como adicionar uma segunda página. Esta página Sobre que você vê aqui. 2. Instale e a instalação de VSCode: Vamos começar instalando o editor de texto que vamos usar para criar este site, que é o código Visual Studio Code ou VS, como é geralmente conhecido. Então você só quer ir para o Google e procurar por VS Code. E você quer saltar para este código dot Visual Studio.com site. E você quer baixar isso para sua plataforma e instalá-lo. Ok, então acabou de baixar o zip. Então eu só vou abrir isso em uma simulação. Eu só preciso arrastar isso para minha pasta de aplicativos. Ou se você estiver no Windows e talvez precise executar um instalador. Bem, eu só vou arrastar esse código do Visual Studio para a minha pasta de aplicativos. Devo agora ser capaz de lançar isto. Então, eu só vou para Applications. Inicie o Visual Studio Code, clique em Abrir e você deve ver algo assim. Agora com o VS Code, podemos instalar extensões que nos ajudam no nosso desenvolvimento. Há uma extensão que vamos precisar neste vídeo, que é a extensão Live Server, que nos ajudará a lançar nosso site no navegador e também ver quaisquer alterações que fizermos em nosso site em tempo real. Então você só quer clicar neste botão de extensões à esquerda aqui. Ou se você não vir isso, então você pode ir para Exibir extensões. Só vou clicar neste botão. E você quer procurar o Live Server. Ei, responda ao item principal dos comunistas. E você só quer clicar neste botão Instalar. E isso agora está instalado. E se ele pedir para reiniciar VS Code, em seguida, basta fechar que são reiniciados novamente. 3. Crie páginas e lançamento no navegador: Ok, eu li que ele está instalado em configurações, então vamos criar nossa primeira página HTML. Então vamos precisar de um lugar para armazenar este site. Então vamos precisar de uma pasta. Então eu vou criar uma pasta na minha área de trabalho. E você pode criar uma pasta onde quiser. Ele não precisa estar na área de trabalho ou eu vou criá-lo na área de trabalho. E eu vou chamá-lo de HTML, CSS, JavaScript, básico de traço. E você não precisa usar esse nome. Você pode usar qualquer nome que quiser. E agora só queremos arrastar esta pasta para o código VS. Então eu vou apenas obter código VS para cima novamente e, em seguida, arrastar esta pasta para ele. E agora está aberto agora dobra vírus. E este cabelo é onde todos os nossos arquivos serão vistos. Então vamos criar nosso primeiro arquivo HTML. Então você só quer clicar com o botão direito neste espaço aqui. By the way, se você não vir este painel do explorador e basta ir para View Explorer e ele deve mostrá-lo para você. Queremos clicar com o botão direito do mouse e clicar em Novo arquivo. E nós vamos chamar este arquivo index.html. E este nome de arquivo não precisa terminar com ponto HTML porque isso diz ao navegador que este é um arquivo HTML. E eu recomendaria que você use o nome index.html porque quando você visita um site como co dot Visual Studio.com barra, em seguida, a primeira página da web que ele vai procurar, index.html, ok, então podemos ver que ele já está aberto esta floresta de arquivos index.html. Podemos vê-lo aqui. Podemos ver index.html neste topo. Só vou fechar esta guia de boas-vindas. Nosso VS Code torna muito fácil para nós andaimes página HTML inicial e adicionar todas as tags básicas que precisamos. Então você só quer digitar Doc e você deve ver este pop-up de abreviação Emmet no ADA é uma extensão que está embutida no VS Code, que nos ajuda a escrever HTML e CSS mais rapidamente. Bem, uma vez que você ver aquele pequeno pop-up apenas aperte Enter. Ele vai andaime uma página HTML inicial seguidores. Vou explicar o que está acontecendo aqui em um minuto. Mas, por enquanto, só queremos salvar isso indo para Arquivo Salvar, ou você pode usar o atalho de teclado que você vê aqui. Então eu vou usar esse atalho de teclado para salvar isso. E agora vamos iniciar esta página da Web usando a extensão Live Server que instalamos antes. Para fazer isso, você só deseja ir para Exibir paleta de comando. Ou você pode usar este atalho de teclado que você vê aqui. E isso irá lançar a paleta de comandos onde podemos lançar todos os comandos disponíveis para nós dentro do código VS, incluindo quaisquer comandos de quaisquer extensões que tenhamos instalado. E você só quer procurar a vida. E você pode ver esta opção aqui aberta com servidor ao vivo. Então eu vou apenas clicar sobre isso e agora é aberto nossa página HTML no navegador. Não vemos nada na página. Vou explicar por que é daqui a pouco. 4. O que é HTML?: Bem, em primeiro lugar, o que é HTML? Html significa Hypertext Markup Language. Html não é uma linguagem de programação como JavaScript, então não podemos usar lógica em HTML como se essa coisa é verdade, então faça isso, ou se essa outra coisa é verdade, então fazer isso é puramente uma linguagem de apresentação que diz o navegador quais elementos devem ser exibidos na página. E por elementos, quero dizer coisas como cabeçalhos, parágrafos, tabelas, imagens, listas, ainda voar que HTML também não diz ao navegador como esses elementos devem parecer. Isso é o que CSS é outono, que vamos chegar a mais tarde até o final desta seção HTML do vídeo, nossa página web vai se parecer algo assim. E você pode dizer, é bem feio. Então, tudo o que o HTML está fazendo é dizer ao navegador quais elementos devem estar na página, como esses títulos neste parágrafo, nesta imagem. Mas ele não diz ao navegador como esses elementos devem parecer. Ele apenas os cospe na página usando o estilo padrão do navegador para esses elementos. Então HTML é composto de tags, e já podemos ver algumas tags na página aqui. Eu só vou fazer isso um pouco menor. E, na verdade, vou esconder essa barra lateral. Então, basta ir para Ver aparência, clicar em Mostrar barra lateral ou usar o atalho de teclado. Então esconderá a barra lateral para termos mais espaço. Assim, a maioria das tags são feitas de um tapinha de uma tag de abertura e uma tag de fechamento, como esta tag de título que podemos ver aqui. Então, a tag de abertura é apenas composta de um colchete angular esquerdo, em seguida, o nome da tag do que um colchete ângulo direito. E, em seguida, a marca de fechamento é composta de colchete angular esquerdo e, em seguida, barra para frente, em seguida, o nome da tag e, em seguida, um colchete ângulo direito de fechamento. Também temos tags de fechamento automático, como este metatag que você pode ver aqui. Você pode ver que esta tag não tem uma tag de fechamento. Vou explicar o que são estas etiquetas. E só para deixar um pouco mais claro o que está acontecendo, eu vou colocar meu cursor depois desta tag corporal de fechamento aqui. Clique com o botão esquerdo do mouse e arraste até o início desta tag head, pressione Tab para recuar. Então esta tag HTML basicamente apenas diz ao navegador que esta é uma página HTML. Podemos ver a tag de fechamento para essa dúvida, Hey, nesta tag HTML precisa ser a tag raiz em nossa página. Todas as outras etiquetas devem vir dentro destas duas etiquetas. 5. Cabeça (HTML): Esta tag head é para adicionar tags que dão ao navegador informações sobre nossa página. Por exemplo, esta tag de título informa ao navegador qual título deve ser exibido na parte superior do navegador aqui. Então você pode ver dentro desta tag título, podemos ver o documento do Word, e isso é o que vemos aqui neste documento guia. Então, se mudarmos esse texto dentro dessa tag para, digamos laranja, e salvarmos isso, podemos vê-lo mudar para laranja no navegador. No entanto, as tags que estão dentro dessa tag head e não exibidas na página, elas fornecem apenas informações ao navegador, como o título da página. Este metatag aqui, ele apenas diz ao navegador que conjunto de caracteres usar, e nós realmente não precisamos nos preocupar muito com isso. Este outro metatag é basicamente apenas dizendo ao navegador como renderizar esta página no navegador. E não precisamos nos preocupar muito com isso. Mas isso é basicamente apenas dizer ao navegador para definir a largura da nossa página para a largura do dispositivo, e também para não ampliar ou reduzir a página. Basta definir o zoom inicial ou a escala inicial para um. Também podemos adicionar outras Meta tags aqui, como um metatag para fornecer uma descrição de nossa página web para motores de busca. Ou um metatag para fornecer uma lista de palavras-chave para motores de busca também. 6. Tags e elementos (HTML): Bem, se queremos criar uma tag ou um elemento que realmente aparece na página, então precisamos colocá-lo dentro das tags body. Então, todos os elementos que realmente dizemos na página irão dentro dessas tags de corpo. Então eu vou cobrir rapidamente algumas das etiquetas que não podemos ouvir. Então, o primeiro tipo de tags que podemos adicionar nossas tags de cabeçalho, o título mais importante é a tag H1. Então, se tivéssemos apenas um suporte de ângulo esquerdo e, em seguida, um e, em seguida, um colchete de ângulo reto de fechamento. E você pode ver que ele é automaticamente adicionado a tag de fechamento, mas se ele tem uma auditoria, então basta digitar isso. Então, colchete de ângulo esquerdo, barra para frente um, colchete de ângulo reto. E assim podemos reproduzir algum texto de cabeçalho dentro desta tag. Então, isto é um título. Guarde isso. E podemos ver esse título na página. Também temos H2, H3, H4, H5 e H6. Então eu vou apenas adicionar esses também. E, a propósito, um atalho para adicionar tags HTML é apenas digitar o nome da tag, como H2. E você deve ver essa coisa de abreviação aparecer e você pode apenas pressionar Tab ou Enter no vírus superior. Então eu vou colocar um texto lá. Muito H3 e H4, H5 e H6. Guarde isso. E podemos dizer todos esses títulos na página. E você pode ver que, por padrão, o texto fica menor para cada nível de cabeçalho. Nós também temos uma tag de parágrafo para adicionar parágrafos. Então esta é apenas uma tag p, então você apenas digita PE, pressione Tab em um lote, uma tag de parágrafo em uma maneira rápida de adicionar algum texto fictício em VS Code é apenas digitando em lorem. E você pode ver que eu sou uma abreviatura. Eu só vou digitar um monte de mensagens. Então vou guardar isso. Digamos que temos um parágrafo aqui e também temos um par de elementos de lista diferentes para exibir listas. Então, em primeiro lugar, temos uma lista desordenada. E se você apenas digitar UL para listas não ordenadas e pressionar Enter e dentro que você deseja adicionar um item de lista de elementos LI e você pode colocar algum texto lá. Vou adicionar outro aliado em algum texto e depois outro aliado, guarde isso. E você pode ver uma lista com marcadores. Pare. Nós também temos uma lista ordenada que irá numerar os itens começando em um. Então eu vou apenas adicionar uma nova linha aqui e selecionar este elemento UL e copiá-lo com Command e dizer, ou pode ser controlado e dizer em seu dispositivo e, em seguida, colá-lo aqui em baixo. Eu só vou mudar essa tag de abertura e fechamento para OL em vez de UL e salvar isso. E você pode ver que esta lista tem itens numerados. Estes elementos são tudo o que é conhecido como elementos de nível de bloco. Elementos de nível de bloco serão sempre colocados em uma nova linha. Então você pode ver que todos esses elementos estão sendo colocados em uma nova linha, em seguida, não colocados ao lado um do outro da esquerda para a direita, eles estão apenas sendo empilhados um após o outro. Então estes são elementos de bloco, mas também temos elementos embutidos que não serão colocados em uma nova linha, como a tag forte, que tornará o texto em negrito. Então, se eu apenas cercar esta palavra aqui em algumas tags fortes, isso, eu vou apenas clicar duas vezes nesta palavra e, em seguida, arrastá-la para o meio dessas tags e salvar isso. E podemos ver que esta palavra é ousada. O que não coloca este texto em uma nova linha porque esta é uma tag embutida ou um elemento embutido. E também temos a tag E M, que é um elemento inline. Então, se eu arrastar essa palavra para essas tags AN e salvar isso, você vê que isso dá ao texto estilo itálico. Há também um monte de outros elementos que podemos usar, como tabelas sobre entradas em Eu não vou entrar no shopping agora. Bem, estes são alguns dos principais. 7. Elementos semânticos (HTML): Então estes são alguns dos elementos que realmente vemos na página. Mas também temos elementos semânticos ou estruturais que não vemos na página, mas que dão as diferentes seções da nossa página. Então, o que significa que eles também ajudam os motores de busca a entender a estrutura da nossa página também. Então eu vou apenas excluir todas essas tags que adicionamos na tag body. Então, apenas para demonstrar alguns desses elementos semânticos ou estruturais, temos um elemento de cabeçalho, que é onde você pode colocar seus sites tinham um, temos um elemento de rodapé onde você pode colocar a foto. Temos um elemento de seção que você pode usar para cercar uma seção de blog. Por exemplo, dentro dessa seção, talk, você pode ter uma tag de artigo onde você iria exibir cada artigo de blog dentro de um desses. Nós também temos elemento suficiente onde você pode adicionar alguma navegação. Temos um elemento de lado onde você pode colocar uma barra lateral. E se tivermos uma seção da nossa página que realmente não se encaixa em nenhuma dessas tags semânticas. E podemos usar uma tag div. Só vou salvar isso. E você pode ver que agora não vemos absolutamente nada na página porque essas tags não adicionam nada à página. Eles apenas nos permitem estruturar nossa página de uma forma lógica que nos ajuda como desenvolvedores a entender o que está acontecendo, na página, e também ajudar os motores de busca em SEO, otimização de motores de busca também. Há também um monte de outras tags que podemos usar para. Eu só vou cobrir esses por enquanto. 8. Header (HTML): Vamos começar a classificar o HTML para o nosso cabeçalho. E se eu apenas pulasse para a página final, então nós vamos ter um cabeçalho realmente simples com um grande fundo, um logotipo à esquerda, e um par de itens de navegação à direita, que nós vamos ligar para os dois páginas. Portanto, faz sentido colocar um cabeçalho dentro de um elemento de cabeçalho. Então eu vou voltar para a nossa página web. Vou apagar todos esses elementos. Além do elemento de cabeçalho. Vou colocar meu cursor entre essas duas marcas aqui. E assim eu vou colocar todos os nossos elementos de cabeçalho aqui. E, por enquanto, não vamos adicionar este logotipo. Nós vamos apenas adicionar uma tag H1, uma tag de cabeçalho com o nome do nosso site dentro dela. É uma boa idéia ter o nome do seu site ou empresa dentro de um dentro do cabeçalho, porque os motores de busca assumirão que este é o nome do seu site ou nome da empresa. Então, nós estamos indo apenas para adicionar tag H1 digitando H um e apertando Enter ou tab. E vamos colocar o nome do nosso site. E eu vou chamar este site de laranja. E eu guardo isso. E agora podemos ver este cabeçalho na página. Agora vamos adicionar esses itens de navegação. Normalmente colocamos itens de navegação dentro de uma tag nav. Então, após esta tag H1, eu vou adicionar uma nova linha e adicionar um elemento nav. Então, vamos digitar o suficiente para inserir uma nova linha e vamos colocar nossos itens de navegação aqui. Eu costumo fazer isso dentro de uma lista desordenada. Então eu vou adicionar uma tag UL dentro disso. Vou adicionar algumas etiquetas LI. Vamos apenas copiar estas etiquetas LI, colá-las no próximo slide. Então nós temos que, nós podemos adicionar links para nossa página usando a tag a ou leucócitos. Então eu vou colocar meu cursor dentro dessas primeiras tags LI, digitar um hit Enter, e ele é adicionado em um vírus arquétipo. Colocamos o texto que queremos exibir neste link dentro desses arquitetos. Então eu vou colocar em casa dentro dessas etiquetas e apertar Salvar. E podemos ver um link lá. Então eu vou apenas copiar esta tag âncora, colá-la dentro do segundo aliado, mudar o texto para cerca porque este será um link para a nossa página sobre, e eu vou salvar isso. E eu também vou cercar esses textos laranja em uma etiqueta âncora também. Uma maneira que podemos cercar rapidamente alguns textos e uma tag é selecionar os textos, iniciar a paleta de comandos escolhendo Exibir e paleta de comando ou usando o tipo de atalho de teclado em wrap. E nós podemos usar este wrap com o comando de abreviação que eu vou disparar por hits uma resposta e, em seguida, digite o nome da tag que queremos envolver, que é uma tag em Enter novamente. E agora está embrulhado este texto em um arquétipo. Muitas tags têm atributos, e este é um atributo aqui, este atributo href de ódio. A estrutura de um atributo geralmente é o nome do atributo e, em seguida, é igual e, em seguida, algumas marcas de fala. Mas ele geralmente coloca o valor dentro dessas marcas de fala. E esse atributo href de ódio diz ao navegador para qual caminho esse link deve ir. E por enquanto eu vou apenas definir todos esses atributos H ref para ir para a raiz do nosso aplicativo. Assim, para a página inicial na raiz do nosso site é sempre barra para cima. Então eu vou apenas colocar barra em cada um desses e salvar isso. E se agora clicarmos nesses links, todos eles levam vai para a página inicial. E você também pode ver na barra de endereço, não vemos mais barra index.html aqui. Porque, como eu mencionei anteriormente, quando você acessar o site sem especificar uma página específica, como barra sobre ponto HTML, ele sempre procurará index.html primeiro, é por isso que ele está carregando esta página no navegador. Ok, Finalmente, vamos apenas adicionar outra tag após o nosso cabeçalho, que irá adicionar uma linha horizontal através da página apenas para dividir as coisas um pouco para nós. Então, após este cabeçalho, eu vou adicionar uma nova linha em outra nova linha. E vamos adicionar uma regra de ódio tipo R ou horizontal. Vou acertar a resposta em “Guarde isso”. Agora podemos ver uma linha em toda a página e eu vou usar esses RH para dividir as diferentes seções de nossa página para que possamos ver o que está acontecendo antes começar a fazer nosso site parecer bonito com CSS, mas nós vão ocultar essas regras horizontais mais tarde usando CSS. 9. Produto (HTML): Ok, vamos adicionar um pouco de HTML para o nosso produto agora. Então eu vou apenas para a página final. Então temos uma lista de produtos aqui. Então, provavelmente faz sentido puxar todos esses produtos dentro de um elemento de seção e, em seguida, despeje cada produto individual dentro de um elemento de artigo. Dentro desses elementos do artigo, podemos colocar todos esses elementos. Então eu provavelmente vou fazer sentido usar cabeçalho H1 para este título aqui, cabeçalho H2 para este título de preço, e, em seguida, um parágrafo para este texto aqui, e, em seguida, um elemento nav para estes itens de navegação aqui com um elemento UL dentro que, com alguns aliados em alguns links, assim como fizemos para nossa navegação de cabeçalho. E então vamos precisar de um elemento de imagem para esta imagem. Então eu vou voltar para a página. Depois disso, hey Char, vamos adicionar um elemento de seção. Eu vou colocar todos esses produtos dentro do elemento seção, e eu vou colocar cada produto individual dentro no elemento artigo. Então muito isso, então para este texto aqui, nós provavelmente poderíamos usar cabeçalho H1. Então vamos adicionar um H1 aqui e eu vou parar com essas mensagens. O novo Olmeca. Incrível. Vamos parar e eu coloco esse preço dentro do H2. Então vou adicionar uma nova linha no H2. Vai puxar a partir de 20069 $9, um monte de nova linha e adicionar uma tag de parágrafo para este texto. Só para adicionar um pouco de Lorem Ipsum, vou digitar Lorem e apertar Enter, e vou guardar isso. Vamos ver como isso está parecendo. Ok, isso está parecendo bem, então vamos adicionar nossos itens de navegação. Então eu estou realmente indo apenas para copiar este elemento nav do nosso cabeçalho, colá-lo após este parágrafo. E, a propósito, se você precisar alterar o recuo em qualquer coisa, você pode simplesmente selecionar algum HTML e pressionar Tab para recuá-lo para a direita, Shift e Tab para empurrá-lo de volta para a esquerda. Eu só vou mudar o texto nestes links para comprar. Saiba mais. Então, o que este pequeno símbolo de colchete ângulo direito, nós não podemos apenas digitar em luz que porque isso vai confundir o navegador porque nossas tags são feitas de colchetes angulares esquerdo e direito. Então, podemos usar entidades HTML para cuspir símbolos como este em cuspir fora este maior do que símbolo que podemos começar e, em seguida, GT para maior do que e, em seguida, um ponto-e-vírgula. Então vou guardar isso. Vamos ver como isso está parecendo. Sim, isso parece muito bom. E provavelmente não queremos que esses links sejam acessados para nossa página inicial. Ainda não sei para onde os links vão. Eles são apenas temporariamente, nós podemos apenas colocar um hash neste atributo H ref, que nós apenas vamos torná-los link para qualquer página que o usuário está atualmente em. Então vou guardar isso. Agora só precisamos desta imagem do produto aqui. Então, para obter uma imagem de graça, eu vou para um site chamado pixabay.com. Não quero procurar o iMac. Role para baixo. Esta é a imagem que eu uso aqui, então eu vou clicar nela. Clique em Baixar, baixe novamente. Vou pegar esta caixa e clicar em Baixar. E baixou nossa imagem. Então nós queremos adicionar isso em algum lugar para a pasta onde o nosso projeto está. Voltei ao VS Code. Mostre a barra lateral novamente acessando Exibir e os pais mostram a barra lateral. Ou você pode usar o atalho de teclado. E eu recomendo vivamente que você conheça todos os atalhos de teclado para sua plataforma porque você poderá trabalhar muito mais rapidamente. Bem, eu só vou mostrar essa barra lateral. Esta é a nossa pasta aqui. Então eu estou realmente indo apenas para clicar com o botão direito do mouse e criar uma nova pasta escolhendo este novo item de pasta, e eu vou chamar isso de recursos de pasta. Colocarei todos os nossos ativos, como imagens, CSS e JavaScript dentro desta pasta. Então, vou clicar com o botão direito nessa pasta de ativos. Vou criar outra pasta. E eu vou chamar esta pasta IMG para imagem. Vamos colocar a nossa pasta dentro da pasta de imagens. Então eu só vou arrastar a imagem é baixada e soltá-la nesta pasta de imagem. Por padrão, o código VS faz esse tipo de coisa irritante onde ele une suas pastas juntas, que está tornando difícil para mim colocar esta imagem dentro da pasta de imagem está atualmente apenas dentro da pasta de ativos. Então, se formos para a página de configurações, indo para Configurações de preferências ou usando o atalho de teclado. E procuramos compactos ou pastas compactas. Podemos ver esta opção pastas compactas para o seu próprio bem que, em seguida, ele vai agora separar todas as nossas pastas em pastas filho, o que é muito melhor. Então vamos fechar isso e parece que ele colocou dentro desta pasta de imagem. Então está tudo bem. Então, vou fechar isto. Vou esconder a barra lateral. E vamos colocar esta imagem após este elemento nav. E fazemos isso usando a tag de imagem ou IMG tag. Então eu vou digitar IMG, pressione Enter neste atributo fonte aqui nós apenas colocar o caminho para a imagem que queremos exibir, nenhum. Se eu apenas abrir a barra lateral novamente, nossa imagem vai estar no caminho barra ativos barra imagem. E então o nome do arquivo da Fox. Vou mudar o nome deste ficheiro aqui. Vou clicar com o botão direito do mouse nele e renomeá-lo para Olmec, tenho PNG, pressione Enter, e eu estou de volta para esta tag imagem e este atributo fonte. Podemos apenas definir isso para cortar ativos barra IMG barra oem, OK, ponto PNG. Eu vou salvar isso e ver a imagem na página é bem grande agora, mas vamos resolver em um segundo este atributo tudo. Podemos reproduzir algum texto alternativo aqui, caso o navegador não consiga carregar a imagem, digamos que a imagem seja excluída ou algo assim, então podemos exibir algum texto como backup. Então eu vou apenas digitar o MAC e este atributo, salve isso. Então, se eu alterar esse atributo de origem para um caminho incorreto, alterando isso para todos os PNG de ponto MUX. Podemos dizer textos alternativos aqui. Em vez da imagem. Vou mudar isso de volta para o caminho correto. Guarde isso. E normalmente é melhor estilizar as coisas usando CSS. Vamos apenas por agora apenas para parar esta imagem ser tão ridiculamente enorme, eu vou apenas adicionar um atributo de largura a esta imagem, que nos permitirá especificar uma largura para ela. Vou definir isso para 400, que significa 400 pixels. Então vou guardar isso. Isso parece um pouco melhor agora. Ok, então esta é toda a maquete para os nossos produtos. Só vou deixar o único produto lá por enquanto, embora vamos adicionar mais alguns produtos mais tarde. 10. Footer (HTML): Então agora só precisamos adicionar essa fossa. Então nós só temos uma foto muito simples aqui com uma borda no topo, um pouco de texto. Então, faz sentido colocar isso dentro de um elemento de rodapé. Então, após este elemento seção, indo para adicionar uma nova linha, vamos adicionar outra página são apenas duas coisas separadas um pouco. Vamos adicionar um quarto elemento. E eu vou colocar um texto aqui, só vou colocar meu nome, Dani Connell nisso, um símbolo de direitos autorais. E um pouco como fizemos com o símbolo maior que antes, para adicionar um símbolo de direitos autorais que podemos fazer e copiar e, em seguida, ponto e vírgula. E então eu vou colocar o ano atual 2021 e salvar isso. Agora temos uma fossa simples. 11. O que é CSS?: Ok, então nós estamos praticamente terminados com HTML por enquanto. Adicionamos nosso cabeçalho. Os produtos são fossa. Isto não parece muito bonito. Então vamos adicionar alguns CSS para fazer esta página olhar bonito e mudá-lo a partir deste para este. Bem, em primeiro lugar, o que é CSS? Bem, CSS significa Cascading Style Sheets e não se preocupe muito com o nome por enquanto. Mas basicamente, CSS nos permite selecionar um elemento que está na página ou um monte de elementos que estão na página. E dê-lhe algumas propriedades de estilo, como cor de fundo, texto, cor, largura, altura, tamanho da fonte, etc. 12. Estilos base e fonte (CSS): A maneira mais fácil de começar a adicionar CSS é apenas estudando uma tag de estilo na nossa cabeça. Então eu vou fazer isso agora depois da etiqueta. Então você só quer adicionar uma tag estilo de abertura e fechamento como essa. Podemos colocar todo o nosso CSS. Portanto, CSS é composto de uma lista de regras. Em cada regra é composto por um seletor que diz ao navegador quais elementos queremos selecionar, quais elementos queremos adicionar estilos. Uma série de propriedades que dizem ao navegador como sobre elemento ou como o grupo de elementos deve olhar. Então não vamos um real que adiciona algum estilo ao nosso body tag, que é basicamente a tag que rodeia toda a página. Então, para esta regra, o seletor será apenas corpo, modo que a serra selecionada. E então nós só queremos adicionar chaves duplas como esta aqui. Podemos colocar nossas propriedades no cabelo. Temos toneladas de propriedades diferentes como cola, fundo, cor, tamanho da fonte, largura, altura. Eu não vou cobrir todos eles neste vídeo, mas vamos cobrir alguns dos mais importantes. Portanto, a cor do texto em uma página é atualmente preta em todos os lugares, o que parece um pouco escuro demais. Então, vamos tornar todo esse texto uma cor cinza escuro. E podemos usar a propriedade color para fazer isso. Então, dentro dessas chaves encaracoladas, podemos começar a cor. Agora podemos atribuir uma cola. E há várias maneiras de fazer isso. Podemos adicionar o nome de uma cor como azul. By the way, queremos terminar cada propriedade com um ponto-e-vírgula como este. Então vou guardar isso. Agora você pode ver que todo o texto é azul. E então por que todo o texto na página fica azul quando só adicionamos um estilo para a tag body. Bem, isso é porque os estilos que adicionamos dois elementos vão cascata para baixo para os elementos filho. Porque cada elemento em nossa página é um filho do corpo, então cada elemento também herdou esta propriedade cola. No entanto, se um desses elementos filho tem sua própria propriedade de cor, que é diferente deste, então essa propriedade irá substituir este estilo que está em cascata para baixo. Então, por exemplo, se formos o estilo das tags p adicionando pagar-nos o seletor e definimos a cor para vermelho. Vou guardar isso. Dizemos que o parágrafo agora é vermelho, enquanto os títulos ainda azuis, porque esses estilos estão descendo da tag body em cascata até esses títulos. E eles também estão em cascata para este parágrafo, mas nós acabamos de substituir isso adicionando uma propriedade de cor ao elemento de parágrafo. Especificamente, vou apagar esta regra de parágrafo por enquanto. Salve isso e volte para esta propriedade de cor. Então podemos usar o nome de uma cor como azul ou vermelho. Há um monte de nomes de colunas diferentes que podemos usar, e também podemos usar o código de cor hexadecimal, como 000, 000, 000, 0, que é o código de cor hexadecimal para preto ou que tinham FF, FF, FF, FF, FF. E esta é a cor do branco. Então você pode ver nosso texto desaparece porque nosso fundo é branco. E também podemos usar códigos de cores RGB. Então, se eu excluir isso e adicionar RGB e, em seguida, parênteses, então nós podemos adicionar um número para o componente vermelho, seguido por uma vírgula, em seguida, um número para o componente verde seguido por uma vírgula, e então um número para o azul componente. Então estamos definindo isso para 0 vermelho, 0 verde, e 0 azul, que é basicamente preto nesses números vão para 55. Então, se eu mudar tudo isso para 55, guarde isso. O texto é agora por quê? Bem, eu vou usar um código de cor hexadecimal para isso. Então eu vou remover isso. Vou definir isso muito duro. E então seis 3s, que é uma cor cinza muito escura, que não é muito preta. Então isso parece muito bom agora, em nosso corpo também tem algum espaço ao redor da borda. Você pode ver que esta regra horizontal que adicionamos não vai bem para a borda da página, não são nenhum deste texto. E isso é porque o navegador em algum estilo padrão para a maioria dos elementos, podemos usar o Chrome DevTools para ver o que está acontecendo aqui. Portanto, abra o Chrome DevTools, você só deseja acessar Exibir Ferramentas do desenvolvedor ou usar o atalho de teclado aqui. E isso abrirá ferramentas de desenvolvedor. Uma coisa que podemos fazer nas ferramentas do desenvolvedor é inspecionar todos os diferentes elementos na página. Podemos ver que estilo está sendo adicionado a eles e podemos ajustar o estilo também. Então, se eu clicar na tag body, podemos ver nossa propriedade color que adicionamos antes. Podemos mudar isso daqui se quisermos ver como fica. Oops, muitos 6 estão lá. Então podemos brincar com nosso estilo dentro disso também. Mas de qualquer maneira, você pode ver aqui diz folha de estilo agente usuário e podemos ver está adicionando uma margem de oito pixels para o corpo. Então esse estilo vem do navegador em si, do Chrome. Em cada navegador tem estilos padrão ligeiramente diferentes para diferentes elementos. Mas de qualquer maneira, eu quero me livrar dessa margem que está sendo adicionada. E se passarmos o mouse sobre o elemento do corpo, podemos ver essa borda laranja ao redor da página. Eu não sou borda laranja é a margem que está sendo adicionado. Então eu quero definir a margem para 0. Então, se clicarmos aqui abaixo após essa propriedade color, podemos adicionar uma propriedade margin e defini-la como 0. E vemos toda essa margem desaparecer. E então agora precisamos adicionar esse estilo à nossa folha de estilos. Então eu vou copiar esta propriedade margin, colá-lo após esta propriedade color, e salvar isso. E essa margem agora é removida permanentemente. Esta fórmula que estamos usando não é muito agradável. Então eu vou substituir isso por um formulário chique. E podemos encontrar toneladas de fontes extravagantes grátis no site do Google Fonts. Então, vou ao Google. Fontes do Google. Não veja o site do Google Fonts. Vou usar esta fonte Roboto, que é uma das fontes mais populares. Então, o momento, então eu vou clicar nisso. Precisamos escolher esses arquivos que quisermos e precisaremos ser regulares. Então eu vou clicar em comunistas gargalos para o normal. E vamos precisar de ousadia também. Então, e se criarmos estilo ao lado da fonte em negrito? E se olharmos para a direita, dá-nos algum código para implementar esta fonte em nossa página web. Então ele nos dá um par de tags de link aqui. Estes precisam entrar. Então, quando uma cópia dessas tags link, e eu vou colá-los acima desta tag estilo em nossa cabeça em salvar isso. E também nos dá uma regra CSS, mas precisamos adicionar, e isso vai para nosso CSS. Então eu vou copiar isso e vamos adicioná-lo ao corpo selecionado aqui. Então vou colar isso aí. E se salvarmos isso, agora teremos uma diversão muito melhor. E também quero esconder esses HR, essas regras horizontais. Para selecionar aqueles, podemos apenas digitar jarra de ódio ou chaves duplas para que você os esconda. Podemos usar a propriedade de exibição. Queremos definir isso para não salvar isso. Essas regras horizontais desapareceram agora. O que fizemos aqui é definir algum tipo de estilos base para toda a página. Então eu vou adicionar um comentário acima destes para rotular esses estilos como nossos estilos base. E então adicione um comentário, apenas indo para adicionar uma nova linha no topo para adicionar um comentário em CSS, nós apenas começamos a barra e asterisco, e então nós fechá-lo com um asterisco, barra direta. Podemos colocar tudo o que quisermos dentro deste comum. Então eu só vou colocar estilos básicos. Isso é apenas um comentário, então isso não está fazendo nosso CSS fazer nada. É apenas um comentário que será completamente ignorado pelo navegador. Estamos apenas usando isso para rotular nosso CSS em, dividi-lo em um número de seções diferentes. 13. Cabeçalho - Cor de fundo (CSS): Vamos adicionar alguns estilos para o nosso cabeçalho agora. Então, queremos que se pareça com isso. Então queríamos ter um fundo cinza escuro e queremos que um título ou um logotipo ficasse à esquerda. Itens de navegação para ser sobre à direita. Então, depois de nossos estilos base aqui, eu vou para Outro comentário que é na verdade um atalho que podemos usar para adicionar um comentário que em um Mac é barra de comando em um laboratório que comenta fóruns no Windows, eu acho que o atalho é Controle e barra de frente. E se você quiser ver todos os atalhos de teclado, agora basta me dar os atalhos de teclado VS Code. E eu vou apenas clicar neste link de associação de teclas do Visual Studio Code. E, em seguida, à direita aqui pulou para baixo para referência de atalhos de teclado. E você pode ver todas as diferentes plataformas aqui. Então, se você quiser ver os códigos de acesso da janela, clique no Windows, e você pode ver uma folha de truques pouco agradável aqui. Então, se qualquer um dos atalhos que eu uso estiver trabalhando no Windows e você estiver no Windows e, em seguida, encontre o atalho de teclado correto aqui. Ok, então nós vamos adicionar alguns estilos para o cabeçalho. Então eu vou colocar o cabeçalho da palavra neste comentário fora uma nova linha. E então queremos estilizar este elemento de cabeçalho que tem esta gravata laranja, todos esses links de navegação. Poderíamos apenas usar cabeçalho para o nosso seletor como este e começar a adicionar alguns estilos. No entanto, mais tarde, podemos ter outros elementos de cabeçalho em nossa página ou em nosso site. Por exemplo, você pode ter um cabeçalho de produto ou algo parecido. E se nós apenas usar o elemento de cabeçalho seleciona como este, ele vai estilizar cada elemento de cabeçalho único que está em nosso site. E agora, nós só queremos estilizar este cabeçalho. Então, o que podemos fazer para ser mais específico com nossos seletores é adicionando uma classe a um elemento e, em seguida, usando essa classe como nosso seletor. Então eu vou para este elemento de cabeçalho aqui, pouco antes do colchete ângulo de fechamento. Eu vou adicionar um espaço, e então eu vou adicionar um atributo chamado classe. Eu vou definir o valor deste cabeçalho dois para usar um seletor de classe. Em nosso CSS, podemos apenas fazer ponto e, em seguida, o nome da classe eo nome do cabeçalho classes. Então nós só queremos fazer cabeçalho, e agora estamos apenas selecionando este elemento específico. Ok, então nós queremos que este tenha uma cor de fundo escuro agradável como este. E poderíamos fazer isso com a propriedade de cor de fundo. Então, dentro desta seleção, então eu vou apenas adicionar uma cor de fundo. By the way, no VS Code, você pode ver este IntelliSense, que ajuda você a ver quais propriedades estão disponíveis, são rapidamente, adicioná-los à página, e também adiciona os dois pontos, a floresta de ponto-e-vírgula. Vou definir isto com a mesma cor que usamos no nosso corpo. Tão dura. 3, 3, 3, 3, 3, 3, porque todos esses números são iguais, poderíamos realmente mostrá-lo sobre isso para a leveza de três, 3. Eu também vou mudá-lo aqui. Vou guardar isso. E agora podemos ver essa cor de fundo cinza em nosso cabeçalho. 14. Cabeçalho - Posicionamento de logotipo e navegação (CSS): Estou dirigindo itens de navegação apropriadamente empilhados um em cima do outro, mas queremos que o título seja sobre a esquerda, a navegação para ser sobre a direita, como você pode ver na página final aqui. E podemos fazer isso usando a propriedade display em um cabeçalho. Então eu vou adicionar uma propriedade chamada display, e nós queremos definir isso para flex. Esta propriedade flex irá transformar este elemento em uma linha com todos os seus elementos filho diretos. Então este e este elemento nav exibido lado a lado dentro dessa linha. Então você pode ver este título e esses itens de navegação. E agora lado a lado, no entanto, nós não queremos esses itens bem ao lado um do outro assim. Queremos que os itens de navegação estejam bem aqui. Então, para fazer isso, podemos usar a propriedade justify content e podemos definir isso para um monte de coisas diferentes, como centro para colocar esses elementos no centro da corda. Ou podemos dizer isso para flexionar e forçar todos os elementos filho para a direita. Bem, o que queremos fazer é espalhar os nossos itens por toda esta fila. Então, essencialmente, queremos colocar espaço entre os elementos. Para fazer isso, podemos definir isto para o espaço entre, e eu guardo isso. E agora podemos ver que nosso título está sobre a esquerda, em nossos itens de navegação estão sobre a direita. 15. Cabeçalho - Estilos de texto: Então vamos adicionar algum estilo a esses links em nosso cabeçalho porque eles atualmente têm essa cor púrpura horrível. E novamente, esse é o estilo padrão que vem do navegador. E se você tiver o Chrome DevTools aberto e clicar neste pequeno botão aqui em cima. Podemos clicar em um elemento para ver o que está acontecendo. Então, se nós rolar para baixo aqui, nós não podemos realmente ver esta cor roxa em qualquer lugar, mas ela está sendo adicionada pelo navegador. E se formos para esta aba computada, podemos vê-lo aqui, esta cor roxa. Então eu vou definir a cor dessas pernas para uma cor cinza claro agradável. Então, queremos selecionar todos estes um tags que estão dentro deste cabeçalho. Para fazer isso, podemos apenas novamente o nosso cabeçalho. E depois disso um, porque queremos selecionar as tags a que estão dentro do cabeçalho. Então isso é basicamente apenas dizendo selecionar todas as tags a que estão dentro deste pai com uma classe de cabeçalho. Então eu vou definir a propriedade de cor para uma cor cinza claro. Então eu vou usar o CCC silencioso. Vou guardar isso. E isso parece um pouco melhor. E eu também quero me livrar desses sublinhados. E poderíamos fazer isso com a propriedade de decoração de texto. Então eu vou definir a decoração do texto para NADH. Vemos as linhas desaparecerem. Nós vamos reduzir o tamanho da fonte nesses também. Eu poderia fazer isso com a propriedade tamanho do traço da fonte. Há uma série de diferentes tipos de valores que não podemos, não podemos valores de pixel como 14 pixels, que basicamente definirão a altura do texto para 14 pixels. Também podemos usar rems em EMs. Eu não vou entrar muito nisso agora. Então temos rems, temos átomos. Mas o mais simples de entender são os pixels. Então eu só vou usar pixels neste vídeo. Vou definir o tamanho da fonte para 14 pixels, e vou salvar isso. 16. Cabeçalho - Efeitos e animação: Eu também gostaria que esses links mudem de cor quando passamos o mouse sobre eles, agora, eles apenas permanecem os mesmos. E é melhor se a cor muda para que o usuário saiba que eles podem ser clicados para estilizar um elemento que está sendo pairado. Podemos usar um pseudo seletor. Então o que podemos fazer é novamente, eu tinha um, um, mas agora queremos adicionar dois pontos e, em seguida, passar o mouse como nosso seletor. Então, isso é basicamente dizer a esses estilos para todas as tags que estão dentro do elemento que tem uma classe de cabeçalho que estão sendo pairados atualmente. Então esses estilos que adicionamos, Ei, só vamos ser adicionados quando nós realmente passar o mouse sobre um elemento. Então, quando passarmos o mouse sobre o elemento, eu quero mudar a cor. Então eu vou mudar a cor para branco, e eu vou guardar isso. E se eu passar o mouse sobre esses elementos, podemos vê-los mudar para branco quando passarmos sobre eles. Também podemos adicionar um pouco de animação a isso, para que a cor não mude de repente. livro muda gradualmente do cinza claro para o branco usando a propriedade de transição. E queremos adicionar essa propriedade de transição para o próprio elemento em vez do pseudo seletor. Então, vamos adicionar isso aqui onde estamos selecionando a tag a dentro do cabeçalho. Então, queremos adicionar uma propriedade de transição. Podemos especificar uma propriedade CSS que queremos animar. E queremos animar a propriedade de cor. Então podemos começar a cor aqui. E então podemos adicionar uma duração para esta animação. Então, se eu definir isso para um em 1 segundo, eu vou salvar isso e passar o mouse sobre um desses links. Podemos dizer que muda muito lentamente de cinza para branco quando passamos o mouse sobre ele. Bem, isso é um pouco longo demais. Então eu vou mudar isso para nada 0,3 segundos. Vou guardar isso. Agora temos uma pequena animação sutil agradável quando passamos o mouse sobre esses links. 17. Cabeçalho - Estilos de Nav: Ok, vamos melhorar o estilo desta lista de navegação aqui. Atualmente, esses itens são empilhados uns sobre os outros. Deve porque elementos LI bloco elementos por padrão, que irá estocar o que queremos que eles vão lado a lado como este. E novamente, podemos usar a propriedade display flex para fazer isso. Então vou voltar para aquela página. Vou adicionar um novo seletor. O que queremos fazer é definir este URL para exibir flex para que os elementos dentro dele sejam colocados lado a lado em uma linha em vez de estoque. Então, o seletor, então novamente, queremos adicionar cabeçalho. Queremos selecionar o elemento nav e, em seguida, o elemento UL dentro que. Queremos definir isso para exibir, flex. Guarde isso. E podemos ver que esses itens estão empilhados lado a lado. Nós ainda temos alguns pontos na lista itens como essas balas, você pode ver lá, nós podemos ver uma bala cobrindo a palavra casa lá. E para nos livrarmos disso, podemos definir uma propriedade chamada list-style como não. Vou guardar isso e veremos a pequena bala desaparecer agora. 18. Cabeçalho - de marque e preenchimento: Por padrão, os URLs têm alguma margem e preenchimento adicionados a eles. Se passarmos o mouse sobre o elemento aqui, podemos ver a margem em laranja na parte superior e na parte inferior. E podemos ver o estofamento à esquerda nessa cor verde. Então eu também vou definir a margem para 0 e o preenchimento para 0 também. By the way, margem é basicamente espaçamento que vai em torno do lado de fora de um elemento. E preenchimento é espaçamento que vai dentro do elemento. Só para demonstrar que vou adicionar uma propriedade border para as tags a no cabeçalho. Então eu vou definir a borda dois pixels, branco sólido. Guarde isso. E podemos ver uma pequena borda em torno de cada uma dessas tags agora, então se eu definir um preenchimento de 10 pixels, você pode ver que ele é adicionado 10 pixels ao redor do interior do elemento porque a borda que adicionamos está no mais distante do elemento. E podemos ver que o espaço foi adicionado dentro do elemento. Mas se eu mudar essa regra para marcar dez pixels, em vez de preencher e salvar isso, você pode ver que agora é adicionado esse espaço ao redor do lado de fora do elemento. Então essa é a diferença entre margem e preenchimento. Só vou me livrar dessa regra de margem e dessa regra de fronteira e salvar isso. Esta tag de cabeçalho que estamos usando aqui também vai ter alguma margem padrão. E podemos ver a margem em laranja na parte superior e inferior do elemento lá. Então eu também vou direcionar isso e definir a margem e o preenchimento para 0. Então vou colocar esta regra aqui. Então cabeçalho H1, porque este título está em um elemento H1, vamos definir isso para a margem 0, preenchimento 0. Agora que nós removemos todo o preenchimento e margem em torno desses elementos, Eu vou cabeçalho está olhando um pouco pequeno. Não tínhamos estofamento ao redor da borda. Então vamos adicionar algum preenchimento ao cabeçalho. Então eu vou segmentar o elemento de cabeçalho em uma propriedade de preenchimento. E se quisermos definir o preenchimento em todas as direções ao redor do elemento, podemos apenas adicionar um único valor de pixel como este. Então, dez pixels, eu guardo isso. Então isso vai adicionar 10 pixels de preenchimento à esquerda, 10 pixels na parte superior, 10 pixels à direita, e 10 pixels na parte inferior. Mas também podemos especificar todas essas direções de preenchimento individualmente. Então, se eu definir isso para 10 pixels, 20 pixels, 30 pixels e 40 pixels, bem isso vai fazer são nossos 10 pixels de preenchimento para o topo, 20 pixels para a direita, os pixels para a parte inferior e 40 pixels para a esquerda. Então ele vai ao redor no sentido horário começando no topo. Então superior, direita, inferior e esquerda em Margin funciona da mesma maneira também. Ou se queremos apenas definir a margem vertical com um valor na margem horizontal ou preenchimento com um valor, então podemos apenas especificar dois valores. Então, se definirmos isso para 10 pixels e 20 pixels, isso vai adicionar gorduras. Vou guardar isso. Isso vai adicionar 10 pixels para a parte superior e inferior e 20 pixels para a esquerda e direita. Estou feliz com essa quantidade de estofamento agora, a propósito, estou ampliado para a página aqui. Assim, em um Mac, se você quiser ampliar ou diminuir o zoom, você pode usar o comando mais para ampliar ou Command menos para diminuir o zoom. Então, eu só vou ampliar para um 100 por cento que possamos ver como isso realmente vai parecer. Ok, isso está parecendo muito bom. Precisamos de um pouco de espaço entre estes itens de navegação. Então eu só vou rolar para baixo para esses estilos UL. Depois desta, vou segmentar as etiquetas A que estão dentro desta UL, esta lista não ordenada. Então ponto cabeçalho nav UL. E eu só vou adicionar uma margem à esquerda. E para fazer isso podemos usar a margem traço esquerda propriedade. E vamos definir isso para 50 pixels. Guarde isso. E podemos dizer que é adicionado 50 pixels à esquerda de cada um desses links. Então, agora temos um pouco de espaço entre nossos links. 19. Cabeçalho - congele o conteúdo: Ok, então este cabeçalho está muito bonito agora neste tamanho, se eu fechar o DevTools e esticar isso, você pode dizer em uma tela realmente ampla, nós temos nosso título bem aqui, em nossos links bem ali, o que não parece muito bom. Então, precisamos restringir o conteúdo deste cabeçalho para uma largura particular no meio da tela. Ok, então eu vou acertar uma aula reutilizável para isso. Então eu vou adicionar outra seção de estilos entre nossos estilos base e nossos estilos de cabeçalho. Então, quando eu adicionar um comentário aqui, e eu vou chamar isso de reutilizáveis. Ou pode chamá-lo de genérico ou algo assim. Vou configurar uma classe chamada restrição para restringir conteúdo. Para o meio da página. Vou dar a esta classe uma largura máxima com a propriedade de largura máxima. E nós vamos definir isso para 960 pixels, que é uma espécie de largura máxima padrão para páginas da Web ou para o conteúdo de páginas da web. Então, vou guardar isso. Eu vou saltar para baixo para o nosso cabeçalho no HTML. Vou cercar tudo o que está dentro do cabeçalho com uma div, com uma classe de restrição. A div é apenas um elemento que podemos usar quando algo que estamos adicionando à página, ele não se encaixa perfeitamente em algo como cabeçalho, seção ou artigo ou algo assim. Então você vê muitas dibs em páginas da Web. Então vamos substituir tudo o que está dentro do cabeçalho, dentro desta div. By the way, eu apenas selecionei tudo não utilizado Alt em abrir para baixo para movê-lo para cima em que div para o seu atalho pode ser diferente no Windows. Então vou guardar isso. Isso tem uma massa um pouco errada porque nós tínhamos esses elementos de cabeçalho para exibir flex, que estava mudando isso em uma linha e fazendo todos os seus elementos filhos diretos exibir lado a lado ao longo da corda. Mas agora que adicionamos esta div, este é agora o elemento filho direto do cabeçalho. Então nós agora realmente você precisa adicionar a regra de exibição flex a esta div em vez do cabeçalho, porque este é agora o elemento que queremos ser uma linha. Estes são os elementos que queremos exibir lado a lado. Então, vou voltar aos nossos estilos. Depois que este ponto tinha uma regra, eu só vou ponto restrição ponto. Vamos mover esta regra flexível de exibição e esta regra de conteúdo justificar para baixo para isso. Então vamos chamá-los, colar aqueles aqui. Vou salvar que os elementos agora são exibidos corretamente novamente, embora por causa dessa classe de restrição, adicionamos esse conteúdo em nosso cabeçalho agora tem uma largura máxima de 960 pixels. Então, se eu clicar com o botão direito do mouse nisso e clicar em Inspecionar, esticar o navegador um pouco e passar o mouse sobre os elementos restritos. Você pode ver esta pequena coisa drop-down você lá, que diz que este é 960 pixels de largura. No entanto, queremos que isso seja no centro do cabeçalho e não sobre a esquerda assim. Então, para fazer isso, podemos apenas saltar de volta para esta classe de restrição. Podemos definir a propriedade margin. Vou definir isto para 0 na parte superior e na parte inferior. Bem, então nós vamos configurá-lo para também na esquerda e direita e definir isso para auto, vai forçar este elemento, este elementos de restrição para estar no centro. Então vou guardar isso. Agora, se eu esticar isso, você pode ver todo o conteúdo do nosso cabeçalho está no centro da página. Ok, então eu só vou ajustar nosso CSS um pouco aqui. Vamos reutilizar essa classe de restrição mais tarde para manter todo o conteúdo do nosso produto aqui no centro também. Então este preenchimento que adicionamos ao cabeçalho aqui, eu vou movê-lo para essa classe de restrição, porque o que quer que você use esses elementos de restrição em classes, você geralmente precisa de um pouco de preenchimento nesses elementos. Então, o que fazemos isso colocando para cima neste seletor de restrições, e eu vou salvar isso. Tudo ainda parece exatamente o mesmo. 20. Cabeçalho - Adicione um logotipo: Ok, então agora eu só quero substituir este título laranja por um logotipo como este laranja que você pode ver lá. Então eu vou pular para um site chamado Icon finder.com. Vou procurar laranja. Vamos rolar para baixo para que eu possa encontrar algo que pareça belos artefatos. Eu vou rolar de volta para o topo. Altere esta opção aqui para livre, que possamos ver apenas os ícones livres. Esta laranja parece muito bonita. Então, vou clicar nisso. Vou escolher 64 pixels porque não precisamos que isso seja muito grande. Vamos baixar isso. Vou abrir a barra lateral no VS Code, arrastar este ícone para a nossa pasta de imagens. Vou mudar o nome para PNG laranja dot. Então eu vou clicar com o botão direito Renomear e laranja dot PNG. Vamos colocar esta imagem em nosso cabeçalho em vez deste título. Então vou esconder a barra lateral de novo. Pule para este cabeçalho que tem o texto laranja nele. Deixe esta mensagem aqui. Este imposto laranja porque esse é o título do nosso site. Então, é uma boa idéia para fins de SEO deixar esse texto aqui, mas podemos escondê-lo mais tarde com CSS. Então eu vou apenas dividir esses elementos em duas novas linhas como esta. E eu vou dividir o texto dentro disso, uma tag em novas linhas também. O que eu vou fazer é envolver este texto em uma tag span, que é apenas um tipo de elemento inline genérico que podemos usar. Então eu só vou disparar o envoltório com a abreviatura ordenada. Enrole isso em um espaço e eu guardo isso. E você pode dizer que eu não fiz, esta tag span não mudou nada aqui porque este é um elemento inline, é basicamente como a versão inline de um div. Ele não adiciona nenhum estilo em particular ou qualquer coisa, apenas nos dá uma maneira de segmentar parte específica do nosso conteúdo e, em seguida, estilizá-lo. Então eu vou pular para estilos. E depois deste cabeçalho H1, estilo ponto cabeçalho H1. E então eu vou mirar este lugar. Então vamos desovar aqui. Apenas defina isso para não mostrar nada. Guarde isso. Podemos dizer que o texto agora desapareceu, embora ainda esteja na página para SEO, para motores de busca e coisas assim. Então, depois disso, eu vou adicionar uma tag de imagem digitando na guia IMG hit em. Nossa imagem vai ser barra ativos barra imagem barra ponto laranja PNG. Assim, no atributo fonte irá adicionar ativos barra barra IMG barra laranja ponto PNG no atributo alt ou apenas adicionar laranja. Guarde isso. Agora podemos ver a laranja na página. No entanto, parece um pouco grande. Então eu vou apenas adicionar um atributo de largura a esta imagem. E, de fato, vamos usar CSS para fazer isso. Essa é a maneira mais correta de fazer isso. Então é aqui que estamos mirando que o ponto é no H1. Então vamos adicionar uma regra após esse ponto cabeçalho H1 e, em seguida, I e j. eu vou definir a largura para, digamos 30 pixels, e eu vou salvar isso. Esta imagem agora tem 30 pixels. Esta imagem fez nosso cabeçalho um pouco mais alto. E embora a imagem seja o centro vertical deste cabeçalho, esses itens à esquerda, eu não estou bem no centro. Podemos corrigir isso adicionando uma propriedade flex ao nosso elemento flex, que é este elemento restrição que está aqui, que está dentro do cabeçalho. Então, neste seletor de restrição de cabeçalho, podemos adicionar uma nova propriedade chamada align items. E se definirmos isso para censurar, salvar isso, agora podemos ver que todos esses elementos em nosso cabeçalho agora no centro vertical. Ok, então eu acho que nós terminamos com este cabeçalho por enquanto em termos de CSS. 21. Produto - Texto e imagem em lado a lado (CSS): Vamos adicionar um pouco de estilo à listagem de produtos agora, se eu apenas voltar para você a página final, o que nós queremos fazer é melhorar os estilos de todos os títulos. Parágrafo alguns estilos para os botões. E queremos usar o display flex novamente para exibir todas essas coisas tecnológicas à esquerda, à imagem, à direita. E também queremos restringir o conteúdo ao meio da página, como fizemos com nossos elementos de cabeçalho. Então vou voltar para a nossa página. E a primeira coisa que queremos fazer é contentar. E podemos usar essa classe de restrição que adicionamos antes. Seção reutilizável. Podemos usar essa classe neste elemento seção porque todos os nossos produtos artigos vão estar dentro desse elemento. Então, podemos apenas falar sobre classe para esta seção. Então classe é igual a restrição. Guarde isso. E agora todo o conteúdo do produto é limitado ao meio da página para uma largura máxima de 960 pixels. E a propósito, a razão pela qual usamos a largura máxima nesta classe em vez de apenas largura, é porque se a janela de visualização fica menor que 960 pixels, que a div irá diminuir, mas não vai ficar maior, um maior, eu deve dizer, 960 pixels. Certo, então restringimos nosso conteúdo. Agora queremos usar display flex para exibir todo esse texto fora à esquerda, na imagem à direita. Então eu vou pular para a maquete para este artigo. E se definirmos este artigo para exibir flex, que fará com que todos os seus filhos diretos sejam exibidos lado a lado em uma fileira. E nós não queremos o H1 e H2 e a tag de parágrafo todos lado a lado indo da esquerda para a direita, nós só queremos todos os textos desses botões à esquerda, na imagem, à direita. Então, dentro deste artigo, eu vou adicionar uma div e nós vamos dar-lhe uma classe de produtos, textos traço, banheira. Vou colocar todo o conteúdo de texto nesses links de navegação dentro desse div. E então eu também vou cercar esta imagem dentro de um div. E vamos dar a isso uma classe de produtos, imagem traço, mover a imagem para cima naquela div. Vou guardar isso. E agora queremos definir este elemento artigo para exibir flex, que irá transformar este elemento em uma linha e exibir esta div com o nosso texto nesta div com a nossa imagem lado a lado. Então primeiro vou adicionar uma aula a este artigo. Vou chamar-lhe produto. E vamos adicionar alguns CSS a este elemento. Então vamos adicionar uma nova seção de CSS com um comentário, e eu vou apenas colocar o produto lá. Portanto, queremos segmentar a classe de produto. Se nós temos isso para este elemento artigo, queremos definir isso para exibir, flex, salvar isso. E agora podemos ver todas as coisas tecnológicas estão à esquerda e a imagem está à direita. Apenas para ter certeza que ambos os textos conceito sobre a imagem centrada verticalmente, podemos usar novamente a propriedade itens align. Então defina que o sensor deve ser alinhado itens. Então eu tenho que ir ao centro. E podemos ver que o texto na imagem está centralizado verticalmente. 22. Produto - Border, preenchimento e posicionamento (CSS): Eu não quero exibir uma pequena borda entre cada produto. Então eu vou adicionar uma propriedade de borda inferior, que irá adicionar uma borda apenas na parte inferior deste elemento de produto. Eu vou definir isso para um pixels, que basicamente significa que a borda terá um pixels de espessura. Então dois sólidos, o que significa que haverá uma borda sólida porque nós também podemos definir isso para tracejado. Um par de outros diferentes. O que costumamos usar sólido. Então, um pixel sólido e, em seguida, especificamos a cor. E eu vou configurá-lo para CCC. Guarde isso. Agora temos esta pequena fronteira. E eu acho que poderíamos fazer isso um pouco de preenchimento na parte superior e inferior de cada produto ou que temos um bom espaço entre o conteúdo na fronteira. Então eu também vou adicionar uma propriedade de preenchimento aqui, quase no preenchimento superior e inferior, digamos 100 pixels e o preenchimento esquerdo e direito para apenas 0. Então vou guardar isso. Agora temos um pouco de espaço na parte superior e na parte inferior estão agora este texto à esquerda, nesta imagem à direita, eu não sou 5050. O TextContent é um pouco mais amplo do que o conceito de imagem. O que precisa ser 5050. Então, o que podemos fazer é direcionar tanto a div de texto do produto na div imagem do produto e outras propriedades para aqueles. E se quisermos segmentar diferentes seletores de uma só vez, podemos fazer isso assim. Então queremos segmentar os textos do produto DIV, Deixe-me apenas adicionar uma vírgula e, em seguida, adicionar o nosso segundo seletor para a div imagem do produto. Então vírgula de texto ponto-produto, em seguida, adotar produtos traço imagem. Podemos usar a propriedade flex para dizer a esses elementos como, por que eles devem estar nesta corda de fluxo e se eles devem crescer ou encolher. Portanto, a propriedade flex tem três valores. A primeira propriedade determina a largura base do elemento e queremos configurá-lo para 50 por cento. O segundo valor determina se esse elemento deve crescer. E eu não quero que esses elementos cresçam sobre eles para ficar 5050. Então eu vou colocar 0. E, em seguida, o terceiro valor determina se este elemento deve encolher, e eu não quero que ele encolha. Então, novamente, vamos definir isso como 0 no ponto e vírgula, exceto que estes são agora 5050. Eu não quero ter certeza que esta imagem ocupa todo o espaço deste 50% desta linha. Então eu só vou mirar esta imagem. Então, um monte de outro seletor aqui. Então eu quero direcionar a div imagem do produto ponto, e então eu quero direcionar a imagem dentro dela, que é esta imagem aqui. Queremos definir a largura para um 100 e, em seguida, salvar isso para garantir que esta imagem sempre preenche o espaço disponível neste 50% da linha que esta div está ocupada. 23. Produto - Estilos de texto (CSS): Ok, então agora vamos melhorar os estilos de nossos textos aqui, esses dois títulos neste parágrafo. Então, após este seletor, eu vou segmentar esta tag de página quente. Então eu vou adotar o texto do produto, um porque queremos atingir um que está nesta div com uma classe de texto do produto. Vou definir o tamanho da fonte para 48 pixels. Vamos tornar isto agradável e grande. Guarde isso. Vamos reduzir a margem abaixo deste título do abet. Então eu vou definir a margem inferior para 25 pixels. Guarde isso. E isso traz este rumo um pouco mais perto do primeiro cenário. Agora eu vou mudar o tamanho da fonte deste segundo título. Então, um monte de novos produtos seletivos, textos holandeses que H2, porque este é um H2 e vamos definir o tamanho da fonte para 21 pixels e salvar esse último pouco menor. Agora, eu não quero definir o tamanho deste tamanho de fonte de parágrafo para o mesmo tamanho que o segundo cabeçalho. Assim permitidos textos traço do produto e, em seguida, pagar porque esta é uma tag de parágrafo, p tag. Novamente, defina o tamanho da fonte para 21 pixels e salve isso. E podemos fazer com um pouco mais de espaço entre as linhas neste parágrafo. E podemos fazer isso com a propriedade de altura da linha. Então, se definirmos isso para um, salvá-lo, isso será basicamente não há espaço entre linhas. Então eu vou aumentar isso para 1,4 e salvar isso. E vamos apenas olhar um pouco mais fácil de ler com aquele pouco de altura da linha. Ok, vamos discar esses links de navegação um pouco. Vamos rolar para baixo até a classe de formatura maquete até este elemento de navegação. Chamamos este produto de traço suficiente. Guarde isso. Vou usar esta classe para criar esses links um pouco. Então, muito a selecionar tanto a imagem do produto. Porque, em geral, você tenta manter seus estilos na ordem dos elementos que estão em sua página. Então permitiu que o seletor aqui. Então, vamos direcionar os produtos. Vou apontar a UL dentro dela, a lista não ordenada. Vamos nos livrar dessas balas. Vou definir a propriedade de estilo de lista para NADH e salvar isso. Eu vou remover a margem padrão e preenchimento e margem e preenchimento para 0 para fazer esses aliados dentro da UL exibir lado a lado, eu vou definir este URL para exibir flex também. Então, muito. Exibir flex e dizer que esses itens estão agora lado a lado. Eu só tenho um pouco de margem para a direita de cada um desses lagos. Então vamos direcionar o elemento nav do produto, o URL e, em seguida, a tag a dentro disso. Porque você pode ver que temos essas etiquetas dentro de cada um desses aliados. Você também pode adicionar a margem ao elemento LI, se quiser. Vou adicioná-lo à etiqueta “A”. Vamos apenas definir isso para margem, certo? Defina para 20 pixels, salve isso. Agora temos um pouco de espaço entre esses links. 24. Botões (CSS): Ok, vamos adicionar um pouco de estilo para nossas caixas agora fazer isso parecer bonito. Então saltei para a página final. Nós temos esses estilos de botões agradáveis. Temos uma caixa laranja em torno de um botão branco com alguns efeitos agradáveis pairar, animações. E faz sentido adicionar essas classes de uma maneira reutilizável porque ele apenas recarregar a página mais tarde. Nós vamos adicionar esses cookies com j, e nós temos o mesmo botão de estilo aqui também. Então eu vou voltar para a nossa página. Vamos adicionar uma classe a cada um destes tags, estas tags âncora de botão. E, a propósito, eu fiz uma seleção múltipla lá colocando meu cursor e mantendo pressionada a tecla Alt e clicando novamente. Isso nos permite digitar em dois lugares ao mesmo tempo. E a citação curta pode ser diferente na sua plataforma. Então, basta verificar a folha de truques. Certo, então vamos adicionar um pouco de estilo para essa aula de Boltzmann. Isto vai ser reutilizável, por isso colocamos na nossa secção de reutilizáveis. Botão de ponto. Por enquanto eu só vou fazer esses dois botões laranja por este, mas vamos criar um laranja em um branco mais tarde. Então, queremos definir uma cor de fundo. Então, eu vou adicionar uma propriedade de cor de fundo, e eu vou definir isso para áspero E F6 900. Vou guardar isso. E, a propósito, você pode usar este pequeno seletor de cores se quiser escolher uma cor diferente. Quero que a cor do texto nestas garrafas seja branca. Então eu vou definir a propriedade de cor para branco, salvar isso. E eu não quero remover esses sublinhados. Então, como fizemos antes, vou definir a decoração de texto para não remover esses sublinhados. Vou adicionar um pouco de preenchimento a esses botões. Então um monte de propriedade de preenchimento e permitiu oito pixels de preenchimento para a parte superior e inferior, 16 pixels de preenchimento para a esquerda e direita, agora temos um preenchimento iceberg. Eu não quero adicionar algumas bordas arredondadas. Estes botões, você pode ver aqui. E podemos fazer isso com a propriedade de raio de fronteira. Então, queremos definir o raio da fronteira. Vamos definir para 20 pixels. Guarde isso. E agora temos estas belas bordas arredondadas. Quero ter botões laranja e botões brancos, não apenas botões laranja. Então temos um laranja, o branco. Então, o que poderíamos fazer é que poderíamos ter nossos estilos básicos de botão nesta classe de botão. E então poderíamos ter algumas classes adicionais para mudar as cores nos diferentes botões. Então, além desta classe óssea sem um espaço na parte inferior, outra classe para ele, vou adicionar uma classe de botão tracejado laranja, e adicionar neste botão Saiba Mais que queremos ser branco. Muita classe de botão, branco. Guarde isso, e eu vou voltar para estilos de botão muito. O seletor laranja Watson, e vamos mover nossa cor de fundo, propriedades de cor para baixo para este seletor. E se eu salvar isso, agora só vemos essas cores neste botão à esquerda, que tem o botão laranja classe. Vamos adicionar um seletivo para o Watson branco. Watson arrombou a mancha branca e vai ser branca. Então eu vou definir a cor de fundo para branco. Vou definir a cor para a mesma cor laranja que temos no fundo deste botão. Então eu vou copiar este código de cor e colá-lo lá. E isso parece muito bom agora. Então agora só precisamos de alguns efeitos sobre esses botões. Então, após o seletor laranja Watson, vamos adicionar um pseudo seletor pairar. Então coloca indústria laranja cólon pairar, pairar. Vamos mudar ligeiramente a cor de fundo. Eu só vou copiar este código de cor, colá-lo aqui. E então eu vou ver se eu posso usar este seletor para selecionar uma cor laranja mais clara. Então eu só vou mover a coisa, a lista de despesas gerais, um tipo de laranja claro e vamos ver como isso parece. Sim, isso parece muito bom. Vamos adicionar uma cor pairar para o nosso quadro branco em breve também. Então, após o seletor branco botão irá adicionar botão traço y, dois-pontos pairar. Vou definir a cor de fundo. Vou apenas dar-lhe uma cor cinza claro. Então eu vou usar um código de cor comentários antes, que é três e. Ela é quase branca, mas não completamente. E isso parece muito bom. Queremos adicionar transições a esses pavimentos como fizemos em nossos links no cabeçalho. Então, podemos apenas usar esta classe botão, que está em ambos os botões na propriedade transição. E queremos fazer a transição da propriedade de cor de fundo. Então, com essa cor de fundo. E novamente, faremos essa transição durar 0,3 segundos. Guarde isso. Agora temos um bom efeito sobre cada um desses botões. Estes botões parecem um pouco próximos do parágrafo. Então eu só vou adicionar um pouco de margem para o topo deste elemento de navegação. Então vamos encontrar o seletor CSS para isso. Portanto, não temos um seletor para o nav do produto diretamente. Então vou acrescentar isso aqui. Produto traço suficiente, margem superior ou foi tentado 20 pixels, talvez 30 pixels. Sim, parece um pouco melhor. Agora eu tenho um pouco de espaço entre os itens de navegação, Este texto, e nós temos um monte de textos aqui neste parágrafo. Então eu vou apenas remover um pouco desse texto. E, por padrão, texto em seu editor no VSCode, vamos continuar movendo para a direita assim em uma linha. Mas podemos transformar o texto em várias linhas se formos para Exibir e, em seguida, alternar quebra de linha, ou você pode usar o atalho de teclado. E o imposto neste parágrafo está agora todo embrulhado. Então eu vou me livrar de um pouco desse texto, talvez tanto assim. Vou guardar isso. Isso parece um pouco melhor agora. 25. Adicione mais produtos (HTML e CSS): Ok, nosso produto, isso então está muito bonito agora. Então, vamos adicionar mais alguns produtos à nossa página. Então eu vou selecionar todo o elemento artigo e copiar isso. Cole outro depois, e depois outro. Novamente. Vou guardar isso. E agora podemos ver três produtos na página. Vou mudar este segundo produto, dois produtos diferentes com uma imagem diferente. Então eu vou voltar para o site pixabay e vou procurar por um MacBook. Veja, podemos encontrar uma bela foto de um MacBook. Este parece muito bom. Então, quando eu clicar sobre isso, baixar que eu vou abrir minha barra lateral, arrastar esta imagem para a nossa pasta de imagens. Na pasta de ativos. Vou renomear este arquivo para overbook dot PNG. Em seguida, vou fechar esta imagem e ocultar a página da barra lateral novamente na tela. Então eu vou mudar o produto intermediário. Então, o artigo do meio, eu vou mudar o atributo fonte nesta imagem para a imagem que acabamos de baixar, que é barra de ativo barra 0 livro ponto PNG. E eu vou mudar o texto antigo para 0 livro também. Diga que podemos ver essa imagem lá. E eu vou mudar o texto aqui para o novo OH, livro. E este, vou mudar de incrível para incrível. Vou guardar isso. Portanto, agora temos dois produtos diferentes fora para ser bom se pudéssemos reverter a ordem em alguns desses produtos para que a imagem esteja à esquerda e o texto está à direita. Uma maneira de fazermos isso é trocando esses dois divs. Então, trocando a imagem do produto e o texto div assim, e poderíamos fazê-lo dessa maneira. O que poderíamos realmente fazer isso com CSS. Então vamos desfazer isso e colocá-los de volta onde estavam. Guarde isso. E usamos CSS para fazer isso em vez disso. Então o que vamos fazer é sobre esses produtos intermediários, nesta etiqueta de artigo com uma classe adicional chamada produtos reversos. E vamos usar essa classe para reverter os itens nesta linha flexível. Então a imagem está à esquerda, no texto está à direita. Então eu vou voltar para o nosso CSS. Após este seletor de produtos, eu vou adicionar produtos ponto reverter para inverter a ordem dos itens. Esta linha flexível, podemos apenas adicionar uma propriedade de direção flexível e definir isso para linha traço reverso. E eu guardo isso. Podemos dizer que esses dois itens nesta linha flexível de agora mudou. O espaçamento entre esses produtos está parecendo muito bom. Eu acho que temos um pouco muito espaço no topo do primeiro produto aqui, há um pouco muito espaço entre o conceito aqui no cabeçalho, mas eu ainda quero manter o preenchimento que está no topo de todos os outros artigos. Então, como podemos fazer isso? Bem, podemos usar outro pseudo seletor, que é o primeiro seletor filho. Então este artigo aqui é o primeiro filho deste elemento seção. Podemos usar o primeiro pseudo-seletor filho para selecionar apenas este artigo, este primeiro artigo. Então eu vou voltar para os estilos. Após este seletor de produtos, eu vou adotar produtos e, em seguida, um cólon e, em seguida, primeiro traço criança. Então, isso só selecionará o primeiro filho, que tem uma classe de produto. Então, só este produto aqui. Neste primeiro produto, eu só vou reduzir o preenchimento superior. Então eu vou definir colocar área de trabalho. Vamos tentar 20 pixels, guarde isso. E isso parece um pouco melhor agora. E eu também quero ler esta borda do último produto da lista. Então, o último filho, e também temos um pseudo-seletor de último filho que podemos usar para fazer isso. Então eu estou indo apenas para duplicar este primeiro seletor filho mantendo pressionado Alt e Shift e pressionando para baixo novamente no Windows, atalho pode ser diferente. Eu vou mudar isso para último filho e eu vou apenas remover a fronteira desta última criança. Então eu vou definir borda traço inferior para acenar com a cabeça. Vou guardar isso. E agora podemos ver essa fronteira desaparecer no último produto, mas ainda podemos ver a fronteira na parte inferior dos outros dois produtos. Ok, então eu estou feliz com esta listagem de produtos agora. Acho que parece muito bom. 26. Footer (CSS): Então vamos terminar por estilizar esta fossa. Isto vai ser muito simples. Se eu olhar para a página final, nós apenas temos uma borda todo o caminho através do topo e um pouco de preenchimento em torno dela. Então a primeira coisa que queremos fazer é restringir o conceito de manchas como causa. Você pode ver que este texto está à direita para a esquerda aqui. Então o que vamos fazer é saltar para a marcação da fossa, que é aqui. E quero que esta foto tenha uma borda no topo da foto. Mas você pode ver aqui. Então eu quero que esta fronteira vá além da nossa área restrita todo o caminho da esquerda para a direita. Então não queremos adicionar uma restrição à fossa. Em vez disso, queremos adicionar uma div dentro desta água, colocar este conteúdo dentro dessa div, e depois adicionar a classe de restrição a essa div. Então, um monte de div com uma classe de constrangido. E vamos mover esse conteúdo aberto para isso e salvar isso. Volte para a página. Esse conteúdo agora está restrito. Está de acordo com o outro conteúdo. Vamos adicionar um pouco de estilo a esta água. E novamente, não queremos segmentar o elemento rodapé porque você pode ter outras forças em nosso site. Então vamos adicionar uma classe de água a este rodapé, e vamos usar esta classe em vez disso. Então vou saltar para os nossos estilos. Um monte de novo comentário que diz foto. E vamos mirar no rodapé. E eu vou apenas adicionar uma borda de um pixel sólido. E usaremos essa cor cinza claro tão dura CCC. E guarde isso, agora podemos ver essa fronteira. Eu só precisaria adicionar um pouco de estofamento também. Assim como a propriedade de preenchimento. Tenho permissão para 20 pixels de preenchimento na parte superior e inferior e, em seguida, 0 na esquerda e direita. Guarde isso. Esta foto agora tem um pouco de preenchimento em torno dela. 27. Mova CSS para arquivo separado (CSS): Ok, então nós terminamos com CSS por enquanto, embora nós vamos adicionar um pouco mais depois. Mas nós basicamente terminamos o estilo da nossa página e está olhando muito bom, mas temos um monte de estilo. Aqui estão a nossa página HTML. Isso é bastante longo e está fazendo nossa página HTML um pouco confuso. Geralmente não é assim que adicionamos estilos a uma página da Web em uma tag de estilo como essa, o que normalmente fazemos é colocar nosso CSS em um arquivo separado. E há muitas razões para fazer isso. Mantém o nosso projeto organizado. E também se mantivermos nosso estilo em linha, a página HTML como esta, então, quando criarmos mais páginas, por exemplo, mais tarde, vamos criar uma página sobre. Então, toda vez que queremos mudar os estilos, teríamos que mudar os estilos nesta tag estilo tanto na página index.html quanto na página sobre, bem como, o que seria apenas um pesadelo. Então vamos mover todos esses CSS para um arquivo separado. Então eu vou mostrar a barra lateral. Dentro da pasta de ativos, criarei uma nova pasta chamada CSS. Então, dentro disso, quando eu crio um novo arquivo chamado styles.css, e você não precisa usar esse nome. Este arquivo não precisa terminar em CSS ponto. Vou saltar para trás. Index.html copiará tudo dentro desta marca de estilo. Então, vou selecionar tudo isso mantendo pressionada a tecla Shift e clicando na parte inferior. E na verdade eu vou citar muito, e eu vou remover este tag estilo. Guarde isso. Nossa página parece terrível de novo. Mas não se preocupe, porque vamos colá-lo neste arquivo style.css. Eu só vou recuar isto de volta para a esquerda mantendo a tecla Shift pressionada em cima. Eu vou salvar isso, voltar para index.html. Agora precisamos puxar este arquivo CSS para esta página HTML, que vai ocultar a barra lateral. Podemos fazer isso adicionando uma tag de link à nossa cabeça. E se eu apenas começar a digitar no link e eu pressionar Enter, ele irá adicionar automaticamente uma floresta de link de folha de estilo. Então ele está puxando em um arquivo CSS. Nós só queremos adicionar uma tag link para o cabeçalho deste atributo rel e configurá-lo para folha de estilo para que o navegador saiba que esta é uma folha de estilo. Deixe-me apenas querer definir este atributo odeia href para o caminho do nosso arquivo CSS. E nosso arquivo CSS é dot slash ativos slash css style.css. E se eu salvar isso, devemos ver um pente de site, bonito novamente, o que acontece. 28. O que é JavaScript?: Ok, vamos passar para o JavaScript agora. Então, se HTML diz ao navegador quais elementos exibir na página, e CSS diz ao navegador como esses elementos devem olhar eo que o flip é, JavaScript cair? Bem, javascript é uma linguagem de script que nos permite fazer as coisas realmente acontecerem em nossa página, como mostrar um elemento ou ocultar um elemento, ou carregar algum conteúdo dentro de uma determinada parte da página. Podemos usá-lo para criar carrosséis, galerias de imagens animadas e coisas assim. E também nos permite ouvir a entrada do usuário, responder a ela, como quando o usuário clica em um botão ou quando o usuário rola para baixo a página, ou se o usuário usa drogas em elemento ou algo assim. Então, uma coisa simples que podemos fazer com JavaScript nesta página é exibir um banner de cookies na parte inferior da página. Depois de alguns segundos, poderíamos adicionar um botão a esse banner. E então, quando o usuário clica nesse botão, podemos ocultar o banner com JavaScript. 29. Adicione tag de script (JS): A maneira mais rápida de JavaScript para sua página é apenas adicionar uma tag de script ao seu arquivo HTML. E podemos adicionar uma tag de script na cabeça ou no corpo. No entanto, tudo na sua página HTML será carregado de cima para baixo. Então, se você tem um arquivo JavaScript realmente grande que está sendo carregado em sua cabeça, em seguida, o navegador vai esperar que o arquivo JavaScript para carregar antes de começar a carregar todos os elementos da sua página. Assim, colocar JavaScripts em sua cabeça pode realmente parar os elementos em sua página de carregar. Portanto, uma prática comum é colocar suas tags de script na parte inferior de suas tags body. Então vamos adicionar uma tag de script bem na parte inferior do nosso corpo. Então nós só precisamos adicionar uma tag de script como esta, abertura e fechamento tag. E podemos colocar todo o nosso JavaScript aqui. 30. Espere até a página carregada (JS): Antes de começarmos a disparar JavaScript, exibindo coisas na página, queremos ter certeza de que toda a nossa página foi carregada. E poderíamos fazer isso adicionando um ouvinte de eventos ao nosso documento, à nossa página. Então, dentro da tag de script, primeiro queremos chegar ao documento, e nós apenas fazemos isso digitando no documento. E, em seguida, queremos adicionar um ouvinte de eventos ao documento. E para fazer isso, disparamos um método chamado ouvinte de eventos Art. Por este ouvinte evento em você precisa ter certeza de que você capitalizar o a e o L. E então nós adicionamos parênteses como este. Este método espera dois parâmetros e separamos parâmetros com vírgulas. E o primeiro parâmetro é o evento que queremos ouvir. Precisamos colocar as mesmas citações. Você pode usar aspas simples ou aspas duplas no evento que queremos ouvir é o conteúdo DOM carregado. Evento no DOM apenas significa Document Object Model, que basicamente significa apenas a sua página HTML em todos os elementos. Então, queremos disparar algum código depois que este evento foi acionado pelo navegador. Então nós adicionamos um segundo parâmetro aqui adicionando uma vírgula. Eu só vou esticar isso um pouco. E o que queremos fazer aqui é disparar uma função. Então, adicionamos função e, em seguida, parênteses, e, em seguida, um espaço, e, em seguida, chaves duplas alinhadas. E, em seguida, com o cursor dentro destas chaves duplas, basta clicar no editor. Agora podemos acionar algum código dentro desta função depois que este evento carregado conteúdo DOM foi acionado. Então, basicamente, depois de tudo em nossa página ter sido carregado, apenas para ter certeza que isso está funcionando, eu vou apenas disparar um logon de console. Estes são logs de usuário não vê o que podemos ver embora em nosso navegador, em nosso DevTools. E é apenas uma maneira muito útil para descobrirmos se as coisas estão funcionando e nosso JavaScript. Então, para disparar um log, nós apenas via console dot log e nós vamos apenas fazer logout algum texto aqui. Então, queremos colocar algumas aspas dentro desses parênteses. E você pode usar aspas simples ou aspas duplas. E eu só vou sair. Dom está, estou pronto e vou guardar isso. E se voltarmos para o navegador e abrirmos nossas ferramentas de desenvolvimento, recarregamos a página. Podemos ver em nosso console aqui, DOM está pronto. E se você não conseguir ver esse console quando ele só precisa pressionar a tecla Escape. Você pode circulá-lo com a tecla Escape assim. 31. Banner de cookies - HTML: Ok, então antes de adicionar um pouco mais de JavaScript aqui para exibir um banner de cookies, vai precisar realmente criar um cookies usado HTML e CSS primeiro. Então vamos adicionar algum HTML para nossos cookies sido, então depois de fora, o que, Eu vou adicionar um elemento de seção com uma classe de cookies, maneira holandesa, Vou colocar nossos cookies, mas nosso conteúdo aqui, e eu vou apenas adicionar H1 cabeçalho sobre. Vou colocar as mensagens. Este site usa cookies e, em seguida, um monte de parágrafo com algum texto dentro dele. Isso é realmente irritante, inútil. Bandeira de biscoitos. Guarde isso. Vou rolar para baixo. E podemos ver isso no fundo agora. E também precisaremos de um botão no qual o usuário possa clicar para fechar esse banner. Já preparamos algumas aulas para pessoas. Esta classe botão na parte inferior, classe laranja para um botão laranja. Então eu vou cair de volta para este banner, Ladd an, uma etiqueta. E eu vou definir o rascunho de ódio para apenas hash porque este botão não vai ligar em nenhum lugar. Só vai acionar um pouco de JavaScript. Precisamos adicionar essas aulas. Então, um monte de copo de água e uma classe de botão holandês, laranja. Vamos colocar as mensagens, roupas dentro desta etiqueta. E eu vou dizer que podemos ver aquele botão de fechar ali. 32. Banner de cookies - CSS: E a primeira coisa que queremos fazer é restringir o conteúdo que está dentro deste painel porque ele vai direto para a esquerda assim. Então vamos enfiar uma div dentro desses cookies parte com nossa classe restrita, que temos usado para restringir o conceito. E eu vou mover tudo o resto dentro daquela div e salvar isso. Esse conteúdo agora está restrito. Então vamos adicionar um pouco de estilo a este banner de cookies. Então, podemos usar esta classe de banner cookies para adicionar algum estilo. Então eu vou saltar para a parte inferior do style.css permitiu uma nova seção aqui com um comentário que diz cookies banner irá segmentar a classe banner cookies. Vou dar-lhe um fundo cinza escuro como um cabeçalho. Portanto, defina a cor de fundo para a mesma cor. Ela 333. Diga que agora tem um fundo cinza. No entanto, não podemos ver o texto agora, então vamos dar ao texto uma cor clara. Então muita propriedade de cor, e eu vou definir isso para d, d, d, Então uma cor cinza claro porque este cabeçalho neste parágrafo dentro, esses cookies foram um elemento, essa propriedade de cor que nós sentamos esta seção de bônus de cookies está em cascata agora para os elementos dentro dele. Ok, então eu vou adicionar um pouco de estofamento desta maneira. Então vamos adicionar uma propriedade de preenchimento, um monte de 30 pixels de preenchimento na parte superior e inferior em 0, preenchimento à esquerda e à direita. Guarde isso. E agora temos um pouco de espaço na parte superior e na parte inferior. Neste momento, este banner está bem no final da nossa página. Então, se estivermos no topo da nossa página, não a vemos. Portanto, queremos que ele seja fixado na parte inferior da página, independentemente de onde estamos neste documento. Então, mesmo que estejamos bem no topo, devemos ser capazes de ver este banner aqui em baixo. Podemos fazer isso usando a propriedade position. Então eu vou adicionar uma propriedade position para a chave chave chave. E queremos definir isso como corrigido. E eu guardo isso. Agora contamos ver o banner na página porque precisamos dizer ao navegador onde este elemento deve ser corrigido. Por isso, queremos que seja fixado ao fundo. Então, podemos usar a propriedade inferior, defina como 0 porque queremos corrigir este elemento a 0 pixels da parte inferior. Então, basicamente, bem no fundo. Então guarde isso, agora podemos ver que este banner está fixo na parte inferior. No entanto, agora não está mais ocupando toda a largura da página. Porque quando fazemos um elemento fixo, por padrão, ele só vai ocupar o tamanho do conteúdo que está dentro dele. Então agora precisamos definir explicitamente a largura deste elemento. Posso fazer isso com a propriedade de largura. Queremos definir a largura para 100 por cento. Vamos guardar isso. Agora ocupa toda a largura da página. Temos um pouco mais de espaço no topo deste banner do que no fundo. E isso é provavelmente porque este título aqui. Então, a margem máxima nele. Então eu estou indo apenas para clicar com o botão direito neste cabeçalho e nós podemos clicar em Inspecionar. Então, você pula diretamente para este elemento em nosso inspetor de elementos no DevTools. E podemos ver aqui que a folha de estilo do agente do usuário está adicionando alguma margem superior e margem inferior a este cabeçalho. Então eu vou apenas adicionar uma nova regra aqui para atingir não H1. Então os cookies foram um H1 e vamos apenas definir a margem top 200. Temos agora uma quantidade igual de espaço na parte superior e na parte inferior. E quero que este botão fique aqui à direita, em vez de debaixo das mensagens. E novamente, podemos usar display flex para fazer isso. Então eu vou apenas saltar para a nossa marcação em index.html. Então nós queremos este texto, este H1 e este P. Então você vai estar sobre a esquerda é uma etiqueta para ser sobre a direita. Então o que poderíamos fazer é definir esta restrição se exibir flex e, em seguida, colocar nossos textos em um dia e, em seguida, colocar este botão e uma div. E então devemos ter uma div com o texto sobre a esquerda. Quero div com o Watson à direita. Então eu estou indo apenas para cercar o texto em uma div com uma classe de cookies, sido um sext ou mover o um no estoque P em seletivo e um monte de outros div com uma classe de cookies botão Dash. E colocaremos nosso botão dentro disso, e eu guardarei isso. E agora queremos definir esta div com a classe de limitado para exibir flex, mas apenas quando está dentro desta seção com uma classe de cookies mãe. Então, volte para style.css, role para baixo até a parte inferior. Então, um monte de novas regras aqui. Então, queremos fazer biscoitos, pintor holandês, e eu talvez queira atingir essa classe de restrição. Então, não restrinja. E queremos definir isso para exibir flex. Guarde isso. E agora podemos ver o texto à esquerda, nos barcos e à direita. Mas queremos adicionar espaço entre todos os elementos que estão nesta linha flexível. Então, como fizemos anteriormente, podemos usar a propriedade justify content e estabelecer-se para o espaço entre. Vou guardar isso. E agora o botão está para a direita. E agora temos um pouco mais de espaço na parte inferior deste binário que temos o topo. E eu acho que isso é porque este parágrafo está adicionando alguma margem inferior, basta clicar com o botão direito do mouse nesse parágrafo, clicar em Inspecionar. E sim, ele tem alguma margem na parte inferior que está sendo adicionado pela folha de estilo do agente do usuário. Então, após esta página, um estilo direcionará a tag de parágrafo dentro dessa seção de banner de cookies e definirá a margem inferior como 0. Guarde isso. E isso está parecendo muito doce agora. 33. Esconde cookies com CSS: Então, neste momento, este banner é sempre exibido na página, mas não queremos que sempre seja exibido na página. Queremos que ele seja oculto por padrão e, em seguida , exibido na página após alguns segundos. Então, o que poderíamos fazer é usar CSS para empurrar este elemento da parte inferior da página para que não possamos vê-lo. E então poderíamos usar nosso JavaScript para adicionar uma classe ao elemento depois de alguns segundos. E poderíamos usar essa classe CSS para puxar o banner de volta para a página. Então, primeiro de tudo, vamos apenas empurrar este elemento da parte inferior da página usando CSS por padrão. E poderíamos fazer isso usando a propriedade transformada, que é uma propriedade que nos permite mover elementos ao redor, mudar sua largura e altura e coisas assim. Então eu vou adicionar uma propriedade chamada transformar e apertar Enter. E poderíamos fazer um número de coisas diferentes com transformação, podemos girar elementos e escalar elementos para baixo elementos inclinados, onde vamos usar esta propriedade traduzir y, que nos permitirá mudar a posição vertical, a posição y do elemento. Então vamos usar esta propriedade traduzir y. E se eu colocar 50 por cento aqui e salvar isso, você pode ver que ele empurrou o banner na metade da parte inferior da tela. Então, agora só podemos ver metade do banner, mas vamos empurrá-lo todo o caminho para fora. Então vamos mudar isso para 100 por cento. E eu guardo isso. E agora não podemos mais ver a bandeira. 34. Crie um curso para mostrar a banner de cookies: Então o que vamos fazer agora é configurar uma classe CSS, que puxa o banner de volta para a página. E então, mais tarde, vamos usar JavaScript para adicionar classe de volta ao elemento depois de alguns segundos, aqueles que exibem o banner na página. Então, depois deste seletor de equilíbrio de Cauchy, eu vou adicionar cookies traço, banner que eu vou adicionar sombra escura. Então, estamos basicamente direcionando o elemento de banner cookies quando ele tem uma classe de show adicionada a ele, o que não faz por padrão, mas vamos adicionar essa classe com JavaScript. E o que queremos fazer é mudar essa propriedade de transformação novamente. Então eu vou copiar isso e colar aqui. E queremos definir este Traduzir Y como 0%, o que irá trazê-lo de volta totalmente para a página. Então vou guardar isso. E se eu abrir minhas ferramentas de desenvolvimento, encontrar esses cookies elemento banner, que é aqui. E então se eu clicar nesta coisa CLS aqui, nós podemos realmente adicionar uma classe e ver o que acontece. Então a nossa turma chama-se Show. Então, vamos digitar em show e agora podemos ver o banner na página. Se removermos esta classe. E você pode ver que a classe foi adicionada aqui também. Se removermos a classe , o banner será escondido novamente na parte inferior. Seria bom se isso fosse animado como aparece e desaparecesse dentro e fora da página. Então, como fizemos anteriormente, podemos usar a propriedade de transição para fazer isso. Então, em nosso banner de cookies select, vou adicionar uma propriedade de transição. A propriedade que queremos animar é a propriedade transformada. Então vamos transformar isso. Queremos adicionar uma duração. Então eu vou adicionar 0,3 segundos e meu ponto-e-vírgula, e eu vou salvar isso. Então, agora, se escolhermos nossos cookies pelo elemento na guia elementos aqui, clique na classe. Na classe do show, dizemos, agora temos uma boa animação quando ela aparece. E se removermos a classe, teremos uma boa animação novamente quando ela desaparecer. Então agora tudo o que precisamos fazer é usar JavaScript para adicionar esta classe show ao Banner cookies depois de alguns segundos. 35. Coloque o banner em uma variável JavaScript (JS): Ok, vamos usar JavaScript para subir esta classe de show para os cookies pelo elemento depois de alguns segundos. Então, vamos voltar para o nosso JavaScript em index.html, que está aqui. E nós vamos nos livrar deste registro do console porque nós realmente não precisamos disso. Antes que possamos fazer algo com essa paleta de cookies, precisamos ter acesso a ela. E podemos fazer isso, acionando a consulta seleciona um método no documento. Então, o que podemos fazer é documento ponto, consulta, Selecionar e, em seguida, parênteses e, em seguida, aspas. E então podemos passar um seletor para essas aspas. Da mesma forma que os seletores que estamos usando em nosso CSS. Então, se quisermos pegar cookies, que tem uma classe de cookies do Power BI, podemos usar o equilíbrio de cookies de ponto. Então, nessas citações, podemos começar bolinhos de ponto, manteiga de traço. E isso vai pegar os cookies bona elemento para que possamos realmente fazer algo com ele. Mas primeiro precisamos colocar isso em uma variável. E eu sou o que é uma variável? Basicamente, é apenas um pequeno bloco de dados com um nome. E podemos empatar todos os tipos de diferentes tipos de dados em uma variável. A forma como configuramos uma variável é que usamos apenas a palavra let e, em seguida, inserimos um nome para a nossa variável. Digamos que queríamos armazenar a idade de alguém. Talvez queiramos chamar isso de idade variável. E podemos definir isso igual a um número como 30. E nós também poderíamos armazenar texto ou string em uma variável. Digamos que queríamos guardar o nome de alguém. Poderíamos fazer “Vamos nomear iguais”. Em seguida, queremos usar aspas se estamos fazendo uma string. Então Dani, e nós também poderíamos armazenar valores booleanos, valores verdadeiros e falsos em uma variável. Então, podemos querer fazer algo como, vamos, é o usuário inscrito. E podemos definir que isso é verdade ou podemos defini-lo como falso. Mas, neste caso, só queremos armazenar este elemento de documento em uma variável. Então eu vou me livrar de tudo isso. Vou empatar isto numa variável. Então vamos chamar isso de bolachas de bada. Oi, esses biscoitos. Mas o nosso elemento será agora neste cookie é sobre uma variável onde podemos fazer algumas coisas com ele. Antes de fazermos algumas coisas com ele, queremos ter certeza de que ele existe. Porque se tentarmos disparar algum código neste elemento e ele não existir na página, então isso disparará um erro. Então podemos usar uma declaração if para fazer isso. Então o que podemos fazer é digitar f e, em seguida, parênteses. E, em seguida, entre parênteses podemos apenas adicionar cookies sido a. Então, em outras palavras, se há algo nesta variável, então se este elemento foi encontrado na página, então poderíamos fazer alguma coisa. Por enquanto, vou sair. Então eu vou usar console.log e apenas sair Barna existe. E se quiséssemos disparar algum código, se o banner não existir, poderíamos adicionar mais depois disso se instrução chaves duplas lá, podemos apenas logout console.log, mas um não existe. Vou guardar isso. E agora podemos ver em nosso console aqui, Banner existe ou se eu apenas remover estes cookies elemento seção banner da página e, em seguida, salvá-lo. Vemos agora, mas não existe, sendo bloqueado para fora. Então, um lugar que os cookies ficam de volta na página e guardam isso. Eu realmente não vou precisar desta outra declaração. 36. Mostre a banner de cookies depois de 2 segundos (JS): Então, se os cookies, mas ele existe, então queremos adicionar a classe de show a este elemento maneira cookies depois de um par de segundos. Para pesar alguns segundos, podemos usar o método setTimeout. Então eu vou apenas remover este log do console e eu vou apenas digitar o conjunto. Podemos dizer em nosso IntelliSense aqui nós setTimeout função. Então eu vou bater a resposta sobre isso, sobre ele muito. Esta função setTimeout é exibida a seguir. Esta função espera dois parâmetros. O primeiro parâmetro é uma função. Então esta é apenas uma maneira diferente de escrever uma função, que é um pouco diferente da forma como escrevemos esta função. Este tipo de função é chamado de uma função de seta, mas também podemos mudar isso para funcionar chaves duplas e, em seguida, se livrar desta seta. Então isso também funcionaria, bem, eu só vou mudar o local para uma função de seta para que possamos encontrar algum código dentro desta função após o tempo limite terminar. Este segundo parâmetro aqui é um número que é a quantidade de tempo que devemos esperar em milissegundos. Então, se quiséssemos esperar cinco segundos, poderíamos colocar 5 mil aqui. Então eu vou mudar este tempo limite para 5000. Vou mandar algumas mensagens por enquanto. O temporizador terminou. Se salvarmos isso e recarregar a página, aguarde alguns segundos, então podemos dizer que o temporizador terminou sendo bloqueado. Só vou reduzir esse tempo para dois segundos. 2000, hey, Arafat, vamos colocar este 2000 em uma variável. Então, após este cookie é uma variável, outra variável chamada cookies, mas um atraso, início ou igual a 2000. E agora podemos apenas usar esta variável aqui em vez de codificar o número que ele. Então eu vou copiar este nome da variável, colar isso aqui. E agora, se voltarmos a este código mais tarde, vai ser muito fácil para nós mudar o atraso se quisermos. Mas de qualquer maneira, uma vez que este tempo limite é terminado, queremos adicionar a classe show, que nós configuramos, o banner de cookies, aqueles que mostram a massa na página. E nós temos acesso ao elemento de banner cookies aqui. Então eu vou me livrar deste registro do console. E o que podemos fazer é cookies banner, e queremos acessar a lista de classes sobre esses produtos de cookies, podemos fazer lista de classe ponto. E, na verdade, eu vou apenas desconectar isso para que você possa ver o que está acontecendo aqui. Então eu vou adicionar console.log e, em seguida, cercar esta lista de classe de pontos de banner cookies entre parênteses e salvar isso. E se esperarmos alguns segundos, podemos ver essas listas de token DOM sendo desconectadas. E se clicarmos nesta pequena seta para abri-la, o que estamos vendo aqui é uma matriz. E uma matriz basicamente nos permite armazenar várias variáveis em um item de dados. Então, se eu saltar de volta para este banner de cookies e tivéssemos outra classe lateral nova classe tracejada. E guardamos isso e recarregamos. Você pode ver isso sendo desconectado novamente. Agora temos dois itens nessa matriz, cookies da nossa nova classe. Então, vou ler essa nova turma e guardar isso. Volte para o nosso JavaScript. E removerei este registo da consola. Então, temos acesso à lista de classes daquela massa de biscoitos. Agora queremos adicionar uma classe a ele. Quero adicionar a classe do show que configuramos. Então, agora podemos decidir ponto, adicionar e, em seguida, parênteses. E, em seguida, entre aspas, podemos adicionar a classe que queremos adicionar e queremos adicionar o show da classe. Então vou guardar essa recarga. E se esperarmos alguns segundos, podemos ver o nosso emparelhamento. E se olharmos no inspetor de elementos aqui, podemos ver que classe show foi adicionado. 37. Faça nossa lógica em funções (JS): No entanto, é uma boa idéia dividir nossa lógica em funções. E uma função é apenas um bloco de código que podemos dar um nome. E você geralmente quer que cada função tenha apenas um propósito. Então, depois desta declaração se aqui, eu vou adicionar uma função. Fazemos isso apenas digitando em função, e então podemos dar à função um nome. Então poderíamos chamar de “Show Banner”. Em seguida, adicionamos parênteses e, em seguida, dobramos chaves. E então poderíamos colocar o código para nossa função dentro dessas chaves. Então eu vou cortar essa linha onde nós adicionamos a classe. Vou colá-lo nesta função em vez disso. O que podemos fazer agora neste tempo limite definido, neste primeiro parâmetro, podemos apenas selecionar toda essa função. Então, as duas chaves duplas, a seta e estes dois parênteses. E nós podemos simplesmente excluir isso, e podemos apenas digitar o nome dessa função em vez disso. Portanto, agora ele irá acionar esta função depois que o tempo limite for concluído. Então nós podemos apenas digitar o banner show. Ei, vamos salvar que o NCBI ainda trabalha, recarregar a página. E ainda assim está funcionando. Eu só vou adicionar alguns comentários aqui para quebrar nosso código um pouco. Podemos usar o mesmo atalho de teclado para adicionar um comentário em JavaScript, que em um Mac é comando e barra. E eu vou rotular essas coisas no topo nele porque é aqui que nós tipo de inicializar as coisas e obter acesso aos nossos elementos. E então um monte de comentários acima de nossas funções, que apenas diz funções. By the way, também podemos adicionar comentários para HTML também. Então queríamos adicionar um comentário acima deste banner de cookies. Podemos apenas usar o comando de atalho e barra ou eu acho que é Controle e barra no Windows, então podemos apenas digitar um comentário aqui, como cookies banner. 38. Coloque um botão próximo em uma variável JavaScript (JS): Ok, então queremos ocultar este painel quando o usuário clicar neste botão Fechar. Então, quando o usuário clica isso fechado, e basicamente queremos remover a classe show, que você pode ver aqui a partir desses cookies comprados, que então acasalarão com a biografia de volta na parte inferior da página. Então, podemos fazer isso adicionando um manipulador de cliques a este botão. Primeiro, você precisa obter acesso a este botão, assim como fizemos quando obtivemos acesso ao banner cookies usando a consulta seleciona um método. Então, depois desta linha, eu vou adicionar, vamos, vamos chamá-lo de cookies no botão Fechar. Lei igual ao seletor de consulta de documento e entre parênteses e aspas dentro de lá. E então precisamos de um seletor para selecionar este botão de fechamento. E não podemos apenas usar esses barcos ou a classe porque este seletor de consulta irá apenas selecionar o primeiro elemento que tanto quanto o seletor que colocamos aqui. Então, se nós apenas colocar dot Watson aqui, então ele realmente iria selecionar este fundo, que é o primeiro elemento Watson em nossa página, esta Bíblia. Por isso, temos de ser mais específicos do que isso. E nós temos essa div em torno da classe de bolachas Appleton charter, Barbara Watson. Então o que poderíamos fazer para o nosso seletor são cookies de ponto, maneira Watson e depois um espaço, e depois Watson. Então, em outras palavras, ele vai selecionar o elemento que tem uma classe de botão que está dentro do elemento que tem uma classe de cookies, mas um botão. Então vou guardar isso. E vamos configurar um manipulador de cliques nesta garrafa. Então eu vou adicionar uma nova seção após esta declaração se, e eu vou chamar isso de eventos. E eu estou primeiro nós queremos verificar se este botão de fechar existe como nós fizemos com a maneira de cookies. Então, se os biscoitos foram muito perto Watson. 39. Esconde a banner de cookies no botão clique (JS): E se ele existe e queremos adicionar um manipulador de cliques a ele. E podemos fazer isso adicionando um ouvinte de eventos para o botão fechar usando este método addEventListener que usamos antes. Então, o que podemos fazer é cookies sido um botão fechar ponto adicionar ouvinte evento, em seguida, parênteses. Agora, desta vez, queremos adicionar o ouvinte de evento clique. Então vamos adicionar aspas lá e, em seguida, clique em Seguir o segundo parâmetro. Precisamos de uma função. Então nós poderíamos adicionar uma função como esta diretamente aqui e adicionar algum código aqui. Mas provavelmente é ruim acionar uma função separada para que possamos manter toda a nossa lógica bem separada em diferentes funções. Então eu quero selecionar toda essa função que eu comprei e, em vez disso, irá acionar uma função chamada fechar Watson clicou. E eu, de fato, vamos chamá-lo de cookies, foi um botão de fechamento clicado para torná-lo um pouco mais específico. E então eu vou copiar isso e nós vamos criar esta função aqui embaixo. Muita desta função. Então, quando você iniciar a função, em seguida, colar em cookies pelo meu botão Fechar cliques parênteses. Por enquanto, vamos apenas fazer logout algumas mensagens. Então, o botão de fechamento console.log foi clicado para se certificar de que isso está funcionando. Então vou guardar isso. Aguarde a cédula aparecer. Clique no botão Fechar. E podemos dizer que o botão Fechar foi clicado. Então isso está funcionando. Se estamos para baixo na parte inferior da página e clicamos neste botão fechar está pulando nariz para o topo. E isso é porque quando clicamos nisso, o que é um árbitro H é definido muito duro. Podemos usar o hash para saltar para várias âncoras em nossa página. Não vou entrar nisso agora. E se não especificarmos um nome para um ANCA, então ele vai apenas saltar pose para o topo da página. Então o que precisamos fazer neste manipulador de cliques é evitar o comportamento padrão deste botão quando clicamos nele, que é seguir o link que é atribuído a esta água. Neste caso é hash. Então, quando nos sentamos assim EventListener como este, como um ouvinte de evento clique, isso irá retornar o que é conhecido como um objeto de evento, que podemos passar para a função que disparamos. Não vou me meter muito no objeto do evento. Agora, o que podemos passar por isso colocando um nome de variável entre parênteses e você pode chamá-lo do que quiser. Então você poderia chamá-lo de evento ou você poderia apenas chamá-lo a. Eu só vou chamá-lo a. E agora que nós temos acesso a este objeto de evento que foi retornado por este addEventListener quando o botão foi clicado, nós podemos disparar um método sobre isso evitar o comportamento padrão do clique deste botão. Então, só precisamos adicionar um ponto previne padrão e, em seguida, parênteses. E eu guardo isso. Esperamos que agora, se clicarmos neste botão, ele não salta mais para o topo da página, mas ainda vemos nosso log sendo desconectado. botão Fechar foi clicado. Ok, então uma vez que o botão de fechar foi clicado, então queremos disparar outra função que irá então esconder o banner de cookies. Então vamos acionar uma função chamada ocultar anúncios de banner para acionar uma função de outro lugar, podemos apenas digitar o nome da função e, em seguida, parênteses como esse. Então vamos criar essa função aqui embaixo. Então função ocultar banner, parênteses, chaves duplas. Então, o que precisamos fazer para esconder esse banner? Bem, nós só precisamos remover essa classe de show dela. Tanto como fizemos neste show foi uma função. Podemos apenas fazer cookies banner porque lembre-se que temos acesso aos cookies pelo elemento com este cookie spot uma variável. E então queremos acessar a lista de classes. E desta vez queremos disparar o método remove em vez do método add. Então nós só queremos fazer remover parênteses e aspas dentro dos parênteses e, em seguida, mostrar porque queremos remover a classe chamada show. Então vou guardar isso. Então dizemos o vínculo que conserto. Depois de alguns segundos, clique no botão e vemos o banner desaparecer. 40. Mova JS para arquivo separado (JS): Ok, então nós terminamos o JavaScript agora. E eu sou como nós movemos nosso CSS para um arquivo separado. É uma boa idéia mover nosso JavaScript para um arquivo separado também. Porque se sairmos, eu vou JavaScripts nesta tag script e criamos algumas novas páginas, que vamos fazer em um pouco que se quisermos fazer alterações em nosso JavaScript, teríamos que fazer alterações em vários arquivos HTML diferentes. Então faz sentido ter tudo sobre JavaScript em um arquivo para que só precisamos alterá-lo uma vez. Então eu vou abrir a barra lateral no Explorer. E dentro da pasta de ativos, vou criar uma nova pasta chamada JS para JavaScript. Vou clicar com o botão direito do mouse em criar um novo arquivo lá. E poderíamos chamar isso de Doc JS global. E você pode chamá-lo do que quiser, mas precisa terminar em ponto js. E é aberto arquivo para linhas. Então eu vou voltar para index.html. E eu vou chamar todo o código que está dentro desta tag script. Salve isso, salte para este arquivo dot js global que criamos. Vou colá-lo aqui. Vou salvar isso e, em seguida, voltar para index.html. Vou apenas remover a nova linha desta tag de script. Então paramos as tags de script de abertura e fechamento como essa. E o que podemos fazer é apenas adicionar um atributo fonte para os scripts e, em seguida, responder o caminho para o nosso arquivo JavaScript. Então, isso vai ser barra ativos barra js barra global ab.js. Então eu vou guardar isso e vamos ver se ainda está funcionando. Então vou recarregar a página. Ainda vemos um pagamento banner e se clicarmos, ele, ainda desaparece. 41. CSS responsivo (CSS): Ok, então esta página da web está ótima agora na área de trabalho, mas há alguns retoques finais. Então eu quero adicionar uma segunda página, uma página sobre, que podemos acessar clicando neste link no cabeçalho. Bem, em primeiro lugar, eu quero tornar esta página web responsiva. Eu faço com que fique bem no celular. Porque se abrirmos nossas DevTools do Google Chrome, clique neste pequeno ícone de dispositivos aqui. Podemos escolher a partir deste menu suspenso, um dispositivo móvel. Acabei de escolher o iPhone 6, 7, 8 plus. Isso nos mostrará como esta página parece no celular. Na cabeça, parece bem no banner de biscoitos, parece bem. A quarta célula parece bem. Bem, esses produtos não parecem muito bons porque o texto é muito grande para dispositivos móveis. E temos todo o texto espremido para a esquerda assim. E temos esta pequena imagem esmagada para a direita. Então, seria melhor se pudéssemos reduzir o tamanho do texto para celular em estoque, a seção de texto na parte superior da imagem e esticar os textos por toda a largura do dispositivo. E também estique a imagem em toda a largura do dispositivo. E também podemos fazer com a redução de um pouco do espaço entre os produtos também. Então eu vou mostrar a página final aqui. E você pode ver que eu reduzi todos os textos e agora temos a seção de texto empilhada em cima da imagem, esticando a imagem para que ela seja muito maior e nós reduzimos o espaçamento acima e abaixo de cada produto também. Isso parece muito melhor no celular. 42. Consultas de mídia explicadas (CSS): Então, como podemos adicionar estilos diferentes para dispositivos móveis? O que podemos fazer isso com consultas de mídia. Então vou voltar para a página. Vou sair da visão móvel por enquanto. E vamos pular para o arquivo CSS style.css. E, em seguida, na parte inferior disso, eu vou adicionar uma consulta de mídia. Então, um monte de comentários aqui que apenas diz consultas de mídia. E eu vou adicionar uma consulta de mídia. Em uma consulta de mídia só nos permite adicionar algumas regras CSS. Somente para dispositivos são navegadores de uma determinada largura. Então tivemos uma consulta de mídia adicionando mídia. Em seguida, adicionamos alguns parênteses, chaves duplas. E dentro desses parênteses, podemos colocar uma regra que diz ao navegador quais tamanhos de tela as regras que colocamos aqui devem ser aplicadas. E podemos usar largura mínima ou largura máxima. Então, se eu apenas pensei homem, largura do traço, e, em seguida, dois pontos, e eu posso especificar um valor de pixel. Então, se eu definir isso para, digamos, 500 pixels do que qualquer regra que colocamos aqui só será aplicada à página se o navegador for maior que 500 pixels. Então, dentro dessas chaves duplas, podemos apenas adicionar regras CSS como de costume. Então, se quisermos segmentar a tag body, se você adicionar um seletor de corpo, vamos definir a cor de fundo como vermelho. Vou guardar isso. E podemos ver que o fundo está virado para vermelho. Se eu reduzir o tamanho do navegador para menos de 500 pixels, então ele muda de volta para o porquê Novamente, porque ele só vai adicionar esta regra se o navegador for 500 pixels ou mais largo. Também podemos usar max-width em vez de min-width. Então, se eu mudar isso para largura máxima e salvar isso, então agora as regras que especificamos dentro desta consulta de mídia só serão aplicadas à página se o navegador tiver 500 pixels ou menos. Então, estamos atualmente mais largos que 500 pixels. Agora, você pode dizer abra o topo, temos cerca de 130 pixels. Se descermos, veja abaixo de 500 pixels, então veremos a cor do fundo vermelho. 43. Adicione uma consulta de mídia e estilos móveis (CSS): Então eu vou adicionar uma consulta de mídia que visa dispositivos que são tão largos quanto um tablet típico no modo retrato. Portanto, uma largura típica de um tablet no modo retrato, como o iPad, é de 768 pixels. Então eu vou definir isso para largura máxima 768 pixels. Guarde isso. Eu só vou esticar isso um pouco. Então, se clicarmos no botão do dispositivo, escolhemos iPad. Podemos dizer que esta regra está a ser aplicada. Então vamos adicionar algumas regras aqui que serão aplicadas em dispositivos que são tão largos ou menos. Mas não queremos definir o corpo para uma cor de fundo vermelha. Então vamos nos livrar dessa regra e salvar isso. Na verdade, este layout parece muito bom em um iPod por isso. Então eu estou realmente indo apenas para atingir qualquer dispositivo que é menor do que este. Então eu vou mudar este MUX com 2767 pixels. Guarde isso. Mudaremos para um dos dispositivos móveis, como o iPhone 6, 7, 8 Plus. Então vamos adicionar algumas regras para melhorar esse layout. Então, cada um dos nossos produtos está em uma etiqueta de artigo com uma classe de produtos. E se olharmos para o CSS para a classe de produtos, que é Hey, temos que definir para exibir flex, que é o que está fazendo seus elementos filho direto ser exibido em uma linha lado a lado. Então taxa queremos segmentar a div produto e definir a propriedade display para outra pessoa. E vamos configurá-lo para bloquear, que irá parar o elemento do produto de ser linha e apenas transformá-lo em um elemento de bloco normal. Então eu vou pular para a consulta de mídia. E queremos atingir os elementos do produto. E nós só queremos definir a exibição para bloquear. E vou guardar isso. E agora podemos ver o texto na imagem estão empilhados um sobre o outro. E eu também quero reduzir o tamanho do texto um pouco desses títulos neste parágrafo. Então, após este produto será o nosso ponto-produto H1, porque este cabeçalho está em um alto, vamos reduzir o tamanho da fonte. Então defina o tamanho da fonte para 34 pixels e salve isso, e isso fica melhor. Também reduzirei o tamanho da fonte deste H2. Então, muito produto de pontos. H2 irá definir o tamanho da fonte para 16 pixels. Salve isso, e eu também reduzirei o parágrafo para 16 pixels. Então vamos fazer produtos de ponto, pagar tamanho de fonte 16 pixels, salvar isso. E nós temos um pequeno problema com nossos barcos e dizer que ser co-autor do fundo. E isso porque são oito abraços. E por padrão, as tags são elementos inline. E os elementos embutidos às vezes serão clipes como este se forem elementos circundantes ou elementos pais muito pequenos. E podemos corrigir isso apenas definindo esses dois blocos em linha em vez de iluminados. Então eu vou saltar de volta para o nosso produto CSS. Temos nossos produtos nav. Aqui. Estamos direcionando esses links aqui, produto agora VLA. Então eu só vou definir esses dois. Na verdade, vamos apenas mudar a classe do botão para que não vejamos esse problema em nenhum outro lugar sem poluentes. Então eu vou para a nossa seção reutilizável no nosso botão. E vamos apenas definir isso para exibir inline-block, Salvar que esses botões estão agora não sendo. Os clipes são os Basu. Ok, então eu também quero reduzir o estofamento sobre esses produtos porque este espaço é um pouco grande demais para soldado móvel. Voltar para a nossa consulta de mídia. Em nosso produto seleciona um monte de propriedade putting eo preenchimento está atualmente definido para um 100 pixels na parte superior e 0 no lado. Então vamos reduzir isso para 30 pixels na parte superior e 0 na lateral. E agora temos uma quantidade mais razoável de espaço entre cada produto, mas ainda temos muito espaço no topo do primeiro produto. Porque se voltarmos para o nosso CSS inicial, usamos este pseudo-seletor filho primeiro para adicionar algum preenchimento ao primeiro produto da lista, e que está atualmente definido para 20 pixels. Então eu vou apenas copiar esta regra. Vai colá-lo abaixo, são produtivos na consulta de mídia. E reduzimos isto a 0. E vou guardar isso. E agora temos um pouco menos de espaço no topo dos produtos de escritório. Ok, então eu estou feliz com isso agora eu acho que isso parece muito bom no celular. Ainda parece bom na área de trabalho também. 44. Adicione uma página (HTML e CSS): Ok, a última coisa que eu quero fazer é adicionar uma segunda página a este site. Então, uma página Sobre que podemos chegar clicando neste link no cabeçalho. Então eu vou pular para index.html, saltar para o cabeçalho. Aqui está o nosso link Sobre que está no cabeçalho. Eu quero mudar o rascunho de ódio para slush sobre ponto HTML. E esta vai ser a nossa página sobre. Então, vou guardar isso. Vamos abrir a barra lateral. Então vou clicar com o botão direito do mouse no arquivo index.html. Clique em Copiar. E eu clique com o botão direito e clique em Colar. E então eu vou renomear este arquivo é apenas criado para cerca de ponto HTML. Se clicarmos no link sobre, podemos ver na barra do navegador, estamos agora em Sobre HTML ponto. Estamos atualmente esta página é exatamente a mesma que a nossa página inicial. Então vamos saltar para sobre o ponto HTML. Vai esconder a barra lateral. Eu só vou remover tudo dentro deste elemento seção com uma classe de restrição que atualmente tem todos esses produtos. Então eu vou apenas selecionar tudo lá dentro, excluir isso. E em vez disso, vou adicionar um artigo com uma classe de custo conceito. Esta vai ser uma página de conteúdo. Vou enfiar um pouco de conteúdo lá dentro. Então, outro, e eu vou colocar cerca de laranja lá dentro. Um monte de etiquetas de parágrafo com alguns Lorem Ipsum. Apenas indo para habilitar a quebra de linha indo para Exibir alternar quebra de palavra. Só vou copiar este parágrafo. Cole mais um pouco. Talvez na parte inferior pudéssemos ter um desses botões brancos que ligam de volta à página inicial. Então, muito, um, uma tag com uma classe de botão, uma classe de Watson, branco tracejado entrar no atributo href heat. Só queremos ir para casa. Então, para fazer isso, podemos apenas ir para o caminho para a frente barra. E, em seguida, para as mensagens no livro e eu vou apenas colocar voltar para casa. E eu guardo isso. E agora temos About Page pode voltar para a página inicial. No entanto, este texto é um pouco pequeno demais e, por isso, eu poderia apenas sequestrar os têxteis de produtos acima. Então eu vou voltar para style.css, saltar para os nossos produtos, têxteis. Então aqui estamos os textos do produto H1, H2, e pagar. Acabamos de criar um artigo com uma classe de conteúdo aqui. Então, o que poderíamos fazer aqui é adicionar um seletor adicional a cada uma dessas regras. Assim, bem como textos de produtos h, Bem, poderíamos adicionar conteúdo um. E então neste podemos fazer a página de conteúdo de ponto dois. E então conceito vírgula ponto para roubar esses estilos ou voltar para a página Sobre. Salve isso. E agora temos um grande texto. No entanto, também precisaremos atualizar nossas consultas de mídia porque esse texto é um pouco grande demais para um celular. Então eu vou pular para a nossa consulta de mídia. E novamente vai seqüestrar esses estilos aqui. Então, após este produto H1, vamos começar ponto conteúdo H1. E, em seguida, neste console de um ponto página dois. E, em seguida, neste pagamento de conteúdo um ponto vai dizer que o texto parece bom e pequeno e móvel. Bom e grande na área de trabalho. 45. Adicione um tipo de Doctype (HTML): Há uma coisa importante que esqueci de fazer logo no início deste vídeo, que é adicionar uma declaração DOCTYPE ao topo de nossas páginas HTML. Então, se você simplesmente abrir index.html bem no topo deste arquivo, precisamos adicionar um doctype. Doctype diz ao navegador que tipo de página HTML esta é, onde usando HTML5 aqui. Então, precisamos adicionar doctype HTML5 para o topo de cada uma das nossas páginas. Então, para fazer isso, basta adicionar colchete de ângulo esquerdo e seguida, ponto de exclamação e o DOCTYPE em letras maiúsculas, em seguida, um espaço e, em seguida, um colchete de ângulo de fechamento. E eu guardo isso. Eu também vou copiar isso e abrir sobre nenhum HTML e adicioná-lo para o topo deste arquivo bem e salvar isso. E isso causou um pequeno problema com nosso cabeçalho. Temos mais espaço no fundo da nossa cabeça e fora. E isso é porque temos essa imagem aqui. Por padrão em HTML5, as imagens são elementos embutidos que têm um pouco de espaço na parte inferior delas. Então, podemos corrigir isso definindo esta imagem para um elemento de bloco com a propriedade display. Então, se você apenas ir para Assets, css, style.css, role para baixo até os estilos de cabeçalho e você pode ver onde segmentar esta imagem aqui, onde definimos sua largura. E nós só queremos adicionar uma nova regra aqui, exibir início para não bloquear, e eu vou salvar isso. O cabeçalho está agora corrigido.