Programe seu próprio portfólio - Noções básicas de HTML e CSS

1. Introdução: Oi, meu nome é Aga e sou designer, mas também sei codificar. Nessas classes vamos para o portfólio de designers de código, o que significa que vamos aprender básico de HTML e CSS implementando o layout passo a passo. Os designers devem codificar? Bem, todo mundo tem sua própria resposta. Vou mais longe neste debate. Meu objetivo não é torná-lo um desenvolvedor, meu objetivo é mostrar que o código é uma ótima ferramenta para designers de UI e UX expressarem suas idéias no ambiente real para os projetos, que é um navegador web. Após o curso, você será capaz de melhor mão de seus projetos para desenvolvedores e melhor falar seu idioma. Em resumo, você vai aprender tags HTML, conceitos básicos e propriedades CSS, implementar fontes do Google no site e usar devtools em um navegador da Web. O curso é dedicado a designers de UI e UX que gostariam de começar a aprender HTML e CSS através de exemplos práticos. Conhecimento prévio de codificação não é necessário. Vamos cobrir o básico passo a passo, para que você possa acompanhar facilmente. Espero que você se divirta e, finalmente, explore que a codificação é muito útil. Vejo você na primeira lição. 2. Noções básicas de HTML: Bem-vindo à primeira lição, vamos abordar algumas coisas cruciais para começar nossa jornada de codificação. Em primeiro lugar, vamos aprender alguns conceitos básicos de codificação em HTML CSS, e uma vez que estamos familiarizados com eles, vamos começar nosso projeto que é um portfólio. O que vamos precisar é de um editor de código, eu recomendo baixar Atom. Atom é um software livre que é muito simples de usar. É um editor de código e você pode baixá-lo para um Mac, PC ou se você é um usuário Linux. A próxima coisa é o seu navegador favorito. Eu uso o Chrome, mas fique à vontade para usar o Firefox. A última coisa que precisamos é de DevTools. DevTools nos ajuda a navegar pelo nosso código e experimentar o CSS diretamente em um navegador da web. Mas não se preocupe, por enquanto, vamos cobrir todos os detalhes durante as aulas e exercícios. Nós também vamos usar um pacote com os materiais que eu preparei para você. Temos arquivos e duas pastas. Temos o exercício um no portfólio. No portfólio, você vai encontrar alguns ativos, imagens e modelo HTML índice que você está indo para usar os exercícios futuros. Você pode baixar o pacote com os materiais da seção fonte no site do curso. Vamos mergulhar na estrutura do documento HTML, para ver como um site muito simples é construído. Cada site começa com o Doctype. O que é Doctype? É declaração guia documento, e define que este é o documento HTML real. Ele também dá informações ao navegador de que este é o site que deve ser processado. Ele também fornece as informações sobre a versão do documento HTML. Por enquanto, tome isso como garantido. Não vamos entrar em detalhes sobre isso. próxima coisa é o pai de todas as tags HTML, que é HTML. Como você pode ver, é tag aberta, na segunda linha, e na última linha do documento, temos a tag de fechamento de HTML. Ele dá informações que estamos realmente escrevendo código HTML, e este é o documento HTML. HTML tag é seguido por cabeça e corpo. O que é entre meio texto? Tudo o que é colocado lá, na verdade não é exibido em nenhum lugar, mas é muito crucial em termos da pesquisa do Google e do navegador. Temos o título, tag e o título mostra o título e o navegador da web. Temos também alguns links e importações para arquivo externo e interno. Mas não se preocupe por enquanto, temos a seção da cabeça coberta. O que sobrou? Este é o corpo e entre as tags de corpo, colocamos tudo o que é gerado no site, como cabeçalhos como h1, parágrafos como p, texto, listas, imagens, o que você quiser. Nós também podemos usar a analogia para lembrar, quais são os ingredientes do site, porque temos apenas como humano, cabeça e um corpo seções. A pergunta que você pode ter é, como você realmente aprende todas essas tags HTML? Você os aprende de cor? Na verdade, a melhor prática é apenas codificar e aprender observando alguns exemplos. prática torna o mestre, então não há nenhum ponto em aprender todas as tags no início distante. Selecionei algumas tags HTML e elas são as mais populares, então vamos usá-las em exercícios. Você está pronto para o nosso primeiro exercício de codificação? Vamos para a próxima lição. 3. Primeiro exercício em HTML: melhor maneira de aprender a codificar é colocar a teoria em prática. Vamos começar com o primeiro exercício. Vamos abrir o editor Atom, onde você pode ver é a tela de boas-vindas. Além do Atom, também precisamos Atom plugin que nos ajudará a ver facilmente as mudanças que estamos fornecendo em código. É chamado de visualização ao vivo, e precisamos instalá-lo pesquisando no Google. Vamos digitar Atom live preview no navegador da web. Abra o primeiro link e clique em “Instalar”. Ele vai nos pedir para abrir nosso software, o que é bom, e nós estamos clicando em “Instalar”. Agora podemos ver que o plugin está instalado, então estamos felizes em continuar. Eu posso fechar agora para a janela de configurações e guia de boas-vindas também. Queremos criar arquivo HTML, como podemos fazê-lo? Bem, basta clicar em Command N, ou Control N. Eu cliquei em Command S para salvar o arquivo e estou procurando minha pasta de pacotes. No exercício 1, eu quero criar o arquivo index.html. Isso significa que este será um documento HTML, e clicando em “Salvar”. Nosso documento HTML está vazio agora, precisamos preenchê-lo com algumas tags HTML. Precisamos começar com declaração DOCTYPE, então eu estou escrevendo, DOCTYPE html e HTML tag, abertura e fechamento. Entre estas etiquetas, temos as duas secções. Você se lembra deles? A primeira cabeça e a segunda um corpo. Na cabeça podemos colocar agora o título da nossa página, que é Exercício 1. Salve isso. Nós instalamos o plugin de visualização ao vivo, então vamos ativá-lo. Navegamos até o átomo e clique em “Pacotes”. Procure o HTML de visualização. Nós clicamos em “Ativar visualização”. Agora a janela está aberta e no lado direito você pode ver nosso site. Está vazio agora porque não há nada escrito no corpo. Mas se escrevermos, por exemplo, Olá. Salve isso. Ele irá gerar automaticamente todas as alterações que fizemos. É muito mais fácil para nós ver o que está acontecendo na web. Mas, queremos usar algumas tags HTML. Vamos embrulhar este texto Hi lá com h1. H1 significa título do primeiro nível. Podemos ter algumas rubricas. próximo é o h2, então o título do nível 2 e podemos escrever assim, bem-vindo ao curso. Claro que precisamos fechar a tag e você verá no lado direito que temos um cabeçalho maior e um menor. Que tal colocar um parágrafo aqui? O bloco de texto é enrolado abrindo p e um p de fechamento . Claro que podemos copiá-lo e duplicar. Temos agora dois parágrafos. Se você quiser escrever um link, por exemplo, para o site externo, vamos usar uma tag. Estamos escrevendo a. Entre uma tag, vamos escrever a tag que é exibida no site. Por exemplo, este é o link para o meu site. Você pode ver que ainda não está acontecendo. Precisamos definir um atributo para uma tag. Atributo é algo que aparece logo após o nome da tag, e para um temos href, e em href colocamos o endereço do site. Por exemplo, estou adicionando meu Instagram. Estou vendo que o link está sublinhado em uma cor azul. Este é o estilo padrão adicionado pelo navegador da Web. Se eu clicar nele, estarei no meu Instagram. Para voltar ao seu site, basta clicar em Comando S na janela HTML do índice. Agora estamos de volta ao site. Para navegar facilmente pelo código e lê-lo facilmente, podemos envolver todos os elementos dos códigos de linha exibidos aqui para clicar em “View”. Seria muito mais fácil para nós escrever e ler o código. Temos os títulos, parágrafos, temos o link. Que tal exibir lista em nosso site com marcadores? Toda lista começa com a tag de abertura. Ul significa lista não ordenada. Estamos abrindo e fechando. Claro que temos os elementos das listas, por exemplo, HTML, CSS, div tools. Onde você pode ver é que cada elemento da lista começa com o marcador. Se você gostaria de alterá-lo para números, precisamos aplicar uma tag diferente que é ol, que significa lista ordenada. De repente, temos os números. Que tal anexar uma imagem ao nosso site? Podemos aplicar img tag, e é bom saber que img é na verdade uma tag vazia. Significa que ele se fecha dentro da tag, então não escrevemos dessa maneira. Ele não tem um conteúdo dentro. Fechamos esta etiqueta assim. Um img tem vários atributos que precisamos definir para que a imagem apareça. O primeiro é src, que significa fonte, e aqui escrevemos o caminho para a nossa imagem. Outro atributo é alt, que é o texto alternativo que será exibido se sua imagem não puder ser carregada. Também é bom saber que é melhor para nossa acessibilidade fornecer um texto, porque alt é lido por leitores de tela para pessoas que não conseguem ler sua página assim como nós. Vamos colocar o caminho através da nossa imagem. Queremos exibir coding.jpg. É o arquivo que está aqui na estrutura de todos os nossos arquivos. Nós apenas escrevemos o nome dele, é coding.jpg. A extensão é muito importante. Agora podemos ver que a imagem é exibida. Claro que podemos copiá-lo e ter as imagens. Precisamos também de fornecer o texto alternativo. Esta é a imagem promovendo minhas aulas. Não conseguimos ver o texto alternativo em lado nenhum. Mas se mudarmos o nome, por exemplo, adicionar um, vemos que a imagem não pode ser carregada porque tal arquivo não existe. Mas pelo menos nos dá a informação que o autor queria apresentar aqui. Podemos ler isso, esta é a imagem promovendo minhas aulas. Agora estou voltando ao nome do arquivo apropriado. Neste site, você exerce a escrita de linhas de código muito simples. Há toneladas de outras tags HTML. Mas vamos aprendê-las passo a passo. A última tag que eu quero praticar nestas lições é div. Div é de alguma forma uma tag muito genérica para que possamos usá-lo para muitos fins diferentes. Podemos usá-lo para criar algumas colunas, alguns elementos do site. Nas próximas lições, seria muito mais fácil para você entender por que realmente precisamos div. Em div podemos colocar algumas etiquetas de ordem, então vamos fazer a próxima coisa. Podemos ver que div é na verdade o pai da lista ordenada. Posso mudá-lo para não ordenado para ter duas listas separadas. Eu também mencionei sobre ferramentas div. Como podemos lançá-los e para que servem? Temos de voltar à nossa pasta. Estou na pasta do pacote e estou abrindo o exercício 1. Nós temos o nosso index.html, e eu vou abrir este arquivo no navegador da web. Estou usando o Chrome. O que vou fazer agora é abrir as ferramentas div. Posso fazer isso clicando com o botão direito do mouse em Inspecionar. Ou posso usar o atalho que é Command Option I ou Control Option I no Windows. Inspecione e vejo o meu código HTML aqui. Ferramentas div deslocam todo o código, e eu posso navegar facilmente através dele. Eu também posso selecionar alguns elementos particulares do site e ver onde está o código real responsável por gerar este elemento. É muito útil e bem arrumado. Espero que você o use muito. Outra coisa que eu gosto sobre ferramentas div é que podemos facilmente experimentar com nosso código. Por exemplo, posso remover alguns elementos, posso alterar o texto, e também posso adicionar algumas coisas novas, como dois parágrafos. Mas a coisa muito importante que você precisa lembrar é que todas as mudanças que fazemos são mantidas no arquivo local, na verdade, no armazenamento local do navegador da web. Se atualizarmos o site clicando em Command R ou Control R em um PC, você verá que o site retorna ao estado anterior. É por isso que não pegamos todas as alterações feitas nas ferramentas div e não as introduzimos em nosso arquivo HTML. Se você gostaria de fazer algo diferente com esta linha de código e substituí-lo, por exemplo, Olá. Para mantê-lo por mais tempo, você também precisa voltar para o editor Atom e alterá-lo também aqui. Estou salvando, voltando para o navegador da web e atualizando e eu tenho este texto de saudação substituído. Ferramentas div também são muito úteis quando se fala de estilo, s, mas vamos entrar nele na próxima lição. 4. Primeiros passos com CSS: Nesta lição, vamos nos concentrar no CSS, então estamos enviando nosso site para o estilista, graças à madeira, nosso site terá algumas cores, finalmente. Como escrevemos CSS? Bem, nós precisamos realmente escrever, criar um novo arquivo. Vamos voltar ao átomo, e precisamos criar um novo arquivo e salvá-lo, Command S como styles.css. Dot CSS extensão é muito importante porque dá a informação de que este é o arquivo folha de estilo em cascata real e podemos usá-lo para importar os estilos no site. Estou escrevendo styles.css, mas você pode escrever isso também como mystyles, você pode chamá-lo como sempre que quiser, eu prefiro chamá-lo styles.css. Agora, estamos tendo nosso documento pronto. O que é CSS? CSS é outra linguagem que nos ajuda a estilizar alguns elementos do site e um objeto muito importante em CSS é chamado de seletor. Seletor seleciona alguns elementos do site que você cria e aplica algumas propriedades, como plano de fundo, cores ou famílias de fontes. Em HTML, estávamos falando sobre tags, então em estilos vamos ter seletores. Vamos criar o nosso primeiro. Por exemplo, gostaríamos de colorir todos os parágrafos, então precisamos escrever a tag que é responsável por parágrafos que é p, então eu estou selecionando todos os p ou parágrafos e escrevendo colchetes e dentro deles, eu escrevo alguns CSS propriedades. Por exemplo, cor, rosa. Uma coisa muito importante em CSS é terminar cada linha com ponto-e-vírgula, não se esqueça disso. Você também pode escrever mais seletores CSS, por exemplo, h1, então título, que é do primeiro nível terá outra cor, digamos salmão. Estou salvando usando o Command S ou Control S em PCs e bem, nada aconteceu. A coisa é que precisamos importar esses estilos e conectá-lo com HTML. Como podemos fazer isso? Bem, fazemos isso usando uma tag chamada link. Para link, temos um aplicativo específico para buttes como rel que significa relação e é stylesheet. Nós também escrevemos href, então o caminho para nossos estilos que é styles.css, e você pode ver que o site tem novas cores que é cabeçalho de salmão e parágrafos rosa, então nossos estilos começaram a funcionar finalmente. Vamos resumir brevemente o que fizemos. Criamos outro arquivo, styles.css, criamos dois seletores, seletor para parágrafo e seletor para cabeçalho, e também vinculamos nosso arquivo styles.css no documento HTML. Claro, podemos adicionar muito mais propriedades para tornar nosso site ainda mais colorido. Podemos adicionar fundo para cada parágrafo, por exemplo, amarelo. Nós o salvamos e vemos que nossos parágrafos têm fundo amarelo. Também podemos remover sublinhado em cada um dos A, modo que cada um dos links, podemos escrever texto-decoração, nenhum, e também podemos mudar sua cor de azul para rosa. A pergunta que você pode ter agora é, como você pode saber que essa propriedade de cor realmente existe? Bem, você precisa aprendê-lo pela prática simplesmente, mas espero que durante meus exercícios você esteja muito mais familiarizado com os certos adereços CSS. Nós adicionamos alguns estilos, talvez vamos removê-lo porque parece que é um parágrafo. É azul, e temos dois parágrafos. Que tal fazer a diferença e destacar um dos parágrafos? Por exemplo, aplicando um plano de fundo diferente. Bem, se escrevermos p selector, isso significa que ele seleciona todos os parágrafos que o navegador encontra, então não podemos aplicar aqui outro plano de fundo porque simplesmente não vai saber qual do parágrafo deve ser azul e qual deve ser Amarelo. Para diferenciar alguns elementos, usamos classes CSS. classe CSS é uma noção muito importante, isso significa que podemos aplicar algumas propriedades CSS para elementos com a classe específica apenas. Vamos criar uma primeira classe, vamos chamar isso de destaque. A regra é muito simples, também criamos um nome, mas antes do nome, temos que adicionar o ponto. Dot significa que vai ser uma classe, então nós temos.highlight, nós lemos isso como destaque de classe e dentro de colchetes, nós adicionamos propriedades CSS, por exemplo, azul de fundo, eu estou salvando e meus parágrafos são ainda o mesmo, mesmo porque nós também precisamos aplicar classe CSS em HTML. Digamos que o primeiro p deve ser destacado, então deve ter o fundo azul. Estamos adicionando a p tag o atributo que é chamado classe, eo nome da classe, por isso é destaque. Eu estou salvando e ver que este parágrafo tem um destaque classe e casa que coroa azul, então tudo está correto eo outro parágrafo é amarelo. Se eu copiar este e colá-lo abaixo, ele teria os mesmos estilos apenas como o seletor p. Se adicionarmos esta classe com o último, você vai ver que a classe é aplicada. classe CSS pode ser usado várias vezes e também pode ser usado para vários elementos, por exemplo, para o cabeçalho. Não só estes parágrafos têm o fundo, mas também o título Olá. Você pode jogar com classes CSS e aplicar propriedades diferentes, como o tamanho da fonte. Digamos que queremos que a fonte seja de 20 pixels e, de repente, os parágrafos são maiores. Podemos mudar a cor para branco e você verá que ele mudou instantaneamente. A coisa muito interessante aqui é que este seletor inicialmente tem cor rosa, mas nós o substituímos, com o destaque da classe e adicionamos branco à sua cor. Vamos mudar agora para o navegador da Web, atualizar a página, e vamos dar uma olhada nas ferramentas de desenvolvimento. Este é o mesmo site que você estava vendo apenas um minuto atrás e se abrirmos as ferramentas de desenvolvimento, apenas para lembrá-lo de que estamos abrindo clicando com o botão direito do mouse em Inspecionar, ou você pode usar os atalhos Comando Opção I ou Control Alt I. Aqui precisamos mudar para elementos. Vemos aqui, o código HTML. Se eu destacar alguns elementos, por exemplo, o parágrafo, você pode ver que a classe de destaque é exibida aqui, e nos dá a informação de que este pedaço de código, este texto exibido no site aqui tem fundo azul, tamanho da fonte 20 pixels e cor branca. Eu posso comentar isso, significa que eu simplesmente não quero essas mudanças e ele volta para as configurações CSS anteriores. Se eu voltar novamente, você verá que a cor e o fundo do seletor p estão riscados para fora. Isso significa que com o destaque da classe, nós os substituímos, então é bom usar ferramentas de desenvolvimento para ver o que está acontecendo e quais mudanças são realmente aplicadas. Se criarmos outra classe, por exemplo, tamanho de fonte maior e definido para 40 pixels, vamos ver o que acontece se aplicarmos a este parágrafo. Como conectar duas classes? Bem, é fácil porque só precisamos adicionar um espaço entre eles e tentar nomear a segunda classe. Temos destaque e maior aplicado, e podemos ver que o último parágrafo tem um tamanho de fonte maior. Se mudarmos para ferramentas de desenvolvimento e se refere ao site, veremos que a classe maior substituiu o tamanho da fonte. Inicialmente, era de 20 pixels, mas com a próxima classe, maior, o novo valor foi aplicado, então as regras são simples. Se vamos usar mais classes com as mesmas propriedades CSS, basta lembrar que o que é definido como o último no documento styles.css teria o maior poder. 5. Brincando com mais propriedades de CSS: Nessas classes, vamos aplicar algumas propriedades CSS novamente. Vou mostrar-lhe uma configuração no editor Atom. Às vezes você precisa editar HTML e CSS ao mesmo tempo. Portanto, é mais fácil ter exibição de duas colunas no editor Atom. Agora estou fechando Preview. O que eu faço, eu clico em “Ver”, “Painéis”, “Dividir direito”. Graças a isso eu tenho as duas colunas, duas janelas próximas uma da outra. Em um eu quero ter estilos, que CSS, e no segundo índice HTML. Agora posso visualizar o código HTML e CSS ao mesmo tempo. E se eu quiser aplicar o plano de fundo para o meu site? E se eu quiser ter meu plano de fundo em uma determinada cor? Podemos facilmente fazê-lo aplicando seletor de corpo. Normalmente tentamos escrever estilos a partir do topo da parte inferior do site. Se o corpo é de alguma forma a mãe de todas as tags HTML, tentamos escrevê-lo no topo para que seja mais fácil para nós digitalizar estilos e digitalizar HTML. Faz sentido para nós que esta seja toda a estrutura. No entanto, o que eu gostaria de destacar é que, a ordem dos seletores específicos, não importa. A única coisa que você precisa lembrar é que, se tivermos dois, os mesmos seletores, mas escritos em lugares diferentes, e eles têm a mesma propriedade, por exemplo, cor. Aqui eu tenho azul e no topo eu tenho salmão, o que vai ser escolhido é aquele que está realmente escrito na última posição. Então h1 estará em azul em vez de salmão porque esta linha seria substituída. Estou deletando este, salvando, e temos o seletor de corpo. Gostaria de aplicar a cor de fundo. Esta é a propriedade que é responsável por alterar a cor do site. Podemos criar alguma cor, por exemplo, azul claro. Estou salvando, voltando ao meu site, atualizando, e certamente, meu site está em azul. Você pode perguntar como eu escolho as cores porque você é um designer e você gostaria de aplicar algumas cores menos sofisticadas aqui. Você pode colar aqui, hexadecimal, código hexadecimal. Se você não souber o valor agora, pode usar a paleta de cores nas ferramentas de desenvolvimento. Este é outro recurso muito útil que eu uso nessas ferramentas. Eu posso pegar o que eu estou satisfeito com, e colá-lo de volta no meu casaco. Salve, atualize e veja se minhas alterações são aplicadas. Infelizmente, nosso site não é muito bonito agora, mas tenha calma, estamos indo para a parte do portfólio muito em breve. Outra coisa que podemos aplicar em CSS são margens e enchimentos. Podemos ter uma influência sobre como o elemento é separado um do outro. Digamos que eu gostaria de ter um espaço maior entre a imagem e a lista que tenho aqui. Vamos experimentar um pouco com as ferramentas de desenvolvimento. Estou selecionando “Imagem” e gostaria de criar um seletor aqui. Estou clicando neste “Plus” no lado direito, e eu quero aplicar margem. Estou escrevendo margem, por exemplo, 50 pixels de cada um dos lados, então a parte superior, esquerda, direita e inferior. Posso ver, enquanto inspecionava este elemento, pairando sobre ele, que há uma moldura laranja. Mostra-me a margem que é aplicada. Se eu tivesse que tocar em “Computed”, este é o chamado modelo de caixa, você verá que aqui temos a margem e cada uma das bordas tem 50 pixels. Também podemos adicionar preenchimento, que é a margem interna. Por exemplo, 20 pixels para que o espaço entre a imagem e as listas seja aumentado. Nós também podemos adicionar fronteira. Um pixel da largura da linha de borda, queremos tê-lo sólido e na cor preta. Isso significa preto em código hexadecimal, mas também podemos escrever preto. Você verá que o preenchimento é o espaço interno entre a imagem em si e a borda. Você também pode verificar no modelo de caixa dizendo que, esta é a nossa imagem, estes são os estofos, nós temos a borda, e nós temos as margens também. Para manter essas alterações, precisamos copiar todo o seletor, voltar ao Atom e colá-lo em nosso CSS. Atualizando a página e as alterações são aplicadas. Claro, podemos jogar muito com CSS aqui. Mas eu acho que será melhor focar em nossos projetos de portfólio e colocar em prática nossos conhecimentos. Na próxima lição, estamos iniciando os projetos de portfólio, que significa que vamos desconstruir o layout passo a passo. 6. Começando nosso projeto de portfólio: Vamos mudar para a pasta que é chamada de portfólio. Está incluído no nosso pacote. Estamos no Atom abrindo a pasta inteira. Estamos clicando em “Pacote”, “Portfólio” e “Abrir”. Nosso portfólio está atualmente no Atom para que possamos ver toda a estrutura, toda a árvore da pasta. Estou clicando em index.html e, como você pode ver, já está escrito. Quero dizer, o esqueleto do site muito básico. O que vamos fazer é preenchê-lo com mais etiquetas no corpo, e com certeza precisamos trabalhar em estilos. Na pasta CSS temos style.css, que é empatia e espera por nossas propriedades. Temos bootstrap-grid.css. Esta é a grade que vamos usar, e é tirada da estrutura bootstrap. Não se preocupe com isso por enquanto. Vou explicar tudo nas próximas lições. Nós também temos alguns ativos que tem todo o texto que está incluído no portfólio, você possa facilmente copiá-lo e colá-lo no projeto. Temos duas imagens, dois arquivos. O que apresenta o portfólio, o layout real para o portfólio, o design gráfico e o outro que mostra os tamanhos de fonte para os elementos fornecidos. Mais tarde, você não precisa adivinhar, você pode facilmente aplicar esses números para os títulos ou parágrafos. Vamos ver como o portfólio se parece. Estou atualmente na pasta do portfólio. Estou abrindo ativos e layout do portfólio. Podemos ver aqui, que este é o site que vamos codificar, e há algumas seções, por exemplo seções descrevendo os projetos, como a seção com o contato. Nós também temos a navegação, texto de introdução, e alguns botões. Durante o curso sinta-se livre para usar seus próprios projetos, para usar suas próprias fotos, para usar seu próprio conteúdo. Mas você também pode usar o conteúdo que eu criei para este curso. O primeiro exercício que precisamos fazer com o portfólio é pensar sobre este esqueleto do site, sobre a marcação. Quais seções podemos ver aqui, e quais tipos de elementos estão incluídos. Precisamos de alguma forma desconstruir o layout e colocá-lo na mentalidade HTML. O que vejo aqui em cima é a navegação. Abaixo eu tenho todo o cabeçalho. Como a seção de introdução do site. Temos o título, algum texto, temos o botão e a imagem. Estas são as duas colunas. Tenho algo à esquerda, e algo à direita. Abaixo eu tenho outra seção que é uma lista de algumas habilidades de Jane. Abaixo dele, eu tenho três os mesmos elementos do layout, três as mesmas seções que apresentam projetos. Meus projetos do portfólio. Eu tenho um, com o fundo azul, eu tenho o segundo, com o fundo branco, e o terceiro exatamente o mesmo que com o primeiro. O que há de diferente entre eles? É a nossa praia que as cores, as cores de fundo, e também a composição. Aqui a imagem está à esquerda, e no outro exemplo essa imagem está à direita. Nós também vamos levar isso em consideração ao criar o site. No fundo, temos o rodapé com os direitos autorais. Vamos começar a escrever HTML para um que. Estou voltando ao Atom, e estou abrindo index.html. Estou tendo index.html aberto e eu também gostaria de ter layout de portfólio. Estou clicando em “Exibir”, “'Painéis”, “Direita”. Aqui, deixe-me abrir index.html. Terei a visão geral do layout, estou clicando aqui também, “Ver”, “Alterna Soft Wrap”. Minhas linhas de código estão empacotadas, então é mais fácil para mim escrever o código. Eu estou vendo o portfólio, e eu mencionei no início que o que eu posso ver é a navegação do topo. Eu tenho que dizer que há uma tag HTML específica dedicada à nossa navegação, que é chamado nav. Estou abrindo o navegador e fechando o nav. Na navegação eu tenho todos esses links para o site. Eu posso usar cópia de content.txt, eu vou colocá-lo nesta coluna, e eu vou copiá-lo e colar na navegação. Nós temos nossa navegação, mas cada um desses links de cada um desses elementos de navegação pode ser realmente um elemento da lista. Lista não precisa ser vertical, ela também pode ser horizontal. Vamos mudar na folha de estilo. Mas, por enquanto, basta escrever a lista usando HTML. Vai ser uma lista desordenada porque não precisamos de números, e cada um dos textos aqui vai ser um elemento separado da navegação. Temos contato, claro, a etiqueta de fechamento. Temos trabalhos, precisamos abrir e fechar. Temos experiência, e depois a próxima. Temos todos os elementos da lista. Como podem ver, temos aqui a longa fila. Não se preocupe com isso por enquanto. Vamos nos concentrar apenas no texto. Estou a guardá-lo. Este é todo o nav, e vamos abrir index.html. Estou na pasta do portfólio, estou clicando em “Abrir no Chrome”. Estou abrindo o portfólio, HTML, é chamado index.html e um navegador da web, e vejo que minha navegação está aqui, minha lista está lá também, e nós temos todos os elementos da lista. Veja o que vem a seguir. Temos a navegação coberta. A carga e navegação temos toda a seção de cabeçalho, é chamado cabeçalho. Usamos tag de cabeçalho. Entre cabeçalho vamos colocar o conteúdo dele. Temos o texto de introdução, o título h1. Podemos copiar, oi, sou a desconhecida daqui. Se quer saber como podemos quebrar o texto e colocar a desconhecida na próxima linha. Estou mostrando que podemos realmente usar br que significa pausa, e isso vai ser exibido em duas linhas. Basta lembrar que tag break, br nós usá-lo apenas para quebrar os blocos de texto e não para elementos, não para fazer margens ou espaços maiores. Para margens, ocultar e tamanhos, usamos propriedades CSS. Nós temos o título, e abaixo para o título, há uma lista de alguns sucessos ou pontos de carreira por Jane. Podemos novamente, copiar o texto e colocá-lo em lista desordenada. Eu estou abrindo tag, fechando, e nós embrulhamos cada um do texto com li, para torná-lo mais rápido eu estou apenas copiá-lo. Estou guardando e verificando o que está no meu site. Agora posso ver a navegação. Eu tenho Heather que tem algumas crianças, h1, lista desordenada, e alguns elementos da lista. O que vem a seguir? Dê uma olhada no portfólio, e vemos que sob a lista, temos o botão. O botão vai vinculá-lo em algum lugar, então vamos usar uma tag. Por enquanto, não sabemos para onde ele vai apontar, então podemos usar a empatia do atributo href. Entre as tags a abrir e fechar um, podemos escrever o texto que está em um projeto. Chama-se “me adicione no LinkedIn”. Posso ver que o link está sendo gerado em um site. Temos o lado esquerdo pronto. E a coluna da direita? Há uma imagem aqui. Vamos colocar uma imagem. Por enquanto, vamos pular a fonte. Podemos escrever essa desconhecida. Este apresentará Jane Doe, e fechando com uma imagem. Esta é a etiqueta vazia. Vamos ver a estrutura dos nossos arquivos. Estamos atualmente editando index.html, e vemos que Jane jpg está escondido na pasta img. O caminho para a imagem de Jane é o nome da pasta, barra e o nome do arquivo. É jane.jpg. Estou atualizando a página e ver que a imagem, isso parece brilhante. Não se preocupe por enquanto com a posição dos elementos e como eles estão sendo alinhados. Nós vamos ter isso coberto nos próximos módulos do curso. Se voltarmos ao layout, veremos que temos a parte do cabeçalho quase pronta. Só precisamos adicionar a legenda à imagem. Para isso, usamos uma tag especial em HTML que é chamado figura, e envolve a imagem, e também figcaption tag em que colocamos foto por Sam Manns em unsplash.com. Estou fechando a figura também. Eu quero manter meu código limpo, então é por isso que eu coloquei o toque aqui, e cruzei o código. Podemos ver facilmente que a figura é a tag pai de img e figcaption. Estou salvando, atualizando, e vejo que temos que legendar sob a imagem. Vamos continuar com a próxima parte do layout na próxima lição. 7. Criando as seções e os elementos restantes em HTML: Vamos cobrir o próximo elemento, as próximas seções do layout. Terminamos no cabeçalho, e agora estamos criando o próximo. Então, cabeçalho fecha aqui, e temos aqui as seções com a lista de habilidades. Vamos criar uma nova seção, é chamada tag seção em HTML. Temos o cabeçalho, que é muito específico para o layout. É o cabeçalho, na parte superior da página, e vamos para a próxima seção, a coisa geral. A seção incluirá a lista que está no conteúdo. Estou copiando e colocando em uma lista de pedidos. Novamente, cada um dos elementos da lista tem que ser embrulhado por Li tag. Estou fechando. Tudo parece correto, salvando, e vamos atualizar o site que temos. Agora temos a lista pronta, e aqui está a nossa secção. Voltando ao átomo. Na lista, temos três projetos. By the way, vou mostrar-lhe como criar comentários em seu código. Os comentários são muito úteis, porque você pode adicionar alguma nota pessoal lá. Você pode estruturar o código. Por exemplo aqui, esta é a seção do projeto, e eu escrevi um comentário usando esses caracteres. Mas também é fácil apenas escrever o texto, você quer comentar. Marque-o, clique em “Comentar” ou “Ctrl” e barra no teclado. O editor de código automaticamente falha em torno dele, esses caracteres específicos. Eu tenho projetos, e está esmaecido, então você vê instantaneamente que este é o comentário. Não vai ser visto no site, mas vai estar no código. Eu escrevo seção, e vou escrever aqui, projeto 1 e comentá-lo. Temos o projeto 1 aqui, e o que é insight? Temos a coluna da esquerda e a da direita. Na coluna da esquerda, temos o título, é h 2, porque já temos h 1, no topo. Este é o cabeçalho que tem o tamanho de fonte menor. Então aplicamos h 2. Vamos codificar este, o primeiro projeto. Temos a primeira imagem. Então estamos escrevendo, IMG. Qual é a fonte e alt? Bem, a fonte da imagem, vamos verificar aqui. Estou clicando na árvore de toda a pasta, a estrutura da pasta, e ver que é img e é chamado de cosméticos jpg. Preciso escrever o caminho específico para ele. É uma pasta img, cosméticos jpg, então eu estou escrevendo img/, então estamos entrando na pasta img, cosmetics.jpg. Aqui, podemos escrever cosméticos. Nós temos a imagem, mas novamente, precisamos adicionar uma legenda. Se você olhar para o topo, usamos tag figura, e temos legenda fig. Então vamos reutilizá-lo. Estou escrevendo figura como o pai, da imagem, fechando também. Este é o filho da seção. Então, inserindo também, figura e o que está faltando é a legenda da figa. Aqui estou adicionando, a legenda do contexto, que está faltando aqui. A Companhia Honesta em Unsplash. Vamos salvá-lo, atualizar o site, e eu tenho a imagem, e eu tenho minha legenda pronta. Estas são a tag de seção separada, mencionei sobre comentários. Você pode ver que eles estão marcados em verde aqui, e eles são exibidos no casaco, mas você não pode ver qualquer texto de palavra, projetos ou projeto 1, nesse site. Então não é gerado. Não se preocupe com isso. Estamos indo para o lado direito, que inclui h 2. Vamos copiar estratégia de branding para cosméticos femininos. Podemos usar o intervalo aqui. Coloque na próxima linha, e então temos o parágrafo simples com o texto que está aqui. Só estou copiando e colando. Esta é apenas uma versão moderna do Lorem ipsum. Vamos salvá-lo, e ver o que mais está faltando. Temos o botão. Chama-se ler mais. Então eu estou adicionando h tag, abertura, fechamento e, em seguida, ler mais, salvar, e eu li mais na parte inferior. Parágrafo, título. Você pode ver que, há uma ruptura entre estratégia de branding, e para cosméticos femininos. Então tudo funciona. Vamos continuar agora. Temos a segunda seção do projeto. Podemos escrever projeto 2, comentá-lo novamente, e criar seção. Aqui começamos com h 2, levar a experiência do usuário, design do aplicativo, h 2, fechando. Podemos usar quebra também, e depois parágrafo. Para um parágrafo, usamos Lorem ipsum. Mais uma vez, infelizmente, copiei demais. Então é assim. Temos que ler mais. Para torná-lo mais rápido, podemos copiar e colar porque é o mesmo elemento. O que está faltando é a imagem. Mais uma vez, podemos copiar a figura inteira, responsável por gerar a imagem e a legenda. Estou colando. Eu não mencionei sobre o espaço. Elas são as linhas no código HTML, mas você pode fazê-las quantas desejar. Isso não afetará a forma como o site é gerado. Se você precisa fazer algumas anotações pessoais, por exemplo, aqui nós adicionamos uma imagem com a legenda. Você pode, é claro, copiá-lo e usá-lo para seus próprios propósitos. Aqui só precisamos mudar o nome da imagem. Vamos ver, na pasta, é chamado de aplicativo de painel, então eu estou alterando o aplicativo de painel. Aqui temos que mudar tudo isso, bem como, aplicativo de painel, e a legenda, que é tirada a partir daqui. Salvando, refrescante, e temos a próxima seção pronta. Temos o Projecto 2 a abrir aqui. Em seguida, o projeto 3, o terceiro projeto da nossa lista. Mais uma vez, vamos ver. Começamos com uma imagem. Mais uma vez, podemos copiar e colar figura. Aqui, temos um app para iPad, em legenda diferente. Vamos verificar o nome do arquivo, precisamos pegar. É um aplicativo para iPad. Estou chamando de aplicativo para iPad. Pelo conteúdo, estou pegando a legenda. Mais uma vez, precisamos aplicar h 2, que é chamado app iPad para os artistas, quebra e parágrafo. Copie o texto inteiro. Estou guardando, e preciso fechar a seção. Esqueci-me de abrir a etiqueta de secção. Então, cada um dos projetos ganha com a tag de seção, e é claro, ele precisa ser fechado. Porque o nosso código pode ficar confuso. Estou atualizando o site atual e o navegador da web, e vejo que temos a imagem com a legenda, o cabeçalho, o parágrafo, e é o terceiro projeto. Estamos quase terminando o esqueleto do nosso site. O que mais está faltando? Vamos ver no portfólio. Podemos ver que este é o rodapé. Vou limpar o código. Estou criando rodapé, abrindo e fechando. Eu tenho o imposto que é muito grande. Eu acho que deve ser o título, então vamos usar h 2. Não se preocupe com os tamanhos por enquanto. Então, eu copio, qualquer pergunta, me encontre aqui, Jane. Estou colocando pausa. Eu também estou colocando a última linha do texto, que está na parte inferior da página. Eu copio, e coloco, em seguida, parágrafo. Salvando. Meu site tem atualmente o rodapé. Como você pode ver, não é muito impressionante, e há toneladas de trabalho a fazer, mas não se preocupe. Nós vamos entrar em cada elemento do site, cada tag HTML, e estilizá-lo, para torná-lo apenas como e adiar para cima, nós temos. Assim como os projetos que preparei para você. 8. Tipografia para web: Nessas classes, vamos fazer uma pausa do código HTML e vamos nos concentrar na tipografia web. Soa excitante? Eu realmente gosto de aplicar o Google Fonts no meu site, então vamos ver como podemos fazê-lo. O que eu preciso fazer é abrir o site fonts.google.com e estou procurando as fontes que são usadas no meu projeto. Existem duas fontes, a primeira é Inknut que eu usei para os títulos, é Inknut Antiqua. Então o que eu posso fazer é clicar em mais, então ele irá selecionar essa fonte, e eu tenho o painel que me mostra que a fonte está selecionada. Eu também tenho outra fonte que é chamado IBM Plex Mono, então este é o texto que eu usei para o corpo. Eu clico no ícone de adição também, e vejo que duas famílias são selecionadas. O Google Fonts nos dá as instruções sobre como podemos incorporar a fonte que usamos no site. A boa notícia é que temos muitos deles, para que possamos selecionar várias opções e vários tipos de letra, e eles são gratuitos e estão hospedados em servidores do Google. A opção padrão de incorporar a fonte é usar o código aqui. É um pedaço de tag HTML chamado link, que você já aplicou em seu site ao vincular estilos. Você também pode incorporar fontes usando CSS import, mas eu preferiria manter o primeiro, então vamos copiá-lo e colar o código na seção head do seu documento HTML. Significa que vamos voltar para Atom. Estamos em nosso documento HTML, e eu estou indo para o topo, para a seção principal do meu arquivo. Então eu tenho seção de cabeça, e sob a tag de link que eu já tenho com styles.css, estou fazendo a nova linha e colando todo o código que eu copiei do Google Fonts. Estou guardando e estamos quase prontos. Então, a coisa que precisamos fazer agora é realmente criar CSS. Precisamos criar CSS que irá aplicar as fontes que escolhemos para os elementos dados do site. Então vamos abrir CSS, style.css. Vai ser este prato na nova coluna. Na verdade, não escrevemos nenhuma linha de código CSS, então será a nossa primeira. A questão é que, se olharmos sob nosso projeto, lá temos Inknut Antiqua. Então este é um, o Serif Font decorativo que é aplicado aos títulos, a lista aqui, e é isso. letra IBM Plex Mono aparece em todos os lugares, exceto para os lugares onde o Antiqua vem. Então podemos fazer isso de tal maneira. Vou voltar para o Atom e escrever que todo o corpo, significa que todo o site terá IBM Plex Mono. Então vamos voltar por um tempo para o Google Fonts e ver como podemos especificar nossas fontes em CSS. Estas são as regras CSS que podemos aplicar ao nosso documento CSS. Esta é a propriedade font-family com Inknut Antiqua, e aqui é onde IBM Plex Mono, então eu copio o último porque eu quero usar IBM Plex Mono para todo o corpo do meu site. Então eu estou colando, e isso significa que todo o texto que aparece no corpo terá IBM Plex Mono. Vamos atualizar a página e ver se as alterações são aplicadas. Eu tenho uma nova fonte pronta, e isso é totalmente diferente do Times New Roman, e este é com certeza IBM Plex Mono. Se navegarmos em qualquer um dos elementos, podemos ver que a família de fontes IBM Plex Mono é aplicada. Se eu comentar, você verá que ele volta para a fonte padrão, que é Times New Roman. Tudo bem, mas eu também mencionei que no projeto, nós temos Antiqua usado para todos os títulos e a lista, então vamos aplicá-lo em CSS. Então H1, H2, e a lista que aparece aqui sob a navegação, que é esta, tem Antiqua. Por enquanto escreverei “ul li”. Então, podemos escrever o mesmo estilo para vários elementos HTML, e podemos dividi-los usando dois pontos. Então temos o mesmo estilo aplicado para H1, H2, e todos os elementos da lista “ul”. Então eu estou em fontes do Google e eu vejo que este pedaço de código iria aplicar Inknut Antiqua na minha tipografia web. Então eu estou colando para esses seletores. Estou salvando, atualizando a página, e ver que o título, a lista abaixo tem Inknut Antiqua aplicado. Infelizmente, eu também tenho essa fonte aplicada à navegação. Se eu comparar isso com o meu projeto, vou ver que aqui, eu usei IBM Plex Mono. Então, como podemos diferenciar essa lista de ferramentas, você se lembra de classes CSS? Espero que sim, então vamos aplicá-los. Vamos criar classe css, por exemplo, podemos criar a classe para esta lista e chamou-a de “Lista de habilidades”. Então eu tenho a classe chamada Lista de Habilidades. É o atributo em HTML, mas eu também preciso adicionar aqui na minha folha de estilo CSS. Então eu estou criando o ponto, que significa classe, e então o nome, é Lista de Habilidades. Eu quero que ele aplique Inknut Antiqua para este, então eu estou copiando toda a linha, salvando, e daqui eu removo “ul li”. Isso significa que esta fonte, Inknut, não será mais aplicada a “ul li”, então todos os elementos da lista. Então podemos copiar e salvar. Eu atualizar, e agora eu posso ver que finalmente toda a minha navegação está no IBM Plex Mono, ea lista sob a navegação está em Inknut Antiqua. Assim como no meu projeto, para tornar o meu código mais limpo e não repetível, eu vou apenas copiar esta classe, adicionar dois pontos, colar a lista e remover o último seletor. Portanto, esta regra significa que a fonte Inknut Antiqua será aplicada a todos os H1, a todos os H2, e todos os elementos HTML que têm uma classe chamada Lista de habilidades. Então é assim que adicionamos fontes do Google em nosso site. Isto é como nós importá-los para o documento HTML. Então, a primeira coisa que precisamos adicionar é a tag de link que tem os URLs para fontes específicas, e é gerada no site do Google Fonts. A segunda coisa é aplicar CSS com as regras indicadas mencionadas no site das fontes do Google. Então, por favor, lembre-se desses dois passos. Claro, para seus projetos futuros, você pode selecionar fontes, o que quiser. Há uma abundância de fontes em fontes do Google, então sinta-se livre para usar o que quiser e quando quiser. 9. Dispondo os elementos na grade definida: Nesta lição, vamos nos concentrar na grade. Vamos colocar nossos elementos do site de acordo com o layout. Finalmente, temos algumas colunas e algumas seções, então seria muito mais fácil para os nossos olhos olharem para ele. É assim que o nosso site parece atualmente,. O que precisamos fazer é colocar esses elementos em colunas. Se você compará-lo com o nosso layout, veremos que alguns elementos estão próximos uns dos outros e alguns estão separados. Para fazer isso, vamos usar grão de Bootstrap. O que é Bootstrap? Bootstrap é um kit de ferramentas de código aberto, é a biblioteca competente de front-end. É uma ferramenta muito grande e poderosa. No entanto, vamos usar apenas um pedaço dele que é grade. Nós não vamos codificar a barra de grade nós mesmos. Vamos usar uma biblioteca e podemos ajustá-la às nossas necessidades. Faturar os layouts seria muito mais fácil. Se você está curioso sobre o sistema grit, você pode abrir a documentação que está disponível em getbootstrap.com. Você pode ler sobre a velha teoria que está atrás da grade e Bootstrap. Mas digo-te as coisas mais importantes que precisas de saber para que resulte. Vamos voltar ao nosso documento HTML e vamos nos concentrar em HTML por um tempo. Se eu abrir toda a pasta, eu vou ver que eu tenho Bootstrap grade CSS. Você pode ver algum código lá fora. Tudo o que está escrito aqui em CSS. Mas eu não quero que você analise, memorize, ou aprenda. Nós vamos apenas usar a grade que é definida aqui. Se quisermos usar esta folha de estilo, também precisamos vinculá-la em nosso documento HTML. Temos o nosso styles.css, temos fontes externas, mas também precisamos de bootstrap. Eu gostaria de ligá-lo antes dos meus estilos. A questão é por que eu estou fazendo isso antes ou não como a última tag link? A resposta é que a grade Bootstrap pode ter alguns estilos que podem causar um conflito que pode realmente sobrescrever nossos estilos. Para tornar nossos estilos mais importantes, colocamos no último lugar em termos da folha de estilo que temos. Estou mudando o nome aqui. O arquivo é chamado de grade bootstrap. Desculpe, estou voltando ao meu HTML. Estou a guardá-lo. Minha grade de bootstrap é aplicada. Vamos ver se eu não vejo nenhuma mudança. Bem, na verdade, nada aconteceu ainda. Mas se eu cavar mais fundo em meu código HTML e seção chapéus, eu vou ver que Bootstrap grade CSS é aplicado. A pergunta que você pode ter é como podemos usar a grade Bootstrap. Na documentação que eles nos mostram como três colunas são criadas, podemos ver código HTML aqui com alguns atributos, que são classes, classes CSS, e vamos usá-los também. A primeira tag é div. Você se lembra de Div? Este é o contentor. Esta é a tag que é muito genérica e podemos usá-lo para vários fins, principalmente para a coisa de layout, para colocar os elementos, aninhamento, etc Temos div com um recipiente de classe, e abaixo há uma linha. Classe de linha significa que todos os elementos, todas as colunas que estão incluídos serão exibidos em uma linha, então um por um, assim como aqui. Vamos copiar contêiner e desenhar. Vamos colocá-los em nosso documento HTML, mas antes de onde vamos verificar nosso layout. Estou abrindo o layout do portfólio aqui. se eu ampliá-lo, você verá que aqui está o recipiente e eu tenho duas colunas. Container, linha, classes seriam aplicadas para a seção de cabeçalho. Eu tenho o cabeçalho. No cabeçalho, estou colando essas duas linhas que copiei da documentação. Estou a abrir o contentor, mas também preciso de fechar esta div. Ele fecha logo antes do cabeçalho ser fechado. Então eu estou adicionando div, Eu estou fazendo toque aqui. Tudo o que está incluído como os filhos deste contentor. Eu tenho linha que preciso linha para exibir duas colunas perto de um charter. Eu também preciso fechar a linha antes de uma div. Também aninhando os elementos dentro de uma conversa. Posso ver que todos esses elementos mencionados aqui, todos os filhos da linha. O que é mencionado em seguida na documentação? Temos outra classe que se chama col-sm. Isso significa que esta é uma coluna e a largura das colunas seria gerada automaticamente, dependendo de quantas colunas temos. Vamos ocupar tanto espaço quanto eles precisarem. Deixe-me copiá-lo também. Se compararmos com o layout, vemos que esta é uma coluna e esta é a segunda. Tudo aqui como cabeçalho, lista e o padrão seria em uma div chamada col-sm. Tudo aqui, preenchido este lugar vai ser crianças fora deste div, então eu preciso fechá-lo. Embora o próximo conteúdo será outra coluna. Novamente, estamos colando div e figura seria as crianças deste div. Vamos recapitular o que realmente aconteceu. Vou torná-lo mais adequado para a exibição. Temos o contentor , começa aqui e fecha aqui. O cabeçalho inteiro está em um contêiner. O que a classe realmente faz? Bem, você verá em um minuto no navegador da web. Sob recipiente, Temos uma linha e linha nos ajuda a exibir esses elementos perto um do outro. Temos uma coluna e a segunda. Podemos usar comentários. Coluna da esquerda. Esta é a coluna da esquerda e por baixo temos a coluna da direita. Agora é muito mais fácil seguir que esta é a coluna direita e esta é a coluna esquerda. Preste sempre atenção ao imposto sobre roupas porque às vezes é muito fácil ficar confuso em seu código. Então, se você clicar na tag, você verá que o sublinhado azul, você pode facilmente ver se a tag dada é realmente fechada. Aqui, quando eu estou clicando em div, eu vejo que esta é a tag de abertura e na 37ª linha, ela está sendo fechada. O mesmo com a coluna da direita. Tenho a abertura do div tag e a fechar a 45ª linha. Vamos salvá-lo. Vamos ver o que é gerado no site. Vou fechar as ferramentas div e ver que na verdade eu tenho duas colunas. Se eu executar inspecionar, você verá que eles estão ficando esticados para o lado inteiro. Então, largura total, então não há mais duas colunas separadas. Mas se eu mudar a posição das ferramentas div para tornar a resolução, a largura do navegador da janela maior, eu vou ver que elas se encaixam. Que eles são exibidos um por um perto um do outro. Posso ver que esta é a minha coluna da esquerda e aqui a minha coluna da direita. Um pensamento que podemos ajustar neste nível do layout é mudar a largura, o tamanho realmente da imagem que colocamos para torná-la menor para realmente preencher a largura total das colunas. Vamos voltar ao estilo CSS. Podemos escrever isso. Cada imagem que temos exibido no site teria a largura máxima do recipiente. máximo da imagem será de 100 por cento de seu pai. Isso significa que se a classe col-sm tem uma largura específica aplicada, por exemplo, 600 pixels, a imagem, embora seja tamanho natural, tamanho original é 700 pixels, ela não excederá 600 pixels, porque estamos limitando sua largura por esta linha de código. Vamos escrever aqui. Aqui, estou mostrando como podemos fazer comentários em CSS. Eu posso apenas escrever um texto, então isso está limitando a largura da imagem, então leva 100 largura do máximo pai. Estou destacando todo o texto, e novamente, comentário barra, então tudo escrito aqui é um comentário. É um pouco diferente porque em HTML temos esses caracteres, e em CSS, temos barra e asterisco. Vamos salvá-lo e atualizar nosso site. De repente, você pode ver que a imagem está ficando menor e leva toda a largura da coluna, então temos as duas colunas próximas uma da outra. O cabeçalho, digamos, está pronto em termos da grade. Temos a coluna 1, a esquerda e a direita, e tudo está em uma linha com o contêiner. O que o contêiner faz é limitar nossa largura e depende de resoluções de tela. Para telas maiores, esse contêiner seria maior, para menor, seria menor. Este é o web design responsivo, e não vamos entrar em detalhes neste curso, mas vou mencionar algumas coisas que você pode usar ao usar o Bootstrap. O cabeçalho está pronto. Vamos mudar para diferentes partes do layout. Se você vê no layout aqui, nós temos a linha completa da lista, então podemos ignorá-la por enquanto porque é apenas a largura total e nós não temos nenhuma coluna e nós não compartilhamos esta seção entre dois elementos, então ele Está tudo bem para mim agora. Estamos nos projetos agora, então vemos que temos duas colunas novamente. Precisamos fazer o mesmo, precisamos aplicar a linha de contêiner e classe chamada coluna col-sm. O projeto 1, temos a seção inteira, aplicamos um contêiner, temos a linha, então eu tenho a coluna da esquerda aqui. Vou ter a coluna da direita, por isso estou a escrever a coluna da direita. Vou abrir mais espaço para ler mais facilmente. Eu tenho a coluna direita e aplicar classe col-sm. Eu tenho a div. Vamos fazer o cruzamento. Eu fiz o recuo, meu colóquio parece mais limpo. Vamos ver. Este é o início da coluna da direita, fecha aqui. Este é o início da coluna da esquerda. Fecha aqui. Precisamos fechar a fila. Você pode ver que não é sublinhado pela linha azul, então átomo nos dá a informação de que esta tag, esta div não está fechada. Vamos fechá-lo sob a coluna da direita. Agora, está correto. Você também precisa fechar o div recipiente. Bem aqui, eu vou fazer o recuo. Mais uma vez e nosso código parece bom agora. Temos a coluna da esquerda e da direita, vamos salvá-la e ver. Estou de volta ao navegador, atualizando a página, e vejo que a imagem está na coluna da esquerda e todos os textos estão à direita. Lentamente nos lembra o layout que estamos mirando. Vamos colocar mais conteúdo dos produtos em colunas. Fazemos exatamente o mesmo. Vou reutilizar estas linhas de código e colá-lo aqui. Estou fechando a div para a coluna da esquerda. Eu preciso adicionar a próxima coluna, a imagem com a legenda, se você pode ver, esta vai ser a nossa coluna direita. Fechando a div, recuo, e, claro, precisamos dobrar div fechado para o contêiner da linha um. Se virmos recipiente está fechado, linha é fechada, e temos duas colunas. O que você precisa se lembrar sobre essas classes da grade Bootstrap é que a linha é usada apenas para manter colunas, então nós não usá-lo em nenhum outro lugar. Se queremos apenas exibir colunas próximas umas das outras, vamos usar linha, e esta é a única situação. Container nos ajuda a manter alguma certa largura da página. Salvando, mudo para o navegador e vejo que o segundo projeto está dentro de duas colunas. Temos o último, o último projeto. Mais uma vez, podemos reutilizar o código que temos. Este é o projeto 3, então na coluna do lado esquerdo, temos a imagem. Claro que precisamos da coluna certa, comentário, colando. É claro que precisamos fechar a coluna da direita. A esquerda já está fechada, fizemos recuo, e, claro, fechando linha. Agora, temos que fechar a fila porque é o filho de um contêiner. Estamos fechando a fila, e aqui, estamos fechando o contêiner. Deixe-me verificar rapidamente se estamos bem. Só podemos acrescentar que esta é a coluna direita, salvando, atualizando. Vejo que tenho seções com colunas. Isso nos lembra lentamente do layout. Se você quiser verificar como as colunas livres seriam parecidas, você pode fazer o teste. No último projeto, posso copiar a coluna da direita e simplesmente duplicá-la. O que eu espero do Bootstrap é exibir três colunas próximas umas das outras. Eu tenho três colunas, então é muito fácil multiplicar mais tarde. Estas três colunas têm o mesmo tamanho, a mesma largura, estão divididas. Se você gostaria de mudá-lo, alterar as proporções, por exemplo, ter a foto maior, vamos ver na documentação de bootstrap. Estamos rolando para a parte onde temos largura diferente. Por exemplo, aqui, uma coluna é mais larga e a outra é estreita. Aqui aplicamos certas proporções. Imagine que temos 12 colunas pequenas e nós apenas as fundimos para tornar a coluna maior. Se eu gostaria de ter minha coluna para realmente tomar a metade do espaço disponível, eu estou escrevendo seis porque seis a 12 é a metade. Se eu gostaria de aplicar isso na minha imagem aqui no terceiro projeto, então para a foto, eu escrevo aqui col-6, eo outro iria automaticamente tomar espaço disponível, o que resta. Eles dividirão a metade do recipiente inteiro para essas duas colunas. Estou atualizando o site e vejo que minha imagem é duas vezes maior do que suas colunas companheiros. Para rodapé, estamos bem por enquanto com isso porque rodapé não usa duas colunas. É como um pedaço de uma coluna de layout, um elemento de coluna de layout. Estamos quase prontos para alinhar ao LMS, há alguns ajustes que precisam ser necessários. Mas, por enquanto, vamos parar com a grade Bootstrap. Se você está ansioso para saber mais sobre a grade Bootstrap, eu recomendo vivamente que você confira a documentação. Há muitos exemplos de como você pode criar diferentes reviravoltas da coluna, como você pode empilhá-las para o modo horizontal e, finalmente, como trabalhar em seu lado responsivo das grades. 10. 1/2 Dispondo os elementos na grade definida: Nesta lição, vamos nos concentrar na grade. Vamos colocar nossos elementos do site de acordo com o layout. Finalmente, temos algumas colunas e algumas seções, então seria muito mais fácil para nossos olhos olharem para ele. É assim que nosso site se parece atualmente. O que precisamos fazer é colocar esses elementos em colunas. Se você compará-lo com o nosso layout, veremos que alguns elementos estão próximos uns dos outros, alguns são separados. Para fazer isso, vamos usar grade de Bootstrap. O que é Bootstrap? Bootstrap é um kit de ferramentas de código aberto, é uma biblioteca de componentes front-end. É uma ferramenta muito grande e poderosa. No entanto, vamos usar apenas um pedaço dele que é grade. Não vamos codificar a grade sozinhos. Vamos usar a biblioteca e podemos ajustá-la às nossas necessidades, então faturar os layouts seria muito mais fácil. Se você está curioso sobre o sistema de grade, você pode abrir a documentação que está disponível em getbootstrap.com e você pode ler sobre a teoria mais antiga que está atrás grade e Bootstrap. Mas digo-te as coisas mais importantes que precisas de saber para que resulte. Então vamos voltar ao nosso documento HTML, e vamos nos concentrar em HTML por um tempo. Se eu abrir toda a pasta, verei que tenho bootstrap-grid.css. Você pode ver alguns códigos lá fora. Tudo o que está escrito aqui é CSS, mas eu não quero que você analise, memorize, ou aprenda. Nós vamos apenas usar a grade que é definida aqui. Se quisermos usar esta folha de estilo, também precisamos vinculá-la em nosso documento HTML. Temos o nosso styles.css, temos fontes externas, mas também precisamos Bootstrap. Eu gostaria de ligá-lo antes dos meus estilos. A questão é por que eu estou fazendo isso antes não como a última tag link, a resposta é que grade Bootstrap pode ter alguns estilos que podem causar um conflito que pode realmente sobrescrever nossos estilos. Para tornar nossos estilos mais importantes, colocamos no último lugar em termos da folha de estilo que temos. Estou mudando o nome aqui, o arquivo é chamado bootstrap-grid. Estou voltando ao meu HTML, estou salvando e minha grade de bootstrap é aplicada. Vamos ver se eu não vejo nenhuma mudança. Bem, na verdade, nada aconteceu ainda, mas se eu cavar mais fundo no meu código HTML na seção head, verei que bootstrap-grid.css é aplicado. A pergunta que você pode ter é, como podemos usar a grade bootstrap? Na documentação que eles nos mostram como três colunas são criadas, podemos ver código HTML aqui com alguns atributos, que são classes CSS e vamos usá-los também. A primeira tag é div, você se lembra de div? Este é o recipiente, esta é a tag que é muito genérica e podemos usá-lo para vários fins, principalmente para a coisa de layout, para colocar os elementos, aninhamento, etc Temos div com um recipiente de classe e abaixo Há uma fileira. Classe de linha significa que todos os elementos, todas as colunas que estão incluídos serão exibidos em uma linha, então um por um como aqui. Vamos copiar contêiner e linha e vamos colocá-los em nosso documento HTML, mas antes vamos verificar o nosso layout. Estou abrindo o layout do portfólio aqui. Se eu ampliá-lo, você verá que aqui está o recipiente e eu tenho duas colunas. Container, linha, classes seriam aplicadas para a seção de cabeçalho. Eu tenho o cabeçalho, e no cabeçalho eu estou colando essas duas linhas que eu copiei da documentação. Estou a abrir o contentor, mas também preciso de fechar esta div. Ele fecha logo antes do cabeçalho ser fechado. Estou adicionando div, toque aqui. Tudo o que está incluído são filhos deste contentor. Eu tenho linha, Eu preciso linha para exibir duas colunas perto de uma conversa. Eu também preciso fechar a linha antes de uma div, mas também vou aninhar os elementos dentro de uma conversa. Tudo bem. Posso ver que todos estes elementos aqui mencionados são filhos de linha. O que é mencionado em seguida na documentação? Temos outra aula que chamaria de col-sm. Isso significa que esta é uma coluna e a largura das colunas seria gerada automaticamente dependendo de quantas colunas nós temos, então eles vão ocupar tanto espaço quanto eles precisam. Deixe-me copiá-lo também. Se compararmos com o layout, veremos que esta é uma coluna e esta é a segunda. Tudo aqui como título, lista, e o botão estaria em uma div chamada col-sm. Tudo aqui até este lugar será filho deste div, então eu preciso fechá-lo. O próximo conteúdo será outra coluna. Novamente, estamos colando div e figura seria as crianças deste div. Vamos recapitular o que realmente aconteceu, vou torná-lo mais adequado para a exibição. Temos o contentor , começa aqui e fecha aqui. O cabeçalho inteiro é um contêiner. O que essa aula realmente faz? Bem, você verá em um minuto no navegador da web. Sob recipiente temos uma linha, e linha nos ajuda a exibir esses elementos perto um do outro. Temos uma coluna e a segunda. Podemos usar comentários, coluna da esquerda, esta é a coluna da esquerda e por baixo temos a coluna da direita. Agora é muito mais fácil de seguir, que esta é a coluna direita e esta é a coluna esquerda. Preste sempre atenção às tags de fechamento porque às vezes é muito fácil ficar confuso em seu código. Se você clicar na tag você verá o sublinhado azul, você pode facilmente ver se a tag dada está realmente fechada. Aqui quando estou clicando em “div”, vejo que esta é a tag de abertura e na linha 37 está sendo fechada. O mesmo com a coluna da direita, eu tenho que abrir a etiqueta e fechar a 45ª linha. Vamos salvá-lo. Vamos ver o que é gerado no site. Vou fechar o DevTools e ver que na verdade eu tenho duas colunas. Se eu executar o Inspect, você verá que eles estão ficando esticados para o lado completo, então largura total. Não há mais duas colunas separadas, mas se eu mudar a posição do DevTools para aumentar a largura do navegador da janela, eu vou ver que eles se encaixam e que eles são exibidos um por um perto do outro. Posso ver que esta é a minha coluna da esquerda e aqui a minha coluna da direita. Uma coisa que podemos ajustar neste nível do layout é mudar o tamanho da imagem que colocamos, para torná-la menor para realmente preencher toda a largura das colunas. Vamos voltar ao estilo CSS. Podemos escrever que cada imagem que temos exibido no site teria largura máxima do recipiente, de modo que o máximo de sua imagem será 100 por cento de seu pai. Isso significa que se a classe col-sm tem um específico com aplicado, por exemplo 600 pixels, a imagem embora seu tamanho original seja 700 pixels, ela não excederá 600 pixels porque estamos limitando sua largura por esta linha de código. Vamos escrever aqui. Aqui estou mostrando como podemos fazer comentários em CSS. Eu posso apenas escrever um texto, então isso está limitando a largura da imagem. Leva 100 largura do máximo pai. Estou destacando todo o texto e novamente comentários barra, então tudo escrito aqui é um comentário. É um pouco diferente porque em HTML temos esses caracteres e em CSS temos barra e asteriscos. Tudo bem. Vamos salvá-lo e atualizar nosso site. De repente você pode ver que a imagem está ficando menor e leva toda a largura da coluna. Temos as duas colunas próximas uma da outra. O cabeçalho, digamos que está pronto em termos da grade. Temos a coluna um, a esquerda e a direita, e tudo está em uma fileira com o contêiner. O que o recipiente faz, é que limita a nossa largura e depende das resoluções da tela. Para telas maiores o contêiner seria maior, para menor seria menor. Este é o web design responsivo e não vamos entrar em detalhes neste curso, mas vou mencionar algumas coisas que você pode usar ao usar o Bootstrap. 11. 2/2 Dispondo os elementos na grade definida - Parte 1: O cabeçalho está pronto, vamos mudar para diferentes partes do layout. Se você ver no layout aqui, nós temos a linha completa da lista. Podemos ignorá-lo por enquanto porque é apenas uma largura total e não temos colunas e não compartilhamos esta seção entre dois elementos, então está tudo bem por enquanto. Estamos nos projetos agora, então vemos que temos duas colunas novamente, precisamos fazer para dizer que precisamos aplicar a linha de contêiner e classe chamada col-sm. No projeto um, temos toda a seção. Aplicamos um recipiente, temos a linha. Eu tenho a coluna da esquerda aqui, eu vou ter as colunas da direita, então eu estou escrevendo coluna da direita. Vou abrir mais espaço para ler mais facilmente. Eu tenho a coluna direita e aplicar classe col-sm. Eu tenho o div, vamos fazer o cruzamento. Eu fiz o recuo, meu código parece mais limpo, e vamos ver. Este é o início da coluna da direita, ele fecha aqui. Este é o início da coluna da esquerda, mais perto aqui, quase lá. Precisamos fechar a fila. Você pode ver que ele não é sublinhado pela linha azul, então ele nos dá a informação, Atom nos dá a informação. Há esta tag, esta div não está fechada. Vamos fechá-lo na coluna da direita. Agora está correto e você também precisa fechar o div recipiente. Bem aqui, vou fazer o recuo, mais uma vez e o nosso código parece bom agora. Temos coluna esquerda, direita. Vamos guardá-lo e ver. Estou de volta no navegador atualizando a página e vejo que a imagem está na coluna da esquerda e todos os textos estão à direita. Lentamente nos lembra o layout que estamos mirando. Vamos colocar mais conteúdo dos projetos em colunas. Fazemos exatamente o mesmo. Vou reutilizar estas linhas de código e colá-lo aqui. Estou fechando a div para a coluna da esquerda. Preciso adicionar a próxima coluna. Aquela imagem com a legenda, se puderem ver, esta será a nossa coluna da direita. Fechando a div, recuo, e, claro, precisamos dobrar div fechar, então para linha e recipiente. Se virmos, o contêiner está fechado, linha está fechada, e temos duas colunas. O que você precisa lembrar sobre essas classes a partir de grade bootstrap é que a linha é apenas para usar para manter colunas, então nós não usá-lo em nenhum outro lugar. Se queremos apenas exibir colunas próximas umas das outras, vamos usar linha e esta é a única situação. Container nos ajuda a manter alguma certa largura da página. Salvando. Eu mudo para o navegador, e vejo que o segundo projeto está dentro de duas colunas. Temos o último, último projeto. Mais uma vez podemos reutilizar o código que temos. Este é o projeto 3. Na coluna do lado esquerdo temos a imagem, e precisamos da coluna do lado direito, coluna da direita, comentário, ritmo, e é claro que precisamos fechar a coluna da direita. A esquerda já está fechada, podemos fazer recuo e fechamento recipiente. Temos que fechar a linha porque é filho de um contêiner, então estamos fechando a linha, e aqui estamos fechando o contêiner. Deixe-me verificar rapidamente se estamos bem. Aqui só podemos adicionar que esta é coluna direita, salvando, atualizando, e eu vejo que eu tenho seções com colunas e nos lembra lentamente do layout. Se você quiser verificar como três colunas seriam parecidas, você pode fazer o teste. O último projeto, eu posso copiar a coluna direita e simplesmente duplicá-la, e o que eu espero do bootstrap é exibir três colunas próximas umas das outras. Agora tenho três colunas. Mais tarde, é muito fácil multiplicar. Estas três colunas têm o mesmo tamanho, a mesma largura, estão divididas. Se você quiser alterá-lo, altere as proporções, por exemplo, ter a foto maior. Vamos ver na documentação do bootstrap, estamos rolando para a parte onde temos largura diferente. Por exemplo, aqui, uma coluna é mais larga e a outra é estreita. Aqui aplicamos certas proporções. Imagine que temos 12 colunas pequenas e nós apenas as fundimos para tornar a coluna maior. Se eu gostaria de ter a minha coluna para realmente tomar a metade do espaço disponível, eu estou escrevendo seis porque seis a 12 é a metade. Se eu gostaria de aplicar isso na minha imagem aqui no terceiro projeto, então para a foto, eu escrevo aqui col-6, eo outro iria automaticamente tomar espaço disponível, o que resta. Eles dividirão a metade do recipiente inteiro para essas duas colunas. Estou atualizando o site e vejo que minha imagem é duas vezes maior do que suas colunas colegas. Para rodapé, estamos bem por enquanto com isso porque rodapé não usa duas colunas, é apenas como uma coluna, um pedaço de layout, um elemento de coluna de layout. Estamos quase prontos para alinhar os elementos. Existem alguns ajustes que precisam ser necessários, mas por enquanto vamos parar com a grade de bootstrap. Se você está ansioso para saber mais sobre a grade de bootstrap, eu recomendo vivamente que você confira a documentação. Há muitos exemplos de como você pode criar diferentes larguras da coluna, como você pode empilhá-las no modo horizontal e, finalmente, como trabalhar em seu lado responsivo da grade. 12. Criando a navegação: Nesta lição, vamos aplicar alguma magia CSS para fazer nosso site parecer muito mais familiar para o projeto que temos. Vamos cuidar da navegação no topo do documento. Se compararmos com o projeto, veremos que a navegação está no topo, que cada elemento da lista é exibido horizontalmente, então eles estão próximos uns dos outros, não uns dos outros. Além disso, o que não é visto aqui sob imagem estática, eu gostaria de ter a minha navegação fixa no topo. Vai ser uma navegação pegajosa, e nós vamos aprender em CSS como fazê-lo. Estamos voltando ao átomo, e eu vou refazer rapidamente minhas colunas em átomo para ver estilos aqui. Tenho estilos prontos. Minha navegação tem uma cor azul, deixe-me copiá-lo do conteúdo txt, que tem todos os valores listados lá. Se eu mudar para txt de conteúdo, eu vou ver na parte inferior que eu tenho a cor para navegação. É o código hexadecimal, eu posso copiá-lo, e eu vou usar em CSS. Nós temos a navegação, se eu mudar para o meu site, eu vou ver que este é todo o navegador. Que tal aplicar uma cor de fundo? Eu crio um seletor para nav, apenas no DevTools, e aplico cor de fundo, cores desculpe, Estou faltando erro de digitação aqui, cor de fundo. Estou colando o valor da cor. Posso ver que é azul, fantástico. Eu posso copiar para todo o seletor e aplicá-lo no meu CSS, e salvá-lo, e ele está pronto. Se eu atualizar, a alteração será salva. O que podemos fazer com a lista para torná-la semelhante à navegação que temos no projeto. Eu preciso mencionar sobre algo, que é chamado de propriedade de exibição em CSS. Por padrão, cada elemento de lista, cada li, é exibido como um elemento de bloco por padrão. elemento bloco significa que ele leva a largura total do recipiente. Se você ver o destaque azul no DevTools, você vai descobrir que ele realmente leva todo o espaço que ele tem, ou, em seguida, faz certo recipiente. Precisamos alterar esta propriedade de exibição de bloco para bloco inline-bloco, que significa que o elemento lista terá apenas o espaço que ele precisa para o conteúdo a ser exibido. Se eu criar um seletor ul li, e escrever aqui exibir bloco inline-, você verá que todos os meus elementos estão próximos uns dos outros. Eles são exibidos verticalmente, e se eu navegar no DevTools, você verá que ele leva apenas a largura que realmente o conteúdo define. Se eu adicionar aqui um texto mais longo, a largura seria maior, porque o conteúdo, é maior. Na exibição em bloco, não importa como o nosso conteúdo se parece, porque ele sempre leva 100% de largura do contêiner. Gostaríamos de aplicar a propriedade de bloco de exibição in-line, mas não queremos exibir em todos os elementos da lista que temos em nosso site, porque temos seções diferentes. Por exemplo, aqui, nós também temos uma lista que no projeto, que os elementos fornecidos são exibidos verticalmente. Podemos fazer isso criando um seletor complexo, que significa que aplicaremos apenas determinados CSS aos elementos li, a partir da lista não ordenada que existe na tag nav. Isso tornará o nosso escopo CSS mais estreito, então display inline-block seria aplicado à lista que só está incluído na tag nav, apenas para este. Estou guardando, refrescante, e ver que esta lista está intacta, nada mudou. Mas se inspecionarmos o código e olharmos o que está acontecendo aqui, veremos na guia do computador, que há algumas margens aplicadas e alguns preenchimentos, e gostaríamos de redefinir totalmente para zero. O que podemos fazer, podemos realmente escrever margem: 0; preenchimento: 0; para esta lista dada. Atualizar, deixe-me apenas salvá-lo, atualizar e ver que o elemento da lista, eles não têm nenhuma margem. Mas as margens que vemos, na verdade, vêm de ul. Vamos escrever ul, vamos copiar CSS, e finalmente, nossas margens se foram. Mas nós temos algumas margens do corpo, na verdade são oito pixels de cada um do site, você pode ver a borda laranja. Aplicamos a mesma técnica, podemos realmente adicionar esse corpo e ul, eles têm margem: 0; preenchimento: 0; Nós também podemos mudar o lugar dele em seu corpo, por isso será muito mais consistente em termos do código. Estou salvando, atualizando, e vejo que minha navegação começa logo no início das bordas do navegador da janela, que é o comportamento que eu quero que ela atinja. Vamos ver como a navegação parece em nosso projeto. Temos algum espaço e toda a navegação está centrada. Vamos tentar aplicar isso. Podemos fazer a identificação centralizada de várias maneiras. Na verdade, você pode centralizar alguns elementos em CSS de várias maneiras, existem alguns métodos diferentes. O que eu vou fazer é, eu vou adicionar apenas nav ul, e até aqui margem: 0 auto; que significa que este, o primeiro lugar, refere-se a cima e inferior, modo que as margens na parte superior e na parte inferior do lista, e isso à direita e à esquerda. Auto significa que ele será ajustado automaticamente, então ele irá naturalmente centralizar nosso elemento. Estou guardando, e vamos ver. A última coisa que precisamos fazer é centralizar todo o elemento. Então, aplicamos o centro de alinhamento de texto e graças a ele, nossa lista está no centro da seção de navegação. Deixe-me copiar a última linha, aplicá-la, e teremos nossa navegação centralizada. Nós podemos realmente aplicar preenchimento para criar mais espaço em torno de toda a lista. Podemos aplicar preenchimento 30 pixels e temos a navegação maior. Estou copiando, colando, salvando e estamos chegando perto. O que também é importante é que precisamos de algum espaço entre os elementos da lista, então alinhe. Para isso, também podemos usar margem. Se tivermos duas posições, a primeira refere-se ao topo e ao fundo, e a segunda à esquerda e à direita. Então, se eu aplicar 10 pixels, você verá alguns espaços ao redor deles. Vamos testar se podemos editar maior. Sim, parece melhor. Então, estou copiando. Agora, se todos se alinharem. Eu posso fazer para comentários aqui, que zero refere-se a cima e inferior e 15 pixels para a esquerda e direita. Posso aumentar minha janela e alternar dobra suave, então será mais fácil de ler. Temos nossos comentários prontos, temos margem aplicada e o que vem a seguir? Mencionei que gostaríamos de ter esta navegação pegajosa. Então precisamos corrigir a posição e para isso, vamos usar a propriedade CSS que é chamada posição. Para toda a navegação, eu preciso aplicar posição fixa. Coisas estranhas aconteceram com meu layout, mas não se preocupe por enquanto. Eu posso ver que embora eu rolar, minha navegação ainda está na mesma posição. Infelizmente, está por trás de todos os outros elementos. Parece que as camadas, mas gostaríamos de manter a navegação no topo. Para isso, usamos z-index. Diz ao navegador qual camada este elemento deve tomar. Quanto maior e o número é, a frente o elemento será. Então, se eu em um, ele será maior de zero porque zero é o valor padrão. Se às cinco, ainda é o mesmo porque é maior que zero e estará no topo dos outros elementos. Então eu tenho z-index 1 e o que eu gostaria de fazer é esticar a navegação para a largura total. Então eu escrevo largura 100 por cento, e minha navegação é fixa. Posso copiar isto e colar no seletor de navegação. A coisa que você pode observar é que o conteúdo sob navegação, então tudo do cabeçalho é cortado porque ele está escondido pela navegação. O que eu preciso fazer é aplicar alguma margem do cabeçalho, mas vamos usar algumas novas propriedades CSS. Primeiro, criar seletor de cabeçalho e vamos escrever, top 70 pixels. Isso significa que nosso conteúdo começará 70 pixels abaixo de sua posição natural. Então teríamos um espaço em branco no topo. Nós também precisamos posicionar relativo porque propriedade como superior, inferior, direita e esquerda trabalho somente quando a posição relativa ou absoluta é aplicada. Por favor, lembre-se sobre isso. Temos posição relativa que nos ajuda a relativamente colocado o elemento. Quero dizer, ele usa sua posição natural e toma como ponto zero. Então, se você quiser alterar a posição em 70 pixels da esquerda ou da direita, você pode usá-lo assim. Trataria este ponto como ponto zero porque é o lugar natural do elemento, mas queremos que ele o mantenha no topo 70 por cento. Agora eu posso ver que eu tenho algum espaço para a navegação e está consertado. Então funciona como uma curva. Mas eu também poderia aumentá-lo para 110 para ter mais espaço em branco disponível. Nosso cabeçalho é um novo elemento, então eu posso colá-lo sob nav. Estou salvando e vejo que minhas alterações são aplicadas. A última coisa para a navegação por enquanto, é mudar as letras para maiúsculas e podemos fazê-lo com CSS também. Então eu aplico uma propriedade CSS específica para o elemento lista que é chamado text-transform, e queremos transformá-lo em maiúsculas. Agora cada elemento, cada letra está escrito em maiúsculas. Também podemos aumentar o espaçamento entre letras usando propriedade espaçamento por letras, por exemplo, por um pixel. Ficará mais bem em termos de tipografia. Estou copiando essas duas novas linhas e aplicando no estilo CSS 27th line, salvando-o, atualizando e ver que minhas alterações são mantidas. Se você comparar com o projeto, vemos que temos essa linha. Por enquanto, vamos ignorá-lo e guardá-lo para os ajustes finais no final do curso. Agora vamos nos concentrar no próximo elemento que é o cabeçalho do site. 13. Ajustando o cabeçalho: É hora de se concentrar agora no elemento de cabeçalho do nosso site. O que vamos fazer é mudar o tamanho do título e cuidar da lista e do botão, e algo estranho está acontecendo aqui, então não se preocupe, vamos cobrir tudo e também vamos aplicar o fundo ao cabeçalho. Isto é algo que estamos mirando. Se você der uma olhada na pasta de ativos do portfólio, você verá os tamanhos de fonte, então você saberá que eu usei 100 pixels para o h1 em 15 pixels para as tags body, que possamos facilmente aplicá-lo em nosso CSS. Mudei para o átomo, estou fechando janelas desnecessárias, então, por enquanto, vamos nos concentrar apenas no CSS. Deixe-me aumentar a janela. Eu mencionei que para h1 que é no documento de hora estamos usando o tamanho da fonte 100 pixels. Para um corpo, usamos 15 pixels para que possamos definir que todo o corpo terá 15 pixels, e se uma navegação para cada um dos elementos, usamos 14 pixels. Vamos referir-se a um site e temos muito grande cabeçalho e altura de linha muito grande, então vamos alterá-lo para o valor ideal que é 150, Eu copiar colar h1 150. O que mais eu quero fazer? Na verdade, a altura da linha é maior do que planejei, então talvez possamos mudá-la para 130. Sim, é mais perto do projeto. Para os ajustes finais, podemos experimentar mais tarde. Mas agora eu gostaria de focar no mínimo aqui e essas coisas estranhas acontecendo. Vamos inspecionar e ver o que está acontecendo com o cabeçalho. Eu mudei a posição do cabeçalho usando o topo. O que ele faz, ele muda a posição real do cabeçalho, mas deixa os outros elementos no mesmo lugar. Como você pode ver no lado esquerdo, lista permanece no mesmo lugar, não importa se eu comentar o valor superior ou não. Então precisamos relatar alguns como, esta é uma correção fácil para fazê-lo, eu vou apenas adicionar margem inferior com o mesmo valor que eu apliquei para o topo. Então é 110 pixels e eu vou ver que ele está realmente ficando melhor. Eu também posso aumentar a margem para torná-lo mais suave e em algum espaço em branco. Então, digamos 160 ou talvez 220, parece muito mais melhor, então eu estou copiando e colando no seletor de cabeçalho. Vamos cuidar desta lista. Gostaríamos de remover esses marcadores em primeiro lugar e também tornar a fonte apropriada. Então, na verdade, eu cometi um erro porque eu apliquei lista de habilidades não para esta seção, se nós checarmos aqui, eu tenho IBM Plex e no meu site eu tenho antiqua de tinta, então eu preciso mudá-lo. Rapidamente vamos refazer isso em HTML, tenha paciência comigo. Esta classe lista de habilidades realmente deve ser aplicada a este. Desculpe pela confusão. Eu acho que tudo deve estar correto agora. Então eu estou atualizando para o site e parece bem. O que eu gostaria de fazer com este imposto é para mostrar mais e altura da linha, e também remover esses marcadores. Como eu posso fazer isso, bem, eu vou criar um seletor genérico para a lista de elementos mais antigos em uma lista ordenada, por isso é estilo de lista, nenhum, e ele irá remover esses marcadores. Como este. Eu posso colá-lo sob h1, e outra coisa é que eu gostaria de aumentar a margem. Posso ter margem na parte superior e na parte inferior para que pareça mais perto do nosso layout. Estou copiando e colando. Botão, queremos estilizar o botão e também adicionar algumas margens a ele. Para uma tag, então para o nosso link que está aqui, eu criaria uma classe. Seria muito mais fácil para nós ter isso sob controle, então vamos voltar para CSS e eu tenho botão, e aqui eu posso aplicar alguns estilos. Se eu verificar o projeto, ele se parece com botão, então ele tem cantos arredondados, ele tem border-raio, e ele tem a borda em geral. Vamos aplicar a fronteira. Um pixel, sólido, é preto. Vamos salvá-lo e ver, nada aconteceu. Eu acho que eu sei por que, porque eu não salvei arquivo HTML. Lembre-se sempre que você devido a alterações no CSS HTML, você deve salvar ambos os arquivos. Agora, eu tenho a borda, eu não gosto que meu texto tem que sublinhar, então eu posso aplicar text-decor tag sublinhado. Não, desculpe, eu quero redefinir isso, não é nenhum, cor para ser preto, e eu gostaria de adicionar um pouco de preenchimento. Por exemplo, 10 pixels, 20 pixels, é melhor e também margem do topo. Estou escrevendo margem superior como 30 pixels. A margem não é aplicável e a resposta a esta pergunta por que ele não é aplicado é realmente A é elemento inline. O que isso significa? Isso significa que só podemos afetar tudo o que aconteceu na linha horizontal e não na vertical, então não podemos aplicar nenhum valor na parte superior ou na parte inferior. Para fazê-lo funcionar, precisamos mudar a exibição de inline que está sob o padrão para A para inline-block. Agora, vamos ser capazes de alterar as margens na parte superior e inferior disse a altura do elemento. Estou copiando todos os estilos que apliquei, colando, salvando, refrescante e assento que ainda estão aqui. Perfeito. Mas também precisamos definir o raio da fronteira. Podemos fazer isso usando raio de borda, digamos 20 pixels, acho que é suficiente. Eu também vou aumentar um pouco que o preenchimento da direita e do topo para o terço dos pixels, e parece muito legal. Atualizar e nosso site está ficando muito mais melhor. Lembro-me que também precisamos mudar a legenda para tamanho menor. Podemos ver no arquivo de tamanho da fonte que ele tem 10 pixels, então vamos criar o seletor de legenda da figa e enviar para o tamanho da fonte para 10 pixels. Estou atualizando a página e vejo que minhas alterações são fornecidas. Estou verificando agora o projeto, o portfólio, o que mais está faltando é com certeza a caixa, a sombra na imagem e o fundo. Vamos abordar isso na próxima lição. 14. Adicionando uma imagem de fundo e sombra a um elemento: Agora vamos trabalhar no fundo. Podemos aplicar cor de fundo e podemos aplicar imagem de fundo. Se você verificar a nossa pasta de imagem no portfólio, você verá que temos arquivo PNG de fundo. Vamos usar este arquivo para aplicar o fundo para a urze. Vamos mudar para Atom em [inaudível]. Estou focando no cabeçalho agora. Estou à procura do cabeçalho. Se você procurar algum seletor ou classes CSS, você pode usar Control ou Command F para encontrá-lo. Eu tenho o cabeçalho e eu gostaria de aplicar aqui um fundo. Vamos aplicar a imagem de fundo. Aqui está a regra. Você tem que escrever seu URL. Ele vai incluir o caminho do elemento. Vamos rapidamente dar uma olhada na pasta que temos. Nosso plano de fundo é uma pasta IMG, mas estamos editando o arquivo que está em estilo CSS, então está em pastas, CSS. A coisa que precisamos fazer, estamos atualmente na pasta CSS, estamos editando estilo CSS. Para chegar à imagem, o arquivo de fundo, precisamos sair desta pasta. Precisamos recuar, voltar. Estamos neste nível e, em seguida, precisamos entrar IMG e podemos ver PNG fundo. Como nós realmente escrevemos em código. Bem, voltando ao nível mais alto da estrutura, usamos dois pontos e barra. Significa que estamos saindo da pasta CSS, e de repente estamos aqui. Precisamos entrar no IMG. Eu só escrevo IMG e, em seguida, o nome da imagem. Chama-se background.jpg. Eu o salvei. Volte ao site, atualize-o e veja se meu plano de fundo não é gerado. Deixe-me checar novamente. A coisa é que fundo tem extensão PNG, então eu preciso alterá-lo, salvá-lo, atualizar e eu posso ver que na verdade duas listras azuis são aplicadas. A coisa é que o fundo é repetido. Se você quiser remover esta funcionalidade, remova esta propriedade, temos que definir repetição em segundo plano, sem repetição. Então nosso passado não será mais repetido. Também gostaria de adicionar a posição do nosso plano de fundo. Podemos ver que o cabeçalho não está atendendo a navegação que temos como o espaço disponível, então podemos mudar a posição do cabeçalho de 110 para, por exemplo, 70 pixels. Nav e cabeçalho tornaria obturador, por isso ficaria muito mais agradável. Estou copiando todo o código para cabeçalho, baseando-o. Vejo que o meu passado está a aproximar-se. Agora estou tendo minhas ferramentas de desenvolvedor na parte inferior. Terei muito mais controle para ver como o fundo se comporta. Para mudá-lo, nós realmente precisamos ajustar o tamanho do plano de fundo. Este é o tamanho original do fundo. Precisamos esticá-lo e podemos fazê-lo aplicando tamanho de fundo. Se eu aplicar cobertura, ele vai esticar todo o diagrama para cobrir a área. Em nosso projeto, o fundo termina em algum lugar aqui. Nós também precisamos adicionar posição de fundo Y. Por exemplo, eu vou experimentar com ele. É demais. Algo como isto ou isto. Sim, estamos nos aproximando. Vamos mantê-lo de tal forma que nosso tamanho de fundo seja coberto. Ele irá preencher todo o recipiente. Também vamos mudar a posição do eixo Y que é vertical. Preciso copiar essas duas novas propriedades CSS. Voltando ao Atom, colando-os, salvando, atualizando, posso fechar as ferramentas de desenvolvimento para ter uma visão melhor. Agora meu cabeçalho parece muito mais melhor. A próxima coisa que eu gostaria de aplicar é a sombra da caixa na imagem. Box shadow é outra propriedade CSS legal. Vamos abrir ferramentas div. Agora podemos mudá-lo para esta posição. Podemos editar para esta imagem, para esta atual e só isso porque as outras imagens, elas não têm sombra de caixa no projeto. Precisamos adicionar uma classe CSS para diferenciá-la de alguma forma. Estou no meu documento HTML e à procura de uma imagem que é a coluna da direita. Vamos adicionar imagem de introdução de classe. Em CSS, estou adicionando imagem de introdução de classe e adicionando sombra de caixa. Box shadow tem valores livres, primeiro, como ele é colocado no X, o segundo eixo Y, como ele deve ser desfocado e qual deve ser a cor. Vamos usar alguma transparência, então vamos usar RGBA. RGB, você já percebe é de vermelho, verde e azul e A é o canal alfa responsável pela transparência. Lembro-me daquela cor preta dentro do RGB, é zero, zero, zero. O último é canais alfa de quão transparente nossa cor é, podemos escrever aqui, 20 por cento. Estou a guardá-lo. Vamos ver. Minha sombra é aplicada. O que eu posso ver aqui é que ele é cortado para fora, então eu posso aplicar alguma margem superior para fazer mais espaço a partir do topo e também margem inferior para fazer o texto para legenda parecer um pouco melhor. Estou copiando. Estou copiando e adicionando à classe chamada introdução, IMG, refrescante, Eu tenho meu cabeçalho caixa já. O que mais está faltando? Acho que estamos muito perto do projeto. Podemos pular outros ajustes para trabalhar na próxima seção, que é a lista. Vamos fazer isso na próxima lição. 15. Estilo das seções de lista e projeto: Vamos focar agora na seção com a lista que menciona todas as habilidades que Jane tem. Como podemos ver, ele está centralizado e tem um tamanho de fonte maior, que é de 50 pixels. Vamos voltar ao nosso código. Para isso, temos lista de habilidades aplicada. Estou tendo uma nova turma pronta como está em outro lugar, sim, está aqui, mas tudo bem aqui combinamos alguns seletores e classes. Mas essas propriedades serão aplicadas apenas as primeiras listas de habilidades, por isso é bom criar um novo objeto CSS em todas as classes que temos antes. Queremos centralizar o texto com certeza e fazemos isso por text-align center, correto e queremos aumentar o tamanho da fonte para 50 pixels, e vamos atualizar nosso site. Parece muito mais melhor, eu iria diminuir a margem e a altura da linha porque é muito grande para a lista de habilidades. Temos listas de habilidades e vamos esconder linha de suprimento como 150 por cento, que parece muito mais melhor e também podemos aplicar margin-bottom da lista, como 60 pixels ou talvez maior, 100 pixels ou talvez 130, então teremos muito mais espaço entre os elementos. Estou copiando e colando na aula que já tenho. Vamos atualizar, e é assim que nossa lista se parece. Você deve admitir que foi muito fácil de consertar. A seção de cabeçalho está quase pronta, a lista está pronta. Agora é hora de cuidar dos projetos. Podemos com certeza remover coluna frontal porque era apenas para fins de demonstração. Eu estou indo para o fundo do projeto, é o projeto 3, terceiro projeto, estou removendo a coluna adicional que eu não preciso. Está tudo bem. O que eu preciso trabalhar agora é mudar definitivamente o tamanho dos títulos ou é realmente feito? Não, ainda não está feito. Deve ter 50 pixels. Eu também trabalharia na altura da linha para o título, para o parágrafo e para a parte inferior também. A boa notícia é que podemos reutilizar a classe que usamos para este botão e aplicá-la em todos os lugares que precisamos. Para todos ler mais, oito impostos. Vamos voltar ao CSS, mencionei que para h2, queremos tamanho da fonte 50 pixels. Aqui eu tenho h1. Para tornar o código fácil de ler, sob h1 criamos o seletor h2, então eu estou escrevendo tamanho da fonte 50 pixels e altura da linha, digamos 130 por cento. Estou a guardá-lo e ver que a minha fonte é aumentada. Vejo que há uma diferença no peso da fonte que este é mais fino. Gostaria de retirar esta ousadia do título. Podemos fazê-lo aplicando fonte para h1&h2 porque por padrão cada cabeçalho tem font-weight negrito. Queremos ter o peso normal da fonte. Agora há uma diferença. Deixe-me verificar rapidamente os tamanhos da fonte. Abri o documento de tamanho de fonte e vi que na verdade, nossos títulos h2 devem ter 30 pixels, não 50, então precisamos corrigi-lo, então h2 terá 30 pixels e agora parece muito melhor. Vamos aplicar a cada parágrafo maior altura de linha, como 160 por cento então temos p, linha - altura, 150 por cento e agora é muito mais melhor. A próxima coisa é aplicar o botão de classe a um texto. Em HTML para o primeiro projeto, que está aqui, Eu tenho href assim que aplicamos o próximo atributo, que é classe, e aplicamos inferior. Estou salvando, atualizando e ver que o botão funciona aqui. Eu também gostaria de aplicar este bloco para este botão ou para aquele, que na verdade não está aqui, então precisamos colocá-lo também. Estou copiando, procurando o próximo, está aqui. Lá, eu estou tendo botão também. A coisa que eu não gosto é que tudo está muito apertado, então eu gostaria de dar mais espaços entre projetos. Podemos fazer isso aplicando classe CSS para dissecações. Se lançarmos ferramentas def, você verá que temos esta seção para o projeto 1, o projeto 2, o projeto 3. Para todos eles podemos aplicar classe, ele vai aumentar as margens na parte superior e na parte inferior. O que eu faço agora, eu estou voltando para o primeiro projeto e adicionar projeto de classe. Estou copiando o atributo, seção e o próximo. Agora cada seção do projeto tem classe de projeto, eu posso criar esta classe, digamos que será apenas classe de projeto e eu posso aplicar margem de cima e baixo, digamos 50 pixels ou mesmo 70 para dar mais espaço, parece mais agradável. Se compararmos com o nosso projeto, você pode ver que o primeiro e o terceiro têm o fundo e a margem entre a parte inferior eo parágrafo é menor do que temos atualmente. Vamos trabalhar nisso. Primeiro e terceiro projeto terá um fundo, para que possamos aplicar classe CSS. Outro que temos projeto e podemos aplicá-lo ao azul. Novamente, azul vamos usar a mesma cor que usamos para a navegação, então a cor de fundo e aplicamos esta cor. Desculpe, é o projeto 2, então preciso encontrar o projeto 1. Para o terceiro projeto, projeto 3, que está aqui, estou salvando HTML, salvando CSS. Voltando ao meu navegador e vejo que o plano de fundo é aplicado. O que eu não gosto é que o contêiner inteiro não tenha um preenchimento, então para cada projeto, eu também adicionaria pixels de planeta ou até mais do preenchimento e talvez diminuísse um pouco a margem, assim. Parece muito mais melhor. Vou pegar a turma inteira e substituí-la, guardá-la e verificar. A coisa que eu estava mencionando foi que o fundo tem a margem superior definida, que possamos agir de várias maneiras para resolvê-lo. Por exemplo, podemos remover a margem se a parte inferior aparece na classe do projeto. Temos classe de projeto e damos a informação para o navegador, que hey se temos a classe chamada baston, que está incluído no projeto de classe permite remover essa margem, vamos defini-la como zero, vamos Escrever tal maneira. Se tivermos classe de projeto e visão inferior, vamos definir margin-top para zero ou talvez não zero, mas 10 pixels para que tenhamos um pouco de espaço e agora parece muito melhor. Estamos quase prontos, eu estava aplicando a margem para a imagem margin-bottom, então a coisa que eu posso fazer para torná-la mais universal, eu posso remover essa margem daqui e aplicá-la a cada figurcaption, então cada figcaption teria o mesma margem a partir do topo. A mudança que eu faço foi tirar da introdução ING, eu estava removendo a margem e eu adicionei margin-top 10 pixels para figcaption, salvar, atualizar. Eu tenho a margem aqui e os mesmos valores para as legendas nesses elementos também. O que mais está faltando aqui? Com certeza, precisamos trabalhar no rodapé. Vamos ver em toda a largura do navegador. Vamos aplicar magia CSS para aquele rodapé. O que precisa ser feito com certeza, centralizando o texto e definindo o tamanho da fonte para 50 pixels. Vamos fazer isso na próxima lição. 16. Estilo do rodapé: Estamos nos aproximando dos passos finais, então vamos cuidar do rodapé do nosso site. O que precisamos fazer aqui é centralizar o texto, precisamos aumentar o tamanho da fonte. Vamos voltar a este texto CSS. Temos nosso rodapé e H2, e já definimos o tamanho da fonte do arquivo para H2, que é de 30 pixels, mas em nosso projeto tem 50. Em vez de criar outra classe, podemos apenas fornecer o seletor que consiste em rodapé e H2. Nosso navegador tentará encontrar H2 dentro da tag do rodapé e somente aqui ele aplicará o tamanho da fonte de 50 pixels. Também precisamos centralizar o texto. Na verdade, vamos centralizar o texto em todo o filtro porque o parágrafo está centrado também, então é centro de alinhamento de texto. Vamos atualizar a página. Estou quase satisfeito com isso. O que eu gostaria de aplicar são algumas margens na parte superior e na parte inferior. Estou aplicando margem superior e inferior 50 pixels. Na verdade, um pouco mais, vamos adicionar 100. Agora está muito melhor. Também gostaria de adicionar algum espaço entre o título e o parágrafo. Vamos adicionar uma margem superior para o H2 que está no rodapé, 50 pixels. Não é margem superior, mas margin-bottom. Desculpe por isso. É bem pequeno, então que cerca de 100. Sim, agora parece muito melhor. Nosso rodapé está pronto. A coisa que eu gostaria de trabalhar em um pouco é o alinhamento da legenda grossa e um texto no segundo projeto. Se abrirmos o arquivo PNG, você verá que o texto está alinhado aqui ao lado direito, e este, legenda grossa, tem o mesmo alinhamento. Isso também tem alinhamento de linha. Precisamos aplicar classe adicional, vamos chamar isso, alinhamento à direita, e vamos usar alinhamento de texto, propriedade CSS, text-align, e, em seguida, precisamos aplicá-lo ao número do projeto 2. Para todo o projeto, vamos aplicar aqui alinhamento direito. Posso ver que todo o meu texto foi então a coluna no segundo projeto está alinhada à direita. O que mais está faltando é que precisamos alinhar à direita a legenda grossa para esse projeto um e o projeto três. Eu estou procurando o projeto um e a legenda grossa está aqui, então eu estou adicionando classe. O mesmo alinhamento certo, eu estou copiando, e procurando o projeto três, e a legenda grossa aqui também. Estou adicionando classe, salvando e atualizando o site, e posso ver que o texto está alinhado. Tudo bem. Vamos cuidar da navegação nas últimas semanas. 17. Estilo de navegação: Nesta lição, vamos cuidar da navegação. Se você abrir o projeto, você verá que nós temos a linha preta. Como isso pode ser feito? Não é assim tão complicado. Vamos voltar ao código. O que precisamos fazer em nossa navegação, que está no topo, precisamos criar uma tag vazia que é entre Behance, Twitter, LinkedIn, etc Aqui temos li, então teremos vazio, classe. Vamos salvá-lo. Vamos ver. Temos este espaço entre nós. Se usarmos Ferramentas de Desenvolvimento, você verá que nada está aqui, mas na verdade precisamos de um pouco mais de espaço para que possamos definir a largura. Por exemplo, 50 pixels, e podemos adicionar border-top, modo que apenas a borda superior terá a borda, um pixel e cor preta. Acho que deve ser um pouco mais longo, então 70 ou até 90 pixels. O que eu não gosto é que na verdade não está no centro. Podemos posicioná-lo facilmente usando alguns truques. Você já sabe Top. Por exemplo, podemos aplicar top, 10 pixels, e para fazê-lo funcionar, precisamos ter posição, relativa, mas na verdade vai para baixo, e isso é contador [inaudível] CSS, mas se quisermos mudar o topo posição e torná-lo realmente mais perto da borda superior, você precisa adicionar menos para que ele terá a menor distância entre a borda superior. Acho que cinco pixels é suficiente para que possamos copiar toda a classe. Isso realmente significa que esses estilos estão indo para funcionar somente se li tem classe vazia aplicada. Assim, podemos facilmente copiá-lo e colá-lo em algum lugar perto da nossa navegação para que seja consistente. Temos a nossa linha, e também podemos adicionar alguns links aos nossos meios de comunicação. Por exemplo, se eu vou usar o link externo Twitter, eu posso adicionar minha conta do Twitter, apenas na verdade minha conta pessoal, não Jane Doe, mas quem se importa? Então eu tenho aganaplocha, este meu nome real, e eu também estou adicionando outro atributo que é alvo, em branco, e ele diz ao nosso navegador para abrir o link em uma nova janela. Eu estou salvando, e ver que infelizmente meu link é violeta e tem a decoração do texto. É por isso que alguns estilos padrão são aplicados pelo navegador, então precisamos redefini-los. Podemos facilmente fazer isso por nav li um, então todos os um que estão nos elementos da lista terá decoração de texto definido para nenhum, cor preta, e eu estou feliz com isso. Se eu clicar nele, meu Twitter será aberto. E se quisermos vincular esses elementos às áreas específicas do site? Vamos usar links âncora, e vamos usar IDs. Como podemos fazer isso? Precisamos criar “a” e no atributo de corte, precisamos adicionar um ID específico se gostaríamos de adicionar um link para contato, vamos chamá-lo de contato, mas você pode colocá-lo onde quiser. Você pode colocá-lo Jane contato, nomeá-lo como você gostaria. Temos contato, e temos identificação. ID começa com hash. Agora precisamos criar esse ID como um atributo para a seção específica. Imaginemos que o rodapé seria nossa seção de contato. Então precisamos criar ID, então ID atributo eo nome tem que ser o mesmo assim como nós defini-lo aqui. No navegador, é chamado de contato. Então vamos voltar para a identificação, e vamos chamar este contacto. Vamos salvá-lo, atualizar, clicar e estamos na parte inferior da página. O mesmo que podemos fazer com o Works. Então, o Works nos percorrerá para projetos. O primeiro projeto iniciará o ID. Então temos o projeto de classe, mas também precisamos ter projetos de ID, e isso precisa ser refletido no link. Se tivermos o Works, crio projetos de ID “a” e, claro, preciso fechar uma tag. Para a experiência, podemos, por exemplo, link para a primeira seção para o cabeçalho. Então cabeçalho teria experiência ID, e precisamos vinculá-lo também. Estou salvando, atualizando, portanto, se eu clicar em Works, estou na parte superior da seção Trabalho. Se clicar em Experiência, estou na parte superior e, se clicar em Contato, estarei na parte inferior. Para outras seções, você pode usar seus próprios links, e você pode tentar tratá-lo como outro exercício. Então terminamos com a navegação. O que mais precisa ser adicionado? Eu adoraria adicionar algumas pequenas transições de funções. Então, passe o mouse sobre os efeitos nos botões. Vamos fazer isso na próxima lição. 18. Função de transição no CSS: Muito bem, esta é uma das lições finais. Nesta lição vamos nos concentrar nas funções de transição CSS, então vamos mudar as cores do botão para passar o mouse. Temos o botão, mas se passarmos por cima do cursor, nada acontece. Gostaríamos de mudar o plano de fundo para preto e ter a cor do texto para branco. Como podemos fazer isso, precisamos usar pseudo-classe, que é chamado de hover. Estou à procura da minha aula de botões. Tudo bem, vamos mudar apenas para CSS. Hover class é uma pseudo-classe então nós escrevê-lo como este. Nós escrevemos o nome da classe para que depois de dois-pontos escrevemos hover e isso significa que esta pseudo-classe seria dedicado apenas para a classe botão. Sempre que passar o mouse sobre elemento que tem classe botão, algo vai mudar. Vamos escrever 'fundo', ele mudará para preto, e vamos adicionar cor ao branco e salvá-lo. Atualizando nossa página e quando passamos o mouse sobre, podemos ver a mudança. Mas o que eu não gosto sobre isso, é que a mudança é muito agressiva, então é como zero ou um. Eu gostaria de ter a função de transição para que também possamos fazer isso com CSS e voltar para o Atom e para o meu elemento, meu botão elemento original, eu preciso escrever transição. O que será alterado assim, por exemplo, fundo. Quanto tempo levará para a mudança assim, por exemplo, meio segundo e qual seria a função para facilitar a entrada e saída para que a mudança seja muito suave e muito suave desde o início e no final. Você pode ver que o fundo muda muito suavemente, mas a cor ainda age de forma agressiva. Também precisamos desta função de transição para a cor, e podemos copiar todas as outras propriedades. Agora a mudança é muito suave e eu realmente gosto e foi feito apenas com um par de linhas de código. Você pode facilmente modificar essas coisas. Você pode modificar cores, planos de fundo, bordas, etc. O que mais podemos fazer? Bem, também podemos aplicar alguns, por exemplo, transformação de texto ou decoração de texto para sublinhar o texto quando passamos o mouse sobre a navegação. Estamos voltando para a navegação que está aqui então nós temos 'nav li a' então nós copiamos todo o seletor, colá-lo aqui, nós adicionamos pseudo-classe que é pairar e adicionar texto decoração sublinhado. Vamos ver. Se eu passar o mouse, eu tenho a mensagem. Este não é o link ainda, então é por isso que não temos o sublinhado do texto. Claro, sinta-se livre para experimentar para fazer muito mais. O céu é o limite. Você pode se divertir totalmente com funções de transição e com pseudo-classe então eu espero que você vai conseguir alguns efeitos interessantes. É assim que o site final se parece. É quase um para um para o meu projeto, então estou muito satisfeito com ele e espero que você consiga alcançar algo semelhante com seu código, com seu CSS e HTML. Espero que você consiga colocar alguma teoria em prática e ver como CSS e HTML funcionam juntos. Em qualquer dúvida, não hesite em usar o Dev Tools para encontrar novos recursos ou experimentar, mudar a cor de fundo, mudar a tipografia, fazer o que quiser com o site. Você pode facilmente refazer o modelo para ajustá-lo às suas necessidades, ao seu gosto, à sua estética. Estou mantendo os dedos cruzados para todas as suas experiências. 19. Resumo do curso: Vamos dar a última olhada no nosso site. Primeiro de tudo, cuidamos da navegação e temos os itens da lista e aplicamos âncora gostando, para que possamos navegar facilmente pelo nosso site. Temos também links externos, por exemplo, uma conta do Twitter. Criamos a seção de cabeçalho com uma foto. Aplicamos sombra de caixa. Temos as legendas, temos o fundo com a animação, com a função de transição, com a pseudo-classe aplicar, que é pairar. Temos a lista, temos o título maior. Aplicamos vários estilos de fonte. Temos rostos diferentes. Temos o texto centralizado. Temos duas colunas na nossa grelha. Temos as fotos anexadas. Temos vários alinhamentos de texto para a esquerda, para a direita, e também temos o rodapé. Espero que você reutilize algumas seções do site. Espero que você aplique CSS e exemplos práticos em seu trabalho diário. Muito obrigado por participar do meu curso. Espero que se divirta muito. Espero que você tenha acreditado que a codificação é uma ótima ferramenta para fazer alguns experimentos com UI na vida real, que é um navegador da Web.