Tipografia na web para iniciantes: decore seu texto com HTML e CSS

1. Introdução: Oi, eu sou Brent Miller e hoje vou ensiná-los a implementar tipografia criativa e atraente em páginas da web. Nos últimos anos, escrevi código por trás de sites. Trabalhei em aplicativos de negócios com o foco em rótulos de entrada e dicas de ferramentas e um estilo profissional limpo. Eu também trabalhei em muitos sites de folhetos com cabeçalhos artísticos e conteúdo de forma longa. Depois de terminar este curso, você será capaz de tirar um design de tipo sofisticado de um designer e implementar esse design com detalhes perfeitos em uma página web real. Se você é o tipo de pessoa que gosta de criar seus próprios designs, você terá uma compreensão muito melhor de como o texto estilizado funciona para a web. Você terá um conjunto de técnicas à sua disposição para experimentar esses detalhes. Você também desenvolverá um conhecimento mais forte de HTML e CSS em geral. Se você está interessado em web design ou desenvolvimento web de forma mais ampla, você terá uma base mais forte de conhecimento nessas áreas. Presumo que esteja interessado em letras, tipografia ou web design. Você não precisa ser um designer profissional para ter sucesso neste curso. Mas se estiver, vai pegar alguns truques novos. Você também não precisa saber qualquer programação antes de começar, no entanto, se você tem um conhecimento muito básico de HTML e CSS, você achará esse conhecimento útil. Se você tiver alguma dúvida à medida que avançamos neste curso, sinta-se à vontade para publicá-las aqui no curso. Você também pode entrar em contato comigo no Twitter ou no LinkedIn. Também encorajo vivamente a publicar aqui os seus projectos neste curso, quer os tenha terminado ou não. Se você ficar preso em um problema, sinta-se à vontade para postar seu projeto como um “trabalho em andamento” e pedir feedback. Não importa como você contatar, estou comprometido em ajudá-lo a ter sucesso e responder qualquer pergunta que você possa ter. É isso. Estamos prontos para começar. Vamos mergulhar e te vejo na primeira lição. 2. Configurando o projeto: Esta lição é toda sobre o projeto do curso. Abrange o que você vai fazer ao longo do curso e como começar. Na tela, vemos uma página web simples. É a página sobre nós para o site fictício da Biblioteca Letterville. Não há muita coisa acontecendo aqui além da tipografia. Para aqueles de vocês que querem manter as coisas simples, fazer esta página será o seu objetivo. Eu vou levá-lo através de todos os passos necessários para ir de texto simples para isso. Se você planeja seguir meu exemplo de projeto, aqui estão dois links importantes. Eu postei esses links nas notas do curso, então sinta-se livre para copiá-los e colá-los. Eles mostram com o que você vai começar, e com o que você vai acabar. Você não tem que seguir meu exemplo de projeto. No entanto, alguns de vocês podem ter seus próprios objetivos e projetos em mente para tipografia da web. Alguns de vocês podem pensar, Eu sou um designer horrível e que você pode fazer muito melhor com esta página de exemplo. Ambas as posições são completamente boas. Sinta-se livre para implementar qualquer projeto que você gosta. Para o resto deste curso, no entanto, usarei esta demonstração da Biblioteca Letterville como minha referência principal. Agora vamos falar sobre CodePen. Você deve ter notado todas essas coisas extras em cima da nossa página. Isso é porque eu estou hospedando este projeto no CodePen. Codepen é um playground para construir projetos web simples e protótipos, que é exatamente o que estamos fazendo neste curso. Se você planeja seguir meu exemplo de projeto, você vai usar o CodePen. Agora, muitos de vocês provavelmente estão perguntando, “Ei Brent, você está me pedindo para criar mais uma conta on-line?” Bem, a resposta é talvez, estritamente falando, não, você não precisa criar uma conta CodePen para ter sucesso neste curso, mas você vai achar mais fácil compartilhar seu trabalho ou voltar a ele mais tarde se você tiver uma conta. Eu não vou entrar nos detalhes de criar uma conta CodePen neste curso porque é super simples. Quando estiver no CodePen, basta clicar no botão de inscrição na parte superior da tela para começar. O último passo para deixar seu projeto pronto para funcionar, é fazer o fork do meu projeto inicial. Bifurcação é apenas linguagem programadora extravagante para fazer uma cópia. Vamos para o projeto inicial da Biblioteca Letterville. Havia um link naquele slide, e há também um link para baixo nas notas do curso. Este é o projeto inicial. O conteúdo do texto está à direita, e então temos essas caixas de código à esquerda. Uma vez que você está conectado na conta CodePen, para aqueles de vocês que vão usar sua própria conta, clique neste botão “Fork” aqui na parte superior da tela. Uma vez que você faça isso, você deve ver este nome de usuário aqui mudar do meu nome para o seu nome. Ou se você não tem conta, você verá as palavras Capitão Anônimo lá. Uma vez que você vê que o nome de usuário mudar, voila, agora você tem sua própria cópia deste projeto. Você pode alterá-lo, salvá-lo, fazer o que quiser com ele, é seu próprio projeto a partir de agora. Agora, a CodePen tem um tom de recursos, mas não vamos cobrir a maioria deles neste curso. Vamos manter as coisas simples. Vou mostrar-lhe recursos suficientes aqui para completar seus projetos. Primeiro, este painel aqui à esquerda com seções diferentes. Só estamos interessados em duas das seções aqui, a marcada HTML e a marcada CSS. Se não sabe o que isso significa, não entre em pânico. Está tudo bem. Nós vamos cobrir tudo isso, eu prometo. As caixas HTML e CSS são onde seu código vai. Repare que já há alguns lá dentro. CodePen vai pegar o código dessas caixas, e transformá-lo na saída ou resultados nesta parte maior da tela. Ele faz isso em tempo real, significa que, à medida que você faz alterações em seu código, os resultados são atualizados imediatamente. Por exemplo, se eu tivesse até nosso cabeçalho da Biblioteca Letterville, e eu coloquei meu cursor lá, e eu exclui o caractere E, espere um segundo. Repare que o E desapareceu da nossa página de resultados. Isso ocorre porque o CodePen recarrega nosso código ao vivo em nossa página de exemplo. Se eu voltar, e digitar o E de volta lá, espere um segundo, e então o E retorna. Isso é tudo o que você precisa saber sobre a CodePen. 3. Estrutura seu texto com etiquetas HTML: Esta lição é toda sobre HTML. Nós abordamos o que é HTML, o que ele faz e como usá-lo. HTML significa linguagem de marcação de hipertexto. A definição nos dá uma pista do que o HTML faz, marca a linguagem com tags que dão significado ao conteúdo escrito. Neste curso, vamos usar HTML para duas coisas uma, para dar nossa estrutura de texto, e duas, para fornecer um pouco de estilo básico. Olhando para o nosso código HTML existente aqui, observe que não é apenas um blob gigante de texto. Ele está dividido e envolvido nesses conjuntos de palavras correspondentes chamados tags HTML. Vamos dar uma olhada no título da nossa página, por exemplo. Então aqui temos a Biblioteca Letterville, e esta frase é embrulhada em um par de tags h1 correspondentes, e se traduz para esta saída de cabeçalho aqui, à direita. Observe que a segunda tag chamada tag de fechamento, tem essa barra na frente da parte h1. Todas as tags deste curso terão esta dupla de abertura e fechamento que nos leva ao nosso próximo vocabulário. Uma tag de abertura vem antes do conteúdo do texto e não tem a barra. Uma tag de fechamento vem após o conteúdo do texto e tem a barra na frente do nome da tag. Quando colocamos a tag de abertura, e o conteúdo do texto, e a tag de fechamento juntos, ele forma um elemento HTML. Nosso segundo uso para HTML é fornecer estilo básico. Algumas tags HTML, mas não todas, fornecerão ao seu conteúdo um pouco de apresentação padrão. Vamos dar uma olhada no título da página novamente aqui em nosso código. Observe que é maior do que todos os outros textos na página além dos outros cabeçalhos aqui na saída. O navegador vê isso, nós envolvemos o título nessa tag h1 em nosso código, e torna o título grande e negrito aqui como resultado. Aqui está uma lista de todos os elementos HTML do nosso projeto Letterville Library. Não entre em pânico, vamos voltar a cada um deles em diferentes pontos do curso, mas por enquanto, vou explicar apenas alguns deles. Primeiro, usamos o p ou uma tag de parágrafo para definir um único parágrafo de texto. Por padrão, os navegadores darão aos parágrafos espaço extra em branco acima e abaixo. Aqui, observe o parágrafo que começa com, nós aspiramos, aqui em nosso código é enrolado abrindo p e fechando p tags e, em seguida, aqui em nossa saída, note que é tipo de estilo como um parágrafo com um pouco de espaço superior e um pouco de espaço inferior. Em segundo lugar, a tag forte nos dá elementos de estilo arrojado. Então, note aqui que temos a palavra empower envolvida na tag inicial forte, a tag de abertura, e uma tag de fechamento com a barra aqui em nossa saída pegou essa palavra empower, e ela ficou em negrito. terceiro lugar, o elemento em define seu texto em itálico. Observe que as duas primeiras palavras de cada item da lista aqui estão embrulhadas em tags em e observe como eles são itálico nos resultados. Nós rolamos para baixo no código e notamos em tag aqui em torno de nós adotarmos, em tag aqui em torno de nós agir, et cetera. Finalmente, vamos implementar o último elemento desta lição juntos. Você provavelmente já teve a idéia principal por trás das tags agora, então este é um bom ponto para você começar a trabalhar. A marca marca destaca textos com uma cor de fundo. Vamos voltar e olhar para a primeira frase do último parágrafo, começando com, como perseguimos. Aqui no código, há como perseguimos envoltos em tags de parágrafo de abertura e fechamento. Então vamos destacar isso com um elemento de marca. Colocamos nosso cursor logo após a tag de parágrafo de abertura, vamos digitar a marca de palavra em nossos colchetes angulares, e então aqui no final dessa frase após o período, teremos marca com uma barra na reunião na tag de fechamento, E lá vamos nós. Nós definimos esta primeira frase como um elemento de marca, e note aqui em nossa página web, nosso navegador deu-lhe esta cor de fundo como um meio de destacá-lo. Há muito mais tags na linguagem HTML do que o que usamos neste projeto. Se você estiver interessado em aprender mais, recomendo ler o guia de referência de elementos HTML da Mozilla. 4. Listas: Esta lição explora listas em páginas da Web. Nós abordaremos como fazer listas e como ajustar suas apresentações. Nós já temos um exemplo de uma lista aqui em nosso projeto para baixo. Fazer lista é bastante simples e fazemos isso com apenas HTML. Todas as listas têm uma tag externa, que é uma tag OL ou UL, e uma ou mais tags LI internas. Aqui em nosso HTML temos uma tag UL externa que contém todas as listas. Dentro disso, temos cinco tags LI cada uma das quais contém o conteúdo de um único item de lista. Aqui em nossos resultados, observe como o navegador dá à nossa lista um pouco de estilo padrão. Cada item da lista começa em uma nova linha e tem um símbolo de marcador na frente. Existem dois tipos principais de listas. O primeiro, que vemos aqui em nosso projeto são listas não ordenadas. Lista não ordenada mostra marcadores, discos ou outros símbolos não numéricos na frente de seus itens de lista. Fazemos uma lista desordenada usando a tag UL. As listas ordenadas, por outro lado, exibem uma ordem sequencial. Cada item da lista começa com um número ou uma letra na frente dele. Fazemos uma lista ordenada usando a tag OL. Aqui está outro exercício para completarmos juntos. Vamos mudar temporariamente nossa lista de uma lista não ordenada para uma lista ordenada. Nós destacamos o U em nossa tag UL aqui em nosso HTML, nós digitamos um O em vez do U. Notice CodePen acabou de atualizar nossa tag de fechamento para que nós sejamos uma tag OL. Agora aqui nos resultados, vemos que temos números na frente da lista em vez dos marcadores que estavam lá antes, porque agora temos uma lista ordenada. Mas para o nosso projeto final, não queremos a lista numerada aqui. Queremos a lista de garrafas. Vamos voltar ao nosso HTML, tirar o O, colocar o U de volta. CodePen acabou de atualizar nossa tag de fechamento para nós, e agora voltamos para esta lista não ordenada novamente. Você pode aninhar uma lista dentro de outra. Vamos tentar isto. Vamos adicionar um item de lista no final do nosso conjunto. descermos aqui, adicionaremos outra etiqueta LI. Então, dentro da nossa etiqueta LI, agora temos uma etiqueta de fechamento. Lá vamos nós. Vamos adicionar outra lista. Esta vai ser uma tag OL e que nós vamos fechar isso com o nosso OL. Agora temos uma segunda lista dentro de um item de lista. Vamos adicionar dois itens de lista à nossa lista interior. Eu só estou fazendo as tags aqui, nosso conteúdo vai ser que eu amo. Então vamos adicionar um LI. Isto vai ser cartas como nosso segundo item da lista. Deixe-me fechar. Lá vamos nós. Agora vemos que temos essas listas ordenadas aninhadas dentro de nossas listas externas não ordenadas. Podemos sempre mudar isto. Se eu mudar o O para o U, como fizemos antes, lá vamos nós. Atualizou-se por um segundo e eles tinham as balas lá. Ele tem um estilo de marcador diferente porque esta é uma lista aninhada, mas ainda a vemos como parte da lista externa. Agora não queremos este item de lista extra em nosso projeto final. Então vamos deletar e nos livrar dele. Agora voltamos ao que era antes. Isso conclui nossa lição sobre listas. Se você decidiu que você ama listas e quer saber mais, confira este tutorial. 5. Fonte em tamanho com HTML: Nesta aula, nós vamos aprender algumas técnicas para tornar texto maior e menor com apenas código HTML. Vamos começar com elementos de cabeçalho. Observe como já temos alguns cabeçalhos de seção em nossa tela. Eles correspondem a esses elementos H1 que temos em nosso código. Na verdade, existem seis níveis diferentes de cabeçalhos de seção em HTML. Nós definimos o nível do cabeçalho da seção pelo número em nossas tags HTML. Observe que todos os nossos cabeçalhos de seção são o mesmo nível, H1, este é H1, este é H1, este é H1 e assim por diante todos os cabeçalhos diferentes que temos. Assim, na saída aqui à direita, todos eles têm o mesmo tamanho. Isso não funciona muito bem do ponto de vista do design, não dá uma hierarquia visual ao nosso conteúdo. Do ponto de vista da programação, torna nosso código mais difícil de entender, já que nossos elementos não estão comunicando nossa hierarquia pretendida. Vamos para os elementos de subtítulo páginas, o elemento About Us e alterá-lo para um elementos H2. Eu só vou substituir o número 1 e esta tag de abertura, o número 2 CodePen é atualizado nossa tag de fechamento para nós. Agora observe nos resultados, o subtítulo ficou um pouco menor. Em seguida, vamos mudar este cabeçalho de seção acima de cada parágrafo para um elemento H3. Para a nossa missão, eu mudei para um H3 para a nossa visão, eu mudá-lo para um H3 para os nossos valores, uma mudá-lo para e H3. Agora nós atualizamos estes para tags H3 e percebemos que o cabeçalho da seção é agora comunicar uma hierarquia visual e o código que temos aqui comunica nossa estrutura pretendida. Outro elemento que altera o tamanho do texto é o elemento pequeno. O elemento pequeno é normalmente usado para representar letras finas em um documento, como direitos autorais ou texto legal. Isso torna seu conteúdo de texto uma categoria de tamanho menor. Observe que a última frase na página que descreve a licença de direitos autorais tem o mesmo tamanho de todos os outros textos. Uma vez que é um aviso de direitos autorais, vamos torná-lo menor, como uma nota de rodapé sobre enter caixa HTML, vamos rolar para baixo e percebemos que este conteúdo escrito começa a frase dentro desta tag parágrafo. Nós vamos escrever a tag de abertura de pequeno aqui em nosso código. Há a etiqueta de abertura de pequeno. Então, no final do nosso conteúdo, no final deste fechamento de uma tag, vamos fazer a tag pequena de fechamento exatamente assim. Agora observe mais nos resultados, as frases agora um tamanho menor e parece uma nota de rodapé. Lá temos ele. Acabamos de ajustar o tamanho do nosso conteúdo de texto usando tags HTML. 6. Como fazer fontes com CSS: Nesta lição, continuaremos aprendendo técnicas para tornar o texto maior e menor. Desta vez, vamos ter o nosso primeiro gosto de escrever código CSS em vez de HTML. CSS significa folhas de estilo em cascata. Desenvolvedores da Web usam para definir a apresentação visual do conteúdo nas páginas da web. Vamos dar uma olhada nesta caixa CSS que mencionei brevemente anteriormente. Ele já tem algumas coisas nele. A maioria deles são comentários e eles não mudam os resultados. Em vez disso, eles são apenas para os desenvolvedores lerem e ajudam os desenvolvedores a entender o código. Para o nosso primeiro pedaço de código CSS, vamos definir o tamanho da fonte de alguns de nossos elementos. Na parte inferior do nosso código CSS existente, vamos escrever nosso primeiro conjunto de regras CSS completo. Vamos escrever um h 1 e então vamos escrever uma chave de abertura como essa. CodePen percebe o que estamos fazendo e apenas nos deu uma chave de fechamento correspondente. Pressione a tecla “Return” para nos dar nosso código em uma nova linha. Então vamos digitar a palavra fonte, traço, o tamanho da palavra, dois pontos regulares, um espaço, e então o número quatro, as letras r-e-m, dois pontos. Agora, repare no que acabou de acontecer com nosso cabeçalho, nosso título aqui em cima. Isso foi porque acabamos de mudar o tamanho da fonte. Devo mencionar que CSS é sensível a maiúsculas e minúsculas. Quando estamos escrevendo código CSS neste curso, tudo tem que ser minúsculo para que funcione corretamente. Vamos quebrar o que acabamos de fazer. Cada conjunto de regras CSS consiste em alguns componentes. A parte h 1 do nosso conjunto é chamada de seletor. Os seletores podem ficar complicados, mas neste curso, estamos mantendo isso simples. O h 1 significa que as regras serão aplicadas a todos os elementos h 1 nos resultados. As chaves de abertura e fechamento estabelecem a seção onde as declarações serão enviadas. Dentro das chaves vem uma ou mais declarações. Uma declaração é uma única coisa que você deseja mudar sobre os elementos selecionados. A propriedade de cada declaração vem antes dos dois pontos e é a coisa sobre o elemento que você deseja alterar. Neste caso, queremos alterar o tamanho da fonte de todos os elementos h 1. O Valor da Propriedade vem depois dos dois-pontos. É a aparência que você deseja atribuir à propriedade. Neste caso, queremos que a fonte dos nossos elementos h 1 seja quatro vezes o tamanho da nossa fonte corporal. A unidade REM significa que estamos multiplicando o tamanho da fonte raiz por um determinado número neste caso, quatro. Finalmente, é uma prática recomendada terminar sempre uma declaração com ponto e vírgula. Tecnicamente falando, você nem sempre tem que fazer disso um hábito e você estará coberto. Agora, vamos definir o tamanho da fonte de nossos outros cabeçalhos após o conjunto de regras h 1, adicione um seletor h 2. Nós adicionamos h 2, abrindo cinta encaracolada em uma nova linha. Vamos usar o tamanho da fonte novamente. Então isso é tamanho do traço da fonte, dois-pontos, espaço. Desta vez vamos atribuir 2 rem como um valor. Isso significa torná-lo o dobro do tamanho da fonte do corpo, e observe aqui que nosso subtítulo ficou maior com base em nosso código CSS. Finalmente, vamos fazer o mesmo para os nossos elementos h 3. Vai ser o mesmo código, mas desta vez vamos mudar a aparência de três elementos ao mesmo tempo. Após o nosso selector h 2, vamos adicionar um selector h 3, teremos as nossas chaves. Vamos escrever a propriedade font-size novamente para o valor font-size. Vamos fazer 1,75 rem. Você pode jogar com tamanhos se quiser, são seus projetos. Estou usando 1,75. Em seguida, observe que nossos cabeçalhos aqui à direita são apenas um pouco menores do que o subtítulo da página. Todos eles mudaram em valor porque o nosso conjunto de regras h 3 selecionou todos os três elementos h 3 em nosso código HTML. Isso conclui nossa lição sobre o dimensionamento de fontes com CSS. Se você quiser ser muito mais preciso com o dimensionamento de fontes, eu recomendo este tutorial sobre diferentes maneiras de dimensionar as coisas em CSS. 7. Noções básicas da web: Nesta lição, abordamos quais são as fontes da Web e como usá-las em seu projeto. Uma fonte da Web é uma fonte que o navegador baixa da Internet quando carrega uma página da Web que usa essa fonte. Isso difere das fontes nativas, que já estão instaladas no computador do usuário antes que o navegador carregue a página. Presumo que já saiba o que é um tipo de letra e um tipo de letra. Caso contrário, confira este artigo da Wikipédia sobre o assunto antes de continuar esta lição. Uma das maneiras mais fáceis de incorporar uma fonte web gratuita em seu projeto web é o Google Fonts. Se você quiser acompanhar comigo, navegue até fonts.google.com. O Google Fonts tem centenas de fontes da Web gratuitas que categorizam dezenas de maneiras diferentes. Eu encorajo você a explorar este site por conta própria. Para este curso, vamos encontrar e usar a família de fontes Lobster Two. Então, na caixa de pesquisa, digite Lobster, e você notará que ele vem com dois resultados. Vamos usar a fonte Lobster Two, e então vamos adicionar este ícone Plus ao lado do nome da fonte. Este painel recolher para baixo nos permite saber que selecionamos a fonte. Clique neste pequeno painel aqui para expandi-lo. O painel nos dá os controles para personalizar uma importação nossa fonte selecionada para o nosso projeto. Primeiro, vamos conferir esta aba de personalização aqui. Isso nos dá a fonte em diferentes estilos, quatro deles. Regular e negrito referem-se ao peso da fonte, ou 400 e 700, respectivamente, e cada peso vem em um estilo itálico e não itálico. Neste projeto, usaremos apenas a face de fonte negrito e não itálico. Então eu selecionei essas opções. Voltando para a guia Incorporar, Google está nos dizendo como incorporar nossas fontes selecionadas em nosso projeto. Para manter as coisas simples, porém, vamos fazer as coisas um pouco diferente do que o Google sugere. Vamos alternar para a técnica de importação e, em seguida, selecionar o código entre as tags de estilo aqui. Tenha cuidado para excluir as tags de estilo do que você está selecionando e copie-as. Agora vamos voltar ao nosso projeto. Na parte superior desta caixa CSS, logo após este comentário sobre declarações de importação, Cole o código que copiamos do Google. Agora a Lagosta Two negrito, não itálico face de fonte está pronta para usar em nosso projeto. Nosso próximo passo é atribuir a fonte Lobster Two aos cabeçalhos com a propriedade da família de fontes. Vejamos um conjunto de regras CSS um pouco mais complexo. Observe que há dois seletores, não um. Cada um está na sua linha separada por uma vírgula. Isto significa que as declarações aqui se aplicarão a cada um dos elementos especificados. Neste caso, a decoração da família de fontes será aplicada a todos os elementos h1 e h3. A próxima diferença está no valor da propriedade. Aqui temos dois valores separados por uma vírgula. O primeiro valor está entre aspas duplas. A propriedade font-family nos permite especificar um valor primário seguido por uma série de backups. Se o navegador não conseguir encontrar a primeira família de fontes que pedimos, ele usará a segunda. Aqui, estamos dizendo ao navegador para usar a fonte Lobster 2 se ele puder encontrá-lo. Se o navegador não puder, então ele deve usar fontes cursivas padrão do computador do usuário, seja qual for a fonte. Especificar famílias de fontes de backup como esta é uma prática recomendada, já que você nunca sabe que tipo de problemas podem surgir quando um usuário carrega sua fonte web especificada. Finalmente, uma vez que a mesma Lagosta Dois tem um espaço nele com um nome, precisamos envolvê-lo entre aspas. As aspas dizem ao navegador que Lobster Two é um único nome de fonte, não dois nomes de fonte. As cotações são obrigatórias aqui. Vamos implementar essa mesma regra definida em nosso código CSS. Em nosso código CSS, vamos rolar para baixo. Bem na frente do conjunto de regras h1 que já escrevemos, vamos escrever um novo. Vamos escrever h1, e então h3, e então teremos nossos colchetes, e então vamos usar a propriedade font-family. Então isso é uma família de fontes, e depois um cólon. Vamos escrever Lobster 2 dentro de nossas aspas duplas, e então vamos listar cursivo como nosso backup, e então dois pontos. Agora, observe que acabamos de aplicar esta fonte agradável para o título da nossa página e nossos cabeçalhos de seção. 8. Facturas de fonte personalizadas: Esta lição ensinará como implementar um font-face personalizado. Na última sessão, baixamos uma fonte da web de fontes do Google. Apesar de não termos visto no código, o Google nos forneceu uma definição de font-face para a lagosta duas fontes negrito não-itálico quando nosso navegador baixou a fonte dos servidores do Google. Nem sempre temos esse luxo. Às vezes só temos acesso aos próprios arquivos de fonte brutos. Nesses casos, temos que escrever nossas próprias definições font-face. Eu não vou rever os diferentes formatos de arquivo de fonte, já que muitos entusiastas de topografia já estão familiarizados com eles. Se não estiver, fique à vontade para conferir este artigo. Lê-lo como opcional para os nossos propósitos no curso. Vou salientar que, enquanto estou gravando este vídeo, o formato de arquivo mais confiável para usar na web é o formato WOFF W-O-F-F. Vou mostrar-lhe como usá-lo mais tarde nesta lição. Para o nosso projeto, precisamos definir três faces de fonte personalizadas, Roboto regular, Roboto regular Italic e Roboto bold. As regras font-face podem incluir várias propriedades. Neste projeto vamos usar apenas quatro. Já cobrimos a propriedade font-family antes. Uma diferença aqui é que em uma regra font-face, nós não especificamos fallbacks. As famílias de fontes de fallback são melhor especificadas nos conjuntos de regras quais elementos de estilo, como conjunto de regras de cabeçalho que escrevemos anteriormente. As declarações de estilo de fonte define se uma fonte deve ser estilizada com a face Itálica ou oblíqua normal de sua família de fontes. Neste projeto, usamos rostos normais e itálicas. A declaração de peso da fonte especifica o peso ou negrito. Para manter o nosso projeto simples, estamos apenas usando os valores normais e negrito, embora pudéssemos ficar muito mais específicos se quiséssemos. Finalmente, o SRC, ou declaração de origem, diz ao navegador onde encontrar o recurso que contém os dados de fonte, como todos os penhascos que compõem a fonte. Em muitos casos, como o nosso, o valor de origem será o local de um arquivo de fonte. Neste projeto, usaremos o valor de formato de parênteses de URL, que fornece ao navegador um local de arquivo específico. Finalmente, esse valor de parênteses de formato após o local do recurso ajuda os navegadores a entender o tipo de recurso que estamos fornecendo. Vamos implementar algumas fontes personalizadas em nosso código CSS. Em nossa caixa CSS, logo abaixo desta regra de importação, você vai notar este comentário que eu coloquei lá sobre Roboto font-faces. Isso será útil em apenas um minuto. A propósito, chamamos isso de regra, não um conjunto de regras por causa do símbolo “E” na frente. Logo abaixo do nosso comentário sobre nossas fontes, vamos começar a escrever font-face em regras. Vamos começar com Roboto-regular. Vamos usar o font-face. Vamos usar nossas chaves, especificamos família de fontes. Estamos designando a família de fontes Roboto. Vamos usar uma propriedade de estilo de fonte. Não estamos usando Itálico para esse rosto em particular, então nosso valor aqui será normal. Nós escrevemos a propriedade de peso da fonte. Deixe-me soletrar corretamente W-E-I-G-H-T. Lá vamos nós. Não estamos usando um tipo de letra negrito. Nesse caso, o peso da fonte é normal. Por último, vamos usar essa propriedade fonte para encontrar o recurso de dados. Aqui é onde esses três comentários entram. Aqui no topo, eu lhe dei uma localização de arquivos para nossos três tipos de fonte diferentes já que estamos lá para encontrar o Roboto font-face regular, eu vou copiar e colar o local do arquivo Roboto-regular. Precisamos incluir as aspas dentro da parte que estamos copiando. Usamos o URL e, em seguida, parênteses. Vamos colar a localização do arquivo dentro da URL. Nós vamos adicionar os formatos helper com parênteses uma vez que este é um arquivo WOFF, vamos colocar em WOFF como nosso ajudante e fechar a declaração como sempre com um ponto-e-vírgula. Agora que definimos nosso robô ou fonte normal, é hora de aplicá-lo ao conteúdo da nossa página. Mesmo que você não veja isso em nossa caixa HTML aqui em cima, todos os nossos resultados têm um elemento de corpo. Todas as páginas da Web têm um elemento de corpo. Neste caso, Code Pen está escondendo o elemento corpo da nossa caixa HTML para tornar nossas vidas um pouco mais simples. Mas imagine que todo o código HTML e nossa caixa HTML vive dentro de um elemento de corpo. Ainda podemos estilizar o nosso elemento de corpo páginas web embora. Aqui em nossa caixa CSS, nós rolamos um pouco para baixo e você verá este comentário que escrevi sobre o elemento corpo. Logo abaixo deste comentário, vamos escrever um novo conjunto de regras. Vamos selecionar o elemento body, chaves, a propriedade font-family. Vamos usar Roboto como nosso primeiro valor e depois vírgula. Então nós vamos nos dar o padrão sans- serif fallback caso o navegador não consiga encontrar Roboto e então é isso. Observe nos resultados aqui que a maioria do texto agora usa a fonte Roboto. Você está vendo o resultado da herança em CSS. Neste caso, exceto para os elementos de cabeçalho que já têm a lagosta duas fontes atribuídas a eles. Todos os elementos de texto da página herdaram sua propriedade font-family do elemento body. De um modo geral, a menos que as regras CSS tenham especificado o contrário, cada elemento HTML irá inerente maioria das propriedades de estilo do elemento que os contém. Isso pode estabelecer uma cadeia de propriedades herdadas até os elementos HTML raiz. Agora, eu sei que foi muito para assimilar, mas você não precisa se preocupar muito com esses detalhes para ter sucesso neste curso. Considere que uma visualização de um tópico mais avançado. Agora, aqui está um exercício que você vai fazer por conta própria. Sua tarefa é definir os outros dois rostos de fonte Roboto, Roboto-regular Itálico e Ruboto-bold. Logo abaixo desta primeira font-face na regra, você vai escrever mais dois font-face em regras, um para cada font-face. Use os valores de URL que eu forneço aqui no comentário acima. Se você precisar de uma dica sobre como fazer isso, volte e revise as propriedades de peso da fonte e estilo da fonte do início da lição. Você também pode usar meu projeto concluído tem uma referência. Novamente, postei o link para esse projeto concluído nas notas do curso. Você não verá nenhuma alteração nos resultados quando implementar essas novas fontes, nós as aplicaremos mais tarde no curso. Se você estiver interessado, há muito mais para aprender sobre fontes na web. Aqui estão alguns recursos para você começar. 9. Como criar uma coluna de texto: Esta lição concentra-se em restringir a largura de TextContent dentro de uma coluna vertical. Observe como nossos elementos de texto mais longos, como parágrafos e itens de lista, abrangem toda a página da Web e, em seguida, quebrados sob linhas subseqüentes Como um truque legal, podemos redimensionar nossa seção de resultados aqui apenas pegando o divisor central e arrastando-o para nossos resultados. Talvez seja assim que nosso conteúdo será exibido em um smartphone, e você pode restaurar o tamanho apenas arrastando esse divisor central de volta para o centro. Neste momento, estas linhas de texto são bastante longas. Para aumentar a legibilidade, a maioria dos designers recomenda comprimentos de linha em algum lugar entre 40-80 caracteres. Nossa primeira tarefa é restringir a largura de nossos elementos de texto para que as linhas não funcionem mais do que alguma largura especificada, como 60 caracteres. Para criar uma coluna de TextContent em uma página da Web, primeiro colocamos esse conteúdo dentro de um contendo elementos HTML. Eu já fiz isso por você. Em nossa caixa HTML, observe este elemento div, que envolve todos os outros cod HTML. Observe que é tag de abertura aqui como tag de fechamento está na parte inferior, no final de todo o nosso outro conteúdo. Podemos dizer que contém todos os outros elementos HTML no projeto. Um div por si só é um elemento HTML bastante genérico. Ele não fornece nenhum estilo por conta própria, mas os desenvolvedores costumam usá-lo para conectar seu próprio código de estilo em um lugar específico no HTML, que é exatamente o que vamos fazer aqui. Alternando para nossa caixa de código CSS, coloquei um conjunto de comentários e linhas para a coluna logo abaixo do nosso conjunto de linhas de corpo. Como meu comentário aqui afirma, eu já forneci o elemento div com um pouco de estilo, que eu não vou cobrir neste curso, já que eles realmente não têm a ver com o estilo de texto. Agora, para restringir a largura desta coluna vamos usar a propriedade de largura máxima. Como você pode ver, existem vários tipos diferentes de valores que podemos atribuir a uma propriedade de largura máxima. Felizmente, não vamos usar todos eles neste curso. Como queremos que nossas linhas não tenham mais de 60 caracteres, vamos usar essa unidade de medida ch. A unidade ch representa a largura do caractere 0 da fonte associada ao elemento. Como uma nota lateral que tutorial na tela lá vai levá-lo em muito mais detalhes sobre como usar diferentes unidades em CSS, então explorar esse recurso em seu lazer. Vamos terminar a nossa declaração definindo um valor de 60ch. Em nossa div, adicionamos a propriedade max-width e damos-lhe um valor de 60ch; e agora observe a largura como envolto todo o caminho até cerca de 60 caracteres no máximo, agora está contido em uma coluna simples agradável. Quero encerrar esta lição mencionando mais duas propriedades CSS que você pode achar úteis. Se seus textos contiverem uma palavra super longa que é maior do que a largura máxima para esse elemento, você pode especificar como deseja que o navegador trate essa palavra super longa. Use a propriedade break word para dizer ao navegador para dividir a palavra em pedaços e separá-las em várias linhas, ou para deixar a palavra original transbordar a largura máxima em uma única linha. Quando essa quebra de palavras acontece, você pode usar a propriedade hífens para dizer ao navegador se deve inserir um símbolo de hífen entre esses pedaços de palavras quebrados. Eu não vou demonstrar essas propriedades, mas sinta-se livre para mergulhar neste tutorial para saber mais. 10. Alinhamento horizontal: Nesta aula, nós vamos aprender como alinhar horizontalmente nosso texto. Começamos com a propriedade align text. Em suma, o alinhamento de texto funciona exatamente como as opções de alinhamento nos processadores de texto, permitindo alinhar o texto ao longo da borda esquerda, ao longo de uma borda direita , no centro ou justificado para ambas as bordas. Vamos aplicar a propriedade text align ao título e subtítulo da página. Para tornar o nosso código um pouco mais eficiente, vamos aplicar a regra de estilo ao elemento de cabeçalho em vez de cada um dos elementos H1 e H2. Podemos ver na caixa HTML que o nosso elemento de cabeçalho envolve ambos os elementos H1 e H2. Ao colocar a regra no cabeçalho, os elementos H1 e H2 herdarão a regra do nosso elemento de cabeçalho. Em nossa caixa CSS abaixo do conjunto de regras que escrevemos para nosso desenvolvimento, vamos adicionar outro conjunto de regras. Vamos selecionar o elemento de cabeçalho e, em seguida, adicionar chaves como esse. Nós vamos adicionar o texto align propriedade assim. Agora, se adicionarmos o valor certo a esta propriedade, vamos ver, olhar, o título da página e o subtítulo estão alinhados para a borda direita da coluna central. Vou usar o centro no meu projeto. Então vemos que o título da página e o subtítulo agora estão alinhados no centro da nossa coluna. Bastante simples, certo? Bem, parece que sim. Uma advertência aqui é que o alinhamento de texto só funciona em elementos de nível de bloco e células de tabela. Um elemento de nível de bloco aparece automaticamente em uma nova linha. Com um elemento embutido, no entanto, você pode colocar vários elementos embutidos ao lado um do outro e todos eles aparecerão na mesma linha. Podemos ver exemplos de ambos os tipos de elementos aqui em nosso projeto. Olhando para este primeiro parágrafo do texto. Lembre-se dessas tags fortes que tornam seu comentário negrito, nós usamos as tags fortes aqui em nosso HTML. Estes são elementos inline. Observe como eles não quebram, eles não causam quebras de linha nos resultados, isso é o que os torna inline. Por outro lado, vamos olhar para baixo para os nossos itens de lista. Observe como cada item de lista começa automaticamente em uma nova linha, estes são elementos de bloco. A principal coisa a lembrar é que a propriedade align text só funciona quando você usá-lo em elementos de bloco. O objetivo desta regra é que todo o conteúdo de textos em um único bloco, como um parágrafo, tenha o mesmo alinhamento. Esta técnica funciona para centralizar o conteúdo de texto dentro de um elemento de bloco. Mas e se quisermos centralizar o elemento bloco em si? Veja nossa coluna, por exemplo, não ficaria melhor se toda essa coluna de texto estivesse centralizada na página? A maneira mais fácil de centralizar um elemento de bloco que é mais fino do que seu recipiente, é definir sua propriedade de margem para auto. As margens dos elementos ajudaram a determinar a quantidade e tipo de espaço negativo em torno do elemento. Vamos voltar ao conjunto de regras para a div, que forma a nossa coluna aqui. Nós vamos adicionar uma nova declaração com uma propriedade de margem, então nós fazemos margem e então nós vamos adicionar o valor automático, e lá vamos nós. Olha, a coluna agora está centrada na página. Basta lembrar que esta técnica só funciona quando o elemento bloco é mais fino do que o elemento que o contém. Se o elemento central é o mesmo com o elemento que contém, esta técnica não vai realizar nada. Para aqueles de vocês interessados em aprender mais sobre como definir o espaço negativo em torno dos elementos, sinta-se livre para conferir este tutorial. 11. Espaçamento para letters, linhas e palavras: Esta lição é toda sobre espaçamento, vamos cobrir como definir com precisão o espaçamento entre letras, entre palavras, entre linhas em um elemento de bloco, depois entre elementos de bloco. Vamos abordar o espaçamento de letras primeiro. Isso mudará a quantidade de espaço entre letras individuais, ou o que os designers costumam chamar de kerning. Vamos dar outra olhada em nosso conjunto de regras H2 em nossa caixa CSS. Adicione uma segunda declaração com uma propriedade de espaçamento de letras. Então o espaçamento entre letras é espaçamento entre letras. Você pode usar um valor negativo para diminuir a quantidade padrão de espaço de letras. Então vamos tentar negativo 0.2 REM, negativo 0.2 REM, e depois um ponto-e-vírgula e, em seguida, notar as letras do nosso subtítulo apenas ficou um pouco mais perto. Pessoalmente, eu acho que isso é meio difícil de ler. Então vamos dar um valor positivo de 0,1 REM, eu me livro de negativo, mudo os dois para um, e agora temos um pouco mais de espaço. A propriedade espaçamento de palavras funciona muito como espaçamento entre letras, mas ajusta o espaço entre palavras em vez de entre letras no mesmo conjunto de regras H2, vamos copiar e colar a declaração de espaçamento entre letras. Copio-o, depois colo-o e alinhei-o. Agora vamos mudar esta carta para a frente. Agora temos a propriedade espaçamento de palavras. Também apenas para tornar isso realmente óbvio, vamos definir o valor para um REM e agora notar como temos uma grande diferença entre nossas palavras. Pessoalmente, não gosto do espaço extra. Pode ficar com ele, se quiser. Vou removê-lo. Então eu removi a declaração de espaçamento de palavras em nosso CSS e agora temos um alinhamento de palavras um pouco mais apertado lá. Para o último dos três simples baseado em texto e propriedades, podemos ajustar a altura da linha de elementos de texto com uma propriedade line-height. Esta propriedade especificará a altura de cada linha de texto na página. Em nosso projeto de biblioteca LetterVille, queremos que todos os parágrafos e itens de lista tenham a mesma altura de linha e queremos que essa altura seja um pouco mais alta do que o espaçamento padrão. Então, na parte inferior da nossa caixa CSS, vamos adicionar um novo conjunto de linhas. Vamos selecionar todos os elementos p e, em seguida, também queremos selecionar todos os elementos LI. Faça nossas chaves encaracoladas. Vamos adicionar a propriedade de altura da linha, de modo que é a altura da linha. Nós vamos dar-lhe um valor de 1,5 e o que isso faz é que ele define todas as nossas linhas de nossos parágrafos e linhas de nossas alturas de linha para uma vez e meia seu tamanho de fonte. Portanto, observe aqui em nossos resultados e agora temos espaços mais altos entre nossas linhas de texto. Para a técnica final de espaçamento de texto na web, cobriremos margens. Dê uma olhada em nossos itens da lista. Embora cada novo item da lista comece com um marcador na frente, pode ser difícil dizer rapidamente onde cada item da lista começa e termina. Acho que a lista seria mais fácil de ler se tivéssemos espaço extra entre os itens. Infelizmente, não podemos usar a propriedade line-height aqui porque isso adicionaria espaço extra a todas as linhas de texto. Então, vamos usar a propriedade margin bottom para adicionar espaço em branco extra para a parte inferior de cada elemento de item de lista. Então, na parte inferior da nossa caixa CSS, adicione um novo conjunto de regras para ajustar elementos LI. Nós vamos usar a propriedade margin-bottom e eu acho que 0.5 RAM faz o trabalho bem. Então faça 0.5 REM cólon e agora note que temos um pouco de espaço extra entre nossos itens de lista que torna apenas um pouco mais fácil de ler. Isso é tudo para a nossa lição sobre espaçamento de texto para a web. Em seus próprios projetos, sinta-se livre para experimentar essas propriedades e as diferentes unidades de medida em CSS. Veja que tipo de designs criativos você pode criar. 12. Como criar personagens e palavras: Esta lição abordará uma série de propriedades CSS que decoram caracteres e palavras com Visual Flair. Vamos começar com a cor. Presumo que já saiba as diferentes maneiras de especificar uma cor. Caso contrário, recomendo que leia este tutorial gratuito do Mozilla antes de prosseguir. Depois de entender os valores de cor, a alteração da cor dos elementos de texto é bastante simples. É chato que todo o texto da nossa página seja preto. Podemos fazer o cabeçalho se destacar com um pouco de cor. Então, em nossa caixa CSS, no conjunto de linhas h1 e h3 que já escrevemos, vamos adicionar outra declaração. A propriedade é simplesmente cor. Para este valor, vamos usar uma floresta verde. Eu forneci alguns valores de cor na parte superior da caixa CSS aqui neste comentário. Então eu vou cortar e colar este valor verde claro e depois voltar para a nossa propriedade de cor e colá-lo. Agora todos os nossos cabeçalhos, os cabeçalhos h1 e h3 agora têm essa cor verde floresta e a paleta de cores tem um pouco mais de variedade. Se rolarmos para baixo em direção à parte inferior, notaremos que nossos hiperlinks têm a cor azul padrão que a maioria dos navegadores atribuiu aos links. Como estamos indo com a paleta de cores verde e preto, precisamos mudar esses links para verde. Na parte inferior da nossa caixa CSS, adicione um novo conjunto rural que seleciona elementos. Esses são elementos de hiperlink, chaves e, em seguida, a propriedade color. Agora, infelizmente, o verde que usamos para nossos cabeçalhos é tarde demais para usar no corpo do texto. Ele não fornece contraste de cor suficiente e não atende aos padrões de acessibilidade, então usaremos um verde mais escuro. Vou rolar de volta para o nosso comentário sobre valores de cor e, em seguida vou copiar este valor para verde escuro para links. Depois voltarei para o modelador de etiquetas e adicionarei o valor da cor. Notei que nossos links mudaram para esse texto verde escuro. Outra propriedade de cor que podemos alterar é a cor de fundo. Observe esta frase destacada que começa com “como nós”, se olharmos em nosso HTML aqui, percebemos que a frase é embrulhada em uma marca de marca. Esta tag fornece uma cor de fundo padrão por trás do conteúdo de texto que ela contém. Eu não sei quanto a você, mas este amarelo, é meio brilhante e distrativo. Eu gostaria de suavizar um pouco. Na parte inferior da nossa caixa CSS, vou adicionar outro conjunto de linhas. Desta vez, usamos o seletor de marca para elementos Mark, chaves. Nós vamos usar a propriedade cor de fundo, então cor de fundo e, em seguida, um espaço. Agora vamos voltar aqui para nossos comentários de cores e eu vou copiar a cor amarela pálida para nossas marcas. Volto para baixo e colo esse valor. Agora vamos. Agora muito mais fácil para os olhos e ainda está destacando o texto, mas agora não é tão distrativo. Para a propriedade de estilo final da lição, transformação de texto altera a caixa do Conteúdo de texto. É bem simples. Ele muda os textos para ser todas maiúsculas ou minúsculas, ou maiúsculas, que diz a primeira letra de cada palavra para maiúsculas e todas as outras letras para minúsculas. Vamos definir o subtítulo da página para todas as letras minúsculas. Então, role de volta aqui, temos nosso subtítulo e uma tag h2. Então é isso que vamos mudar para baixo em nossa caixa CSS. Vamos subir, encontrar o conjunto da linha H2. Vamos adicionar uma nova declaração. Desta vez, é a propriedade text transform. Vamos usar o valor minúsculo. Agora observe que o subtítulo agora está tudo em minúsculas. 13. Sombras de texto: Nossa última lição do curso é, para mim, a mais divertida. Você pode ficar realmente louco com sombras de texto e criar efeitos de estilo que se parecem com Word Art. O toque final em nosso projeto da Biblioteca Letterville é adicionar sombra de texto ao título da página, para tornar um visual atraente e memorável. A propriedade text-shadow leva três ou quatro componentes para seu valor. O primeiro componente, o offset-x, é necessário e especifica a distância para deslocar a sombra para a esquerda ou para a direita com zero colocando a sombra diretamente atrás do texto. Um valor negativo desloca a sombra para a esquerda do texto. O segundo componente, o offset-y também é necessário e especifica a distância para deslocar a sombra para cima ou para baixo com zero colocando a sombra diretamente atrás do texto. Um valor negativo desloca a sombra acima do texto. O terceiro componente, o raio de desfoque é opcional e especifica a largura e a luz da sombra. Se não for especificado, o padrão é zero. O quarto componente, a cor, é necessário e define a cor da sombra. Vamos pôr isto em prática. Em nossa caixa CSS, retorne ao conjunto de linhas H1. Vamos adicionar uma nova declaração com uma propriedade de sombra de texto. Então isso é sombra de texto para a propriedade. Vamos usar um offset-x de 4px negativo, em pé para quatro pixels negativos, para puxar a sombra para a esquerda de seu texto. Para o offset-y, usaremos quatro pixels para deslocar a sombra abaixo de seu texto. Vamos pular o raio de desfocagem e para a cor, vamos pegar um tom mais claro do verde floresta do topo do nosso comentário de cor. Aqui vemos verde claro para a sombra de texto. Vou pegar isso, copiá-lo, voltar para baixo, e depois usar isso para terminar nossa propriedade de texto. Aqui estamos, você pode ver uma sombra mais clara do texto original apenas à esquerda e abaixo do texto. Uma coisa legal sobre a sombra de texto é que você pode colocar várias sombras em cima umas das outras para um efeito visual mais complexo. Quando você especifica vários valores para uma propriedade de sombra de texto, o navegador aplicará as sombras de frente para trás com a primeira sombra na parte superior. Vamos adicionar outra sombra ao nosso elemento H1. Na frente do valor de sombra original adicionar uma vírgula, vamos usar a vírgula para separar os dois valores. Adicione um offset-x de dois pixels negativos para puxar a sombra ligeiramente para a esquerda de seus textos. Nós vamos adicionar um valor de deslocamento y de dois pixels para puxar a sombra ligeiramente abaixo de seu texto. Vamos pular o raio de borrão novamente, e daremos o valor da cor branca. Agora podemos ver a segunda sombra branca, logo acima da primeira sombra verde claro, mas abaixo do texto, criando um efeito de contorno. Como mencionei anteriormente, há muitos mais efeitos criativos visuais que você pode alcançar com sombras de texto para os interessados, confira esta ferramenta gratuita para explorar demonstrações e experimentar com diferentes valores de sombra de texto. 14. Conclusão: Parabéns por chegar ao fim do curso, você conseguiu. Neste curso cobrimos uma tonelada de técnicas para estilizar texto na web. Tudo, desde alterar o tamanho da fonte até a cor, implementar uma fonte do Google, definir um rosto de fonte personalizado, sombras tecnológicas e muito mais. Se você tiver alguma dúvida sobre qualquer coisa que cobrimos aqui no curso, considere postar essas perguntas aqui no curso. Responderei o melhor que puder. Além disso, eu encorajo você a postar projetos aqui no curso, se você seguiu o meu exemplo de biblioteca Letterville ou você fez o seu próprio trabalho. Outros alunos e eu estamos interessados em ver o seu trabalho. Esta é a sua hora de brilhar. Além disso, se você lutou com alguma coisa neste curso, considere postar seu trabalho em andamento como seus projetos e peça feedback. Vou revisá-lo. Vou dar as suas dicas. Você sempre pode remover seu trabalho em andamento e postar seu projeto concluído mais tarde. Para onde vamos a partir daqui? Tenho quatro sugestões para o que fazer quando acabarem. Primeiro, se você gostou deste curso, por favor considere deixar uma avaliação positiva aqui neste curso, outros alunos vão querer saber que você gostou deste curso e você o achou útil. Dois, considere seguir-me aqui no Skillshare. Deve haver um botão para isso abaixo do vídeo. Eu planejo ensinar mais cursos, e HTML e CSS em um futuro próximo. Gostaria de mantê-lo informado quando publicar esse conteúdo. Terceiro, visite meu site. Publico um resumo semanal de tutoriais e demonstrações para HTML, CSS e Web Graphics. Em quarto lugar, compartilho uma tonelada de recursos gratuitos para aprender desenvolvimento web no Twitter e no LinkedIn. Então, conecte-se comigo lá. Adoro ensinar este curso, e espero que tenham gostado tanto quanto eu. Muito obrigado por se juntar a mim aqui, e estou ansioso para vê-lo no meu próximo curso.