Impulsione a sua marca pessoal programando o seu próprio site (noções básicas de HTML e CSS)

1. Introdução: Olá, eu sou Aga e eu sou um designer de codificação. Se você sempre quis ter seu próprio site, mas você estava cansado de aprender constantemente codificação e você pensou que na verdade isso não é para você, é hora de participar das minhas aulas. Vou mostrar-lhe que codificar é divertido, e você pode realmente codificar seu próprio site dentro de um curto período de tempo. O resultado das aulas seria o site criado. Preparei um layout especial para você. Eu realmente queria mantê-lo funky, fresco e colorido. Vamos codificar em HTML e CSS, mas não se preocupe, vou mostrar tudo o que é necessário. Espero que você goste do design, e espero que você se divirta muito enquanto aprende a codificar. Mal posso esperar para te ver na lista de alunos. Vejo-te nas aulas. Tchau. 2. Ferramentas: Então vamos falar sobre ferramentas que vamos usar nessas classes. Primeiro de tudo, vamos usar nosso navegador favorito. Eu costumo usar o Chrome. Nós você também pode usar o Firefox. Vamos usar muito ferramentas de desenvolvimento. O que são ferramentas de desenvolvimento? Estas são ferramentas de desenvolvedor web e eles são incorporados diretamente em todos os navegadores. Gosto muito de usar ferramentas de desenvolvimento no Chrome, mas talvez você tenha preferências diferentes. Vamos ver como podemos lançá-los e o que realmente está dentro. Então, temos o Chrome aberto. Nós clicamos com o botão direito do mouse, inspecionamos e bang, temos as ferramentas de desenvolvimento abertas no nosso lado direito da janela. O que você pode ver aqui é todo o código HTML do nosso site. É aqui. Temos o site do Skillshare aberto. Você pode apenas verificar qual parte do código é responsável pelo layout. Por exemplo, se você quiser descobrir e decodificar onde está a navegação, basta clicar nesta seta e navegar até ela. Agora, você sabe que este pedaço de código é responsável por renderizar a navegação. Aqui, temos estilos. Podemos chegar ao arquivo CSS. Podemos voltar aos elementos, então nosso código HTML e ver quais estilos são aplicados aqui. Por enquanto, pode parecer complicado, mas não se preocupe, vou explicar tudo passo a passo. Se você gostaria de ter esta janela em outra posição, você pode decidir se ela deve ser doca para a esquerda, ou talvez ela deveria estar em uma janela separada. Também podemos abrir ferramentas de desenvolvimento no Firefox. A regra é a mesma. Clique com o botão direito do mouse, inspecionar elemento, e você pode ver a janela das ferramentas de desenvolvimento que fazem parte do navegador web Firefox. Mais uma vez, temos o código HTML. Temos o CSS. Também podemos mudar a posição das ferramentas de desenvolvimento. Por exemplo, encaixe-os à direita. Outra coisa que precisamos é de um editor de código. Eu recomendo que você use Atom. Você pode baixá-lo gratuitamente no site, atom.io. Está disponível para macOS e Windows. Se você gosta de outros editores de código como Sublime Text, sinta-se livre para usar o que se adapte às suas necessidades. Resumindo, vamos usar o navegador da web, as ferramentas de desenvolvimento e editor de código. 3. Materiais: Vou te mostrar onde você pode encontrar os materiais que vamos usar durante nossas aulas. Na guia do projeto, você pode encontrar arquivos anexados à direita. Há package.zip e hello-colors-psd.zip. Em um package.zip, você pode encontrar exercício uma pasta e hello-cores, onde você vai encontrar toneladas de materiais úteis como guia de estilo, e há cores e tamanhos de fonte. Você pode encontrar o esqueleto HTML, CSS, e todo o texto para o layout são mantidos no arquivo de texto hello-cores. Há também a pasta de imagens, onde todos os ativos já estão preparados. Se você gostaria de jogar com o arquivo PSD do layout que eu preparei para você, você pode baixar o pacote hello-colors-.zip. 4. Ingredientes do sites: Vamos começar descobrindo como os sites são construídos. Eu sempre gosto de usar metáforas enquanto aprendo algo porque é mais fácil entender algumas noções abstratas. Imaginemos que nosso site é como humano. Tem esqueleto. Existem muitos mecanismos que controlam nosso corpo e temos diferentes cores da pele, cabelo e nosso próprio estilo em termos de que roupas gostamos de usar. O site é igual ao mesmo tempo. Este plano esquelético aqui é linguagem HTML. Ele constrói a estrutura da página e tem o conteúdo. Para todas as interações, como mostrar, ocultar elementos , filtragem, pesquisa e animações complexas, temos JavaScript. Claro, não podemos esquecer a estética. Para todos os estilos, vamos chamá-los de roupas para o nosso site, usamos CSS. Voilá! Durante essas aulas, aprenderemos linguagens HTML e CSS, o básico e a coisa mais prática que você precisa saber. Então, seremos capazes de construir o esqueleto do site, preenchê-lo com os dados e, finalmente, estilizá-lo como quisermos. Decidiremos em tipografia, cores, recursos como fundo e imagens. Parece divertido? 5. Noções básicas de HTML — parte I: É hora de começar a codificar. Vamos conhecer o HTML primeiro. HTML significa uma linguagem de marcação de hipertexto. Esta linguagem, como já mencionado, constrói a estrutura do nosso site. É o esqueleto. Cada site é construído com elementos HTML, e cada elemento tem algo nele como texto ou imagem. Temos tags HTML diferentes e elas representam diferentes tipos de conteúdo. Nós temos títulos, nós temos parágrafos, temos tabelas, temos imagens, então devemos escrever nossos códigos semanticamente. O que isso significa? Isso significa que cada elemento HTML tem seu próprio significado. Se você gostaria de usar parágrafo, temos que usar elemento p. É hora de codificar. Vamos abrir o exercício um. Isto está na sua pasta de pacotes. O que costumo fazer é largar a pasta no ícone do Átomo. Então, toda a pasta já está aberta. Vamos clicar em um index.html e temos este esqueleto do nosso site. Deixe-me explicar o que tem dentro. Primeiro, começamos o nosso documento HTML com declaração DOCTYPE. Não vou entrar em detalhes, mas é algo que é necessário. Graças a isso. Nosso navegador da web vamos entender qual versão do HTML que estávamos usando eo que é possível renderizar no navegador web. Cada site deve começar com elemento HTML. Basta olhar para ele, tem etiqueta de abertura e a etiqueta de fechamento. Você pode ver que a etiqueta de fechamento tinha barra. Tudo o que estiver dentro do site será processado. O que vem a seguir? Em seguida, temos a seção da cabeça. Lembra quando eu disse que o site é como humano? Bem, parece bem parecido porque tem cabeça e corpo. É por isso que minha analogia é muito próxima. Para que é a cabeça? Estes são os elementos que não são vistos no site, mas são muito cruciais. Por exemplo, temos o título aqui, temos o conjunto de caracteres, quais tipos de codificação vamos usar. Bem, eu não tenho tempo suficiente para explicar o que é isso na codificação e como isso afeta em nosso site, mas você só tem que acreditar em mim que é importante. Mais tarde, vamos usar a seção head para vincular as folhas de estilo e fontes externas, mas por enquanto vamos manter essa seção de cabeça assim. Tudo o que o corpo tem é renderizado no site. Significa que é visível mesmo se escrevermos algo aqui, salvarmos e abrirmos nosso arquivo de índice, você verá que tudo é renderizado. Mas para cada texto, vamos usar tag html para que o nosso conteúdo seja semântico. Vamos começar com o título. Temos diferentes tipos de rumo. Cada rubrica começa com h e um número. Um deles significa que este é o título mais importante, o título superior. Se você tem uma chamada urgente, você provavelmente usaria para o título. “ Olá, alunos da Skillshare.” Está bem. O que está faltando aqui? Temos que fechar a etiqueta. Agora, nosso código está correto. Você pode salvá-lo. Abra o navegador da Web, atualize-o e veja que “Alunos Hello Skillshare” é exibido. Você sabe como abrir DevTools? Deixe-me lembrá-lo. Clique com o botão direito do mouse, inspecionar, e vemos nosso site. Temos seção da cabeça. Como eu disse, não é renderizado em lugar nenhum. Então, você não pode ver o que esse código significa. Mas para o corpo, podemos ver o título e podemos ver estilos aqui aplicados. Estes são os estilos padrão do nosso navegador web. Se você gostaria de mudá-lo, apenas seja paciente porque estamos começando o CSS por último e pré-visualizar em breve. Você pode editar o texto aqui e ele será exibido. Lembre-se de que tudo o que for alterado aqui não será salvo em seu arquivo local. É apenas uma mudança temporária, apenas no navegador da web, e apenas no seu computador. Após atualizar a página, a alteração desaparece. Você tem que voltar ao seu arquivo, alterar isso, salvá-lo e atualizá-lo. 6. Exercício de HTML — parte II: Sabemos como lançar DevTools, o que é HTML e onde devemos escrever nosso texto HTML. É hora de se exercitar. Vamos criar um site muito básico que irá conter cabeçalho, parágrafo, link para um site externo, imagem e lista de itens. Como ainda não sabemos CSS, não se preocupe com estética por enquanto. Estamos começando com o exercício uma pasta, onde temos um índice HTML. Vamos abrir os arquivos no Atom. Temos nossos arquivos abertos no Atom. A primeira coisa é criar um título. Usamos h1 tag como é o principal, o título mais importante do site. Para o bloco de texto, usamos p tag que significa parágrafo. Vamos colar aqui um bloco de texto. Estou colando a descrição das minhas aulas no Skillshare. O texto é bastante longo, então podemos usar aqui um recurso Atom muito agradável. Nós clicamos na visualização, alternar envoltório suave, para que o texto seja moldado. O que está faltando aqui? Bem, a etiqueta de encerramento. Quando você clica na tag, você pode ver para sublinhar. Se excluirmos a tag de fechamento, não poderemos ver sublinhado. Então, isso é uma dica para nós que algo está faltando. Lembre-se de salvar o arquivo, e mais tarde podemos abrir o arquivo HMTL, e ver que temos o cabeçalho, e o parágrafo. Nosso site está bem definido, então vamos adicionar uma imagem. Nós adicionamos uma imagem escrevendo tag img. No entanto, precisamos adicionar alguns atributos. Então, atributos são outras propriedades que estão conectadas com a tag. Então, para img, será src que significa fonte, e como você pode ver a dica de Atom, é o atributo local para img tab. Então, agora queremos adicionar a fonte da nossa imagem. Precisamos adicionar o caminho à nossa imagem. Os caminhos apontarão o arquivo que você deseja exibir. Gostaríamos de exibir o arquivo que é uma imagem. Gostaríamos de exibir o arquivo que ele está na pasta img, e tem o nome Skillshare.png. Se você abrir o exercício uma pasta, você pode ver que temos HTML indexado, e img tag com este arquivo, e queremos exibir este arquivo. Uma coisa complicada aqui é adicionar caminho apropriado. Então, precisamos entrar na pasta img e selecionar o arquivo. No nosso caso, é Skillshare.png. É muito importante não cometer o erro aqui, os erros de digitação, ou o caminho errado é sempre a causa da imagem não carregada. Também te devo uma definição de etiqueta vazia. Como você pode ver, img não está fechado fechando tag. Normalmente escreveríamos algo assim, mas não está acontecendo. Isso ocorre porque img é vazio, ou tag vazia. Então, ele não tem o conteúdo. Em vez disso, escrevemos a barra dentro desta tag. Outra coisa importante é alt atributo. Alt é a descrição da imagem, e é muito útil para pessoas que usam leitores de tela e gostam de saber o que é apresentado na imagem. Se a imagem tem o seu significado, tem o seu propósito, nós apenas escrevê-lo em alt, porque é pastas de miniaturas Skillshare classes, podemos escrever a miniatura das classes Skillshare. Se a imagem é mais para fins decorativos e não tem informações muito importantes, podemos deixar o alt vazio. Mas do ponto de vista da acessibilidade, é muito importante ter este alt escrito. Nós salvamos. Então, vamos reescrever a alt, a miniatura das classes Skillshare, vamos salvá-la. Podemos ver que a imagem está carregada, temos o título, o parágrafo. Outra coisa com atributo alt é que se tivermos o caminho errado para a imagem, ou é apenas não carregado por causa de alguns problemas de desempenho de sua própria largura de banda baixa. Então, vamos apenas estragar o caminho, você pode ver que o alt aqui é exibido. Então, se as pessoas não podem ver sua foto, pelo menos eles sabem o que é apresentado aqui. Agora, gostaríamos de adicionar um link em nosso site.Vamos tê-lo antes da imagem. Usamos uma tag, e o mesmo com img precisamos de outro atributo que escrevemos dentro de uma tag. Aqui é href atributo, que aponta para o endereço do site que vamos vincular. Vamos ter o site do Skillshare. Feche a etiqueta. Vamos salvar e ver o que está acontecendo em nosso site. Bem, não podemos ver nenhum link, embora o código seja gerado, e podemos vê-lo em DevoTools. Não há nada em que você possa clicar. A razão para isso é que não adicionamos nenhum texto entre abrir um e fechar uma tag. Então, aqui podemos escrever o que quisermos, e será o hiperlink. Estamos escrevendo o que vai ser exibido. Então, clique aqui para visitar o site da Skillshare. Vamos salvá-lo e atualizar a página. Como podem ver, temos a ligação aqui. Se eu clicar nele, este site da Skillshare está sendo aberto. Também podemos ter o site aberto em uma nova janela. Para fazer isso, precisamos definir outro atributo que é alvo em branco. Graças a isso, o site da Skillshare será aberto em uma nova janela. Existem dois tipos de lista em HTML. Há lista desordenada iniciada com u para lista desordenada e ordenada. Então, para o nosso propósito, vamos escolher a lista desordenada. Vamos listar todas as habilidades que você pode adquirir participando dessas aulas. Por exemplo, HTML este é um item nesta lista. Outro item será CSS e outro Web Design. Precisamos fechar nossa lista, salvá-la, e vamos ver o que é gerado em nosso site. Você pode ver que cada item começa com o ponto de bala. Então, temos a nossa lista pronta. Se nós gostamos de mudá-lo para lista ordenada, nós só precisamos mudar u para o, o mesmo para fechar tag, salvar, recarregar, ea lista começa com os números. 7. Envie seu site para o estilista — noções básicas de CSS — parte I: Então, é assim que o nosso site se parece depois de adicionar cabeçalho, parágrafo, link, imagem e uma lista. Bem, você tem que admitir que está bem definido, então é a hora de enviar nosso site para o estilista. Graças ao CSS, nossos sites são tão bonitos e coloridos, então não perca tempo e vamos escrever algum código CSS. Há algumas maneiras de adicionar estilo ao site. Há na linha CSS, podemos escrevê-lo em um arquivo externo ou incorporar o código CSS no arquivo html. Ele se concentrará em um arquivo separado da folha de estilo style.css. Primeiro temos que criar o arquivo. Estamos em nosso diretório de exercícios um. Nós criamos uma nova pasta vamos chamar isso estilos e agora vamos criar o arquivo. Podemos fazer isso diretamente em Adam. Então, estamos abrindo Adam, clicamos em estilos seguindo você. Arquivo, Salvar como, você deve abrir a pasta estilos e escrever styles.css. Como você pode ver, o arquivo é criado no entanto ele está vazio. Vamos adicionar muito primeiro seletor CSS. Antes de começarmos a escrever código CSS, vamos dividir nossa janela em Adam para duas colunas para que possamos ver código html e CSS ao mesmo tempo. Precisamos clicar em painéis de visualização e dividir para a direita. Graças a isso, teremos index.html à esquerda e nosso arquivo de navio estilo à direita. Então vamos criar nosso primeiro seletor. O que isso significa? Bem seletor seleciona o conteúdo que gostaríamos de estilo. Então, nosso seletor é P como você pode ver este é o nome da tag então este é o parágrafo e dentro nós escrevemos todas as declarações. Cada declaração consiste na propriedade e seu valor. Digamos que gostaríamos de ter o nosso texto e parágrafo maior usamos o tamanho da fonte da propriedade e temos que dar-lhe um valor, por exemplo, 20 pixels. Precisamos salvá-lo, e agora podemos atualizar nosso site. Nada acontece, certo? Quando selecionamos um elemento com DevTools, não podemos ver nenhum estilo aplicado, exceto para os estilos padrão do navegador da web. Por que é isso? Bem, primeiro temos que vincular nosso arquivo CSS no documento HTML. Então, temos que vincular nosso arquivo styles.css no documento HTML. Vou ampliar a janela e fazemos isso na seção do chapéu. Estou colando o link da etiqueta. Temos atributo stylesheet em href e tipo. Então, em href, escrevemos o caminho para o nosso arquivo CSS, que é estilos porque os estilos estão em nossa pasta estilos e o nome do arquivo, style- styles.css. Vamos guardá-lo e adoramos o site. Agora você pode ver que o parágrafo é maior. Vamos checar as DevTools. Sim, podemos ver que nossos estilos são carregados e o tamanho da fonte é de 20 pixels. Agora será ótimo centrar nosso próprio rumo. Vou te mostrar isso no DevTools. Então, estamos criando a nova regra de estilo seletor. É elemento H1, então isso está correto. Basta clicar na linha e escrever o atributo. Então, para alinhar ao texto, temos text-align propriedade CSS. Agora queremos ter o seu volume. DevTools nos dão algumas dicas. Estou escolhendo o centro e Tada, nosso rumo está centrado. No entanto, se atualizarmos a página, a alteração desapareceu, porque não é segura em nenhum lugar, é apenas uma alteração temporária no DevTools. Podemos fazer isso novamente, centro de alinhamento de texto. Podemos copiar todo o conjunto de regras. Podemos colá-lo em nosso CSS, salvá-lo e atualizar a página e as alterações já salvas. Quaisquer que sejam as outras propriedades CSS, você está perguntando como podemos ampliar as margens entre os elementos, como podemos definir cores diferentes. A melhor maneira de aprender tudo isso é apenas praticar, mas há uma ótima página cssdreference.io onde você tem todas as propriedades categorizadas. Vamos praticar mais. Sabemos como ampliar o tamanho da fonte. Sabemos como alinhar o texto, mas agora gostaríamos de ter um espaço maior entre o link e nossa imagem. 8. Noções básicas de CSS — parte 2: Agora, eu gostaria de usar mais propriedades CSS e vê-los em ação. Então, vamos ter um espaço maior entre o link e uma imagem. Temos que usar a propriedade de margem. Vamos criar seletor primeiro, e vamos adicionar margem superior e margem inferior. Digamos, 30 pixels e margem inferior, 30 pixels também. Podemos escrevê-lo de uma maneira diferente. Podemos usar a margem de atalho 30 e zero. Isso significa que, a mesma quantidade de pixels, então 30, será de cima e de baixo. O segundo lugar é a margem para uma direita e esquerda. Se escrevermos 50 pixels, veremos que 50 pixels são da esquerda e do lado direito. Também podemos usar o computador e podemos ver o elemento aqui, margem como destacado pela cor laranja. Então você pode ver instantaneamente que de cima e de baixo temos 30 pixels e da esquerda e da direita 50. Então, novamente, precisamos copiar o reconstrutor colá-lo para o nosso arquivo CSS, podemos remover o código CSS não utilizado, salvá-lo. Podemos diminuir para zero, atualizar, e podemos ver que o mapa é maior. O que mais? Será ótimo ver como as cores estão mudando, mas vamos descobrir como podemos usar cores em CSS. Podemos aplicar cores ao texto, mas também para elementos onde podemos definir a cor de fundo. Vamos adicionar fundo para a parte inferior. Então, em todo o nosso site, estamos classificando o seletor, adicionando propriedades de fundo. Você pode ver que as ferramentas de profundidade já têm lista predefinida de cores em CSS. Você pode escolher um, mas você não tem uma grande flexibilidade aqui. Então, nós podemos pegar de volta rotas de uma maneira diferente. Você pode escrever aqui esse código hexadecimal. Qual é o código hexadecimal? Então, o código hexadecimal consiste em seis dígitos hexadecimais. Cada dois deles são para o canal vermelho, verde e azul. Então, nossa cor é constituída pela mistura de vermelho, verde e azul. Claro que você não precisa lá e códigos hexadecimais de cor. É ótimo porque em ferramentas de profundidade, temos profundidade de cor puxar para fora e podemos escolher as cores que gostamos. Seletor de cores e escolha o da imagem. Digamos que queremos ter um rosa. Agora, novamente, podemos copiar o código e colocá-lo em nossas folhas de estilo. Porque o corpo é a marca mais importante. Está no topo e é como o pai de todos os outros componentes, estamos apenas baseando-o no topo. Salve, atualizando a página, e podemos ver que as cores mudaram. E o texto? Claro, podemos mudar a cor do texto. Nós já h1 seletor preparado. Nós já temos h1 seletor criado. Então, podemos apenas adicionar outra propriedade que é cor e aqui podemos escrever o código hexadecimal. Seis F, significa que isto é branco. Mas, novamente, você pode escolher o que quisermos na paleta de cores. Eu estou bem com o branco, então vamos mantê-lo assim. Para o link, também podemos criar o seletor e alterar a cor. Eu só estou escolhendo a primeira cor, mais fraca, e usando através da laranja. Para tornar o link mais visível, também podemos adicionar os pesos da fonte. Então, quão pesado seria a fonte, podemos adicionar ambos. Como você pode ver, esta é a versão mais ousada do texto. Agora, é claro, temos que copiá-lo e colar em nossos estilos. Nós também estávamos adicionando a cor ao nosso título, vamos salvá-lo, e finalmente temos algumas cores no site. 9. Tipografia em CSS: Gostaríamos de tornar nosso site mais bonito. O importante é a tipografia. Felizmente, podemos selecionar um monte de belas fontes que estão disponíveis gratuitamente. Muitas vezes, eu uso fontes do Google. Você pode navegar através de todos os tipos incríveis. Então, vamos escolher um deles e aplicá-lo ao nosso site. Vamos escolher a Lora. Nós clicamos em selecionar esta fonte, clicamos na janela na parte inferior, e ver como devemos incorporar a fonte. Há duas maneiras. Podemos colar este link na seção de cabeça ou colar esta linha para o nosso CSS. Vamos colá-lo para a nossa seção de cabeça no arquivo HTML. Logo após os estilos, estamos colando o código copiado das fontes do Google. Para fazer o trabalho de fonte, precisamos adicioná-lo como uma propriedade para os seletores fornecidos. Por exemplo, você gostaria de ter h1 escrito em tipo Lora. Você pode copiar isso através da regra CSS e colá-lo para o seletor. Vamos salvá-lo e atualizar a página. Estamos usando ferramentas de profundidade, e você pode ver que o tipo de letra Lora é aplicado. Se descomandarmos, voltará para Times New Roman. Vamos escolher tipo de letra diferente para texto diferente, como parágrafo, link ou lista. Chamamos isso de texto corporal. Então, podemos escolher Roboto, talvez. Vamos escolher o Roboto Mono. Novamente, selecionamos essa fonte. Temos duas fontes combinadas. Vamos copiar colar para o nosso documento HTML. Podemos ver que há Lora e Roboto aqui. Queremos aplicar Roboto em todo o site. Então, copiamos esse código, font-family, e colamos a propriedade font-family para o corpo. Graças a isso, todo o corpo terá Roboto. Agora, podemos atualizar a página e ver que a fonte foi alterada. Parágrafo herda a família de fontes do corpo. Se desmarcarmos, Roboto terá desaparecido. Nós também só podemos adicionar isso ao parágrafo, e comandá-lo a partir do corpo, e ver que ele funciona apenas para parágrafo porque a font-family é aplicada apenas ao parágrafo. Claro, você pode escolher muitas fontes diferentes. Tudo depende do estilo que você gostaria de alcançar no final. Lembre-se apenas de que se você gostaria de ter mais tipos de letra, geralmente, leva mais tempo para a página ser carregada. As fontes do Google têm um tipo de métrica. Então, se você abrir a janela, você verá qual é o tempo de carregamento, seja razoavelmente rápido ou lento. Nós também podemos anexar fontes diferentes não apenas de fontes do Google, mas eles têm que ser fontes da web, e eles têm que ser hospedados em algum lugar. Então, para essas classes, para mantê-lo mais simples, usaremos somente fontes do Google. 10. Selecionadores de CSS — classes: Este é o estado atual do nosso site. Eu preciso mencionar sobre outros seletores CSS porque nós ainda não falamos sobre eles. Então, aprendemos que existem seletores de elementos como p, h1, img. Então, este é o nome dessa tag em HTML. Se você gostaria de estilizar um parágrafo, nós apenas adicionar p, mas este p estilos cada parágrafo que está incluído no site. Então, para todos os parágrafos, o tamanho da fonte será de 20 pixels. E se você gostaria de ter dois parágrafos e apenas um terá tamanho de fonte 20 pixels? Para isso, podemos usar classes CSS. Este é outro seletor. Como devemos criá-lo? Nós sempre criá-lo com ponto e, em seguida, o nome da classe. Por exemplo, intro-parágrafo. A regra é a mesma, basta adicionar aqui as propriedades CSS, mas também precisamos adicionar classe ao elemento HTML. Podemos adicionar a isso por atributo de classe. Vamos copiar o parágrafo, então teremos dois deles. Vamos salvá-lo. Vamos atualizar nossa página. Temos dois parágrafos. Então, agora, vamos estilizar que o que está no topo terá 20 pixels, e o que está na parte inferior será 14 pixels. Temos a classe intro-parágrafo já criada. Então agora, estamos adicionando a classe ao primeiro parágrafo, que vai ser a introdução. Então, basta digitar o nome da classe, como você pode ver, temos esse atributo de classe e agora, precisamos adicionar a propriedade. Então, podemos definir que todos os parágrafos que temos terão 14 pixels, mas a introdução terá 16. Vamos atualizar a página, e como você pode ver, usando as ferramentas DAC, intro-parágrafo tem 16 pixels, 14 pixels são substituídos. Esta é a dica aqui que a propriedade para p é aplicada a todos os parágrafos, mas temos a classe que tem maior prioridade, modo que o parágrafo será escrito em 16 pixels tamanho da fonte. O parágrafo abaixo tem 14 pixels porque não tem classe. Se você gostaria de adicionar esta classe ao segundo parágrafo, podemos fazê-lo, sem problema. Você pode simplesmente copiar, colar, salvar, recarregar e trabalhos de classe. Espero que você esteja mais familiarizado agora com a criação das classes. 11. Desconstruindo o layout: Só me concentro na construção da nossa casa. Então, eu estou tendo o layout aberto. Vamos chamá-lo de “Olá Cores”. Então, o que eu gostaria de fazer agora, é mostrar a vocês como eu penso em termos da estrutura HTML. Eu estou assistindo esse layout agora e eu vou desenhar rapidamente os componentes da página. Que seções temos? Vou mostrar-vos aqui como desconstruo o layout. Então, mais tarde, é mais fácil para mim codificá-lo porque eu sei quais são os componentes e quais elementos HTML eu deveria usar. Então, vamos começar com o começo. Posso ver no topo que temos a navegação. Então, este pedaço de papel é meu editor de nuvem atual. Então, eu escrevi no topo que temos elemento nav e mais tarde temos o cabeçalho. Aqui, temos o cabeçalho do site. Então, eu estou tendo o cabeçalho, e o cabeçalho é dividido em duas colunas. Esquerda, direita e todos juntos é um cabeçalho. Quando rolamos, temos um parágrafo aqui, e tudo o que está abaixo do cabeçalho está na seção principal, porque é como o conteúdo principal do site. Então, eu posso criar aqui principal. A vontade principal consiste em várias subseções. Então, primeiro será a seção de trabalho. Então, temos seção para trabalhos. Existem três linhas livres. Abaixo funciona temos a minha seção de equipe, então outra. Então, na minha equipe temos a seção de contato e o último é o rodapé. Então, as informações antigas como mídia social e e-mail. Então, abaixo temos rodapé. Então, aqui temos trabalhos, minha equipe e seções de contatos, e estaremos usando esses tipos de texto HTML. 12. Criando o esqueleto em HTML — parte 1: Estamos prontos para codificar em HTML e CSS passo a passo. Vamos abrir modelo HTML que está incluído no pacote. Temos neste HTML, todos os ativos necessários para o layout, todo o layout que vamos codificar, e ver CSS, style.css e grade bootstrap. Então, vamos usar bootstrap. Bootstrap é um tipo de framework, e eu não quero entrar em detalhes, mas nós estaremos usando apenas esta tira bootstrap. Então, graças a ele, não precisamos entrar na caixa flexível, ou como construir as colunas, vamos apenas usar um tipo de grade que já criamos. Então, podemos poupar algum tempo. Se você se lembrar de como dividimos esse layout, temos algumas seções como navegação, cabeçalho, seção para trabalhos, seção para minha equipe e seção para contato. No fundo, o rodapé. Então, vamos criá-lo em HTML. Estou abrindo índice html. Por enquanto, posso fechar esses estilos. Então, vamos começar com navegação. Nav é a etiqueta de navegação. Dentro, vamos criar uma lista. Vai ser o nosso cardápio. Então, temos a oferta, portfólio, sobre nós, contato. Eu posso apenas lê-lo. A oferta, outro item na lista, portfólio, sobre nós, e contato. Está bem. Então, temos a navegação criada. Podemos salvar a página e abri-lo no navegador da web. Como você pode ver, ainda não é muito atraente, mas não se preocupe. Outra coisa que queremos terminar, é a seção de cabeçalho. Algo que está no topo. Então, cabeçalho, e dentro temos duas colunas. Seção um à esquerda, podemos usar comentários, e HTML que você faz é exatamente assim e aquilo. Você escreve esta parte da coluna direita, esquerda e fecha assim. Outra coisa é que temos a coluna certa. Então, podemos adicioná-lo, 'hello' e abaixo, temos o parágrafo de texto. Vamos deixar o código mais limpo. Está bem. Então, esta é a nossa coluna da esquerda. À direita, temos a imagem e uma legenda. Então, estamos adicionando imagem. A imagem está na pasta img. Isto é cacto. Estamos fechando pilha de imagem com barra dentro tag elemento, e nós também adicionar atributo alt. Salve na legenda abaixo. Estou colando e fechando. Vamos atualizar a página. Bem, é só uma coluna, mas não se preocupe. Quando vamos adicionar colunas de script bootstrap, você verá que o layout será o mesmo que em uma imagem. Então, vamos adicionar mais seções. Precisamos de acrescentar parágrafos simples. Você pode adicionar isso à seção principal. Então, tudo o que está abaixo do cabeçalho, e abaixo principal, temos o rodapé. Então, no principal, estamos criando o parágrafo do texto. Abaixo do parágrafo, temos a seção para trabalhos, seção, estou fechando. Agora podemos adicionar comentários, “trabalhos”. Abaixo da seção, temos minha equipe, e abaixo da minha equipe, temos contato. Dentro das obras, temos três filas de projetos diferentes. Podemos criar esta linha usando div. Div é um tipo de recipiente, por isso pode consistir em vários elementos. Não precisa ser tributada, pode ser uma imagem. Então, é como um componente genérico. Então, temos primeiro se, então temos primeiro, segundo e terceiro projeto na seção de trabalho. Vamos adicionar algum texto. Podemos usar cabeçalho h2 para trabalhos, você pode usar o mesmo título para seção, 'minha equipe', e o último, contato. Vamos atualizar a página. Temos trabalhos, minha equipe, contatos. Vamos adicionar mais elementos para a seção de trabalho. Temos imagem, cabeçalho, outro título, parte de um texto, e um link. Podemos ver aqui que, este é um título menor do que este e este. Então, se isso é h2, isso seria h3, e isso é h4. Então, primeiro elemento h4, deixe-me verificar o texto que é marca e web e a imagem. A imagem lá é um abacaxi. Pineapp, JPEG, alt, abacaxi. Vamos salvá-lo. Nós temos o título e a imagem, e estamos faltando o texto aqui com o título e um link. H3 pineapp, parágrafo. Usamos break, br, para separar o conteúdo. Esta é a nossa nova linha, e vamos fechar parágrafos. Vamos refrescar e ver. Como você pode ver, cada novo item está na nova linha. Graças ao intervalo. O último é o link. Nós não sabemos onde o site será vinculado, então você pode simplesmente adicionar um href vazio, ou um fechamento e dentro do link, inserir o nome da ação. Então, visite o site. Nossa seção está codificada. O segundo é o mesmo, mas a ordem é alterada. Então, vamos ter primeiro h3, link de parágrafo, h4, e uma imagem. Então, h3, estou fechando parágrafo e último, o link. Podemos copiar o mesmo item, e a primeira seção é seu dever de casa porque, como você olha, é exatamente o mesmo que a primeira seção. Então, você simplesmente não pode copiar. Ah, e eu esqueci da imagem, é claro. Então, é aqui, é um jantar saudável, e, claro, h4 branding e móvel. Estamos salvando e recarregando a página. 13. Criando o esqueleto em HTML — parte 2: Vamos codificar minha seção de equipe. Então, temos uma coluna que consiste em duas imagens e uma coluna com cabeçalho e parágrafo de texto. Então, vamos começar com as imagens. Minha equipe, então imagem, equipe desculpe, equipe um, alt, foto de equipe, outra imagem, foto de equipe. Temos o título e um bloco de texto, então um parágrafo. Como pode ver, está um pouco confuso. Então, vamos torná-lo mais limpo, e vamos colocar pausa ou vamos colocar dois intervalos. Aqui, podemos fechar o parágrafo e criar uma lista. Então, este seria o nosso item da lista. Outro, fechando, e outro e o último. Claro, quando fechar a lista, clique em Salvar e atualizar. Temos duas fotos, título, parágrafo, texto e a lista. Outra seção, contato, então temos parágrafo, duas imagens. Então, temos e-mail, outro parágrafo. Vamos fazer a limpeza também e parágrafo para o endereço. Quebra, quebra, clique em Salvar e duas imagens. Contact1.jpg, podemos deixá-lo vazio. Contat2, é isso. Apenas atualize e estamos perdendo o rodapé. Então temos quatro ícones, então quatro imagens. O fundo, como você pode ver as mídias sociais. Podemos fazer isso como um fundo, não como um texto e o parágrafo na parte inferior. Vamos colocar parágrafo porque é mais fácil para agora e ícones. Temos Twitter svg alt Twitter ícone. Outro seria Facebook, ícone do Facebook, Facebook. Temos o Pinterest. A propósito, estou pegando os nomes dos arquivos deste diretório. Não os conheço de cor, embora nomear seja bem simples. Temos um Instagram? Ícone do Instagram. Tudo estará ligado às redes sociais. Então, podemos adicionar nome a cada imagem. Claro, não se esqueça de fechar a etiqueta. Vamos refrescá-lo. Bem, você pode ver agora que o espaço é branco. Por que é isso? Isso ocorre porque estamos usando ícones SVG e eles são muito grandes. Então, vamos cuidar disso em CSS. Se adicionarmos fundo ao corpo, por exemplo, rosa, você pode ver que o ícone é muito grande e largo, então é por isso que não é visto no fundo branco. SVG leva toda a quantidade de espaço que ele pode ocupar, então geralmente apenas se estende para 100% de largura, mas vamos alterá-lo em CSS. Então, não se preocupe com isso. Então, atualizando a página e estamos prontos para adicionar nossa grade de estilo e bootstrap. 14. Grid do Bootstrap — parte 1: Nesta lição, nós vamos aprender como usar bootstrap grid. Há um site de grade que reúne todas as informações mais importantes. Vou me concentrar apenas em algumas partes porque queremos terminar nosso site o mais rápido possível. Mas se você quiser explorar este tópico, você está mais do que convidado a conferir a documentação do bootstrap. Então o primeiro que precisamos fazer, então a primeira coisa que precisamos fazer é adicionar grade bootstrap ao nosso HTML. Se abrirmos a nossa pasta de modelo HTML, e entrar na pasta CSS podemos ver que existem dois arquivos; estilo CSS e bootstrap grade CSS. Então, precisamos adicionar esta folha inteira ao nosso documento HTML da mesma forma que adicionar estilo CSS. Então, copiamos a tag de link e adicionamos o nome apropriado. É uma grade de bootstrap, e nós a salvamos. Então agora podemos finalmente começar a usar a grade. Vamos criar colunas de disco 2 agora mesmo. Na documentação, se você rolar um pouco para baixo , verá que podemos criar duas colunas. Este é o código, então temos um contêiner que limita a largura. Temos a fileira. Então, tudo o que está dentro da linha vai tentar empilhar perto um do outro. Temos div com carvão de classe e outro, e eles estão próximos uns dos outros porque aqui temos 100% de largura, então é como uma pausa. É como se este elemento fosse para a nova linha. O que se reflete aqui. Então vamos tentar. Nós vamos usar classe linha e vamos adicionar isso ao nosso cabeçalho. A seção de cabeçalho está aqui. Então vamos para editor de código, estamos adicionando linha. A próxima coisa é adicionar carvão classe à nossa coluna esquerda e à coluna direita. Então, graças a isso, eles estarão próximos um do outro. Vamos refrescar e ver. E temos duas colunas. Podemos inspecionar. Talvez fosse mais fácil ter no fundo. Temos toda a linha, carvão 1 e carvão 2 lá perto um do outro. Nós também podemos adicionar algum fundo apenas como um fundo gota para ver que as colunas são criadas. Diga amarelo. Aqui temos duas colunas e tudo, o que está dentro da tag seção. Então, cada um título, o parágrafo, eles estarão dentro desta coluna. Ok, vamos atualizar e vamos pegar as cores do projeto. Estou usando o Photoshop, estou usando o Photoshop e o seletor de cores, mas você também pode usar meu documento que está em uma pasta. Olá cores, documento de texto onde você encontrará todas as cores e o texto. Assim, seria mais fácil para você codificar rapidamente o site. Então, para a primeira coluna da esquerda, que precisamos adicionar o fundo azul marinho. Precisamos adicionar outra classe para diferenciá-la. Então, aqui devemos acrescentar, carvão à esquerda. O espaço é como combinar as aulas. Então isso significa que há carvão de classe e há outro, carvão à esquerda. Então vamos criá-lo em estilos CSS. Carvão à esquerda. Talvez no texto Olá, cor de fundo e eu estou colando código de texto do Photoshop. Vamos salvá-lo. Eu sou índice de poupança HTML, refrescante e dada. Meu site tem fundo azul marinho. Vamos fazer o mesmo para a segunda coluna. Estou criando a classe certa de carvão. Cor de fundo. Esta é a cor turquesa e adicionando esta classe a esta seção. Então esta é minha seção Hello, seção azul-marinho e seção turquesa. E está feito. Estamos chegando mais perto. Agora podemos trabalhar no, outro na seção de trabalho. Veja no layout, este conteúdo está centrado. Portanto, esta largura não é 100% do navegador da web. É, por exemplo, 1000 pixels e é centralizado qualquer que seja a sua resolução. Então, vamos usar classe contêiner. Isto é o que está escrito e a documentação. Assim, os contêineres fornecem um meio para centralizar e empacotar horizontalmente o conteúdo dos sites. Use a classe de contêiner para largura de pixel responsiva ou fluido de contêiner para largura 100 por cento. Vamos usar uma largura de pixel responsiva. Então, vamos adicionar recipiente para todo o principal. Vamos atualizar a página e você pode ver que o contêiner funciona. Você também pode verificar isso e inspecionar. Principal. Aqui você tem mais informações sobre a largura e grade bootstrap. Se você está curioso, você pode conferir isso. Então, a largura atual do contêiner para mim é 1140 pixels. Estou falando disso, este é o meu caso porque não sei qual é a sua resolução de tela. Se você alterar a largura do seu navegador, você verá imediatamente que a largura do contêiner está mudando. Ok, então nós temos o recipiente, agora nós gostaríamos de criar duas colunas dentro da seção de trabalho. Deixe-me mostrar isso no layout. Então temos uma coluna para a imagem e a segunda para o texto. Aqui está a seção de largura. Temos de dividir isto em dois contentores. Então, um contêiner seria uma coluna e nós fechamo-lo depois. Eu sou GTAC porque está dentro da primeira coluna. Podemos copiá-lo. E a segunda coluna com o texto e fechamento. Por que precisamos de outro div? Então, outro contêiner denari para criar a linha. Então, em uma linha, temos duas colunas próximas uma da outra. Deixe-me salvar isso e atualizar a página. E bang, nós temos duas colunas. Então vamos fazer a próxima fila. Temos um jantar saudável. Esta é uma linha, uma coluna para o texto e a segunda para a imagem. Então, podemos copiar linha e colá-lo aqui. E novamente esta seria uma coluna e esta seria a segunda. Então vamos codificar carvão classe div. Claro que precisamos fechá-la. Por favor, lembre-se, é super importante. E o segundo carvão. Então, dentro de uma linha que é, que começa aqui e fecha aqui, temos coluna esquerda e coluna direita. E bang, funciona. Então a fruta seria o seu dever de casa. Você precisa criar uma linha, uma coluna para a imagem e a segunda para o texto. Posso te dar uma dica. Este é o mesmo que este, mas a única coisa que é diferente é a imagem e o texto. Funciona como copiar e colar. Se atualizarmos, você pode ver que temos quase o mesmo layout. Então vamos voltar para a minha equipa. Temos o título e aqui temos uma coluna com as imagens e a segunda coluna com o texto. Mais uma vez, a situação é a mesma. Podemos copiar a linha. Então eu estou colando linha. Vou fazer a guia aqui só para ver qual é qual guia é o pai. Então aqui nós criamos, carvão e nós fechamos depois de imagens porque este carvão inclui apenas imagens e o segundo carvão. Ok, então nós temos um carvão com as fotos e o segundo que fecha aqui com um texto muito longo. E tudo deve estar dentro da fila, mas como você pode ver eu não fechei porque não está sublinhado. Então, a culpa é minha. Deixe-me corrigi-lo. Sim. Agora está sublinhado. Ótima. Salve isso. atualizar. Quando o atualizamos, vemos que não há duas colunas. Só há um. E a razão é que as fotos são bem grandes. Então, se escrevermos carvão, levará tanto quanto a quantidade da maior imagem. Então outra coisa pode bootstrap aqui é digitar quantas carvões deve levar. Imagine que temos uma grade de 12 colunas. E nós queremos ter essa parte, e essa parte deve ser metade. Então, seis deles. Então escrevemos. Médio é para os tamanhos médios de tela. E agora, de repente, se temos o texto dentro, na imagem. Nós também pode adicionar propriedade CSS, largura máxima 100%. Nossa imagem será limitada dentro do contêiner. Mesmo que tenha tamanho maior, ele será ajustado para a largura máxima que pode levar. Aqui, este é o nosso contentor. Vamos fazer as modificações. Precisamos adicionar carvão, médio seis, salvá-lo e precisamos adicionar e tamanho que a imagem deve levar a largura máxima de 100 por cento de seu pai, do contêiner pai. Vamos atualizar e finalmente temos duas colunas. Certo, então contato temos... 15. Grid do Bootstrap — parte 2: Nesta lição, vamos cobrir as seções de contato e rodapé. Então, vamos adicionar a grade lá. Vamos codificar isso. Novamente, podemos copiar linha. Vamos para a seção de contato, então linha, fechamos a linha. Vamos criar uma coluna, classe col. Então, para cada imagem, criamos outra coluna. Vamos refrescar e bater! Temos três colunas. Perfeito. Então agora é a hora para o rodapé, aquele que está cheio de ícones brancos. Então, rodapé tem quatro ícones de mídia social e um texto na parte inferior. Ele também tem fundo, para que possamos adicioná-lo. Também podemos definir o tamanho das mídias sociais. Vamos criar rodapé do seletor CSS, cor do plano de fundo e eu estou colando a cor do plano de fundo que tirei do documento. Estou economizando e revigorando. Como você pode ver, o fundo tem essa cor semelhante a salmão, mas os ícones são muito grandes, então vamos torná-los menores. Cada imagem terá classe ícone social, e salvar. Preciso criar uma classe de ícones sociais. Digamos que a altura será de 60 pixels. Isso é melhor. Ainda podemos ver alguns espaços brancos aqui. Vamos usar o Inspect para verificar qual é a razão para isso. Se selecionarmos Corpo, você pode ver este contorno laranja. Podemos chegar à guia do computador e ver que o corpo tem margem de oito pixels. Então, para margem, este é o estilo padrão do navegador. Então, para um corpo, precisaremos redefinir as margens e os estofos, e está quase lá. Ainda podemos ver algum espaço em branco aqui. Acho que é de HTML. Estes são alguns truques, mas não se preocupe. Quando vamos adicionar 100 por cento de altura, vai ficar tudo bem agora. Então, vamos aplicar os estilos. Então, para o corpo, teremos margem zero, então vamos redefinir as configurações padrão pelo navegador e seletor HTML no topo por causa do preenchimento de toda a página. Nós adicionamos altura 100 por cento. Portanto, leva toda a altura do navegador da web da viewport. Vamos refrescar e quase lá. Então, agora gostaríamos de centralizar esses ícones, e este texto deve estar no mesmo recipiente que o resto do conteúdo. Então, primeiro vamos adicionar recipiente. Está em outra div. Isso é melhor. Centralização. Infelizmente, não temos tempo suficiente para nos concentrarmos em todos os problemas com CSS, como centralizar horizontalmente ou renderizá-lo verticalmente, mas vou mostrar-lhe alguns truques. Então, gostaríamos de centralizar este contêiner com os ícones. Podemos fazer isso criando classe div, contêiner ícones sociais. Nós criamos a mesma classe em CSS. Então, a outra coisa que vamos fazer aqui é escrever text-align center porque ele irá centralizar o conteúdo que está dentro do recipiente de conteúdo. Funciona. Claro, precisamos de alguns espaços entre os ícones. Podemos fazê-lo aqui adicionando margem, a parte superior, inferior e a direita/esquerda. Vamos verificar. Sim, assim é melhor. Quase lá, ficando muito perto lá. Agora, é hora de cuidar da tipografia, cores e tamanhos. Vemo-nos nas próximas aulas. 16. Estilo de navegação: Antes de entrarmos em tipografia e cores, vamos resolver o problema da navegação. Como você pode ver, é vertical, não horizontal. Então eu vou te mostrar uma coisa aqui. Então temos nossa navegação criada na parte superior do documento HTML. A lista aqui é, por padrão, vertical, então precisamos torná-la horizontal. Posso criar um seletor. Ao exibir cada li, então cada item na lista como inline-block. Ele muda de bloco de exibição para exibir bloco inline-. Blocos de exibição do valor do bloco significa que ele leva toda a quantidade de espaço. Como você pode ver, leva 100 por cento de largura. Para mostrar que está bloqueado por padrão, posso digitá-lo e nada mudou. Mas se aplicarmos bloco inline-, ele muda suas propriedades e cada elemento que tem exibição inline-bloco colocado perto uns dos outros. Então estamos quase lá. Vamos criar uma navegação de classe, e vamos escrever navegação seletor CSS. Navegação, esta é a nossa classe. Esta é a lista completa, mas queremos atingir li, que é o item dessa navegação. O navegador da web funcionará assim. Vamos encontrar navegação de classe, e vamos encontrar cada item li, então cada item na lista. Exibir bloco inline-. Quase lá. Nós também gostaríamos de ter ul centrado. Então, podemos adicionar centro de alinhamento de texto. Você pode copiá-lo, e nós podemos criar navegação, centro de alinhamento de texto. Então a navegação, é a nossa lista e vai ser centralizada, e quase lá. Outra coisa é que a navegação é colocada como uma nova camada sobre estas duas colunas. Aqui, temos o espaço em branco. Então, para mudá-lo, precisamos mudar a posição. Não temos tempo para aprender teoria sobre posições, mas deixe-me mostrar um truque. Se adicionarmos a toda a posição nav, corrigido. Ele se foi. Está algures lá. Mas também precisamos colocá-lo na frente. Fizemos isso com o índice z. Então zero, ele está escondido pelos próximos elementos, então por todo o cabeçalho. Então precisamos adicionar mais alto, por exemplo, um. Agora, você pode ver. Se rolarmos, o menu é fixo. Então é como um cabeçalho pegajoso, mas não está centrado. Então, agora, gostaríamos de centralizar a navegação. Há outro truque. Então temos que escrever esquerda zero e direita zero, e o conteúdo será centralizado. Você pode ver que a navegação está sobrepondo todos os outros elementos, então vamos copiá-lo e isso é para a navegação, navegação , e ele funciona. Podemos adicionar mais espaços entre os itens, para que possamos adicionar margem zero de cima e de baixo, mas 15 pixels da esquerda e da direita, e está lá. Então eu também estou definindo a cor. Parece com isto. Então agora, é hora de cores, tipografia, espaços. 17. Tipografia e cores — parte 1: Agora para cuidar de tipografia e cores, e eu estou muito animado para esta parte porque ele pode mudar totalmente o caráter do site. Então, vamos começar procurando as fontes que fizemos, vamos precisar. Então, no layout, eu usei Prata e Inconsolata. Então, estou abrindo fontes do Google e procurando o Prata exatamente. Estou adicionando e Inconsolata, sim. Estou selecionando essa fonte também. Estou personalizando. Eu preciso de ambos para Inconsolata também, e aqui para incorporar, eu copio o link. Tenho duas fontes e estou colando dentro da seção do chapéu. Então, o link de fonte é incorporado, mas ainda não temos na família de fontes em nenhum lugar. Então, vamos verificar os nomes. Temos Prata e Prata é usado para todos os títulos. Então eu posso escrever um seletor de grupo como h1, h2, h3, h4, h5, todos os títulos, e eu estou aplicando fonte Prata. Agora, podemos atualizar a página e essa fonte foi alterada. Ótimo. Então agora podemos adicionar Inconsolata porque Inconsolata é usado em todos os lugares no corpo do texto. Podemos aplicá-lo ao corpo. Então, todo o HTML será escrito em fonte Inconsolata, exceto pelos títulos, que serão em Prata. Deixe-me atualizar e temos as fontes carregadas. Então, agora é a hora de adicionar cores e tamanhos de fonte adequados ao nosso texto. Como sabemos, isto deve ser branco. Então, vamos para a seção de código à esquerda e podemos encontrar em CSS e adicionar cor branca. Queremos também centralizar este texto. Ok. Olá deve ser definitivamente maior, 150 pixels, para que possamos adicionar informações que o atual é de 150 pixels. Também é ousado aqui. Deixe-me checar isso nas ferramentas do médico. Então, por padrão, o peso da fonte é negrito, mas no projeto, é regular. Então, você escreve normal. Consegue ver a diferença? Então, estamos copiando também, na verdade todos os cabeçalhos. Então, é normal aqui. Acabei de perceber que para a navegação também estamos usando o Prata, então temos que fazer a mudança, então vamos levar o Prata. Então, estamos tendo Prata para isso e deve ter 22 pixels. Estamos chegando mais perto. Este texto deve ser centralizado e branco. Então, na verdade, podemos adicionar as mesmas propriedades CSS para ambas as classes, então left col e right col, e fazemos isso adicionando coluna. Estou pegando as propriedades CSS, colando, salvando e atualizando. Você pode ver que é muito melhor. Cuidaremos dessa parte mais tarde. Então agora devemos nos concentrar na tipografia e nas seções abaixo. Role para baixo para saber mais sobre mim. Está no azul e está centrado, então podemos criar classe aqui, introdução. Na verdade, é rolagem e estamos adicionando essas classes. Cor, esta é a cor que eu copiei, e text-align: center. Voilá. Ok, então agora podemos nos concentrar nos cabeçalhos, como trabalhos, minha equipe e contato, e eles têm todos os mesmos tamanhos e os mesmos espaços de letras, mas eles têm cores diferentes. Então, vamos ver. Usamos h2. Então, para h2, precisamos definir font-size. Deve ser 100 pixels, mas também devemos criar classes que nos ajudarão a diferenciar os títulos e poderemos adicionar cores. Então, minha proposta é adicionar classe a toda a seção. Então, a próxima equipe de seção, class="minha equipe”. Lembre-se, que você pode criar espaços enquanto adiciona o nome da classe e estamos chegando à última seção, contato. Então, podemos escrever combinar seletor como obras h1, h2, deve ter essa cor. Minha equipe h2 deve ter cor diferente e a última seção contato cor h2. Vamos refrescar. Contato, então adicionando, salvando. Temos trabalhos. Temos minha equipe e contato. Então, agora, podemos cuidar dessas rubricas. Todos têm a mesma cor aqui. Este é diferente. Mais uma vez, precisaremos criar seletores combinados. 18. Tipografia e cores — parte 2: Então, vamos agora criar styling para h3. Então, h3 tem tamanho de fonte 50 pixels. Para obras, tem cor deste. Para a minha equipa, tem uma cor diferente. Como pode ver, é azul, não verde. Vamos salvá-lo, e sim, este é o único. As outras alterações que são necessárias é o h4. Então, h4 tem seu fundo e cor. Então, estamos escrevendo h4, tamanho da fonte 32 pixels. Cor, temos cor de fundo. Deixe-me salvá-lo e atualizar. Estamos muito perto, mas não precisamos disso, mas se vemos nas ferramentas de rascunho, o cabeçalho é um elemento de bloco, então leva toda uma largura. Temos que configurá-lo para exibir inline-block. Sim, e precisamos redefinir todas as margens. Nós também gostaríamos de adicionar preenchimento, então teremos mais espaço em torno do texto e dentro do recipiente turquesa. Então, vamos adicionar 10 pixels. Deixe-me ver, há apenas alguns deles, é como três pixels. Deixe-me copiá-lo e colar no código que está lá. Salvando. Estamos quase lá. E quanto aos links? Há espaçamento de letras e tem cor diferente. Então, todos os links terão espaçamento, dois pixels, cor e tamanho, 18 pixels. Ele não tem o sublinhado no projeto, e é ousado. Então, sublinhe sua decoração de texto. Então, precisamos reiniciá-lo e, claro, negrito do peso da fonte. Acho que podemos aumentar o espaçamento das letras. Eu fiz o errado, então, mudando. Estes são os links. Também podemos ver a mudança no corpo do texto porque para obras, é verde. Então, vamos criar isso para trabalhos. A cor é esta. Ele mudou. O texto aqui é bastante espremido, então eu gostaria de adicionar uma altura de linha maior para adicionar mais ar. Então, vamos definir que para cada parágrafo, a altura da linha será 134%. Então, agora é mais fácil vê-lo. Vou copiá-lo e colar. Refrescante. Nas próximas lições, vamos trabalhar nos ajustes finais de layout. 19. Ajustes do layout — parte 1: Agora, vamos nos concentrar na parte superior do layout, para tê-lo muito semelhante ao que temos no projeto. Então, eu gostaria de ter duas caixas. Como podem ver, temos mais espaço ao redor. Aqui, podemos vê-lo. Então, vamos precisar adicionar o recipiente para cabeçalho e parágrafo, e vamos precisar ter um recipiente para a imagem e a legenda. Então, vamos olhar para cima para o índice, vamos procurar o col esquerdo e o col direito. Agora, vamos criar div para a seção de saudação e a seção de imagem. Então, vamos chamar o contentor superior, estamos fechando a div, tendo o cuidado de ter a nossa coluna limpa, você pode copiar esta div, e adicioná-la à coluna direita. Agora, precisamos criá-lo em estilos. A ordem em CSS realmente não importa, mas é bom mantê-lo de uma forma lógica para que possamos começar com os elementos muito básicos na parte superior e mais tarde tem cabeçalho e vamos para a parte inferior para o rodapé. Então, vamos voltar para a nossa nova turma, que é o melhor contêiner, ok. Então, agora vamos adicionar propriedades CSS à nossa classe de contêiner superior. Eu medi que ele deve ter largura de cerca de 500 pixels. Estou salvando e atualizando a página. Quase pronto, agora precisamos centralizá-lo usando a margem zero auto, economizando e estamos muito perto. Precisamos adicionar mais espaço entre a imagem e a borda superior e também precisamos diminuir o espaço entre o cabeçalho e o texto. Então, eu estou verificando os espaços, e então eu posso ver que o título tem margem. Então, se eu editar para zero, você pode ver que há [inaudível]. Também podemos adicionar altura para col esquerdo e col direito. Podemos definir a altura mínima deve ser 90vh, que é uma altura viewport. Isso significa que levará 90 por cento da janela do nosso navegador. Então, podemos ter esse efeito que podemos ver isso lá como uma capa e se rolarmos para baixo, os projetos estão abaixo. Então, vamos adicionar isso, esquerda e direita col, altura 90vh, unidade de altura viewport. Esqueci-me de adicionar margem zero a qual? E agora precisa centralizar esses elementos. Vamos usar flexbox. Infelizmente, eu não vou entrar em detalhes, mas apenas siga meus passos. Então, vamos precisar adicionar ao nosso col esquerdo e direito col, esta propriedade flex display. Então, vamos voltar para a esquerda col e direita col, selecione-os e digite display flex. Significa que Flexbox será um voo. Caixa flexível nos ajuda a alinhar itens para centrá-los horizontalmente ou verticalmente. É uma coisa muito útil por isso, se você gosta de explorá-lo mais, você está totalmente encorajado. Também queremos centralizá-lo no eixo principal, que é o eixo horizontal e também no eixo vertical. Vamos salvar e atualizar. Os itens são centralizados. Está bem. Então, agora, vamos nos concentrar na seção do meu trabalho. 20. Ajustes do layout — parte 2: Então, agora vamos nos concentrar em sobrepor esses cabeçalhos na imagem. Basta olhar para o projeto e você saberá instantaneamente qual é o nosso objetivo. Então, para fazer o bem, preciso falar sobre posições muito rapidamente. Então, vamos usar posição relativa e posição absoluta em CSS. Então, para a imagem, vamos aplicar uma posição relativa e para os títulos, posição absoluta. Como você pode ver, ele se foi, mas não se preocupe vamos adicionar top zero, esquerda zero e z index um e voltar. De repente, temos nosso título sobrepondo a imagem. Então, graças a isso que aplicamos o recipiente pai como nossa posição relativa e este elemento que tem que sobrepor o pai da posição absoluta, podemos alcançar este tipo de efeito. Então, vamos aplicá-lo em nosso código. Vamos procurar o abacaxi. Sim, estamos aqui. Então, precisamos adicionar classe para a imagem. Então, seria imagem de obras e precisamos adicionar isso a cada imagem que temos na seção de trabalho, e precisamos criar classe sob obras. Então, funciona imagem. Então, funciona img, posição relativa e para cada h4 na seção de trabalhos, aplicamos posição absoluta, índice z um. Vamos atualizar a página. No projeto, o título está sobrepondo a imagem, mas também está além dela, então podemos fazer adicionando top, digamos, menos cinco pixels. Então, vamos ver. Sim, é um pouco melhor, mas acho que seriam 25. Isso é muito melhor. Então, vamos copiá-lo, colá-lo e salvar. Outra coisa é que temos espaços entre as imagens, e se compararmos com o nosso projeto, você pode ver que as imagens aqui são adjacentes umas às outras. Podemos fazê-lo adicionando classe sem sarjeta. Classe sem sarjeta já está definido na grade CSS do Bootstrap. Então, a coisa que precisamos adicionar é classe sem calhas e nós adicionamos, por exemplo, à nossa linha e graças a ela, a calha entre as colunas e linhas, que geralmente é de 15 pixels em termos de preenchimento horizontal, à nossa linha e graças a ela, a calha entre as colunas e linhas, que geralmente é de 15 pixels em termos de preenchimento horizontal, será redefinido. Então, vamos tentar. Então, estamos tendo nossa seção de trabalho. Estamos adicionando a primeira linha. Então, estamos adicionando calhas sem calhas. Desculpe. Vou copiá-lo e colá-lo no segundo item e no terceiro. Estou salvando e atualizando a página. Bem, você pode ver que algo mudou, mas as imagens ainda estão distantes umas das outras. Vou usar DevTools. Agora, é melhor, mas talvez eu coloque no fundo para que você possa ver que nós queremos diminuir este espaço. A razão para isso é provavelmente a largura da imagem porque esta é a imagem e esta é a coluna inteira. Então, a coluna é maior. Então, precisamos esticar essa imagem totalmente para o contêiner. Então, adicionamos com 100 por cento e a imagem é ajustada. Isso é ótimo, mas agora precisamos fazer outra coisa que é adicionar preenchimento a todo o texto porque, como você pode ver, ele gruda no lado esquerdo da imagem. Então, deixe-me copiar isso e adicioná-lo ao works-img. Então, agora, para cada rolo de obras, precisamos criar div que irá envolver o texto aqui e este e este. Então, abrindo o código. Este é o nosso primeiro trabalho e aqui temos o texto, então crie calhas extras da classe div. Teríamos que fechar a div, é claro. Nós copiamos e colamos para as outras seções e fechamos também. Agora, é claro, temos que criar essa classe e definir propriedades CSS. Então, são calhas extras e queremos ter preenchimento zero de cima e de baixo e 60 pixels da esquerda para a direita. Vamos atualizar a página e finalmente nosso texto tem preenchimento. Nós também podemos verificar no DevTools, calhas extras e você pode ver que há 60 pixels preenchimento. Comparando-o com o projeto, podemos ver que este texto está à esquerda e este texto está à direita, e também este texto está no lado direito e não à esquerda. Então, para isso, estaremos usando texto alinhado com as calhas inteiras. Vamos alinhar um texto. Então, precisamos aplicá-lo aos nossos estilos. Podemos criar classe, alinhado à direita, alinhar texto. Adicione isso ao nosso trabalho que está no meio assim o segundo. Estamos adicionando alinhados à direita, salve-o, atualize e está feito. Então, aqui as últimas coisas na seção de trabalho é ter os títulos no lado esquerdo e no lado direito. Então, aqui está à esquerda e aqui à direita. Então, estamos levando branding e celular. Se adicionarmos, direito zero, porque é posição absoluta, modo que o texto alinhado não funcionará como no exemplo anterior, posso mostrar-lhe, mas isso não funciona. Então, precisamos adicionar zero direito, para que ele irá posicionar o nosso elemento para o lado direito máximo da extremidade mais distante, assim que criamos seletor agora, funciona h4, classe alinhada à direita será zero. Então, isso significa que me encontrar seção com classe de obras e me encontrar h4, nesta seção que tem classe funciona e que h4 deve ter esta classe. Também precisamos adicionar a este H4. Então, este é H4 na segunda linha dos trabalhos, também precisamos adicionar essa classe, alinhada à direita. Está tudo bem. Estou atualizando a página e está feito. Então, trabalha seção é feito, Olá seção é feito e agora é a hora para a minha equipe. 21. Ajustes layout nas seções inferiores: Agora é a hora da minha equipe, e contato, e o último, rodapé. Então, comparando com o nosso site, o que temos que trabalhar é o espaço entre as imagens e o espaço que o cabeçalho tem do topo. Então precisamos adicionar margem às imagens na seção de equipe. Então, podemos adicionar class="img-margin” e podemos adicionar classe img-margin, e teremos margin-bottom, digamos 20 pixels, e precisaremos apenas atualizar, e também, precisaremos redefinir a margem que está em h3, margem zero. Então, vamos adicioná-lo à nossa seção de equipe, e temos um espaço maior entre o cabeçalho e o texto. Então, na verdade, podemos adicionar margem zero, que é superior, zero que é margem da direita, 50 pixels ou até mais, 90 pixels da parte inferior ou talvez vamos ter menos, 70 pixels e zero pixels. Este é o atalho. Então minha equipe H3, está aqui. Salvando. Começamos isso em nossa nova linha, então também devemos adicionar uma pausa como esta. Refrescante e nós temos, mas a altura da linha é muito grande, então vamos mudá-la para 130 ou talvez 100 na fonte. Sim, 100 de altura de linha, 100 será suficiente. Quase lá. Também podemos ampliar o espaço entre as imagens para que o texto fique alinhado com as imagens. Então img-margin, vamos adicionar 40. Ainda não está lá. Vamos adicionar 60. É um pouco melhor. E também podemos adicionar com 100 por cento. Ok. Então agora vamos nos concentrar no contato. Com certeza, precisamos adicionar fonte em negrito ao endereço, possamos usar nova tag, que é forte. Então nós adicionamos forte. Isso significa que o texto estaria em uma versão mais ousada. É aqui e rodapé. Então rodapé deve ter alturas diferentes. Deve ter antecedentes e vamos verificar o que mais. Sim. Então deve ter pelo menos 200. Sim, então nosso rodapé tem fundo, é maior, e há um espaço entre contato e rodapé. Então não temos isso em nossa página, então vamos adicioná-lo. Então, no rodapé, digamos que a altura será de 220 pixels pelo menos. Vamos ter backround e eu vou mostrar-lhe como adicionar fundo em CSS. Vamos limitar para adicionar a função url e o caminho para a nossa imagem, que é img e socialmedia.svg, mas estamos aqui em CSS, então precisamos voltar para a pasta principal e, em seguida, digite img. Voltamos usando dois pontos e slash. E agora, estamos aqui na pasta atual, então estamos inserindo img e tirando a imagem adequada, então socialmedia.svg. Funciona, ótimo, mas não queremos que nossos antecedentes se repitam, então não repita. Gostaríamos de esticar nosso plano de fundo, que o tamanho do plano de fundo contenha ou talvez o tamanho do plano de fundo 60 pixels, 60%, mas a posição do plano de fundo seria centralizada. Então, esta é a imagem de fundo, e graças a ela, seremos capazes de ter imagem de fundo e cor de fundo porque se você excluir imagem, ela irá sobrescrever a cor de fundo, então lembre-se sobre isso. Estamos muito perto. Também precisamos adicionar brancos de cor. Podemos centralizar o texto porque parece melhor. Também podemos adicionar caixa flexível para centralizar os elementos, então temos esse preenchimento flexível, de conteúdo justificativo, centro de itens de alinhamento. Perfeito, e margem de cima para aumentar o espaço entre as imagens da seção de contato, digamos 60 pixels, pixels, e estamos prontos. Estou copiando todo o código e colando no rodapé. Salvar. Este é o nosso site codificado. A última coisa que vamos fazer é adicionar links à nossa navegação. 22. Adicionando links de navegação: Então, agora vamos vincular a navegação à seção de nossa página. Mas primeiro, vamos para o navegador, e vamos mudar para olá, e funciona, e minha equipe, ok. Então, para fazer isso, é claro, precisamos adicionar um, então a tag hyperlink. Opa, o erro foi meu. Ok. Precisamos criar identificações. Então, a seção onde vamos vincular terá ID. Então, temos esta seita o cabeçalho, que é o nosso olá. Então, nós escrevemos id hello, e id é passo para um hash. Então, temos classe, é o ponto, e para id temos haxixe. Então, será hash Olá para ele funciona temos trabalhos id. Identificação é uma coisa única. Então, é apenas um ID, quer um ID específico na página. Então, temos um ID de saudação, um ID de trabalho, e podemos ter muitas ocorrências da mesma classe CSS, mas para ID não é possível. Claro, nós temos myteam id, myteam, e contact id id contact contact. Então, vamos ligá-lo. Trabalha na minha equipa, contacto. Vamos atualizar a página. Como podem ver, as estrelas mudaram. Isso aconteceu porque criamos um seletor. Então, todas essas regras são aplicadas a todos os oito. Então, vamos precisar reiniciá-lo. Pode limitar este oito apenas para a seção de trabalho. Então, deixe-me encontrar este A. Então, podemos escrever que ele funciona apenas para a seção de trabalhos. Então, para todos os A's que estão na seção de trabalhos. Então, quase lá, não perdemos esse estilo para os links aqui na seção de trabalhos. Mas, agora nossos links são azuis, e não queremos que aconteça. É por isso que cada navegador, por padrão, tem um azul. Precisamos aplicar nossa cor de LE. Então, podemos adicionar navegação LEA, aplicar essa cor. Você pode remover essa cor daqui, atualizar e quase lá. A questão é que queremos nos livrar do sublinhado. Então, sem decoração de texto. Acho que é isso. Então, deixe-me fechar as ferramentas de desenvolvimento, e deixe-me tentar se funcionar. Funciona? Então, você pode navegar pelo site. Então, é como uma página de destino. Você gosta? Espero que sim, e espero que tenha se divertido muito ao colocar este site comigo. Vou mostrar-lhes diferentes versões de cores e tipografia na próxima lição, e será uma das últimas lições ouvindo essas aulas. Estou tão feliz que fique comigo por tanto tempo. Eu adoraria ver suas páginas, então, por favor, poste-as na seção da comunidade. 23. Palavra final e outras versões do site: Parabéns por terminar minhas aulas. Estou super orgulhoso de você, e espero que você goste, se você está feliz com o resultado final, seu site. Então, preparei duas outras versões para você. Eu só mudei cores CSS e tipos rostos para ilustrar que você pode muito facilmente reutilizar esta Olá cores, este modelo, este modelo HTML para seus próprios fins. Então, que você pode escolher seu próprio estilo. Então, é assim que nosso site Hello Colors se parece. Agora, de acordo com o meu projeto. Mas você também pode mudar a cor em gradientes, mudar o tipo de faces e instantaneamente muda seu estilo e sua vipe, e outra versão, a azul. Então você pode fazer um monte de experiências com ele e eu espero que você tenha se divertido. Meu objetivo não era ensinar HTML e CSS, mas criar um site para você. Eu também preparei um aulas mais curtas. Então, se você quiser se divertir com animações CSS e SVG, não hesite em se juntar a elas. Eu adoraria ver seus sites chegando. Então, deixe-me saber escrevendo para mim ou postando na seção da comunidade. Obrigado mais uma vez e espero vê-lo nas próximas aulas.