Escreva o código de seu próprio site: conceitos básicos de HTML e CSS.

1. Introdução: Olá, sou o Matthew dos códigos Brandon. Você já quis criar seu próprio site , mas acho que pode ser muito difícil. Bem, neste curso, vou te ensinar que codificar pode ser divertido e fácil do que isso. Você pode criar um site profissional e um lamaçal do nosso. Neste curso, vamos criar este site incrível usando apenas HTML e CSS. Neste curso, você aprenderá as ferramentas necessárias para criar um site. Noções básicas de HTML, CSS, fundamentos, tipo progresso em um Bootstrap. Altura de trazer todos juntos e criar o seu primeiro site, Eu Omega móvel responsivo. E finalmente, Haida hospedou. Se tudo isso soa bem e você está pronto para aprender, então vamos mergulhar. 2. Ferramentas: Vamos dar uma olhada nas ferramentas que você precisará para criar seu primeiro site. O primeiro disse que precisamos, você provavelmente já tem, e que é um navegador da web. Então, para isso, você pode usar o Firefox, você pode usar o Chrome, ou você pode usar uma variedade de cores. Por exemplo, Safari. Para este tutorial, eu vou estar usando o firefox, está lá como o meu Fraser preferido. Mas eu vou mostrar a vocês como você pode resolver algumas das coisas que precisamos no Chrome também. A próxima coisa que precisamos como Developer Tools ou DevTools para abreviar. Estes são programas Bell em pastadores modernos que permitem criar, testar e depurar código. Navegador atual, como Firefox e Chrome têm estes integrados e permitem que você inspecione o site. Você pode alterar o HTML, CSS e JavaScript da página. Não se preocupe se ainda não sabe o que significam. Vou ensinar-te a vigiar cada uma dessas portas muito em breve. Mas, por enquanto, deixe-me mostrar como você abre DevTools no Firefox e no Chrome. Começarei com o Chrome aqui. E tudo o que você precisa fazer é clicar com o botão direito do mouse em qualquer lugar da página da Web e pressionar Inspect. Você saberá que o DevTools foi carregado para o Firefox. É um processo semelhante. o botão direito em qualquer lugar da página e clique em Inspecionar elemento. Você saberá que o DevTools foi carregado. Como uma demonstração rápida. Em DevTools, podemos fazer alterações no HTML da página. Por exemplo, eu posso alterar este botão para dizer classes, ou podemos fazer alterações CSS. Por exemplo, eu posso alterar essa cor de cabeçalhos para ser lido. Novamente, não se preocupe se você não entender completamente o HTML e CSS ainda. Isto é apenas uma demonstração do que podemos fazer. E DevTools, novamente, algo que você pode mudar com DevTools é onde a posse desta barra de ferramentas como clicando nos três pontos aqui, você pode escolher para mais escuro para a taxa, por exemplo, ou você pode encaixá-lo à esquerda. Você também pode desanexar a barra de ferramentas escolhendo uma janela separada. E isso permite que você o coloque em um segundo monitor. Por exemplo. Para este tutorial, vou montagem encaixá-lo para a parte inferior das páginas. A última ferramenta que precisamos de um indiscutivelmente o mais importante, é um editor de código. Eu recomendo e uso o editor de código gratuito, que você pode baixar um diodo. Mas se outros da USU, como Sublime Text, Vamos fama como você vai ser capaz de seguir ao longo menos tutorial, é todos os editores de código são vagamente o mesmo. Então para recapitular e para ter certeza de que você está pronto para começar. Os dedos dos pés que precisamos são um navegador, Firefox ou Chrome DevTools nesse navegador, e um editor de código como arm. 3. Materiais: Antes de continuarmos com este curso, você precisará baixar os materiais que preparei para você. Você pode fazer isso rolando morrendo e indo para a guia projetos e recursos. E, em seguida, para a direita sob os recursos que você vai dizer necessário para o aplicativo de cães curso. Para baixar este arquivo de conjunto, basta clicar no título necessário para o conceito principal. Depois de iniciar esta pasta, você pode clicar no necessário para a pasta do curso e encontrar todos os materiais do curso que você precisa. Você verá uma pasta de exercícios que inclui um arquivo HTML inicial, uma imagem que nos usaremos para o nosso primeiro exercício. Você também verá uma pasta do site incluindo um arquivo HTML inicial e as imagens que precisamos para este curso. E, por último, você vai dizer que eu precisava para pasta de exercícios que contém a estrutura Bootstrap. Vamos entrar nessa camada de mais detalhes. Depois de baixar esta pasta, você estará pronto para continuar neste curso. 4. fundamentos de sites: Então, antes de começar a construir o nosso site é realmente importante para entender os fundamentos. O que são sites? O Madoff. Para tornar isso fácil de entender e querer usar uma metáfora. E isto é, um site é como uma casa. Eles podem explicar. Quando pensamos nos principais componentes que compõem um hace, podemos pensar na liberdade, no olhar e nas peças em movimento. Cada um desses componentes principais de um host na verdade é igual a um componente principal da construção de um site. Então, quando pensamos na liberdade de um host e termos do site, que seria o HTML. Html significa Hypertext Markup Language. Html para resumir. O quadro do host compõe os quartos, compõe o layout e compõe a estrutura da mesma forma que um site tem seções, cabeça ou corpo para. E cada seção contém imagens e textos. Por exemplo, há layout, há liberdade. A estrutura é definida por HTML. Então, se dermos uma olhada neste exemplo HTML, É importante notar que estes não são elementos HTML reais, mas o layout está correto em termos de como você usaria HTML. E eu acho que isso realmente ajuda a ilustrar exatamente como você usaria isso. Html tem uma tag de abertura e fechamento e terminá-los tags, você teria elementos. Então você pode ver uma tag de abertura e uma tag host de fechamento com n que temos o segundo andar. E dentro do segundo andar, temos o quarto com no primeiro andar, temos 11 quartos. Temos uma entrada, e dentro dos quartos, temos a porta da frente. Então você pode ver como HTML definiria a estrutura de um assalto. Com este exemplo, vamos usar HTML exatamente da mesma maneira para definir a estrutura do nosso site. Em seguida, se trata da aparência da casa e termos do site, estaremos usando CSS para definir o visual. Css significa Cascading Style Sheets ou CSS para abreviar. Esta é uma linguagem de acordes que nos permite definir a aparência de elementos HTML. No nosso exemplo de casa, nem todos os quartos, mesas e cadeiras parecem iguais. Palavras impertinentes e imagens em um site. Css define como elementos olhar, descrevendo suas cores diz Posse, navio, e muito mais. Aqui está outro exemplo rápido de como reduzimos o CSS para projetar a aparência ou para hosts. Podemos ver que definimos um elemento, então quarto. E, em seguida, dentro desse elemento com definido como largura, sua altura, as paredes, e o chão. Novamente, você pode ver que temos sopro interruptor tardio definindo um elemento HTML ou a luz desligar a casa dela. E você pode ver que temos a distância do chão e da nave. Novamente, estes não são elementos HTML reais. Esta é apenas uma simplificação excessiva para ajudá-lo a entender o link entre CSS e HTML. Então, por último, em um host você se moveu de peças como amostras tardias seria JavaScript. Javascript é usado para criar elementos interativos em nosso site. Agradeça controles deslizantes, pense pop-ups. Nós não vamos estar focando em JavaScript e este tutorial. Então, por enquanto, tudo que você precisa saber é que carreiras JavaScript e são elementos ativos em um site. Então, recapitulando, quando se trata dos elementos que compõem um site, pense em uma colméia. Para a liberdade, para a estrutura, usamos HTML, para a aparência e aparência. Usamos CSS. E para mover peças, você usaria JavaScript. Então, neste tutorial, vou mostrar-lhe como usar HTML e CSS para criar seu primeiro site. Vamos criar a estrutura do site ou o quadro do site usando HTML. E então vamos usar CSS para definir como o site se parece, os esquemas de cores, os grãos de saco, a topografia e a aparência geral. Isso permitirá que você tenha um site altamente personalizado e também teve as habilidades para ser capaz criar qualquer layout de site e qualquer aparência de site que você deseja no futuro. 5. Noções básicas do HTML — Parte 1: É hora de começar a codificar. Vamos começar com HTML. Html, como já mencionado, é enquadrar ou estrutura do nosso site. Cada site tem cinto com elementos HTML. Cada elemento tem algo nele, como texto ou imagem. Temos diferentes tipos de tags HTML que podemos jogar com. E cada uma dessas tags representa diferentes tipos de conteúdo. Por exemplo, temos títulos, parágrafos, imagens e muito mais. Então, quando se trata de escrever nosso HTML, é importante usar elementos semânticos. O que são elementos semânticos? Elementos semânticos são elementos com um significado. Em HTML, cada tag tem seu próprio significado, tem um exemplo de elementos HTML semânticos. Se quiséssemos escrever um parágrafo, abriríamos com a tag p. Como este é o elemento HTML parágrafo. Nós escreveríamos nosso parágrafo e, em seguida, fecharíamos com um p fechamento, onde parágrafo, elemento HTML. Este exemplo é a codificação semântica. É hora de começar a codificar. Antes de começar a codificar nosso próprio site, Vamos fazer um rápido exercício HTML e CSS para aprender o básico. Vamos então a LU completa, você verá duas pastas, exercício e site. Abra a pasta de exercícios. E eu incluí um arquivo HTML de escala e índice na sua área de trabalho em seu editor de código, basta clicar e arrastá-lo para o braço, para os dados principais ou você está usando. E você verá a escala no exercício HTML falhar abre. Então deixe-me falar sobre o que já está incluído neste arquivo HTML. No topo, temos uma declaração de tipo doc. Esta declaração não é uma tag HTML. Suas informações para o navegador sobre qual tipo de documento esperar. Isso deve ser incluído em todos os arquivos HTML. E ele permite que o navegador saiba que ele está carregando um arquivo HTML. O próximo elemento é a tag HTML. A tag HTML é um contêiner para todos os outros elementos HTML, exceto o tipo de documento. Então n de m com n, a tag HTML será renderizada em seu site. Observe hey, há uma tag HTML de abertura e uma tag HTML de fechamento. Como sabemos que esta é uma tag HTML de fechamento? Pela barra da frente. E a etiqueta de abertura não tem barra. Uma tag de elemento HTML de fechamento tem uma barra. Então nós temos nossas tags HTML, e se suficiente deles tags HTML será processado como nosso site. Em seguida, temos as tags head, e muitas vezes incluído dentro das tags head não é renderizado na página web. Em vez disso, essa área é usada para incluir metadados ou informações sobre a própria página HTML. A primeira coisa que incluí aqui é o conjunto de caracteres. Por agora. Nós só vamos saber que isso é super importante ter incluído. Mas eu não vou entrar em detalhes de uma palavra que diz é porque eu acho que isso apenas iria confundir você nesta fase. Basta saber que é importante ter isso incluído. Temos o título incluído dentro da cabeça, e isso é muito Assembly o nome da página HTML. Agora, obviamente, não queremos que isso seja exibido na página em si. Mas é importante que o navegador saiba o nome ou título das páginas. Então está incluído na cabeça. Outros exemplos de elementos que você incluiria nas tags head são as descrições fora da página. Então, se você já fez uma pesquisa no Google, as descrições de página que você vê nos trechos são realmente incluídas no cabeçalho de uma página. Também podemos usar a cabeça para incluir arquivos externos, algo que vamos fazer mais tarde neste curso. Assim, podemos incluir arquivos CSS externos para ajudar com a aparência do nosso site. E isso está tudo incluído nas tags de cabeça. Então, novamente, esta é uma área de informação ou ambos. A página área benigna para coisas que queremos exibido na página 49 para desaparecer, isso é tudo que você precisa ter incluído dentro das tags de cabeça. Em seguida, temos as etiquetas do corpo. E se os empregadores defenderem as tags corporais serão exibidos e renderizados no site do Azure do seu navegador. Esta é a área que colocamos todos os nossos elementos HTML, tais como cabeçalhos, parágrafos, imagens, tabelas, etc. Na verdade, qualquer coisa que você gravar e aqui será exibido em sua página web. Por exemplo, se uma fita qualquer coisa, e ver se o que você pode fazer indo para falhar. Mar de ou pressionando o controle e S e descarregar nossa página HTML e nosso navegador. O que você pode fazer indo para a pasta de exercícios e clicando duas vezes no index.html. Você pode ver que em nossa página web, qualquer coisa está exibindo. Obviamente, isso não parece muito bom e não seria um site muito bom. Mas não só isso, nós não acordamos isso semanticamente. Vamos ver como podemos acordar texto semanticamente em nosso documento HTML. Trazendo de volta o editor de código, eu vou remover qualquer coisa. E agora eu vou adicionar um título, 2 yadda título. Vamos abrir a nossa etiqueta. Vamos levar idade para ir e vamos para a panela um. Você pode usar os números de um a seis para títulos. Então H1, H2, H3, etc No entanto, H1 é a tag de cabeçalho mais capacitante. Então, se estivéssemos escrevendo o cabeçalho para um artigo, usaríamos H1 porque esse é o elemento de cabeçalho HTML mais importante. E vamos classificar um título. Bem-vindos, alunos da Skillshare. O que está faltando nesta pista HTML? Essa é a taxa, devemos fechar a tag HTML. Para fazer isso. Abrimos a tag HTML novamente, mas desta vez usamos uma barra, barra direta denotando um elemento HTML fechado. E então tomamos o elemento HTML CMB novamente. Então você pode ver que temos uma tag H1 de abertura e uma tag H1 de fechamento. Antes de ir entre os dois elementos. Eu vou ver se esta página pressionando Control S. e eu vou trazer o navegador novamente. E eu vou atualizar a página. Você pode ver o que acabamos de adicionar em nosso arquivo de código está sendo exibido em nossa página do site. Deixe-me mostrar-lhe rapidamente, hey, DevTools funciona agora. Você se lembra de como abrir o DevTools? Clique com o botão direito do mouse e pressione Inspect Element. Se dermos uma olhada no nosso documento HTML aqui, você pode ver exatamente como eu descrevi, quaisquer elementos dentro das tags HTML cabeçalho não são exibidos em nossa página. Você pode então ver nossas tags de corpo e o título que acabamos de adicionar. Podemos fazer mudanças talentos simplesmente clicando no elemento HTML. Queríamos mudar. Clicando no elemento e adicionando, por exemplo, texto. Eu posso mudar. Bem-vindo, por exemplo, ao olá. Quando eu pressionar Enter, você verá que essa alteração foi feita. Algo realmente importante para entender um pouco dev diz que estamos apenas fazendo essas alterações localmente e essas alterações não estão sendo salvas. Então isso é mudança. Eu só espelhei a página TR. Quando uma atualização, você verá que a mudança não foi mar de. Isso porque só estamos fazendo as alterações e nosso navegador. E só somos magnum localmente. Para que essa mudança aconteça, precisamos voltar ao nosso editor de código. Precisamos fazer a mudança em nosso documento HTML real. Precisamos de um mar do documento HTML. E então, quando atualizamos nossa página, você pode ver que a alteração foi monitorada permanentemente. 6. Noções básicas do HTML — Parte 2: Vamos criar um site realmente básico que inclui um título, parágrafo, imagem, um link para outro site, e um último salto de volta para o arquivo index.html exercício. Se você fechou o index.html morrendo de nossa última lição para a bolsa escolar na pasta do pacote, vá para o exercício e arraste o arquivo index.html para o seu editor de código. Isso remove o cabeçalho que adicionamos no exercício anterior como queríamos começar de novo e criar este site muito básico, vou adicionar um novo título. Novamente. Vou usar uma etiqueta H1 como o título mais importante. E eu vou apenas considerar isso como um site básico, mas você pode adicionar onde quer que você está em. O que está faltando. Novamente, precisamos fechar a tag HTML. Fazemos isso com uma barra. E depois o H1. Agora queremos adicionar um parágrafo. Para isso, usamos a tag p, P em pé para parágrafo. E então queremos adicionar algum texto de parágrafo. Pode escrever o que quiser aqui. Mas se você precisa de alguns textos muito rapidamente como um espaço reservado, Há uma coisa realmente útil no desenvolvimento web chamado Lorem Ipsum. Se você vai para o Google e digite o gerador ipsum lorem, você vai encontrar uma gama de sites que geram textos de blog para você muito rapidamente. Vamos usar este nesta demonstração e gerar um parágrafo. Agora, isso não é Inglês e não faz sentido, mas é usado em desenvolvimento web para áreas de blog de um site muito rapidamente. Quando não tivermos certeza de que texto vamos fingir lá ainda. Então eu vou copiar e PSDs para o meu parágrafo. Vou perfurar como n. E sabemos como um problema irritante. O texto é tão grande que é empurrado os Chordata são todo o caminho para o lado direito. Agora você pode chamar o vidro, no entanto, você achará bastante irritante. Felizmente, Adam e quase todos os editores de código têm um recurso para parar isso. Tudo o que você precisa fazer é ir para Ver e alternar envoltório macio. O que este Dawes é agarra o texto dentro da janela do editor de código e impede que você tenha que mover para a esquerda e para a direita para ver. O que está faltando neste elemento parágrafo. Isso é certo. Precisamos fechá-la. Vamos agora ver isso e ver como ele fica no navegador. Eu vou ver isso novamente pressionando o controle e S. E eu vou carregar nosso site e atualizá-lo. Você pode ver o título está sendo exibido e o parágrafo está sendo exibido. Para ver esses elementos HTML no DevTools, basta clicar com o botão direito do mouse, vá para Inspecionar Elemento. E você pode ver dentro do nosso corpo que temos um título e um parágrafo. Agora vamos começar, permitir-lhes mais avançados e adicionar uma imagem ao nosso site. Dentro do nosso editor de código, vou tomar uma nova pista e vou adicionar a tag HTML da imagem. Esta é uma tag mais avançada. E então há algumas coisas que você precisa saber sobre a tag de imagem. Como não é um CME como uma tag de parágrafo e cabeçalho, a tag de imagem requer um atributo. Um atributo é informação dentro da tag HTML propriamente dita. Para uma imagem, precisamos adicionar SRC, que significa fonte, a fonte da imagem. Em seguida, precisamos colocar um igual e dentro dos colchetes, precisamos digitar o caminho da imagem. Qual é o caminho da imagem? Vamos dar uma olhada na nossa pasta de exercícios. Dentro da nossa pasta de exercícios, você verá que há uma pasta de imagem. Movendo a pasta de imagem, há uma imagem que é o caminho que precisamos. Os caminhos podem ser bastante complicados, especialmente como um iniciante de entender e uma maneira fácil de lembrar como fazê-lo como imaginar que você estava descrevendo para index.html, como encontrar o dano. Então você diria index.html primeiro ir para a pasta de imagem e, em seguida, a imagem terminará. Isso é chamado de exemplo de esquivar JPEG. Então, novamente, vamos imaginar que estamos descrevendo para index.html quando adicioná-lo à nossa fonte, primeiro, temos que ir para a pasta de imagem. Em seguida, adicionamos uma barra. E dentro dessa pasta de imagem, queremos o exemplo de imagem JPEG ponto. Então temos a pasta e, em seguida, temos o nome da imagem dentro dessa pasta. Então você pode saber dizendo, precisamos fechar esta tag HTML. Ao fazer isso, no entanto, você estaria errado. As tags de imagem diferem das tags de cabeçalho e tags de parágrafo porque são conhecidas como elementos vazios. Elementos vazios não podem ter nenhum conteúdo. Pense sobre isso. Uma imagem não pode ter mensagens com Anna porque é uma imagem. Portanto, é um elemento vazio. Então, em vez disso, temos que fechar a tag um pouco diferente. Para fechar elemento evite ou para fechar uma tag de imagem, nós simplesmente adicionar uma barra antes do colchete angular final. Esta é agora uma doença de vazio fechado ou uma etiqueta de imagem fechada. Vamos ver um vasto NIH pressionando o controle e S e atualizando nosso site. Podemos ver que a imagem como NIH, mostrando que há, no entanto, mais um atributo que você deve sempre incluir em sua tag imagem. Se voltarmos ao editor de código, vou levar ALT. Alt significa texto alternativo. Por que precisamos de texto alternativo dentro da nossa tag de imagem? Portanto, a principal razão para isso é a acessibilidade. Usuários que não conseguem ver as imagens e usam um programa de conversão de texto em fala. Use texto alternativo para entender o que o dano, como. Também é útil para quando a imagem não é carregada. Por exemplo, se o dano estiver ausente ou você tiver o caminho lançado, o texto antigo será exibido para que os usuários saibam o que deve estar lá. Para adicionar texto alternativo, basta digitar ALT, que já temos, é igual a marcas de fala de um fornecedor do EMR, basta adicionar uma descrição rápida dos danos. Então eu vou levar. Esta é uma imagem de exemplo. Vamos ver se STI e voltar para o nosso navegador e atualizar a página usando DevTools, você pode ver que este texto alternativo agora está incluído para dar-lhe uma demonstração de como isso parece. Se, por exemplo, a imagem estiver ausente ou puder ser carregada, vou quebrar o caminho. Então eu vou fazer o caminho apontar para uma imagem que não existe. Eu não vou bater em Enter. E você pode ver que, como a imagem não pode ser carregada, o texto alternativo é exibido como um restante. Quaisquer alterações feitas no DevTools não são salvas, para que possamos reverter sua montagem de espaço atualizando a página. Agora vamos adicionar um link. Volte para o editor de código. Vou adicionar este link acima ou imagem. Então eu vou adicionar uma linha acima da tag imagem e colchete ângulo de fita a. A tag a define um hiperlink que é usado para vincular de uma página para outra. A forma como a tag funciona é com outro atributo. E nós vamos tomar RREF, que significa referência de hipertexto. Basicamente, é o link para o site que você quer que o botão para levá-lo. Para isso, vou ligar para o Skillshare. Então eu vou digitar www.skillshare.com dentro das marcas de fala. Podemos então fechar a abertura de uma tag. Agora precisamos gravar o que queremos que o texto do botão seja. Então eu vou gravar este é um link. E então temos que fechar esta tag, o CME como um cabeçalho ou um elemento de parágrafo. Fazemos isso pelo colchete angular, barra para frente, então a. Então o que temos aqui é uma tag link. Temos a abertura de um elemento. Temos um atributo H ref, que vai nos levar para skillshare.com. Temos o texto do botão e, em seguida, temos o fechamento de um elemento HTML. Eu vou saber C disso e ir para a nossa página para atualizar a página. Quando atualizamos nossa página do navegador e procuramos um link, você pode se perguntar se ele está faltando. Quando você rolar para baixo, você notará que está no lado esquerdo do dano. Por que é isso? Isso ocorre porque não especificamos que queremos que a imagem esteja em uma nova faixa. Então, o link e a imagem estão na linha de costura. Defeitos esco de volta ao nosso editor de código. E entre a tag a para um link e a tag de imagem para a nossa imagem. Adicionar uma nova faixa e fita BR barra dianteira, suporte angular. Br significa quebra ou quebra de linha é evitar elemento de um CV não pode adicionar nada dentro de uma quebra de linha. Portanto, nós pistas evitar elemento usando uma barra antes do colchete ângulo de fechamento. Nós não precisamos de tags e abrir e fechar tag, muito parecido com uma imagem. Adicionando esta quebra de linha, nenhum meio do dano estará em uma nova linha. Agora, se apertarmos Control S para ver se voltamos ao nosso navegador e atualizamos a página. Você pode ver que agora temos o link, uma quebra de linha e a imagem abaixo dele. Agora vamos testar nosso link e ver o que acontece. Isto é uma ligação. Você pode saber que há uma mensagem de erro e que nós realmente não são levados através do site skillshare, que nós inserimos para o link. Vamos dar uma olhada no código e entender por que estamos recebendo essa mensagem de erro. Construindo o editor de código. Podemos ver que não colocamos um HTTP que acabamos de começar com www dot. Por isso, o link acha que é um URL relativo. Arraylist de URL assume que o comprimento que você adicionou está no mesmo site e como parte do domínio RID CME. Então, quando olhamos nosso riser e usar o link tentou nos levar. Você pode ver que é realmente olhar em, na pasta de exercícios para www.skillshare.com. Isto é errado. Devemos usar um URL absoluto. Então, devemos adicionar dois pontos HTTP, barra, barra para frente. Agora você pode ver o link em AM muda azul lá mostra que ele é um URL. Mais uma vez, eu vou ver se eu vou para o meu navegador, voltar para a nossa página de exercícios e atualizar. Agora, quando eu clicar no link, você verá que ele leva você para skillshare.com. Agora você finalmente, vamos adicionar uma lista ao nosso site, construindo o editor de código. E vamos tomar uma nova linha. E eu vou adicionar UAL. Podemos usar as tags OL ou UL para o nosso último. Ol significa lista ordenada e GL significa lista não ordenada. Vamos começar com a nossa lista desordenada. Após a nossa tag UL de abertura, vamos adicionar outra tag HTML. E isso é ALA. A tag LI é menos dia m com n LST. Isso é chamado de elemento HTML filho. Então temos uma última honrada. Então vamos acabar com a lista desordenada. Temos um item da lista. Vou listar todas as coisas que você vai aprender neste curso. Então eu vou escrever HTML para o primeiro item na minha lista e, em seguida, indo para fechar essa tag da mesma maneira que nós fecharíamos um cabeçalho ou uma tag de parágrafo. Vou adicionar um segundo item ao último. Então eu adiciono outra tag aberta ALA e eu vou adicionar outro cubos eu sou, eu vou adicionar outra tag close. Vou adicionar um terceiro item. E eu vou fechá-lo, e eu vou adicionar um quarto. E finalmente, hum, então agora temos quatro ou menos DEMs foram então nossa lista desordenada. Mas temos de fechar a nossa lista desordenada. Para fazer isso, pegamos uma tag UL de fechamento. Então, recapitulando, temos uma tag UL de abertura. Temos quatro filhos, tags LI com elementos HTML de abertura e fechamento. E então temos nossa tag UL de fechamento. Vamos conhecer o CFS e ir para o nosso site. Vamos atualizar a página. E imagem desfocada que você verá são todos lista desordenada. Se queremos uma lista ordenada, algo chamado de volta para o editor de código e alterar URL para o seu, bem, vamos ver se isso voltar para a nossa página web e atualizar. Agora você verá que temos uma lista ordenada. 7. Noções básicas de CSS — parte 1: Vamos agora dar uma olhada no básico de CSS, um novo CSS no site de exemplo que estamos criando. O que é CSS? Css, se você se lembra, é a aparência do seu site. Então, quando o anfitrião Mao para nós usamos no início deste curso, o HTML foi a liberdade eo CSS foi o que dar para olhar para a nossa liberdade estão lá para o nosso site. Então, se olharmos para o nosso site no Bennett, você vai concordar que parece o caminho. Não é ótimo. Mas agora vamos afetar com CSS. Quando se trata de usar CSS, há três maneiras pelas quais podemos usá-lo. Juntamente com o nosso HTML. Temos n ln, CSS e falha externa CSS e código CSS incorporado em HTML. Para este curso, só vamos nos concentrar em um. E isso é usar um arquivo CSS externo. Então, como criamos esse arquivo CSS? Abra a pasta de exercícios, crie uma nova pasta. Pode dar o nome que quiser. Mas para manter as coisas fáceis de entender, vamos chamar de estilo. Dentro dessa pasta, Vamos criar um novo arquivo CSS. A maneira que eu gosto de fazer isso é apenas criar um novo documento de texto. Vou chamar-lhe folha de estilo. Eu estou indo para mudar a fita de documento documento CSS lágrima. E eu vou fazer isso simplesmente colocando um ponto e implicando CSS e tendo um erro, você recebe uma mensagem, então você sabe que você vai mudar a fita de extensão e que a fita falhou vai mudar. Mas nós queríamos. Então vamos acertar Sim. E sabemos que temos um documento CSS. Vamos agora abrir seu documento CSS. Um arquivo CSS em nosso editor de código. Alguém arrasta folhas de estilo ou CSS para o átomo ou os dados do núcleo ou você está usando. E você verá seu documento de folha de estilo em branco aberto para você queria olhar nosso arquivo HTML ou index.html e ou uma folha de estilo, arquivo styles.css ao mesmo tempo. Para fazer isso, vou clicar com o botão direito do mouse em folhas de estilo ou CSS, e eu vou bater taxa de divisão. Agora podemos fechar o stylesheet dot css e a janela esquerda PM. E aqui temos o documento HTML no lado esquerdo e nossas folhas de estilo ou CSS no lado direito. Você pode notar que o texto é permitido grande aqui. Eu tenho isso maior do que o padrão para este vídeo. Mas você pode alterar a tag diz indo para Ver e aumentar ou diminuir o tamanho da fonte. Você também pode usar Control Shift mais ou menos. Então eu vou reduzir o tamanho de S Agora apenas para tornar mais fácil ver mais dele na tela. Então, como funciona o CSS? Aqui está um exemplo muito simples de uma pista de CSS. Você pode ver que é feito de um seletor, uma declaração. E dentro dessa declaração temos uma propriedade e um valor. Se você olhar para o seletor, você verá que diz H1. E isso vincula diretamente ao elemento de cabeçalho HTML H1 que adicionamos em nosso documento de exemplo. Isso basicamente significa que todas as declarações que temos dentro do seletor CSS afetarão todos os cabeçalhos H1. Ao olhar para a declaração, podemos ver que temos dois. Sob o primeiro, temos uma propriedade de cor e um valor de azul. Se você ainda não adivinhou. Isso significa que estamos mudando o elemento HTML H1 título para ter a cor de azul. E também temos tamanho de fonte 12 pixels. Novamente, se você ainda não adivinhou, isso significa que estamos mudando os títulos A para 12 pixels. Esse é o meu preço. Alguns CSS, por exemplo, site. Olhando para o nosso editor de código, eu queria alterar o tamanho da fonte do parágrafo. Então eu vou tomar P como que links diretamente para o elemento HTML. E então vamos ter um colchete aberto e um colchete de fechamento. Ao pressionar Enter, posso pegar uma declaração e um valor dentro desses colchetes. Então eu vou escrever o tamanho da fonte. E eu vou fazer as etiquetas realmente saco só para que possamos realmente facilmente ver a mudança comigo. E então eu vou fazer isso para uma perda de pacotes, que é realmente grande. Eu não vou ver a folha de estilo pressionando Control S. E eu vou para o nosso navegador. Vou atualizar a página. Não aconteceu nada. Por que não aconteceu nada? Isso ocorre porque não temos vinculado ou folhas de estilo externo arquivo CSS em nosso index.html. Sim. Portanto, nosso site não tem idéia de que há uma folha de estilo para ele usar. Para que as cavalinhas entrem em vigor, devemos vincular ou folha de estilo externa ao nosso index.html. Vamos fazer isso agora. Volte para o editor de código. Será, então, o chefe do nosso site, que novamente é para um veado ou informações não exibidas no site. Queremos usar esta área para vincular nossa folha de estilos externa. Então pegue uma nova faixa e você queria copiar esta linha. Esta linha de HTML é um link. Rel significa relacionamento. Obviamente estamos carregando uma folha de estilo. E então temos o árbitro da idade. Para o árbitro da idade, vamos usar um caminho novamente. Desta vez, o caminho é para a folha de estilo. Nós criamos. Olhando para a nossa pasta de exercícios, podemos ver que a nossa folha de estilo CSS está dentro da pasta de estilo e o nome é stylesheet dot CSS. Usando o método realmente fácil eu disse anteriormente, entendendo como senha fingindo que você está descrevendo para index.html como desmaiar ou falhar. Vamos usar este método para re ou caminho. Então, em primeiro lugar, index.html teria que ir para o estilo de pasta. Então vamos pegar isso e gravar edição. E então ele precisaria olhar para o nome do arquivo, stylesheet dot CSS. Então, também não vamos fita que vamos saber chapéu C ou Control S. Volte para o nosso navegador e atualize. E agora você pode ver que o texto é enorme. Em nossa folha de estilo entrou em vigor. Se inspecionarmos ou parágrafo. Você também verá que a declaração CSS que adicionamos também está incluída nos narcisos e entrou em vigor. Uma das melhores características de DevTools é que podemos fazer mudanças de vida para o CSS se um site, três DevTools, por exemplo, há imposto é muito saco uma anemia que há grande. Assim, você pode facilmente ver o CSS entrar em vigor. Isso pode torná-lo um tamanho mais razoável, que podemos fazer taxa e DevTools para ver como ele ficaria. Vou clicar no tamanho da fonte para um parágrafo. E eu vou mudar o tamanho da fonte para 20 pixels. Agora você pode ver o CSS entrou em vigor e podemos ver como isso parece em nosso site. Lembre-se, porém, que esta alteração não foi salva como um gaussiano é uma alteração no meio apenas localmente em seu navegador. Então, se eu atualizar a página, você pode ver que ela não entrou em vigor. Vamos alterar o tamanho da fonte do parágrafo para 20 pixels novamente. E agora você pode copiar e perfurar a declaração em seu editor de código. Mar de sua folha de estilo dot css. E saiba que quando você atualiza sua página da Web, você pode ver que o CSS muda. Você tem a mim, ele permanece. Vamos escrever mais CSS e vamos classificá-lo diretamente em DevTools. Seria muito bom. Por conseguinte, título foi enviado relata. Para fazer isso, vou clicar em H1 e DevTools. Vou falar com o editor de CSS ou Pian. Vou clicar no botão de adição para criar um novo conjunto de regras CSS. E então eu vou clicar sob o LSAT. E como uma propriedade, eu vou escrever texto align. Você pode ver que DevTools lhe dá uma dica sobre o que você pode escolher para um valor. E eu vou para o centro, eu não vou bater em Enter. Você pode ver que nosso título foi centralizado em nosso site. Para que esta mudança entre em vigor, devemos adicioná-la à nossa folha de estilo, que certamente podemos fazer copiando este verdadeiro Sam indo para o nosso editor de código e penetrando em nossas folhas de estilo ou CSS sem salvar seu estilo folhas ou CSS e atualizando nossa página do navegador. Você pode ver que há um conjunto de regras CSS foi adicionado. Lembre-se, podemos adicionar várias declarações em sua função. Sam, digamos que queremos que a nossa fonte de cabeçalho Weird seja ligeiramente camada e não pareça careca. Podemos apenas clicar no conjunto de regras e isso nos permitirá adicionar uma nova declaração. Agora uma pergunta que você pode ter é, como pode um lembrar todas essas propriedades diferentes para CSS? E a resposta é, realmente, que se resume a praticar. Tudo se resume a criar sites e lembrar as propriedades que você usou quando os criou. Enquanto isso, no entanto, há um realmente grande site, CSS referência dot IO, que mostra todas as propriedades que você pode usar NCSS e ele se junta e coleções. Então, em nosso exemplo de querer que nosso cabeçalho seja uma fonte um pouco mais fina, vamos ver qual propriedade CSS poderíamos usar. Vamos clicar na tipografia. E, em seguida, o lado esquerdo, você pode ver que temos fonte, peso, Clicando fonte. Você pode ver a propriedade e os valores que você pode usar. Você pode ver que ele também fornece os valores que você pode usar. Para uma família. Vamos usar mais leve como 18 anos, e depois atrapalhando. Vamos levar isso para cima, voltando para o nosso site, indo para dab diz, certificando-se de que temos o nosso cabeçalho H1 selecionado. Podemos clicar em uma regra Sam, bater em fita, somos uma nova política. Na verdade, o DevTools também dá dicas sobre quais valores você pode usar. Decidimos que queríamos usar camada que selecionasse Camada e terra. E você pode ver que nossa fonte de título nós somos, é uma boa maneira. Para adicionar esta folha de estilo terrorista. Basta copiar a declaração que acabamos de adicionar. Vá ao nosso editor de código. E foi então nossa regra H1 diz criar uma nova faixa e PSTN ou nova declaração Control S para ver se eles estão voltando para o nosso navegador e atualizando a página. Você pode ver que conseguimos o que queríamos de ter uma diversão mais fina em nosso rumo. Então, quando se trata de usar CSS, se você não tem certeza se as propriedades ou valores que você deve estar usando para alcançar o visual que você deseja. Dê E/S de ponto de referência CSS ou pesquisa usando suas coleções ou pesquisando propriedades CSS, por exemplo, cor. Você deve ser capaz de encontrar as propriedades e os valores que você precisa usar para alcançar a mudança U1 e CSS ao longo do tempo e através da reputação. E ao declarar seus próprios sites, essas propriedades e valores se tornarão de segunda natureza e você poderá usá-los sem ter que fazer referência ao vidro. No entanto, como iniciante, eu digo que o vidro é fantástico para aprender as propriedades e valores que você precisa para criar belos sites em CSS. 8. Noções básicas de CSS — Parte 2: Vamos aprofundar o uso de CSS em nosso site de exercícios. A próxima coisa que queremos dar uma olhada é o espaçamento entre os elementos. Se você der uma olhada neste link e na imagem abaixo dele, você notará que eles estão muito próximos. Para corrigir isso, vamos usar o que é chamado de margens. Então, se eu inspecionar elemento, clique na minha imagem ou você pode apenas clicar na tag de imagem em DevTools. E vamos até a caixa CSS e clicar no botão de adição para criar uma nova função, Sam. E eu vou começar a gravar o traço da margem. Agora podemos usar margem superior, esquerda, direita, inferior. Mas porque eu quero adicionar um espaço entre o topo da imagem e o link. E nós vamos adicionar margem superior. E então queria tirar 30 pixels. Você pode saber C, temos um bom espaço entre o topo da imagem e o link. Você pode ver as margens visualmente representadas no modelo de caixa de DevTools. E você também pode fazer alterações na margem nesta área de ferramentas de brejo. Por exemplo, se eu clicar na margem superior, eu poderia torná-la 25, por exemplo. E você verá isso representado em seu site de exercícios. Acho que 30 pixels pareciam urso. Então eu vou apenas excluir a regra CSS que aquele modelo de pântanos adicionou. E eu vou copiar a imagem real Zan. Eu vou abrir meu editor de código e eu vou adicionar e ver essas mudanças no ponto folha de estilo CSS. Quando atualizarmos o site de exercícios, você verá que há mudanças agora entraram em vigor. E isso é brilho site acima. Está ficando um pouco de cor. Podemos aplicar cores a elementos, bem como texto. Então vamos dar uma olhada no fundo deste site de exercícios. Eu quero selecionar o corpo, que é todo o fundo fora do site. E eu vou adicionar uma nova regra sentado dentro do verdadeiro San. Vou gravar novamente drenado. E quando você tomar plano de fundo, você verá que DevTools oferece uma variedade de opções que você pode empacotar. Por exemplo, nosso gla. Você verá que a alteração entra em vigor em seu site ao clicar em uma dessas cores. Agora isso é ótimo. Esqueça a cor em seu site rapidamente, mas ele realmente não lhe dá um controle fino sobre as cores. Por exemplo, digamos que eu queira colorir a partir desta imagem. Para um controle de cores mais específico, NCSS, usamos o que é chamado de código hexadecimal. Se você já trabalhou com fotografia ou edição de imagem antes, talvez já esteja familiarizado com o que é o código hexadecimal. Mas, basicamente, acorde hexadecimal é um código de cor que começa com uma hashtag e é seguido por sexo. Camadas são números. As duas primeiras camadas são números referem-se a ler, as duas seguintes referem-se a verde e a última a referir-se a jogar. É basicamente uma representação de uma cor RGB. Por exemplo. Hashtag seguido de subornos sexuais é branco, ou hashtag seguido por seis zeros é preto. Códigos hexadecimais são ótimos porque permite que você escolha uma cor de, por exemplo, uma imagem do Photoshop ou um acorde com alguém que já tenha dado, base em algum mercado e material que você recebeu. E adicione-o instantaneamente como uma cor ao fundo do seu site. Se você não sabe um código hexadecimal, não tenha medo. Devtools nos dá um seletor de cores muito agradável. Se clicarmos na cor ao lado do código hexadecimal, você verá um seletor de cores aparece aqui. Podemos escolher uma cor em vez de iluminação. Ou podemos simplesmente clicar no conta-gotas até e clicar em uma área em nossa imagem. Você verá que isso é bicou uma cor e atribuído um código hexadecimal para essa cor com base na área que selecionei na imagem. Agora tudo o que fazemos para que essas mudanças entrem em vigor é copiar o cofre real. Volte para o nosso editor de código, PSTN, o conjunto real. E veja se, novamente, quando voltarmos ao nosso site de exercícios, você verá que essas mudanças entraram em vigor. Também podemos aplicar cor ao texto. Então, se eu der uma olhada no elemento de cabeçalho, primeiro lugar, você verá que já temos um conjunto de funções definido. Então eu vou simplesmente acrescentar a isso. Não preciso criar um novo. E eu vou para a cor da fita. Novamente. Devtools lhe dará uma variedade de opções que você pode escolher. Mas eu sei o código hexadecimal para peso, que é hashtag, seguido de seis “F”. Então eu vou gravar hashtag e sexo F. Você pode ver que isso é espelhado estão indo. Maneira divertida? Não, porque esta regra diz já definido dentro do nosso documento CSS. Não preciso copiar todo o conjunto de regras. Eu só preciso copiar a parte de cor dele, o CSS que acabamos de adicionar. Vou entrar no meu editor de código. Vou simplesmente adicionar esse fim ao conjunto de regras que já está definido para o cabeçalho. E eu vou ver se o documento não muda nenhuma tag um efeito. Eu também vou mudar a cor da fonte para o nosso link. Então eu vou inspecionar ou um elemento de link ou apenas clicar na tag a. Somos então DevTools. Vou adicionar um novo conjunto de regras, já que ainda não temos 14. E eu vou fazer a cor branca novamente. Eu também quero fazer este link um pouco mais ousado para se destacar. Então eu vou adicionar fonte nós isso, e fita negrito. Agora você pode ver que este link está em negrito. E vamos copiar nosso conjunto de regras novamente e nossa mesa para nossa folha de estilo. Mais uma vez, salvando. Isso parece ótimo. A última coisa que quero fazer é enviar retransmissores tudo no minuto, tudo está fora do centro. Então, para fazer isso, vou selecionar nosso body tag, que é tudo e nosso site. E eu vou receber uma mensagem, Elaine. Não, você pode escolher a matriz central esquerda, mas descentralizar tudo e deseja centralizar fita. Você pode ver que tudo está agora centrado em nosso site. Novamente, porque como estamos todos definidos já existe, vou simplesmente copiar o CSS que acabei de gravar. Vá ao nosso editor de código e adicione-o ao nosso corpo. Muito triste quando vejo isso e voltar para o nosso site de exercícios, você pode ver que essas mudanças já entraram em vigor. 9. Selecionadores e cursos de CSS: Juntos a maioria Dia de CSS, precisamos agora dar uma olhada no que os seletores CSS são e por que eles são importantes quando se trata de estilizar seu site. E o nosso site de exercícios. Vamos fingir que queremos dois parágrafos, mas só queremos que o primeiro seja branco. Queremos que o segundo seja preto como um atualmente como. Então vamos ao nosso editor de código e vamos adicionar um segundo parágrafo. Para fazer isso. É muito simples. Eu só vou copiar e perfurar a tag de parágrafo, o conteúdo dentro da tag de parágrafo e a tag de parágrafo de fechamento. E eu vou apenas colá-lo abaixo. Então você vai saber ver que temos dois elementos de parágrafo. primeiro aqui e o segundo parágrafo elemento abaixo dele. Eu vou simplesmente digitar primeiro parágrafo e segundo parágrafo, apenas para que possamos facilmente ver os dois. Quando dermos uma olhada em nossa página de exercícios, eu não vou ver isso e trazer nossa página de exercícios e atualizá-la. Então você pode ver que agora temos o nosso elemento de dois parágrafos, mas ambos são estilo preto. Então, se eu entrar na folha de estilo, bom nosso elemento parágrafo e mudar a cor para branco, que é hashtag seguido por sexo AF. E guarde-o. Quando eu atualizar a nossa página de exercícios, você pode ver que ambos ou um parágrafo elementos foram estilo peso. Se os inspecionarmos, você verá que o primeiro parágrafo tem a cor de branco, mas também o segundo parágrafo. Por que é isso? E como podemos nos enviar um fax para entender por que isso está acontecendo? Precisamos saber, aprender sobre seletores CSS atualmente e nossa folha de estilo, cada conjunto de regras que criamos usou o elemento CSS seletor, p, H1, imagem, corpo a. Estes são todos os elementos seletores CSS. Como é que sabemos disto? Sabemos disso porque não há ponto ou ponto antes do nome do elemento. Um seletor de elemento faz as alterações para todos os elementos, em seguida, uma página da Web. Então, por exemplo, se usarmos elementos como HDR pagar cada elemento parágrafo, vamos então o site terá que CSS aplicado a eles. Assim, em nosso site de exercícios onde temos dois parágrafos, o seletor de elemento p e CSS aplica-se a todos os elementos de parágrafo, incluindo o gás de dois pares que temos no site. E mais, podemos adicionar usando o seletor CSS de um elemento não nos dá controle específico sobre elementos HTML usando as mesmas tags. Por essa razão, precisamos usar aulas. Classes nos permitem atribuir um estilo CSS específico para tags HTML específicas. Deixe-me guiá-lo através de como fazer isso, explicando ao mesmo tempo, MC SAS, definimos uma classe usando um ponto ou um ponto antes do nome do seletor CSS. E então definimos esse nome de classe como um atributo dentro do elemento HTML. Para entender isso, deixe-me orientá-lo sobre como configurá-lo. E eu acho que vai fazer muito mais sentido quando você vê uma ação. Então, a primeira coisa que queremos fazer ao olhar para o nosso editor de código é adicionar uma classe ao nosso segundo elemento de parágrafo. Sem classes e atributos. Então nós adicioná-lo com tag HTML abertura interna. Então eu vou adicionar um Spears e eu vou escrever classe igual e m de n para marcas de fala. Vou adicionar uma classe chamada parágrafo branco. Eu vou então para a nossa folha de estilos e eu vou adicionar um novo conjunto de regras. Desta vez. Vou adicionar um ponto ou ponto antes do nome da classe. Então eu vou escrever ponto e, em seguida, parágrafo branco dentro de nossos colchetes e queria tomar cor. E eu vou adicionar hashtag e sexo AF, que sabemos que é o código hexadecimal para branco. A última coisa que eu quero fazer é remover a cor branca que adicionamos ao elemento parágrafo na parte superior da nossa folha de estilo é isso iria atualmente transformar todos os elementos do parágrafo branco quando queremos apenas o segundo parágrafo para ser branco. Então eu vou apenas remover isso. Então deixe-me explicar rapidamente novamente como isso funciona. Então, espero que seja claro em seu principal, nós adicionamos uma classe à nossa tag HTML de abertura para o nosso segundo parágrafo. O nome da classe como parágrafo branco. Não, não precisamos de um ponto ou ponto antes do nome da classe. Ao adicioná-lo em nossa tag HTML, nós apenas escrever classe igual e, em seguida, mover para marcas de fala ou ClassName, que podemos definir como qualquer coisa que queremos. Mas neste caso chamamos-lhe parágrafo branco. Em seguida, em nossa folha de estilo, adicionamos novas regras. Eles são detrital diz deferente de um seletor CSS elemento, porque estamos usando um seletor CSS classe. Então nós adicionamos um ponto ou um ponto seguido por um ClassName e SKS, É parágrafo branco, que vincula diretamente ao nosso parágrafo de peso de classe HTML e mover no conjunto real, acabamos de adicionar mudança de cor montada para tornar o texto branco. Digamos que c da folha de estilo. E também ver se o index.html. Bom, nossa página de exercícios e atualizar. Agora você pode ver nosso primeiro parágrafo é preto e nosso segundo parágrafo é branco. Se dermos uma olhada nesses elementos dentro DevTools, você pode ver o primeiro parágrafo puxa do elemento seletor CSS p. E se dermos uma olhada no nosso segundo parágrafo com o nome da classe parágrafo branco, você pode ver que ele puxa as regras de parágrafo peso dizer em que criamos para esta classe, você pode criar quantas classes quiser com qualquer nome que você quer. E você também pode ter vários elementos HTML, use a mesma classe. Eles nem precisam ser os mesmos. Deixe-me mostrar-lhe isto como um exemplo. Vamos adicionar um segundo parágrafo do soprador de cabeçalho. Vamos adicionar um cabeçalho H2. E vou escrever isto como um título branco, seguido de uma etiqueta de encerramento. Quando vemos isso e carregar nosso site de exercícios e atualizar, você verá que esta não é uma maneira que você está indo como na verdade preto. Para deixar isso branco, vamos voltar ao nosso editor de código. Vamos adicionar uma aula novamente. E vamos usar a classe de parágrafo de peso que já criamos. Para fazer isso dentro da tag HTML de abertura, novamente, digite classe é igual e, em seguida, mova para marcas de fala apenas hey, espere parágrafo. O mesmo que a segunda classe de parágrafo que já criamos. Vamos ver se isso volta para o nosso site de exercícios e atualizar. Você verá que o título é Nye White. Quando inspecionamos este elemento. E você pode ver está puxando da regra de parágrafo branco CMB, Sam, nós já criamos. Então agora espero que você possa ver o par de usar seletores de classe CSS. Podemos criar conjuntos de regras que podemos aplicar a vários elementos HTML, permitindo-nos estilizar um site muito rapidamente, mas também nos dar muito mais controle sobre elementos HTML específicos que queremos estilizar. 10. Tipografia no CSS: Vamos agora dar uma olhada na topografia. Queremos ter uma boa diversão neste site de exercícios para realmente torná-lo ficar um. Então vamos dar uma olhada em como nós adicionar e alterar fontes vai, em seguida, CSS. A primeira coisa que precisamos fazer é importar uma diversão, que podemos usar para fazer isso. Primeiro, precisamos encontrar um fundo que gostemos para nos tornar realmente diretos. Vou mostrar a você como importar e usar fontes da Web do Google. Vá para fontes dot google.com. E aqui você verá milhares de fundos que podemos usar. Só vamos selecionar um fundo que gostamos. Por exemplo, Oswald, onde você pode escolher onde reembolsar você um. Para este exemplo, vamos rolar para baixo e vamos escolher, selecionar seu estilo. E ganhamos uma diversão leve, regular e ousada. Então eu vou apenas selecionar a luz de uma diversão regular e uma fazenda arrojada para que possamos cobrir todos os pesos com MRSA. E a janela VRE não abre automaticamente para a taxa. Vá até o raio superior e clique neste botão aqui que diz ver seu site e famílias. E você verá que esta janela se abre. A primeira coisa que precisamos fazer é importar diversão web desk para o nosso site. Simplesmente selecionamos e copiamos todo o texto nesta primeira caixa. Nós vamos ao nosso editor de código e na folha de estilo do soprador de cabeça, nós perfuramos. Saberemos c disso. E volte para o Google Fonts. E vamos Copiar CSS Brill na segunda caixa. Voltei para o editor de código. E dentro do corpo rolo SAM, que aplica todas as regras CSS para toda a página. Vamos criar uma nova pista e perfurado. O que isso está fazendo? A regra CSS que acabamos de adicionar como especificando que a família de fontes que queremos usar para toda a página de exercícios é a diversão de Oswald. E como importamos a diversão Oswald para a cabeça do nosso site, ela está disponível para uso. Então eu vou ver se a folha de estilo e ver se o index.html. E agora, se eu voltar ao nosso site de exercícios e atualizar, você pode ver que o site inteiro está usando a diversão de Oswald. Isso parece ótimo. Mas e se quisermos usar mais de uma diversão? Digamos que queremos que os parágrafos tenham uma diversão diferente do resto do site. Vamos voltar aos fundos do Google e remover tudo da nossa família selecionada. E volte para a página inicial. Vamos embalar uma fonte para parágrafos. Quero que seja diferente daquele que acabamos de embalar. Então omega, bom contraste. Mas, novamente, você pode escolher onde a diversão que você mais gosta. Vou escolher o Labster. O Labster tem apenas uma fonte. Nós estamos indo apenas para escolher Regular, selecionar o estilo deles. Clique no botão superior direito novamente para algumas famílias selecionadas. E mais uma vez, precisamos de uma cópia. As tags na primeira caixa, que é TM pobre órfão, ir para o nosso editor de código e biloba forneceu o código para importar a primeira diversão. Vou adicionar o segundo. E eu vou ver se voltando para a página web de fundos do Google, eu vou selecionar e copiar a regra CSS para a família de diversão lagosta. E eu vou para a nossa folha de estilo. Agora, queremos que a segunda diversão para aplicar aos parágrafos só será então a nossa página de exercícios. Então eu vou para o elemento p. E a razão pela qual eu estou escolhendo o elemento p ou não, a classe de parágrafo branco que criamos é porque a classe de parágrafo de peso, se você lembrar, só se aplica ao segundo parágrafo. E eu quero que esta fonte se aplique a ambos os parágrafos. Então eu vou usar o elemento que se aplica a todos os elementos de parágrafo e quando criar uma nova faixa dentro das regras lá. E peer Stan, a declaração font-family não especifica que todos os elementos p usarão a família de fontes Lobster e o resto do corpo para usar a família de fontes Oswald. E quer ver se a folha de estilo, certificando-se de index.html também está salvo. Volte para a página de exercícios e atualize. Você pode ver os títulos e todos os nossos elementos estão lá nos parágrafos. Use o primeiro fundo que embalamos, que foi Oswald. Você pode ver isso indo para os elementos dentro do DevTools. Você pode ver H1 metros e Oswald. H2 está usando Oswald. Até o link de referência da idade está usando Oswald. Mas você pode ver que os elementos do parágrafo estão usando Labster. E, novamente, você pode usar qualquer fonte que você gosta do Google. Estou apenas usando estes como uma ilustração rápida de como você pode usar a tipografia e facilmente e portar fundos do Google dentro seu site para torná-los muito mais profissionais. 11. Bootstrap: Para quase pronto para iniciar o projeto de site médio. A última coisa que precisamos aprender como Bootstrap. O que é Bootstrap? Bootstrap é basicamente uma coleção de bits reutilizáveis úteis de código e CSS e HTML. E é a biblioteca HTML e CSS mais popular e do mundo. Na verdade, no momento de implorar este curso, mais de 18 milhões de sites usam o Bootstrap. Existem muitas razões para fazer uso do Bootstrap. Estes incluem economia de tempo. É fácil de usar, é personalizável. Ele ajuda você a criar sites consistentes e profissionais. Mas a principal razão e a razão pela qual eu vou demonstrar isso para vocês neste curso é que ele tem um sistema de graduação fantástico que permite que você facilmente colocar para fora o seu site. E talvez ainda mais importante, permite que seu site seja móvel responsivo com AI, muito trabalho, você pode ler mais sobre Bootstrap it, getbootstrap.com. Mas eu vou ensinar-lhe como incluí-lo em sua página web e como usar o sistema de grade ao colocar em seu site. Então a primeira coisa que precisamos fazer é incluir armadilha em nosso site. É basicamente um arquivo CSS. Então vá para o pacote de exercícios que temos trabalhado de um lado de fora da pasta de exercícios, você verá uma pasta chamada necessária para o exercício, comprovada que existe uma pasta chamada bootstrap, que eu quero que você copie. Volte para nossa pasta de exercícios. E pierced sabe que precisamos incluir mortes dentro do nosso documento index.html. Para fazer isso, vá para o nosso editor de código. E abaixo onde incluímos nossa folha de estilo. Vou simplesmente copiar esta linha, criar uma nova faixa e PS2 para CLS digitando toda a linha. E queremos remover o conteúdo de H ref. E agora precisamos adicionar o caminho para o arquivo Bootstrap. Se olharmos para a nossa pasta de exercícios, podemos ver que há uma pasta Bootstrap. E dentro do Bootstrap, há um arquivo bootstrap.css. Então, novamente, presumindo que você recebe instruções para index.html e altura. Novamente, sem falhas, precisaríamos entrar na pasta bootstrap. Então eu vou tomar bootstrap barra direta, e então o nome do arquivo é bootstrap.css. Então eu vou pegar essa cinta dot css e ver se você não tem nenhum bootstrap incluído em seu site de exercícios. Então, como sabemos usar a correia falhar que acabaram de incluir e o que é a falha Bootstrap? Acabamos de incluir o arquivo bootstrap.css que acabamos de adicionar em nosso site de exercícios é basicamente uma grande lista de conjuntos de regras CSS predefinidos que podemos usar ao fazer nosso site. Então, para usá-lo, temos que usar classes CSS. Coloca link até o arquivo bootstrap.css com apenas incluído. Então vamos mudar o layout de nossas teias de exercícios TODO morcego, que eu possa demonstrar a vocês, Ei, isso funciona. Olhando nosso site de exercícios, eu quero adicionar um terceiro parágrafo por 12 a três parágrafos para estar na mesma linha. Ao lado um do outro. Então a primeira coisa que precisamos fazer em nosso editor de código é adicionar um terceiro parágrafo. Então eu vou apenas copiar um dos elementos do parágrafo que adicionamos em nosso site de exercícios. E eu estou indo para colegas para explodir o segundo elemento parágrafo. Eu só quero que o elemento de parágrafo de metal seja branco. Então eu vou remover a classe para o terceiro elemento parágrafo. Acabamos de adicionar este belo C de S. e dê uma olhada no nosso site de exercícios. Você pode ver nosso site agora se parece com isso. Isto parece muito quebrado. Então, o que fizemos de errado? Vamos voltar ao nosso editor de código e rolar para cima até o topo onde incluímos o CSS Bootstrap. O que aconteceu como porque o bootstrap.css está abaixo da nossa folha de estilo. Isso significa codificação de termos. Quaisquer estilos que vêm de bootstrap.css substituem os estilos que adicionamos e nossa folha de estilo dot CSS. Então, quando damos uma olhada no nosso site de exercícios e dar uma olhada no corpo, você pode ver que a cor de fundo que adicionamos em nossa folha de estilo faz CSS está sendo substituído pela cor de fundo que foi adicionado pelo bootstrap.css. Então é muito importante. O bootstrap.css vai acima da nossa folha de estilo dot css e o cabeçalho. Novamente, para deixar claro, a razão para isso é a porta final mais baixa em folhas de estilo ou arquivo CSS sempre substituirá aqueles acima dele. Então, a menos que KS, agora que os trocamos redondos, conjuntos de regras bootstrap.css serão substituídos por quaisquer folhas de estilo ou conjuntos de regras CSS que adicionamos. Então eu vou salvar isso, voltar para nossa página de exercícios e atualizar. Agora você pode ver os conjuntos de regras que adicionamos em nossa folha de estilo dot css ter reaplicado. Então, agora temos três elemento parágrafo. Mas eu quero que eles fiquem lado a lado e uma fila. Para fazer isso, vamos usar o sistema de grade Bootstrap. O sistema de grade Bootstrap usa linhas e temos n m linhas, colunas. Você pode ter 12 colunas dentro de uma linha e, em seguida, uma única coluna pode ocupar quantas dessas colunas quiser. Por exemplo, você poderia ter duas colunas de sexo. Você poderia ter três colunas ou quatro. Você poderia ter quatro colunas de três. Ou você poderia ter uma coluna de 71, coluna de cinco. Você poderia ter três colunas para o seu 5 e 1 de 2. E como você pode ver, isso lhe dá controle ilimitado sobre teias de coluna com Anna linha. Então vamos colocar isso em prática. Vou trazer o editor de código e preciso adicionar uma linha. Todos os três parágrafos bem estar dentro dessa linha. Então, acima do primeiro parágrafo. E vamos iterar dev, que é um elemento HTML genérico. E eu vou escrever classe igual a linha. Então temos um elemento div HTML, que novamente é um elemento HTML genérico. E dentro disso, eu tenho um atributo de classe, que eu adicionei por raça e classe iguais. E dentro das marcas de fala eu adicionei linha. Temos de fechar esta etiqueta. Mas porque queremos os três elementos do parágrafo dentro dele. E nós vamos descer abaixo da etiqueta de fechamento do terceiro parágrafo. E eu vou fechar a tag div para manter as coisas bem no nosso editor de código. O que eu vou fazer não é apenas os elementos do parágrafo sobre a direita permitir. Isso não terá efeito em nossa página web real, mas afeta como as coisas são definidas dentro do editor de código e facilita a compreensão de onde os elementos estão dentro dos outros. Para fazer isso, vou apenas selecionar todos os nossos elementos de parágrafo. E eu vou pressionar Tab no meu teclado. Você pode ver que não há torna as coisas mais fáceis de entender a partir do editor de código é o ponto de vista. Visualmente você pode ver que três elementos de parágrafo estão dentro de uma linha, dev. Então eu não vou ver se isso e carregar nossa página web de exercícios e atualizar. E você pode ver que nada realmente mudou. Isso porque tudo o que fizemos foi adicionar esses três elementos de parágrafo em sua linha. Precisamos saber se as adiciono em colunas. Então eu quero três colunas igualmente espaçadas dentro dessa linha. E como Bootstrap tem uma largura máxima de coluna de linha de 12, isso significa que cada coluna de parágrafo deve ser quatro colunas de molhado. Então, como fazemos isso? Vamos voltar ao nosso editor de código. E acima do nosso primeiro parágrafo, eu vou adicionar um novo Dev, que como você se lembra como um elemento HTML genérico, eu vou adicionar uma classe igual a marcas de fala. E evitar isso. Eu vou classificar o CLL para a coluna traço quatro para uma coluna teia de quatro. E eu vou terminar essa tag HTML de abertura. Agora só queremos que o nosso primeiro parágrafo seja uma primeira coluna. Então, abaixo da tag p de fechamento para o nosso primeiro elemento parágrafo. E quando eu tive um coxo e eu vou fechar aquela etiqueta div. Mais uma vez para manter as coisas que podem ser agradáveis dentro do nosso editor de código, eu vou selecionar todo o primeiro parágrafo e pressionar Tab. Então, novamente, mega visualmente óbvio que o elemento parágrafo é tecida a coluna da classe dev. Então, agora adicionamos nosso primeiro elemento de parágrafo em uma coluna de quatro. Precisamos são o segundo, terceiro parágrafos e fazer suas próprias colunas. Para tornar isso rápido, tudo o que você precisa fazer é selecionar e copiar a coluna da classe de desenvolvimento para a tag HTML que você acabou de adicionar. E adicione isso acima do segundo parágrafo criando uma nova linha no PSTN. Em seguida, logo após a tag p de fechamento para o segundo parágrafo, feche as tags div. Novamente, vou selecionar o elemento de parágrafo inteiro e pressionar Tab no meu teclado. E, por último, acima do terceiro parágrafo, criar uma nova faixa e um determinado PS, a coluna de classe dev para elemento. E novamente, logo após a tag p de fechamento, eu vou fechar essa tag div. E novamente, vou selecionar todo o terceiro parágrafo e pressionar Tab no meu teclado. Mais uma vez, apenas para deixar claro, quando eu estou touting elemento através do editor de código não está mudando sua posse ou layout na página web real. Assembly para referência visual dentro do editor de código. Como você pode ver, torna mais fácil de ver. Temos três colunas. Temos uma div com uma classe de coluna quatro, com um parágrafo dentro. Temos uma segunda div com uma classe de coluna para antes parágrafo branco dentro. E temos uma terceira div com uma classe de coluna para o primeiro terceiro parágrafo dentro. Eu não vou ver se isso vai voltar para a nossa página de exercícios e atualizar. Você pode ver que temos uma linha, e dentro dessa linha temos três caixas de colunas de casados iguais. E lá dentro temos os nossos parágrafos. Se dermos uma olhada nas ferramentas de desenvolvimento apenas para entender isso ainda mais, você pode ver que temos nossa linha de classe div. Se eu abrir isso clicando na seta para a esquerda, você pode ver com Anna linha, temos três colunas de igual largura. E dentro de cada coluna, temos nossos elementos de parágrafo. Como mencionado, a largura máxima de uma linha é 12. Assim, podemos ter um jogador por e lanças estes de forma diferente se quisermos, contanto que permaneçamos dentro da coluna máxima enquanto de 12. Assim, por exemplo, podemos ter os dois primeiros parágrafos muito pequenos, então apenas duas colunas de pão. E nosso último parágrafo ser realmente grande de colunas de IoT com ele. Mais dois, mais dois são 12. Então essa é a nossa teia real máxima. Eu vou salvá-lo. E quando eu atualizo a página, você pode ver que agora temos dois parágrafos pequenos e o terceiro é muito grande. Você também pode alterar S impedir DevTools para obter uma representação visual rápida e fácil de como isso ficaria simplesmente indo com n ou uma classe de linha e alterando as classes de desenvolvimento para ter diferentes webs de coluna. Então, por exemplo, eu poderia fazer este 1, 4, eu poderia fazer o metal 13, e eu poderia fazer o último, 5. Se você incluir mais colunas do que 12, o que eu posso fazer aqui NIH, fazendo este nove, por exemplo, você pode ver que ele quebra a linha. Você precisa ter certeza de que todas as colunas dentro da linha somem até 12. Então, para fazer isso, eu mudaria essa coluna de volta para cinco. Você pode ter tão pouco quanto uma coluna dentro de uma linha e um máximo de 12. Bootstrap vem com muitas outras coisas que você pode usar simplesmente usando classes CSS, como botões, cartões, drop-down, formulários, até mesmo navegações. Mas para este curso, vamos Assembléia vai fazer uso do sistema de grade, pois é uma maneira realmente poderosa de reunir site responsivo móvel, que será tocar mais tarde neste curso. Juntos rapidamente. 12. O que vamos criar: Então, antes de escrevermos qualquer código, vamos dar uma olhada no site que vamos criar. Então, para este curso, eu crio um cenário divertido onde temos um negócio no mundo que é gerido exclusivamente por cães. E eles vieram até nós para criar seu primeiro site. É um pouco divertido e cenário de Sally, mas nos dá uma direção criativa para sair. Então vamos dar uma olhada no site que vamos criar para eles. A primeira seção que você verá no site é a navegação. E isso contém alguns links que nos permitem navegar pela página web. Então, por exemplo, se eu clicar lá bi-seção, ele nos leva para lá por área do site. Ou se eu clicar na seção Fale Conosco, ele nos levará para a seção Fale Conosco do site. Esta será a nossa navegação. A próxima seção que temos para o site é a área de redução. Esta é uma seção grande e ousada, contém muita cor. Parece muito bom, tem uma imagem de mendigo, tem um cabeçalho saco, e tem uma pequena quantidade de tags de parágrafo, que basicamente descreve nossa ENT reduz o negócio para o site do escritório visualizador, diz que será a seção de introdução ao RSA. A próxima área do site que temos é a seção Sobre Nós. Você pode ver que tem três colunas. Cada coluna tem um dano cerebral menor, um título e um parágrafo. E cada coluna é basicamente algumas informações sobre um membro da equipe fora como negócio. Então você pode ver que eu tenho cão superior o cão até mesmo gerenciar o seu cão, diz que estará lá pela nossa seção do site. A próxima seção que temos é a seção YR também dizer, e ele faz exatamente isso. Ele descreve por que alguém deve escolher como revisão de negócios FDA no site, você pode ver que temos três linhas com todos Ernie e por grãos a sede e terceiro tem este fundo azul roxo. E o do meio tem uma barra mais cinza grão. Terminar cada linha temos um título e um parágrafo e uma imagem. E você pode ver que é dreno aba para a linha de metal diz que será a seção y OS do site. A próxima seção que um indiscutivelmente o mais importante porque é realmente prejudicar as pessoas podem entrar em contato com o seu negócio. A seção Fale Conosco. Você pode ver no lado esquerdo que temos o e-mail e também o endereço da empresa. E, no lado direito, temos mais duas imagens. Esta será a seção Fale Conosco do site. Por último, temos o rodapé. Isso é realmente simples e direto. Ele apenas contém o ano, que é obviamente 2021 no momento de Magnus coerce eo nome do negócio. Então este é o site e todo um, e isso é o que vamos codificar e estilizar ao criar nosso primeiro site. 13. Como criar o site - navegação: Agora você está pronto para começar a codificar o projeto do site médio usando tudo o que aprendemos até agora e nosso arquivo HTML exercício, vamos puxar tudo junto e fazer um site de aparência profissional. Para começar, precisamos limpar o restaurante Chordata ou abrir alguns arquivos novos para começar. Vou fechar a folha de estilo para o site de exercícios. E eu vou fechar o index.html para o nosso site de exercícios. Traga a pasta do pacote de exercícios a partir da qual tenho trabalhado e vá até um arquivo. Bem, então lá você verá nossa pasta do site. Clique no fim da pasta do site. E vamos adicionar nosso index.html em nosso editor de código. Você pode ver que estamos começando com, eu rezo, novo arquivo HTML em branco. Muito para vê-lo como nosso arquivo HTML exercício. A primeira coisa que precisamos fazer é incluir uma folha de estilo. Mas antes de fazermos isso, precisamos criá-lo. Volte para a pasta do nosso site, crie uma nova pasta chamada style. Dentro dessa pasta, crie um novo documento de texto, mas chame-o de folha de estilo dot css. E queremos alterar a extensão do nome do arquivo. Então, sim. E agora criamos um arquivo CSS de ponto de folha de estilo que é conhecido incluem isso dentro do cabeçalho do nosso documento HTML. Então eu vou fita link REL para uma relação é igual a folha de estilo porque é uma folha de estilo, H ref. E dentro das marcas de fala, precisamos adicionar nosso caminho. Olhando para a nossa pasta do site, você pode ver a pasta é chamada de estilo. E nós entramos para tentar carregar as folhas de estilo ou documento CSS. Então, vamos digitar estilo para pesquisa, folhas de estilo ou CSS. E fecharemos a linha HTML. Deixe-nos ver isso. Queremos abrir nossa folha de estilos para que possamos adicionar estilos à medida que desenvolvemos ou website. o botão direito do mouse na guia index.html, vá para Split rate, em seguida, abra nossa pasta do site e arraste nossa folha de estilo e para o PM direito. Podemos então fechar nosso arquivo index.html no punho direito. Incluímos nossa folha de estilos e temos um aberto pronto para adicionar estilos. Em seguida, precisamos incluir Bootstrap. Lembre-se, o arquivo bootstrap.css deve ir acima da nossa folha de estilo e do nosso documento HTML para que todas as regras CSS sejam taxa e nossa folha de estilo substitua quaisquer estilos pré-existentes que vêm com o Bootstrap. Então eu vou adicionar uma nova camada acima do lamer. Incluímos nossa folha de estilo. Vou copiar aquela pista e os colegas para cima só para ver se há algum tempo. E eu vou abrir nossa pasta de exercícios do site. Se formos até a pasta do nosso site, você pode ver que não temos uma pasta bootstrap incluída. Então, precisamos ir para cima novamente para a pasta do pacote, ir para o necessário para a pasta de exercícios, e copiar a pasta de bootstrap. Volte para a pasta do site. E perfurou a pasta de bootstrap. E dentro dessa pasta Bootstrap, você pode ver que o arquivo bootstrap.css está incluído. Então, pai, há documento rasgo index.html. Nós mudamos o caminho para ser bootstrapped, forward slash bootstrap.css e ver se griot, estamos agora prontos para ir na criação do nosso site principal, a primeira coisa que queremos fazer é adicionar uma navegação para o topo de seu site. Então vamos escrever isso. Vamos para dentro das tags de corpo para documento HTML. E vamos criar o que é chamado de comentário. Um comentário é Elaine, em seguida, o seu editor de código, que não é renderizado em sua página web. O objetivo simples é permitir que você adicione notas ao seu documento HTML, que pode ser usado para explicar seu acorde, que é realmente útil se você voltar para um documento HTML, alelo ou D ele para ajudar a atualizar sua memória. Para escrever um comentário, você precisa escrever um ponto de exclamação menos de sinal, traço, traço. Você pode ver que a linha agora fica cinza em seu editor de código. E eu estou indo para re navegação e em pistas. Sua taxa de comentários, traço, traço. Maior do que insano. Você pode ver que esta linha está acinzentada. Isso significa que o DES não é nenhum comentário e bem não ser exibido em sua página web. E uma fina adicionada nas linhas abaixo. Bem ser exibido apenas texto entre os traços. Comentário de bem-estar I, não há tag, uma nova faixa e taxa ou navegação HTML. Então queremos uma lista ordenada, então uma etiqueta UL. Vou fechar essa etiqueta de lista desordenada. E dentro da nossa lista não ordenada, precisamos de um último “I I I I tag”. E vamos pensar sobre quais itens estarão em nossa navegação. Vamos ter casa. Então você pode voltar para a página inicial. E eu vou fechar a tag HTML ALA. Vou pegar uma nova pista. E quando eu adicionar outra etiqueta LI em nosso site, vamos ter uma seção de mordidas. Então, vou escrever um barco que inclui a etiqueta de LA. Você pode acelerar isso simplesmente copiando e colando as linhas ALA. Então eu vou adicionar mais dois. Eu vou ter uma seção maneira OS. E nós vamos ter uma seção de contato. Você pode ter o que quiser em sua navegação. Mas eu acho que primeiro exemplo, estes vão funcionar perfeitamente. Isso e eu vejo isso. E pela primeira vez, isso é trazer nossa página HTML e nosso navegador. Hoje que alguém vá para a pasta de exercícios, vá para a parte do site da nossa pasta de exercícios e clique duas vezes em nosso index.html. Você pode ver que o HTML que é adicionado foi carregado e são mais brilhantes. Vamos abrir DevTools. Não precisamos deles para o NIH, mas vamos mantê-los abertos, pois vamos precisar deles através dos oito melhores processos de desenvolvimento. Agora, quando se trata de projetar sites. Realmente duas maneiras de fazer isso. Você pode escrever todo o seu HTML e um ir e , em seguida, voltar e ficar em silêncio, levantando o seu CSS mais cedo veado. Ou você pode escrever seu HTML e CSS juntos enquanto você vai para baixo através da página web em desenvolvimento. Nós vamos usar a escada para este curso porque eu acho que faz muito mais sentido dimensionar cada seção do site azure classificar o HTML para dar-lhe uma imagem melhor de como a página está se juntando à medida que você a desenvolve. Então vamos estilo ou uma navegação. No momento, não se parece nada com uma navegação que se parece com uma lista. Então vamos transformar nosso último em uma navegação. Vamos voltar ao nosso arquivo index.html dentro do nosso editor de código. E vamos adicionar uma aula à nossa honrada explosão. Vamos chamar de navegação. E C de olhar para a nossa navegação, a primeira coisa que precisamos fazer é colocá-lo na página de oferta central. Isso é bom nosso editor de código e ir para a nossa folha de estilo dot CSS. Também podemos usar comentários dentro de nossas folhas de estilo ou CSS. A única diferença é a maneira como você os escreve como um pouco diferente de como você os classifica em um arquivo HTML. Para CSS, você escreve um asteriscos de barra, que é o início do nosso comentário, e matriz 1D e navegação. E, em seguida, para fechá-lo, urate asterix barra para a frente. Portanto, quaisquer tags entre os dois asteriscos são comuns a mim e não serão renderizadas em sua página web. Isso novamente, é ótimo para escrever notas sobre seu código, o que o ajudará a fazer sentido. Ofereça FU, volte mais cedo, querida. Vamos criar uma nova faixa que seja um ponto ou ponto. E na palavra navegação, que é em referência à navegação de classe, nós apenas criamos para nossa lista não ordenada. E nós somos carrinha ou suportes encaracolados. Vamos adicionar texto alinhado centro e ver que voltei para a nossa página web. Agora você pode ver que nossa navegação está centralizada. A próxima edição precisamos de ter chovido como precisamos cada um para que eu não estou para estar na mesma pista para a navegação mais elegante. E há como um último. Para fazer isso. Vamos voltar à nossa folha de estilos e vamos criar um novo seletor. E quando ou um período ou navegação de dieta para a classe de navegação. E então eu vou escrever, ALI, por que eu fiz isso? Então, dando uma olhada no nosso seletor de folhas de estilo, você pode ver que você pode iniciar seletores juntos. Então, usando a navegação de ponto ou período para referência e a classe de navegação em nosso documento HTML. Mas então nós usamos um seletor de elementos de ALA. Se você se lembrar, o seletor FS não tem um ponto ou ponto antes dele, é um seletor de elementos e afetará todos os elementos HTML desse tipo. Então, há LI seletor afetará todos os elementos ALA em nossa página. Mas porque nós colocá-lo após a navegação seletor de classe, ele só afetará todos os elementos LI com n, a navegação de classe. Então, o que afetará todos esses elementos LI com n? Esta classe de navegação, deixe-me adicionar colchetes, e vamos adicionar display e ln bloco. Lembre-se quando eu disse algumas propriedades CSS, você só tem que aprender. Infelizmente, este é um deles. Então, por enquanto, basta fita nos ND ou stylesheet dot css e salvá-lo. Volte para a nossa página de exercícios e atualize-a. Agora você pode ver que temos algo que se parece mais com uma navegação como cada último dia m está na mesma faixa. A única coisa é h último elemento é um pouco perto um do outro. Então, para os fatos como eu vou adicionar uma margem para a direita. Então eu vou clicar no elemento LSTM do evento DevTools. Você pode ver a nossa navegação, que eu não sou conjunto real está mostrando a partir da nossa folha de estilo. Então eu vou clicar para adicionar uma nova propriedade. E eu vou re margem esquerda 15 pixels. Você pode ver que isso é lanças. Estes elementos são muito bem como a experiência. Então eu vou apenas copiar esta propriedade e valor bom ou o editor de código e criar uma nova camada com navegação interna, que é dia e PSTN e teve C de 10. Vou atualizar ou página web. Por último, a nossa navegação está muito próxima do topo da página web. Preciso de o tapar. Eu FA clique na tag UL da navegação de classe. Você pode ver que já temos uma declaração carregada da nossa folha de estilo. Então eu vou criar uma nova faixa e eu vou classificar preenchimento. Em cima. Estofamento funcionou muito como margens. Então eu vou adicionar um preenchimento de 20 pixels. Temos mais elementos, página de atraso, e não queremos que eles fiquem presos na parte inferior da navegação dela. Então, eu também vou adicionar fundo de preenchimento, e eu vou colocar o fundo em 20 pixels também. Você pode ver se você passar o mouse sobre a tag UL, o roxo mostra o preenchimento. Assim, podemos ver que sabemos ter preenchimento roxo de 20 pixels na parte superior e preenchimento roxo de 20 pixels na parte inferior. Vamos copiar as duas propriedades de preenchimento que acabamos de criar. Vá para o nosso editor de código dentro da navegação, crie uma nova faixa. E cara do PSD, eu não vou ter que ver se voltar para a nossa página e atualizar. E isso parece ótimo. Temos o início da nossa página web e na navegação e jogadores. 14. Como criar o site - introdução: Agora temos um editor de navegação ou site. Queremos adicionar a próxima seção, que é o nosso site e linha. Vamos para o nosso editor de código e azul ou na etiqueta menos ordenada. Vamos adicionar um novo comentário, que novamente é um sinal de ponto de exclamação traço, traço. E vamos chamar Andrew, redução de amigos. Dash, traço. Maior do que dizer que não comentário, nos permite saber que explodiu em uma nova pista. Vamos adicionar a seção R e rho. Então a primeira coisa que eu quero em nossa seção de introdução é uma imagem. Então eu vou adicionar a tag de imagem. Vou digitar SRC para fonte igual. E dentro da vírgula, vamos agora incluir uma foto de perfil ou qualquer imagem que você queira. No final da seção, se você olhar para a pasta de exercícios, você verá que eu incluí todas as imagens que você vai precisar com uma pasta de imagens para esta página web onde Meghan neste curso. Você não precisa usar essas imagens. Você pode usar qualquer imagem que você um, para tornar as coisas agradáveis e fáceis. Eu incluí estes para que você possa simplesmente usar as imagens que estou usando. E não há maneira mais gorda, bem dizer como se você quiser usar suas próprias imagens, uma recomendação que você adicioná-los a essas pastas de imagens, que só vai fazer adicionar os caminhos e para a fonte de imagem muito mais simples e muito mais fácil de seguir junto com o curso. Ou como eu, se você quiser apenas usar essas imagens, simplesmente faça exatamente como eu faço neste curso. Então aqui eu incluí um perfil JPEG dentro da pasta de imagens. Então o nosso caminho vai ser imagens para a pasta de imagens, perfil de barra, JPEG. Para ser claro, é o nome da imagem dentro da pasta de imagens. Então eu vou escrever para texto alternativo igual a e passar para marcas de fala. Eu só vou refilmar o perfil. E eu vou fechar a nossa etiqueta de imagem. Então eu quero ir. Então eu vou escrever H1 para um elemento tag H1. E eu vou re, bem-vindo. E eu vou fechar a etiqueta H1, um envelope que eu quero um parágrafo curto. Então eu vou ler o elemento parágrafo e eu vou re, nós somos o primeiro negócio do mundo. E por cães. Porque, como você sabe, este é um site para um negócio de base de cães que foram criados neste curso. E então eu vou fechar a tag de parágrafo. Uma vez que nenhum mar de que e dar uma olhada em ambos ligados em nossa página web. Voltar para a nossa página web, e eu vou atualizar. Então você pode ver que a imagem está carregada. Temos a nossa etiqueta de cabeçalho e temos o nosso parágrafo. Mas isso não parece nada bom. Então a próxima coisa que eu quero fazer é adicionar um fundo para esta seção de introdução. Então, olhando para o nosso código e nosso editor de código, você pode ver que esses elementos no minuto não são agrupados com uma tag ou uma classe. Eu posso aplicar um fundo também. Então eu vou criar uma nova faixa de ambas as imagens. E eu vou escrever seção como o elemento HTML. Você também pode usar Dev aqui, mas seção como um elemento HTML semântico. Seção significa que o conteúdo e dizer que é agarrado ou realmente diz tema único, levantar um elemento HTML dev é mais genérico porque S é uma seção de introdução do nosso site, sempre m com n, este elemento HTML que estamos escrevendo como indo ser agarrado e como vai realmente atestar tema único, o Endrew, então faz mais sentido para seção e SKS. E eu vou adicionar uma aula. E eu vou chamá-lo de fundo colorido. Porque queremos que a seção desenrolada tenha um fundo colorido. Eu vou então ir abaixo do elemento de parágrafo, e eu vou fechar a tag de seção. Mais uma vez para manter as coisas com bom aspecto em nosso editor de código, eu estou indo para um ligeiro dano H1 tag cabeçalho e a guia de parágrafo e hit. Só para que possamos ver visualmente em nosso editor de código que os elementos que eram van ou seção de fundo colorido. Agora eu vou ver se isso, eu vou para a nossa página web e eu estou indo para atualizar. Você pode ver se você olhar para o HTML, que a nossa classe de seção de fundo colorido tem o título da imagem, tag e parágrafo com Anna. Vamos adicionar um plano de fundo a essa seção e vamos passar para o CSS pn de DevTools. Clique em Adicionar novo real. E dentro dessa regra disse que é apenas criá-lo. Vou escrever fundo. Agora, em vez de usar apenas uma cor, é hora, vou usar uma imagem para fazer isso. Você deseja escrever URL, colchetes e dois apóstrofos. Sabe o que N, esses apóstrofos, precisamos adicionar o caminho à nossa imagem. Então vamos dar uma olhada em nossa pasta de exercícios. E você pode ver com n a pasta de imagens, Eu incluí um dano grau ruim, ponto fino PNG. Então precisamos adicionar o caminho para isso por danos cerebrais e entre os dois apóstrofos. Então há imagens de fundo dentro da pasta de imagens, e tem uma ninfa por ponto de grão PNG. Então você pode presumir o caminho que precisamos para re como imagens para frente barra ponto de fundo PNG. Mas sejamos errados. A razão para isso é porque se pensarmos na matemática que eu ensinei sobre caminhos hurray, de presumir que você está descrevendo onde o dano quanto a index.html. Nós não estamos realmente descrevendo isso para index.html. Estamos apenas dando a folha de estilo dentro da pasta de estilos. Então, na verdade, o que precisamos fazer é subir uma pasta, em seguida, para a pasta de imagens, e, em seguida, por ponto verde PNG para escrever uma pasta, o que nós faríamos é que nós somos dre dot dot forward slash, que significa que com NIH foi para cima de uma pasta. Em seguida, imagens, em seguida, por ponto de grão PNG. Quando eu inserir o decimal, não será exibido até que tenhamos adicionado pela primeira vez à nossa folha de estilos. Então, vou copiar este verdadeiro Sam. Vou abrir o nosso editor de código e vou adicionar um novo comentário dentro da nossa folha de estilos. Então eu vou fazer asteriscos de barra para a frente porque lembre-se que é diferente para folhas de estilo. E eu vou classificar E regra novamente relativa à nossa tia seção HTML real. Sempre que um Asterix e barra para a frente. E então eu vou Pierce são realmente sentados em. Novamente, ponto, ponto ou ponto ponto barra para a frente significa que temos uma pasta superior. Então, se dermos uma olhada em nossa pasta de folhas de estilo e nossas folhas de estilo ou CSS, que é o que estamos descrevendo o caminho para. Nós vamos subir ou pasta. Então temos imagens barra, porque estaríamos indo para a pasta de imagens. E então queremos o PNG ponto BG, que temos aqui. Vamos ver se isso vai para a nossa página web e atualizar. Você pode ver que nossa imagem de fundo é agradável mostrando esta imagem de fundo é semitransparente. O que isso significa é que as seções de peso que você pode ver atualmente são transparentes. Então qualquer coisa abaixo apareceria. Isso significa que podemos adicionar uma cor ao nosso plano de fundo e a cor irá definir a imagem do soprador. Então, se dermos uma olhada em nossa seção de fundo colorido e nossa propriedade de fundo, e clique para editar o valor. E se um após o colchete de fechamento será exibido abaixo da imagem. Então podemos adicionar uma cor. Por exemplo, podemos adicionar um espaço e classificar vermelho, o que você pode ver. Ou podemos usar um código hexadecimal para uma cor, 90, a cor que eu quero usar, e agora é 33225 b, que é uma cor púrpura. Você não precisa usar essa cor. Você pode usar a cor que quiser. Pode não ser uma palavra como vermelho ou azul ou um código de cor hexadecimal, mas ela tem de outro lugar. Mas se quiser seguir, use 33, 22, cinco B, e ela e ela. A próxima coisa que você vai notar é que os grãos do saco parece cortar o nível para a taxa. Não é largura total, está se repetindo novamente. Então, para corrigir isso, o que nós estamos, é por tamanho de grão e nós classificamos 100 por cento. O que isso significa é que a imagem vai ocupar 100 por cento da largura do fundo. Isso não é uma cópia. Estas propriedades vão para o nosso editor de código e peers to mentor ou fundo colorido areia real. Novamente, estou mantendo tudo alinhado bem só para que seja fácil de entender. Eu não vou ver esta boa nossa página web e clique em Atualizar. E vocês podem ver que nosso plano de fundo está mostrando agora. A próxima coisa que queremos fazer é enviar-lhe os elementos dentro da cor de fundo. Eles não parecem ótimos, esmagados para a esquerda aqui nós queremos que eles no centro fiquem bonitos. Então vamos voltar ao nosso editor de código e precisamos adicionar a imagem H1, tag de cabeçalho e parágrafo dentro de um dev. Então eu vou adicionar uma faixa abaixo desta seção. Eu vou escrever Dev e eu vou classificar classe igual, e então para marcas de fala. E agora vamos fazer uso do sistema de grade Bootstrap. Eu não quero que esta seção seja de largura total. Quero que seja uma caixa no centro da minha seção de introdução. Então eu quero que seja uma coluna com um molhado definido. Então eu vou chamá-los se o barco favorece sobre a taxa. Podemos mudá-lo mais cedo, D7, não é. Então eu vou escrever C, O, L para coluna traço f5 para uma coluna de cinco. E eu vou fechar a nossa etiqueta de surdos. Queremos o título de dano H1 dos elementos do parágrafo dentro desta div. Então eu vou marcar um novo parágrafo e fechar essa tag div. Eu vou então selecionar a imagem H1 e tag parágrafo, novamente, pressionando Tab para empurrá-los para mostrar que há dizendo dentro desta tag div, Eu não vou apertar C of Good nossa página web e atualizar. E você pode ver que não mudou muito. Mas se olharmos para DevTools saber com fundo colorido ação MRSA, você pode ver a tag dev com coluna 5. Ao pairar sobre ele. A largura é arcos, todos eles cinco colunas. Ele e eu só precisamos do Centro-Leste. Para fazer isso. Vamos trazer nosso editor de código e vamos adicionar uma segunda classe. Você pode adicionar mais de uma classe com n, uma tag HTML. E tudo que você tem que fazer é separá-lo por uma espécie. Então eu vou adicionar uma segunda classe chamada pântanos centrados. E eu vou criar isso como um seletor CSS dentro da nossa folha de estilo. Então eu vou desenhar um ponto ou ponto caixa centrada, e eu vou escrever margin-left 0. E taxa de margem de quando você define algo de margin-esquerda e margin-direita auto, Eveleigh clinicamente centro essa doença. Então agora eu vou ver se a folha de estilo e ver o index.html. Volte para a nossa página e clique em Atualizar. Você pode ver que há coluna tem centrado dentro do nosso Andrew, o que parece ótimo. No entanto, os elementos terminariam a coluna não foram centralizados. Então, podemos querer enviar-lhe a imagem, o cabeçalho e o parágrafo vai então eles são caixa centrada que é coluna. Então eu vou simplesmente adicionar uma propriedade à nossa caixa centrada. Nós vamos dizer isso. E eu vou escrever centro de alinhamento de texto. Você pode ver que não há centro é a nossa imagem estão indo em nosso parágrafo, que parece fantástico. Vou copiar esta propriedade. Eu vou ao nosso editor de código e eu vou atacar qualquer faixa azul margens que acabamos de adicionar e adicionar endline porque copiado do centro de alinhamento de texto, a próxima coisa que eu quero fazer é reinar sobre esta imagem. Então, há duas coisas que precisamos fazer. Primeiro, precisamos ter certeza de que a imagem também. Se você adicionou uma imagem realmente grande na página da Web, você já deve ter notado que isso é muito grande porque no minuto não temos webs definidos. O tamanho da imagem será na página da Web é o mesmo que a imagem realmente é. Então, se você tem uma imagem grande, sempre olhar realmente grande na página web. E se é realmente pequeno, muito pequeno e a página web, precisamos definir uma web e CSS. Então vamos ao nosso editor de código. Isso é bom, nossa folha de estilo. E queremos selecionar o elemento de imagem dentro do centro para a classe de brejos. Então, para fazer isso, o primeiro raio, o seletor CSS para a classe caixa centrada. E então escrevemos o seletor de elemento CSS de IMG para danos. Portanto, quaisquer propriedades que adicionamos aqui dentro dos colchetes serão aplicadas a todas as imagens dentro da classe caixa centrada. E essa é a taxa com 300 pixels. E ver se não funciona, volto para a nossa página e atualizo. E você pode ver que nossa imagem agora é muito menor, pois tem a largura de 300 pixels. Só sei que quero escrever esta imagem. Então, vamos clicar no elemento HTML imagem e, em seguida, a imagem de brejos centrados, sentido real que é clicado para fora uma nova propriedade. Vamos adicionar raio de fronteira. E podemos adicionar a porcentagem que quisermos para o raio de fronteira. Simplesmente reinou sobre o legista. Então você poderia usar 10 por cento, como você pode ver aqui. Você poderia usar 20 por cento. Você poderia escolher 30 por cento. Podes usar a percentagem que lavares, Havre. Suas imagens quadradas e sua imagem devem ser quadradas. Se sua imagem não for quadrada, você pode simplesmente carregá-la no Photoshop ou no software de edição de imagens de amnésia que você tem. Faça o dano quadrado e veja se ele, se sua imagem é quadrada e você fizer o raio da borda 50 por cento, ele fará a imagem circular. Isso é uma droga fantástica. Eu vou copiar essa propriedade, abrir a folha de estilo e nós somos um conjunto de regras de danos dos pântanos centrados no fornecedor. E quando um PSTN e ver se ele, Eu vou voltar para esta página web e atualizar. Ok, isso é uma estrela em que eles são realmente ótimos. Uma coisa, você vai notar imediatamente como o texto preto é realmente difícil de ver neste fundo. Então eu vou clicar na seção de fundo de cor. Vou entrar nas propriedades do verdadeiro Sam. E eu vou escrever cor, hashtag e sexo um HFS, que é o código hexadecimal para peso. E isso imediatamente faz uma etiqueta ficar muito urso. Então eu vou copiar isso muito bem. Nossa folha de estilo e PSTN como uma nova faixa, estamos então são coloridos conjunto de regras de fundo e ver se eu vou voltar para a nossa página e atualizar. A próxima coisa que precisamos dar uma olhada é que a imagem é definida muito perto do topo da seção de introdução e do parágrafo na parte inferior, uma frase muito próxima da parte inferior da seção anthro. Então, se eu clicar no elemento HTML classe pântanos centrados, que é pad este Rabat. Então, dentro do centro bugs conjunto de regras e quando são oito preenchimento? E se eu não definir uma esquerda, superior, direita ou inferior, a carrinha Pexels que eu aplicar aplicar-se-á a todos os quatro lados. Então esquerda, superior, direita e inferior. Vou adicionar um preenchimento de 50 pixels. E você pode ver que instantaneamente parece muito melhor. Vou copiar as propriedades de preenchimento. Eu apenas criá-lo e adicioná-los aos meus brejos centrais na folha de estilo e ver se voltou para a página web, há uma última coisa que eu acho que precisa ser feito aqui, e que é a tag título bem-vindo simplesmente não se destaca o suficiente. Então, se eu clicar para escolher um elemento, mouse sobre a tag H1, selecione a tag H1, clique para criar um novo Sam real. Eu vou fazer o tamanho da fonte 70 pixels, mas você pode fazer o que quiser. E eu vou deixar a fonte em negrito para se destacar mais. Vou copiar isso muito triste. Volte para a minha folha de estilo. Mas porque nós acabamos de mudar o tamanho da fonte e estamos fora de uma etiqueta H1 cabeçalho. Eu vou para o topo da minha folha de estilo. Eu vou adicionar um novo comentário, para frente barra passe truques. Eu vou escrever tamanhos de fonte asterix barra para fechar o comentário. E eu vou aparecer esse conjunto de regras e ali. E eu vou usar esta seção para adicionar qualquer outra diversão, sentido real enquanto continuamos. Eu vou salvar isso. Volte para a nossa página e clique em Atualizar. Um ajuste final que é necessário. Acabei de notar dentro da navegação, como você vai notar que a navegação não está configurando central para o resto da página. Vamos investigar maneira. Então, se dermos uma olhada na nossa lista de navegação de classe não ordenada e passar o mouse sobre ela. Você pode ver se você olhar para o topo da página e o roxo que está mostrando o preenchimento. Temos um estofamento aplicado à esquerda e não ao raio. Este é apenas um estilo CSS padrão, que é aplicado por braseiros porque é um último. Obviamente queremos que isto seja uma navegação. Então, vamos adicionar preenchimento esquerdo 0 pixels para nossa função de navegação sam. O que é garante que não há preenchimento à esquerda para empurrar a navegação. Vou copiar aquela propriedade que acabamos de adicionar. Vá para nossa regra de navegação, defina uma nova faixa, um PSTN, e veja se vou voltar para a página e atualizar. Você pode ver que estamos quase lá. Ainda é um pouco demais para o ritmo. Então, se eu der uma olhada nos últimos itens quando você pode ver que nós adicionamos uma margem esquerda, ensinar último item a criar as coisas lança. Mas o que isso está fazendo é empurrar a navegação para o array porque o primeiro item tem uma margem esquerda que não é necessária. Para corrigir isso, vamos usar um seletor CSS chamado primeiro fora fita para remover a margem esquerda de apenas o primeiro, que eu não esteja dentro da navegação para classificar este editor de código Goodyear e explodir a navegação no último dia. E vamos dizer em, vamos adicionar outro. Vamos adicionar a navegação de ponto ou ponto para a classe de navegação. Vamos acrescentar que eu não sou para o que eu não sou elementos cólon. E depois escrevemos primeiro fora da fita. Então, como é que isto funciona? No início, temos nossa navegação, que é nosso seletor de classe. Então temos LI. Por último eu sou um seletor de elemento, modo que seleciona todos os elementos LI foram, em seguida, a classe de navegação. Mas então nós adicionamos chamada em primeiro lugar da fita. Então isso significa que ele só afetará a primeira vez que eu não sou a classe de navegação do fornecedor como outros colchetes. E não queremos margem dentro do primeiro item da lista em nossa navegação. Então nós vamos re margem esquerda 0 pixels. O que isso significa é o primeiro que eu não vou, então, ou classe de navegação não terá margem riu que mar de que. Volte para a nossa página web e atualize. E você pode ver que a navegação agora se alinha perfeitamente se inspecionamos ou navegamos e vamos para o nosso último dia. E você pode ver que o primeiro tem o primeiro do conjunto de regras de fita que acabamos de adicionar para remover a margem para cada outro ninho que eu estou depois que tem a margem adicionada porque ele não usa o primeiro do tipo real Sayer. 15. Como criar o site - alterando o fundo: Quando se trata de fundo colorido ou seu site, você precisará usar a imagem de fundo incluída para este curso. Você pode encontrar e usar qualquer fundo U1. Deixa-me mostrar-te como se faz isso. Primeiro, Vamos encontrar uma imagem diferente para o fundo do nosso site. Eu recomendo um site como Unsplash, que tem imagens livres de royalties e utilizáveis, mas você pode usar qualquer imagem que você quiser, desde que você tenha permissão para fazê-lo. E eu só vou procurar fundos. Você pode rolar para baixo e encontrar qualquer imagem, imagem fantasia. Vou escolher um que eu goste. Por exemplo, esse é um dos bosques. E eu vou apenas clicar e baixar danos. Então esta é a minha pasta de downloads e este é o dano que acabei de baixar. Vou arrastar esta imagem para a pasta de imagens do site em que estavam trabalhando. E vou mudar o nome desta floresta por grão. Mas pode dar o nome que quiser. É o meu ir ao nosso site e estamos DevTools evento com a seção de fundo colorido selecionada. Você pode ir para o URL de fundo, clique para editá-lo. E eu vou mudar o ponto de fundo PNG para a floresta por grão, esquivar JPEG, e é por isso que acabei renomear o dano que baixamos dentro da pasta Imagens. Entrar. E você pode ver que esta imagem agora entrou em vigor em nosso site. E é tão simples assim. Você pode encontrar qualquer imagem que você deseja usar para o fundo fora do seu site e atribuí-lo ao fundo usando o método que acabei mostrar-lhe de uma palavra a dizer para que esta mudança tenha efeito, precisamos copiar o coxo. Vá para o editor de código e substitua a faixa de imagem de fundo colorido. Evite o conjunto real e veja se agora, quando você atualizar, você verá que seu novo plano de fundo entrou em vigor em seu site. 16. Como criar o site - Sobre: Isso é não, crie a seção Sobre deste site. Isso vai ser uma linha com três colunas, semelhante ao que criamos durante a demonstração bootstrap. Vamos carregar nosso editor de código e vamos criar um novo comentário. Mais uma vez, é menos do que dizer ponto de exclamação traço, traço. E vamos re traço, traço maior que o mesmo. E azul isso vamos escrever o HTML para ou uma seção de mordida. Então a primeira coisa que eu queria fazer é ter uma tag de seção aberta e uma tag de seção. Em seguida, vamos usar o diploma Bootstrap. Então, a primeira coisa que precisamos como uma linha, então criamos uma tag HTML dev com a classe de linha. E eu vou fechar essa etiqueta div. E então nós temos ns, eu vou criar três colunas de quatro largura. Então, para fazer isso, criamos uma div com a classe CORREL para a coluna traço para a frente. E eu vou fechar essa etiqueta div. Vou copiar isto e colá-lo duas vezes. Então agora temos três colunas. Somos a nossa fileira com uma bissecção de aura. Então, a primeira coisa que eu quero ter com Anna coluna, porque uma imagem, então eu vou criar a tag HTML imagem e um SRC para fonte. E precisamos adicionar o caminho para a nossa imagem. Novamente, dentro do pacote desde que eu tenha danos, vamos ser usados. Você não precisa usar estes como eu mencionei antes, mas se você quiser acompanhar exatamente, Então os danos estão nesta pasta para você usar. Vamos usar as 123 imagens. Então, por enquanto, vamos nos concentrar em cima por um J peg. Então eu vou escrever o caminho, que é a pasta de imagens barra para frente sobre traço um ponto JPEG. E eu vou ter o texto alternativo de um byte dog 1. E eu vou fechar a tag HTML. A próxima coisa que eles querem é um título para isso, eu vou usar cabeçalho h3 e eu vou apenas escrever top dog. Vou fechar a etiqueta do título. E, por último, quero um parágrafo. Então eu vou escrever o elemento HTML P. E eu vou apenas para o nosso gerador Loren Ipsum, que já usamos antes neste curso. E apenas janeiro em algum texto de parágrafo exemplo. Vou copiar isto. Volte para o nosso editor de código e ps para m. Novamente, como mencionado anteriormente, quando você está trabalhando com grandes corpos de texto, ele irá mover seu editor de código ou para a esquerda. Então, para engordar tudo em uma janela, basta ir para Ver. Alternar envoltório macio. Não há nenhum mantém tudo contido na janela do editor de código. E eu só vou fechar o elemento HTML parágrafo. Eu não vou apenas copiar o que está dentro desta coluna e para a segunda, terceira coluna. E eu quero que as imagens sejam diferentes para cada coluna. Então temos um barco para uma morada, três imagens dentro da nossa imagem para lá, que podemos usar. Então eu só vou mudar a segunda coluna, 272 danos e a terceira coluna para usar sua imagem de mordida três. Mais uma vez, eu vou mudar o texto antigo, assim dog2 e ficar cão 3. E os títulos, eu só vou mudar, permitir variação. Então, vou fazer um cão atrasado. E eu vou fazer o terceiro parágrafo, cão gerente. E eu vou ver se o documento HTML agora carregando nossa página web e atualizando. Se rolarmos para baixo, você pode ver que as colunas estavam em nossa linha estão funcionando corretamente. O cabeçalho do texto do parágrafo é com colunas n m. Mas a primeira coisa que você vai notar é que as imagens podem ser grandes. Então precisamos voltar ao nosso editor de código e precisamos adicionar uma classe para ação RSA. Então, como um atributo dentro da nossa tag HTML seção, eu vou dizer classe é igual a marcas de fala. E eu vou escrever sobre e quero ver se há um salto final sobre terroristas folha Ale, onde eu vou adicionar um comentário. Novamente, lembre-se, comentar em documentos CSS é documentos HTML diferentes. Precisamos usar asteriscos de barra. E sempre que um, uh, por asterix barra para a frente. E então eu vou escrever uma nova regra, samp, como eu quero reduzir o tamanho de todas as três imagens com reação anaeróbica. Eu vou primeiro usar a classe de barco, e então eu vou usar a seleção de elementos IMG. E isso vai visar todas as imagens foram, então, assim, classe. E então eu vou colocar colchetes. Então dentro disso, eu vou fazer a imagem com 140 pixels e ver se eu vou agora para a nossa página web e atualizar. E você pode ver que essas imagens não são muito menores. Agora eu quero enviar-lhe Elaine tudo o que eu posso fazer clicando no elemento HTML sanção com a classe um barco e quando adicionar um novo conjunto de regras. E eu vou pegar o centro de LN e nós vamos copiar este conjunto de regras em nossa folha de estilos e ver se eu não vou atualizar a página. Ok, este é o ingrediente. Mas uma das questões que eu estou vendo é que eles são barcos ação é muito perto do lado esquerdo e direito da página. Para corrigir isso, precisamos usar uma função bootstrap chamada contêineres. Contêineres simplesmente continuum elementos HTML, pad eles e Elaine eles em seu site. Então, como podemos conter a bissecção? Vamos ao editor de código. E logo acima de seu comentário barco, Vamos adicionar um novo elemento HTML Dev com o recipiente de classe. Então vamos para o final, oferecer uma seção de mordida fora da nova pista e fechar a tag div. Então você pode ver que nossa seção de abate, sem conjuntos. Vamos, em seguida, a abertura e fechamento div, elemento HTML com o recipiente de classe. Ao salvar isso, indo para a nossa página web e atualizando, você pode ver que há uma seção de bytes foi contida dentro do contêiner. Olhando para nossas DevTools, você pode ver o contêiner da classe de desenvolvimento e nós somos vaidade ou uma seção de mordida. A próxima coisa que eu quero fazer é mover lá bi-seção morrendo para criar espaço entre a seção de introdução e, assim, seção. Então, para fazer isso, eu vou selecionar o elemento HTML byte, ir para o sam papel e adicionar uma margem superior de cerca de 40 pixels. Vou copiar isto. Boa nossa folha de estilo e adicionar isso para o barco real SAT e ver se voltar para a nossa página web e atualizá-lo. A próxima coisa que eu quero fazer é arredondar as imagens para combinar com a imagem e RN RO. Novamente, para que possamos trabalhar, as imagens precisam ser perfeitamente quadradas se você estiver usando outras imagens que não sejam fornecidas no pacote do curso, certifique-se de que elas são quadradas. Novamente, você pode fazer isso no Photoshop ou qualquer software de edição de imagem, pois eles precisam ser perfeitamente quadrados para o raio da borda para fazê-los rasgar este ir para uma das imagens em narcisos. E você pode ver que traz à tona o conjunto de regras que já criamos em nossa folha de estilos. E vamos adicionar um raio de fronteira, 50%, o mesmo que fizemos na seção de introdução. Essa é a minha cópia. Esta propriedade e valor. Vá para nossa folha de estilos e nosso editor de código. Criar uma nova linha sob um dano mordida, em seguida, os colchetes e colar. Isso é gentilmente disso. Voltando para a nossa página web e atualizar e você pode ver que estamos quase lá para seção de bytes. A última coisa que quero fazer é deixar os títulos em negrito. Então, para fazer isso, eu vou voltar para a nossa folha de estilo. Eu vou criar qualquer Sam real e eu quero selecionar todas as tags h3 com uma classe próxima para fazer isso. E sempre que um ponto ou ponto e um byte para assim classe. E então eu vou escrever h3 para afetar todos os elementos h3 de uma classe próxima. Colchetes encaracolados, fundo B, é negrito. E eu quero ver se isso, finalmente, eu vou voltar para a página e atualizar. E você pode ver que esta seção não é nenhum ingrediente. 17. Como criar o site - Por que nós: Estamos fazendo grandes progressos em nosso site. Vamos nomear MEG, a seção “Nós”. Esta seção vai conter três linhas. E cada linha vai ter uma ligeira variação de teias de coluna. Então vamos criar a primeira linha com a forma como a nossa seção. Vamos ao editor de código e abaixo da seção de mordida. Mas com n, o contêiner dev, vamos criar um novo comentário. E vamos ao Ray Yofs. Eu perguntei sabia que todos abaixo é a maneira como a nossa seção, novamente, Eu vou dizer isso duas vezes só porque é super importante. Estamos adicionando isso abaixo da seção sobre, mas com n, o contêiner de classe dev, como queremos que a forma como nossa seção seja contida dentro desse contêiner, vamos adicionar um novo elemento HTML seção. E nós vamos adicionar a classe por nós. E nós vamos adicionar uma etiqueta de fechamento para essa seção. E O de n, Esta seção, vamos adicionar nossa primeira linha de classe div. E vamos fechar aquele dev. Agora temos a menos que a primeira linha através de 12 colunas. Queremos uma coluna para o texto e o cabeçalho. E queremos chamá-los pelo estrago. E queremos que a coluna que contém o título e um parágrafo seja um pouco maior do que a coluna da imagem. Então vamos adicionar uma classe dev cURL para coluna. E isso é megawatts de sete. Isso tem uma etiqueta div de fechamento. E agora vamos adicionar uma coluna para danos. Então eu vou adicionar outra coluna de classe de desenvolvimento. E se você se lembrar, cada linha e Bootstrap deve adicionar até 12 colunas de Wed. Então, já usamos sete. Então nossa segunda coluna deve ter uma largura de cinco. Vou fechar a tag div de abertura, e vou adicionar uma tag div de fechamento. Então, o que temos aqui como nossa seção de arame, bem, a forma como nossa seção temos uma linha e dentro da linha temos duas colunas. Então, dentro da primeira coluna, que é ou título e quando fazer este um título de estágio 2. E eu vou re, nós somos os melhores cães e fechar estes h2 tag. Afinal, este é um Y tem seção fora como site de negócios cervejas de cão, como megawatt, nós somos o melhor cão. Em seguida, vai adicionar um parágrafo e eu vou apenas copiar alguns dos Loren Ipsum que usamos anteriormente no site, tem um espaço reservado. Então eu vou fechar a tag de parágrafo. Então essa é a nossa primeira coluna classificada. Agora eu quero adicionar uma imagem à segunda coluna. Então, abaixo da segunda tag de abertura div com anaerobe e saiu uma nova camada. E eu vou adicionar um elemento HTML imagem. Então eu vou imagem SRC para fonte igual e quando as marcas de fala e deseja adicionar um caminho para a imagem. Se você olhar para a pasta de imagens dentro do pacote fornecido, você pode ver que eu lhe dei três imagens para usar para a forma como nossa seção. Então você pode usá-los se você estiver acompanhando. Se você estiver usando suas próprias imagens, fique à vontade para fazê-lo. Novamente, faz sentido colocá-los nesta pasta de imagens para que você possa facilmente seguir e usar caminhos semelhantes aos que estou usando. Então, vamos adicionar a primeira imagem do sistema operacional na forma como a nossa seção. É quando a pasta Imagens e o nome da imagem é y traço, traço um JPEG. Então imagens para a pasta, barra caminho traço, traço um JPEG. E eu vou adicionar um texto alternativo de nós somos os melhores cães também. Vou fechar essa etiqueta de imagem. Vamos ver se isso vai para o nosso site e atualizar, rolar e apontar. Você pode ver que nossas colunas estão lá e nossa regra está lá. Mas a primeira coisa que você vai notar é que a imagem é muito grande, então ela nos afeta. Isso é fixe. Editor de código Java. Vamos criar um novo comentário em nossa folha de estilos. Até agora é o último asterix. Por que OS asterix barra para a frente nos dizendo saber que qualquer Rawls diz abaixo este comentário estão em relação à forma como a nossa seção. E eu quero escrever um conjunto de regras para as imagens de n A maneira como nossa seção. Então eu vou ler ponto ou ponto ponto caminho trazido nós para a classe Y ofs. E eu vou escrever IMG, então afeta todos os elementos de imagem dentro do YR, nossa seção, colchetes casados. Mas em vez de usar uma largura de pixel menos manso e quando matriz um 100 por cento. E veja se voltando para nossa página web e atualizando, agora você pode ver que o tamanho da imagem é muito melhor. E FA, inspecionar este elemento, você pode ver que ele está usando um casal 100%. O que isso significa? Bem, se olharmos para a coluna 5, que as imagens, e você pode ver que a imagem não é um trecho para casar maneiras de ser um 100 por cento da largura da coluna. Então, para demonstrar isso ainda mais, se eu clicar no elemento HTML imagem, bom da imagem maneira OS, conjunto real e o PM CSS, e alterar a largura para 50 por cento. Você pode ver quando você passa o mouse sobre a coluna cinco dev que os danos foram, então , o dano não é um 50% a largura de sua política de desenvolvimento pai não concorda. Então vamos mudar isso de volta para 100 por cento. A próxima coisa que eu quero para esta linha como uma barra de grãos coloridos e eles queriam coincidir com o fundo de cor que temos em nossa seção de introdução, handily, nós já escrevemos o CSS para um grão barra S. Então nós só precisamos adicionar essa classe à nossa linha para fazer sim, ir para o editor de código e vamos adicionar uma segunda classe 2 ou linha. Então nós temos sob marcas de fala, eu só vou adicionar um espaço após linha, e eu vou adicionar um fundo colorido. E o que isso significa é que esta linha agora se foi para também usar o colorido por classe crescente. Nós o criamos para a seção de introdução do site, que significa que não precisamos escrever mais CSS para que o fundo colorido entre em vigor. Vamos ver se o HTML falha. Boa nossa página web e atualizar. E você pode ver que nosso plano de fundo já entrou em vigor e a seção YR, se coletarmos inspecionar este elemento, você verá que ele não é apenas puxado o fundo através, mas também trouxe a cor da fonte de branco como Bem. Há apenas mais duas coisas como seção como bagunça no primeiro, como um estofamento, como você pode ver, no minuto em que os elementos estão muito perto dos saids, seria muito mais agradável se tivéssemos alguma chuva de enchimento para baixo. Agora, você pode pensar que devemos adicionar o estofamento no carimbo real de fundo colorido. Mas podemos fazer isso. Deixa-me mostrar-te porquê. Então, se eu adicionar um preenchimento de 50 pixels em nosso conjunto de regras de fundo colorido. Desktops, GRI ele. Mas lembre-se que o fundo colorido também é usado pela seção de introdução. Então, se olharmos para cima, você pode ver que a seção Endrew tem muita noite de festa. Ao removê-lo, você pode ver o que era antes. Então nós realmente só precisamos aplicar o preenchimento para a seção YR para fazer isso. E nós vamos para a nossa folha de estilo. Nós vamos rolar para baixo e nós vamos escrever o seletor de classe dot y ofs. E então eu vou adicionar a linha da classe. Então, o que isso significa? Isso significa que estamos olhando em primeiro lugar na seção para classes NA de linha. Isso afetará todas as classes de linha dentro da classe Casa Branca. E então eu vou adicionar estofamento para um Pexels. Posso ver. Agora, quando eu atualizar a página, você pode ver que o y, nossa seção tem um preenchimento realmente agradável. A última coisa que falta aqui é que o título é um pouco pequeno demais e acho que ficaria melhor se fosse ousado. Então eu vou clicar no elemento HTML. E queremos adicionar um conjunto de regras. E vamos deixar o peso da fonte em negrito para começar. E então eu vou mudar o tamanho da fonte para 50 pixels. Isso parece muito urso. E quando uma cópia que papel sam. E quando eu ir para a minha folha de estilo, e eu vou rolar para cima para onde temos a seção de tamanhos de fonte. Eu vou criar uma nova pista e PSTN e ver se voltei para a página web e remoda, você pode ver que não há, isso é muito bom. Então essa é uma das três linhas, nenhum completador. Para tornar isso rápido e fácil, por que eu realmente vou fazer é eu vou selecionar toda a linha e seu conteúdo. Então eu vou selecionar a partir da tag de abertura dev rel para a tag div ru de fechamento e quando copiá-la. E vou colá-lo mais duas vezes. Isso vai nos dar nossas três filas. A primeira coisa que vou fazer é mudar a segunda, terceira imagem para uma segunda terceira fila. Então, se você olhar nossa pasta de imagens, nós temos um Y ofs t e um Y de três Boucher. Vou mudar o caminho AS1 para baleias 2 na segunda fila. E a forma como o OS1 nos pesa três na terceira fila. E eu vou mudar o rumo para a segunda fila. Tem esta é a maneira como a nossa seção, Eu vou adicionar outra razão maneira OS. Alguém ou oito, o único negócio gerido por cães, como novamente, este é um negócio cão BAS. E para a terceira fila, eu só vou re cão. E como nascido, novamente, lembre-se de nível superior, o texto antigo para as imagens. Então eu vou ter que coincidir com os títulos. Neste caso. O único negócio correu um cão para a segunda imagem e escuro e suportou para a terceira imagem. Então vamos ver se isso vai para a nossa página web e atualizar. E agora você pode ver que temos nossas três linhas e por favor note a terceira linha e a primeira regra que concedem por um uma pequena variação na segunda linha. Quero que o fundo seja de uma cor diferente. Eu queria que fosse um fundo mais claro para que a diversão pudesse ser mais escura. E eu também quero a imagem no lado esquerdo e os textos e o lado direito, mas apenas para a segunda e linha de metal. Então vamos fazer isso indo para o nosso editor de código. E vamos primeiro trocar a imagem e as tags para choveu, porque estamos usando grade Bootstrap, isso é realmente simples de fazer. Tudo o que eu vou fazer é selecionar a coluna sete, foram van ou uma segunda fila. Vou copiá-lo e depois apagá-lo. E então eu vou colá-lo abaixo da coluna de oferta tag de fechamento favorável. Então não, para a segunda linha você pode ver que a primeira coisa que temos uma van, É a nossa coluna fav uma imagem. E a segunda coisa que temos Anna é o título da coluna sete e as etiquetas. Vamos ver se esse código ou uma página atualiza. E agora você pode ver a imagem para a linha do meio, ou a segunda linha está à esquerda e os textos e a taxa exatamente como queremos. Então agora só precisamos tornar a camada de fundo e o texto escuro. Vou entrar no editor de código. E para a segunda regra, apenas, eu vou mudar fundo colorido, fundo tarde demais. Então agora, quando eu vejo isso, se você rapidamente dar uma olhada na página web atualizando isso, você pode ver que ele meio que alcança o que queremos. Mas a única razão pela qual ele está fazendo isso é porque ele está procurando um conjunto de funções dentro do nosso arquivo CSS chamado late bar granined. Ele não consegue achar isso. Portanto, é apenas padrão e em direção ao normal na página que tem um fundo branco e texto preto. Quero fundo, como um fundo cinza claro. Então agora vamos adicionar um conjunto de regras para a nossa classe tardia por grão. Para fazer isso, vou entrar na minha folha de estilo. Vou rolar até a seção Y ofs. Vou adicionar um novo seletor CSS para a nossa classe de fundo claro. E dentro dos colchetes, eu vou fazer o fundo um valor hexadecimal de F1, F1, F1. Agora você pode fazer o plano de fundo qualquer cor que você quiser. Você pode até fazer outra imagem, o que quiser. Mas para mim, eu quero um fundo cinza claro. E o código hexadecimal, que dá um fundo cinza claro se você estiver seguindo, porque F1, F1, F1. E eles vão salvar isso. Volte para nossa página da Web e clique em Atualizar. E você pode ver que temos uma bela barra cinza clara granulada para a fileira do meio, mulheres no caminho da nossa seção. E, em seguida, nossa primeira linha e terceira linha, usando a barra Cn granulado como nossa introdução para manter as coisas agradáveis e consistentes da maneira como nossa seção como nenhum pode criar. A única coisa que resta é adicionar um pouco de uma margem do topo da seção de arame para lança assim entre seus barcos ação e a forma como nossa seção. Então, para fazer isso, eu vou apenas ir para o caminho da nossa seção e DevTools. Vou criar um novo conjunto de regras. E eu vou adicionar margem superior para um Paxos, MSX Greer. Vamos apenas copiar-nos. Não, bom. Nossa folha de estilo, PSTN e teve mar do dia. Quando atualizamos a página, você pode ver a forma como nossa seção está concluída. 18. Como criar o site - Entre em contato: Uma das partes mais importantes do site, e alguns argumentam que todo o propósito de um site é atrair as pessoas a entrar em contato com você. Portanto, por esse motivo, devemos ter uma seção Fale Conosco em seu site. Vamos dar uma olhada na codificação lá e NIH dentro do nosso editor de código e abaixo da seção de fio. Mas novamente, com n, a tag de fechamento do div com o contêiner de classe, vamos adicionar um novo comentário e vamos fazer contato conosco. Portanto, sabemos que NF-1 abaixo há comum é a seção Fale Conosco do site. Agora vamos adicionar uma seção e vamos apenas dar-lhe um contato de classe. Vamos fechar essa tag de seção porque bem, eu vou adicionar uma nova faixa com n, a seção Fale Conosco. E para a primeira parte da seção Fale Conosco uma Assembléia quer um título e entre em contato conosco. E um pequeno parágrafo abaixo que diz Gan toque hoje. Então vamos acrescentar isso. Vou adicionar H1 para ajuda de direção e inverno, entre em contato conosco. E quando uma tag H1 perto e abaixo que e apenas vai adicionar uma tag HTML parágrafo e re, entrar em contato dia. E eu vou fechar essa etiqueta de parágrafo. Só sei que C disso. Atualize nossa página web. E você pode ver que isso foi adicionado à nossa página. E na próxima coisa que eu quero abaixo, esta é uma linha, e eu quero significar colunas para essa linha. Do lado esquerdo, eu só quero detalhes de contato como e-mail e endereço. E no lado direito uma de mais duas imagens que eles querem adicionar, uma tendência, a pasta de imagens, você pode vê-los em contato, um, contato também. Então isso é adicionar isso em nosso HTML. Então eu vou adicionar uma nova faixa, azul o parágrafo. E eu vou adicionar uma div com a classe de linha porque nós vamos estar usando o sistema de linha e coluna bootstrap. E então, dentro dessa linha, eu quero duas colunas. E eu quero que a coluna à esquerda seja um pouco menor na coluna à direita, tipo do que temos feito com a seção de arame. Então, para a primeira coluna e, em seguida, adicione uma div com a classe cURL para traço coluna. E eu vou ter a largura da coluna de cinco. Vou fechar essa etiqueta div. E então para a segunda coluna, e quando nossa div com a classe da coluna sete, porque 5 e 7 é igual a 12. E a coluna máxima onde podemos usar linha par e Bootstrap é 12. E quando eu terminar a etiqueta de abertura, e eu vou adicionar uma tag div de fechamento. Então agora temos nossas duas colunas para uma seção Fale Conosco. Quando a primeira coluna, eu só quero adicionar alguns detalhes básicos de contato. Então eu vou adicionar uma tag de parágrafo e eu vou escrever e-mail. E pelo e-mail, vou inventar um. Então top dog no dog business.com. E eu vou fechar esse elemento HTML parágrafo. E eu quero outra camada. Então eu vou fazer outra etiqueta de parágrafo e nós vamos escrever nada, chamar choveu e feltro ou água pobre. Porque como um negócio de cães. E eu vou fechar a etiqueta de parágrafo e agora você quer avaliar o endereço. Então eu vou começar escrevendo uma tag de parágrafo novamente. E eu vou avaliar a primeira linha do endereço. Mas, como você sabe, os endereços passam por faixas móveis, mas estes não são parágrafos separados. É simplesmente uma nova faixa dentro de um parágrafo. Então, como escrevemos uma nova faixa? O raio de uma nova pista por classificação BR, BR para quebra de linha ou pão. Então acabei de jogar uma etiqueta BR. Você não precisa fechá-lo. E eu vou ler a segunda faixa do endereço. Agora você quer pegar uma última nova pista. Então, eu só vou ser r novamente para Greg ou pausa idiota. E eu vou escrever o final do nosso endereço. E então eu vou fechar os elementos HTML parágrafo. E vamos ver isto. Vá para a página da Web e atualize apenas para ver como isso parece. Então isso parece bom. E eles querem adicionar danos à taxa desta seção Fale Conosco. Para fazer isso, vou voltar ao editor de código. E porque queremos adicionar duas imagens, vou adicionar outra linha com outra coluna. Então nós temos n- bit cinta. Você pode adicionar uma regra dentro de uma coluna, que é exatamente o que eu vou fazer saber, para que possamos ter duas imagens lado a lado, impedir a seção de taxa da página Fale Conosco do nosso site. Então, somos a largura da coluna de sete, que é a taxa de nossos detalhes de contato que acabamos de adicionar. E vamos criar uma nova pista. E eu vou adicionar uma classe div de linha e adicionar a tag div de fechamento. Porque queremos uma briga. Vamos então esta coluna à direita. E redes que parecem como a nossa primeira linha, temos 12 colunas que podemos usar dentro da linha NASW. Então, porque eu quero que as imagens sejam de tamanho igual, eu vou adicionar duas colunas de sexo. Então eu vou criar um div com um saco de traço de coluna de classe e fechá-lo. E eu vou criar outra div com o sexo traço da coluna da turma e uma etiqueta div de fechamento. Então temos duas colunas de sexo dentro de uma fileira. Bem, então nossa coluna de sete. Então essa camada é um pouco mais avançada e coisas que temos feito até agora, mas isso nos permite colocar dois danos ordenadamente dentro do lado direito da nossa seção Fale Conosco. Nós só queremos adicionar uma imagem a cada uma dessas colunas. Então eu vou escrever a tag de imagem, SRC para fonte. E como sempre, colocávamos o caminho entre as marcas de fala. O caminho é o mesmo de sempre. É impedir a nossa pasta de imagens. E temos um traço de contato um J peg 2s, e um traço de contato dois J peg para usar. Como sempre, você pode usar qualquer imagem que quiser, cama que você está seguindo junto. Você pode usá-los para danos fornecidos. Então nós somos a pasta de imagens, barra de floresta, contato, traço um, JPEG. Como sempre, lembre-se de classificar algumas tags antigas. Então alt é igual e, em seguida, as marcas de fala e foi para um Fale Conosco Imagem 1. E eu vou fechar essa etiqueta de imagem. E de repente vou copiar esta etiqueta de imagem. E foram então nossa segunda coluna, eu vou colá-lo e mudar o um para dois porque a segunda imagem é chamada traço de contato dois. E eu vou mudar as tags alt para a imagem Fale Conosco 2. Eu não vou ver uma página ROR menos boa e atualizar. Então, no momento você pode ver que ele está tentando ajustar as imagens foram, então, nossas imagens da barra de colunas são muito grandes. Então vamos usar um caminhão CSS foi usado antes para fazer com que as imagens sejam 100% web SIG. Vamos para a nossa folha de estilo. Vamos para o fundo. Vamos adicionar um comentário. Contacte-nos. Portanto, sabemos que qualquer SAT real que colocamos abaixo dele se relaciona com a parte de contato do nosso site. Vamos ler a aula de contato. E em imagens como o seletor de elementos. Como sempre, o que isso significa é que nossas funções se aplicam a qualquer dano dentro da classe de contato. E quando eu adicionar colchetes e eu vou repetir palavras a 100 por cento e ver se eu voltar para a nossa página web, você pode ver que essas imagens estão realmente bem contidas dentro de cada coluna. Então, se você estava confuso um pouco, o layout avançado da sala que acabamos de usar, deixe-me tentar mostrar-lhe visualmente, vai desabafar diz. Se eu ir para a seção de contato do nosso site e abri-lo. Você pode ver que temos uma linha mostrada aqui. Se eu entrar nessa regra, você pode ver nosso primeiro conjunto de colunas. Temos uma coluna onde para cinco para a esquerda e uma largura de coluna de sete para a taxa, eles vão terminar essa segunda coluna, sete estranho. Temos uma linha, e dentro dessa linha temos duas novas colunas de igual largura, coluna e sexo de coluna. Então você pode ver como uma fileira de mesa tem colunas com Anna. E esta linha está dentro de uma coluna, dentro de uma linha com duas colunas. E então há apenas dois ajustes que eu quero fazer aqui na seção Fale Conosco para torná-lo muito mais agradável. E que primeiro é enviá-la e marcar o Fale Conosco e entrar em contato hoje texto. Então, para fazer isso, uma primeira necessidade de colocá-los em um desenvolvimento. Então vamos para o nosso documento HTML e vamos adicionar uma nova camada acima da tag de cabeçalho H1. Vamos criar uma div com o cabeçalho do traço de contato da classe. E eu vou colocar a div de fechamento logo abaixo das tags de parágrafo de fechamento. Eu vou salvar isso. E eu vou saltar para a nossa folha de estilo e adicionar um seletor de classe, entrar em contato com o cabeçalho do traço. Mas realmente é exatamente para a classe que eu acabei de adicionar para o dev, que eu coloquei lá cabeçalho H1 e parágrafos anti e colchetes. E eu vou adicionar centro de alinhamento de texto. Então centralize o texto. E eu vou adicionar uma margem ao topo de 40 pixels. E nós vamos ver de s, bom nossa página web e atualizar. E você pode ver que agora temos como margem bem e centralizada. A última coisa que quero é tornar o endereço em negrito. Isso é muito simples de fazer. Basta ir até o seu documento HTML. E logo após o parágrafo de abertura, marque um vestido. E quando adicionar outra tag, B, que significa negrito, e pouco antes da tag de parágrafo de fechamento, e depois adicione uma tag de corpo de fechamento, que novamente representa negrito. Agora, quando vejo este documento HTML de alta costura e atualizar, você pode ver o endereço está em negrito. Esta seção Fale Conosco agora está completa. 19. Como criar o site - rodapé: A última seção que queremos adicionar ao nosso site é mais uma. Então vamos carregar nosso editor de código. E abaixo da seção Fale Conosco. Novamente, adicione uma coluna do terceiro direito. E vamos fechar o comentário. E vamos adicionar uma seção onde se o centro de classe e deseja adicionar a tag seção de fechamento. E a primeira coisa que quero no primeiro ano é uma linha através da tela. Para fazer isso, nós apenas escrevemos HR. O elemento HTML HR colocará uma linha na tela. Ele significa real horizontal, e é o que usamos quando queremos apenas colocar uma linha na tela como fazemos na figura. E eles foram alguém vai adicionar um parágrafo com os pares do ano atualmente 2021. Eu vou colocar um traço e eu vou colocar o nome com o negócio, que neste exemplo é o negócio do cão. Você pode colocá-lo onde quiser na figura. E vamos fechar a tag de parágrafo e queremos ver se isso vai para a página da Web e atualiza. E você pode ver que agora temos um dedo em nosso site. Coisas muito pequenas que eu quero fazer aqui. Em primeiro lugar, eu quero centralizar as tags de rodapé. E em segundo lugar, quero uma margem do topo desta linha que acabamos de adicionar à seção Fale Conosco. Então eu vou pular para a folha de estilo. Vou acrescentar um comentário como fazemos. Eu vou escrever cr e eu vou fechar o comentário. E então eu vou usar a classe restrita porque o seletor CSS, nós apenas criá-lo. E quando eu tinha colchetes e quando eu adiciono texto align center para alinhar as tags de rodapé que acabamos de adicionar no centro. E então eu vou adicionar margem superior 40 pixels para espaçar o espaçamento entre o canto superior esquerdo lá e a seção Fale Conosco. Não vou ver se a nossa folha de estilo. Vou para a nossa página. E você pode ver que as tags não são centralizadas e temos uma margem entre o filtro e a seção pública Fale Conosco. A última coisa que quero fazer é simplesmente deixar este 2021 careca. Vou fazer isso da mesma forma que chamamos de parte do endereço da seção Fale Conosco. Então eu vou para o meu editor de HTML e apenas na frente de 2021. E quando eu adicionar a tag b e logo após a seção 2021 e, em seguida, adicionar a tag p de fechamento. Eu não vou ver se isso volta para nossa página e atualizar. E você pode ver que agora temos um completo para em nosso site. 20. Como criar o site — fontes e links: Ou site é praticamente completo. Temos nossa navegação no lugar. Temos o nosso Endrew, temos a secção de abate, temos a secção YR. Temos uma seção Fale Conosco, e temos uma feira, tudo isso parece muito bom. Uma coisa que eu quero fazer é importar uma fonte do Google. Só para que tenhamos uma boa diversão personalizada em nossa página web. Para tornar isso um pouco nua, vamos usar o mesmo método que usamos quando Creon ou site de exercícios. E isso foi para importar uma diversão do Google. Então vamos para fontes dot google.com. E eu vou encontrar um divertido, um lago, um realmente como Leto como um divertido. E bom. Biles modernos são profissionais. Então eu vou escolher isso. E como antes, vou clicar em selecionar como estilo na luz, regular e negrito. Em seguida, na taxa superior da página do ponto de fontes google.com, vou clicar em Exibir suas famílias selecionadas. E na primeira caixa, vou selecionar toda a referência do link e copiá-la para o nosso editor de código e ir para a cabeça do nosso site logo abaixo onde adicionamos a referência de link CSS da folha de estilo. Vou criar uma nova camada. Vou colar a referência do link para a diversão do Google. Só vou cruzar esta linha. Eu vou apenas para que ele está abaixo do acima apenas para manter as coisas olhando agradável e limpo. E eu vou ver se meu index.html, eu vou voltar para a página do Google Fonts, e eu vou selecionar a regra CSS e copiá-la. Eu vou então voltar para o meu stylesheet dot css e criar um novo seletor de elemento sob meu comentário tamanhos de fonte. Então eu vou apenas criar uma nova linha abaixo do conjunto de regras H2. E porque eu quero menos diversão para aplicar a todo o site e quando usar o seletor de elemento corpo. Vou adicionar colchetes. E vou pagar-nos depois a minha referência de família. E eu não vou ver isso. Vá para minha página da Web e atualize. Você pode ver que há diversão agora entrou em vigor. Mas só para ter certeza, eu vou para Inspecionar Elemento e eu vou apenas selecionar o título. E se eu rolar até a referência do corpo, você pode ver que a família da fonte é Leto. Agora parece muito bom e você não precisa usar a diversão mais tarde. Você pode usar qualquer fonte que desejar para o seu próprio site. Mas se você está seguindo junto são usados a fazenda mais tarde. A última coisa que realmente queremos fazer é se você der uma olhada em nossa navegação e clicar em qualquer uma das palavras, eles realmente não diversão Deana no minuto. Não há uma navegação real. Então nosso site é um site de uma página. Então, quando clicamos nesses botões, em vez de eles nos levaram para uma página diferente, queremos que eles nos levem para uma seção da página web Desk. Então, por exemplo, se eu clicar na maneira como nossa seção, eu queria rolar para baixo para nós e nos levar para a seção Por que nós. Então, como fizemos isso? Se formos ao nosso editor de código, a primeira coisa que precisamos fazer é adicionar um AD ou um identificador às seções. Então, se dermos uma olhada em nossa navegação, temos uma seção de casa e uma seção de barco. Porquê a nossa secção? E uma seção de contato. Então precisamos adicionar um ID em nossa página web para cada uma dessas áreas que possamos então vincular esses botões para que a página da web se mova para essas áreas quando você clica nelas. Então a primeira ideia que vou acrescentar é para casa. E eu vou adicioná-lo à nossa seção Andrew porque queremos que o botão home nos leve para o topo da página. Então eu vou adicionar um atributo N2, nossa seção para a enésima linha. Então eu vou adicioná-lo antes da classe de ressecção dobrada. E eu vou apenas para Ray AD é igual a marcas de fala. E para o AD de sua seção ou o identificador, eu vou ou uma casa quando eu precisar adicionar uma identificação para o nosso barco. Então eu vou rolar para baixo até a seção de bytes e como um atributo na tag de seção de abertura para a área próxima. E vamos adicionar outro AD. E eu vou escrever um byte para nós. Vou rolar até a etiqueta da seção de abertura dos fios. E novamente eu vou adicionar um ID, que novamente é AD igual e em marcas de fala e marcas de fala Ravenna e sempre que uma maneira Dash nós, certificando-se de que a qualquer momento há um espaço no que você está lendo, você está usando um traço em vez das lanças. E por último, vou rolar até a área de contato. E novamente na seção de abertura, tag HTML para a seção Fale Conosco, eu vou escrever águias AD, marca de fala, contato, marca de fala. Então, agora adicionamos identificadores exclusivos são IDs para a ação Fale Conosco e casas. Então, como fizemos esses botões? Nenhum link para as áreas de modo que quando você clica nelas, a página web se move para essa área, será começar lendo um link da maneira que normalmente faria usando um H ref. Então, na frente do dia da mesa e para casa e quando escrever a tag a href. E depois da tag HTML de fechamento para casa, eu vou fechar a tag a href, o fim, o exercício que eu ensinei a usar um, um, um, uma, uma armadilha para vincular a um ECG, iniciar uma página da Web, por exemplo, google.com. Mas queremos nos vincular aos IDs que acabamos de criar. Então, como fizemos isso? Entre as marcas de fala, direita, hash e, em seguida, o ID para o qual você deseja que a referência de idade vincule. Então, menos é o botão principal. Então queremos que ele se conecte ao AD de casa. Nós apenas criamos para escrevermos para casa. Agora o que eu vou fazer para tornar as coisas rápidas e fáceis é eu apenas vou copiar a tag HREF de abertura, e eu vou colá-la na frente dos outros três últimos itens. E eu vou então copiar o fechamento, AH, href tag. E eu vou pagar-nos que depois dos três restantes, são os dados, uh, nome vai entrar e mudar as identificações de cada um dos três restantes. Então, para a seção Sobre Nós, o ID que criamos era um byte. Então eu vou fazer hash. E em um barco para a forma como nossa seção, o ID, nós criamos com a gente. Então eu vou re, re ônibus traço um M para a seção de contato ou AD foi contato. Então eu vou fazer o contato hash H ref. Eu não vou ver se S vai para a nossa página web e atualizar. Então, algumas coisas aconteceram aqui. Perdemos o estilo. Isso é porque nós adicionamos um H ref antes do último item. Então vamos precisar consertar isso. Mas também os botões na navegação agora devem funcionar. Então, se eu clicar em um barco, você pode ver que a página da web se move para baixo para sua bissecção. Agora, se eu clicar por que OS, você pode ver que ele se move para baixo para a maneira como nossa seção e ética que contato e se move para baixo para a seção de contato. Então, a navegação que eles funcionam, só precisamos afetar o estilo. Então, se eu escolher um elemento da página usando DevTools e selecionar um dos últimos itens em nossa navegação. Você pode ver o que está acontecendo. Você pode ver as margens que criamos ainda estão sendo aplicadas aos últimos itens. Mas a razão pela qual o espaçamento e não há fechado novamente é porque o último item é lado Naim, um elemento H ref HTML. Portanto, as margens precisam ser aplicadas ao H ref e não ao último item. Então, se entrarmos em nosso editor de código e irmos para o conjunto de regras de navegação, criamos para os últimos itens. Precisamos adicionar um SAT real para as jangadas e a navegação. Então, abaixo de onde criamos o conjunto de regras ALI de navegação, eu vou classificar a navegação pós-operatória. E então eu vou usar o seletor de um elemento para o, AH, refs foram então ou navegação. E eu vou adicionar colchetes. E então, de repente, apenas indo para copiar essa margem riu que nós tínhamos para o LA e colocá-lo em navegação um papel, diga. E eu vou remover isso de LA. Muito triste. E veja se agora, quando voltarmos para nossa página web e atualizarmos, nossas margens estão de volta. Mas você pode ver que os comprimentos não são de cor azul, o que eles não eram antes. Isso ocorre porque por padrão Bootstrap como Sainz, uma cor azul para o seu link. E porque acabamos de adicionar links à nossa navegação na forma de armadilhas. O Bootstrap atribui automaticamente uma cor azul. Você pode ver que em DevTools de você selecionar o último dia e você pode ver que ele está herdando essa cor azul do bootstrap.css. Então, só precisamos adicionar uma propriedade CSS de cor e nossa folha de estilo para substituir isso. Então, na navegação, um conjunto de regras, nós apenas criamos. Vou adicionar a cor da propriedade e o valor dos zeros sexuais, que é o código hexadecimal para preto. Vou ver esta folha de estilo. Volte para a nossa página web e atualize. E você pode ver nossos links e nossa navegação não são pretos novamente. 21. responsiveness móvel: Assim, nossos sites e eles podem jogar e um desktop qualquer. É incrível. Mas como muitas pessoas hoje em dia visualizam sites em seus dispositivos móveis, é importante que sites ou dispositivos móveis responsivos. O que significa responsivo móvel? Isso significa que o site parece bom em qualquer tamanho de tela, incluindo celulares. Afinal, qual é o ponto de ter um site realmente bonito na área de trabalho? F não é bom em um celular. Então, como nos certificamos de que este site parece bom em dispositivos móveis também? No DevTools, na parte superior da barra de ferramentas, você verá esse ícone. Parece um celular e um iPad juntos. Se você passar o mouse sobre ele, ele diz Modo de design responsivo. Dê uma rachadura a isso. No Chrome. Está no lado esquerdo da barra de ferramentas Ferramentas de Desenvolvimento. Novamente, se você passar o mouse sobre ele, você verá alternar a barra de ferramentas do dispositivo, parece que no celular e um APR juntos dão que horas e é assim que você acessará o modo responsivo móvel no Google Chrome. Portanto, há duas maneiras de usar como responsivo móvel mais do que DevTools. A primeira maneira é que podemos ir até o topo da barra de ferramentas e clicar responsivo e escolher um tipo de dispositivo. Então, podemos escolher o iPad, por exemplo. E você pode ver que ele reduzirá a largura do seu site para a aparência do seu site em um iPad. A outra maneira é que podemos ir para a direita da página web quando não passar o mouse sobre ele até que você veja um controle deslizante horizontal. E podemos ajustar manualmente a largura do site. Então hidras nosso site olhar uma vez que começamos a morrer para as teias menores. Então vamos continuar diminuindo. E você pode ver quando ele chega a uma largura móvel, nosso site começa a desmoronar, permitir que a seção de introdução e navegação pode parecer ok. Mas eles são bisecções quebradas. As seções Y ofs definitivamente quebraram. E a seção “Fale Conosco” não tem muita importância. Então, como é que nos vamos enviar um fax? Como vamos fazer o nosso site ficar bem no celular? Felizmente, Bootstrap vem um sino e recursos para tornar o seu site facilmente móvel responsivo. E vai, literalmente, levar apenas alguns segundos para implementar. Mas primeiro, você precisa entender alto do que recursos responsivos móveis dentro Bootstrap trabalhar com linhas e colunas r. Quando se trata de colunas, nós criamos dentro do nosso arquivo HTML. Usamos o prefixo cURL ponto para coluna, traço e, em seguida, o número de teias calmas que queremos. Então, se quisermos uma coluna foi para uma, usamos uma. Se queremos uma calma quando cinco, usamos fav, etc Mas há na verdade um prefects adicionais que podemos incluir dentro de nossas classes de coluna, que nos permitem tornar nosso site facilmente móvel responsivo. Estes são Sam para pequeno, md para médio, LG para grande e exílio para extra grande. E nós adicionamos estes entre o traço CoA L e a largura da coluna. Então, por exemplo, você escreveria CoA L traço S, N para traço pequeno um para a largura da coluna de um. Então, o que esses ensaios, MMD, LG, e ovos AL, prefixos significam, e o que eles fazem? Cada uma dessas referências são removidas de seu site, momento em que, independentemente do redshift definido para sua coluna, ele se tornará automaticamente. 12 ou largura total. Então, se você der uma olhada no seu site dentro do DevTools, como você alterar a largura do seu site, você vai notar na parte superior na primeira caixa, você pode ver a largura de pixel do seu site. Então, por exemplo, aqui eu posso ver como 902 pixels de palavras. Aqui eu posso ver que é 1112 pixels de web e tem um mega realmente pequeno. Aqui você pode ver que são 432 pixels de molhado. Esta é a largura do seu site. Então, se você estiver visualizando em um celular, ele provavelmente estará em algum lugar em torno de 590 a 600 pixels de web. E se você for para você Ana em uma área de trabalho, pode ter até 1400 pixels de molhado. Então, por exemplo, se tomarmos os prefeitos extra grandes, que podemos adicionar duas colunas, qualquer tamanho de janela abaixo de 1200 pixels, e a coluna se tornará automaticamente 12. Grande, qualquer tamanho de janela abaixo de 982 pixels. E a coluna quando ele se tornará 12 médio, qualquer navegador web sob 768 pixels e as colunas se tornará automaticamente full web. E pequena extremidade de um sob 576 pixels e coluna, não importa o que você definiu como, ele se tornará cunha completa ou uma coluna de 12. Então, se isso é um pouco confuso agora, eu faço muito mais sentido uma vez que colocamos em prática, que foram byte NIO hoje. Então vamos dar uma olhada em nosso site e descobrir em que ponto precisamos das colunas para ir full web para que ele fique bonito no celular. Então, se dermos uma olhada em suas mordidas ação e lentamente começar a reduzir a largura do nosso site. Você pode ver em 1100 pixels, mas ainda parece bom. E se continuarmos, você pode ver 130 pixels de molhado. Ainda parece bom. Mas, em seguida, em torno da marca de 750 pixels, ele começa a realmente esmagado e não tão bom. Então, se olharmos para o nosso sistema de grade que o Bootstrap nos oferece, queremos procurar um tamanho prefects que faça com que nossas colunas vão automaticamente para uma largura total ou largura de coluna de 12, em torno de 750 pixel mark. E podemos ver que o meio é o que provavelmente vai funcionar melhor para nós porque ele automaticamente fará com que as colunas vão para casar em qualquer tamanho abaixo de 760 na Pexels. Então esse é um que vamos usar. Então, como implementamos isso foi realmente apenas um caso de mudar as classes de coluna para incluir esses prefeitos de tamanho como parte do nome. Então, se dermos uma olhada na seção R por R, você pode ver no minuto em que temos traço de coluna 4, não temos prefixo de um say incluído quando esta classe. Então, para acrescentar, tudo o que faríamos é pegar esta coluna traço quatro. E depois do primeiro traço em md para médio, e depois outro traço para que agora se pareça com coluna, traço, AMD, traço 4 e trabalho fester. Precisamos mudar os três. Incrível. Então, para a segunda coluna e, assim, nossa seção e a classe após o primeiro traço, vou adicionar md para médio e outro traço. E o CME para uma sobremesa depois do primeiro traço e o nome da turma. Então CRL traço, AMD, traço quatro. Eu sei que c disso. Agora, se voltarmos para a nossa página web e atualizar, você pode ver porque estamos em 750 pixels lá por nossas colunas de seção têm automaticamente quando largura total. Então, se começarmos a aumentar gradualmente a largura da página, você pode ver que são mais de 768 pixels. As colunas são definidas como uma teia de quatro. Então somos três colunas de molhado para quatro. E se uma honra 768 pixels, eles automaticamente se tornam largura total. E podemos ver que se nós inspecioná-los, você pode ver que a coluna é cidadão de largura total. Vamos tornar nosso site fácil e rápido, móvel e responsivo. Mas nós não queremos ter que passar por suas outras classes onde nós adicionamos colunas e Dyad MD entre eles todos é que ataque permitir seu tempo. Então vamos fazer o que é chamado de encontrar e substituir. Então, para que isso funcione, o que queremos fazer é nas mudanças de classe que acabamos de fazer e, portanto, seção OS , não se preocupe, vamos reaplicá-las. Mas para a matemática que eu vou usar, que é basicamente um encontrar e substituir. Precisamos reverter a seção bio de volta para antes de adicionarmos o prefixo médio anti ele. Então, para todas as três classes, eu só vou remover a AMD e traço para que todas as três classes e eu ler a coluna traço quatro e eu vou ver se, então eu não vou fazer um encontrar e substituir. O que vou fazer é encontrar e substituir a coluna traço. E eu vou mudá-lo para traço de coluna, d traço, que irá adicionar o prefixo médio para todas as classes de coluna que adicionamos dentro do nosso index.html. Então, como fazemos isso? Bem, então nosso editor de código, você vai para sua barra de ferramentas e bom de fingir um e encontrá-lo buffer. Ou você pode simplesmente pressionar Control e F. Isso irá carregar nossa barra de ferramentas Localizar e Substituir na parte inferior do nosso editor de código. Então a primeira coisa que queremos acrescentar é o que queremos encontrar. Então queríamos encontrar cURL e traço. Queremos repetir avaliar e queremos substituí-lo por traço CLL, Dash AMD. Então, novamente, para tornar este cristal claro, vamos encontrar e substituir todas as classes de traço COO L foram van ou index.html. E vamos substituí-lo por SEO L traço, traço. Então eu acho, em seguida, clique em Substituir tudo. Você pode ver olhar para o nosso documento se eu apenas fechar como barra de ferramentas na parte inferior é que não precisamos mais dele. Adicionamos o prefixo médio a todas as nossas classes de coluna, por isso é adicionado à ação das bicicletas como fizemos antes. Além disso, se deslocarmos para baixo, você pode ver que ele foi adicionado à seção Por que nós para ambas a largura da coluna de 75. Ele é adicionado à seção Fale Conosco novamente para sua área de vestir e para as imagens e também para os danos foram então a seção Fale Conosco. Então eu não vou ver se isso voltar para nossa página web e atualizar. E se fôssemos apenas o tamanho da janela para um tamanho móvel, e dar uma olhada no nosso site. À medida que rolamos, você pode dizer que eles são por nossa seção foi largura total, que é excretar. A seção de arame foi para a frente, o que também parece ótimo. E a seção Fale Conosco ficou totalmente vermelha, o que também parece ótimo. Então agora temos um site que não só parece bonito no desktop, mas também no celular. E como você pode ver, não só fica ótimo em dispositivos móveis e desktop, mas também ficará bem em dispositivos como iPads. Porque à medida que eu aumentar a cunha fora do nosso site, você pode ver que as colunas se adaptam bem à largura. Então isso é o que permite que nosso site seja responsivo em qualquer tamanho de tela e que Gloria em qualquer dispositivo, graças ao Bootstrap e ao sistema de colunas, agora transformamos nosso site que só parece bom no desktop. E dois são um site responsivo totalmente móvel. E uma questão de minutos. 22. Como tornar o site de seus próprios site: Então nosso site agora desapareceu e parece fantástico. Algo que eu queria correr muito rapidamente é como você pode fazer o site que você está usando com alguns ajustes simples. Eu você pode acabar com uma noite site de reserva completamente diferente para esta parte do curso, eu não vou ir tão em profundidade, mas as mudanças, Eu sou Meghan, Eu só vou fazer as mudanças muito rapidamente e permitir que você para vir comigo. Então você pode ver o quão rápido e facilmente você pode pegar o que acabamos de criar e torná-lo algo próprio, fazer em algo completamente único e diafragma. Então, a primeira coisa que quero fazer é encontrar um novo dano de fundo. Nós abordamos isso brevemente durante a criação do site. E vai ser o mesmo processo. Eu vou para Unsplash quando uma barra de pesquisa grãos. E eu vou encontrar uma imagem, um lago. Esta laranja é realmente contraste em muito agradável. Então eu vou baixar isso. Vou para a minha pasta de imagens. Vou adicionar a imagem que acabei de baixar para a pasta de imagens. E eu vou chamar isso de novo fundo. Vou voltar para a pasta do site e vou copiar e colar ou duplicar o index.html. E eu vou chamá-lo de índice traço T2. Vou abrir o editor de código. E eu vou arrastar isso e traço, traço dois e para o pino esquerdo dos nossos dados centrais. Então a primeira coisa que vou fazer é ligar esta nova imagem de fundo. Então eu chamei de novo fundo traço. Então eu vou para onde nós adicionamos nosso plano de fundo e nossa folha de estilo. E vou mudar isto para um novo passado. E esta imagem também é um J peg e C de S. E então eu vou voltar para a pasta do nosso site. Vou clicar duas vezes e nosso traço de índice para carregar o site e nosso navegador. Então você pode ver que temos uma nova imagem de fundo australiana. A próxima coisa que quero fazer é mover as tags de cabeçalho e parágrafo acima desta imagem. Então eu estou indo apenas para ir para o nosso index.html e eu vou chamar b o cabeçalho H1 e parágrafo. Vou removê-lo quando parecer evoluir nossa imagem e ver se ela é. A próxima coisa que vou fazer, em vez de ter três colunas aqui, quero floresta por mais de duas filas. Então eu vou simplesmente remover uma das colunas. E vamos fazer as colunas de Sexo. Eu vou copiar essas duas colunas e eu vou colá-las, soprar as duas colunas já estão lá e apenas os danos são diferentes. Vou usar a mordida deles três MHz e, assim, uma imagem. Vou ver se isso e refrescarei. E você sabe, veja nós temos quatro colunas mostradas aqui. Pela forma como a nossa secção, vou remover a terceira fila. Então eu vou descer para a terceira linha e removê-lo da seção de camada. E eu também vou para Spears duas colunas um pouco diferente. Então eu vou fazer o texto menor. Então eu vou fazer a coluna um para o texto de uma imagem maior. E quando fazer a coluna de imagem E. E eu vou replicar aquele Diablo. Então, para a segunda linha, eu vou fazê-los cada colônia e a coluna de texto quatro. E vou guardar isto e atualizar a nossa página. E você pode ver que não há pernas muito definitivamente tem imagens muito maiores e muito menor texto para fazer o texto Vale há área e que vai suportar. Eu só vou fazer esses parágrafos um pouco maiores. Então eu vou ativar o aplicativo de software, e eu vou simplesmente copiar e colar o parágrafo que já tínhamos abaixo do parágrafo que já estava no lugar. E eu vou fazer o mesmo para a segunda fila. Vou perfurar o parágrafo que acabei de copiar. Exploda o parágrafo que já estava lá. Veja você e a página da Web de VR. Você pode ver as etiquetas e eles caíram Zai nesta área muito nua. Para a seção Fale Conosco, eu vou fazer essas duas imagens maiores também. Então eu vou para as colunas para a seção Fale Conosco. E a coluna que a ATM está definida com n, eu vou fazer 12. E então eu vou fazer a coluna que tem os detalhes de e-mail e endereço 12 também. Então, cada um dê uma olhada na página web. Você pode ver que agora temos imagens muito maiores por 12 centavo retransmite o texto Fale Conosco. Então, se eu for até a nossa folha de estilos, inclinar para baixo para o comentário Fale Conosco, você pode ver que não temos uma palavra a dizer ou NPS para contato. Então eu vou apenas criar um rapidamente. Então eu vou criar um seletor para um contato colchetes. E eu vou colocar o centro de alinhamento de texto e ver se eu voltar para a nossa página e atualizar, você pode ver os detalhes de contato oh, não, centralizado. E acho que, em vez de ter danos causados pela chuva, vou tornar as imagens mais retangulares, mas com um raio de fronteira. Então, se eu ativar DevTools e selecionar uma das imagens, você pode ver o raio limite de 50 por cento, que apresentamos durante a construção de um site medos. Vou ganhar 10% para ver o que parece. E eu acho que isso parece muito bom. Então agora o que eu vou fazer é ir para a folha de estilo. Raro fornecido raio limite é para danos e quando mudá-lo de 50 por cento para 10 por cento. Então vocês podem ver que temos um raio de fronteira para a imagem dos pântanos centrados, eu vou fazer nossos 10 por cento. E para os diâmetros, eu vou fazer nossos 10% também e ver se eu não vou atualizar esta página. E você pode ver que nossas imagens não são mais reinadas. nativos têm raios de fronteira. E assim RMN de minutos, Eu criei uma página que parece completamente diferente da página web, iria criá-la durante o curso. E usando ajustes simples e rápidos para o HTML e CSS e fundos. Você pode fazer o site que criamos no curso, completamente exclusivo para si mesmo. Como eu disse, o que eles acabaram de passar não era para ser extremamente adaptado às mudanças que eles fizeram. Foi simplesmente para mostrar que você pode rapidamente fazer este site em que você está. 23. Obtenha o site hospedado online: Então, agora terminamos de gravar nosso site e queremos nos mostrar porque parece ótimo ritmo. Mas a menos que travemos, eles enviaram pessoas na frente do nosso computador, não seremos capazes de mostrar este site para a família, amigos ou até mesmo outras empresas. Isso ocorre porque ele não está hospedado online. Então, como podemos obter o nosso site hospedado na pista para que possamos deixar outras pessoas vê-lo a menos que precisemos de hospedagem. Agora, infelizmente, a hospedagem vai custar. Não é de graça. É um serviço que geralmente eles causam uma pequena taxa mensal. No entanto, eu criei uma oferta fantástica para os alunos são curso fest. E clicando no link na descrição deste vídeo, Eu fiz uma parceria com digamos granulado para oferecer tipo de mesa de hospedagem para permitir que você fique on-line barato e acessível. Então eu recomendo dizer granulado. Mais uma vez, use o link na descrição do como vídeo para obter um tipo de mesa de preço na hospedagem. Então, quando estamos em, digamos granulado, vamos clicar em Começar na hospedagem na web. E felizmente para nós, podemos usar o mais barato e mais acessível star-se pacote de hospedagem. E é importante dizer que, neste momento, você pode usar os hosts que quiser. Você não precisa dizer granulado, mesmo que eles ofereceram uma mesa meio on-line cristãos de seu curso, cada hospedagem tem seus próprios pacotes web. E se você encontrar um portador 1, sinta-se livre para usá-lo. Também vagamente falando, um Lewis processos específicos para digamos, granulado Porque eu recomendo que todas as empresas de hospedagem trabalham ouvindo para vê-lo. Então você será capaz de seguir junto com este curso com qualquer provedor de hospedagem, você vai embora porque todos os selos que eu vou mostrar a você ou ser o mesmo, não importa em que host você usa. Então eu vou clicar nesse plano e eu vou preencher este formulário para o plano de inicialização. Então, só sendo três e filtrando todos os detalhes. E eu acabei de colocar o pedido para o plano de inicialização com digamos, granulado. Agora vou clicar em SAP, digamos. Então, se você comprar um nome de domínio junto com sua hospedagem, sinta-se à vontade para clicar em novo domínio onde você pode escolher um nome de domínio como marca e coats.com, por exemplo. Ou se você quiser apenas uma liberdade e você pode escolher demanda temporária e clicar em Continuar, agora temos a opção de iniciar um novo site ou migrar site. Mas nós realmente queremos clicar no botão abaixo que diz SCAP e criar um site vazio porque nós já criamos um nosso, nós só queremos ficar online. Então, clique em SCAP e crie um site vazio. Então vamos coletar desaparecimento. Ele vai dizer a criação do seu site. Isso pode levar um minuto ou dois. Depois de alguns minutos você verá esta mensagem que diz “L Sam”. E agora, se formos para Gerenciar Site, você verá isso. Agora, novamente, se você está seguindo junto com um host diferente, alguns dos botões e menus podem ter texto diferente, mas o processo será vagamente o CME, como eu mencionei, todas as empresas de hospedagem usam os mesmos processos que eu estou mostrando. Mas, por exemplo, grão a mais fraca marcação para esta página. A próxima coisa que você vai querer procurá-lo como gerente fracassado. Aqui é pend, então você pode simplesmente clicar em Gerenciador de arquivos. E isso nos levou para o sistema de pastas do nosso site. Noite, este não é um curso de hospedagem e servidor, então eu não vou entrar em muitos detalhes sobre altos ou menos trabalhos. Mas basicamente um site não é diferente da pasta que temos dentro ou pacote que temos trabalhado em um site. Então, quando você carrega um site on-line, você está basicamente acessando uma pasta como nós criamos com uma pasta de pacote R em nosso computador. Então, quando estamos olhando para o gerenciador de arquivos aqui, estamos basicamente olhando para uma estrutura de pastas dentro do servidor com apenas comprado. E você vai ver esta pasta, HTML sublinhado público. Esta é a pasta do nosso site. Então NF-1 nós jogamos com pasta infinita, bem ser exibido como nosso site. Então, vamos clicar nesta pasta. E você pode ver que já existe um arquivo HTML ponto padrão lá. Assim, por padrão, a maioria das empresas de hospedagem irá empilhar automaticamente um arquivo HTML simples dentro da pasta. Então, quando você vê que você sabe que você está na pasta correta, novamente, é HTML sublinhado público. Como temos nosso próprio site já criado, não precisamos disso, então vamos excluí-lo. Então eu vou clicar sobre isso e então eu vou para a banda e clique em Excluir. Ele vai nos perguntar se queremos continuar e vamos fazer isso eu vou clicar em Confirmar. Então agora vamos adicionar nosso próprio site. Introduza esta pasta. A primeira coisa que vou fazer é clicar em Upload de Arquivo. E eu vou para a pasta do site que temos trabalhado neste curso. E eu vou selecionar o index.html e vou carregá-lo. Você pode ver que nós carregamos este arquivo index.html em nossa hospedagem, em nosso servidor do site, mas ainda não terminamos. Olhando para a nossa pasta do site, também precisamos importar nossas imagens de estilo e pasta Bootstrap. Então pediu que eu estou indo para clicar em Pasta upload. Portanto, não o upload de arquivos, o upload de pastas. E eu vou primeiro aplaudir nossa pasta Bootstrap e vamos perguntar se eles querem carregar todos os arquivos do Bootstrap o que fazer. Então, eu vou clicar em Upload. E você pode ver que a pasta bootstrap é um olho no nosso servidor também. Vou clicar em Carregamento de pastas novamente. E desta vez vou carregar as nossas imagens. Novamente. Queremos fazer upload de todos os arquivos dentro dessa pasta. Então, eu vou clicar em Upload. Isso pode demorar um pouco mais do que a pasta bootstrap porque esta pasta contém todas as nossas imagens, É uma pasta um pouco maior. Você pode ver que eles foram carregados com sucesso. E, por último, queremos fazer upload da nossa pasta de estilos. Então eu vou selecionar a pasta de estilo e eu vou fazer o upload. E eu vou confirmar que eu quero fazer upload da pasta dest. Você pode ver que esta noite foi carregada com sucesso. Então você pode ver o nome do nosso servidor de hospedagem corresponde à nossa pasta que temos trabalhado para este curso que eu acabei de colocá-los lado a lado. Você pode ver que temos a nossa pasta Bootstrap, temos a nossa pasta de imagens, qualquer pasta de estilo, e nós sempre index.html. Nosso site agora está hospedado online. Se você vai para o seu domínio, o IBM Watson diz grãos, você pode ver na parte superior desta página. Mas o domínio que você inseriu ao comprar sua hospedagem será o URL do seu site ou nome de domínio, ou nome de domínio e URL são os mesmos. Então eu vou para o meu URL e apertar Enter. E você pode ver que nosso site está hospedado on-line. É tão simples quanto isso. Você pode conhecer areia, sua família, amigos, nossos clientes empresariais, para o endereço de hospedagem ou URL que você acabou de comprar. E você será capaz de ver o site que você criou neste curso on-line e cair. Então agora você criou um site, e seu site está ao vivo na World Wide Web para todos dizerem. Como mencionado, eu não entrar em muitas especificidades do que hospedagem atua como um servidor como ou o que um domínio é porque este não é um curso de hospedagem, assegurando-lhe oi, direto e montador como para obter o seu site hospedado na pista rapidamente. 24. Considerações finais: Chegou ao curso final do escritório. Durante este curso, você aprendeu quais são os fundamentos do site, os conceitos básicos de HTML, CSS ser ESX, seletores em classes, topografia, o que é Bootstrap. E então nós colocamos tudo isso juntos e Bella são muito próprio site. Mostrei-te como podes fazer urina no nosso website. E, finalmente, eu mostrei como você pode hospedar nosso site para compartilhar com a família, amigos e empresas. Espero que tenham gostado deste curso e tenham aprendido que o revestimento pode ser divertido e fácil. E você está equipado com as habilidades e conhecimentos para poder criar seus próprios sites profissionais. Quero agradecer a você por participar deste curso, e eu adoraria ver os sites que você criou. Então, por favor, mande-os entrar para que eu possa vê-los. Se tiveres alguma dúvida, podes contactar-me no Twitter para codificar o cérebro. Muito obrigado por participar deste curso. Espero que tenha gostado tanto quanto eu criei, e desejo-lhe o melhor e feliz código no futuro.