Construa 3 projetos com HTML e CSS!

1. Boas-vindas e o que vamos construir: Bem-vindo ao aprender HTML e CSS construindo três projetos. Meu nome é Chris, e estou animado para ser seu instrutor para este curso. Vou guiá-lo através do processo, passo a passo, de construir projetos de sites livres e reais, cada um com base no que você aprendeu no último. Vai ser uma maneira divertida e prática para qualquer um que queira aprender a construir sites. Primeiro, começaremos criando um site baseado em receitas. Este será um site estático, vamos apresentá-lo aos fundamentos de HTML e CSS. Você aprenderá como criar a estrutura básica de arquivos e pastas, como criar uma página de índice básico. Em seguida, como criar todas as seções do site, como o cabeçalho, a seção de corpo e o rodapé. Em seguida, usaremos CSS para estilizar um site e também para layout e posicionamento de todos os vários elementos, como posicionar as imagens e também o texto, e adicionar as imagens de fundo. Em seguida, passaremos para um site baseado em universidades, que será o projeto dois. Este será um site totalmente responsivo, que significa que o site ficará ótimo em smartphones, tablets ou computadores, e responderá a qualquer tamanho de tela em que está sendo visualizado. Se você encolher o navegador para baixo, você verá que as duas divs, que são lado a lado, serão empilhadas umas sobre outras para fazer o projeto parecer melhor em dispositivos menores, e todas as áreas, como o logotipo e a navegação, tudo responde a olhar para trás em um dispositivo de tamanho diferente. Vamos expandir o navegador novamente. Você também será apresentado a alguns novos conceitos, como consultas de mídia e pontos de interrupção, estilo de telefone celular e até algumas técnicas avançadas mais modernas, como o CSS Flexbox. projeto três é um site baseado em hotéis, que irá apresentá-lo ao popular framework bootstrap a partir dos berços do Twitter. Agora temos uma boa compreensão de como criar sites a partir do zero depois de construir os dois primeiros projetos. Apresentando o framework bootstrap realmente acelerará seu tempo de desenvolvimento e permitirá que você adicione alguns recursos realmente excelentes para seus sites. No final deste curso, você terá construído todos esses três sites, que realmente dará suas habilidades de web design um impulso. O aluno ideal para este curso é alguém novo para construir sites ou alguém com um pouco de experiência, procurando uma forma estruturada e baseada em projetos de expandir seus conhecimentos. Ele lhe dará uma ótima base, se você estiver olhando para a construção de sites para uma carreira ou mesmo se você quiser apenas construir um site para um uso pessoal ou comercial. Obrigado pelo seu interesse, e estou ansioso para tê-lo a bordo. 2. O que você precisará para este curso: Para trabalhar neste curso, não precisamos comprar nenhum software ou fazer compras adicionais. Tudo o que precisamos é de um navegador web que você provavelmente está usando neste momento para este curso. Vou usar o Google Chrome, mas você pode usar qualquer navegador moderno. Além disso, vamos precisar de algum software para escrever nosso código. Vou usar um programa chamado Visual Studio Code. Se você fizer uma pesquisa em um mecanismo de busca, você encontrará a página inicial, que está disponível em code.visualstudio.com. Se fores para aqui, podes descobrir mais informações, se quiseres. Ou você pode baixar isso para o seu sistema operacional. É um download gratuito para Mac, Windows e Linux. Vá em frente e baixe a instalação apropriada para sua máquina. Já tenho isto baixado e aberto à esquerda. Vá em frente e baixe isso, e eu vou vê-lo no próximo vídeo, onde vamos começar a criar alguns arquivos e pastas para o nosso primeiro projeto. 3. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar outra palestra. Reserve um tempo para processar cada lição, revisar o conteúdo que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula. Você pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu na aula. Além disso, lembre-se de compartilhar seu Projeto 2 aqui no Skillshare. Não só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, espero ver o que você cria e carrega aqui no Skillshare. 4. Estrutura de arquivos e pastas: Bem-vinda de volta. Até agora, a partir do vídeo anterior, deveríamos ter baixado com sucesso Visual Studio Code ou um editor de texto de sua escolha. Eu tenho o meu aberto à esquerda, aqui mesmo. Vou começar neste vídeo criando uma pasta de projeto para o nosso primeiro projeto. Agora, durante este curso, estaremos criando três projetos separados. Você pode salvá-los em qualquer lugar do seu computador, pode ir em uma unidade específica, um local específico, como documentos, que eu vou salvar o meu na área de trabalho. Estas três pastas de projetos para o nosso projeto podem até ir diretamente na área de trabalho, mas para manter as coisas boas e organizadas, eu vou criar uma nova pasta e renomear esses projetos. Se abrirmos isto, aqui dentro, nossa primeira pasta do projeto será para o nosso site de receitas. Vamos criar uma nova pasta aqui dentro chamada Minhas Receitas. Agora, ao criar uma pasta de projeto de site como esta, não há estrutura estrita para exatamente como nós colocamos nossos arquivos e pastas. Somos livres para organizar isso de praticamente qualquer maneira que quisermos. Geralmente, criamos algumas subpastas aqui dentro para armazenar coisas como nossos arquivos JavaScript, nossas imagens, nossas folhas de estilo. Geralmente, você pode agrupar todo o conteúdo relacionado para manter as coisas agradáveis e organizadas. Nós realmente não vamos estar lidando com JavaScript durante este curso, então eu não vou criar uma pasta JavaScript. Além disso, para este projeto, vamos ter apenas uma folha de estilo. Eu não vou agrupar estes também, mas nós vamos estar lidando com múltiplas imagens neste projeto. Fornecido com este curso é uma pasta de imagens que você pode usar, ou você também pode usar suas próprias imagens, se você preferir. Eu tenho essas imagens baixadas e salvas na área de trabalho aqui. Vou pegar isso, e arrastar isso para nossa pasta do projeto. Aqui dentro, temos todas as imagens que vamos usar para este projeto. Em seguida, podemos abrir isso no Visual Studio Code. Nós também precisamos de alguns outros arquivos que vamos criar em apenas um momento, mas eu vou criá-los dentro do editor de texto. O que vamos fazer é pegar a pasta do projeto Minhas receitas e, em seguida, soltar isso dentro do Visual Studio Code. Podemos ver imediatamente que, à esquerda, temos uma barra lateral, apenas fazendo isso um pouco maior. Em seguida, teremos todo o projeto Minhas receitas aberto. A primeira coisa que vamos fazer é criar um novo arquivo HTML, que será nossa página de índice. A página de índice é tipicamente o ponto de entrada para a página principal do nosso site. Se você passar o mouse sobre a barra lateral, podemos clicar neste ícone “Novo arquivo” ou podemos também clicar com o botão direito do mouse em um “Novo arquivo”. Isso seria chamado de Índice, e isso precisa de extensão the.html, uma vez que esta é uma página HTML. O segundo arquivo será para nossas folhas de estilo, e isso é para que possamos aplicar algum estilo e layout em nossos projetos. Este será o Styles e, em seguida, este tem a extensão the.css. Nós também podemos ver estes se abrirmos nossa pasta do projeto na área de trabalho. Agora, aqui dentro, ao lado de nossas imagens, vemos nosso Índice e nosso Styles.css. Ainda não temos nenhum conteúdo salvo dentro de nossas páginas, mas podemos clicar com o botão direito do mouse no nome do arquivo, ir para Copiar caminho. Em seguida, podemos colar isso como uma nova guia do navegador. Isso abrirá nosso projeto dentro do navegador. É claro que ainda não temos nenhum conteúdo para mostrar nesta página, mas vamos corrigir isso no próximo vídeo, onde começaremos a criar nossa estrutura HTML para nossa primeira página. 5. Estrutura básica em HTML: Olhe dentro da nossa página index.html que criamos no último vídeo, e eu vou começar a trabalhar adicionando alguma estrutura a este documento HTML. Agora, todo o conteúdo que vai dentro de páginas HTML é geralmente diferente e dependendo do tipo de site que você vai criar. No entanto, há alguma estrutura básica geral que você vai precisar para qualquer página HTML. Para começar, precisamos adicionar uma declaração DOCTYPE, e isso diz ao navegador exatamente que tipo de documento ele vai estar lendo. Fazemos isso adicionando nossos colchetes angulares assim como este, um ponto de exclamação e, em seguida, adicionamos no DOCTYPE. Este é um documento HTML, então estamos adicionando HTML. Então, uma vez que este é HTML, vamos envolver todo o resto do conteúdo dentro do elemento HTML. Como muitos elementos em HTML, isso tem uma tag de abertura e também uma tag de fechamento que podemos ver com esta barra. Agora tudo o mais que adicionamos a este documento precisa ser colocado dentro dessas tags HTML. O próximo pedaço de estrutura que vamos adicionar a este documento HTML é dividindo isso em duas seções. Assim como uma pessoa, um documento HTML tem uma cabeça e também um corpo, então vamos adicioná-los. Temos a seção da cabeça, que tem as tags de abertura e fechamento, e então também temos a seção do corpo. A diferença entre essas duas seções é a seção principal é geralmente usada para adicionar informações sobre nossos sites, que tem o nome, os títulos das páginas, suas descrições, conteúdo para motores de busca, e também links para outras páginas. Então isso é mais como informações sobre nosso site, e geralmente, nada que vemos na tela. A seção de corpo contém o conteúdo real que será exibido dentro do navegador. Assim, a seção principal é para informações e links para outras páginas, e a seção corpo é o que você realmente verá exibido dentro do navegador. Outra coisa que podemos fazer com qualquer um desses elementos é adicionar o que é chamado de atributo. Atributos é algumas informações adicionais que devem passar para a tag de abertura. Por exemplo, com um documento HTML, queremos declarar que tipo de idioma este documento está roteando. Fazemos isso com um atributo lang, que é abreviação de linguagem. O meu vai ser em inglês. Se você está escrevendo o seu em um idioma diferente, você também pode fazer uma pesquisa por códigos de idioma HTML, e podemos ver uma lista completa com este link apenas aqui. Se rolarmos para baixo, vemos uma tabela de idiomas onde podemos escolher um idioma específico e, em seguida, escolher o código abreviado que vamos colocar dentro deste atributos de idioma. Sinta-se livre para mudar isso se quiser, mas vou agora passar para esta seção principal. Lembre-se, a seção principal contém informações sobre nosso site, e a primeira coisa que vou colocar dentro daqui é o título. Este título é o título da página para esta página específica. Então, se tivermos uma página Fale Conosco, esta será entre em contato conosco. Se tivéssemos uma página Sobre Nós, isso seria sobre, e assim por diante. Já que esta é a página inicial, vou chamar isso de Minhas Receitas. Agora, se salvarmos isso e atualizarmos nossa página Índice, veremos o título da página exibido na parte superior do navegador. Logo abaixo do título, vamos adicionar algumas informações adicionais sobre o nosso site usando as metatags. Ao contrário de coisas como nosso título, nossa seção de cabeça e o corpo, isso não tem uma etiqueta de abertura e fechamento. Nós só temos uma tag de abertura e fechamento como esta quando queremos aninhar algum conteúdo dentro. Então, o título tem este texto dentro, a seção de cabeçalho tem vários pedaços de conteúdo dentro, mas para nossas metatags, nós vamos apenas adicionar alguns atributos exatamente como fizemos logo acima. Estes atributos declaram que tipo de informação adicional queremos adicionar para o nosso site. Este primeiro vai ser o conjunto particular de caracteres que queremos usar para o nosso projeto. Por caracteres, queremos dizer que tipo de letras, números e símbolos queremos usar em nosso site. O padrão HTML5 é UTF-8, e isso abrange quase todos os caracteres e símbolos disponíveis no mundo. Fazemos isso adicionando o atributo de conjunto de caracteres e definimos isso igual a UTF-8. Sua próxima informação em uma meta tag será a tag viewport. Vamos criar uma nova meta tag como acima e, em seguida, dar a este o nome de viewport. Isso nos permitirá configurar nossa página para diferentes tamanhos de tela. A razão pela qual precisamos dessa tag viewport é porque as pessoas estão visualizando nossos sites em vários tamanhos de tela, juntamente com monitores, mas também precisamos levar em conta tamanho do tablet e também dispositivos de tamanho móvel também. Onde fazemos isso como um segundo atributo é definindo o conteúdo e, em seguida, dentro das cotações, definimos a largura para ser igual à largura do dispositivo. O que estamos essencialmente fazendo aqui é que estamos definindo a largura da página para ser igual ao dispositivo em que estamos visualizando, e separá-lo por vírgula. O próximo que vamos fazer é definir a escala inicial para ser igual a um. Esta é a escala inicial ou o nível de zoom inicial quando nossa página é carregada pela primeira vez, e isso é realmente importante para o nosso site ficar bem em todos os dispositivos de tela. Se não adicionarmos isso, um usuário pode tentar visitar nosso site em um usuário pode tentar visitar nosso site em um dispositivo de tamanho móvel e esse dispositivo móvel pode tentar pegar nosso site de tamanho de desktop e, em seguida, diminuir o zoom para caber todo o conteúdo na tela menor, que resultará em coisas como o nosso texto parecer realmente pequeno. Não queremos que esse zoom ou dimensionamento entre em vigor , já que vamos lidar com a aparência do nosso site em todos os tamanhos de tela adicionando alguns CSS. Muito disso pode parecer confuso para começar, mas lembre-se que tudo isso é essencial para qualquer página HTML, que vamos criar, então você vai ficar muito mais familiarizado com a adição disso. Juntamente com todas essas informações adicionais sobre o nosso site, também podemos usar a seção principal para vincular outras páginas também. Por exemplo, temos o styles.css. Isso vai conter todos os estilos, todas as cores, todo o layout, os tamanhos de fonte, e muito mais para nossa página HTML. Para que isso entre em vigor, precisamos vincular a este arquivo, e fazemos isso com o elemento link. Novamente, isso contém apenas os atributos dentro, então não temos uma tag de abertura e fechamento. O relacionamento é uma folha de estilo, já que este é o tipo de arquivo que estamos vinculando. Então temos este href, onde dizemos esta página particular onde podemos encontrar esta folha de estilo. No nosso caso, esta folha de estilo está ao lado da nossa página Índice, então tudo o que precisamos fazer é adicionar o nome do arquivo, que é styles.css. Se este arquivo específico foi armazenado dentro de uma pasta CSS, tudo o que precisamos fazer é adicionar o caminho do arquivo exatamente como este. Esta é toda a informação que vou adicionar na seção principal. De agora em diante, vamos trabalhar dentro da seção do corpo. Esta seção do corpo, como mencionei antes, vai conter todo o conteúdo que vemos na tela. Por exemplo, se quisermos adicionar algum texto, podemos adicioná-los no elemento p, que é para parágrafo. Agora vamos dizer olá, dizer isso, atualizar o navegador, e todo esse conteúdo do corpo será exibido dentro do navegador exatamente como vemos aqui. 6. Recursos úteis: Ao construir sites em qualquer fase de sua carreira de desenvolvimento, haverá um ponto em que você precisa dar uma olhada alguns recursos valiosos para ajudá-lo em sua jornada. Um desses grandes recursos que eu uso regularmente é o site Mozilla Developer. Este é um recurso para a maioria das principais tecnologias web, como HTML, CSS, JavaScript, e também muitas outras coisas, como desenvolvimento de jogos, e também tem alguns guias para algumas tecnologias back-end usando Python, Express JS, e muito mais. No momento, porém, estamos apenas nos concentrando em HTML e CSS. Nós realmente não estaremos cobrindo JavaScript ao longo deste curso, mas isso é provavelmente algo que você quer se concentrar depois de aprender HTML e CSS. Se olharmos para qualquer uma dessas tecnologias, podemos descobrir mais informações sobre o fundo, sobre o que ela faz. Mas uma das coisas realmente úteis é a referência de elementos HTML. Aqui dentro, podemos dar uma olhada em todos os elementos disponíveis que podemos usar em nosso projeto. Até agora, não chegamos muito longe com o nosso projeto, tudo o que adicionamos é um texto simples, e adicionamos estes dentro dos elementos P. Como exemplo, se rolarmos para baixo e selecionarmos isso, podemos ver isso representa um parágrafo de texto, temos a abertura e as tags de fechamento com o texto dentro. Podemos descobrir exatamente como usar qualquer um desses elementos clicando nisso. Isso é realmente útil se você ficar preso em qualquer ponto ao longo deste curso, e também quando você se move para seus próprios projetos também. Assim como isso, dentro das Tecnologias, se descermos para o CSS. Trabalharemos bastante com CSS neste projeto, CSS é a maneira como podemos adicionar estilo, podemos adicionar cores, podemos adicionar um layout, animações e muito mais. Ele pode pegar nosso HTML simples e convertê-lo em algo realmente agradável e visual. Novamente, você pode ler e descobrir pequenas informações ou você pode passar para a referência CSS. Isso nos dará muitos exemplos de sintaxe que vamos usar. Podemos dar uma olhada nesses seletores, que é uma maneira de selecionar uma parte do nosso HTML que queremos adicionar algum estilo. Mas vamos aplicar muitas dessas técnicas ao longo do curso. Em seguida, temos o site da W3 Schools. Esta também é uma referência útil para HTML, CSS e JavaScript, juntamente com algumas outras coisas, como algumas tecnologias do lado do servidor, algumas linguagens de programação, inteligência artificial, muito mais outros assuntos. Novamente, para este curso, e ao iniciar o HTML, apenas a seção CSS vai ser realmente útil se você quiser usar isso como uma referência para qualquer um dos elementos ou até mesmo para encontrar alguns exemplos de código também. É muito simples de usar. Por exemplo, se não tivermos certeza sobre como adicionar uma imagem, podemos ir para a seção de imagens, onde veremos vários exemplos nos quais podemos clicar, e podemos brincar com o código, e também com a saída no Lado. Até que tenhamos algum código, também queremos ter certeza de que estamos escrevendo corretamente. Uma maneira de fazer isso é usar um serviço de validação como o validador W3. Se temos um site online ao vivo, podemos adicionar no endereço web apenas aqui. Ainda não publicamos nenhum de nossos sites em um servidor ativo, então uma maneira de fazer isso é clicando no Validador de Upload de Arquivo, e então podemos selecionar nossas páginas HTML de nossos projetos. Verifica isto. Podemos ver que isso terminou verificar o documento e não temos nenhum erro nesta página, embora não tenhamos adicionado muito conteúdo no momento. Em seguida, vamos dar uma olhada em alguns recursos úteis para adicionar imagens, vídeos e também áudio ao nosso site. Um deles é pixabay.com, que tem milhares de imagens gratuitas que podemos usar em nossos sites. Podemos fazer uma pesquisa, podemos filtrá-los por fotos, ilustrações, vetores, videoclipes e também arquivos de música. É muito simples de usar, basta clicar em qualquer uma dessas imagens que gostamos, e então podemos clicar no “Free Download”. Você não precisa se inscrever a menos que você queira usar uma das imagens grandes, é gratuito para usar. Muitas vezes não precisamos adicionar atribuições ao autor, embora seja apreciada. Além disso, se você tem algumas imagens próprias que você deseja enviar e contribuir, você também pode fazer isso. disso, também temos unsplash.com, que é outro site popular para fotografia de estoque. vez, isso tem milhares de imagens de alta qualidade que você pode usar gratuitamente, e se clicarmos neste link apenas aqui, podemos ver aqui que as fotos têm uma licença livre para usar para projetos comerciais e também não-comerciais. Não precisamos pedir permissão para usar isso em nossos projetos, embora, claro, a atribuição seja apreciada. O próximo recurso que vamos dar uma olhada é caniuse.com. Este é um site muito, muito útil para verificar se um recurso está disponível em um determinado navegador. À medida que passamos por este curso, vamos escrever muito HTML e também muito CSS também. Para este CSS, queremos ter certeza de que ele tem a mesma aparência em todos os navegadores de nossos usuários. Por exemplo, podemos ser capazes de usar os recursos CSS mais recentes em nossos próprios projetos, e isso pode parecer incrível em nosso navegador atualizado. Mas também precisamos considerar que alguns usuários podem ter alguns navegadores mais antigos, especialmente talvez em coisas como escolas ou algumas empresas maiores que não atualizam seu navegador tão regularmente. É simples de usar a partir da página inicial, tudo o que precisamos fazer é digitar um recurso CSS, que você deseja usar. Por exemplo, se quisermos usar o CSS Flexbox em qualquer um de nossos projetos, podemos digitar isso e podemos descobrir exatamente quais navegadores, e também quais versões estão suportando o flexbox. Aqui podemos ver que o Internet Explorer só tem suporte parcial, embora isso seja suportado no navegador Edge mais moderno. É completamente bom para usar no Firefox, Chrome, Safari, Opera, e também em todos os navegadores móveis populares também, em todas as versões mais recentes. O que significa que isso é bastante seguro para usar em nosso projeto. Isso é realmente útil para verificar e também descobrir exatamente que tipo de experiência nossos usuários terão se eles estão usando um navegador mais antigo. Em seguida, bem como algumas imagens e vídeos, também podemos querer adicionar alguns ícones simples também. Isso, o unicode-table.com é um recurso realmente útil. Podemos querer adicionar alguns ícones, como setas, e podemos verificar através do catálogo de milhares de diferentes que podemos escolher. Por exemplo, se quiséssemos uma seta para a direita, poderíamos clicar nisso. Podemos adicioná-los dentro do nosso HTML com o código HTML apenas aqui. Vamos dar uma olhada em como fazer isso em nosso projeto. Em seguida, nós também temos uma biblioteca de ícones dedicada também, que é chamado Font Awesome. Claro, há também muitas outras bibliotecas de ícones disponíveis também, mas Font Awesome é muito popular. Ele também tem uma versão gratuita que tem muitos ícones diferentes, e há também uma versão paga também se você superar a biblioteca gratuita. Como seria de esperar, este é apenas um punhado de alguns recursos populares, há centenas e até milhares de mais disponíveis online. Tenho certeza que você vai se deparar com muitos desses em sua jornada de desenvolvimento. Mas, por enquanto, isso é apenas um punhado de recursos para você começar. Em seguida, vamos saltar de volta para o nosso projeto, e começar na seção de cabeçalho. 7. Seção de cabeçalho em HTML5: Atualmente, temos um site muito vazio, só temos este texto de saudação no topo, que foi criado com este elemento parágrafo. Para o resto deste vídeo, vamos adicionar mais conteúdo criando nossa seção de cabeçalho no topo da nossa página. Para dar uma olhada exatamente no que vamos criar, esta é a versão final. A seção de cabeçalho será esta seção cinza sobre o topo e isso vai ser dividido em três partes. Teremos as duas ligações à esquerda. Teremos o logotipo do site e também a imagem no centro, e depois alguns links adicionais à direita. Para criar essas três seções, vamos usar o que é chamado de div. A div é uma seção ou uma divisão dentro do nosso site onde podemos colocar conteúdo dentro. Para ver mais sobre isso, podemos ir para o site Mozilla Developer, que vimos no vídeo de recursos. Sob as tecnologias, podemos ir para o HTML, mas eu vou fazer uma busca por div. Aqui temos o div, que é o elemento de divisão de conteúdo dentro de nossa seção HTML. Este é um recipiente genérico. Não tem nenhum significado especial. É apenas usado dois grupos de conteúdo juntos. Podemos ver aqui temos uma div que tem a abertura e a tag de fechamento, e então podemos colocar nosso conteúdo dentro. Este exemplo em particular tem uma imagem e também um elemento p para algum texto. Nós vamos usar isso para todas as três seções e também algumas seções mais tarde também. Vamos começar, e a primeira coisa que vamos fazer é clicar neste ícone no topo, fechar nossa barra lateral, fechar nossa barra lateral, e então vamos mover esse texto de saudação para dentro do corpo, bem como contêineres como um div, que é bastante genérico. Em HTML versão 5, também temos alguns elementos mais descritivos, muitas vezes chamados de elementos semânticos. Esses elementos semânticos são usados para descrever o conteúdo que está aninhado dentro. Um desses úteis que podemos usar é os elementos de cabeçalho. Isso tem uma abertura e uma tag de fechamento e podemos colocar dentro de todo o conteúdo relacionado ao cabeçalho. Como acabamos de ver, vamos usar o elemento div e todo o conteúdo da nossa primeira seção à esquerda será colocado dentro desta div. Ao usar o Visual Studio Code, isso também vem completo com um plugin chamado Emmet. Emmet é usado para acelerar nosso código. Se escrevermos uma div e, em seguida, apertarmos “Enter”, podemos ver que isso é automaticamente fechado da seguinte forma com a tag de fechamento, e também adiciona os colchetes em torno de cada seção também. Então, se você quiser praticar, você pode digitar isso manualmente ou você pode fazer uso do Emmet. Isso agora dá nossas duas primeiras seções div e eu vou criar a terceira, que é para nossos links sobre a direita. Mas como vamos criar esses links? Se quiséssemos, poderíamos ir muito simples e apenas ter os elementos p como já vimos antes. Mas geralmente, quando temos vários pedaços de texto como este, é uma boa idéia colocar em uma lista. Com HTML, dois dos tipos populares de listas que podemos usar é a lista ordenada e a lista não ordenada. Uma lista ordenada é uma forma de listar vários itens como este, e estes são ordenados por números. Isso teria o número 1, o número 2 e continuaria para cada item. Lista não ordenada, por outro lado, em vez de colocar números ao lado de cada item da lista, ele irá colocar um marcador à esquerda. Atualmente, não vemos isso para nossos itens apenas aqui, uma vez que removemos isso com este CSS. Vendo como usar uma lista, vamos voltar para o site da Mozilla e fazer uma pesquisa por lista não ordenada, que é a tag ul. Este é o que precisamos aqui. Como muitos elementos, temos a lista não ordenada que é o wrapper, e, em seguida, aninhado dentro, temos cada um dos nossos itens cercados nesta tag li. Este exemplo em particular é um pouco mais complexo. Ele também tem uma lista não ordenada aninhada dentro deste item da lista de queijos. Você pode ver pelo exemplo sobre à direita, isso irá fornecer uma lista aninhada não ordenada. Mas tudo o que nos interessa para o nosso exemplo é esta única lista não ordenada, que irá conter os nossos itens de lista. Voltando ao projeto, criaremos nossa primeira seção dentro de nossa primeira div. Crie a lista não ordenada para o wrapper e, em seguida, coloque dentro de todos os nossos itens de lista. O primeiro, tal como vamos ver aqui, é popular, e depois o segundo é o que há de novo. Então vamos criar o item da lista. O texto do popular. Então o segundo vai ser o que há de novo. Salve isso, atualize o navegador, e há nossos dois itens da lista. Assim como mencionado antes, já que esta é uma lista não ordenada, veremos um ponto de bala ao lado de cada um deles, mas removeremos esses CSS estranhos muito em breve. Se você não tiver esta página index.html aberta no momento, lembre-se que você pode clicar com o botão direito do mouse no nome da página, copiar o caminho e colá-lo na guia. Ou, em vez disso, você pode ir para os projetos, para a pasta de receitas e, em seguida, clicar duas vezes na página Índice. Ou, alternativamente, se você não quiser continuar atualizando este navegador após cada uma das alterações salvas, você pode usar uma extensão de servidor ativo. A maneira de fazer isso dentro do Visual Studio Code é ir até o botão de extensões e, em seguida, fazer uma pesquisa para o servidor live. Este é um só aqui. Já tenho isto instalado no Visual Studio Code, mas se não o fizer e pretender utilizar esta extensão, terá de instalar e ativar na parte superior. Depois que isso for feito, talvez seja necessário reiniciar o Visual Studio Code. Em seguida, você deve ter um botão Ir ao Vivo na parte inferior. Clique nisto. Isso abrirá a página dentro do navegador, e agora cada vez que fizermos uma alteração em qualquer um de nossos sites, isso será atualizado automaticamente. Em seguida, vamos passar para a seção do meio, que inclui uma imagem e também o título do nosso site. Para isso, vamos vincular a uma das imagens fornecidas com este curso e, em seguida, definir nosso título como um título. Após nossa primeira div, pule dentro de nossa segunda seção div, e então adicionamos nossos elementos de cima para baixo. A primeira é a nossa imagem, que é o elemento img, e uma imagem é um dos elementos que não tem uma tag de fechamento. Isso é porque nós não aninhamos nenhum conteúdo dentro. Tudo o que precisamos fazer é fazer uso desses atributos. O primeiro atributo é a fonte, e esta é a localização da nossa imagem. Isto é tudo relativo à nossa página de índice atual. Atualmente, estamos dentro do index.html, e ao lado disso, temos nossa pasta de imagens. Passo 1 é ir para as imagens e, em seguida, barra, e agora podemos escolher qualquer uma das imagens dentro desta pasta. O que precisamos é do chefs-hat, e este é um arquivo svg, e isso é realmente útil para escalar nossas imagens para cima e para baixo sem perder qualquer qualidade. Depois disso, também temos o texto alt, que é algum texto alternativo para exibir se esta imagem não pode ser exibida, e isso é útil por várias razões. Por exemplo, se a imagem não puder ser baixada por qualquer motivo, esse texto alternativo será exibido no lugar. Também para acessibilidade, se as pessoas estiverem usando um leitor de tela em vez de um navegador tradicional, esse texto alternativo será lido no lugar, então certifique-se de que isso é descritivo. Eu vou dizer chefs-hat logotipo, fechar a barra lateral, e isso é salvar e alt para o navegador. Lá é onde chefs-hat agora aparecendo. Agora, no momento, não se preocupe com o posicionamento e também com o layout. Vamos configurar tudo isso em apenas um pouco quando passarmos para a nossa folha de estilo. Em seguida, logo após nossa imagem, logo abaixo disso, mas ainda dentro de nossa seção div, vamos agora fazer uso de um título de nível 1. Este é o h1, e com HTML, podemos adicionar títulos do Nível 1 até o Nível 6. H1 sendo o mais valioso de um título mais importante em nosso site, só devemos usar este em nossa página, até h6, que é a cabeça menos importante para o nosso site. Pessoalmente, mais comumente, eu uso h1 até h4, mas isso é totalmente com você. Aqui dentro, o título das minhas receitas, salve isso, e há o título do nosso site dentro desta seção. A última seção neste cabeçalho é exatamente como a primeira seção. À direita, temos dois links adicionais. Isto é para enviar receita e também as idéias de refeição. Você já deve saber como fazer isso a partir da primeira seção, ir para a terceira div na parte inferior, criar nossa lista não ordenada, nosso item de lista. O primeiro foi enviar receita, o segundo item da lista foi para as idéias da refeição. Dê um salvamento e confira isso no navegador. Atualmente, reconhecendo essas balas à esquerda, que vamos remover em nosso CSS. Se olharmos para a versão final, vemos que temos uma pequena bala entre cada uma dessas seções. Isso é apenas para colocar um divisor entre esses dois itens de lista, e a maneira como podemos adicioná-los é usando uma entidade HTML. A partir dos recursos do vídeo, olhamos para um site chamado unicodetable.com. Esse cara era uma lista de vários ícones diferentes, como setas, como texto, emojis, e uma dessas entidades é esse ponto. Para ver isso, podemos ir para a nossa tabela Unicode. Vamos fazer uma busca por ponto, e este é o que vamos usar no topo. Este é um ponto que é colocado verticalmente no centro. Pegue o código HTML, inclua o e comercial no início e o ponto-e-vírgula no final. Vá até a nossa lista, e então entre os dois primeiros links, vamos colocar isso dentro de um elemento span. Um elemento span é praticamente apenas um recipiente genérico básico. Podemos colocar dentro de qualquer coisa que queremos, como texto ou até mesmo essas entidades HTML. Uma extensão também cai no que é chamado de elemento inline. Um elemento embutido ocupará naturalmente algum espaço no navegador em toda a página. Isso é fornecer-lhe espaço para o fazer. Se não, ele iria cair para a próxima linha. Este é o oposto de algo como uma div, que é o que é chamado de elemento de nível de bloco. Isso significa que independentemente do tamanho do conteúdo, ele naturalmente cairia em sua própria linha. Podemos ver isso se olharmos para a nossa primeira seção, e então a segunda seção está em sua própria linha, e o mesmo para a terceira seção na parte inferior. Pouco antes de encerrarmos isso, também adicionaremos esses pontos à terceira seção na parte inferior. Coloque em nosso espaço, coloque no código da entidade, e há nosso ponto aparecendo em ambas as seções. Bom. Este é agora o HTML concluído para a nossa seção de cabeçalho. Não parece muito bom no momento, mas isso será tudo corrigido quando chegarmos à seção de estilo. Mas antes de adicionarmos nosso estilo e layout a esta seção, no próximo vídeo, vamos dar uma olhada em como podemos adicionar algumas páginas adicionais e também converter nossos itens de lista em links. 8. Links e páginas adicionais: Nesta versão final do nosso projeto, se passarmos o mouse sobre qualquer um desses itens da lista, também podemos clicar neles e ser levados para uma página diferente. Agora, cada uma dessas páginas para as quais vamos vincular não tem nenhum conteúdo específico. Mas podemos ver que esta é uma página de receitas populares. Temos o Novidades, temos a página Enviar Receita e também as Ideias de Refeições. Mas, atualmente, se formos para a nossa versão aqui, não podemos clicar em nenhum desses itens da lista. Para fazer isso, precisamos transformar cada um de nossos itens de lista em um link. Um link ou um hiperlink é criado em HTML, envolvendo nossa seção no um elemento de no site da Mozilla, podemos ver no exemplo que temos uma lista não ordenada. Isto tem alguns itens de lista apenas dentro, assim como temos em nosso projeto, mas a diferença está dentro deste item de lista, nós também temos aninhado dentro de um elemento a. Este elemento também tem este atributo href. Esta é a chave para criar um link porque precisamos dizer ao navegador exatamente onde queremos vincular. Vamos ao nosso projeto e replicar isto dentro do nosso cabeçalho. Primeiro de tudo, precisamos cortar o texto de dentro do item da lista e, em seguida, criar um elemento. Ele irá adicionar automaticamente o atributo href. Uma vez que isso é necessário dentro da tag de abertura e fechamento de elementos, podemos adicionar de volta dentro do texto popular e isso será exibido dentro do navegador. Agora, para o href, podemos adicionar qualquer link dentro daqui que queremos mudar como um link para um site, digamos Wikipédia, e por padrão, um link aparecerá sublinhado e com uma cor diferente. Também podemos passar o mouse sobre isso e o cursor vai mudar para ser um ponteiro. Quando clicamos nisso, ele agora está vinculado ao nosso site externo. Vamos voltar. Mas, claro, não queremos vincular à Wikipédia. Queremos vincular algumas páginas dentro do nosso site. Atualmente, se abrirmos a barra lateral, só temos atualmente esta página de índice. O que precisamos fazer ao lado de nosso index.html é criar algumas novas páginas HTML para vincular. Vamos clicar no novo botão “Arquivo”. Vou criar um link para cada uma dessas quatro páginas. O primeiro, podemos dar-lhe qualquer nome de nossa escolha. Isso vai ser para a página popular, e isso precisa ter a extensão HTML ponto. Precisamos também de mais três. O próximo é para new.html. O número três é para o meal-ideas.html. A última é enviar a nossa receita. Vamos dar a isso um nome de submit.html. Agora temos algumas páginas diferentes link para. Apenas certifique-se de que todas essas páginas estão ao lado da página de índice e não aninhadas dentro da pasta de imagens ou de quaisquer outras pastas. Você pode ir em frente e criar o máximo de conteúdo em qualquer uma dessas páginas que você deseja. Mas, por enquanto, eu só vou adicionar um texto simples para que possamos ver qual página foi carregada dentro do navegador. Para a página Enviar, vamos apenas adicionar um texto simples, mas primeiro vamos adicionar a estrutura HTML básica. Você poderia ir em frente e adicionar toda a mesma estrutura que usamos dentro desta página de índice. Você pode digitar tudo isso manualmente, ou se você estiver usando o Visual Studio Code, novamente, podemos fazer uso do atalho Emmet. Para fazer isso, digitamos html:5, pressione “Enter”. Isto será criado para nós. Tudo o que precisamos fazer é mudar o título do documento. Esta é a opção Enviar uma receita. Em seguida, dentro do corpo adicionar algum texto no elemento p, apenas para que possamos ver qual página foi carregada. Eu vou dizer, Enviar Página da Receita. Salve este arquivo com Command ou Control S. Vamos agora para Refeições Ideas. Novamente, html:5, clique em “Enter”. Mude o título, adicione nosso texto. Salve este arquivo e, em seguida, o botão Novo, que é para a nossa página Novidades, adicione a estrutura básica, o título e algum texto, modo que a página Novidades. Salve isso e, em seguida, nosso último, que é o popular.html. O título do documento de receitas populares e, em seguida, o texto. Salve isso e agora volte para o nosso index.html. Agora temos quatro páginas diferentes para vincular. Até o nosso elemento oito e dentro do HREF. Como essas páginas estão ao lado da nossa Página Índice, podemos simplesmente digitar o nome, e neste caso, é o popular.html. Em seguida, temos o que há de novo, coloque isso para fora no elemento a. A página para isso foi o new.html. Em seguida, entre a tag de abertura e fechamento, cole o texto. Vamos descer, e vamos fazer isso mais duas vezes. O próximo foi Enviar Receita, puxe isso para fora. Coloque em nosso link, que vai apontar para submit.html, adicione em nosso texto. Finalmente, temos as Ideias de Refeições. Este é meal-ideas.html, cole o texto e salve este arquivo. Para o navegador. Agora temos quatro ligações dentro daqui. Vamos tentar o popular. Este agora está ligado bem, popular.html. Em seguida, o que há de novo, podemos ver que isso é bom. Enviar Receita e, em seguida, finalmente, as Ideias refeição. A última coisa que eu vou fazer é também vincular este título de receitas apenas aqui de volta à nossa Página Índice. Para fazer isso, vamos colocar nossa cabeça nível um com Comando ou Controle X, adicionar em nosso link. Isso vai apontar de volta para o index.html, colá-lo em nosso nível uma cabeça em, clique sobre isso. Isso agora será vinculado de volta à nossa Página de Índice. Se quiséssemos, poderíamos pegar nossa seção de cabeçalho. Vamos destacar tudo isso e copiar com Command ou Control C, ir para a página popular, e também podemos adicionar isso dentro de cada uma de nossas outras páginas. Se colarmos isso, clique no link “Popular”. Agora também vemos este cabeçalho dentro daqui. Clique em “Minhas receitas”. Isso nos devolverá de volta à nossa página inicial. Como mencionado anteriormente, você pode percorrer cada uma dessas páginas adicionais e também adicionar mais conteúdo se quiser. Mas, em seguida, vamos passar a fazer este cabeçalho olhar muito mais agradável, adicionando alguns CSS. 9. Estilizando o cabeçalho: Agora adicionamos alguns HTML à nossa página e, em particular, esta seção de cabeçalho no topo. Agora vamos passar a adicionar alguns CSS para adicionar algum estilo e layout a esta seção de cabeçalho. Se dermos uma olhada na versão final aqui, esta será a seção no topo que vamos trabalhar. No final desta lição, nossa seção de cabeçalho deve ser exatamente assim. Para fazer isso, vamos mudar o layout de nossas seções div livres para ir através da página em vez de ser empilhados em cima do outro como temos atualmente. Para começar, vamos passar para o nosso styles.css que já criamos, e já vinculamos isso à nossa página de índice. Nós não queremos vincular apenas aqui, então o que precisamos fazer é direcionar qualquer um desses seletores na seção do corpo. Se quisermos segmentar a seção de cabeçalho, podemos, a div, as listas, os itens individuais da lista, podemos direcionar qualquer coisa nesta página. Mas primeiro vamos começar no elemento muito externo, que é este elemento HTML apenas aqui. Uma maneira de direcionar qualquer um desses elementos é escrevê-lo exatamente da mesma forma que fazemos em HTML. Então abrimos as chaves assim. Em seguida, todas as regras de estilo que aplicamos no meio aqui, serão aplicadas ao nosso HTML. A primeira coisa que vamos fazer é definir uma cor de fundo. Essa cor de plano de fundo será aplicada ao documento completo. Vou manter isto simples e definir isto para ser uma cor branca. Se dermos a este arquivo uma palavra a dizer, não devemos realmente ver nenhuma alteração no navegador, já que esta já é uma cor branca. Mas esta é a cor de fundo que podemos ver no lado esquerdo, no lado direito. Isso é tudo branco também, mas a diferença está no centro. Agora vamos pegar todo o conteúdo HTML contido na seção de corpo. Em seguida, altere a cor da seção. Lembre-se que esta seção do corpo foi aninhada dentro, então isso vai ficar em cima de um fundo branco. Isto abaixo disto, na secção do corpo. Em seguida, aqui dentro, se então definir a cor de fundo para ser qualquer cor diferente, diga isso, tudo para o navegador e atualizar. Mas agora ver o corpo tem uma cor de fundo diferente, principalmente ido para definir o servidor ao vivo clicando em “Ir ao Vivo”, fechar esta primeira versão para baixo. Isso apenas nos salvará atualizando o navegador após cada alteração. Assim como estas cores que você tem saturado aqui, também podemos usar um código de cores diferentes. Para fazer isso, se formos para o Google e fazer uma pesquisa para HTML Color Picker, temos várias opções diferentes que podemos usar para definir uma cor. Podemos usar este seletor de cores que aparece apenas aqui, ou há também um bom nos sites W3Schools. Os valores são sobre à direita, que começam com este hash. Estes são códigos de seis dígitos que compõe o que é chamado de um valor Hex. Podemos selecionar qualquer cor, assim como este azul. Podemos então ver o valor Hex no topo. Também podemos ver uma cor RGB, que é o vermelho, o verde e os valores azuis todos misturados. Também um valor HSL, que é a tonalidade, a saturação e a luminosidade. Estes são todos valores CSS válidos. Mas para esta cor eu vou manter o valor Hex. O hash e o volume que vou usar vai ser ede6e6. Isso nos dá a cor de fundo diferente. Se você estiver usando o Visual Studio Code, você também pode passar o mouse sobre essa cor de fundo e podemos selecionar um valor diferente desse seletor de cores. No topo, podemos ver que este é um valor Hex ou também podemos clicar nele para ser levado para o valor HSL, um valor RGB, se você preferir um formato diferente. Continuando com o corpo, a próxima coisa que queremos fazer é definir a família de fontes para este projeto. A família de fontes é o estilo dos textos que vamos usar. Eu vou para Arial. Esta é uma fonte bastante simples que eu vou estar selecionando para este projeto. Podemos selecionar diferentes, se preferir. Este é o valor da primeira escolha e, em seguida, separado por vírgula, você pode adicionar valores diferentes que você deseja adicionar. Se as famílias de fontes anteriores não forem encontradas, a próxima será Helvetica e, em seguida, sans-serif. O que está acontecendo aqui, é que estamos procurando a fonte Arial se esta estiver disponível no sistema do usuário. Se não, ele vai cair de volta para a Helvetica, e se este não poderia ser encontrado mesmo ele vai cair de volta para um genérico sans-serif fontes. disso, também podemos definir o tamanho padrão da fonte que você deseja usar para este projeto. Uma vez que você vai para 18 pixels, nós podemos mudar isso para ser qualquer valor ou nós também podemos substituir este valor para qualquer uma das nossas seções também. Isto é basicamente um ponto de partida. Em seguida, o resto do conteúdo que queremos restringir a largura de toda esta seção para ser um determinado valor. Eu vou para 960 pixels para este exemplo, que é um valor fixo que não vai mudar. Se encolhermos o navegador, vemos que isso é empurrado para fora da borda. Mas vamos dar uma olhada no design responsivo muito em breve. Também queremos que a seção esteja no meio da página. A forma como podemos fazer isso é aplicando alguma margem. Margem é o espaço no qual aparece fora de um elemento, então qualquer coisa que você adicionar dentro da seção do corpo aparecerá fora desta seção colorida. Vamos dar uma chance a isso. Se adicionarmos 10 pixels, isso entrará em vigor em todos os quatro lados. Claro, no momento não queremos isso porque eles vão lutar uns contra os outros. Temos quantidades iguais no topo, no fundo, e também na esquerda e na direita. O que podemos fazer é adicionar quatro valores separados. Isso vai no sentido horário de cima, direita, baixo e esquerda. Do topo vamos mudar isso para 50 pixels, uma direita, uma parte inferior e a esquerda. Então, se apenas 50 pixels se aplicarem agora ao topo da seção do corpo, mas o que queremos fazer exatamente como a versão final é não ter margem na parte superior e inferior, mas dividir todo o espaço igualmente à esquerda e à direita. A maneira como podemos fazer isso é aplicando margem zero no topo, margem zero na parte inferior, e então podemos definir o outro valor para a esquerda e a direita, que dividirá o espaço igualmente. A parte superior, queremos zero, a direita de auto, zero na parte inferior e, em seguida, auto à esquerda, e esses valores automáticos agora empurrarão isso para o centro. Se quisermos, também podemos tirar proveito de uma versão mais curta, que é aplicar dois valores. O primeiro será o topo e o fundo, e então o segundo valor será o esquerdo e o direito. Salvar isso resultará no mesmo efeito. Em seguida, vamos segmentar a seção de cabeçalho e as divs livres que estão aninhados dentro. Então este cabeçalho está embrulhando todas as três de nossas seções, então temos uma div que segue cada uma. A primeira coisa a fazer é pegar esta seção de cabeçalho que é o wrapper, então vamos definir o tipo de exibição. O tipo de exibição nos permite alterar a exibição padrão para cada elemento. Mencionamos anteriormente que certos elementos podem cair em uma categoria. Vou mencionar o tipo de bloco e também o tipo inline. Se você se lembrar, bloco vai ocupar toda a largura da página e começar em uma nova linha, assim como estas três seções que já temos. Em linha, como parece, colocaremos os elementos na página lado a lado se houver espaço para fazê-lo. Mas vamos aproveitar um tipo de exibição chamado flex. Isso faz uso do CSS flexbox para tornar o layout de nossos limões muito mais fácil. Se salvarmos isso, veremos imediatamente que todas essas três seções div são colocadas na página. Ele faz isso porque usando a flexbox, podemos definir o conteúdo que são mesmo dispostos em uma direção horizontal ou vertical. Por padrão, a flexbox fará uso da direção flexível no valor da linha. Isso significa que todos os elementos serão colocados em toda a página em uma linha. Ao usar um idioma da esquerda para a direita, assim como o inglês é, este será da esquerda para a direita. Nós também pode mudar a direção flex para ser coluna. Isso irá empilhar todos os elementos verticalmente. Desde linha é padrão, podemos deixar isso fora e assumir que isso já está definido. Em seguida, vamos restringir a altura deste cabeçalho para ser um determinado valor. Podemos fazer isso com a propriedade alta. Então eu vou usar o valor de 150 pixels. Então precisamos ter certeza de que todas as três seções estão espaçadas igualmente. Queremos que todos tenham o mesmo valor de largura. Podemos fazer isso voltando para a nossa folha de estilo. Mais uma vez, vamos apontar para o cabeçalho. Mas desta vez usamos o símbolo maior que e, em seguida, selecione o div. Isto significa que todos os estilos que aplicamos aqui dentro, só serão aplicados a quaisquer elementos div que imediatamente seguem o nosso cabeçalho. Podemos ver se vamos para a página de índice, temos o nosso cabeçalho. Então maravilhoso aninhado dentro temos esta seção div. Também temos este ao lado, e depois a nossa terceira secção. O estilo será aplicado a todas as três seções com este código. Uma vez que já temos a seção de cabeçalho que é o pai definido para fazer uso da flexbox, esses elementos filho que são aninhados dentro também pode fazer uso de valores flex. Um deles é simplesmente flexível. Se definirmos o valor como um, agora esse valor flexível de um se aplicará a todos os três de nossos divs. Agora, isso significa que todas essas três seções terão a mesma quantidade de espaço. Se fôssemos mudá-lo para ser qualquer um dos nossos valores que é dois, teremos exatamente o mesmo efeito, já que eles são todos iguais. No entanto, a diferença ocorrerá se aplicarmos um valor flexível diferente a uma seção diferente. Por exemplo, se visarmos esta seção de logotipo no meio e, em seguida, colocar um valor flexível de dois, isso ocuparia o dobro do espaço disponível como esta seção apenas aqui. Mas queremos que sejam iguais, por isso está tudo bem por enquanto. Depois disso, também definiremos o text-align para estar no centro. Isto significa que todos os textos contidos dentro desta div serão centrados nesta seção. Olhando para a versão final, também queremos que esses dois sejam empurrados para baixo. Uma maneira que podemos fazer isso, e como ainda estamos fazendo uso do flexbox com os pais aqui, não podemos fazer uso de uma propriedade chamada align-self. Logo após o texto alinhado, adicione o seletor de alinhamento auto, e temos os vários valores que podemos escolher. Agora, o valor que vamos adicionar aqui será aplicado verticalmente. Isso ocorre porque, como já vimos antes, a direção flex padrão é linha. Isso é em toda a página horizontalmente. Alinhar-self será aplicado ao oposto, que é a direção vertical, também referida como o eixo transversal. Uma vez que estamos trabalhando verticalmente, o estilo flexível será o topo, o centro estará no meio e a extremidade flexível estará na parte inferior. Isto agora empurra estes para baixo para o fundo da nossa div. Também precisamos alterá-los para estar em toda a página, mas voltaremos a eles em apenas um momento. Também precisamos fazer esses links percorrer a página, e a maneira como podemos fazer isso é direcionando o wrapper, que é o item da lista. Assim como antes quando definimos o tipo de exibição do cabeçalho para fazer uso de flex-box, para isso, vamos alterar o tempo de exibição padrão para todos os itens da lista ser o valor de inline. Quando salvarmos isso, veremos imediatamente que eles mudam para um tipo de exibição em linha, em vez de estarem em cima um do outro exatamente como estavam antes. Em seguida, vamos para esta seção do meio e vamos tornar a imagem um pouco menor, então pegue nossa seção de cabeçalho. Então vamos usar um seletor diferente que se parece com isso. Antes, mencionamos que se usarmos essa seta maior que, isso irá selecionar qualquer div que imediatamente segue nossos elementos de cabeçalho. Não foi possível fazer exatamente o mesmo para esta seção porque a imagem não é um canal direto do nosso cabeçalho. Esta seção de cabeçalho só contém nossas divs, então o que podemos fazer em vez disso é deixar isso de fora e isso vai pegar qualquer elemento de imagem que está dentro da seção de cabeçalho. Para isso, vamos restringir o tamanho da imagem do cabeçalho para uma largura máxima de 100 pixels. Agora podemos ver que a imagem agora é apenas sobre o tamanho certo, mas parte do espaçamento e também o tamanho do título do site ainda está empurrando isso para fora do topo da página. Em vez de fazer isso menor, vamos descer para o nosso título de nível um, que é o título do nosso site colocado dentro desta div do meio, então só aqui. Para esta seção, queremos, em primeiro lugar, remover o espaçamento padrão que está logo abaixo. Se clicar com o botão direito do mouse e ir para o inspetor, abriremos as ferramentas do desenvolvedor, clique na seta no canto. Podemos ver a seção laranja na parte superior e inferior. Agora, se clicarmos sobre isso e depois olharmos para a direita, e depois dentro da seção de elementos, entre nos estilos. Então, na parte inferior, podemos ver que temos alguma margem que foi aplicada na parte superior e inferior. O cabeçalho de nível um, juntamente com outros elementos, muitas vezes têm alguma margem padrão e preenchimento aplicados pelo navegador. Também podemos substituir isso definindo nossos próprios valores de margem. Podemos redefinir isso para ser zero e podemos ver que isso foi removido agora. No entanto, queremos aplicar um pouco de margem na parte inferior e também no topo, que possamos mudar isso para dez pixels. Agora que removemos o espaçamento, quase temos a imagem de volta na página. A próxima coisa que vamos fazer é definir o tamanho da fonte para 20 pixels. Isso reduzirá o tamanho da fonte e deixará espaço suficiente agora para nossa imagem. Em seguida, vamos passar para esta seção esquerda e direita e estilo nossa lista não ordenada. Se você notar e, em particular, se entrarmos nas ferramentas de desenvolvedor, se clicarmos no inspetor e, em seguida, passar o mouse sobre qualquer uma das seções, podemos ver que esses itens de lista não ordenados não são colocados no centro de nossa div. Isso ocorre porque se selecionarmos nossa lista não ordenada, podemos ver pela seção verde sobre a esquerda, temos algum preenchimento padrão, e assim como o título de nível um com a seção laranja, também temos alguns margem aplicada também. Mais uma vez, se clicarmos nisso, podemos ir para o diagrama no canto inferior direito. Podemos ver o tamanho dos elementos no meio, um preenchimento que está sendo aplicado sobre a esquerda, que é atualmente 40 pixels, e, em seguida, a margem que está na parte superior e inferior. O que vamos fazer é, em primeiro lugar, definir a margem como um valor de 10 pixels. Isto irá então dar a mesma quantidade de espaçamento a partir do fundo que o título. Em seguida, vamos mover esta seção de preenchimento verde padrão para que nossos links sejam colocados no centro. Faça isso. Como acabamos de ver, isso é aplicado à lista não ordenada. Primeiro, vamos definir a margem para 10 pixels na parte superior e inferior e isso deve então alinhar isso com o nosso cabeçalho. Vamos definir zero à esquerda e à direita e, em seguida, remover qualquer preenchimento padrão com um valor de zero. Isso e de volta ao navegador, agora podemos ver se passamos o mouse sobre o preenchimento, não temos nenhum valor aplicado. A margem, que agora foi reduzida para 10 pixels na parte superior e inferior, que então se alinhará com o nosso cabeçalho. Em seguida, uma vez que todos esses itens são links, têm uma cor padrão e eles também têm estes sublinhados também. Para remover isso, precisamos selecionar nosso link, que é este elemento A que rodeia nosso título, e também nossos itens de lista. Agarra isto. Primeiro, para remover o sublinhado, precisamos definir a decoração do texto. Nós temos opções para mudar coisas como a cor, mas eu vou apenas remover isso com o valor de nenhum. Em seguida, vamos definir a cor do texto. Eu também vou colocar isso na seção do corpo também. Isso também se aplica a outros elementos. A maneira como podemos adicionar cor ao nosso texto é simplesmente usando a propriedade color. A partir daqui novamente, queremos usar um valor hexadecimal de 373535. Isso se aplicará ao resto do site quando criarmos nosso novo elemento. Como podemos ver, isso não se aplica aos nossos links, então precisamos também aplicar isso aos nossos elementos A fazendo exatamente o mesmo. O valor era 373535, salve isso. Isso agora é aplicado a todos os nossos links. A última peça de estilo que vou usar para este cabeçalho é mudar a cor deste link quando o mouse passa o mouse sobre. Assim como vemos na versão final aqui quando passamos o mouse sobre qualquer um desses links, temos uma mudança de cor. Para fazer isso, precisamos aplicar uma pseudo-classe ao nosso elemento A. Assim como acima, selecionamos nossos elementos, usamos dois pontos e uma pseudo-classe aplicará estilos diferentes para um estado diferente. Por estado, queremos dizer coisas como se um link foi visitado ou clicado, se não foi visitado, se o mouse passa sobre qualquer um desses links, e também vários pavimentos também. Para isso, vamos fazer uso do estado do mouse, então quando o mouse passar sobre qualquer um desses links, mas eu vou mudar a cor do texto. Novamente, estamos livres para usar quaisquer tipos ou valores diferentes que você quiser, mas para este exemplo, eu vou misturá-lo e usar um valor RGB onde colocamos dentro de três valores separados. O primeiro é vermelho, que é 226, o verde de 74, e o valor azul de 74. Podemos ver pela pré-visualização que isso nos dá essa cor vermelha. Sobre o projeto, e nosso pairar entra em vigor para cada um desses links. Este é agora todo o estilo aplicado à nossa seção de cabeçalho. Se você quiser, você pode brincar com esses valores e cores e mudar as coisas se você quiser. Em seguida, vamos mover para baixo a página e criar mais algumas dessas seções de conteúdo. 10. Área do conteúdo principal: Descendo a partir desta seção de cabeçalho que temos trabalhado, agora vamos adicionar o conteúdo logo abaixo. Se dermos uma olhada na versão final apenas dentro da outra guia do navegador, estas serão as duas seções que vamos criar. A primeira seção terá uma imagem de fundo e, em seguida, terá um título, e também uma chance de inserir um e-mail e, em seguida, enviar isso. É claro que no momento isso não vai, porque isso é apenas HTML, e você precisaria de algum serviço back-end para isso funcionar. Mas no momento, estamos apenas nos concentrando na aparência e na sensação do site usando HTML e CSS. Movendo-se para baixo, temos uma segunda seção logo abaixo, que tem essas três seções diferentes. Isso nos dará uma chance de dar uma olhada em algumas maneiras diferentes de como podemos posicionar elementos. Vamos sobrepor este texto na parte superior da imagem. Dê uma olhada em algumas dessas técnicas. Para começar, vamos voltar para nossa página index.html. Então, se deslocarmos para baixo logo abaixo da seção de cabeçalho e criar algum espaço, certifique-se de que isso ainda está acima do corpo. Isto vamos usar um novo elemento chamado seção. A seção será o wrapper para toda a nossa primeira seção que você vê apenas aqui. Agora, nós poderíamos adicionar uma imagem exatamente como nós usamos no cabeçalho aparecer para o logotipo usando o elemento imagem. Mas para esta imagem de fundo, vou mostrar-lhe uma maneira diferente de inserir uma imagem. Vamos dar uma olhada nisso no próximo vídeo via CSS. Vamos começar com nossos títulos e este vai ser um título de Nível 2, então este será o Nível 3. O h2 e, em seguida, pressione Enter e, em seguida, o texto de receitas semanais para sua caixa de entrada. Vou salvar esse arquivo e depois abrir o servidor ao vivo, assim como vimos em vídeos anteriores. Há nossas texturas aqui, e parece que está dentro da seção de cabeçalho por causa da cor de fundo. No entanto, isso está em sua própria seção abaixo do cabeçalho. Se olharmos nosso style.css e, em seguida, rolar para a seção do corpo, aqui nós definimos a cor de fundo para o corpo inteiro. Isso se aplica a todo o nosso conteúdo, mas isso será substituído por uma imagem de fundo no próximo vídeo. Em seguida, o texto, que será Cadastre-se agora, na página de índice. Este vai ser um título de Nível 3, coloque o texto de Cadastre-se agora. Como estamos usando um servidor ativo, isso será atualizado automaticamente quando salvarmos. Para inserir a entrada do usuário, vamos fazer uso de um formulário. O formulário é uma forma de o usuário interagir com nosso site e inserir alguns valores. Você pode ter usado formulários no passado onde você se inscrever por e-mail, você pode adicionar seu nome, você pode adicionar todos os tipos de informações, como mensagens, sua data de nascimento. Mas este vai ser simples, vai ser apenas uma entrada de e-mail e, em seguida, um botão Enviar. Para fazer isso, vamos envolver toda essa seção em um formulário. Podemos remover este atributo de ação, uma vez que não o enviaremos durante este curso. Mas o que vamos fazer é colocar em uma entrada. Se apertarmos Enter, o tipo padrão que nos é dado é a entrada baseada em texto. Ao que parece, esta é uma maneira para o usuário inserir um valor de texto, como um nome de usuário ou nome completo. Vamos fazer uso de uma entrada de e-mail. Agora, este tipo de entrada que entramos, dará ao navegador uma dica de que tipo de dados esperamos que sejam inseridos. Ele pode verificar esses dados e também fornecer algumas mensagens para o usuário se o tipo de dados não é válido. Por exemplo, se fôssemos alterar isso para um tipo de número e, em seguida, o usuário inserisse algum texto, o navegador restringiria isso apenas a aceitar números. Além disso, uma vez que este é um tipo de e-mail, quando o usuário clica nesta entrada, ele também pode aparecer com alguns e-mails usados anteriormente também. Seguindo em frente. O próximo atributo que vamos adicionar é o rótulo aria-label. Uma vez que você definir isso, para ser igual a e-mail. Esse rótulo aria-label é usado para dispositivos de acessibilidade, como leitores de tela. Se dermos uma olhada na nossa versão final, apenas aqui, você vê que não temos nenhum rótulo ao lado da nossa entrada. Muitas vezes, com formulários você veria um rótulo como este, e talvez algum texto como este, que aparecerá ao lado da entrada do formulário. Agora, como a nossa versão final, não queremos exibir este texto. Poderíamos remover este texto do navegador usando CSS. No entanto, há uma razão pela qual nós não queremos fazer isso, e isso é porque se um usuário é deficiente visual e não pode ler essas texturas aqui, e pode estar usando um dispositivo como um leitor de tela e deixá-los saber que tipo de entrada este é. Se fôssemos remover isso, seu rótulo aria-label iria rotular este elemento para fornecer uma indicação para o leitor de tela ou dispositivo de acessibilidade para que tipo de entrada ele é. Depois disso, o próximo atributo é o espaço reservado, que vai ser o texto que é colocado dentro desta caixa antes que o usuário adiciona um valor. Para isso, vamos dizer Digite seu e-mail com pouco espaço apenas à esquerda. Este espaço também será refletido dentro da entrada. Em seguida, a segunda entrada, que tem o tipo de envio. Quando adicionamos um formulário como este, também precisamos adicionar um botão Enviar, que vai enviar este formulário para o servidor. Há um todo aqui. Esta é uma seção bastante simples e todos os visuais serão criados no próximo vídeo usando CSS, incluindo esta imagem de fundo. Em seguida, movemos para baixo para fazer nossa seção que logo abaixo. Para isso, criaremos uma nova seção como um wrapper. A seção vai ter três divs colocados dentro com cada uma dessas imagens com o texto. A primeira div, e cada uma dessas divs vai conter dois elementos. A primeira é a imagem que você deseja usar para o plano de fundo, e a fonte está dentro da pasta Imagens. Esta imagem é um vegatarian.jpg. O texto alternativo. Lembre-se, isso será exibido no navegador se a imagem não puder ser carregada. Vai dizer seção vegetariana. Depois disso, podemos colocar no texto. Agora, se quiséssemos, poderíamos usar um elemento p ou poderíamos usar um título. Para isso, quer colocar em um título de Nível 3, vez que estas são seções razoavelmente importantes. O texto é vegetariano. Salve isso, e vamos checar isso no navegador. Bom. Essa é a nossa primeira seção. Não se preocupe com como isso parece no momento. Vamos melhorar muito isso no próximo vídeo. A segunda div, logo abaixo, isso é para a seção do meio. Isso é exatamente como a seção acima com a imagem e também um título de Nível 3. Se você quiser, vá em frente e pause o vídeo e nos dê uma chance por conta própria se você se sentir confortável fazendo isso. Se não, vou continuar com as imagens. A imagem desta vez é o quick.jpg. O texto alternativo dirá a seção de refeições de cinco minutos. O h3 é a maioria das refeições de cinco minutos. Verifique se tudo parece bem no navegador. No momento, estes serão empilhados um em cima do outro em vez de atravessar a página. Porque como mencionamos anteriormente, um div é um elemento de nível de bloco, que significa que cada div começará em sua própria nova linha. A terceira div, esta é para as opções saudáveis. Coloque na imagem. Novamente, na pasta Imagens, este é chamado healthy.jpg. O texto alt, digamos seção de opções saudáveis. Em seguida, o h3 na parte inferior, que é opções saudáveis. Vá para baixo. Há nossa terceira seção no fundo. Observe como todo esse conteúdo ainda está dentro da seção do corpo. Este fundo cinza será aplicado a todo o nosso conteúdo. Não parece muito bom no momento, mas vamos corrigir isso no próximo vídeo, onde vamos aplicar algum estilo em nossas duas novas seções. 11. Estilizando o conteúdo principal: Bem-vinda de volta. Agora temos algum conteúdo na página que precisamos aplicar algum CSS para. Não só o seu estilo, mas precisamos fazer um monte de trabalho de layout também. Precisamos posicionar todo esse texto no centro da página. Precisamos adicionar uma imagem de fundo, algum estilo geral, e então nesta seção e logo abaixo com nossas imagens gratuitas, e também o texto, precisamos colocá-los em toda a página e também encontrar uma maneira para este texto substituir cada uma destas imagens, tal como temos na versão final, aqui mesmo. Do topo, queremos começar com a seção de inscrição do no styles.css. Mas antes de fazermos isso, precisamos de uma maneira de realmente agarrar esta seção para que possamos aplicar algum estilo. Todo este conteúdo é colocado dentro deste elemento de seção. Mas se formos em frente e pegar a seção com um CSS, isso também se aplicaria à seção abaixo também. O que vamos fazer aqui é adicionar no atributo id. Este id é um valor exclusivo para este único elemento, portanto, ao usar id é importante que apenas adicionemos isso uma vez em nossa página. Dê a ele um nome de “inscrição”. Agora temos uma maneira de agarrar esta seção em nosso arquivo CSS. Agora, antes de adicionarmos nossos seletores assim, nós os adicionamos através do nome da tag. Usamos a lista a, não ordenada, o h1. Mas quando estamos selecionando um id, usamos o # seguido pelo nome do id, que foi inscrito. Então, dentro daqui, podemos colocar em todas as nossas regras CSS, assim como fizemos acima. A primeira coisa que precisamos fazer é adicionar uma imagem de fundo. Agora, anteriormente, adicionamos os valores de fundo. Agora anteriormente acima nós usamos a propriedade background-color apenas aqui. Isto é para definir a cor do fundo. Mas desta vez o que vamos fazer é definir a imagem de fundo. Em seguida, podemos colocá-lo em uma URL, que é a localização do caminho do arquivo desta imagem. O nosso está na pasta de imagens e a imagem para esta seção é o main.jpg. Podemos ver imediatamente uma vez que salvamos que esta imagem agora aparece como o plano de fundo para esta seção. Nós também precisamos adicionar à propriedade height para torná-la um pouco mais alta, e eu vou definir o meu para ser 500 pixels. Isso nos dará espaço suficiente para cobrir todo o conteúdo. Em seguida, também queremos que este texto e também a entrada do formulário sejam colocados no centro da nossa imagem. Uma maneira simples de fazer isso é usando a flexbox CSS. Assim como anteriormente, definimos o tipo de exibição para ser flexível e lembramos que a direção flex padrão é linha, para que todo o conteúdo seja colocado na página. No entanto, queremos que estes sejam empilhados verticalmente, que possamos mudar a direção flex-ser coluna. Agora estamos fazendo uso da flexbox, precisamos adicionar duas novas propriedades para colocar esses itens no centro. O primeiro é align-items e o valor está no centro. Então, quando a direção flexível é definida como coluna, os itens de linha tornarão estes centrados horizontalmente em toda a página. A próxima coisa que precisamos fazer é exatamente o oposto, que é centralizar nosso conteúdo verticalmente. A maneira como podemos fazer isso é usando conteúdo justificativo e colocando-os no centro. Ok, agora, se olharmos de perto, estes estão praticamente no centro, mas parece que um pouco mais de espaçamento no topo do que no fundo. A razão para isso será a ver com os padrões do navegador. Se entrarmos no Inspecionar, clique sobre isso, e podemos ver que o cabeçalho de nível 2 tem alguma margem padrão na parte superior e inferior. O mesmo com o título de nível 3, não vemos nenhum no formulário. Então, o que queremos fazer agora é trabalhar com nossas duas rubricas. A partir da página de índice, essas duas seções foram colocadas no cabeçalho de nível 2 e também no nível 3. Podemos alvejar vários elementos separando-os com uma vírgula. O h2 e também h3, todos os estilos aqui dentro serão aplicados a ambos os títulos. Primeiro, a cor de fundo, e anteriormente mencionamos há diferentes tipos de cores que podemos adicionar. Podemos usar os valores rgb que temos apenas aqui, e também podemos usar um valor hexadecimal também. Também podemos estender este tipo rgb para ser rgba. Vamos dar uma olhada em como podemos fazer isso aqui. Se adicionarmos rgb, podemos adicionar nossos valores regulares, eu vou para 46 para o vermelho, 39 para o verde e também 39 para o azul. Se salvarmos isso, como esperado, veremos uma cor de fundo escura. Agora, este fundo é bastante sólido e cobre a imagem. Então o que vamos fazer é aplicar um pouco de opacidade. Isto significa que podemos aplicar um certo nível de transparência. Para fazer isso, adicionamos o quarto canal, que é um, e isso é para alfa, e então entre zero e um, podemos definir um valor. Se definirmos isto como um, este será um fundo sólido, sem transparência, tal como já fizemos. Mas se mudarmos isso para zero, isso será totalmente transparente. Eu quero colocar isso é em algum lugar no meio, como 0,05, isso significa que ainda temos uma leve cor de fundo. Também vemos algumas das imagens de fundo aparecendo. Isso pode nos dar um efeito bonito. Para aumentar isso, vamos definir algum preenchimento de cinco pixels na parte superior e inferior e zero na esquerda e na direita. Para aplicar algum espaço dentro deste elemento, faça o fundo um pouco mais alto, na verdade, também adicionaremos isso no lado. Vamos apenas remover o valor zero, então se aplica a todos os quatro lados. Em seguida, o texto, vamos tornar este mais leve definindo a propriedade color. Este é um valor rgb de dois 235, 222 e, em seguida, 222. Dando-nos esta cor mais clara que vemos aqui. Se compararmos isso com a versão final aqui, podemos ver que o texto sobre esses dois títulos é um pouco mais leve do que a nossa versão. Isso é por causa do peso da fonte. Vou mudar isso para ser um valor mais leve de 300, então não é tão negrito quanto o padrão. Em seguida, o nível 3 cabeçalho podemos remover alguns dos padrões do navegador. Lembre-se de antes que tínhamos alguma margem padrão, e eu vou remover isso. Agora, se definirmos isso para ser zero, isso se aplicaria a todos os nossos lados, ou em vez disso, se quiséssemos aplicar isso a um certo lado, também poderíamos colocar isso em, para que pudéssemos colocá-lo no topo, no fundo, a direita e a esquerda, e isso agora só se aplica a um lado. Na verdade, ele só quer ser um nível 2. Então, isso se aplicará ao topo. Agora que a margem foi removida do nosso topo, isto vai colocar isto mais no centro. Indo para baixo agora temos esta seção de formulário com a entrada e também o botão Enviar. Se quiséssemos, poderíamos ir para nossa página de índice e adicionar um id exclusivo ou até mesmo uma entrada de lista de classes. Ou também podemos direcionar essa entrada pelo tipo. A maneira de fazer isso é adicionar a entrada seguida pelos colchetes. A partir daqui podemos definir o tipo de entrada de e-mail. Agora, todos os estilos que adicionamos aqui dentro só se aplicam à entrada de e-mail. Primeiro, a largura, podemos definir isso para ser um valor fixo de 250 pixels, o que tornará isso um pouco mais largo. Estou enchendo, que se lembra do espaçamento dentro do elemento. Quaisquer valores que adicionamos dentro daqui irão torná-lo mais alto ou mais largo. Vamos para cinco pixels em todos os lados. O raio da fronteira e isto dar-nos-á um arredondamento nas curvas. Assim como ao usar margem e preenchimento, também podemos adicionar vários valores. Ou se quiséssemos aplicar isso em todos os lados, nós apenas adicionamos o valor único, o tamanho da fonte de 14 pixels. Isso substituirá o valor de 18 pixels da seção de corpo. Em seguida, após o tamanho da fonte, também podemos remover esta borda que está em torno de todos os quatro lados. Isso é muito simples de fazer. Tudo o que precisamos fazer é definir a propriedade border para ser igual a nenhum. Podemos fazer o mesmo para o nosso botão Enviar. Lembre-se que este tem o tipo de envio. Assim, assim como ambos, direciona todas as entradas, e então restrinja isso para o tipo que é igual a enviar. Primeiro de tudo, vamos definir uma cor de fundo. Para isso, podemos usar a cor de fundo, que usamos acima ou poderia encurtar isso para simplesmente fundo. Novamente, temos acesso a todas as mesmas cores como RGB ou também os valores hexadecimais também. Eu vou para cccccc, e esta é a cor cinza que vemos aqui. Em seguida, alguns estofamento no interior. O primeiro valor será aplicado para a parte superior e inferior e queremos corresponder ao valor de preenchimento do e-mail. Assim, vamos definir isso para ser cinco pixels, e então para torná-lo mais largo, vamos adicionar 15 pixels à esquerda e à direita. Também combinar com o e-mail, também precisamos arredondar os cantos e também remover a borda também. Assim como acima da borda nenhum, em seguida, o raio da borda, arredondar os cantos, todos os cinco pixels, e também o mesmo tamanho de fonte, que é 14 pixels. Bom. Essa é a nossa seção superior completa. Agora vamos passar para baixo para essas imagens gratuitas e também para o texto. Para isso, também precisamos de uma maneira de selecionar a seção e se rolarmos para baixo até esta seção, também podemos colocá-lo em um ID, que eu vou chamar de idéias. Ao usar CSS, há várias maneiras que podemos usar para colocar nossas imagens em toda a página, assim como usamos anteriormente, vamos usar o CSS Flexbox. Primeiro de tudo, vamos direcionar o contêiner que tinha o ID das idéias. Defina o tipo de exibição para ser flexível e, como mencionado anteriormente, a direção flex padrão é linha, que irá colocá-los horizontalmente em toda a página. Se olharmos para a versão final, vemos que há algum espaçamento em torno de toda esta seção. Para fazer isso podemos fazer uso de um valor de preenchimento que, lembre-se, aparecerá no interior da seção. Isso será preenchimento, e vamos para 15 pixels e há algum espaçamento ao redor da borda. A próxima coisa que precisamos fazer é reduzir o tamanho dessas imagens, então novamente, pegue a seção de ideias, e então vamos selecionar todas as imagens que são colocadas nesta seção. Dentro daqui, se definirmos a propriedade width como 100 por cento, todas essas imagens serão dimensionadas ou reduzidas para caber dentro do contêiner. Agora precisamos colocar todas essas seções tecnológicas acima de cada uma dessas imagens. Agora, isso pode ser complicado de entender se você não usou as propriedades de posição no passado, mas vamos fazer uso de dois valores de posição chamados relativo e absoluto. Primeiro de tudo, antes de fazer isso, precisamos aplicar uma classe a cada uma dessas seções. Agora, assim como aqui onde colocamos em uma identificação, poderíamos colocar uma classe dentro de qualquer um desses elementos. Uma classe também é outra maneira de pegar qualquer um desses elementos usando nosso CSS. Mas a diferença entre uma classe e um ID é um ID deve ser usado apenas uma vez, mas podemos usar uma classe várias vezes. Isso é perfeito se queremos adicionar os mesmos valores CSS para vários elementos. Para isso eu vou dar a isso um nome de parente, eu também vou aplicar isso para o nosso segundo e também nosso terceiro div também. Nós pegamos isso no CSS, vamos para nossa folha de estilo, e em vez de usar o hash que vimos para nosso ID, usamos um ponto para uma classe. Isto era relativo. Em seguida, vamos definir o valor da posição CSS como relativo. Vamos dar uma olhada no que isso significa em apenas um segundo, mas por enquanto, vamos descer para este título. O texto dentro da nossa página de índice está contido dentro deste título de nível 3. Há várias maneiras de pegar isso, podemos direcionar as idéias, e então selecionar o título de nível 3, ou também podemos colocar uma classe dentro de cada uma delas. Eu vou para a opção de classe e nomear este o título da categoria. Copie isso e também coloque isso em nossas duas outras seções. Voltar para a folha de estilo. Vamos usar o ponto e este foi o título da categoria. Desta vez vamos definir o valor da posição para ser absoluto. Agora temos dois valores de posição diferentes definidos apenas aqui, nós definimos as imagens para ter a posição de relativo, e o título para ter a posição de absoluto. Uma posição relativa é a posição original do elemento. Permanecerá no fluxo dos documentos e ocupará o espaço original que se destinava. Poderíamos também empurrar essas seções com um valor superior, direito , inferior ou esquerdo como este. Mas vou deixar isto como está. Agora, a razão pela qual definimos isso para ser relativo é porque se definirmos outro valor dentro para ser absoluto. Aqui também podemos fazer uso da parte superior, direita, inferior e esquerda, mas desta vez a diferença é que a seção será referenciada a partir de nossa imagem relativa. Se definirmos um valor superior de 20 pixels, digamos isso, esta seção absoluta procurará o contêiner relativo mais próximo, que é a nossa imagem. O valor superior de será referenciado a partir do topo, temos a direita, a parte inferior e a esquerda. Como podemos ver, os 20 pixels do topo empurrarão estes 20 pixels para baixo da imagem. Nós também poderíamos trabalhar com o valor esquerdo também para empurrar isso para o meio. Mas, alternativamente, poderíamos definir a largura para 100 por cento. Isso agora vai esticar o título para ter a largura total de nossa imagem. Então isso nos permitirá aplicar o text-align para estar no centro, colocando-os exatamente onde queremos que eles estejam. Quando definimos a posição para ser absoluta, assim como fizemos aqui, isso removerá o elemento do fluxo do documento. Naturalmente, ele não vai ocupar qualquer posição na página, ele vai agir como se tivesse sido removido dos documentos, o que significa que precisamos usar a parte superior, direita, inferior e esquerda para definir o posicionamento exato. Se removermos essa seção relativa, diga isso, ela será colocada a 20 pixels do topo da página. Isso ocorre porque, como mencionado anteriormente, um elemento absoluto procurará o contêiner relativo mais próximo e, se ele não tiver um, ele fará referência aos documentos completos. Vamos colocar isso de volta. A última coisa a fazer é também aplicar algum espaço em ambos os lados desta imagem do meio como fizemos com esta imagem apenas aqui. Para fazer isso, volte para nossa página de índice. Para esta seção do meio, também podemos adicionar uma segunda classe separada por um espaço. Vamos chamar isso de meio, salvar esse arquivo, e passar para nossa folha de estilo. Pegue a seção do meio. Para aplicar algum espaço fora desta div, precisamos ir para a margem. Nós já temos o espaçamento na parte superior e inferior, então vamos deixar isso como zero, e colocar 15 pixels à esquerda e à direita. Vá para o navegador, vemos que temos algum espaçamento à esquerda e à direita, mas também agora temos um problema com o nosso título. Vamos para as Ferramentas do Desenvolvedor, botão direito do mouse em “Inspetor”, clique em “Inspetor” e veremos o que está acontecendo. Este é o título de nível 3, então clique sobre isso. Se passarmos o mouse sobre a seção de preenchimento, podemos ver que temos um contorno verde ao redor do nosso título. Este preenchimento também está adicionando algum espaço em excesso no qual não precisamos. Para remover isso, vamos voltar à nossa folha de estilo, e já temos um seletor de cabeçalho de nível 3. Volte para a nossa seção h3, este é o preenchimento aqui mesmo. Poderíamos substituir esta seção, mas isso também se aplicará a esta seção no cabeçalho também. Em vez disso, vamos voltar para o título da categoria, que só vai se aplicar a esta seção e definir o preenchimento como zero. Isso agora resolve o problema horizontalmente, mas também precisamos manter o espaçamento vertical. Para isso, cinco pixels na parte superior e inferior e só aplicaremos este zero à esquerda e à direita. Bom, este é agora o estilo completo para todo o conteúdo principal. No próximo vídeo, vamos começar a trabalhar com nossa seção final, que é a área de rodapé. 12. Seção de rodapé em HTML: A maioria dos conteúdos principais agora nesta página, e agora, vamos descer para o fundo e criar a última seção deste projeto. Esta seção vai ser uma área de rodapé. Não vai ser muito difícil. Será apenas um rodapé como um wrapper, que é um elemento semântico HTML 5. Este wrapper irá então conter uma navegação com vários links. Você pode fazer esses links qualquer coisa que você quiser, e você também pode criar páginas adicionais se você quiser vincular esses dois também. Assim como vemos na versão final, também haverá uma pequena imagem logo acima disso, e isso está contido dentro da pasta de imagens. Se você se sentir confiante em fazê-lo, você pode ir em frente e criar isso você mesmo. Se não, apenas me acompanhe. Vamos criar isso agora na parte inferior, logo acima da etiqueta de fechamento do corpo. Fornecido com HTML 5, era um novo elemento semântico ou descritivo, que é chamado de rodapé. Assim como fizemos anteriormente quando criamos a seção de cabeçalho com este elemento apenas aqui, todo o conteúdo para o rodapé vai entre essas tags, e vamos criar uma imagem e também uma nova lista não ordenada. Em primeiro lugar, os elementos da imagem e a fonte estão todos na pasta de imagens. Precisamos do cutlery.svg e também de algum texto antigo também. Vamos salvar isso e ver isso no navegador. Atualizar, e como nosso svg, que é um pouco grande no momento, mas no próximo vídeo, vamos estilizar isso com uma seção com CSS. Em seguida, assim como fizemos anteriormente, nós também vamos criar uma lista não ordenada, que irá conter nossos links de navegação. Pouco antes de fazermos isso, nós também vamos dar uma olhada em outros elementos semânticos ou descritivos chamados nav. Nav é um elemento que se destina a representar uma página possível, que contém links de navegação. Este não é um elemento obrigatório que precisamos incluir antes dos navegadores e leitores de tela que são lidos neste HTML. Ele fornece uma melhor descrição de qual conteúdo está aninhado dentro. A partir daqui, criamos uma lista ordenada como anteriormente. Vou listar itens que podem conter um elemento para um link. Como mencionado anteriormente, você também pode criar um link para uma página diferente. Mas vou deixar este vazio neste vídeo. O primeiro, digamos sobre isso. O segundo item da lista com um link, este é para empreiteiros. O terceiro, este eu vou sugerir uma receita. O quarto, este vai ser privacidade. Isso seguirá os links abaixo na parte inferior. O CSS também é aplicado quando passamos o mouse sobre cada um desses elementos desde o mais antigo [inaudível] que tivemos. Se formos até o topo, também temos algumas seções de navegação aqui em cima. O que vamos fazer é também mover para o topo da página e procurar nossa lista não ordenada dentro do cabeçalho. Vamos selecionar toda esta seção e, em seguida, comando ou Controle X. Podemos cortar isso fora do lugar e também cercar a seção com o elemento nav. O mesmo para o segundo conjunto de links logo abaixo, corte a seção para fora, coloque-a no elemento nav e, em seguida, cole o conteúdo de volta para dentro. Não devemos ver nenhuma diferença dentro do navegador. Isto é apenas para descrever o conteúdo que está dentro deste elemento, assim como fizemos com as seções de cabeçalho e rodapé. Finalmente, para terminar o HTML para esta página, a última coisa que vamos fazer é colocar esses pontos intermediários entre os links de rodapé. Podemos fazer isso copiando os elementos span, que contém a entidade HTML. Vamos pegar isso, nós Command ou Control C. Voltar para baixo para nossos links de rodapé e podemos colar isso entre cada um desses itens da lista. Vamos verificar isso. Lá temos ele. Finalmente, a última coisa a fazer para este projeto será no próximo vídeo. Vamos aplicar o nosso estilo CSS para a seção de rodapé. 13. Estilo do rodapé: Terei todo o conteúdo HTML nesta página. A última coisa a fazer para terminar este projeto é aplicar alguns CSS styling para baixo no rodapé, ele vai ser bastante básico. Tudo o que precisamos fazer é reduzir o tamanho deste SVG irá colocar todo o conteúdo no centro e também jogar uma cor de fundo ligeiramente diferente. Então vamos usá-lo para o resto da seção do corpo. Então, sobre o styles.css. Lembre-se que o wrapper para toda esta seção foi o rodapé. Agora podemos trabalhar com isso em nossa folha de estilos. Primeiro, vamos pegar isso. Em seguida, dentro daqui vamos definir o tipo de exibição para fazer uso da flexbox. Como mencionado anteriormente, o flex-direction por padrão é a linha que colocará esses itens em toda a página. Precisamos mudar isso de volta para ser a direção flexível da coluna. Isso também se aplica à seção de rodapé, que é o wrapper. A direção flexível é agora coluna, que irá no lugar estes de volta verticalmente. Você pode estar pensando: “Bem, isso nos deixa exatamente onde estamos no início.” Mas agora estamos fazendo uso do flexbox. Agora podemos fazer uso de uma propriedade flex chamada align items, onde podemos definir isso no centro. Isso irá então agora empurrar nossos links para baixo na parte inferior, para o meio e também este SVG, quando reduzimos o tamanho para baixo também, nós atualmente temos a coluna flex-direction que é vertical, e isso é referido como o eixo principal. Ao usar itens de linha como chegou aqui, isso funcionará no oposto, que é referido como o eixo transversal. É por isso que a propriedade center alinhará esses itens na página horizontalmente. O oposto se aplicaria se definíssemos a direção flexível para a linha. Isso significaria que nosso eixo principal está em toda a página, significa que itens de alinhamento seria o oposto e isso irá definir o alinhamento vertical. Se você começar agora, isso pode parecer um pouco confuso, mas isso só leva um pouco de se acostumar. Em seguida, vamos alterar a cor de fundo para esta seção de rodapé. Rosto sombra ligeiramente escura, que vai ser E5. Linha fácil, linha fácil, salvar. Podemos ver uma sombra ligeiramente diferente do resto do conteúdo do corpo. Algum pólen, que vai para dentro desta seção de rodapé e fornece algum espaço dentro, ao redor do interior. Vamos para 20 pixels. Isso aplicará nosso espaço em todos os quatro lados. Finalmente, precisamos reduzir o tamanho dessa imagem. Podemos aplicar isso apenas para a área de rodapé e, em seguida, qualquer imagem que se destina a estar dentro. Tudo o que precisamos fazer é definir a largura máxima desta imagem, os 80 pixels. Lá temos ele. Estas são as minhas receitas, sites todos agora completos. Espero que você tenha gostado deste projeto e seus primeiros passos para a construção de sites. No próximo projeto, vamos levar as coisas ainda mais longe criando um novo projeto e também introduzindo um design responsivo. 14. Configuração do projeto de faculdade: Bem-vindo de volta a este novo projeto e esta nova seção. Durante esta próxima seção, vamos construir neste site tema da faculdade que você vê aqui. Não só vamos replicar isso e ter muito mais prática na construção de sites HTML e CSS, também vamos aprender alguns truques novos. Em particular, um dos maiores que vamos aprender nesta seção é o design responsivo. O design responsivo é uma maneira de criar nosso site e torná-lo adaptado a diferentes tamanhos de tela. Por exemplo, em um monitor de tamanho de desktop maior, assim como este, é assim que nosso site ficará. Mas se reduzirmos isso para uma largura menor, vemos que este site responderá ou se adaptará ao tamanho atual do navegador, e então mudará o layout de acordo. Isso também entrará em vigor quando visualizado em um tablet menor ou um dispositivo móvel. Na parte superior, nosso cabeçalho será empilhado verticalmente. Nós vemos os links logo abaixo do cabeçalho, em vez de ao lado de cada um deles como eles estão aqui. Este é um tema geral para uma grande parte do conteúdo. Podemos ver aqui com esta grade que, em vez de ter itens livres lado este agora será empilhado verticalmente e será a largura total da tela. Para este projeto em particular, temos apenas uma mudança de layout, temos a visualização de tela pequena ou a visualização de tela maior, mas podemos adicionar tantas mudanças ou quantos pontos de interrupção gostaríamos, mesmo que apenas quiséssemos afinar uma seção particular do lado. Isto é o que vamos aprender nesta seção. Vamos começar, como sempre criando uma pasta de projeto. Para a área de trabalho, uma nova pasta. Este aqui, queremos chamar isso de “Faculdade Tecnológica”. Você pode dar a isso qualquer nome que você quiser. Também fornecido com este projeto é a pasta de imagens, e você pode fazer uso das mesmas imagens que eu vou usar, ou você pode baixar o seu próprio se você preferir. Depois disso, se você quiser, você também pode colocar isso dentro da pasta do projeto e, em seguida, arraste sobre a pasta tech-college para o Visual Studio Code. No momento, temos apenas a nossa pasta de imagens aqui dentro com as imagens fornecidas. O que precisamos fazer para começar é criar nossa nova página, que vai ser o index.html. Como sempre, você pode digitar a estrutura HTML se quiser, ou você pode fazer uso do comando Emmet embutido HTML5, que vem com o Visual Studio Code. Digite html:5, pressione enter. Agora, temos toda esta estrutura que precisamos para o nosso site. O título, coloque isso dentro da seção da cabeça, salve este arquivo e abra isso dentro do navegador. Podemos clicar duas vezes no index.html dentro da pasta do projeto, ou como um atalho, podemos clicar com o botão direito do mouse no nome do arquivo, copiar o caminho e, em seguida, colar isso em uma nova guia do navegador. Bom. Tudo o que eu vou fazer agora para o resto deste vídeo é adicionar um pouco de trabalho de configuração, e isso é para fornecer uma fonte que vamos usar para este projeto e também fornecer algo chamado o arquivo CSS normalizado. Vamos começar com nossas fontes do Google. Fazemos uma pesquisa pelo Google Fonts, e o primeiro que precisamos aqui é fonts.google.com. Adicione aqui, e podemos escolher qualquer fonte que queremos usar para este projeto. O que vou usar chama-se Vollkorn. Este é V-O-L-L-K-O-R-N. Vamos para o Regular, selecione isso, e também feche isso e vamos para o médio. Abra isso de volta, e então podemos copiar todo esse link e colar isso em nossa seção de cabeça. Isso também precisa ser vinculado à nossa folha de estilos, então vamos criar esse novo arquivo dentro do diretório principal do styles.css, e voltaremos a isso em apenas um momento. Mas por enquanto, vamos apenas copiar isso e colar isso, e se nós Command ou Control com barra, isso irá apenas comentar isso para uso posterior. A próxima coisa a fazer é incluir o que é chamado de arquivo CSS normalizado. Se tivéssemos O2, o motor de busca e fazer uma busca por um normalize.css, deve ser o primeiro link que precisamos apenas aqui. Podemos ver aqui que o arquivo normalizado vai nos ajudar a renderizar nosso site de forma mais consistente em diferentes navegadores. Há algo chamado um CSS reset que está disponível, e isso irá redefinir todos os padrões do navegador de volta para zero. Por exemplo, se determinados navegadores tinham algum preenchimento ou margens para nossos elementos, isso reiniciará todos esses itens de volta para zero. No entanto, embora muitas vezes esses valores padrão sejam adicionados por um motivo. Uma alternativa é usar esse arquivo normalizado, e isso não removerá completamente todos os padrões do navegador. Em vez disso, o que ele fará é ajustar determinados valores, dando aos nossos sites uma aparência muito mais consistente em diferentes tipos de navegadores. É muito útil adicionar ao nosso projeto. Também podemos usar isso com MPM se você estava usando nó. Mas já que não estamos, vamos apenas baixar este arquivo, selecionar tudo com Command ou Control A, copiar com Command ou Control C, e então dentro do nosso projeto, agora temos uma segunda folha de estilo que vamos adicionar em. Vou manter isso mais organizado clicando em uma nova pasta chamada CSS. Vamos arrastar sobre nossas folhas de estilo e, em seguida, abrir isso, criar um novo arquivo chamado normalize.css e, em seguida, colar isso em. Tudo isso está fazendo essencialmente é fornecer alguns padrões sensatos que vamos aplicar aos nossos elementos para torná-los melhor em diferentes tipos de navegadores. Precisamos agora vincular ambas as folhas de estilo dentro do nosso índice. Em seguida, vamos vincular nossa folha de estilo, que é o normalize.css. Lembre-se, uma vez que criamos uma pasta CSS, precisamos também adicionar isso dentro do nosso caminho de arquivo. Encontrar nossas folhas de estilo personalizadas e nossa folha de estilo personalizada deve ser sempre a última, então nenhum desses valores acima substituirá nossos estilos personalizados na pasta CSS, styles.css. Agora estamos muito bem para ir com o nosso novo projeto. Este é todo o trabalho de configuração agora concluído, e no próximo vídeo, vamos começar a trabalhar com a seção de cabeçalho e também dar uma olhada em como podemos adicionar nossas imagens responsivas. 15. O cabeçalho e imagens responsivas: Passando para algum conteúdo, agora vamos adicionar algum HTML, e também algum estilo nele ao nosso projeto. Começando do topo com a seção de cabeçalho. Em seguida, após esta é a seção que está logo abaixo qual é a imagem, e também o texto sobreposto acima da imagem também. Isso também demonstrará algumas técnicas úteis, como centralizar a seção sobre a imagem, e também como tornar nossa imagem responsiva. Por responsivo, eu não quero dizer apenas que isso vai encolher menor ou maior assim. É, de fato, também vai usar duas versões da mesma imagem, uma pequena e também uma grande, e apenas a imagem de tamanho apropriado será baixada. Vamos dar uma olhada em como fazer isso começando com o cabeçalho no corpo. Crie os elementos de cabeçalho HTML5 como o wrapper. Então vamos apenas criar duas seções, que é o título no canto superior esquerdo, e depois sobre a lista desordenada direita. Primeiro, o h1, e também podemos colocar em um elemento para vincular isso à página inicial, se queremos reutilizar este cabeçalho em várias páginas. Vamos para o index.html, então eu vou título texto dentro. Em seguida, nossos links, podemos colocá-los dentro do <nav> elemento para manter as coisas semânticas, a lista desordenada. O primeiro item da lista será para login. Escrevi o meu num <a> elemento vazio. Você também pode criar as páginas separadas para vincular a cada uma dessas duas. Se você queria criar uma “Página de login”, uma “Página de registro”, e também uma “Página de toque” ou um pouco de prática extra. Em seguida, ligue para estas páginas dentro do href, que é a primeira. O segundo item da lista, novamente, um link com o texto do registro. O terceiro, este é entrar em contato. Ok. Dê isso um salvamento e podemos verificar no navegador se isso está funcionando. Claro, não parece ótimo, mas vamos corrigir isso com CSS em apenas um pouco. Após a seção de cabeçalho, tudo isso está concluído. Podemos criar uma nova seção, e este será o wrapper para a imagem e também a sobreposição de texto. Com o CSS, coloque em uma classe de aplicar. Em seguida, isso conterá duas seções separadas. Primeiro de tudo, temos a imagem, que é a imagem de fundo, e depois uma div separada, que será esta seção de texto apenas aqui. A fonte na pasta de imagens, vamos dar uma olhada. Temos duas imagens separadas dentro daqui. Temos o college.jpeg e também a faculdade pequena. Vamos dar uma olhada no que isso vai fazer em um segundo. Mas, por enquanto, vamos apontar a fonte da imagem com a pasta de imagens e, em seguida, para o college-small.jpeg. Em seguida, a div, e isso terá uma classe de sobreposição de texto, que vamos usar em um momento dentro da folha de estilo, e então as duas seções de tecnologia, a primeira está agora tomando aplicativos on-line, que nós vamos envolva em um <p> elemento. Observe um botão com o texto de aplicar aqui. Para o navegador, temos a imagem e também o texto logo abaixo. Como você pode esperar para colocar isso acima da imagem, isso vai levar algum trabalho CSS. Então apenas colocar isso abaixo da imagem é bom por enquanto. Mas o que vamos nos concentrar primeiro é mudar entre a nossa imagem da faculdade. Vamos baixar a faculdade pequena em um dispositivo móvel ou uma tela pequena. Então, uma vez que alcançamos um determinado tamanho, vamos mudar para o college.jpeg, que é uma versão maior. Se clicarmos nisso, podemos ver a faculdade pequena tem 1280 pixels de largura, enquanto o college.jpeg é maior, e tem a largura 1920 pixels. Por que haveríamos de querer incluir duas imagens separadas? Bem, a razão para isso é devido ao tempo de download e também à qualidade da imagem. Se você pensa em ter um dispositivo móvel ao visitar este projeto em uma tela pequena, se tivermos uma conexão de rede móvel mais lenta, não queremos baixar a imagem grande. Em vez disso, seria muito mais rápido baixar esta versão menor. Do outro lado, se estamos usando um monitor grande, se fôssemos apenas incluir uma imagem pequena como esta, e então se estende para ser um tamanho maior, perderia muita qualidade. Para lidar com isso, vamos fazer uso de um elemento HTML chamado imagem. Isso nos permitirá fornecer várias fontes de imagem, e então o navegador pode decidir qual é o mais apropriado. Bem, para fazer isso, vamos incluir os elementos da imagem. Primeiro incluímos os elementos da imagem como um wrapper, ainda precisamos incluir a fonte da imagem, e logo acima disso, vamos usar o elemento fonte HTML. O elemento de origem não inclui uma tag de abertura e fechamento. Em vez disso, passamos alguns atributos. O primeiro vai ser uma consulta de mídia. Uma consulta de mídia também é algo que vamos usar dentro de nosso CSS para aplicar estilos diferentes para diferentes tamanhos de tela. Mas quando usado com a fonte, isso nos permitirá fornecer imagens de tamanho diferente para diferentes tipos de mídia ou dispositivos. Um dos casos de uso mais comuns para uma consulta de mídia é alternar o conteúdo em uma determinada largura de tela. Se passarmos dentro dos colchetes, uma largura mínima de tela de 1100 pixels. Esta seção específica só será aplicada quando o navegador tiver mais de 1100 pixels de largura. Em seguida, uma vez que é sobre o tamanho, podemos então usar o atributo de conjunto de origem, ele fornece este caminho de arquivo para a nossa imagem grande. Há muitas condições de mídia diferentes que podemos adicionar. Podemos incluir a largura máxima. Podemos verificar a orientação do dispositivo para ver se é paisagem ou retrato. Podemos verificar a proporção de pixels de um monitor, e muitas outras coisas diferentes. Isso vai aplicar nossa imagem maior se a largura do navegador for superior a 1100 pixels. Mas se a largura do navegador estiver abaixo deste tamanho, ele vai cair de volta para este elemento de imagem apenas aqui, que inclui a versão pequena. Se quiséssemos, poderíamos inserir quantos elementos de origem quiséssemos. Poderíamos configurar diferentes condições de mídia, e também apontá-las para imagens diferentes também. Sobre isso, nossos dois tamanhos de imagem estão bem. Assim como uma nota lateral, sempre precisamos incluir este elemento de imagem. Isso ocorre porque este é, em última análise o elemento que sempre será renderizado dentro do navegador. Tudo o que estamos fazendo é mudar as diferentes fontes de imagem. Certifique-se de que isto esteja sempre incluído. A maneira como podemos testar isso, se dissermos isso, é atualizar o navegador e abrir as ferramentas do desenvolvedor com o botão direito do mouse, e inspecionar, e na guia Rede. O que precisamos primeiro fazer aqui é reduzir o navegador para um tamanho de tela pequeno que está abaixo de 1100 pixels, em seguida, atualizar. partir daqui, temos a versão pequena de nossa imagem baixada, e isso é 361 kilobytes. Se tornarmos isto mais largo e ultrapassarmos os 1100 pixels, é um pouco maior. Recarregar, e agora em vez disso isso vai baixar nossa versão maior, que é o College-jpeg. Como você esperaria, este é um tamanho de arquivo maior, por isso é melhor baixar a imagem menor nos dispositivos móveis menores. 16. Estilizando o cabeçalho: Agora sabemos que isso está funcionando, podemos fechar isso e passar para o nosso estilo, então em nossa folha de estilo personalizada, que é o styles.css. Nós já temos nossa família de fontes baixada do Google Fonts, e podemos adicionar isso dentro da seção HTML. Vou mover isto para cima e, em seguida, remover o início. O que eu vou fazer aqui é definir a família de fontes como um tamanho base de 10 pixels. Agora isso não significa que eu quero que o texto dentro do projeto seja todos os 10 pixels. Isso só vai fornecer um cálculo fácil, que veremos em apenas um momento. A seguir, a cor. Isso se aplicará a todos os textos. O valor RGB será 62 para o vermelho, 61 para o verde e 61 para o azul. Verifique se isso se aplicou bem. Agora vemos a nossa diferença, a fonte foi aplicada. A cor da fonte base não foi aplicada a todos os links. Mas resolveremos isso em um segundo. Em seguida, a seção de cabeçalho. A seção de cabeçalho, vamos fazer uso do tipo de exibição de flex. Nós vamos alternar em torno da direção flexível da linha e coluna com base no tamanho da tela. O que vamos fazer neste vídeo é reduzir o navegador para uma pequena tela, e na versão móvel, assim como vemos aqui. Queremos que este conteúdo seja exibido como uma coluna. Então, mais tarde, vamos aplicar uma consulta de mídia para mudar a direção flexível para ser linha. Mas, por enquanto, vamos ficar com a exibição de tela pequena. Defina a direção flexível para ser coluna. Em seguida, alinhe também itens no centro, que se centralizará para isso da esquerda para a direita. O título lateral é enrolado em um título de nível um. Então vamos assim e mudar o cursor para ser um ponteiro. Isso mudará cada vez que passarmos o mouse sobre esta seção. Depois disso, o tamanho da fonte e o valor de duas rems. Um rem é um tamanho relativo, e isso significa que ele vai crescer maior ou menor, dependendo da família de fontes base, que foi configurada no HTML. Dois rems significarão que este é o dobro do tamanho, então este será de 20 pixels. Se definirmos isto para ser um rem, isto seria então 10 pixels. Ter este tamanho base definido para ser um bom número arredondado, torna realmente fácil calcular o tamanho exato da fonte que queremos. Por exemplo, se quiséssemos que esse tamanho fosse de 16 pixels, poderíamos definir isso como 1,6 rems. A alternativa é que temos que ser 16 pixels. Então, se quiséssemos que isto fosse 18 pixels aqui embaixo, os cálculos seriam um pouco mais complexos. Vamos manter isto como 10. Isso também precisa ser o tamanho da fonte, não a família de fontes, que você já definiu acima. Agora, se salvarmos isso, tudo se aplicará corretamente. Em seguida, podemos começar a trabalhar nesses links. Este é o elemento “a”. Primeiro de tudo, a decoração do texto, que não é nenhum, e isso removerá o sublinhado de todos os nossos links. Também queremos que a cor do link seja a mesma que esta cor apenas aqui. Para fazer isso, também precisamos definir a cor. Poderíamos copiar esta cor e adicionar isto aqui dentro. Ou, em vez disso, poderíamos herdar isso, e isso herdará a cor dos pais, que é este aqui. Refresque. Isso também se aplica a todos os links e também ao título de nível 1, que também é envolvido em um link. Para também alterar o equilíbrio pairar sobre qualquer um desses elementos, podemos adicionar um estado de foco. Então um e então você cólon. Podemos adicionar o estado de foco, que vai mudar a cor do texto cada vez que o cursor do mouse se move sobre esta seção. Você pode brincar com cores se quiser. Eu vou para 104, 114 e depois 166. Passando para os links, se olharmos para a versão final, o que queremos fazer aqui é remover os pontos ou as balas de nossos itens de lista. Também coloca em toda a página e também fazer o tamanho da fonte um pouco maior. Do invólucro, que é a lista desordenada, a maneira como podemos remover essas balas é definir o estilo da lista como nenhum. Para nos permitir centralizar corretamente todos esses itens, também podemos mover o padrão do navegador. Dentro das ferramentas de desenvolvedor, se clicarmos no inspetor e, em seguida, passar o mouse sobre a lista não ordenada, podemos ver mais à esquerda temos esta seção verde que é preenchimento. Isso foi aplicado pelo navegador ou Macondo moveu isso definindo o valor do preenchimento como zero. Oh, outra lista. Isso agora foi removido. Em seguida, vamos fazer o tamanho da fonte um pouco maior. Em seguida, podemos selecionar os itens de lista e lugares horizontalmente em toda a página. Para fazer isso, defina o tipo de exibição como flexível. Por padrão, a direção flexível será linha colocando esses elementos na página até os itens da lista. O tamanho da fonte de 16 pixels, que podemos calcular rom em 1.6 rems e também para aplicar algum espaço entre cada um destes. Essa é uma margem de zero na parte superior e inferior, e depois 10 pixels à esquerda e à direita. Isto é tudo o que precisamos fazer para a seção de cabeçalho até chegarmos à tela maior. Até esta seção de imagem e podemos segmentar a imagem com img. Em seguida, defina a largura da imagem. Queremos 100 por cento. Isto agora irá certificar-se de que a nossa imagem não vai esticar mais longe do que na largura do navegador de anteriormente quando adicionamos o HTML. Vamos voltar a esta secção. Damos a isso uma classe de aplicação. Esta classe vai nos permitir selecionar esta seção completa e usar isso como um ponto de referência para centralizar esta seção e logo abaixo, e fazer isso. Esta é uma aula, então usamos o ponto. Para tornar este um ponto de referência para o nosso texto, precisamos definir o tipo de posição para ser relativo. Vamos dar uma olhada no que isso faz nele só um segundo. Não devemos ver nenhuma diferença no momento. Mas a diferença se tornará aparente quando selecionarmos essa sobreposição de texto. Esta foi a classe que damos a esta seção. Agarra isto. Em seguida, para fazer este trabalho, nós também definir um valor de posição para esta seção para ser absoluta. Se atualizarmos, então não parece diferente no momento. Mas o que efetivamente fizemos aqui foi retirar esta seção de sobreposição de texto do fluxo do resto do conteúdo. Agora precisamos dizer ao navegador exatamente onde queremos que isso seja posicionado. Podemos fazer isso adicionando os valores superior, direito, inferior e esquerdo na nossa folha de estilos. O que queremos fazer é posicionar este 50% da esquerda da imagem e, em seguida, 50% do topo. O valor esquerdo de 50 por cento e o mesmo para o topo. “ Atualizar”. Agora estamos chegando em algum lugar, isso está quase no centro da imagem. A razão pela qual esses valores de 50 por cento foram aplicados a partir da imagem é porque definimos o tipo de posição para ser relativo. Quando definimos uma seção, assim como esta para ser absoluta, quando definimos os valores para posicionamento, ele fará referência a todos esses tamanhos no recipiente relativo mais próximo. No nosso caso, o recipiente relativo mais próximo é o wrapper da seção da imagem. Se não tivéssemos isto aqui dentro, vamos dar uma olhada no que aconteceria. “ Atualizar”. Agora, uma vez que não temos um contêiner relativo definido nós mesmos, ele usará a seção do corpo como uma referência. O valor esquerdo de 50 por cento irá empurrar isso acima da metade da largura do corpo, e então 50% do topo. Mas seu recipiente relativo é realmente importante. Como podemos ver aqui, a centralização ainda não está bem no meio. Podemos ver por que melhor se abrirmos as “ Ferramentas do desenvolvedor ”, clicar no “Inspetor” e selecionar nossa seção de sobreposição de texto. Podemos ver melhor com esta seção de sobreposição de texto realçado quando definimos a posição em usando o topo e a esquerda. Isso posicionará este elemento a partir do canto superior esquerdo. Em vez de fazer referência a isso a partir do canto superior esquerdo, queremos que esta div seja referenciada a partir do centro. A maneira como podemos fazer isso é usar uma propriedade de transformação CSS, que significa que podemos mover esse elemento 50% da largura para a esquerda e também para cima em 50% também, significa efetivamente que nos movemos no ponto de referência canto superior esquerdo para o centro deste elemento. Para fazer isso, definimos a transformação CSS e, em seguida, fazer uso de Translate, que vai nos permitir mover a posição de quaisquer elementos HTML. Em seguida, colocamos dentro de dois valores, que é o eixo x, que é da esquerda para a direita, e então o eixo y, que é de cima para baixo. Se definirmos o eixo x para ser negativo 50 por cento e também o mesmo para o eixo y. Este “Refresh. Agora esta div completa foi transformada no centro. A única coisa que precisamos fazer para equilibrar isso é definir o alinhamento do texto para estar no centro. Podemos fazer isso e o invólucro, agora que parece muito melhor. Só para recapitular, se você ainda puder garantir que quando definirmos os valores esquerdo e superior, você diminuirá estes do lado de fora da imagem. Mas em vez de usar o centro do elemento do ponto de referência, ele usa o canto superior esquerdo. Isso significa que o elemento ainda não aparece no centro da imagem. Temos que mover isso manualmente em 50% nas direções vertical e horizontal. Este é todo o posicionamento todo configurado. O que vamos fazer agora é definir as cores e também o tamanho da fonte. O tamanho da fonte de 20 pixels, que é duas rems. O fundo do RGBA, 40 para o vermelho, 40 para o verde, 40 para o azul e, em seguida, o quarto valor é o canal Alpha. Esta é a opacidade da CE através do valor. Se definirmos isso para 0,7, isso será 70% transparente. “ Atualizar.” Este valor Alfa significa que o nosso fundo será ligeiramente transparente. A imagem começará a aparecer. Se definirmos isto para ser um, isto seria totalmente opaco, significa que não podíamos ver nada a passar. O raio da borda vai nos dar um bom canto arredondado de três pixels, que você pode ver em todos os quatro lados. Em seguida, algum preenchimento para dar-lhe algum espaçamento dentro de duas rems na parte superior e inferior, e em seguida 10 rems na esquerda e direita. Finalmente, a cor da fonte que eu vou usar 195.191.191. O estilo final e propriedade para este vídeo vai ser este botão “Aplicar aqui. O elemento botão, para tornar este tanto a versão final, podemos remover a cor de fundo, adicionar uma borda, alguns cantos arredondados para também coincidir com esta seção de sobreposição. Então, finalmente, o estado de foco do botão, remova o fundo definindo isso para não ser nenhum a borda, a largura de dois pixels, em seguida, a cor da borda de RGB, 169, 252 , 169, então três pixels de raio de borda, que será uma correspondência para esta seção de sobreposição de texto e atualizar o navegador. Estamos quase acabando com isso. Nós temos a borda, mas nós só queremos ter certeza de que a cor do texto também está combinando e a maneira que podemos fazer isso é também definir a cor como a seção acima, ou nós também podemos herdar isso, assim como fizemos com o links. Isso agora herdará a cor do pai. Finalmente, o estado do mouse para o botão, então o mouse vai mudar essa cor, e também assim como a versão final, ele vai torná-lo um pouco maior cada vez que o usuário passar o mouse sobre. A maneira como podemos fazer isso é selecionando o botão e o estado do mouse. Podemos então modificar a cor da borda para ser um valor RGB de 220, 237, 255. Então, novamente, podemos fazer uso da propriedade transform. Ao invés de selecionar traduzir, que usamos aqui, outro método que podemos usar é escalar o elemento. Isso significa que podemos tornar os elementos maiores ou menores. Por exemplo, se quisermos que seja exatamente o mesmo, este seria um. Não vejo diferença aqui. Se quiséssemos que fosse metade do tamanho, seria 0,5. Mas vou tornar isto um pouco mais sutil. Vou definir isto para 1.05. No botão real, também podemos definir o cursor para ser um ponteiro. Vamos verificar isso. Temos um cursor, a transformação está ocorrendo. Também estou mudando a cor da borda. Agora temos o conteúdo da seção de cabeçalho tudo no lugar e também o estilo CSS para a exibição de tela pequena. Voltaremos a isso mais tarde e faremos algumas pequenas alterações para uma visão maior. Mas a seguir, vamos continuar com o projeto e adicionar um pouco mais de conteúdo. 17. Seção de cursos populares: Bem-vindos de volta à próxima seção. Vamos continuar movendo para baixo com o nosso projeto e criar a seção de grade logo abaixo desta imagem de cabeçalho. Este é o único, se você esticar isso, vai ser um layout estilo grade com todas as seções do curso popular. Isso fará uso do layout de grade CSS e isso vai nos permitir fornecer todas as seções lado a lado com uma lacuna entre e também para baixo para a exibição de tela pequena. Isso será transformado para ser a largura total da tela com a exibição de tela menor. Eu também vou corrigir este erro de digitação de mais cedo também. No HTML, esta seção vai ser embrulhado nos elementos da seção. Em seguida, um título de nível 3, que vai ser o título de Cursos Populares. A classe para o nosso CSS vai ser cursos-título. Então, abaixo disso, uma nova seção div, que será o contêiner para todos os nossos cursos no formato de estilo de grade. Então, já que estamos trabalhando com a exibição de tela pequena, vamos ter certeza de que todos os nossos itens estão empilhados verticalmente. Então, mais tarde, vamos mudar o layout para ser um estilo de grade. Esta primeira div vai ser o wrapper para todos esses cursos. Então vamos dar uma aula de cursos. Em seguida, uma nova div para cada uma de nossas seções que irá conter a imagem e também o texto. Este vai ter uma classe de grid-item. Agora precisamos fazer para cada um desses itens de grade é selecionar a imagem correta e também colocar no texto. Seu primeiro, este é o law.jpg. Você pode adicionar todo o texto. Então, abaixo disso, o elemento p para o nosso texto de lei. Para salvar um pouco de digitação, você pode digitá-los se quiser, mas eu vou apenas duplicar isso para cada um de nossos itens. O segundo é a imagem de construção, todo o texto, o texto a ser exibido. Então o próximo será para a nossa engenharia. O quarto é para a ciência. Este é um só aqui. Número 5 é o arquiteto. Então, por último, temos o negócio. Vamos salvar isso e ver onde estamos dentro do navegador. Refresque. Então temos direito, construção, engenharia, ciência, arquiteto e negócios, e todas as imagens corretamente ligadas. Como seria de esperar, isso não parece muito bom se esticarmos o navegador, mas por enquanto, vamos nos concentrar nessa primeira abordagem móvel. Para a versão final. Não precisamos fazer muito estilo para essa exibição de tela pequena, já que as imagens já estão esticadas para ter a largura total da tela. O que precisamos fazer é aumentar o tamanho da fonte e também adicionar um efeito de focagem também. Vamos começar selecionando nosso item de grade individual. Em seguida, podemos alinhar o texto no centro e fazer o tamanho da fonte maior. Agora no fundo, botão inferior, seu rapper era o item da grade. Selecione o texto. Em seguida, você pode empurrar isso para o centro e também definir o tamanho da fonte para ser 1.8rems. Bom, agora parece melhor. Em seguida, aplicaremos o efeito de pairar. Quando o mouse passa o mouse sobre cada uma dessas seções. Para isso, poderíamos aplicar muitos efeitos diferentes, mas tudo o que vou fazer é definir o brilho e também a escala. Mais uma vez, aplicamos isso à grade completa, que tem a classe de grid-item. Tenho o efeito de pairar. Em seguida, podemos aplicar um filtro CSS onde vamos ajustar o brilho. O brilho é um valor entre zero e um. Então, um zero. Isso vai deixar a seção muito escura. Se definirmos isto para ser um, este é apenas o estado original. Só para dar uma pequena mudança sutil, vamos definir isso para 0,9, tornando-o um pouco mais escuro cada vez que passarmos o mouse sobre essas imagens. Além disso, também uma transformação onde vamos definir a escala para ser 1.01. Finalmente, o cursor do ponteiro por. Além disso, nossa transformação também está funcionando se passarmos o mouse sobre qualquer uma dessas seções. Só para terminar esta seção, precisamos trabalhar com o título dos cursos populares. Se rolarmos para cima, isso estava contido em um título de nível 3. Vamos pegar isso, H3. Tal como acontece com outros tipos de títulos, também temos alguma margem padrão do navegador, que podemos remover definindo isso como zero. Se atualizarmos, isso agora remove a margem da parte superior e inferior. Então agora estamos livres para adicionar nosso próprio espaçamento de 2rems na parte superior e inferior e zero na esquerda e direita. O alinhamento de texto do centro e também o tamanho da fonte. Isso também aumenta para 1,8rems. Bom. Podemos ver que o cabeçalho de nível 3 é negrito por padrão. Se quisermos, também podemos definir o peso da fonte para ser normal. Isso removeria o efeito negrito. Bom. Esta é a nossa seção agora preenchida para a visualização móvel. Mais tarde, vamos voltar a isso e transformá-lo em um layout estilo grade com uma visão maior. Mas, por enquanto, está tudo bem. Continuaremos em seguida com as seções restantes. Vemo-nos no próximo vídeo. 18. Conteúdo final em HTML: Movendo-se para baixo abaixo desta seção de grade que você criou nos vídeos anteriores. Vamos acrescentar que o resto do conteúdo HTML que precisamos para este projeto na versão final, assim como aqui. Esta é a seção de esportes, que vai ter a imagem à esquerda e o texto à direita, e depois a área de rodapé na parte inferior. Tal como acontece com as outras secções, isto também será totalmente responsivo. Se reduzirmos isso para uma tela móvel, o conteúdo será empilhado verticalmente e também colocado na parte superior da seção de rodapé. Este vídeo, vamos apenas criar o conteúdo HTML e no próximo vídeo, vamos adicionar o estilo CSS para fazer isso parecer bom. Depois disso, adicionaremos algumas consultas de mídia para fazer isso parecer bom na tela maior. Vamos voltar para o nosso index.html e abaixo da última seção que criamos, criar mais uma seção. Isso vai ter a classe de esportes. Isto é para a seção de esportes. Isso vai ser bem simples. Ele vai ter apenas uma div no topo que vai conter uma imagem. Em seguida, um segundo que irá conter o texto. Tendo essas duas seções abaixo, eu deveria usar o CSS flexbox para controlar o layout em diferentes tamanhos de tela. A primeira div e depois a segunda div. O primeiro vai conter uma imagem. Uma imagem que precisamos foi fornecida na pasta de imagens. Este é o volleyball.jpg e também o texto alt. Isto é tudo o que precisamos para esta primeira seção. Isto é bem simples. Na próxima seção, este será um título de Nível 3. Com o texto de descobrir nossas novas instalações esportivas. Se dermos uma olhada na versão final, veremos se passamos o mouse sobre a palavra aqui. Isto vai ser um link para uma página de instalações desportivas. Não temos esta página, mas você pode criar se quiser e fazer disso um link. Podemos envolver esta palavra dentro do elemento “a”. Coloque isso dentro e ele ainda está dentro do nosso h3. O texto fora daqui. Agora vamos vincular isso de volta à nossa página inicial. Sobre o navegador e role para baixo e agora podemos ver nosso novo conteúdo na parte inferior. Por padrão, esse tipo de layout parece bom em um dispositivo móvel porque a imagem é empilhada na parte superior do texto, então você não tem muito trabalho para fazer no CSS para esta seção. Mas, assim como a seção de grade acima, também precisamos aplicar alguns estilos diferentes. Mas isso quando chegarmos a uma tela maior. Em seguida, a área de rodapé logo abaixo da seção de esportes, o h3, e este é o texto de procurar mais. Em seguida, esta área de rodapé irá apenas conter uma série de links, que podemos colocar logo abaixo deste e também vamos colocá-los lado a lado na visão maior. Isso pode ir dentro de uma lista não ordenada e nosso primeiro item da lista, na verdade, todos os itens da lista serão colocados em um elemento de link. O primeiro é o texto da turnê virtual. Assim como com essas instalações esportivas, você também pode criar todas essas páginas extras se você quiser. Vou te dar mais prática na criação de novas páginas. Mas eu vou apenas copiar este item da lista e colar logo abaixo. O segundo link é para baixar nosso guia completo. Depois disso, este foi, ouvir depoimentos de estudantes. A quarta e última é, reserve uma sessão de informação. Bom. Dê isso um salvamento e também o navegador, na parte inferior , e por padrão, todos esses itens estarão em linha já que já criamos alguns CSS nos vídeos anteriores. Mas vamos corrigir isso no próximo vídeo. Tudo o que precisamos fazer para o último HTML é criar esta seção de direitos autorais na parte inferior. Podemos fazer isso em um elemento p simples. Precisamos desse texto da faculdade de tecnologia. Mas se olharmos para a versão final, vemos este símbolo de direitos autorais apenas aqui. Isto é o que é chamado de uma entidade HTML. Uma entidade HTML é um código curto que nos permite colocar em um símbolo dentro de nosso arquivo HTML. Se você quiser ver mais desses símbolos que estão disponíveis, há um site útil chamado unicode-table.com, e podemos procurar por muitos tipos diferentes de símbolos que você deseja, como emojis, podemos procurar setas e todos de personagens diferentes que precisamos em nossos projetos. Se precisássemos de uma flecha, por exemplo, poderíamos procurar por isso. Em seguida, podemos selecionar o que você deseja, e vamos ver mais à direita temos alguns códigos diferentes que podemos adicionar ao nosso projeto. Isto é o que precisamos para o nosso HTML apenas aqui, que é o e comercial e termina em ponto e vírgula. O código específico que precisamos para o símbolo de copyright é também começa com o e comercial é simplesmente a cópia da palavra seguida por um ponto e vírgula. Também nossos projetos, e podemos ver isso na parte inferior do rodapé. Este é agora todo o conteúdo que precisamos para este projeto, e no resto dos vídeos para esta seção. Estaremos nos concentrando no estilo e também acabamos de ver todas as regras CSS, os dispositivos de diferentes tamanhos. 19. Tela pequena final em CSS: O que temos até agora é todo o conteúdo HTML na tela. Nós terminamos as duas últimas seções, que é esta seção esportiva apenas aqui, e também a área do rodapé com os links para baixo na parte inferior. Este vídeo vai ser focado no estilo dessas duas novas seções. Lembre-se, a primeira seção da classe é esportes, e isso contém a imagem e também o texto. Vamos precisar centralizar o texto no meio da div, independentemente do tamanho da tela. Para tornar isso mais fácil, vamos adicionar uma classe a esta seção, o wrapper. Este será o texto desportivo. Salve isso. Sobre nossas folhas de estilo, a primeira coisa que eu vou fazer para esta seção é adicionar uma nova cor de fundo, vai ser bem simples. Eu só vou adicionar uma cor clara, que é eee. Mais para o navegador, esta é apenas uma cor cinza claro que irá apenas separar isso de mim outras seções. Em seguida, a classe que acabamos de adicionar, que era o texto esportivo, isso, precisamos que o tipo de exibição seja flexível, que nos permitirá definir a direção flex verticalmente e também horizontalmente. Isso permanecerá no meio da div, independentemente do tamanho da tela. Primeiro, apenas pelo conteúdo no centro. Em seguida, também alinhe itens no centro, tendo ambas as propriedades definidas. Isto significa que se tivermos a direção flexível para ser linha ou coluna, o texto será sempre centrado no meio desta div. Algum estofamento para fazer isso um pouco maior de dois rems. Mesmo com esse espaçamento extra, ainda vemos que o texto está centralizado verticalmente e horizontalmente. Podemos fazer esta posição de nível 3 um pouco maior. Vamos aplicar isso apenas à seção de texto esportivo. Pegue o título de nível 3 e aumente o tamanho da fonte para 2,2 rems. Só para enfatizar o link, você vê que eu vou fazer isso itálico e para fazer isso, podemos pegar essa seção em particular. Este era o link, só aqui estão a classe de itálico. Então podemos pegar isso no nosso CSS. Era uma aula, então usamos o ponto. Agora o que precisamos fazer aqui, é definir o estilo da fonte, dar a isso um valor de itálico. Lá vamos nós. Isto já foi aplicado. Isto é tudo o que precisamos fazer para esta seção, é bem simples. Agora podemos ir para a área do rodapé. Primeiro de tudo, pegue o elemento de rodapé, que é o wrapper. O que vamos ouvir aqui é alinhar todo o texto no centro da seção. Podemos alterar a cor de fundo e também a cor do texto também. Para começar, o alinhamento de texto do centro. Bom, faremos esses links empilhados verticalmente em apenas um momento, mas precisaremos aplicar isso à lista não ordenada. Antes de fazermos isso, continuaremos com a seção de fundo, que será um valor RGB de 62, 61, 61. Agora eu não posso ver o texto porque nossa cor do texto agora é a mesma que este plano de fundo que acabamos de definir. Para compensar isso, defina a cor para esta seção que será aplicada ao texto do ddd. Lá vamos nós. Também precisamos de algum preenchimento no fundo para nos dar algum espaçamento. Adicione algum valor de preenchimento na parte inferior de um rem. Em seguida, podemos selecionar a lista de rodapé não ordenada e certifique-se de que todos os links são colocados verticalmente na página. O rodapé é como a lista não ordenada dentro. Tudo o que precisamos fazer para isso é definir o tipo de exibição para ser igual a flex. Por padrão, a direção flexível é linha, então precisamos mudar isso para ser uma direção flexível da coluna. Assim como com a versão final, vamos mudar isso de volta para uma direção flexível da linha em um vídeo posterior. Eles atravessam a página na exibição maior. Agora vamos continuar com a exibição de tela pequena e adicionar algum espaçamento entre cada um desses links. Em seguida, o tamanho da fonte de 1.8 rems. A lista não ordenada também terá alguma margem padrão para que possamos remover isso. Podemos ver que assim que removemos isso, isso agora se aproximou de nosso título. Se apenas comentarmos isso e atualizarmos, podemos ver que há mais espaçamento aplicado na parte superior. Mas o espaço entre cada um desses elementos, precisamos direcionar o item da lista. Novamente, dentro da seção de rodapé, este preenchimento só se aplica a esta área. Lembre-se, nós não queremos que isso se aplique a todos os nossos itens de lista, uma vez que também temos esses itens na área de cabeçalho. Para isso, algum preenchimento é bom. Para que isso se aplique à parte superior e inferior, adicionaremos 1,6 rems para o primeiro valor e, em seguida, 0 à esquerda e à direita. Lá vamos nós. A última coisa que precisamos fazer para esta seção é aumentar o tamanho da fonte da área de direitos autorais. Dentro do index.html. Na parte inferior, aplicamos isso dentro do elemento P. Para o rodapé, recorte os elementos p e o tamanho da fonte. Vá para 1.6 rems. Tudo isso agora está concluído para a exibição de tela móvel. Nos próximos vídeos, começaremos a dar uma olhada em como podemos aplicar consultas de mídia em ambos os lados, que fará com que nosso projeto fique bem em todos os dispositivos de tela. 20. Consultas de mídia e estilização final em CSS: Para nos ajudar com a adição de um estilo e layout adicionais para nossa visão maior, vamos fazer uso de algumas consultas de mídia CSS. Uma consulta de mídia é uma maneira de aplicar diferentes propriedades CSS, com diferentes tipos de mídia. Com telas, podemos especificar quais tamanhos de tela queremos que isso se aplique. Se você quiser que eles se apliquem apenas a uma orientação paisagem ou retrato, se a resolução da tela for de alta densidade e muitas outras opções. Para fazer isso dentro de nossa folha de estilo, usamos a regra @media e, em seguida, vamos adicionar nossas condições dentro dos colchetes. Um comum é aplicar essas regras CSS somente se a largura da tela for um tamanho mínimo ou máximo. Assim como olhamos com as imagens responsivas, poderíamos definir algo como a largura mínima para um certo valor, como 900 pixels, e dentro dessas chaves, tudo o que precisamos fazer é escrever nosso código CSS exatamente como feito anteriormente. Em seguida, usando este exemplo, todo o CSS dentro daqui só será aplicado quando a largura mínima do navegador for 900 pixels de largura. Como mencionado, você poderia fazer coisas também, que são certamente largura máxima. Poderíamos definir a orientação. Isso é mais para dispositivos móveis ou portáteis, mas podemos verificar se o dispositivo é girado retrato ou paisagem. Temos uma pesquisa on-line para consultas de mídia CSS, se você quiser saber mais sobre os diferentes tipos disponíveis. Com este projeto, vou ficar com a largura da tela, pois isso é realmente geral e se aplica a muitos casos de uso diferentes. Tudo o que temos atualmente acima aqui, isso sempre se aplica à exibição de tela pequena. Então o que vamos fazer é substituir isso para a tela maior. Começando do topo do nosso projeto, novamente, nós apenas escrevemos este CSS como nós normalmente fazemos. Para este cabeçalho, se tornarmos isto um pouco mais largo, queremos que este ícone ou este logotipo apareça à esquerda. Então eles se conectaram à direita. Para fazer isso, se voltarmos para nossa seção de cabeçalho original, já definimos o tipo de exibição para ser flexível. Não precisamos definir isso novamente, já que já especificamos isso aqui. Mas o que precisamos fazer é substituir qualquer um desses valores que você deseja alterar. Uma das coisas que precisamos mudar é essa direção flexível. Ao invés de estar na direção da coluna como temos aqui, precisamos definir isso para ser uma linha. Vá até a nossa consulta de mídia. Vamos fazer isso primeiro. A direção flexível, a linha. Isso agora entra em vigor, já que atingimos o tamanho da tela de mais de 900 pixels. Encolhendo isso para baixo, podemos ver uma vez que vamos abaixo dos 900, agora está invertido de volta à nossa direção flexível original. Para adicionar nosso espaçamento entre, podemos definir a propriedade justify content e usar um valor chamado espaço entre. Isso só distribuirá todo o espaço em branco disponível entre todos os elementos. Isso funciona não importa quantos elementos temos em nosso cabeçalho. Se tivéssemos três elementos diferentes, todo o espaçamento seria aplicado igualmente entre as três seções. A última coisa a fazer para este cabeçalho, se olharmos para a direita temos algum espaçamento para a direita de nossos links e também precisamos combinar isso no lado esquerdo. Volte para o topo. Role para baixo até nossos itens de lista e podemos ver que adicionamos 10 pixels de margem à esquerda e à direita, Seu saldo está para cima, vá para a nossa seção de cabeçalho e, em seguida, podemos definir este 10 pixels de margem para aplicar somente no lado esquerdo. Salve, e vá para o navegador. Isto agora coincide com os dois lados. Em seguida, até a seção de sobreposição, não temos muito o que fazer para isso. Já configuramos uma imagem responsiva em segundo plano. Tudo o que vou fazer é o tamanho da fonte e tornar esta seção um pouco maior. Estas são a classe de sobreposição de texto. O tamanho da fonte. Vamos dar 2.2 rems uma tentativa. Torná-lo um pouco maior, 3.4. Também podemos aumentar o valor [inaudível] para adicionar mais espaço no interior. Vamos para oito rems. Rolando para baixo até nossa seção Cursos populares, o que precisamos fazer para isso é definir o tipo de exibição CSS para ser igual à grade e isso nos dará esse layout de estilo de grade que vemos na versão final. Para fazer isso, primeiro precisamos selecionar os elementos do pai para todos os nossos itens de grade. Isso tem essa classe de cursos. Em seguida, cada seção individual tem a classe de item de grade. Primeiro de tudo, vamos para os pais, que tem a classe de cursos, e então definimos o tipo de exibição para ser grade. Se recarregarmos o navegador, não vemos nenhuma alteração no momento. Isso ocorre porque precisamos dizer ao navegador exatamente quantas colunas e linhas queremos usar para criar nossa grade para as colunas. Precisamos adicionar o modelo de grade, colunas propriedade. O número de valores que adicionamos aqui determina quantas colunas temos em nossa página. A versão final tem três colunas diferentes. O que podemos fazer é definir três tamanhos separados, como 200 pixels, 100 pixels e 300. Refresque. Podemos ver aqui para a nossa primeira coluna, temos o valor de 200 pixels de largura. Temos então 100, e depois 300, que estabelecemos aqui. Poderíamos também tornar estes o mesmo valor também, ou em vez disso, para tornar as coisas ainda mais fáceis, podemos fazer uso de uma função de repetição. Então podemos passar em dois valores. O primeiro é o número de colunas que você deseja criar e, em seguida, o segundo valor é a largura de cada uma de nossas colunas. Se quisermos que cada uma dessas colunas tenha uma quantidade igual de largura, podemos definir isso para ser 1fr. A unidade fracionária quando usada com a grade significa que ela calculará automaticamente a largura das fotos e certificar-se-á de que todas as nossas três colunas são iguais. Atualize e isso agora entra em vigor. Podemos fazer exatamente o mesmo para linhas de modelo de grade e podemos definir a altura exata que queremos para cada uma dessas seções. Mas não precisamos fazer isso porque se adicionarmos as colunas como temos aqui, cada vez que adicionamos uma nova seção ou um novo item de grade, isso irá fluir automaticamente para a próxima linha. Se você quiser algum espaço entre cada um desses itens de grade, o que também podemos adicionar é a lacuna da grade. Defina isso como qualquer valor CSS, como duas rems. Essa lacuna de grade só aparecerá entre cada um desses itens de grade. Não se aplica à esquerda e à direita ou à parte superior e inferior. Se você quiser aplicar algum espaçamento ao redor da borda externa, precisamos aplicar alguma margem ou preenchimento. Isto é o que eu vou fazer no fundo. Diz algum preenchimento, apenas para a parte inferior desses elementos e vamos mantê-lo o mesmo de dois rems atualizar. Ao lado do estilo para cada um desses cursos, e cada um deles tem a classe de item de grade. Para isso, coloque uma borda em torno de cada um de um pixel, uma linha sólida e a cor do cinza claro. Podemos contornar as esquinas com um raio de fronteira. Apenas um pequeno valor é bom, então vamos tentar três pixels. Isto parece bem. O que queremos fazer, podemos ver o raio da borda na parte inferior, mas no topo, também queremos combinar os cantos arredondados para esta imagem de fundo. Onde podemos fazer isso é selecionar novamente o item de grade e, em seguida, aplicar a todas as imagens nesta seção. Podemos definir as propriedades de raio de borda individuais, e podemos adicionar em quatro valores individuais do canto superior esquerdo, superior direito, inferior direito e inferior esquerdo. Em primeiro lugar, o canto superior esquerdo de três pixels. Três pixels no canto superior direito, e não queremos que o canto inferior direito ou inferior esquerdo seja arredondado, então defini os dois últimos valores como zero. Mesmo isso iria arredondar os cantos em todos os quatro lados do nosso item de grade. Depois disso, temos a seção de esportes logo abaixo, e para isso, vamos fazer uso da direção flexível. Cole a imagem ao lado deste texto. Se passarmos para o nosso índice ou html, e rolar para baixo é seção completa tem a classe de esportes, definir o tempo de exibição para ser flexível. Lembre-se, quando estamos fazendo uso da caixa flexível, a direção flex padrão vai ser linha. Não precisamos incluir isso, já que esse é o padrão, isso colocará automaticamente nosso conteúdo em uma fileira. Se reduzirmos o navegador, podemos ver que este tipo de exibição de flex só se aplicará nesta exibição de tela grande. Olhe atentamente para baixo na parte inferior da imagem, podemos ver esta linha branca por aqui. Isso é algo que pode ser [inaudível] se você está apenas começando a construir sites. Também pode ser difícil de diagnosticar, uma vez que o espaçamento não é aplicado com qualquer margem ou preenchimento. Na verdade, eu escrevi uma postagem de blog sobre isso, e se formos para o meu site, podemos ver exatamente por que esse espaçamento branco será aplicado. Esta imagem também tem o mesmo problema de espaço em branco na parte inferior. Isso acontece porque, por padrão, um elemento de imagem é dito para ser inline. Elementos incorporados aparecerão em toda a página por padrão. Se configurarmos 10 imagens diferentes, elas tentariam ocupar todo o espaço disponível na mesma linha e, em seguida, passar para a próxima linha. O oposto é um elemento de nível de bloco, e isso aparecerá automaticamente em uma nova linha. A razão pela qual o navegador adiciona esse espaço em branco na parte inferior dos elementos embutidos é porque muitos elementos embutidos, como uma extensão, também podem conter texto. Se considerarmos este texto, que você vê aqui com a letra P e também o G cai abaixo da linha de base do resto do texto, e é esta seção inferior que é chamada de descendente, que é a razão por que o navegador irá adicionar algum espaço nele na parte inferior. Se o navegador não adicionar espaço na parte inferior dos elementos, a parte inferior deste P e também o G, talvez cortado. Mas, no nosso caso, estamos usando uma imagem em vez de texto, então não precisamos permitir esse espaço em branco na parte inferior. Há algumas maneiras diferentes de contornar estes, e uma das maneiras mais simples é usar definir o tipo de exibição para ser bloco. Isso substituirá o tipo embutido que temos por padrão, atualizar, e agora significa que o navegador não permite o espaço em branco na parte inferior deste elemento. Isso é apenas algo para ter cuidado quando você vê algum espaço em branco na parte inferior de uma imagem. Voltando à consulta de mídia e logo abaixo da seção de esportes, precisamos ter certeza de que tanto a imagem quanto a área de texto tenham uma quantidade igual de espaço ou para ser mais específico, uma quantidade igual de largura. Para fazer isso, podemos pegar nossa seção de esportes, e a caixa flexível tem uma propriedade flex que nos permitirá aplicar uma quantidade igual de largura a ambos os elementos filho. Primeiro de tudo, pegue o invólucro, que é a seção de esportes, e então qualquer div que siga imediatamente esses elementos, defina o valor flex para ser igual a um, e uma vez que este valor flex de um será aplicado a você ambos os nossos filhos div, então tanto este como este, agora você deve ter uma quantidade igual de espaço. Se nós apenas definir o primeiro div tem o valor flex de um e nós definimos o 2º div para ter um valor flex de 2, o 2º div tentaria ocupar duas vezes o espaço disponível como o 1º div, mas como nós temos estes como valores iguais, eles não devem ser refletidos dentro do navegador. Mas ainda vemos que a imagem é um pouco menor do que esta seção sobre a direita. Vamos para as ferramentas do desenvolvedor. Selecione esta seção aqui, e a razão pela qual esta área verde está ao redor do lado de fora desta div. Selecione isso e sobre a área computada, podemos ver que temos 20 pixels de preenchimento aplicados a todos os quatro lados. Para fazer isso igual, poderíamos remover este preenchimento para a tela grande. Seção tem a classe de textos esportivos, então ele poderia ou remover isso dentro da consulta de mídia ou poderíamos rolar para a seção de texto de esportes original, e nós só poderia aplicar este preenchimento na parte superior e inferior. Obter o valor de zero à esquerda e à direita, atualizar, e isso agora parece muito mais igual. Vamos ver como isso parece na tela pequena. Isso ainda parece bom, já que já centralizado detectar usando a caixa flexível. A última seção a cuidar é a área do pé. Isso vai ser bem simples. Nós só precisamos pegar as seções de rodapé na lista ordenada e mudar a direção flexível para ser linha. Esse rodapé, lista não ordenada, direções flexíveis para ser igual a linha, e adicionar o espaço é igualmente em toda a página, vamos fazer uso de justificar conteúdo. Selecione o espaço uniformemente, e lá vamos nós. Nós também podemos apenas verificar isso parece bom na tela pequena. Do topo, ainda temos todas as propriedades CSS originais que aplicamos nos primeiros vídeos. Agora, se esticarmos o navegador para mais de 900 pixels de largura, nosso conteúdo será ajustado para caber na tela maior. Temos conteúdo lado a lado, temos uma seção de grade para nossos cursos, algum texto maior e também algum espaço adicional também. Espero que você tenha gostado de construir um projeto responsivo, fazendo uso das consultas de mídia CSS, imagens responsivas e também tamanhos relativos para nossos textos. Temos mais um projeto para passar para onde vamos fazer uso de uma estrutura. Vejo você na próxima seção. 21. Introdução ao Bootstrap e configuração: Olá a todos, e bem-vindos de volta ao Aprender HTML e CSS construindo 3 projetos reais. Parabéns por chegar ao terceiro projeto. Até agora nós construímos um site estático e também um site totalmente responsivo. Em seguida, queremos passar para um projeto de hotel, que será construído com o popular framework Twitter Bootstrap. Este é um olhar para o que queremos construir. É novamente um site responsivo completo, que significa que podemos reduzi-lo e ele fica bem em diferentes dispositivos. Vai incluir um carrossel deslizante mostrando imagens diferentes. Haverá uma caixa de pesquisa e navegação na área superior. Também incluiremos os menus suspensos nas várias seções abaixo. Vou mostrar como podemos construir um site bonito como este muito rápido e muito fácil usando Bootstrap. A primeira coisa que precisamos fazer é se formos para getbootstrap.com. Vamos dar uma olhada no site, mas primeiro vamos apenas clicar no botão “Download Bootstrap” e no link Bootstrap à esquerda. Vamos dar uma olhada no site enquanto ele está baixando. Na seção de introdução há vários bits de informação, modelos que você pode usar para começar rapidamente. Ele mostra todas as estruturas de arquivos e pastas para os diferentes downloads que você pode usar e também o modelo básico. Este será o modelo que usaremos para nossa página de índice. Mais abaixo, há mais exemplos e pequenos modelos que você pode usar para começar rapidamente. De volta ao topo, há também a seção CSS. Agora, o CSS oferece uma visão geral de todos os diferentes componentes disponíveis. Podemos olhar para tabelas, formulários, botões, por exemplo, e se você apenas clicar em um desses, ele mostra como fazer um botão no Bootstrap. É muito simples e todo o CSS já está pré-compilado. Instantaneamente, você terá um site bonito. Na seção de componentes, podemos olhar para os glificons. Bootstrap vem pronto com todos esses ícones disponíveis para usar sem custo extra. Há também exemplos de barras de navegação e os diferentes componentes, como rótulos e cabeçalhos. Vamos olhar para o código de exemplo. Muito disso é bastante semelhante ao que já aprendemos. Nós só precisamos aplicar as classes Bootstrap para vinculá-lo ao CSS. Vamos dar uma olhada no JavaScript incluído. Agora o JavaScript fornece todos os tipos de efeitos. Há coisas como transições, e o que vamos ver é o carrossel. Usaremos o código abaixo para adicionar o carrossel ao nosso site. Bootstrap já deveria ter baixado. Se você for para os downloads, nós descompactamos. Se apenas copiarmos a pasta completa, e se voltarmos para o projeto, e colarmos isso no projeto e renomearemos isso. Vamos chamar esta pasta MyHotel, e se abrirmos a pasta, teremos que arrastar nossas imagens para lá. Você já deve ter baixado as imagens necessárias para este projeto. Caso contrário, volte e baixe-os agora. Como a maioria dos arquivos e pastas configurados para o projeto Bootstrap, só precisamos adicionar a página de índice. Se você entrar em seu editor de texto e precisaremos arquivar e abrir a pasta, e em nossa área de trabalho, temos os projetos. Eu vou para MyHotel, e a primeira coisa que precisamos fazer é ir para Arquivo e Novo, e vamos salvar isso como nossa página de índice, index.html. Vamos voltar para o site do Bootstrap, e se voltarmos para a seção de conceitos básicos, se rolarmos para baixo até o modelo básico, e vamos apenas copiar isso, e então vamos colar isso em nossa página de índice. Como você pode ver, se olharmos para cima e para baixo, ele inclui toda a mesma estrutura que incluímos nos dois primeiros sites, e há um link para as folhas de estilo Bootstrap. Há também a tag viewport para capacidade de resposta. A primeira coisa que faremos é mudar o título da página e chamaremos de MyHotel. O link para o CSS Bootstrap já está incluído, então não precisamos fazer nada com isso ainda. Também está incluído por padrão o Shiv HTML5, que incluímos nos dois primeiros projetos, modo que está tudo pronto. Vamos dar uma olhada nisso na prévia. Essa é a estrutura Bootstrap toda configurada e pronta para ir. Em seguida, veremos adicionar a barra de navegação. 22. Adicionando a barra de navegação responsiva: Olá a todos, e bem-vindos de volta. Nós temos o nosso projeto Bootstrap tudo configurado agora. O que queremos fazer é começar a trabalhar na barra de navegação superior lá. Se começarmos excluindo o cabeçalho Hello, mundo. Voltamos para getbootstrap.com. Se selecionarmos a seção Componentes na parte superior, precisamos olhar para baixo na lista e encontrar a seção Navbar. O que vamos fazer é copiar o Navbar padrão lá. Se você copiar o codificador lá, eu colarei isso no topo da seção do corpo. A primeira coisa que queremos fazer é mudar o contêiner de fluido apenas para o contêiner padrão. Vou excluir os comentários também, e como você pode ver, o Bootstrap fornece comentários no final de cada fechamento lá, para que possamos ver exatamente onde estamos. Então a primeira coisa que eu quero fazer, se olharmos para o nosso exemplo, precisamos colocar o nosso nome MyHotel lá e começar quatro links no topo. Atualmente, a Marca é o texto de espaço reservado. Então vamos mudar isso para MyHotel. Os quatro links no topo, o que precisamos fazer é se procurarmos a lista não ordenada, que está lá, e os itens individuais da lista que está lá. O primeiro, se mudarmos o texto do link para “Fique conosco”. Então o segundo link será “RESTAURANTES”. Se verificar a nossa pré-visualização e isso parece ótimo. Você notará que há uma navegação suspensa lá. Queremos livrar-nos disso para este exemplo. Então o que vamos fazer é se olharmos para a lista com a classe de drop-down e nós estamos apenas indo para excluir o, Eu estou apenas procurando o fechamento na lista item lá, antes das últimas listas não ordenadas. Então, se selecionarmos isso e deixarmos essa seção, o que vamos fazer é copiar o item da lista e vamos colar isso duas vezes. Está bem, está muito bem. Mudaremos o texto. O próximo quer ser “SPA FACILIAÇÕES”. O último quer ser o link “CASAMENTOS”. Quero separar isso um pouco para que possamos ver mais claramente. Então, a seguir temos o formulário. Esta seção de formulário é a caixa de pesquisa lá. Você pode ver que há o tipo de entrada de texto, que é onde colocamos o texto de pesquisa. Há também o botão Enviar que usamos no primeiro projeto. Então vemos listas não ordenadas no lado direito, que tem a classe certa Navbar. Se esticarmos a página mais larga, veremos que o fluxo é o certo. Em telas menores, eles vão cair para a posição abaixo. Novamente, mudaremos o nome dos nossos links. Então, o link mostrado à esquerda, vamos localizar na lista não ordenada, o primeiro item da lista. O primeiro link, se olharmos para o nosso projeto final, será “CONTACT NOS”. Queremos alterar os textos suspensos. Vou mudar isso para “DESCUBRA”. Confira nossa pré-visualização. Ok, isso parece ótimo. Nosso próximo é mudar os nomes, os itens da lista estão no menu suspenso. Precisamos encontrar o primeiro item da lista que começa com a ação, que é apenas lá, que é apenas lá, e queremos mudar o nosso para o link “NATURAL ENCERRENDO”, e depois “ONDE VISITAR”, “FAZER UM TOUR”. Finalmente, a seção “CORPORATE”. Ok, tais todos os nossos itens da lista no lugar. Em seguida, precisamos colocar a pequena imagem do telefone lá e vender nosso projeto. Então fazemos isso voltando para o site bootstrap.com. Vamos para a seção Componente e rolamos para baixo e olhamos para os ícones de glifo. O que precisamos fazer é encontrar os exemplos. Se você clicar no código de exemplo lá, e queremos colocá-lo antes do texto CONTACT US. Vamos colocar isso em uma nova linha e quem acompanha o exemplo. Se verificarmos a nossa página web mais cedo, é uma lupa, esse é apenas o exemplo em que usamos no site. Se localizarmos o telefone, que quero usar. Isso é glificon, fone de ouvido de glificone. Então, se voltarmos para a nossa classe, é glificon, pesquisa de glificon. Então só precisamos mudar a busca para fone de ouvido. Confira nossa pré-visualização. Lá vamos nós. Há uma foto do telefone no lugar. Então essa é a nossa barra de navegação terminada. Parece ótimo out-of-the-box por causa de todo o CSS Bootstrap, que já está predefinido, podemos substituir qualquer estilo Preset, mas vamos deixá-lo como está por enquanto. Em seguida, vamos olhar para o carrossel. 23. Incluindo o carrossel deslizante e a área de marketing: Bem-vinda de volta. No último vídeo, terminamos a barra de navegação. Em seguida, vamos começar a trabalhar para baixo em nossa página web e incluir o controle deslizante. Se voltarmos para o getbootstrap.com, precisamos selecionar a seção JavaScript. No menu à direita, se procurarmos o carrossel em nosso texto, até o exemplo do carrossel. Primeiro, se copiarmos o código e, em seguida, debaixo do nosso tipo de navegação de fechamento, vamos colar isso e olhar para a nossa pré-visualização. Não parece muito agora, mas vamos mudar o CSS e vamos adicionar algumas imagens para fazer isso parecer melhor. Vamos começar adicionando nossas imagens. Se formos até o wrapper para slides, o que precisamos fazer é encontrar na fonte de imagem lá, caminho para nossas imagens. Na pasta de imagens, as duas imagens que vamos usar são a entrada e a piscina. Selecionamos as imagens do pool. Vamos usar o texto da imagem do pool. Na segunda div abaixo, na fonte da imagem, faremos exatamente o mesmo. Na pasta de imagens, este será o entrance.jpg. Vamos mudar o alt para a imagem de entrada, que vai remover os pontos, e depois o lugar do texto para que possamos colocar uma legenda na imagem, mas não precisamos disso. Além disso, temos círculos livres para indicar imagens livres. Estamos usando apenas duas imagens neste exemplo, então vamos mudar isso com os itens da lista. Na seção do indicador, há três itens de lista diferentes, vamos apenas remover o terceiro. Isso mudará isso para dois indicadores. Parece que está funcionando bem. Nós clicamos nas setas, e você pode ver que podemos mudar a imagem, e isso está funcionando bem. Mais uma coisa que quero mostrar a vocês é que, se reduzirmos para uma visualização móvel, você pode realmente ver que o menu cai para uma caixa. Isso faz com que pareça muito mais limpo e compacto em visualizações móveis. Precisamos cercar todo o controle deslizante em um contêiner bootstrap. Precisamos dar uma classe div igual ao contêiner, e vamos fechar isso. Só vou copiar a div de encerramento. Vamos colocar isso na parte inferior da página. Havia também um contêiner que usamos para a seção de navegação lá em cima. Vamos ligar o contêiner de novo. Todo o conteúdo de bootstrap precisa estar dentro desse contêiner. Vamos colocar alguns comentários. Este vai ser o carrossel, e vai ser o fim do carrossel. Esta é a div de fechamento para o contêiner. Vamos deixar nosso controle deslizante terminar. Se voltarmos para o site getbootstrap, e se voltarmos para a seção de introdução. Quando na seção abaixo do carrossel aqui, se entrarmos na seção de introdução do bootstrap e descermos até os exemplos, o que queremos é o carrossel. Se entrarmos nesse exemplo e clicar com o botão direito e visualizar a fonte da página, o que precisamos fazer é, abaixo do número é o carrossel. Abaixo do carrossel, copiaremos as três colunas de texto abaixo do carrossel. Voltaremos ao editor de texto. Abaixo da div do carrossel de fechamento, vamos colar isso. Vamos tirar um saque na nossa pré-estréia. Vamos apenas remover estas três imagens circulares. Se olharmos para a seção de imagens em todas as três fotos, lá vamos nós. Primeiro, vamos mudar os três títulos diferentes lá nas tags H2. Vamos torná-los iguais aos nossos projetos finalizados. O primeiro será, nunca muito longe. A segunda tag H2 é, Visitante frequente. O terceiro é, Quartos para você. Mudaremos o texto, então o primeiro é, nunca muito longe. Entre as etiquetas P, queremos mudar esse parágrafo para, com mais de 150 locais em todo o mundo, você nunca está longe de nós. O segundo parágrafo vai ser, Junte-se ao meu clube de hotel para fantásticas poupanças e recompensas de lealdade. O terceiro parágrafo é, Pacotes estão disponíveis para atender a qualquer gosto e orçamento. Ligue para nossa equipe amigável para discutir. Agora, vamos verificar essa na nossa pré-visualização. Em seguida, queremos mudar os três botões na parte inferior. Se você notar no projeto finalizado, eles têm um fundo azul. Voltamos para o getbootstrap, volta para a seção CSS. Se procurarmos a seção de botões à direita, você notará que estamos usando o botão padrão. Se olharmos de volta para a página de índice, vamos olhar para a classe e é botão-padrão, que é apenas no topo lá. O que queremos é o botão principal, então precisamos mudá-lo para button-primary. Mudaremos isso nos três botões. Vamos verificar isso na pré-visualização. Está bem. Exatamente o que queremos. Também precisamos alterar o texto do botão, então verificamos os projetos finalizados. Precisamos alterar a seção de detalhes da vista. O primeiro vai ser localizações, segundo é juntar-se ao nosso clube, e o terceiro vai ter o nome dos detalhes da vista, então vamos manter isso como está e vamos verificar as mudanças. Isso funcionou bem. Todos os textos no minuto são flutuados para o lado esquerdo. Queremos que ele seja centralizado em todos os três divs. Fazemos isso pela classe [inaudível] para a linha. Nós simplesmente digitamos o centro de texto, e isso torna tudo bem centrado. Acabei de terminar com esta seção. Se você se juntar a nós no próximo vídeo, vamos começar a olhar para os recursos abaixo. Vejo você lá. 24. Finalizando com a área em destaque e rodapé: Olá a todos, bem-vindos de volta. No último vídeo, olhamos para adicionar o carrossel e também adicionamos os três botões abaixo, então vamos terminar este site adicionando os recursos e também a seção de fotos na parte inferior. Então, se voltarmos para o site getboostrap.com na seção de conceitos básicos, vamos usar o mesmo exemplo que usamos para o carrossel, que é o exemplo de carrossel. Se você clicar com o botão direito em “View Source”, vamos copiar a seção abaixo, a que copiamos da última vez, então se localizarmos o início do comentário featurettes, e então vamos até o final dos featurettes e também copiaremos no rodapé. Nós não precisamos copiar no último contêiner porque nós já temos isso em nosso site, então copie isso, e então nós precisamos ir logo abaixo da última linha lá acima do contêiner de fechamento, e nós colamos isso em. Então todo o conteúdo agora no lugar no site lá. Antes de avançarmos, eu só quero falar sobre a grade responsiva no bootstrap. Você vai notar que há várias classes, como col-md-7 e cinco, o que eles são é que eles são o número de colunas. Se você notar na primeira feição, o tamanho da imagem é uma grade de cinco colunas, e o texto restante é uma grade de sete colunas. Então é uma grade de 12 colunas que estamos usando, então o sete à esquerda e o cinco é a largura total, e se olharmos para a última seção que fizemos no último vídeo, as três partes iguais são divididas em quatro colunas cada. É assim que colocamos as coisas no Bootstrap, você pode tornar as coisas mais estreitas ou mais amplas alterando o número de colunas na grade. Então eu vou mudar para o nosso site acabado, possamos ver o que digitar. Então, primeiro queremos começar com o título, então, se localizarmos o cabeçalho featurette e excluirmos a primeira seção de cabeçalho featurette, e vamos chamar isso de pacotes de casamento, e depois a seção span depois, vamos mudar isso para, feito sob medida para você. Em seguida, vamos olhar para as tags de parágrafo, que está apenas lá, e nós vamos apenas incluir o texto do site final lá. Só estou tentando copiar e colar isso. Vamos verificar a pré-visualização, ver se está tudo bem. Em seguida, vamos colocar a imagem lá, e se mudarmos a localização da imagem, e estamos todos na pasta Imagens, e realmente deixe-me apenas mudar a fonte de dados sobre isso. Então images/wedding.jpg para o primeiro, vamos mudar a segunda imagem também. Então pasta de imagens e vamos adicionar a imagem restaurant.jpg, ea terceira imagem, novamente, excluir a fonte de dados, ea terceira imagem é o spa.jpg. Ok, essas são todas as imagens no lugar, nós só precisamos mudar o texto agora. Então essa é a primeira seção, e a do meio, pré-visualização de backup, e nós apenas copiamos o texto lá, vamos colocar isso na seção de parágrafo. Então, para o título, é jantar de primeira classe, e vamos mudar a parte ver por si mesmo nas tags span como cuidado por chefs de classe mundial, e depois a terceira e última, eu vou apenas copiar no fotografar lá, e mudaremos o título. Descubra as nossas instalações de spa e, em seguida, você nunca vai querer sair. Que é a única prévia em nosso dorminhoco. Ok, então passamos para estilizar estes em um minuto, nós só queremos que o texto seja um pouco maior. Primeiro de tudo, vamos apenas terminar a área do rodapé, então nós vamos apenas mudar o texto lá, e nós mudamos isso para 2015, My Hotel. Para adicionar os estilos para o texto lá, a maneira mais preferida de fazê-lo no Bootstrap é substituindo estamos criando seu CSS personalizado. Então, se voltarmos para a barra lateral e se entrarmos em Arquivo, Novo, eu vou criar uma nova folha de estilo. Então vamos salvar isso imediatamente, e vamos chamar isso de style.css, e vamos querer colocar isso na pasta CSS do tema bootstrap. Então vamos salvar isso, e então vamos voltar para nossa página de índice, e se voltarmos para o topo, queremos incluir nosso próprio CSS logo abaixo da placa de bootstrap, então o substitui. Então, mudamos o comentário para CSS personalizado, e ele também está na pasta CSS. Nós só precisamos mudar o nome para style.css. Então, se voltarmos ao nosso style.css, a primeira coisa que queremos fazer é aumentar o tamanho da fonte. Então, se voltarmos para a página de índice e encontrarmos a necessidade de interseção para o featurette, então esse é o primeiro, e então o texto, o jantar de primeira classe tem uma classe de cabeçalho featurette. Então vamos apenas copiar isso, e em nossos estilos, e colar isso em. Só quero adicionar um ponto na frente de lá se sua classe. Vamos tentar o tamanho da fonte, vamos tentar isso com 4ems. Ok, parece melhor, e nós começamos com um pouco de preenchimento no topo, apenas para empurrar o texto para baixo um pouco, e nós vamos definir isso para cinco por cento, apenas um pouco mais, definir para oito. Ok, isso parece melhor. Você vai notar o quão mais rápido e fácil é construir um site usando um framework como Bootstrap, e sinta-se livre para personalizar este site ou qualquer outro tanto quanto você quiser usando o arquivo CSS personalizado, mas deixar o site em que, agora temos um site totalmente responsivo e um ótimo olhar. Obrigado por se juntar a nós, e esse é o fim do projeto justo. 25. Obrigado e o que vem a seguir?: Parabéns por terminar este curso. Espero que você tenha aprendido muito sobre HTML, CSS e Web design em geral. Se você vai aprender a construir um site pessoal para um hobby ou um site para o seu negócio, agora você deve ter as habilidades necessárias para completar isso. Ou se você estava procurando uma nova carreira, agora você deve ter uma boa base para construir. Se você quiser continuar aprendendo, agora eu recomendo passar para JavaScript e jQuery. Então possivelmente uma linguagem do lado do servidor, como PHP. Também é útil para se familiarizar com um sistema de gerenciamento de conteúdo para usar em seu site, como WordPress ou Drupal. Mais uma vez, obrigado por fazer este curso, por favor deixe um comentário. Isso realmente ajudaria. Espero que se junte a mim em um curso no futuro. 26. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Então, obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.