Programação em HTML e CSS para iniciantes: crie seu próprio portfólio!

1. Introdução: Para construir sites, HTML e CSS são as habilidades essenciais que você precisará aprender. Você também vai precisar de muita prática também para obter o jeito dessas habilidades e este é o objetivo deste curso. Durante este curso, estaremos construindo um projeto de portfólio para dar a você a oportunidade colocar suas novas habilidades de HTML e CSS em boas práticas. Você também terá a chance de mostrar suas habilidades construindo um site e também terá um ótimo portfólio para adicionar a quaisquer projetos futuros também. Então, quem sou eu? Bem, meu nome é Chris e eu tenho sido um desenvolvedor web por 20 anos e também ensinando essas habilidades para outros por muitos anos também. No final desta classe, você terá uma grande compreensão de como os sites são construídos e também o papel que ambos HTML e CSS têm de desempenhar. Não só você aprenderá as habilidades essenciais para um iniciante, também iremos além, cobrindo tópicos mais intermediários, como design responsivo, layout usando grid e Flexbox, animações e transformações, adicionando um efeito de estilo paralaxe usando CSS, e muito mais. Você não precisa ter conhecimento prévio em HTML ou CSS para começar e, de fato, se você é completamente novo, uma vontade de aprender irá levá-lo um longo caminho. Cobrimos coisas do zero explicando tudo o que você precisa saber. No entanto, se você tem alguma experiência na construção de sites com HTML e CSS, você esperançosamente aprenderá alguns truques novos ao longo do caminho, também. No final deste curso, você terá as habilidades necessárias para criar sites responsivos e também um portfólio online ao vivo para o resto do mundo ver. Obrigado por se interessar por esta aula e vamos começar. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder e se afastar da aula, e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto posteriormente. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. O que é HTML e CSS: Antes de entrarmos em nosso projeto, se você é novo em HTML e CSS, vamos dar uma olhada em quais são esses com mais detalhes. Não vamos aprofundar muito, já que vamos escrever muito HTML e CSS durante este curso, mas um pouco de fundo irá ajudá-lo a entender o que vamos fazer. Começando com HTML, que significa linguagem de marcação de hipertexto, e é a maneira padrão de escrever páginas da web. Nós escrevemos HTML usando elementos e estes são geralmente apenas um par de tags que irá descrever o conteúdo dentro, como apenas aqui, este é o elemento p que é para adicionar um parágrafo de texto à nossa página web. Primeiro há uma tag de abertura e, em seguida, temos uma tag de fechamento que é indicada pela barra, e então nós adicionamos nosso texto dentro. A maioria dos elementos HTML tem uma tag de abertura e fechamento, no entanto, existem algumas exceções, como ao usar imagens que têm apenas a tag única. Isso ocorre porque os tanques de imagem não têm conteúdo dentro, então apenas texto. Em vez disso, apontamos para um arquivo de imagem e cobriremos isso durante o curso. Como vamos de uma página web completa? Bem, vamos dar uma olhada em um exemplo típico. É porque estamos criando um documento HTML que também vamos estar usando os elementos HTML para cercar toda a nossa página Web, isso também tem a tag de abertura HTML e também a tag de fechamento também que vai cercar todo o conteúdo vemos na página da Web. Para começar, temos as tags HTML e, em seguida, aninhado dentro aqui temos todo o conteúdo para a nossa página e qualquer conteúdo que veremos no próximo vídeo que queremos exibir no navegador vai dentro do elemento body. Aninhado dentro temos o corpo que vai ser um wrapper para todas as imagens e todo o texto, links e coisas assim na página. Dentro deste corpo, então temos todos os elementos que você vê aqui, podemos ter um cabeçalho para que este é no próximo nível em, e, em seguida, dentro deste cabeçalho podemos adicionar mais aninhamento também. Muitas vezes podemos querer adicionar um logotipo ou uma imagem do site na parte superior do cabeçalho, também alguns links para navegação, ou podemos ter nossa navegação logo abaixo como vemos aqui. Dentro da seção principal temos alguns aninhamento adicional também no mesmo nível que o cabeçalho. Nós também temos a seção principal, e aqui dentro podemos adicionar mais elementos aqui dentro também. Podemos querer adicionar uma imagem, podemos querer adicionar algum texto, ou podemos também dividir isso ainda mais em várias seções. Por exemplo, digamos que tivéssemos uma nova seção aqui dentro. Esta seção também pode conter alguns outros elementos aninhados, e estes novamente entrar entre o elemento de abertura e fechamento. Poderíamos adicionar algum texto dentro aqui para esta seção, em seguida, também conter os elementos p e é assim que uma página Web é geralmente estruturada. É assim que colocamos nosso conteúdo na página, mas como adicionamos estilo e layout? Fazemos isso usando CSS, CSS é uma maneira de mudar a aparência, sensação e layout de nossas páginas da Web, ele faz isso adicionando cores, dimensionamento, espaçamento e posicionamento para citar alguns, e podemos até usá-lo para animações e transições. Para fazer isso, precisamos direcionar os elementos HTML que queremos estilo e eles são várias maneiras que podemos fazer isso. Olhando para este elemento p de mais cedo à esquerda, provavelmente a maneira mais básica de fazer isso é pelo nome do elemento. Ambos à direita é como escrevemos nosso CSS, direcionamos o elemento por seu nome, como p, e escrevemos nossas regras de estilo dentro dessas chaves, como a cor da fonte e o tamanho. Isso aplicaria o estilo em todos os elementos p em uma página, no entanto, se quiséssemos apenas segmentar elemento único nascido, poderíamos adicionar um ID exclusivo para a tag de abertura, como este. Este nome ID de text-red é totalmente até nós, e qualquer informação extra que adicionamos a esta tag como esta, é conhecido como um atributo. Vamos vincular esse ID ao nosso CSS pelo seu nome com o prefixo hash como vemos à direita. Uma vez que um ID se destina a ser um nome exclusivo que visa apenas um único elemento, também temos o atributo class. Esta classe pode ser adicionada a vários elementos, resultando em nossos estilos sendo mais reutilizáveis. Como o ID, vamos vinculá-lo ao CSS pelo seu nome, mas desta vez adicionamos um ponto como um prefixo. Estes são exemplos do que chamamos de seletores CSS, e vamos cobrir alguns seletores mais avançados ao longo deste curso. Isso é apenas alguns conceitos básicos para nos levar a trabalhar com HTML e CSS, mas eu sempre acredito que a melhor maneira de aprender é construindo coisas, e é isso que vamos começar a fazer no próximo vídeo onde configuramos nossos projetos de portfólio. 4. Configurando o projeto do portfólio: Vamos agora pegar esse conhecimento e podemos aplicá-lo ao nosso projeto de portfólio. Para começar com um projeto web, tudo o que precisamos fazer é criar uma pasta regular que irá armazenar todos os arquivos e pastas que precisaremos. Vou adicionar meu projeto à área de trabalho ou ele pode ir para qualquer lugar que você preferir. Vou clicar com o botão direito do mouse e criar uma nova pasta que eu vou chamar de “portfólio”. Este nome é totalmente até você e sinta-se livre para mudar isso. Em seguida, precisamos de um editor de texto para escrever nosso código. Vou usar o código do Visual Studio para este curso que você pode baixar a partir daqui se precisar. VS code está disponível para download gratuitamente no Mac, Windows e Linux, ou você pode usar qualquer outro que você preferir, como Atom, Brackets ou Sublime Text. Eu já tenho o código do Visual Studio instalado, então eu tenho isso aberto na área de trabalho. Para abrir o nosso projeto, você só a fazer é arrastar sobre a pasta do projeto e, em seguida, precisamos de um novo arquivo HTML para começar a trabalhar com. Podemos ir para o novo arquivo nas opções ou usar Command ou Control N e isso irá criar um novo arquivo que eu vou salvar como o index.html. Isso salvará automaticamente dentro de nossos projetos e todos os arquivos HTML precisam ter essa extensão. Este arquivo de índice é geralmente o arquivo principal, todo o ponto de entrada em nosso projeto muitas vezes usado como página inicial em um site HTML simples. Vamos começar a trabalhar criando nossa estrutura HTML inicial, começando no topo com o doctype. Um doctype é o tipo de documento que estamos criando e isso irá dizer ao navegador que este é um arquivo HTML. Em seguida, precisamos cercar todo o nosso conteúdo nesta página, nos elementos HTML, e isso tem uma tag de abertura e fechamento. Também podemos definir o idioma da página como um atributo, digitando “lang” e eu vou definir o meu para ser en para Inglês. Se você estiver usando um idioma diferente, você pode encontrar rapidamente um código de idioma [inaudível] pesquisando códigos de idioma HTML em seu mecanismo de pesquisa. Dentro das tags HTML, isso contém tanto a cabeça quanto o corpo aninhado dentro. Vamos começar com a seção principal e isso vai conter informações sobre nosso site e também links para outros arquivos. Nenhum dos conteúdos que adicionamos na seção head é exibido no navegador. Vou começar aqui dentro adicionando duas metatags. Meta tags são simplesmente dados sobre o nosso site e não exibidos no navegador. O primeiro, vamos adicionar os atributos do conjunto de caracteres e definir isso para um valor de “UTF-8". Isso irá definir os caracteres que vamos usar em nosso projeto. HTML5 padrão é UTF-8 que cobre quase todos os caracteres e símbolos do mundo. O segundo, vamos definir o nome para ser igual a “viewport”. Esta é a meta tag viewport que é usada para configurar a página para tamanhos de tela diferentes. Fazemos isso definindo o conteúdo e por isso é igual à largura, para ser igual à largura do dispositivo e isso irá definir nossa página web para ser a mesma que a largura do dispositivo que foi visualizado com vamos dizer móvel, um ou um tablet. Depois disso, adicione uma vírgula, e eu vou definir a escala inicial para ser igual a um. Isso é realmente importante para o design responsivo. Isto irá definir o nível de zoom inicial, toda a nossa escala quando a página é carregada pela primeira vez. Isso é realmente importante para que todo o site fique bem em todos os tamanhos de tela. Se não adicionarmos isso, um dispositivo móvel pode tentar pegar nossa página de tamanho de desktop e simplesmente diminuir o zoom para tentar ajustar todo o conteúdo em nossa tela pequena, resultando em coisas como nosso texto parecer muito pequeno. Nós não queremos ter qualquer zoom ou dimensionamento, já que queremos cuidar da aparência do nosso projeto usando CSS. Muito disso pode parecer confuso para começar, mas isso vai ser algo que você vai reutilizar em todos os projetos para que você tenha muita prática. A parte final é adicionar o título da página e este é o título da página que será exibido na guia do navegador. Vou definir isto como Portfólio do Chris Dixon. Podemos mudar isso para se adequar ao seu projeto. Finalmente, você [inaudível] para a seção da cabeça, você também pode adicionar um corpo. Este é o segundo elemento que está aninhado dentro do nosso HTML. É assim que criamos uma estrutura HTML básica. Esta seção de corpo contém todo o conteúdo que queremos exibir no navegador, como quaisquer imagens, links e também qualquer texto. Então você vai passar a maior parte do tempo para o resto deste projeto. 5. Esboce suas ideias e reúna as imagens do seu projeto: Antes de ir mais longe com este projeto, há duas abordagens que você pode tomar. Você pode me acompanhar, e construir exatamente o mesmo projeto. Se você só quer aprender HTML e CSS, e isso é completamente bom. Ou se você está se sentindo um pouco mais criativo ou quer construir um portfólio real que você vai usar, agora é a hora de reunir tudo o que você precisa para seus projetos. Este vai ser o portfólio que eu vou criar. Ele tem uma grande seção de cabeçalho com uma introdução sobre nós mesmos. Se recarregarmos a página, também teremos algumas animações de desvanecimento. Temos alguns textos verticais. Em seguida, enquanto rolamos vemos algumas animações flip incluindo uma imagem de paralaxe em segundo plano. Mais abaixo, temos uma seção de trabalho recente, que inclui duas linhas com alguns conteúdos contendo informações sobre um projeto anterior que você deseja mostrar. Estes também têm algumas animações deslizantes. Nós também aprenderemos sobre como colocá-los usando Flexbox e algumas outras técnicas. Na parte inferior, temos um contato para a seção, e o site também é totalmente responsivo. Se reduzirmos o navegador para baixo, ele também ficará bem em tamanhos de tela diferentes. Além disso, o conteúdo ajusta e alterou o layout para se adequar ao novo tamanho da tela. Se formos até a seção superior, temos alguns links. Vamos para a nossa página de projetos. Temos o mesmo cabeçalho para o topo. Em seguida, temos alguns projetos recentes usando os layouts de grade CSS. Mais uma vez, se reduzirmos isso, isso também responderá, e mudado para se adequar ao tamanho da tela. Se quiser me acompanhar, tudo bem. Se você quiser apenas mudar seu nome e as imagens, usando isso simplesmente como uma experiência de aprendizagem. Se você está planejando personalizar, seria uma boa idéia criar um esboço ou uma simulação de como você gostaria que ele parecesse. Você também precisará reunir todas as imagens que você queira usar também. Eu forneci a imagem de fundo para usar com este curso, que é a imagem de fundo paralaxe da página inicial mas você precisará fornecer algumas imagens para usar no portfólio. Se você não tem muitos projetos para usar, você pode encontrar algumas imagens de exemplo que deseja incluir ou também reduzir a quantidade de projetos que deseja exibir. Tire alguns momentos para reunir todas as imagens e ideias que você precisará para o seu projeto. Também pode ser uma boa idéia redimensionar todas as imagens do portfólio que você vai usar. Isso tornará o layout da grade muito mais fácil mais tarde no curso. Depois de terminar, vamos passar para o próximo vídeo, onde vamos começar criando a seção de cabeçalho. 6. Seção cabeçalho e elementos semânticos: Antes da versão 5 do HTML, uma coisa típica que os desenvolvedores da web costumavam fazer para colocar nosso conteúdo em uma página, seria criar muitas seções div diferentes para cercar nossas áreas ou nosso conteúdo. Por exemplo, vamos criar uma div para o nosso cabeçalho, nossa seção principal, nosso rodapé, e também talvez uma barra lateral também. Para distinguir entre cada uma dessas divs ou seções, nós geralmente adicionaríamos um ID, como vemos aqui, como o cabeçalho ou o rodapé, então sabíamos que cada uma dessas seções era diferente. Agora, porém, desde a versão HTML 5, temos muitos mais elementos semânticos ou descritivos que podemos usar. Muitos deles são bastante auto-explicativos. Temos um como o cabeçalho, o rodapé, uma navegação. Nós também temos uma seção principal para a peça principal para o nosso conteúdo na página. Relacionado a esta seção principal, temos o lado, que é tipicamente usado para coisas como uma barra lateral. Podemos então adicionar seções autônomas de conteúdo, ou também podemos ter coisas como o artigo, que é uma informação autônoma, como um artigo de notícias. Vamos fazer uso de muitos desses elementos semânticos ao longo deste curso, começando no próximo vídeo, onde vamos dar uma olhada no cabeçalho e no nav. Esta é a versão final do projeto que vamos construir. Vou começar a trabalhar na seção do corpo criando este cabeçalho. Isto dar-nos-á a oportunidade de analisarmos também alguns elementos semânticos que acabámos de analisar. Podemos fazer uso do cabeçalho como um wrapper para a seção, ao longo também estamos olhando para o elemento nav também. Vamos fazer isso na seção do corpo do nosso projeto. Lembre-se, todo o conteúdo que exibimos no navegador entrará entre essas tags. Podemos começar com o cabeçalho, que vai envolver toda a seção cinza que acabamos de ver. Começando com os links de navegação no topo. Nossos links de navegação vai ser uma cobertura na minha lista, ou mais especificamente, uma lista não ordenada, que podemos criar usando o elemento ul. Uma lista não ordenada irá simplesmente produzir alguns itens da lista, por padrão com os marcadores à esquerda. Temos também uma lista ordenada que podemos usar com o elemento ol. Isso criará uma lista numerada. Aqui dentro, adicionamos cada um dos nossos links com a tag li, que é abreviação para item da lista. Precisamos adicionar uma casa, e também o link do projeto. Se salvarmos isso, agora podemos abrir isso no navegador. Você pode até entrar em seu portfólio de projetos e clicar duas vezes no index.html, que abrirá isso no navegador. Em vez disso, podemos ir no Visual Studio Code sobre a guia. Podemos clicar com o botão direito do mouse, copiar o caminho e, em seguida, colar isso no navegador. Agora temos as nossas duas ligações no topo. Se clicarmos neles, eles não vinculam a nenhuma outra página. Para fazer isso, precisamos transformá-los em um link usando o elemento a. Vamos remover temporariamente o texto que está dentro dos elementos a e, em seguida, colar isso entre os links. Agora, precisamos dizer ao navegador para onde queremos vincular. Fazemos isso adicionando o atributo href. Este é um link completo, e estamos atualmente na página inicial. Queremos vincular ao index.html. Vamos fazer o mesmo para todos os projetos. Cole este texto de volta e, em seguida, o href vai para a página do nosso projeto. Ainda não criamos nosso arquivo de projeto, mas podemos adicioná-lo para mais tarde. Salve este arquivo e, em seguida, sobre o navegador e recarregue. Vemos agora que estas são transformadas em ligações. Se clicarmos nos projetos, somos levados ao project.html, que, é claro, ainda não criamos. Clique em “Início” e permaneceremos na página de índice. Em seguida, precisamos adicionar o texto em nosso cabeçalho. Em primeiro lugar, temos o título de “Oi, eu sou Chris”, um texto simples abaixo, e, em seguida, nosso texto vertical na parte inferior. Podemos adicionar isso dentro da seção de cabeçalho, mas logo após o elemento nav. O texto de “Oi, eu sou Chris”, vou adicionar em um título de nível um. HTML nos fornece títulos que podemos usar do Nível 1 ao Nível 6. Nível 1 vai ser o maior e também o mais importante. O tamanho e a importância caem à medida que o número aumenta. Adicione o texto para o seu projeto e, em seguida, abaixo disso, temos o texto regular. Nós adicionamos texto regular no elemento p, que significa parágrafo. Eu vou cercar meu texto nos ícones de tilde que você pode encontrar no teclado, e o texto de, “Eu sou um desenvolvedor web e criador de cursos.” A parte final que precisamos adicionar é o texto de “Eu faço coisas”, e este será o nosso texto vertical. No entanto, o texto vertical não é criado usando HTML. O HTML é simplesmente lá para adicionar o conteúdo à nossa página. Vamos adicionar isso usando um título de Nível 3. Isso aparecerá no navegador no momento apenas como um texto horizontal regular, e mudaremos isso mais tarde com o CSS. Logo após o nosso parágrafo aqui, na próxima linha, o título de Nível 3 com o texto de “Eu faço coisas”. Salve este arquivo e na nossa guia “Projeto”, recarregue. O conteúdo está agora na tela. Como atualmente só adicionamos o conteúdo HTML, nosso projeto ainda não parece tão bom quanto a versão final. Vamos mudar isso no próximo vídeo adicionando uma folha de estilos. 7. Primeiras impressões do CSS e como vincular nossa folha de estilos: Anteriormente, quando configuramos nosso projeto, dissemos que a seção principal contém informações sobre nossos sites e também links para nossos arquivos. Mas não vamos vincular a uma folha de estilo que vai ajudar a melhorar nosso estilo e nossos layouts para nossos projetos. Primeiro, precisamos de uma folha de estilo para trabalhar para que não possamos dissolvê-la em nossos projetos. Podemos abrir a barra lateral e criar um novo arquivo na raiz de nossos projetos. Vou chamar isso de estilos com a extensão CSS pontilhada, que precisamos para todos os arquivos CSS regulares. Como este não é um projeto grande, vou manter todos os estilos para este curso em um único arquivo. Para projetos maiores, você pode usar quantos arquivos CSS quiser, e até mesmo organizá-los em pastas também. Em seguida, precisamos disso dentro do nosso arquivo HTML na seção head. Vá para o Índice. Então eu vou ligar isso logo acima do título. Lembre-se anteriormente, dissemos que a seção principal é usada para adicionar informações sobre nossos sites e também links para nossos arquivos. Podemos criar este link, por padrão, temos essa relação com folhas de estilo, que é exatamente o que queremos. Então o mesmo atributo “href” que temos para nossos links logo abaixo. Dentro daqui precisamos perguntar o caminho do arquivo para o qual você deseja vincular. Como este arquivo está ao lado da nossa página de índice, tudo o que precisamos fazer é adicionar o nome do nosso arquivo. Se organizamos nosso CSS em pastas, também precisaríamos adicionar o “Nome da pasta” também. Apenas uma pasta CSS e, em seguida, encaminhe “barra” para o nome do nosso arquivo. Para testar que este arquivo está funcionando corretamente, muitas vezes faço algo óbvio que será exibido no navegador. Se você ir para o, “Corpo”, e define a cor de fundo para a cor de vermelho. Vamos salvar isso e recarregar o navegador, e isso está claramente ligado agora para que possamos remover este arquivo. Agora vou adicionar ao topo deste arquivo alguns estilos globais que se aplicarão a todos os sites. Eu também iria redefinir em alguns estilos padrão que o navegador adiciona automaticamente. Também para começar, vou estar estilizando os sites móveis primeiro, depois, podemos ajustar nosso estilo para telas grandes. Vamos começar por reduzi-lo para um dispositivo de tela pequena. Vou colocar isso junto com o Visual Studio Code. Uma vez que usamos apenas um arquivo CSS, mantenha isso mais organizado. Vou adicionar um comentário. Um comentário é alguns textos que queremos adicionar que não são exibidos no navegador. Nós normalmente podemos usar isso para nossas notas para nós mesmos e nossos desenvolvedores, onde o comentário em CSS com a “barra” direta e, em seguida, uma “estrela”, e então nós fechá-lo quando a estrela e barra direta entre aqui podemos adicionar qualquer texto que você deseja adicionar. Vou adicionar esta seção como estilos globais. A primeira coisa que vou fazer é segmentar o corpo definindo a família de fontes. Se dermos uma olhada no auto completo, podemos ver algumas das fontes disponíveis que podemos adicionar, e eu vou para “Georgia”, que vão para baixo “Times New Roman” e “Times New Serif”. Estas são fontes seguras para a Web que podemos usar em seus projetos, significa que são seguras para usar em todos os navegadores. Também podemos incluir fontes diferentes de outros provedores, como fontes do Google, o fenômeno para ficar com uma dessas fontes do site. Muitas vezes, quando declaramos a família de fontes, como vemos aqui, há várias fontes. Temos quatro aqui, e isto é para o caso do primeiro não estar disponível. Georgia não está disponível. Ele vai procurar a fonte Times New Roman e voltar para os tempos. Então o final seria padrão para um serif genérico. Na próxima linha, vamos definir a base no tamanho para 10 pixels. Veremos por que muito em breve. A próxima coisa que vamos fazer é definir a margem para ser zero, e isso irá redefinir qualquer padrão do navegador. Podemos definir a largura para 100 vw, que é 100 por cento da largura da viewport. Isso ocorre porque estamos estilizando o celular primeiro e queremos que o conteúdo abranja toda a largura do dispositivo móvel, e também, novamente, uma vez que estamos direcionando os dispositivos móveis, também vamos centralizar o conteúdo. Não podemos substituir isso mais tarde ao desenvolver para navegadores maiores, e faremos isso usando midi-queries. “ Salvar” isso e vá para o “Browser”. “ Recarregar”. Veja que o texto está alinhado no centro e o tamanho da fonte agora é de 10 pixels. Na próxima semana vamos remover essas balas da nossa própria lista de pedidos. Vamos direcionar os elementos da lista não ordenada. Podemos removê-los definindo o “Estilo de lista”, para ser igual a, “Não”. “ Atualizar”, o navegador. Também podemos ver na nossa lista não ordenada que isso não está completamente centrado. Isto é devido a alguns dos padrões do navegador que são aplicados à nossa lista não ordenada. Vamos remover qualquer margem, que é o espaçamento em torno do exterior dos elementos e também qualquer preenchimento, podemos redefinir isso também, e preenchimento é qualquer espaçamento que é adicionado dentro dos elementos. Margem está fora, eo estofamento está dentro. Eu quero dar uma olhada nestes muito em breve. Os nossos links também têm o sublinhado. Isso ocorre porque estes são cercados com os elementos a. Podemos remover o sublinhado definindo a decoração do texto para ser “nenhum”. Nossos links também têm uma cor diferente. Podemos substituir isso definindo o valor de cor para ser herdado. Isso significa que os links herdarão a cor do item da lista pai em vez de precisar de cores padrão, “salvar” e “atualizar”. A maior parte desta seção é apenas substituições de navegador e alguns padrões básicos. Agora vamos passar para alguns valores de cabeçalhos específicos. Também podemos criar um comentário ou dois. Assim como antes, podemos criar nossos comentários, e isso vai ser para a seção de cabeçalho. Nosso cabeçalho é cercado nos elementos de cabeçalho, e assim como vemos na versão final aqui, vamos definir isso para ser uma cor cinza claro. Fazemos isso definindo a propriedade de fundo. Eu vou definir isso para ser qualquer cor que escolhermos, que eu vou para a cor de cinza claro ardósia. Se você quiser saber mais sobre diferentes cores que podemos usar, você pode fazer uma pesquisa no Google para o seletor de cores HTML. Você pode usar o padrão que aparece na pesquisa ou selecionar qualquer um dos links abaixo. Se você estiver usando um valor hexadecimal, assim como este, também precisamos copiar o hash e, em seguida, podemos substituir isso como nossa cor de fundo. Eu vou manter o meu como a cor cinza. Em seguida, recarregue o navegador. Verei isto entrar em vigor agora. No momento, todo o nosso conteúdo é espremido contra a parte superior e a parte inferior do cabeçalho. Lembre-se que sempre dissemos que podemos adicionar algum espaço dentro de nossos elementos adicionando preenchimento. Isso é obviamente agora e eu vou definir isso para ser o valor de 1rem. 1rem é uma vez o tamanho da nossa fonte base, que configuramos no tamanho do corpo anteriormente. Então 1rem seria igual a 10 pixels, 2rem seria 20 pixels, e assim por diante. A razão pela qual definimos isso para ser um arredondado de 10 pixels é para que possamos facilmente calcular o valor em rem. Então, agora, se dissermos isso, devemos ter 10 pixels de preenchimento ao redor do exterior. Em seguida, vamos definir a altura do elemento, assim como vimos na versão final com a altura total do navegador. Podemos fazer isso definindo o valor de 100vh, que é 100% da altura da porta de exibição. Em seguida, vamos passar para o estilo dos links de navegação. Estes estão sendo criados usando uma lista não ordenada. Vamos definir o tamanho da fonte para ser igual a 1.2rem, que é o equivalente a 12 pixels adicionar na lista não ordenada, assim, vamos aplicar o tamanho da fonte a todas as listas não ordenadas em nossa página. Se você quiser que ele seja mais específico no entanto, e apenas aplicar isso para a lista não ordenada. Dentro de nossa seção agora, poderíamos ser mais específicos e adicionar o nav na frente, assim como isso, o que significa que agora estamos livres para adicionar estilos diferentes em diferentes listas não ordenadas. Em seguida, vamos definir o tipo de exibição para ser flexível. Vamos olhar mais fundo no CSS flexbox em breve. Mas, por enquanto, isso nos permite colocar conteúdo em uma direção. Horizontalmente, padrões ou verticalmente. Salve isso e recarregue. Agora vemos que os links estão dispostos em uma direção horizontal. Para empurrar esses links de volta para o meio da página, também podemos usar uma propriedade flexbox, que é justificar conteúdo e o valor de centro. Esses links também precisam de algum espaço no meio. Podemos fazer isso direcionando o item da lista. Novamente, vamos ser mais específicos e direciona apenas os itens da lista nesta seção de navegação. Podemos fazer isso adicionando alguma margem. Ao definir a margem certamente se apenas digitarmos um valor como 1rem, isso se aplicará a todos os lados do nosso item de lista. Assim, 1rem de margem se aplicará ao topo, direita, ao fundo e à esquerda. Também podemos usar uma abreviação que é aplicar a margem para a parte superior e inferior e também para a esquerda e direita apenas. Então, para começar, podemos definir isso para ser zero na parte superior e inferior. Então o segundo valor é a esquerda e a direita, recarregar, e agora eu tenho algum espaço no meio. Descendo para o nosso nível 1. Vamos também adicionar um pouco de tamanho de fonte para isso. Mais uma vez, vamos ser mais específicos e apenas atingir o nível 1. Dentro da seção de cabeçalho. Vou definir o tamanho da fonte para ser 5rem. Recarregue, e agora é muito maior. Movendo-se para baixo, também temos o elemento p abaixo. Então este é o cabeçalho p. O tamanho da fonte, eu vou definir isso igual a 1.6rem, que é o equivalente a 16 pixels. Algum preenchimento que vai ser aplicado no interior dos elementos. Então 1rem na parte superior e inferior adicionar algum espaço entre o resto do texto, e não precisamos de nenhum preenchimento à esquerda e à direita, uma vez que o nosso texto está centralizado. Vamos dar uma olhada nisso. Ok, bom. Se olharmos para a versão final, também temos esta linha separando as coisas. Podemos adicionar isso usando um elemento hr, que é uma regra horizontal no HTML, ou podemos adicionar uma borda na parte inferior deste texto. Vamos fazer isso usando CSS. A borda inferior, que vai estar em linha com de um pixel, uma linha sólida, e a cor do ponto e vírgula cinza claro no final e atualizar o navegador. As últimas partes do estilo do cabeçalho é para segmentar o, Eu faço as coisas tributadas na parte inferior. Até agora temos visado os elementos pelo nome como cabeçalho e p, que nós olhamos anteriormente. Também podemos usar um nome de classe para. Vou adicionar um nome de classe para girar este elemento. Desde que vamos reutilizar isso em toda a nossa página sobre o index.html. Vamos procurar o nosso nível três. Podemos adicionar uma classe de rotação. Isso ocorre porque o texto girará nas telas maiores. Então vamos voltar ao nosso estilo em que eu alvo uma classe com o ponto, o nome de gira. Em vez de simplesmente usar a propriedade margin que olhamos antes, também podemos ser mais específicos e atingir um único lado, como margem superior. Eu vou adicionar um valor de 2rem, um tamanho de fonte de 3rem, e a opacidade, que é o valor ver livre de 0,4. Isso significa que nosso texto é 40 por cento transparente, significa que parte da cor de fundo cinza aparecerá. Então é assim que este texto ficará nas telas mais pequenas. Então, mais tarde, na tela grande vamos adicionar a rotação. Esta é a nossa primeira olhada no estilo de uma página web com CSS e também adotou uma abordagem móvel em primeiro lugar. Como você pode ver, nós cobrimos algumas regras CSS aqui e também há muito mais que podemos aplicar. Descobriremos muitos deles à medida que avançarmos pelo resto do curso. 8. Dica rápida: inspecionando o CSS com devtools: Antes de avançarmos neste projeto, quero compartilhar com vocês uma dica rápida que pode realmente ajudá-lo durante o desenvolvimento e isso é usar as ferramentas de desenvolvedor, que são incorporadas em todos os principais navegadores. As Ferramentas do Desenvolvedor, entre outras coisas, não podem nos permitir inspecionar o HTML e o CSS não apenas de nossos próprios projetos, mas de qualquer outro site também. Podemos acessar as Ferramentas do Desenvolvedor dentro do navegador. Geralmente, nós clicaríamos com o botão direito do mouse ou control-clique e, em seguida, ir para inspecionar ou inspecionar elemento para alguns navegadores. Aqui dentro, temos muitas informações sobre os sites do Chrome. Quer expandir isso. Temos o inspetor, primeiro lugar, do canto superior próximo. Se clicarmos sobre isso, podemos então passar o mouse sobre partes de nossos sites. Assim como a parte que queremos olhar. Vamos longe com o título de nível um, clique sobre isso. Podemos ver a estrutura HTML no lado que você dirige. Você também pode ver essas informações na parte inferior do navegador, mas eu vou apenas mover o meu para o lado direito usando as opções aqui. Aqui podemos ver que o título de nível um é destacado. Você pode ver exatamente qual HTML possível está controlando esta seção. Então, à direita, temos esse estilo. Vemos que o cabeçalho H1 tem um tamanho de fonte de cinco rems. Também podemos clicar aqui para remover o estilo igual em. Podemos brincar com as coisas adicionando novo estilo em. Vamos mudar o iguador. Isso entra instantaneamente em vigor no navegador. Abaixo, também vemos algum estilo padrão no qual foi aplicado pelo navegador. Nós também vemos na parte inferior não alguns estilos de também foram herdados da seção corpo que é o recipiente, como a família de fontes e o alinhamento de texto. Há muitas abas mais avançadas que você pode ver no topo, mas nós não estaremos cobrindo isso durante esta aula. As Ferramentas do Desenvolvedor não só nos permitem inspecionar o HTML e CSS de nosso próprio site, mas também de outros sites também. Por exemplo, se você acessar o site da Mozilla, podemos fazer o mesmo aqui. Clique no inspetor e, em seguida, escolha quaisquer elementos. Há muito mais HTML como podemos ver aqui, mas isso é cercado no elemento p para o texto. Também podemos ver todo o estilo que foi aplicado, como o tamanho da fonte, que podemos clicar, uma margem, a família de fontes, qualquer altura de linha, e muito mais. Nenhuma dessas alterações é aplicada permanentemente. Tudo o que precisamos fazer é atualizar e tudo é restaurado de volta ao padrão. Esta é apenas uma dica rápida para mostrar a você sobre as Ferramentas do desenvolvedor, caso você não as tenha usado antes. Eles podem ser realmente úteis durante o desenvolvimento. As ferramentas de desenvolvedor também têm muito mais recursos avançados. Mas não vamos cobrir isso durante esta aula. Em seguida, vamos voltar a codificar nosso portfólio adicionando uma imagem de fundo e também um efeito de paralaxe. 9. Imagens de fundo e efeito parallax: Isso é em um efeito de estilo de paralaxe para a nossa página web pode realmente torná-lo destaque. Você pode ter visto esse efeito ao rolar em páginas da Web ou aplicativos. Ele basicamente envolve o fundo, que no nosso caso é uma imagem rolando a uma taxa diferente do resto do conteúdo que fica em cima dele. Existem muitas opções lá fora para alcançar um efeito semelhante e muitos fazendo uso de JavaScript. Mas para este projeto eu vou estar criando uma versão única CSS simples. Para entender o efeito Parallax com mais detalhes, vamos dar uma olhada em um exemplo rápido. À esquerda aqui temos um layout típico de página web com um cabeçalho. Temos algumas imagens e também algum conteúdo que pode sair da parte inferior da tela. Se isso acontecer, o usuário precisará rolar para cima para todo o conteúdo entrar em exibição. Geralmente todo o conteúdo rola para cima na mesma taxa. No entanto, aqueles que aplicam um efeito de paralaxe, toda a idéia é que a imagem de fundo irá rolar a uma taxa mais lenta do que o resto do conteúdo ou não em tudo. Para conseguir isso com CSS, se olharmos para a imagem do lado direito, vamos definir uma imagem de fundo completa para cobrir todo o tamanho do navegador. Esta imagem também vai estar em uma posição fixa para que não vamos mover como o resto do conteúdo rola para cima na exibição. Também podemos deixar algumas lacunas em nosso conteúdo. Por exemplo, se removermos as duas imagens, isso deixará um espaço para revelar a imagem de fundo. À medida que rolamos para cima com todo o conteúdo. Vamos fazer uma visualização da versão final para ver como esse efeito vai olhar. Se rolar para baixo, você pode ver que a imagem de fundo está em uma posição fixa e ele realmente não se move. O resto do conteúdo irá rolar para cima e para baixo sobre a imagem de fundo. É esta seção que vamos agora criar, desde que com este curso é a mesma imagem de fundo que eu usei ou você pode usar a sua própria, se preferir. Eu tenho o meu salvo aqui na área de trabalho. Vou adicionar isto ao nosso portfólio. Vou guardar isto dentro de uma pasta de imagens. Vamos criar uma nova pasta. Isso também vai armazenar as imagens do portfólio, que adicionaremos mais tarde. Arraste sobre a imagem de fundo. Agora, se abrirmos a barra lateral, veremos agora a pasta de imagens e a imagem de fundo. Vamos começar criando um wrapper de seção, que será para todos os links que você vê aqui. Voltando à nossa página de índice, podemos criar isso agora. Logo abaixo da seção de cabeçalho, mas ainda dentro do corpo principal, vamos criar uma nova seção. Isto vai ter a classe de paralaxe. Isso nos permitirá direcionar esta seção no CSS. Assim como fizemos com o cabeçalho, vamos criar uma lista não ordenada para cada um dos nossos itens de lista. O primeiro será para desenvolvimento web freelance. Como sempre, você pode criar quaisquer links que se adequem ao seu portfólio. O próximo que eu vou adicionar como cursos de treinamento premium. O terceiro será para cursos de treinamento gratuitos, vídeos do YouTube. Então, finalmente, o último, como eles carregam filme vai dizer beber café. Salve isso e vá para o navegador. Role para baixo abaixo do nosso cabeçalho e vemos nossos itens de lista abaixo na parte inferior. Este é apenas o conteúdo html que precisamos. A maior parte do trabalho para esta seção acabou em nossas folhas de estilo. Vamos criar um novo comentário. Isto vai ser para a seção de paralaxe. Tiramos vantagem da classe de paralaxe que adicionamos antes. Dentro daqui podemos definir nossa imagem de fundo, vamos fazer isso em CSS com a propriedade imagem de fundo. Então aqui dentro temos a opção de definir o url. O url é o caminho do arquivo para a nossa imagem. Dentro das citações, temos uma pasta de imagens e, em seguida, barra barra o ponto de fundo JPEG. Também queremos que esta seja a altura total. Vamos definir a altura para ser 100 por cento da altura da viewport. Salve isso e sobre o navegador. O plano de fundo agora apareceu. Mas queremos posicionar isso exatamente onde queremos que esteja. Vamos começar centralizando a imagem de fundo com a propriedade da posição de fundo. Vamos adicionar isto ao centro. Também temos outras opções, como a esquerda, superior e inferior. Vamos recarregar e ver o efeito que isso tem. Agora vemos que a imagem foi centrada no navegador. A próxima coisa que vamos fazer é definir o tamanho do plano de fundo para um valor de cobertura. Para esta propriedade, temos várias opções, como podemos definir o tamanho da imagem para ser 50 por cento, três REMs, 100 pixels ou qualquer valor que gostamos. Aqui, embora vamos definir o valor a ser coberto, que irá dimensionar a imagem o maior possível sem esticar a imagem. Agora, se salvarmos isso e recarregar o navegador, vemos que a imagem também se move com o resto do conteúdo e não temos atualmente um efeito de estilo de paralaxe. Para obter o efeito desejado, a parte chave é definir a imagem de fundo a ser corrigida. Fazemos isso com a propriedade chamada anexo de fundo e o valor do fixo. Sobre o navegador role para cima e para baixo e vemos que a imagem de fundo permanece na mesma posição e o resto do conteúdo se move sobre o topo. Isso agora funciona porque a imagem de fundo é fixada no local para o navegador ou para a janela de exibição e o resto do conteúdo é livre para rolar normalmente. Para terminar as coisas, também precisamos fazer os itens da lista um pouco maiores e também adicionar algum espaço. Vamos começar por segmentar a seção de paralaxe e a lista aninhada e não ordenada. O tamanho da fonte será de 1,8 rems, que será o equivalente a 18 pixels e parte em, de um rem. Salve isso. Bom, nosso texto agora é um pouco maior e também precisamos adicionar algum espaço entre cada um dos nossos itens da lista. Podemos fazer isso adicionando alguma margem apenas para a parte superior e inferior. Vamos direcionar o item da lista de paralaxe. A propriedade de margem. Novamente, vamos usar a abreviação para que possamos adicionar 2 rems na parte superior e inferior, e depois um zero na esquerda e na direita. Como esses itens de lista já estão censurados, recarregue e nosso espaçamento agora foi aplicado. É assim que podemos adicionar um efeito de paralaxe simples ao nosso projeto usando apenas CSS. Como você pode ver, ele pode realmente fazer uma grande diferença e fazer uma seção do nosso site realmente se destacar. Neste curso, também usamos margem e preenchimento para aplicar espaço em nossos elementos. Se você ainda não tem 100% de certeza do que cada um deles faz, vamos dar uma olhada em cada um deles no próximo vídeo. 10. Dica rápida: margin, padding e box model: Nós usamos margem e preenchimento em nosso projeto até agora para aplicar espaço em nossos elementos. Se você ainda não está confortável com o que cada um deles faz exatamente, agora vamos dar uma olhada neste vídeo, além de descobrir também o modelo de caixa CSS. Se começássemos a div ou seções para uma página web e algum texto dentro usando o elemento P, acabaríamos com algo parecido com isso. Isto, obviamente, não é muito bom olhar. Uma das primeiras coisas que podemos fazer é adicionar algum espaçamento. Podemos querer algum espaçamento dentro das seções como esta, então não é tão perto das bordas e parece um pouco mais legível. Lembre-se, dissemos anteriormente, o preenchimento adicionar espaçamento dentro de um elemento. Isto é o que vemos aqui destacado pela seção verde. Este é o efeito da regra de preenchimento em CSS. Será padrão adicionar o preenchimento em torno de todos os quatro lados. Também temos acesso ao preenchimento na parte superior, direita, inferior e esquerda. Se só quiséssemos o espaçamento em certos lados, bem, e se também quiséssemos um espaço entre as seções? Como acabamos de olhar, preenchimento só se aplica ao interior do elemento. Em vez disso, aplicamos margem. Margem adicionar espaço nele para o lado de fora de um elemento como vemos com a seção laranja. Assim como o preenchimento, a regra da margem será aplicada a todos os quatro lados, a menos que digamos o contrário. Neste exemplo, a primeira seção precisaria ter uma margem inferior aplicada ou também poderíamos adicionar margem superior para o segundo elemento, que fará a mesma coisa. Adicionando espaçamento como este tem um efeito sobre o tamanho geral do elemento embora. Isso é chamado de modelo de caixa CSS. Se definirmos o tamanho de um elemento no CSS, como 300 pixels, por exemplo. Este é geralmente o tamanho que queríamos exibir no navegador. Digamos que adicionamos 10 pixels de preenchimento ao redor dos elementos. Como sabemos, nada é adicionado ao interior do elemento. Isso irá adicionar ao tamanho geral, resultando no aumento da largura para ser 320 pixels. Como em uma borda em CSS também terá o mesmo efeito. Se adicionarmos uma borda de um pixel ao redor exatamente como esta, isso irá adicionar um pixel extra em cada lado aumentando a largura geral para ser 322 pixels, que significa que precisamos ter cuidado ao dimensionar elementos para permitir isso. No entanto, uma vez que a margem é adicionada ao exterior de um elemento, isso não é contabilizado no tamanho global. Se quisermos levar em conta o preenchimento e a borda aumentando o tamanho do elemento, temos duas abordagens. Poderíamos reduzir a largura inicial do nosso conteúdo. Aqui, podemos remover os 22 pixels extras e definir a largura para ser inicialmente 270 pixels para contabilizar isso ou, em vez disso, podemos obter o navegador para calculá-lo para nós. Isso significa que qualquer que definimos nossos tamanhos de preenchimento e borda, o navegador sempre exibirá nossos elementos em 300 pixels. Podemos fazer isso definindo a regra de tamanho de caixa CSS para ser igual a caixa de borda. Isso é algo que podemos adicioná-lo ao nosso CSS se estamos tendo problemas para definir o tamanho de um elemento. 11. Conteúco em bloco, em linha e aninhamento: Agora vamos dar uma olhada em como podemos aninhar o conceito mais profundamente dentro do nosso projeto e também incluir imagens também. Nós vamos fazer isso criando uma seção de trabalho recente, que vai mostrar dois de nossos projetos. Isso também vai nos permitir brincar com alguns layouts mais complexos, e incluir em elementos de tamanho irregular. Por exemplo, nosso primeiro projeto será na primeira linha. Teremos uma imagem grande e, em seguida, algum texto sobre o projeto no lado oposto. Vamos então reverter isso para o segundo projeto na linha logo abaixo, onde a imagem estará no lado oposto ao primeiro projeto. Estes também vão estar dentro de sua própria div, que vai ser uma seção nessas paredes para ser aninhada como vimos antes. Estes CSS flexbox vai nos permitir criar este layout, e também criar um layout diferente para a tela menor também. Vamos começar a trabalhar com a adição do HTML para a seção. Para a versão final é assim que isso vai parecer na vida real. Nós vamos ter nossas duas linhas, e nós vamos alternadamente o projeto em cada linha. Usando a flexbox, isso também será totalmente responsivo, de modo que os layouts serão alterados em dispositivos de tela menores e maiores. Neste vídeo, vamos em frente e adicionar a marcação HTML para a seção que fornecerá o conteúdo para trabalhar no próximo vídeo. Onde vamos adicionar a flexbox para colocar isso para fora exatamente como queremos. O primeiro passo é criar um wrapper para esta seção juntamente com um título de trabalho recente na parte superior. Vamos fazer isso dentro da seção do corpo, que está abaixo da paralaxe que criamos recentemente. Nosso wrapper seção, abertura e fechamento tag, e, em seguida, dentro, podemos criar um cabeçalho de nível 3. É x vai ser trabalho recente, e também podemos adicionar um atributo de classe dentro da tag de abertura para que possamos direcionar isso com o CSS. Logo após nosso título de nível 3 vou adicionar um novo elemento, que é uma regra horizontal. Isso vai adicionar uma linha em toda a nossa página, que você vê apenas aqui. Usamos um efeito semelhante no CSS anteriormente neste curso, onde usamos uma borda para criar uma linha. Mas desta vez vamos usar a regra horizontal para criar nossa linha em nosso HTML, basta rolar para baixo, atualizar a página. Podemos agora ver o nosso título e a nossa linha no fundo. Podemos então começar a aninhar nossas divs dentro da seção para criar nossas duas linhas de conteúdo. Para fazer isso logo abaixo da nossa regra horizontal, vamos criar duas novas divs com a classe de trabalho recente. Eu vou então copiar e colar isso diretamente na nossa segunda linha, mas como criar uma nova div cria uma nova linha? A razão pela qual isso funciona é porque geralmente a maioria dos elementos são categorizados como nível de bloco ou inline, e se div cai na categoria de elemento de nível de bloco. Vou considerar isso se formos para o site da Mozilla, aqui quero dizer a seção de elementos de nível de bloco. O que você pode fazer uma pesquisa se você quiser encontrar esta página. Há muitas informações e exemplos nesta página, mas a coisa chave a observar está aqui nesta caixa. Ele diz: “Um elemento de nível de bloco sempre começará em uma nova linha, e também ocupará toda a largura disponível.” Significando que para cada div que adicionamos isso sempre irá adicionar em uma nova linha. Podemos ver alguns exemplos de elementos de nível de bloco se rolarmos para baixo. Aqui está a nossa tag div, e há muito mais como: o cabeçalho, o rodapé, e também o nav. Nós também vamos para o site da Mozilla e dar uma olhada na seção de elementos inline. Podemos ver aqui que os elementos inline não começarão em uma nova linha, e só ocupará a largura necessária. Coisas como imagens são elementos em linha, é por isso que podemos colocar o lado a lado em toda a página. Mais uma vez, se você rolar para baixo, temos nossa lista de elementos inline e podemos ver nossa imagem apenas aqui. Também podemos usar CSS para alterar o tipo padrão também usando a regra de exibição, e vamos olhar para isso no próximo vídeo onde vamos adicionar a flexbox. Agora que temos nossas duas linhas que você pode dividir em duas seções, vamos fazer isso aninhando mais duas divs dentro de cada uma. Isto é para que possamos adicionar a imagem de um lado, e do outro lado podemos adicionar as informações sobre o nosso projeto. Nossa primeira div também pode adicionar uma classe, para que possamos usar isso no CSS. Isto vai ser informação recente do trabalho. Podemos duplicar isto, e isto é para a imagem do trabalho recente. Se isso parece confuso, não se preocupe, esta é apenas a primeira linha, e dentro temos um invólucro para a imagem e, em seguida, para a informação. Vamos fazer exatamente o mesmo para a nossa segunda linha logo abaixo, eu vou copiar isso e adicionar isso aqui dentro para que tenhamos duas seções correspondentes. Estes são apenas contêineres no momento, então não há conteúdo ainda para mostrar dentro do navegador. Você já deveria ter reunido as imagens que você gostaria de usar. Se você ainda não fez isso agora será um bom momento para reunir algumas imagens de seu trabalho recente. Se você não tiver imagens de trabalho recentes, você pode baixar qualquer imagem de espaço reservado de amostra que você gostaria de usar. Já tenho minhas imagens prontas, então vou adicioná-las aos projetos. Nós já temos uma configuração de pasta Imagens aqui dentro. Vou pegar todo o resto das imagens, exceto o fundo que você já tem, e depois arrastá-los para a minha pasta Imagens. Feche isso, agora podemos ir em frente e adicionar todo o conteúdo que precisamos para nossas duas seções. Nós temos nossa imagem, e então nós vamos adicionar algum texto no lado oposto. Vamos começar em nossa primeira linha e dentro da seção de informações de trabalho recente dentro aqui um título de nível 4 que vai ser para o título do projeto. O meu será Pizza Planet. Logo abaixo dos elementos p que vai ser o texto e eu vou apenas adicionar algum texto de amostra do Vue. js aplicação para um e, em seguida, ponto ponto ponto ponto. É claro que você pode adicionar algumas descrições mais detalhadas aqui dentro, uma regra horizontal para separar o título e a descrição do resto dos recursos. Esses recursos que eu vou adicionar dentro de uma outra lista. Primeiro de tudo, o título, a outra lista, e, em seguida, o nosso item de lista dentro e isso vai ser para cada uma das características de nossos projetos. Vue. js que será a biblioteca de exibição, o banco de dados mais recente firestore, autenticação, roteamento, gerenciamento de estado Vuex e, em seguida, atualizações em tempo real. Depois, vamos separar isso com outra regra horizontal. Então vamos adicionar um link usando o elemento a, que vai ser um link para um projeto ao vivo se você tiver um. Ver texto do site Visite, em seguida, você pode adicionar o link ou a URL para o projeto de vida se você tiver um. Esta é toda a nossa informação se nós salvar e atualizar, ir para baixo nós temos todos os nossos textos no lugar. A próxima coisa a fazer é adicionar a imagem que está dentro deste wrapper. Fazemos isso com o elemento de imagem que é IMG. Nós adicionamos a fonte que é o caminho do arquivo para a nossa imagem, temos uma pasta Imagens. Isto é imagens e, em seguida, barra para frente, e a imagem que eu quero usar vai ser pizza-planeta. PNG. Os textos alt de imagem planeta pizza, esta é a alternativa para coisas como leitores de tela se a imagem não está disponível. Para o navegador e vamos ver esta imagem na tela. Bom. A próxima coisa a fazer é repetir esse processo para o segundo projeto. Queremos fazer um praticamente exatamente o mesmo que acima vamos criar a mesma estrutura, mas para o segundo projeto. Vamos começar com nosso nível 4 título sobre o título do projeto, que é React Trello. Novamente, dentro da seção recent-work-info , então, temos uma descrição dentro dos elementos p. Nós vamos dizer React js aplicação em linha com os elementos hr, o texto de recursos, e, em seguida, a nossa outra lista para todos os nossos recursos envoltos em um elemento de item de lista. Nós vamos dizer, a biblioteca React JS vista. Isso também tem o banco de dados firestore mais recente, autenticação, roteamento. Isso também faz uso da API de contexto e também atualizações em tempo real. Assim como acima abaixo de nossa outra lista, vamos novamente adicionar uma regra horizontal e, em seguida, um link para o nosso site ao vivo, se tivermos um, e nós texto de visita site. Se você não tem uma versão em tempo real para exibir, você também pode deixar isso desativado, ou você pode voltar a isso mais tarde e adicionar o link. que nos deixa com a imagem para adicionar na div inferior, e novamente vamos adicionar aos elementos da imagem. A fonte é a pasta Imagens, e então a imagem que escolhi será react-trello. O texto alt da imagem react-trello, salvar e, em seguida, recarregar o navegador. Vemos agora os nossos segundos projectos. Agora temos o conteúdo em vigor para nossa seção de trabalho recente, e no próximo vídeo vamos aplicar alguns estilos CSS não só para melhorar a aparência, mas também para torná-lo melhor em diferentes tamanhos de tela também. Para ajudar com isso, vamos tirar proveito da flexbox CSS, que ajudará com o layout de um conteúdo em uma direção. 12. Primeiras impressões sobre flexbox no CSS: Tanto a grade CSS quanto a Flexbox, são formas relativamente novas de expor nosso conteúdo usando CSS. Neste vídeo, vamos cobrir ambas as técnicas. Começando agora com a Flexbox, que é usada para definir nosso conteúdo em uma direção, controlando-o horizontalmente ou verticalmente. Para começar com o CSS Flexbox, a primeira coisa que precisamos fazer é criar um wrapper para todo o nosso conteúdo. No CSS, então definimos esse wrapper para ter o tipo de exibição de flex. Isso nos permitirá então definir a direção flexível para o nosso conteúdo para ser qualquer linha, que é através da página da esquerda para a direita, ou em uma coluna que é de cima para baixo. Portanto, nosso conteúdo é empilhado verticalmente. Isso é ótimo para design responsivo e também podemos definir as opções inversas também. Podemos definir a linha inversa, que vamos definir nosso conteúdo da direita para a esquerda e também coluna inversa, que vai ser o oposto, então nosso conteúdo é de baixo para cima. Podemos usar isso combinado com consultas de mídia para criar diferentes layouts para diferentes tamanhos de tela e também o Flexbox tem muito mais para oferecer e descobriremos algumas dessas propriedades flexíveis ao longo deste curso. Vamos passar para a nossa página index.html. No conteúdo que criamos no último vídeo, criamos duas seções com a classe de trabalho recente. Esta é a div wrapper para cada um de nossos projetos e o wrapper para cada linha. Quando eu quiser usar esta classe de palavras recente sobre o CSS, começando com o layout de coluna para a nossa exibição de tela pequena. Isso significa que cada um de nossos projetos será empilhado um sobre o outro, estendendo-se para ser a largura do dispositivo móvel completo. Vamos até nossas folhas de estilo e criar nossa nova seção usando os comentários. Esta é a seção de trabalhos recentes. Lembre-se, temos como alvo uma classe com o ponto e o nome do trabalho recente. Para usar a Flexbox, a primeira etapa é definir o tipo de exibição para ser igual a flex. Lembre-se no último vídeo, dissemos que muitos elementos podem ser categorizados em nível inline e bloco. Bem, podemos alterar o tipo de exibição de um elemento usando sua propriedade de exibição. Aqui, estamos alterando o tipo de exibição do nosso wrapper para fazer uso da Flexbox. Isso nos permitirá fazer uso de muitas outras propriedades flexíveis, como a direção flexível. Vamos começar nos dispositivos de tamanho móvel, definindo a direção flexível para ser coluna. Se reduzirmos isso, isso significa que o conteúdo será empilhado um sobre o outro em vez da linha padrão que está em toda a página. Nós também temos as opções invertidas também, então podemos definir isso para ser coluna reversa, salvar isso e recarregar, e agora as imagens aparecerão no topo do texto em vez de como era com apenas coluna, onde temos o texto e, em seguida, as imagens. Nós também pode definir a direção flex para ser linha. Isso significará que o conteúdo atravessa a página, assim como vemos aqui. Isso significa que o conteúdo vai rolar horizontalmente pela página, deixando nosso texto e a imagem ao lado do outro. Agora, embora nessas telas pequenas, vamos deixar isso como coluna e, em seguida, também definir o tamanho da fonte. Não se esqueça do ponto-e-vírgula no final. O tamanho da fonte será igual a 1,3 rems e isso é uma margem de um rem na parte superior e inferior para nos dar algum espaçamento e não precisamos de nenhum espaçamento à esquerda e à direita. Vamos recarregar isso e se agora rolarmos para baixo entre nossos dois projetos, agora vemos nossa margem no meio e também o tamanho da fonte entrando em vigor. Em seguida, vou adicionar um pouco mais geral de dimensionamento e espaçamento à nossa seção, então temos a classe para cada título, que é o título de trabalho recente. Podemos definir o tamanho da fonte para ser um pouco maior e deseja usar 1.6 rems. Em seguida, podemos começar a trabalhar no nosso texto para o nosso projeto. Este texto, está todo rodeado de uma div com a classe de informações de trabalho recente. Vamos em frente e o alvo é agora. Para o invólucro tudo o que eu vou fazer, é adicionar algum espaçamento no interior dos elementos de um rem e então vamos passar para o título Nível 4. Se passarmos para a marcação no arquivo HTML, e vamos para as informações de trabalho recentes, vamos agora começar a trabalhar no cabeçalho Nível 4 que é o título do projeto. Temos algumas maneiras diferentes de abordar isso. Poderíamos mirar diretamente na direção do Nível 4. Poderíamos adicionar uma classe a este título e, em seguida, pegar o elemento desta forma ou podemos ser mais específicos como olhamos anteriormente em nosso CSS, onde podemos selecionar as informações de trabalho recente, em seguida, h4. Então vamos fazer isso. Podemos segmentar as informações de trabalho recentes e, em seguida, qualquer cabeçalho de Nível 4 que está aninhado nesta seção. Tudo o que precisamos fazer aqui, é definir o tamanho da fonte para ser 1.4 rems ou qualquer tamanho de fonte que você preferir. Em seguida, temos nossos recursos que podemos ver aqui e vamos adicionar algum espaço entre cada um deles. Também temos aqui um símbolo que precisamos remover. Vamos descer. Também remova isso. Agora, para que possamos ser mais específicos apenas direcionando esses itens de lista nesta seção, em vez de afetar qualquer um de nossos links de navegação, podemos adicionar uma nova classe no índice. Para a nossa lista não ordenada, podemos adicionar a classe de recursos e faremos o mesmo para o nosso primeiro projeto também. Então, dentro da lista não ordenada, a classe de recursos, e então podemos ser mais específicos dentro de nossas folhas de estilo, direcionando os recursos, o símbolo maior que, e, em seguida, nossos itens de lista. Isso funciona de uma maneira ligeiramente diferente da maneira que usamos isso no passado. A maneira como selecionamos assim, significa que todos os títulos de Nível 4 dentro desta seção serão afetados. Fazê-lo da segunda maneira com o símbolo maior que, significará que isso só afetará os itens da lista que são um filho direto de nossas características. Isso significa que esses itens de lista precisam ser aninhados diretamente dentro. Nós temos a nossa lista não ordenada e estes estão no próximo nível em então estes serão todos afetados. Se tivermos um segundo nível de aninhamento aqui dentro, digamos que uma segunda lista não ordenada e, em seguida, um item de lista, este não será afetado. Vamos deixar isso e ver isso em ação, definindo a margem para criar algum espaço entre nossos itens de lista. Um rem na parte superior e inferior e, em seguida, zero à esquerda e à direita. Conhecemos o navegador. Temos nosso espaçamento aqui e também fora desses projetos. Vamos definir a cor dos links. Recarregar e agora podemos ver que o elemento de teste que adicionamos, porque este não é um filho direto de nossos recursos, isso não é afetado pelo nosso CSS. Vamos apenas remover este teste, salvar isso e recarregar. Também podemos remover a cor e as coisas estão agora um pouco melhor com o nosso espaçamento. A próxima coisa que precisamos cuidar, são as imagens que são grandes demais para o dispositivo. Mais uma vez, em nossas folhas de estilo, podemos segmentar os elementos pelo seu nome, que é IMG. Uma vez que este é também um estilo geral que você deseja aplicar a todos os projetos, eu vou adicionar isso no topo das folhas de estilo nos estilos globais. Esta é apenas uma preferência pessoal e isso pode ir a qualquer lugar nas folhas de estilo. Tudo o que vamos fazer é definir a largura máxima para 100 por cento. Isso significa que a imagem sempre será um máximo de 100 por cento do contêiner. Vamos recarregar e ver isso em ação. Novamente, também nesta seção de estilo geral, vou adicionar um pouco de estilo para a nossa regra horizontal. Vamos adicionar os elementos hr. A largura deve ser 100 por cento para que ela abranja toda a largura do conteúdo. Eu também vou definir a capacidade para 0,5, o que é 50% transparente. A cor também pode ser cinza claro e vamos ver como isso parece. Deixando-nos agora com uma linha mais clara entre o nosso conteúdo. Este é o nosso primeiro olhar para usar o CSS Flexbox e embora nós só o tenhamos usado até agora para criar um layout de primeira coluna móvel, medida que avançamos no resto do curso, vamos descobrir muito mais do que o CSS Flexbox tem para oferta. 13. Seção de contato e mobile-first para CSS final: Neste vídeo, vamos adicionar a seção final da nossa página inicial, que será uma seção de contato. Junto com também terminar o primeiro estilo móvel. Se formos para a versão final que abri aqui, e, em seguida, role para baixo até a parte inferior da nossa página de índice. Esta vai ser a seção de contato que eu vou criar agora. O HTML é bem simples. Tudo o que você tem são alguns blocos de texto e eles podem ser estilizados com o nosso CSS. Vamos começar adicionando a marcação da barra de hedge, que é basicamente nossa nova seção, e então alguns blocos de texto. Vamos para o index.html na parte inferior, mas ainda dentro da seção do corpo. Vamos mais uma vez criar nossa nova seção. Isso vai ter um ID exclusivo de contato. Vamos fazer uso disso no CSS muito em breve. Então dentro vamos ter um div aninhado com a classe de informações de contato. Esta seção vai ser o invólucro. Se olharmos para a versão final, este será o invólucro para todo o texto horizontal que temos aqui. Em seguida, vamos criar um título de nível 3 com a classe de rotação, que usamos anteriormente no projeto. Dentro de nossas informações de contato podemos adicionar o primeiro elemento, que vai ser um elemento p com a classe de cabeçalho de contato. Vamos usar o CSS muito em breve para tornar isso muito maior, o texto de não ser um estranho. Vamos salvar isso e verificar se isso parece bem no navegador. Recarregar. Podemos apenas ver como texto para baixo na parte inferior. Uma coisa que vamos fazer, porém, é colocar a palavra estranho em uma linha separada, assim como vemos na versão final. Podemos fazer isso adicionando uma etiqueta de freio. Uma tag break é simplesmente br. Isto irá empurrar o nosso texto para a próxima linha. Depois disso, um segundo elemento p com o texto de precisa de um desenvolvedor. Então vamos conversar. Em seguida, ofereceu um pedaço de texto aqui dentro, que vai ser o nosso endereço de e-mail. Isso agora cuida de todo o texto horizontal em nosso wrapper. Logo abaixo deste wrapper, vamos ter o texto girado, que é um cabeçalho de nível 3. Nós vamos fazer uso da classe de rotação, que nós usamos anteriormente no curso para o nosso título, que era o texto de Eu faço coisas. Aqui dentro, tudo o que temos é o texto de contacto, guarde isto. Ao longo do navegador, vemos o nosso texto horizontal é muito pequeno. Mas temos alguns estilos entrando em vigor para o nosso título de nível 3, já que fizemos uso da classe girar. Vamos agora corrigir isso em nossa folha de estilos, começando com nossa ID de seção de contato. Lembre-se quando ele usa um id, nós marcamos isso no CSS usando um áspero. Para começar, agora, vamos criar uma seção de contato para nós. Temos como alvo uma identificação usando o duro. Isso também vai fazer uso do tipo de exibição de flex. Podemos fazer uso das propriedades da caixa flexível, como a direção flex. Desde que começamos o celular primeiro, isso também vai ser na direção flexível da coluna. Substituiremos isso mais tarde quando tivermos mais espaço disponível na tela. Vamos adicionar algum preenchimento dentro de nossa seção de 1rem. Também assim como fizemos com o cabeçalho no início, também podemos definir a altura da nossa seção para ser 100% da altura visível. Podemos definir uma cor de fundo, e isso pode ser qualquer cor de sua escolha. Vou usar o valor hexadecimal de B1E2D7. O Visual Studio Code também criou um seletor de cores. Se passarmos o mouse sobre isso, podemos selecionar quaisquer cores diferentes da tela aqui. Ou faça uso dos selecionadores de cores, que analisamos anteriormente no curso. Então, isso irá definir a cor de fundo. Também podemos definir a cor do nosso texto para ser branco. Vamos ver como isso está parecendo. Recarregue o navegador. Temos toda a seção de contato de altura completa, nosso fundo e nosso texto em branco. Vamos agora começar a trabalhar com o texto no topo, começando com o cabeçalho de contato de não ser um estranho. Esta é a classe de direção de contato. Vamos pegar isso e fazer uso disso no CSS. Esta é uma aula, então usamos o ponto. Vamos definir a margem para ser zero e, em seguida, tornar o tamanho da fonte muito maior. Vou pegar cinco rems. Recarregar. Em seguida, vamos direcionar nossos elementos p dentro da seção p. A seção tem a classe de informações de contato. Podemos então selecionar os elementos p. Esse é o tamanho da fonte, b 1.4 rems. Em seguida, para adicionar algum espaço entre estes, podemos adicionar alguma margem para a parte inferior de cada elemento. Já que temos muito espaço vertical para brincar, vou definir isto para três rems. Salve isso e recarregue o navegador. Agora isso nos deixa com um pequeno problema. Isso ocorre porque direcionamos todos os elementos p nesta informação de contato. Esta rubrica é também um elemento p. Temos algumas maneiras diferentes de como podemos abordar isso. Poderíamos mudar este primeiro p elementos para ser um elemento diferente, como um título. Ou, alternativamente, podemos adicionar uma nova classe, como texto de contato. Vamos também adicionar isso ao nosso e-mail. [ inaudível] para salvar. Altere isso para ser um texto de contato. Salve e recarregue. Agora nosso projeto é como foi planejado. A última coisa a fazer é esta seção de contato na parte inferior. Nós só vamos exibir esses elementos quando tivermos mais espaço disponível na tela. Por enquanto, na primeira visualização móvel, vamos selecionar isso. Esta é a nova seção de contato, a classe de rotação. Então tudo o que precisamos fazer é definir o tipo de exibição para ser nenhum. Isso removerá isso da nossa página. Podemos restabelecer isso mais tarde para a exibição de tela maior redefinindo o tipo de exibição para ser algo como bloco. Descobriremos como fazer isso mais tarde no curso. Este é o estilo que agora completa para a exibição de tela pequena. Primeiro, claro, não se sinta livre para fazer quaisquer alterações suites seu olhar e tema. No próximo vídeo, vamos dar uma olhada nas consultas de mídia CSS, que nos permitirá aplicar diferentes regras CSS para telas de tamanhos diferentes. 14. CSS media queries: Já falamos anteriormente sobre como podemos usar o CSS flexbox para criar diferentes tipos de layouts. Em uma exibição de tela pequena sobre a direita, normalmente podemos querer que o conteúdo seja a largura total disponível e empilhado em cima de cada um de um verticalmente por direção certamente flexível para ser coluna. Quando temos mais espaço na tela disponível como sobre a esquerda, nós também muitas vezes queremos aproveitar este espaço extra e adicionar nosso conteúdo ser lado a lado. Sabemos que a flexbox pode fazer isso definindo a direção para ser linha, mas como aplicamos isso em diferentes tamanhos de tela usando CSS? Bem, a maneira de fazer isso é adicionar uma consulta de mídia CSS, que é basicamente uma maneira de criar uma seção do nosso CSS, que só se aplica a determinados tamanhos de tela, orientação ou resolução, para citar alguns. Voltar para a Mozilla Developer Network, bem, na seção Using Media Query, e aqui podemos encontrar pequenos exemplos de como podemos usar media queries para aplicar estilos diferentes dependendo do dispositivo. Primeiro de tudo, se rolarmos para baixo, temos uma seção de tipo de mídia, e este é o primeiro passo para construir uma consulta de mídia. Aqui podemos definir essas regras CSS para aplicar dependendo do dispositivo. Podemos aplicar isso a coisas como um sintetizador de fala, uma tela, o modo de visualização de impressão ou podemos selecionar tudo para aplicar a todos os dispositivos diferentes. Mais abaixo na próxima seção, temos recursos de mídia, e esses recursos são geralmente mais específicos para o dispositivo, como a largura, a altura e também se o dispositivo é paisagem ou retrato. Um dos usos mais comuns para consultas de mídia, e para que vamos usá-las neste curso é mudar nosso estilo com base na largura da tela, e podemos ver isso na parte inferior desta seção. Podemos definir regras CSS com base na largura da janela de exibição. Vamos passar para o nosso arquivo CSS e podemos adicioná-los aos nossos projetos. O primeiro passo é decidir qual tela que queremos alterar o CSS, e começar de novo no navegador com a exibição de tela pequena. Nós geralmente queremos mudar as coisas quando nosso conteúdo parece esticar. Por exemplo, se tornarmos isso mais amplo, sempre chegamos a um ponto em que o conteúdo parece realmente esticado, e então queremos reorganizar nosso layout. Assim que chegarmos a um tamanho em que queremos alterar nosso conteúdo, também precisamos detectar o quão amplo isso é, que possamos adicionar isso a uma consulta de mídia. A maioria dos navegadores tem certos plug-ins ou extensões que estão disponíveis, mostram a largura da tela, ou outra opção é ir para clicar com o botão direito do mouse e inspecionar para abrir as ferramentas do desenvolvedor, e aqui dentro enquanto esticamos o navegador, podemos ver no canto superior direito, a largura do navegador é exibida. Assim que ficarmos um pouco mais largos, e eu vou para algum lugar por volta do 860, mas eu vou mudar o layout para alojar conteúdo lado a lado. Muitas vezes, em nosso style.css, podemos começar pela consulta @media com a regra de mídia at. Como já vimos antes nos sites da Mozilla, podemos direcionar a tela, e também podemos combinar isso com alguns dos recursos de mídia que olhamos, como a largura mínima do navegador, que eu vou definir para ser 860 pixels. Agora, o que precisamos fazer dentro dessas chaves é adicionar quaisquer regras CSS, assim como usamos anteriormente. Basicamente, qualquer estilo em que temos acima será sempre aplicado ao nosso projeto, mas os que estão nessas chaves só serão aplicados quando a tela atingir 860 pixels e acima. [ inaudível] a seção do corpo e nós podemos criar um verdadeiro insider aqui. Vamos definir o fundo para ser a cor do vermelho, definir isso e recarregar. Você vê a cor de fundo vermelho e, em seguida, vamos abaixo de 860 pixels, e essa regra não será mais aplicada. Se você quiser segmentar todos os dispositivos de tamanhos diferentes e não apenas esses ecrãs, também podemos simplificar a nossa consulta de mídia assim. Vamos testar isso. Recarregue o navegador, e isso ainda se aplica. Claro, não queremos essa cor de fundo vermelho como esta, em vez de agora consulta de mídia. Vamos começar no topo de nossos projetos com nossos links de navegação. Se olharmos para a versão final, isto vai acabar do lado direito. Vamos fazer isso agora. Em vez de direcionar a seção do corpo, vamos segmentar a navegação, e depois a lista não ordenada, e podemos movê-los para a direita, justificando o conteúdo seja o valor de flex-end. Se dermos uma olhada na seção ul nav procurando por isso, este n menos atualmente na linha 43. Bem, aqui podemos ver que definimos o estilo global. Nós já definimos o tipo de exibição para ser flexível, então este será sempre o caso em todo o nosso projeto. Aqui nós definimos o conteúdo justify para estar em um centro para as telas pequenas, mas agora dentro de nossa consulta de mídia maior na parte inferior, nós substituímos isso com flex-end. Agora, se salvarmos isso, recarregue o navegador, isso será sobre no lado direito para a visão maior. Então, à medida que reduzimos o navegador, isso voltará para o centro. A próxima coisa que precisamos fazer é girar o texto de I make coisas, também possamos adicionar isso à consulta de mídia também. Esta tem a classe de rotações. Primeiro de tudo, vou adicionar alguma margem. Analisamos como adicionar margem a todos os quatro lados. Também analisamos como podemos aplicar margem e preenchimento na parte superior e inferior, e também à esquerda e à direita. Se quisermos controlar os quatro valores individuais, também podemos defini-los separadamente. Dentro daqui, podemos definir quatro valores diferentes, e este será o valor da parte superior, direita, inferior e esquerda em uma ordem particular. Em primeiro lugar, duas rems no topo, zero na direita, inferior e esquerda. Em seguida, vamos definir o modo de escrita, que vai ser importante para colocar para fora o nosso texto horizontalmente ou verticalmente. Isto vai ser um valioso vertical- lr. Isto irá definir o nosso texto para ser vertical da esquerda para a direita. O texto está agora vertical como esperado, mas se olharmos para a versão final, vemos que os caracteres também é vertical. Podemos fazer isso em nosso projeto, definindo também a orientação do texto e o valor de vertical. Podemos fazer uso desta propriedade quando nosso modo de escrita é definido para vertical, e então, finalmente, nós também podemos definir o tamanho da fonte para ser muito maior, então o valor de cinco rem, salvar este inalterado para o navegador. Quando LCL Vertical Text tiver derramado sobre a seção paralaxe, para corrigir isso, vamos adicionar algo mais dentro de nossa consulta de mídia. Vamos direcionar a seção de cabeçalho e vamos definir a altura para 100 por cento, salvar e recarregar. Isso agora corrige nosso problema. Eu não vou fazer nada com nossa seção de paralaxe agora se rolarmos para baixo, isso parece muito bom na tela maior também. Wee pode ir para a seção de trabalho recente. Como agora temos mais espaço disponível na tela, vamos colocar o texto ao lado da imagem em cada linha. Podemos fazer isso direcionando o contêiner, que é um trabalho recente. Em seguida, defina a direção flexível para a linha, recarregue, colocando o conteúdo dentro de nossas linhas lado a lado. A próxima coisa que precisamos fazer é definir o tamanho da nossa área de texto e também da nossa imagem. Podemos fazer isso definindo a propriedade flex para ser um valor. Por exemplo, se a seção de informações e a imagem tivessem um valor flexível de um, eles ocupariam uma quantidade igual de espaço. Mas queremos que a imagem seja um pouco maior para que possamos definir o valor flex na seção info para o valor de um. Em seguida, defina a imagem para ter um valor flexível de dois, o que efetivamente ocupará o dobro do espaço. Vamos fazer isso agora começando com as informações de trabalho recentes. Lembre-se que isso é para o texto que definimos o valor flex para ser um e também adicionar algum preenchimento para o interior de uma RAM. A imagem tem a classe de imagem de trabalho recente. Novamente, ainda certificando-se de que isso ainda está dentro da nossa seção de consulta de mídia, definimos o valor flex para ser dois, ocupando o dobro do espaço disponível como nossa seção de informações. Eu também vou adicionar uma borda em torno desta imagem. Vou começar definindo a cor para ser cinza leve. A espessura da borda para ser uma RAM e também uma linha sólida. Recarregue o navegador, deixando a imagem ocupar o dobro do espaço disponível como nossa informação. Pouco antes de encerrar esta seção, eu também vou segmentar a imagem para que a imagem trabalho recente e, em seguida, o elemento de imagem aninhado dentro. Apenas para se certificar de que a largura da imagem e também a altura estica o total 100 por cento do recipiente. Apenas no caso de nossas imagens não serem dimensionadas corretamente, como descobrimos anteriormente, vamos ao nosso projeto final e dar uma olhada em como nossa imagem e nosso conteúdo são alternados. Uma das maneiras que podemos fazer isso é mudar a ordem do nosso HTML para que, se formos para a nossa página de índice, poderíamos alternar a ordem da nossa imagem e do nosso texto. Esta é uma abordagem que podemos tomar e isso funcionará bem para a visualização de tela maior. No entanto, se formos para a exibição de tela menor esticando o navegador, isso também afetará a ordem para a tela pequena. Aqui temos a informação, a imagem, a informação e, em seguida, a imagem, este não seria o caso se mudássemos a ordem fonte do HTML. Em vez disso, podemos usar uma propriedade caixa flexível chamada ordem, que nos permitirá alterar a ordem em que os elementos aparecem na página com um número menor ou negativo aparecendo primeiro no arquivo HTML. Vou adicionar uma aula à primeira seção de informações de trabalho recente. Vamos para o nosso primeiro projeto e selecionar as informações de trabalho recentes. Vamos adicionar uma segunda classe de novo direito. Agora eu posso usar essa classe em nossa folha de estilos para reorganizar a ordem de origem. Vamos mirar isso. Para mover para a direita, podemos definir a ordem para ser um valor de um. O valor padrão é 0, então logo antes de salvarmos esse arquivo, vamos dar uma olhada no que temos atualmente. No momento em que temos, se formos para nossos projetos, temos as informações à esquerda e a imagem à direita. Salve este arquivo, recarregue e agora nossa seção de informações foi movida para a direita do nosso projeto. A razão pela qual isso funciona é porque nosso valor padrão, nossa ordem padrão, é o valor de 0. A seção de imagem ainda terá o valor de 0, fazendo com que isso apareça primeiro. Em seguida, vamos definir a seção de informações para ter um valor de um. Este é um número maior, este aparecerá por último na ordem. Isso também está dentro da consulta de mídia, então essa ordem só terá efeito nas telas maiores. Vamos agora terminar o estilo para esta consulta de mídia movendo para baixo para a seção de contato. Atualmente, tudo está alinhado no centro e também precisamos reintroduzir nossos textos girados. Na página de índice, vamos até a seção de contato. Em primeiro lugar, temos a classe de direção de contato. Vou fazer isto ainda maior para esta secção. Podemos então selecionar o recipiente inteiro, mudar a direção flexível para a linha e, em seguida, também adicionar algum espaço em. Vamos começar com o título para a classe de título de contato. Vou redefinir a margem para ser um valor de 0, definir o tamanho da fonte para ser ainda maior de uma RAM, recarregar. Em seguida, vamos reintroduzir o texto girado. Vamos fazer isso substituindo o tipo de exibição anterior. Vamos selecionar a seção de contato, a classe de gira. Tudo o que precisamos fazer aqui é definir o tipo de exibição para ser bloco. Isso substituirá esses estilos que definimos anteriormente. Se rolarmos para cima, definimos essa ação para ter o tipo de exibição de nenhum na exibição de tela pequena, agora dissemos que isso poderia ser bloqueado. Isso agora será exibido nas telas maiores. Também queremos que esta seção fique no lado direito e a maneira como podemos fazer isso é configurando a caixa flexível. Podemos definir a seção de contato completo para ter a direção flexível da linha, que significa que o nosso texto vertical será ao lado da seção aqui. Selecione o contato, que é o invólucro completo para a nossa seção. Defina o tipo de exibição para ser o flex. O que significa que podemos definir a direção flexível para ser linha, recarregar o navegador, colocar isso ao lado do outro na página. Podemos adicionar algum espaço no meio, selecionando e justificando o conteúdo. A propriedade do espaço entre os quais irá distribuir o espaço disponível entre as nossas duas seções. Eu também vou definir o alinhamento do texto ser a esquerda, bastante perto do centro, que é atualmente. Isso empurrará todo o texto para a esquerda do navegador na tela maior. Ainda manteremos o texto centralizado na exibição de tela pequena. 15. Animações personalizadas em CSS: Agora vamos dar uma olhada em como podemos adicionar animações CSS ao nosso projeto. Uma animação é uma maneira de mudar estilos CSS ao longo de um período de tempo. Por exemplo, mais de dois segundos, talvez queiramos desaparecer um elemento ou podemos mudar de uma cor de fundo para outra de uma duração definida. Nós também podemos usar isso para aplicar qualquer estilo CSS diferente que vamos querer. Vou dar uma olhada em como podemos incluí-los agora. As animações podem realmente trazer seu projeto vivo. Agora vou usá-los na seção de cabeçalho. Primeiro, desaparecendo no texto de, oi, eu sou Chris. Depois de um pequeno atraso, também vamos desaparecer no texto logo abaixo de dois, dando ao usuário uma mensagem de boas-vindas suave. Este vídeo em particular vamos cobrir adicionando em nossas próprias animações personalizadas usando CSS. Em seguida, o próximo vamos olhar para como usar uma biblioteca de animação para adicionar muitos efeitos agradáveis ao rolar. Para configurar nossas próprias animações personalizadas, precisamos configurar o CSS que queremos alterar usando a regra de quadros-chave. A regra de quadros-chave é configurada no arquivo CSS, um pouco como as consultas de mídia que procuramos antes. Podemos ver um exemplo à direita, ele usa o símbolo @ pouco antes seguido pelo nome de nossa escolha. Em seguida, dentro de nossas chaves, adicionamos em qualquer nome de estilo CSS que queremos aplicar em determinados estágios da animação. No mais básico temos de e para, que é o estado de início e fim da animação. Aqui, mudamos a cor de fundo. Em seguida, à esquerda, selecionamos um elemento para aplicar isso, link em nossos quadros de chave personalizados nome de change-bg para uma propriedade chamada nome de animação. Se queremos mais controle sobre os estágios de animação, também podemos aplicar diferentes CSS em diferentes porcentagens da animação. Podemos aplicar qualquer CSS que quisermos, não apenas a cor de fundo, que pode ser aplicada em qualquer fase. Em nosso HTML, vamos adicionar uma classe personalizada para nos permitir fazer isso. Para a nossa página de índice até a seção de cabeçalho. Vamos fazer estas duas linhas de texto dentro do nosso cabeçalho. Vamos adicionar nossa classe a esses dois elementos aqui. O nome da classe vai ser fade in custom. Na verdade, vou aplicá-lo aos nossos textos logo abaixo também. Em nossas folhas de estilo, podemos perguntar nossos quadros principais e isso vai ser bem na parte inferior após nossa consulta de mídia. Nós usamos o símbolo @, vamos ter nossos quadros-chave, dando a este um nome de fade in. Então mantenha isso simples adicionando nossas regras de e nosso para dentro daqui. Primeiro de tudo, vamos definir a opacidade para começar em zero. Isso é totalmente transparente, o que significa que não podemos vê-lo na página. Podemos então definir a regra para onde vamos definir a opacidade para ser um. O que significa que agora é totalmente opaco e não transparente. Agora temos nossa configuração de quadros-chave. Podemos adicionar isso ao nosso fade na classe personalizada logo acima desses quadros-chave. Fade in custom que acabamos de dizer dentro do nosso HTML. Em seguida, configuramos nossa animação, passando em nome de fade in. Em seguida, podemos definir a duração da animação. Queremos que isto se aplique durante um segundo. Ao longo de um segundo, vamos do valor de opacidade de zero para o valor de um. Podemos ver isso salvando e indo para o navegador, recarregue a página. Isso é bom e funciona como esperado, mas podemos melhorar ainda mais as coisas adicionando um efeito de atenuação. Podemos usar a flexibilização para abrandar o início ou o fim, tornando-o mais suave e mais gradual e fazer uma animação fácil dentro ou fora. Podemos adicionar isso no CSS logo após nosso nome de animação. Podemos selecionar facilidade em, recarregar o navegador e agora temos uma transição mais gradual e suave como nossa animação está começando. Lembre-se de que não é apenas a opacidade que podemos adicionar, podemos adicionar outras regras CSS que você deseja aplicar. Em seguida, vou adicionar um atraso às animações para que a segunda linha do texto desapareça depois desta primeira. Vamos começar adicionando algumas classes personalizadas a esses dois elementos. Para o título de nível um, podemos adicionar ao nome da classe de delay one. Em seguida, o texto abaixo do nome da classe de atraso dois sobre o styles.css. Agora podemos segmentar esses dois clusters e definir o atraso da animação. Vamos começar com o atraso. Podemos definir o atraso da animação para ser qualquer valor que quisermos. Quero começar definindo isso para 0,5 segundos. O atraso dois só vai ser um pouco mais longo definindo o atraso da animação para ser 1,5 segundos. Vamos salvar isso e para o navegador, atualizar. Agora vemos que as animações estão funcionando e há um atraso, mas isso não está funcionando como esperado. A segunda linha está sempre lá quando a página é carregada, mas só queremos que esta linha apareça quando a primeira animação for concluída. Isso está acontecendo por causa da maneira como configuramos nossos quadros principais. Se voltarmos para nossas folhas de estilo, uma vez que nossa página é carregada pela primeira vez, uma vez que as animações estão atrasadas, a opacidade não será imediatamente definida como zero. Para corrigir isso, também precisamos definir isso em nossa classe de animação de fade in custom. Definimos isso para um valor inicial de zero. Isso entrará em vigor quando a página for carregada pela primeira vez. Vamos tentar isso agora, recarregue o navegador. As coisas também não parecem como esperávamos. Vemos que a animação tem um atraso, mas eles também desaparecem depois que a animação termina. Isso ocorre porque, por padrão, depois que nossa animação termina, nenhum desses estilos dos quadros-chave permanece. que significa que ficamos com a opacidade de zero no final da nossa animação em vez do volume de uma que esperamos aqui. As mudanças que podemos fazer uso do modo de filme de animação e definir isso para ser um valor de encaminhar. Dentro de nossa classe de animação personalizada, podemos definir o modo de filme de animação e o valor de encaminhamentos. Recarregue o navegador e isso agora funciona como esperado. Definir o modo de filme de animação para avançar significará que esses estilos do final de nossos quadros principais permanecerão. No nosso caso, a opacidade que é definida como um. Há também um para trás também, que irá aplicar o CSS a partir do primeiro quadro-chave. Também ambos os dois que irão aplicar o estilo desde o início e também o fim. Finalmente, também podemos remover a partir da seção da opacidade para ser zero. Isso ocorre porque já temos essa configuração no início de nossa animação. Vamos verificar se isso funciona bem, recarregar o navegador e tudo ainda funciona como esperado. As animações podem desempenhar um papel importante na aparência do nosso site e também em como ele se destaca também. Animações também é um tópico realmente grande, então, se você estiver interessado, eu encorajaria você a dar um mergulho mais profundo no assunto. Em seguida, vamos ficar com os mesmos assuntos e incluir uma biblioteca de animação, que nos dará uma boa olhada nos efeitos de rolagem. 16. Bibliotecas de animação: Olá. Eu encorajaria você a continuar aprendendo sobre a criação de suas próprias animações personalizadas. Outra ótima opção para usar é uma biblioteca pré-construída. Em particular, o que vou mostrar chama-se Animate no pergaminho. Esta biblioteca vai nos permitir adicionar animações aos nossos elementos enquanto o usuário rola para baixo nossa página. Podemos definir diferentes animações para diferentes partes para o nosso conteúdo. Por exemplo, podemos definir um efeito flip em nossa parte superior do conteúdo, que é como virar carros. Também temos muitos outros efeitos, como o conteúdo ampliando, podemos ter o conteúdo desvanecendo ou deslizando de fora da página do lado direito ou esquerdo. Também temos outras opções de controle, como definir o atraso, a duração do tempo e também podemos combinar esses efeitos. Vamos dar uma olhada em como poderíamos aplicar isso ao nosso projeto. Para incluir esta biblioteca, vou procurar animar na rolagem. Agora precisamos ir para o link do GitHub. Este é o que precisamos, aqui no topo, então clique nisso. Então, à medida que rolamos para baixo a página, podemos ver muitos exemplos diferentes, que está incluído com a biblioteca. Temos algum slide em vigor, temos fade in e se nós [inaudível] ir podemos ver mais animações flip, onde você pode virar para baixo, esquerda e direita. Em seguida, temos alguns efeitos de zoom, onde ampliamos de diferentes ângulos e também podemos definir a duração e o tempo também, fazer alguns efeitos realmente bonitos em nossa página. Para começar com esta biblioteca, tudo o que precisamos fazer é incluir o link CDN na parte inferior. Se você usar coisas como um projeto de nó, isso também pode ser incluído, com gerenciadores de pacotes como yarn, bower ou NPM. Uma vez que estamos usando um projeto HTML regular, temos os links CSS e JavaScript na parte inferior, que vamos vincular aos arquivos necessários. Vamos começar com as folhas de estilo. Vou copiar este link e, em seguida, podemos incluir isso na seção principal da nossa página de índice. Na lista logo acima do link para nossas folhas de estilo personalizadas. Garantir que nossos estilos personalizados sejam os últimos na ordem. Em seguida, podemos pegar o link para o JavaScript e isso também pode ir em nossa página de índice. Copie este link. Estou vendo isso na parte inferior da seção do corpo logo após nossos contatos. A última coisa que precisamos fazer é chamar o script inicializado. Então vamos copiar isto. A página está logo abaixo. Isso inicializará a biblioteca a ser usada em nosso projeto. Isto é tudo o que precisamos fazer agora para a configuração, podemos começar a usar os efeitos, simplesmente adicionando alguns atributos aos nossos elementos. Todos esses nomes de atributos são aqueles que vemos no site que acabamos de olhar. Se rolarmos para cima, vemos os atributos como desaparecem e isso é exatamente o que fazemos em nosso projeto. Vamos começar no topo da nossa página inicial. Já temos algumas animações personalizadas na seção de cabeçalho, que foram adicionadas no último vídeo. Então eu vou pular para a seção de paralaxe, onde podemos adicionar alguns efeitos a esses itens aqui. Por isso vou fazer uso da animação flip para esses itens da lista, modo que temos um flip em vigor quando rolamos para baixo a página. Vamos ao nosso índice e localizar a seção de paralaxe. Aqui dentro, para cada um de nossos itens de lista, podemos começar a adicionar esses atributos. O primeiro é data-aos. Isto vai ligar para o nome da animação que queremos usar. Vou usar “flip up”. Como acabamos de ver na página inicial, também podemos definir o atraso e também a duração, que é a escala de tempo para a animação. Então vamos começar com o atraso que é data-aos-delay. Definimos isso em milissegundos para quanto tempo leva para a animação começar. Uma vez que a página foi carregada, para o primeiro, eu não vou incluir o atraso, o que vai aumentar é para todo o resto dos links. Em seguida, a duração dos dados, que é a duração dos dados aos e novamente, isso é em milissegundos, com um valor de 1000 feixe de um segundo. Vou definir isto igual a 800 milissegundos. Este é o tempo que a animação levará para ser concluída, copie isso e cole no resto dos itens da lista. Nós também vamos usar o flip da animação para todos os outros itens, mas aumentando o atraso para cada um deles. Então 100, 200, 300 e depois 400. A duração pode levar o mesmo e você também pode jogar em torno deste valor e ver qual funciona melhor para o seu site. Salve isso e vamos atualizar o navegador. Role para baixo. Agora temos uma boa virada em vigor à medida que rolamos para baixo a página. Agora vamos para a nossa seção de trabalho recente, onde vamos adicionar algumas animações deslizantes. Vamos começar com os dois títulos de projeto de planetas de pizza e também reagir trello. Esses títulos vão começar fora da página e seguida, rolar para exibição à medida que passamos por esta seção. Estes foram adicionados dentro de nossos títulos de nível quatro. Então vamos localizar o primeiro, que é o planeta pizza, o nome dos dados aos, e esta vai ser a animação chamada slide left. Também podemos adicionar uma duração, assim como usamos acima e definir este campo 1.000, que é um segundo. Eu vou pegar isso e mover isso para baixo para o segundo título, que é reagir trello colar isso em e uma vez que ele está no lado oposto, nós vamos deslizar para a direita, mantendo a mesma duração de antes, salve este e vamos testar isso no navegador. Recarregue, role para baixo, enquanto nosso título desliza para dentro e o mesmo para o segundo. Lembre-se, este é o seu projeto e você pode usar todas as animações e horários que melhor lhe convier. Mas, em seguida, vou desaparecer na informação logo abaixo. A seção é apenas aqui. Vou desbotar estes. Para fazer isso, eu vou envolver todo o texto em uma div, que vai atuar como um wrapper e, em seguida, vou adicionar a animação a este wrapper. Então, podemos pegar tudo do link do nosso site de visita até logo abaixo do nosso título, então corte isso, deixando um lugar, nosso nível para ir. Podemos então adicionar uma div, que vai ser um wrapper, colar em todo esse conteúdo e, em seguida, podemos adicionar nossa animação a este wrapper, o nome dos dados aos. Isto vai desaparecer e a duração de um segundo. Vamos também pegar esses dois atributos e podemos trabalhar com a imagem do projeto, então logo abaixo. Temos também esta imagem de trabalho recente. Logo após a nossa aula, cole isso em, eu também vou manter o mesmo fade na animação ou aumentar a duração para ser 1500. Recarregue o navegador. Nós adicionamos isso acidentalmente ao segundo em vez do primeiro, mas isso é completamente bom, já que vamos duplicar isso para ambos os projetos. Vamos fazer o mesmo agora para o primeiro projeto. Podemos cortar um lugar, todos os textos de sites visitados, todo o caminho até logo abaixo do nosso título, adicionar uma div como um wrapper, colar o conteúdo de volta para dentro, então podemos adicionar nossa animação, que foi desvanecer-se, a duração de 1000. Copie esses atributos e, em seguida, também podemos adicioná-los à imagem logo abaixo. A div que rodeia isto, colar isto e manter isto consistente com a outra imagem, vai aumentar isto para 1500, é uma combinação. Vamos agora testar isso. Role para cima até a parte superior e atualize, para baixo até a seção do projeto. Você vê o slide para o título e também a imagem no texto agora está desaparecendo. Finalmente na parte inferior, também temos a seção de contato, onde podemos adicionar algumas animações aqui também. Eu vou deslizar para cima o cabeçalho principal de, não ser um estranho e, em seguida, deslizar nas duas linhas de texto abaixo sobre a direita da tela. Mais no HTML, podemos ir até a seção de contato e começar com o título. O nome desta vez vai ser deslizar para cima, a duração, eu vou definir o meu para 1500. Vamos ver como isso parece. Recarregue o navegador, então isso agora desliza para cima. Nós só precisamos trabalhar com nossas duas linhas de texto abaixo e trazê-los de cima do lado direito. Nós também vamos adicionar um atraso a essas duas animações, dado a cabeça na chance de chegar ao topo, se todas elas se moverem. Vamos começar com o texto logo abaixo. Cole isso e o nome da animação será slide para a esquerda. Este também precisa de um atraso. Isso é dados aos atraso e 1000 milissegundos, a duração que também vai aumentar isso para ser 150 também, e então agarrar isso e podemos adicionar isso para a última linha também. Cole isso em como um atributo. Podemos aumentar o atraso para 200 milissegundos, mantendo a mesma duração e nome de animação. Vá para o navegador e recarregue, deixando-nos com alguns bons efeitos de animação. há uma coisa para cuidar antes que eu termine este vídeo. Uma das coisas que você vai notar desde a adição nesta animação, é que agora podemos rolar para a direita da página quando ela é carregada pela primeira vez. Isso ocorre porque nossas animações, que deslizam, começarão na borda da página e, em seguida, deslizarão para nossa exibição. Desde que o conteúdo começou fora da página, o navegador agora coisas que a página é muito mais ampla do que deveria ser. Tudo o que precisamos fazer para corrigir isso é dizer ao navegador para esconder qualquer conteúdo que transborda a página. Podemos fazer isso adicionando um estouro no eixo x e vamos fazer isso na seção do corpo de nossas folhas de estilo. Vamos rolar para cima para nossos estilos globais. Podemos declarar como queremos lidar com qualquer estouro no eixo x, que é da esquerda para a direita da página. Altere isso para um valor de oculto. Vamos salvar isso. Agora, se voltarmos para o navegador e rolar de volta para a seção de conteúdo principal, pressione reload e agora essa propriedade overflow está nos impedindo de rolar para fora da página. Também adicionaremos mais dessas animações à medida que avançamos no curso. Mas sinta-se livre para trocar qualquer uma dessas animações por diferentes para se adequar ao seu estilo. Esta é agora a nossa página inicial completa e, nos próximos vídeos, começaremos a nos concentrar em nossa página de portfólio para mostrar todas as nossas habilidades. 17. Dica rápida: compatibilidade do navegador: CSS está sempre evoluindo junto com a adição de alguns novos recursos. Esses novos recursos geralmente são ótimos e podemos querer usá-los o mais rápido possível. No entanto, precisamos ter cuidado porque muitas vezes leva tempo para esses recursos sejam totalmente suportados em todos os navegadores, e mesmo quando o suporte de navegadores não alcança e a nova versão do navegador é lançada, ainda precisamos estar cientes de que não todos estarão usando a versão mais recente imediatamente. A ajuda, entre outros, que é um site realmente útil como caniuse.com, isso nos permitirá verificar um recurso CSS e também ver o quão amplamente suportado ele é através dos principais navegadores, incluindo quaisquer versões anteriores também. Por exemplo, se você quisesse usar o Flexbox em nossos projetos, poderíamos digitar isso e então o que queremos é o módulo Flexbox, que podemos ver aqui. No topo temos uma lista de todos os principais navegadores e também o suporte para cada uma das versões. Por exemplo, o Chrome versão 80 é verde e podemos ver pelo pop-up que isso é totalmente suportado e também podemos ver o uso global para este navegador. Por exemplo, esse [inaudível] atual é de 10% no momento e isso é realmente importante para determinar qual suporte de navegador você deseja fornecer para seu projeto. Se olharmos para os diferentes tons, Internet Explorer versão 11 só tem suporte parcial, mas atualmente isso tem apenas cerca de um por cento de uso global, então vamos precisar decidir se isso será um problema para o seu público. Geralmente, algo com todas essas seções verdes como esta é bastante seguro de usar em um projeto, uma vez que é amplamente suportado. Vamos dar uma olhada em outra coisa, como a opacidade que usamos recentemente em nossos projetos e a regra de opacidade que você vê aqui é praticamente totalmente verde, então isso é seguro de usar em todos os navegadores. As animações também são bem suportadas. [ inaudível] algo nele para ter cuidado. Vamos digitar as animações e ver o que aparece. Se escrevermos a animação, vemos algo chamado AnimationAPI, e vemos que esse recurso é experimental. Isso ocorre porque esta não é exatamente a animação que usamos em nosso projeto. A razão para isso é porque a animação é uma abreviação CSS para várias coisas. Se formos para o nosso projeto e dar uma olhada na animação que usamos anteriormente em nosso fade-in, a propriedade de animação é uma abreviação para coisas como o nome da animação, que temos aqui, e também a animação-tempo- função. Poderíamos adicioná-los separadamente. Então nós poderíamos adicionar o nome da animação e definir o fade-in de velocidade, e então a função de tempo de animação, e então nós poderíamos definir isso para ser fácil como nós usamos acima, e, em seguida, remover todas as abreviações. Isso teria exatamente o mesmo efeito, mas isso é apenas uma maneira de agrupar várias propriedades relacionadas em uma linha. Na verdade, nossa animação também é uma abreviação para a duração da animação, então podemos até remover isso, podemos remover essa linha de código, e então podemos colocar isso dentro da nossa abreviação e isso funcionará exatamente da mesma forma. Vamos apenas levar isso indo para o projeto e para a seção de cabeçalho, recarregar e tudo ainda funciona como esperado. Isso é algo a ter em mente ao procurar propriedades CSS, que às vezes uma propriedade pode ser uma abreviação para várias regras CSS. Se você quiser saber se algo é uma abreviação ou não, você pode ir para o site da Mozilla e, em seguida, fazer uma pesquisa para essa propriedade em particular. Por exemplo, vamos procurar a fronteira. Podemos ir para a seção CSS e vemos imediatamente que a borda é uma propriedade abreviada que define a largura da borda, o estilo da borda, e também a cor em uma linha. Geralmente, ao lidar com propriedades CSS mais recentes, é uma questão de equilibrar mais recursos que você deseja, o projeto RTA, juntamente com catering para seus usuários alvo. Há também ferramentas que podem ajudar com o suporte do navegador também, e isso está usando prefixos de fornecedor e polyfills. Não abordaremos estes assuntos durante este curso, mas sinta-se à vontade para analisar estes assuntos mais profundamente se estiver interessado em aprender mais. 18. Configurando nossa página de projetos: Agora vamos criar nossa página de projeto, que será uma vitrine para o nosso trabalho anterior. Isso também nos dará a chance de aprender uma nova técnica CSS que é chamada de grade. Ao contrário da flexbox que controla nossos layouts em uma direção, a grade CSS nos permitirá controlar nosso conteúdo nas direções horizontal e vertical. Para a versão final, vou passar da nossa página inicial. Se você clicar no link de navegação para os projetos, isso inclui a mesma seção de cabeçalho que usamos para a página inicial, e então podemos rolar para baixo e os projetos recentes serão animados enquanto você rolar para baixo. Também podemos passar o mouse sobre cada um deles, e o título será exibido para cada projeto. Você pode ver nesta vista de área de trabalho completa agora usamos o layout de grade CSS. Vamos aprender tudo sobre isso nos próximos vídeos, e isso também é totalmente responsivo. Se reduzirmos o navegador para baixo veremos várias alterações de layout como o dispositivo de tamanho do tablet, que então mudará nossos projetos para serem duas colunas. Se reduzirmos isso ainda mais isso, então, torna-se a largura total do navegador. Para começar, vamos passar por cima do nosso projeto e criar um novo arquivo em nosso diretório de portfólio. Crie um novo arquivo, e isso será chamado de Projetos. Mais uma vez isso vai ter a extensão HTML. Certifica-se de que isso está na raiz do portfólio ao lado do índice e das folhas de estilo. Eu vou fazer uso da mesma seção de cabeçalho para que possamos tornar nossas vidas mais fáceis indo para o index.html, e nós podemos copiar sobre todo o conteúdo e, em seguida, Modificar isso. Isso já tem o link para o nosso projects.HTML que adicionamos no início ao criar a seção de cabeçalho. Vamos Command ou Control A para selecionar tudo, Copiar o conteúdo sobre e, em seguida, Colar isso no projects.HTML. A partir da parte inferior, também precisamos manter a animação na biblioteca de rolagem, mas vamos remover todo o resto do conteúdo até a seção de cabeçalho. Isso inclui nossa seção de trabalho recente, a seção de paralaxe. Vamos remover isso deixando-nos apenas com a seção de cabeçalho, e, em seguida, nosso script na parte inferior. Isso também tem nosso mesmo link para a folha de estilo que criamos, significa que nossos estilos também serão aplicados. A próxima coisa que precisamos fazer é mudar o título. Isso vai ser projetos de Chris Dixon, e isso agora nos dá um bom ponto de partida que ainda inclui o mesmo cabeçalho e todos os links que precisamos para nosso próprio CSS junto com a biblioteca de animação. Vamos salvar este arquivo e a lista de verificação está funcionando bem em nossos projetos, vamos Recarregar o navegador da página inicial, podemos clicar nos Projetos, e agora é links para o nosso projects.HTML, e podemos ver o cabeçalho está no lugar. Para esta página vou agora configurar. Em seguida, vamos adicionar nossos projetos usando uma primeira abordagem móvel. Lembre-se de mais cedo no curso, você também precisará baixar algumas imagens, ou tirar algumas imagens reais de alguns projetos anteriores que você criou. Se você não tem nenhum que é completamente bom, você pode usar qualquer imagem de espaço reservado que você gostaria, mas certifique-se que eles estão prontos para usar no próximo vídeo. 19. Incluindo o HTML de nossa página de projetos: Dentro da pasta de imagens em nosso projeto, temos todas essas imagens que agora vamos usar em nosso projects.html. Também cobrimos a estrutura básica e o cabeçalho no último vídeo, juntamente com o script de animação na parte inferior. Vou agora começar com a nossa seção de projeto criando uma nova seção rapper, que também vai ter um nível de ti com o texto dos projetos recentes. Isso também vai receber várias classes à medida que vamos e vamos fazer uso delas no CSS muito em breve. O título de nível três vai ter o título da classe de projetos. Depois disso, vou adicionar uma div, que vai ser um rapper para todos os nossos projetos, então vamos adicionar uma classe de projetos a isso. Então cada div individual aqui dentro vai ser para um único projeto. Cada um desses projetos terá um ID. Eu vou chamar o primeiro, trabalhar um, e este ID vai ser usado mais tarde no CSS. Cada um deles também terá um nome de classe consistente de grid-item. Em seguida, aninhado dentro se dermos uma olhada na versão final, vamos ter uma imagem e também o título do projeto, que será exibido mais tarde quando passarmos o mouse sobre cada imagem. Precisamos adicionar esses dois elementos para começar com a nossa imagem. Todas as nossas imagens nesta pasta de imagens. O primeiro que vou usar, vai ser o leitor de música, também o texto antigo. Depois disso, podemos adicionar um link com os elementos a e este será o texto para nossos projetos. Este é o tocador de música. Ele pode adicionar um link para uma página separada para fornecer mais detalhes sobre este projeto individual, se você quiser. Vou deixar o meu vazio, já que não vamos cobrir isso durante este curso, mas sinta-se livre para fazer isso como um desafio. Um nome de classe de texto oculto. Uma vez que o texto vai ser inicialmente escondido até que o usuário passe o mouse sobre, que possamos ir em frente e digitar cada um deles individualmente se você quiser. Mas já que tenho muita coisa para passar, vou copiar e colar isto e depois mudar os detalhes. Lembre-se, você também não precisa incluir tantos projetos quanto eu, e você também pode adicionar mais se preferir. Trabalho dois, a mesma classe, a localização da imagem, desta vez vai ser para reagir trello, o texto antigo dois, e também o título. O terceiro que vamos colar. Novamente, certificando-se de que isso está dentro do rapper do projeto, cole isso em, encontre o ID. A imagem do meu terceiro será para o editor de fotos e também para o texto vinculado dois. O quarto será para o aplicativo de produtividade e também o texto antigo dois. É assim que os nossos projectos vão ser estruturados. Eu tenho nove no total, então eu vou pular em frente e adicionar isso agora. Pausar o vídeo e voltar assim que terminar de adicionar todos os seus projetos. Todos os meus nove projetos estão no lugar, e espero que você tenha terminado dois. Agora, vamos até o navegador e verificar isso no projects.html. Logo abaixo do cabeçalho, temos nosso título de projetos recentes. Em seguida, para cada um dos nossos projetos temos a nossa imagem e também o título ao lado. Nosso conteúdo está agora em vigor para a nossa página de portfólio. Em seguida, vamos aplicar alguns estilos CSS. Para começar, vamos começar com a primeira abordagem móvel e aproveitar o CSS Flexbox. Mais tarde no curso, aplicaremos uma consulta de mídia quando tivermos mais espaço disponível na tela. Em seguida, podemos aproveitar a grade CSS para layout nosso conteúdo em duas direções. 20. Layout do projeto mobile-first usando Flexbox: Como prometido, agora vamos seguir em frente com o estilo, começando com a exibição de tela pequena, e então podemos brincar quando quisermos obter mais espaço na tela. No último vídeo, adicionamos o HTML para todos os projetos. Se formos para a página HTML, vemos que todos os nossos projetos individuais são embrulhados nesta div com a classe de grade-item e, em seguida, todos esses itens de grade são aninhados dentro deste projeto div. Estas serão as duas classes principais que precisaremos em nossas folhas de estilo. Então, vamos para lá agora. Então eu vou criar uma nova seção logo acima da nossa consulta de mídia e, em seguida, criar um comentário para esta página de projetos. Isso é suficiente com o título, que era o título do projeto, e tudo o que eu vou fazer aqui é definir o tamanho da fonte para 1,6 rems, que é o equivalente a 16 pixels. Nosso wrapper principal foi a classe de projetos, e é aqui que podemos definir o tipo de exibição para fazer uso da flexbox. A primeira visão móvel em que estamos trabalhando atualmente nos permitirá definir a direção flexível para ser a coluna, o significa que nossos itens serão empilhados verticalmente e, em seguida mudará isso mais tarde quando tivermos mais espaço disponível na tela. Cada um de nossos projetos e essa classe de item de grade, e nós vamos usar isso para inicialmente definir algum espaço entre cada um, adicionando alguma margem na parte inferior de cada um e o volume de um rem. Se agora olharmos para a versão final, vemos que esta tem a borda cinza em torno de cada um. Para fazer isso, vamos adicionar uma cor de fundo a cada uma de nossas seções. Para tornar este plano de fundo visível a partir da imagem, vamos adicionar algum preenchimento ao redor da borda de cada um. Isso criará algum espaçamento, então nosso plano de fundo virá em todos os quatro lados. Então podemos definir o plano de fundo para ser o valor de cinza claro, recarrega, e só podemos ver isso por trás do título do projeto. Então, para ver isso em torno de todos os quatro lados, vamos adicionar o valor de preenchimento de um rem. Isso nos dá o efeito de uma fronteira. Atualmente vemos que nossa fronteira é mais ampla na parte inferior, e isso é simplesmente porque atualmente temos o título do projeto. Vamos remover esses lugares sobre a imagem muito em breve. Depois de nosso item de grade, agora vamos passar para a imagem e definir isso para ser a largura total do contêiner. Podemos fazer isso direcionando nossa imagem de item de grade e, em seguida, ela define a largura e a altura para 100 por cento. Isso garantirá que nossa imagem se encaixe totalmente no item da grade. Agora vamos salvar isso e recarregar os projetos. Isso parece bom na exibição de tela pequena. No entanto, se esticarmos o navegador, essas imagens começam a ficar realmente esticadas. Para melhorar isso, vamos alterar esse layout duas vezes usando duas consultas de mídia. Atualmente, só temos uma consulta de mídia configurada. Eu vou fazer uso desses dois, mudar a direção flexível para ser linha. Então temos dois projetos lado a lado. Em seguida, no próximo vídeo, vamos ainda mais ampla para uma visualização completa da área de trabalho e, em seguida, vamos usar a grade CSS. Então, role para baixo, nós já temos nossa consulta de mídia no lugar, e eu vou para o final disso. Preenchi a cinta de fechamento aqui. Vamos começar com nossos projetos. Lembre-se que este é o wrapper principal para todos os nossos projetos, e podemos definir a direção flexível para ser linha. Em seguida, podemos segmentar o item de grade, que é o nosso único projeto e podemos definir a base flexível como um valor de 45 por cento. A base flexível será o tamanho padrão de nossos elementos, que são nossos projetos, e isso também deixa 5% para qualquer espaçamento entre eles. Se salvarmos isso e recarregar, vemos que os projetos não parecem exatamente como esperado, que de repente base flexível para ser 45 por cento. Esperávamos ter duas imagens lado a lado com os 5% no meio para espaçamento. Isso ocorre porque, por padrão, nossos itens são definidos como sem quebra automática, então todos os itens tentarão caber na mesma linha. Podemos substituir isso definindo o envoltório flexível porque cada item individual vai quebrar em sua própria linha depois que levarmos em conta a largura. Então, em nossos projetos, se flex wrap, podemos substituir o valor padrão de no wrap para simplesmente ser wrap. Salve isso e recarregue. Agora vamos ver dois projetos lado a lado, segmentados 45% cada. Todo o espaço adicional, entanto, está no lado direito. Mas ficaria muito melhor se distribuíssemos o espaço de forma mais uniforme. Para nos permitir fazer isso, temos uma propriedade flexbox chamada justify contents, e isso nos permitirá determinar onde queremos que esse espaçamento apareça. Vamos definir isso para ser espaçado uniformemente assim todo o espaço adicional em torno dos elementos será dividido igualmente. Agora, o espaço em branco dividiu-se igualmente entre os nossos projetos. Certo. Então, agora temos o estilo no lugar para o layout de tela pequena usando a flexbox, e nosso site agora parece bom em um pequeno dispositivo de tamanho móvel ou um pequeno tablet. No entanto, queremos também atender telas maiores e dispositivos desktop, e vamos fazer isso no próximo vídeo e também dar uma primeira olhada no uso da grade CSS. 21. Primeiras impressões sobre CSS grids: Nós já sabemos como usar o CSS Flexbox, o layout de um conteúdo em um eixo. Por exemplo, nesta seção superior aqui, temos o conteúdo colocado em toda a página em uma linha. Logo abaixo disso, temos um layout baseado em coluna onde nosso conteúdo é empilhado de cima para baixo. Este é um ótimo uso para o Flexbox, mas isso também tem uma limitação, nosso conteúdo dentro de cada seção só pode ser colocado em uma direção. No entanto, se dermos uma olhada em um layout baseado em grade no lado direito, podemos usar a grade CSS para controlar o layout em duas direções. A primeira coisa que precisamos fazer é definir a largura e a altura de nossas colunas e linhas. Podemos então definir o quanto de uma lacuna que queremos entre cada um dos nossos elementos. Podemos então definir se todos os nossos elementos devem ser iguais ou se queremos que eles sejam fundidos como vemos aqui. Outra grande parte da grade também é a capacidade de colocar nosso conteúdo em qualquer seção que queremos. Podemos fazer isso ou permitir que nosso conteúdo flua naturalmente e ocupe o próximo espaço disponível na grade. Um dos equívocos sobre a grade e Flexbox para começar é que precisamos escolher a lei IV. Acima de tudo, esta não é a intenção. A grade não se destina a substituir a Flexbox e eles podem complementar uns aos outros nos mesmos projetos. Vamos agora adicionar em nossa consulta de mídia final, transformar nossos projetos em uma grade. Eu quero adicionar o meu em torno da marca 1.000 pixels, mas você pode, claro, brincar com isso para atender seus projetos de qualquer estilo de CSS. Após a última consulta de mídia, eu vou adicionar em uma nova consulta de mídia com o @media real. É claro que podemos direcionar diferentes tipos de tela, como a tela ou a visualização de impressão. Bem, como antes, eu só vou usar a largura mínima, assim como esta, e definir isso para ser 1000 pixels. Vamos começar com o nosso wrapper do projeto e a maneira como podemos introduzir a grade CSS. Assim como fizemos com o Flexbox, é definir o tipo de exibição. Nós definimos a tela para ser a grade, e eu também vou definir a altura da seção para ser 100% da altura do ponto de vista. A próxima coisa que precisamos fazer é declarar quantas colunas e linhas queremos usar em nossa grade. Definimos as colunas usando a propriedade colunas de modelo de grade e, em seguida, definimos a largura que queremos que cada coluna seja. Por exemplo, se quiséssemos três colunas, para ser 200 pixels irá fazê-lo assim. Então 200 pixels, 200 pixels e, em seguida, 200 pixels. Agora, se salvarmos e recarregarmos, veremos nossas três colunas em 200 pixels cada. Nós também podemos fazer estes diferentes para que o meio poderia ser 500, e isso só afetará, nossa coluna do meio. Se quiséssemos adicionar um extra, tudo o que precisamos fazer é adicionar um valor extra, assim como este, e isso agora é refletido no navegador. Também podemos fazer uso de diferentes valores, como porcentagem, EMS, carneiros, ou também podemos fazer uso de uma unidade fracionada de grade, que ocupará uma parte do espaço disponível. Se quiséssemos três colunas iguais, poderíamos usar as unidades FR, então um fr, um fr e um fr e estes ocupariam agora três espaços iguais. Depois disso, também podemos definir nossas linhas de modelo de grade, e você provavelmente pode adivinhar o que isso fará. Isso definirá o espaçamento para cada uma de nossas linhas em nossos projetos. Por exemplo, vamos para 100 pixels, 300 pixels e, em seguida, 200 para o terceiro. Recarregar. Na verdade, não precisamos definir as linhas do modelo de grade para nosso projeto se não tivermos esse conjunto. Remova isto. Como temos todas as três colunas definidas, o conteúdo ocupará as três colunas em uma linha e, em seguida, o conteúdo restante será movido para a próxima linha. Depois disso, também podemos adicionar algum espaço entre cada um desses projetos, e podemos fazer isso adicionando uma lacuna de grade. A lacuna da grade é simplesmente o espaço entre cada uma de nossas linhas e colunas. Quero definir o meu para 20 pixels. Uma das coisas boas sobre a lacuna da grade é que ele não adiciona nenhum espaçamento no lado de fora também. Só se aplicará entre cada uma de nossas seções. Uma coisa que você vai notar no entanto, é que há mais espaço abaixo de cada projeto do que está no meio, mesmo que tenhamos definido um intervalo igual de 20 pixels entre cada um. Isso ocorre porque, a partir de mais cedo, quando criamos a primeira exibição móvel, definimos alguma margem na parte inferior de cada um desses itens. Só queremos que isso entre em vigor para a visualização móvel. Portanto, nesta consulta de mídia você também pode redefinir a margem, você está de volta para zero. Isto foi definido na classe de item de grade, e tudo o que precisamos fazer é definir a margem inferior para ser zero. Recarregue o navegador, e isso ainda terá efeito na tela pequena. Expanda o navegador para o maior tamanho e a lacuna da grade agora é igual. A grade também nos fornece uma função de repetição, que é um atalho. Se tivermos várias linhas ou colunas com espaçamento igual, só podemos ter essas três colunas iguais, então em vez de escrever isso três vezes, podemos usar a função de repetição. Então, dentro dos suportes, declaramos quantas vezes queremos que isso seja repetido. Por exemplo, vamos quatro vezes e, em seguida, define a largura que queremos a coluna, salvar e atualizar. Estes são agora repetidos quatro vezes. Mas vamos querer deixar isto como três, tal como usámos antes. É assim que o sistema de grade funciona em um nível básico. Mas e se não quisermos que a nossa grelha seja tão equilibrada? Pode haver casos em que queremos que nossas imagens ou nossas seções se sobreponham a várias partes de nossa grade. Bem, para isso, somos fornecidos com a propriedade áreas de grade, e isso é o que vamos descobrir no próximo vídeo. 22. Áreas de grid para layouts mais avançados: Atualmente, nossa grade CSS se parece um pouco com isso. Criamos colunas e linhas de tamanho igual, e isso foi projetado para aceitar pedaços de conteúdo do mesmo tamanho. Embora às vezes tenhamos a necessidade de criar áreas de tamanho diferente para nos permitir usar pedaços de conteúdo de tamanho diferente. Por exemplo, você pode querer uma parte mais ampla do conteúdo, abranger duas áreas de grade ou fazer o mesmo verticalmente para um conteúdo mais alto. Felizmente, podemos fazer isso com a grade CSS, usando as áreas de grade e isso é o que vamos dar uma olhada em usar agora. Em nosso HTML de início do projeto, demos a cada um de nossos projetos um ID único. Isso é work1, work2 e, em seguida, aumentando para cada um de nossos itens. Este ID pode ser usado no CSS para colocar cada uma dessas seções em qualquer parte da nossa grade. No momento, nossos itens de grade estão fluindo naturalmente pela página. Em seguida, passando para a próxima linha. Podemos usar esses IDs agora e depois colocá-los em diferentes seções. Também podemos permitir que eles tomem várias seções, e isso é o que vamos cobrir neste vídeo. Neste arquivo CSS, vou agora voltar para a seção da página do projeto onde adicionamos o comentário. Vamos rolar para cima. Esta é a seção aqui. Nós adicionamos isso em qualquer lugar, mas eu vou adicionar isso após o título, e nós podemos selecionar nossa seção por ID usando o hash e o nome do trabalho1. Isso pode parecer um pouco confuso no início, mas não me acompanhe, pois isso se tornará mais claro muito em breve. O que vamos fazer aqui é definir a área da grade, então vamos dar a essa área de grade um nome único. Vamos para o trabalho1. Agora temos esta seção em nosso CSS atribuído a uma nova área de grade chamada work1. Então vamos repetir isso para cada uma de nossas seções. work2, isso pode ser qualquer nome que você escolher, mas eu vou manter isso simples e consistente. Número quatro, número cinco, e lembre-se que o meu sobe para nove itens. Seis, sete, número oito, e finalmente número nove. Agora, nós atribuímos uma área de grade nomeada para cada um de nossos elementos. Podemos expô-los da maneira que quisermos. Vamos voltar para a nossa consulta de mídia onde configuramos nossa grade mais cedo, na parte inferior deste arquivo. Podemos então usar a propriedade áreas de modelo de grade. Eu quero adicionar isso em sua própria linha, para que fique mais claro. Aqui dentro vamos declarar como queremos que a nossa nova grelha fique. Ao invés de certas coisas nosso peso, nossas colunas de modelo de grade e linhas que olhamos antes, onde o conteúdo fluirá de forma mais natural, aqui estamos declarando exatamente qual parte do conteúdo queremos adicionar em cada uma de nossas áreas de grade. Nós colocamos isso de forma visual entre as citações. Por exemplo, se quiséssemos colunas livres, poderíamos definir o primeiro lugar no canto superior esquerdo, que é este, para ser a seção chamada work1. Em seguida, eu vou declarar que work4 vai ser o segundo item na primeira linha, em seguida, o terceiro vai ser o trabalho7. Estes são os itens que você deseja que apareçam na primeira linha. Na próxima linha entre as citações, podemos então fazer exatamente o mesmo. Eu vou dizer que é work2 work5, e então também work7. Observe aqui que estes quatro são peças únicas. Então, no lado direito, temos dois com o mesmo nome. Isto significa que o trabalho7 ocupará duas partes, que significa que será muito mais alto do que os outros itens. Por exemplo, em nossa grade aqui, esta será uma seção apenas aqui, e work7 ocupará ambos os lugares. Para baixo para a nossa próxima linha, eu vou definir work3, work6 e, em seguida, work8. Então, para a seguinte linha, vou adicionar uma seção de trabalho. Isso vai abranger toda a largura da nossa grade ocupando três partes na mesma linha. Como temos três seções declaradas, tudo o que precisamos fazer é adicionar o mesmo nome de work9 em cada uma de nossas seções. Aqui sem sequer ver a grade no navegador, obtemos uma representação visual de como nossa grade vai ser disposta. Podemos ver que todas essas seções são individuais, exceto esta última seção aqui, e também esta seção vertical no canto superior direito. Vamos salvar isso agora. Recarregue o navegador. No canto superior direito temos esta seção que abrange as duas colunas verticais. Em seguida, temos as nossas peças individuais ao redor, em seguida, na parte inferior, a secção ocupou a linha completa, que é o trabalho9. Podemos usar esta técnica de área de grade para criar alguns layouts de aparência agradável e também alguns projetos mais complexos dependendo do conteúdo que temos dentro de nossa grade. No próximo vídeo, vamos melhorar nossa seção portfólio adicionando alguns bons efeitos CSS hover. 23. Sobreposição de texto em CSS, efeitos hover e animações: Bem-vinda de volta. Nosso projeto está agora tomando forma e quase completo. Agora estou indo para terminar as coisas, adicionando mais alguns estilos CSS e também efeitos. Se tomarmos camada, vamos adicionar um efeito sobre cada um dos nossos projetos dentro da grade, que também irá revelar o título do projeto. Nós também vamos fazer uso de nossa biblioteca de animação para nesta página. Primeiro vamos começar removendo o título do projeto e, em seguida, vamos re-introduzir isso mais tarde quando o usuário passar o mouse sobre nossos projetos. Vamos começar de novo em nossas folhas de estilo. Se dermos uma olhada para todos os projetos seção ou todos os projetos página, vamos adicionar isso na parte inferior da seção. Verifique se isso está fora de qualquer consulta de mídia, já que sempre queremos que isso se aplique a todos os tamanhos de tela. Vamos usar a classe de texto oculto. Se você se lembrar no HTML, nós adicionamos esta classe a cada um de nossos itens de grade, que possamos fazer uso disso agora. A altura de um texto, o que vamos fazer para começar, é definir o tipo de exibição como nenhum. Isto irá então removê-lo da página. Se pressionarmos Atualizar, veremos que nosso título foi removido. Agora precisamos de uma maneira de reintroduzir isso quando o usuário passa o mouse sobre nossa imagem. Vamos fazer isso com uma combinação de aulas. Lembre-se de que cada um de nosso projeto está cercado nesta classe de item de grade para que possamos acessar isso para começar. Separados por uma coluna, podemos usar o que é chamado de pseudo-classe. Uma pseudo-classe é usado quando queremos aplicar CSS para um determinado estado, como quando um elemento está ativo, quando um link está sendo visitado, ou, no nosso caso, quando queremos passar o mouse sobre os elementos. Quando passamos o mouse sobre esses elementos, queremos afetar esses textos ocultos logo acima. Vamos entender que logo depois, agora todos os estilos serão aplicados a esta classe de texto oculto. Uma vez que passar o mouse sobre o nosso item de grade, temos este tipo de exibição de não ajuste aqui. Queremos redefinir o tipo de exibição distribuído do bloco, que irá então colocar isso de volta em nosso HTML. Também o text-align para estar no centro da nossa seção. Nós também podemos brincar com o tamanho da fonte, vamos para 4rem e também a cor da fonte de branco. Sobre o navegador pressione atualizar e agora, quando passamos o mouse sobre qualquer uma de nossas imagens, vemos este texto grande aparecer na parte inferior. Agora nossos textos desaparecem quando o pairar. Mas isso ainda é ocupado o espaço na parte inferior da div. No entanto, não queremos isso no fundo. Queremos que isto seja colocado no centro da nossa secção. A razão pela qual vemos isso na parte inferior da nossa div é porque, por padrão, o elemento ocupará espaço na ordem em que estão no HTML. Faz sentido termos a nossa imagem seguida do nosso texto. Uma maneira de mudar isso é definir a posição CSS do texto para ser absoluta. Absoluto, removeremos os elementos do fluxo ou da página, o que significa que ele efetivamente não ocupará nenhum espaço. Estamos livres para posicionar isto em qualquer lugar que quisermos. Vamos voltar à nossa folha de estilo e logo após a nossa cor, podemos definir a posição desses elementos para ser absoluta. Vamos ver o efeito que isso tem no navegador. Agora, quando passamos o mouse sobre nossas imagens, isso agora leva o texto na página, mas ele não ocupa mais nenhum espaço. Podemos ver isso porque não temos nenhum fundo cinza atrás do texto, o que significa que ele não está mais posicionado dentro de nossa div. É óbvio que não está numa boa posição. Agora podemos movê-lo usando essas propriedades CSS de cima, direita, inferior e esquerda. Podemos usar isso para colocá-lo exatamente onde queremos. Queremos que o texto seja colocado sobre o centro da imagem. Faz sentido até que você defina 50 por cento do topo e 50 por cento da esquerda. Vamos dizer isso e ir para a esquerda de 50 por cento e também o mesmo para o topo. Nós também podemos como uma medida temporária, remover este foco, apenas para que possamos ver o que está acontecendo durante o teste. Para o navegador e vamos ver onde estamos agora. Não vemos nenhum dos títulos em nossos projetos. No entanto, se deslocarmos até o topo da página, veremos que todos os títulos estão agora colocados na seção de cabeçalho. Por que é isso? Bem, isso é porque quando tomamos o têxtil, o fluxo do documento usando absoluto e, em seguida, definir os valores superior e esquerdo como temos apenas virar. Esses valores superior e esquerdo são definidos a partir da janela de exibição do navegador. Definimos efetivamente o texto para 50% do canto superior do navegador. Há uma maneira que podemos substituir isso, porém, e isso é definir qualquer um dos elementos que têm uma posição de relativo. Cada projeto que temos abaixo é envolvido em uma div. Esta div tem a classe de item de grade. Se formos para o nosso projeto, esta é a div wrapper aqui. Agora, se definirmos isso para ser uma posição de relativo, este recipiente será agora o nosso ponto de referência para nosso texto, em vez da janela de visualização dos navegadores. Voltando à nossa folha de estilos, podemos aplicar isso agora. É sobre o item da grade, já temos essa aula aqui. Vamos definir a posição para ser relativa. Vá para o navegador e atualize. Um texto TOC é aplicado sobre cada uma de nossas imagens, o texto foi realmente empurrado para cima, por exemplo, 50% do lado esquerdo. Mas isso não leva em conta a largura e a altura do texto. Em vez disso, queremos que o texto seja movido mais de 50% para o centro do nosso texto. Podemos fazer isso movendo a caixa de texto em 50% de sua largura e altura. Como estamos fazendo uso de uma unidade percentual em vez de um pixel, isso também centralizará o texto, independentemente do seu tamanho. Voltar ao nosso texto oculto. O item de grade oculto texto e, em seguida, logo após o nosso posicionamento, podemos então deslocar o nosso texto pela metade da largura e altura usando uma transformação CSS. Uma transformação, que queremos acrescentar vai ser traduzida. Então aqui dentro podemos compensar isso adicionando um valor X e Y. Queremos adicionar um deslocamento de 50% negativos, que é metade do peso ou do texto. Isto está no eixo X, que é da esquerda para a direita. Nós também podemos fazer o mesmo para o eixo Y, que é aberto para baixo. Vamos recarregar o navegador, e agora todos os impostos sendo movidos para a esquerda e para cima, 50% da largura e altura totais. Para fazer o nosso texto agora se destacar, podemos adicionar alguns efeitos sobre o mouse. Primeiro de tudo, precisamos reintroduzir nossa pseudo-classe, que removemos de antes. O texto só aparecerá novamente quando passar o mouse sobre a nossa imagem. A próxima coisa a fazer é também segmentar a nossa imagem torná-la mais escura para que as tags se destacem. Assim como acima, podemos direcionar o item de grade quando o usuário passa o mouse sobre. Mas desta vez só aplicar o nosso CSS à imagem. Primeiro, vamos adicionar um efeito de filtro no brilho da nossa imagem e definir isso para um valor de 0,4. Isso terá o efeito de escurecer nossa imagem para ser apenas 40 por cento. Salve isso e recarregue. Agora, quando passarmos o mouse, reduzimos o brilho de cada uma de nossas imagens. Nós também podemos adicionar um pequeno efeito pop dois, que vai fazer a imagem apenas um pouco maior quando o usuário passa o mouse sobre. Nós vamos novamente fazer uso desta propriedade transformada. Mas desta vez vamos transformar a escala. A escala é usada para tornar os elementos maiores ou menores e um é o tamanho regular dos elementos. Eu vou fazer isso um pouco maior com certeza para ser um valor de 1,01. A última coisa que vou acrescentar é a opacidade. Faça isso um pouco transparente com 0,95. Dê isso um salvamento e sobre o navegador. Quando agora passamos o mouse sobre nossas imagens, vemos um pequeno aumento no tamanho e também a opacidade é reduzida para. A última parte do CSS que vou adicionar é restringir o tamanho geral da página. Isso impedirá que as imagens sejam sobrecarregadas em telas realmente grandes. Se esticarmos o navegador para o máximo possível, muitas vezes temos uma largura máxima, que queremos que o site se estenda também. Em seguida, podemos definir a cor de fundo para aplicar no lado esquerdo e direito, uma vez que o navegador atinge o tamanho, podemos fazer isso definindo a largura máxima acima no topo da nossa folha de estilo na seção do corpo. Vou definir o meu para ser um valor de 1.500 pixels e depois para o projeto. Agora vemos que o navegador ultrapassou os 1.500 pixels, deixando todo o conteúdo movido para o lado esquerdo e todo o nosso espaço em branco à direita. Geralmente, porém, o que queremos é que o espaço em branco seja dividido igualmente entre o lado esquerdo e direito. Podemos fazer isso definindo as margens para serem automáticas. Vamos dividir o espaçamento igualmente em ambos os lados. Vamos fazer isso de volta na seção do corpo. Já temos a propriedade da margem aqui em cima. Podemos adicionar isso como um valor superior e inferior. Nenhuma margem será aplicada na parte superior e inferior. Mas podemos definir os valores esquerdo e direito para ser auto. Guarde isso e agora devemos ter espaçamento igual. A última coisa que eu vou fazer para parar o espaço em branco do corpo fluindo para a cor de fundo, é definir algumas cores de fundo para o corpo, que é a seção que vemos entre aqui e o HTML, que é a cor de fundo à esquerda e à direita. Em primeiro lugar, a seção do corpo pode ter a cor de fundo branco. Então, se formos para cima, podemos adicionar ao HTML2. Agora seção HTML irá cobrir o espaço em branco no lado esquerdo e direito. Agora o que eu vou fazer aqui é definir a cor de fundo para ser um tom ligeiramente diferente. Eu quero usar Eee. Isso vai parar nossa página que pode realmente esticado em grandes monitores. O toque final desta página é adicionar algumas animações a todos os projetos. Use a biblioteca de animação. Vamos para os projetos ou HTML e podemos adicionar os atributos a todos os nossos itens de grade. Fazemos isso adicionando o nome da animação com dados aos, uma animação de zoom-in-up. Para poupar tempo, vou copiar isto e adicionar isto a todos os outros projectos. Ele pode, naturalmente, adicionar uma animação diferente, se você preferir. Para ter certeza que isso está em cada um dos projetos, então isso irá ampliar quando rolarmos para baixo. Abaixo do navegador, role para baixo até nossos projetos e estes agora ampliarão à medida que os alcançarmos. Parabéns por chegar ao final do projeto do curso. Primeiro, claro, sinta-se livre para estender e torná-lo seu próprio. Uma vez que você está feliz com o seu projeto, você estará ansioso para colocá-lo on-line e é isso que vamos dar uma olhada em seguida. 24. Hospedagem: Assim que terminar de aperfeiçoar seu portfólio, tenho certeza que você estará ansioso para colocá-lo on-line para o resto do mundo ver. Infelizmente, há uma pesquisa muito rápida e fácil para fazer isso chamado Netlify. Você pode ir para netlify.com, onde você precisará se inscrever e criar uma conta. Já estou inscrito com estes, mas se você não tiver uma conta, vá em frente e crie uma agora. Você pode se inscrever com vários provedores, como seu e-mail e senha ou um serviço como o GitHub. Você também pode precisar verificar o e-mail. Eu já fiz isso, e eu tinha códigos de barras no Netlify e cancelar quaisquer inícios rápidos que possam aparecer. Uma vez que você tenha feito isso, você será levado para uma página que se parece com isso, e tudo o que precisamos fazer é arrastar sobre a pasta do projeto. Se você tiver seu projeto armazenado no GitHub, você também pode usar isso. O que você quer fazer é arrastar sobre os projetos de portfólio para esta seção de upload aqui. Depois de um curto período de tempo, então obtemos um link de teste que podemos usar, que podemos ver apenas aqui. Isto irá gerar um URL que você pode clicar ou copiar e, em seguida, colar no navegador para visualizar. Isso nos dará a chance de testar nossos sites e ver como ele se parece em um servidor web ao vivo. Infelizmente, o nosso parece ser exatamente o mesmo. Também podemos testar a página de projetos. Verifique se não há erros aqui também, role para baixo e tudo está olhando bem nesta página também. Também podemos criar um domínio personalizado que é qualquer caminho antes do netlify.com. Volte para o painel, clique em “Configurações de domínio” e, em seguida, em “Opções”, você também pode editar o nome do site. Este está sendo gerado aleatoriamente e você pode mudar isso para ser algo mais memorável se você preferir. Pressione “Salvar” e, em seguida, isso entrará em vigor. Isso ainda terá o netlify.com nas extremidades. No entanto, se você tiver um nome de domínio que você deseja usar, se quase você já possui ou um, você pode comprar através do Netlify. Há também um guia rápido para fazer isso também, e você pode clicar neste link para saber mais. Por enquanto, isso é o quão rápido e fácil é começar a usar o Netlify e enviar seu site para um servidor web ao vivo, deixando você com uma URL totalmente ativa, que agora você pode compartilhar com o resto do mundo. 25. Considerações finais: Espero que tenha gostado de fazer esta aula tanto quanto eu gostei de construí-la. Muito obrigado e espero que você tenha adquirido algumas novas habilidades valiosas, que você pode colocar em bom uso no futuro. Também mal posso esperar para ver o que vocês vão criar. Sinta-se livre para compartilhar seu projeto também. 26. Siga-me no Skillshare!: Grandes parabéns de mim por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de verificar o resto das minhas aulas aqui no Skillshare e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte, e espero vê-lo em uma aula futura.