Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
<p>HTML E CSS</p><p>Geralmente um projeto de Front-end possui vários arquivos sendo eles HTML, CSS, Javascript, etc. Quando iniciamos, precisamos criar uma pasta para organizar os nossos arquivos.</p><p>· HTML significa Hyper Text Markup Language (ou "linguagem de marcação de hiper texto").</p><p>Ou seja, o HTML é uma linguagem de marcação. Existe uma polêmica envolvendo o HTML e que alimenta dúvidas sobre o HTML ser uma linguagem de programação ou não. De fato, o HTML é uma linguagem de marcação, e por isso, não se trata de uma linguagem de programação. Utilizamos o HTML para designar as partes do texto.</p><p>· HTML descreve a estrutura de uma página da Web.</p><p>· Os elementos HTML rotulam partes do conteúdo como "isto é um título", "isto é um parágrafo", "isto é um link", etc.</p><p>Isso significa que teremos um local onde rotularemos cada elemento da página: é como se indicássemos "isto será um título", "isto será uma imagem" "estes serão dois parágrafos". O objetivo do HTML é marcar toda a página Web.</p><p>É interessante notar que existe um código por trás das páginas com as quais interagimos indicando a função de cada elemento.</p><p><!DOCTYPE html>. Conforme a própria página do HTML define, se trata de uma declaração que define o documento como um documento HTML5. Mesmo que criemos a extensão .html, é importante declarar esta tag pois ela define a versão.</p><p><html>. Esta tag indica que tudo o que existir dentro dela será o documento HTML.</p><p>A documentação nos informa que o <html> é o elemento raiz de uma página HTML, ou seja, este elemento será a base para tudo o que existir na página.</p><p>DICA: salvaremos o código com o atalho "Ctrl + S".</p><p><head>, a qual, segundo a documentação, contém meta informações sobre a página HTML.</p><p>O que seriam meta informações? São as informações sobre o próprio documento. São metatags. Vamos adicioná-las dentro do <head>.</p><p>DICA: Para indentarmos o código — ou seja, para mantê-lo organizado visualmente — devemos pressionar "Tab" a cada tag que abrirmos no interior de outra, criando dessa forma uma distância entre as tags e impedindo que todo o código fique "reto". Após a abertura e o fechamento da head pressionaremos "Enter". Dentro do espaço criado da <head> escreveremos as metas informações da nossa página.</p><p>Vamos dar um título para a página entre as tags do title.</p><p>A importância da documentação</p><p>A documentação é um guia que toda pessoa desenvolvedora deve levar a sério no dia a dia, é através dela que aprendemos como funcionam as linguagens de programação e também ferramentas e bibliotecas no mundo da tecnologia.</p><p>A documentação é muito importante no aprendizado e no desenvolvimento de aplicações. Afinal quem melhor que a pessoa que criou a ferramenta para nos orientar sobre as suas funcionalidades.</p><p>Devemos ler a documentação sempre que precisamos saber a estrutura de um método, ou quando queremos saber algum comando ou recurso de uma biblioteca, ou até mesmo quando esquecemos certa funcionalidade e precisamos relembrar.</p><p>Criando o corpo da página</p><p>Entraremos na tag <body>. A documentação nos informa que ele define o corpo do documento e é um recipiente para todos os conteúdos visíveis, como cabeçalhos, parágrafos, imagens, hiperlinks, tabelas e listas.</p><p>A tag <body> não ficará dentro do <head>. A palavra "head" significa cabeça, e "body" significa corpo. Se pensarmos bem, o corpo fica abaixo da cabeça.</p><p>Vamos criar o <body> abaixo do <head>, mas ainda dentro da tag <html>. Já que ambas estarão no mesmo nível em relação ao html.</p><p>Já vimos que o <title> se trata de uma meta informação do nome da página, que é inserida na aba. Existe uma outra tag denominada heading, a qual declaramos somente com <h>, o qual é acompanhado de um número que designa o peso daquele título. Podemos utilizá-la tanto para títulos quanto para subtítulos. Vamos envolver o nosso título com a heading no tamanho 1 — digitaremos o comando <h1> à esquerda, e fecharemos com </h1> no final do texto.</p><p>Temos o <html> aberto, todo o seu conteúdo e em seguida o seu fechamento. Abrimos e fechamos a tag <h1>, e tudo que escrevemos no espaço entre essas tags será o heading 1.</p><p>Abaixo do <h1> vamos adicionar a tag <p>, de parágrafo, com abertura e fechamento. Entre elas adicionaremos o texto "Isso é um parágrafo".</p><p>Mesmo que não tenhamos alterado o tamanho do texto, o navegador agora sabe que se trata de um parágrafo. Se não escrevêssemos nada, não seria uma boa prática, por conta da acessibilidade. Precisamos entender desde o começo que as tags auxiliam o navegador a entender nossa página.</p><p>Neste momento, uma aba da imagem estará aberta na tela principal do VS Code. Vamos fechá-la clicando no X localizado nessa aba. Para trazer essa imagem para nosso HTML utilizaremos a tag <img>, que vem da palavra "image" (ou "imagem"). Vamos adicioná-la abaixo do parágrafo e dentro do <body>, pois este é o local onde adicionaremos tudo o que é visível.</p><p>A <img> é uma tag que não possui fechamento. Para adicionar a imagem nesta tag não vamos arrastá-la, copiá-la ou colá-la, mas sim escrever o seu endereço. Com este endereço, a tag buscará a imagem e a exibirá em nossa tela.</p><p>Informaremos onde está a imagem através da propriedade src. As propriedades ficam dentro dos sinais de maior e menor da nossa tag. Quando digitarmos "src" e pressionarmos "Enter", o próprio VS Code deverá completar o comando adicionando o sinal de igual = e duas aspas duplas "". Caso não tenha ocorrido o autopreenchimento, podemos digitar manualmente.</p><p>Inserimos o src que vem de "source" ("fonte", em português), adicionamos o sinal de igual e abrimos aspas para escrever entre elas onde está o endereço da imagem. Neste caso, nossa imagem possui o nome que demos anteriormente: html.png, e se encontra na mesma pasta do nosso arquivo index.html: a pasta "Portfolio". Já que ambos estão na mesma pasta, basta adicionarmos html.png entre as aspas de nosso src.</p><p>Agora vamos abordar um aspecto muito importante da nossa página: não é só o <head> que carrega as metas informações relevantes para a nossa página. No <body> também temos informações muito relevantes para a página e que não são visíveis. Essas informações são utilizadas por pessoas que utilizam leitores de tela.</p><p>O navegador quando utiliza leitores de tela sabe identificar o que são títulos, subtítulos, e consegue lê-los na ordem correta.</p><p>Como o navegador lê uma imagem e a exibe para as pessoas que utilizam leitores de tela? Nós precisamos descrever essa imagem, e para isso utilizamos dentro de <img> a propriedade alt. Após digitá-la, daremos "Enter" e o sistema completará a estrutura com o sinal de igual e as aspas duplas.</p><p>O alt permite que adicionemos um texto alternativo para nossa imagem.</p><p>Na página não há nenhuma mudança. O texto alternativo será lido somente por leitores de tela que passarem por essa imagem. Entretanto, em casos de quebra de imagem, o texto alternativo será exibido no lugar dela.</p><p>Para aumentar a acessibilidade e para nos prepararmos melhor em casos de erro na aplicação, é muito importante adicionar um bom texto alternativo em todas as nossas imagens.</p><p>Quirks Mode e Live Server</p><p>Existe uma forma de verificar o código HTML e CSS de qualquer página da internet. Para isso, na tela do navegador, clicaremos com o botão direito e selecionaremos a opção "Inspecionar". Neste instante, será aberta uma aba à direita da página Web, onde existe uma barra de menus superior. Nela, selecionaremos o menu "Elements". No interior deste menu será exibido o código-fonte da nossa página index.html.</p><p>Vamos acessar esse código-fonte e perceber que, quando passamos o cursor por cima de uma tag, o navegador realça o elemento correspondente diretamente na página Web. Vamos conferir se todos os elementos que codamos estão na página: <html>, <head>, <title>, <body>, <h1>, <p> e <img>.</p><p>Aparentemente, está tudo igual. Ou seja, a retirada do <!DOCTYPE html> não mudou a parte visual da nossa página. Contudo, houve uma alteração na forma como o navegador enxerga essa página. Podemos ver a alteração dentro da própria aba "Inspecionar", selecionando o ícone de balão de comentário,</p><p>e daremos uma cor ao conteúdo com color: igual a #000000, cujo valor da cor preta também foi obtido do Figma.</p><p>Por fim, a fonte ainda está diferente, e descobrimos no Figma também que é a Montserrat que já importamos no projeto.</p><p>Portanto poderemos simplesmente fazer da mesma forma que aplicamos no parágrafo usando font-family: de 'Montserrat' e retirando as serifas com sans-serif.</p><p>Como é a mesma do seletor de .apresentacao__conteudo__texto, apenas copiaremos a linha e colaremos na .apresentacao__links__link.</p><p>Com isso, nosso botão já estará bem parecido com o projeto final, muito mais bonito e interessante. Mas, se repararmos com atenção no texto dos links, notaremos que as letras deveriam ser mais grossas.</p><p>No Figma, as selecionaremos e veremos que, na aba lateral, mesmo a fonte sendo da família Montserrat na parte de "Text", perceberemos que a propriedade font-weight: relativa ao peso da fonte é de 600 no HTML da aba de "Inspect".</p><p>Ainda não importamos este tipo de fonte, que é um pequeno detalhe, porém importante.</p><p>No navegador, buscaremos a página do Google Fonts e pesquisaremos a fonte "Montserrat" na barra de busca. Clicaremos nesta opção e, na lista mais adiante da página, procuraremos pelo peso de 600.</p><p>Selecionaremos clicando no link de "Select SemiBold 600" ao lado da opção correta, e pegaremos o código HTML atualizado de <style> na parte de "Use on the web" ou "use na web" da aba lateral.</p><p>O copiaremos e o colaremos no @import url() do topo do arquivo CSS, colocaremos o font-weight: 600 abaixo de font-size e salvaremos.</p><p>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');</p><p>CSS Border</p><p>A propriedade border é responsável pelas bordas dos elementos HTML. Ao inserir um elemento em um documento HTML, há várias possibilidades de estilizar sua borda. Você pode utilizar estilos que a propriedade já possui, além de poder também alterar sua cor, espessura e até mesmo seu formato! Utilizando apenas o poder do CSS!</p><p>Recurso Gap</p><p>Todos os detalhes do nosso trabalho estão bem bacanas até agora! Mas ainda está diferente do projeto no Figma. Alguns espaçamentos estão diferentes.</p><p>Havíamos definido uma margem de 10% em .apresentacao de style.css para o nosso conteúdo inteiro "apresentacao", que na verdade é um <main> com tudo o que estamos usando.</p><p>Essa margin: está fazendo com que dez por cento da página fique para dentro, deixando a disposição dos elementos diferente do projeto no Figma.</p><p>Também temos a opção de fixarmos um valor apertando a tecla "Alt" no Figma para obter os valores das margens em pixels, mas isso não é muito recomendável, afinal pode mudar em outras telas.</p><p>Como vimos antes, trabalhamos com o padding: do botão em que colocamos o valor de 21.5px apenas para o lado vertical e um valor 0 para o horizontal, então podemos simplesmente inserir um valor maior para as laterais em margin:, que são o segundo valor após o 10%.</p><p>Adicionaremos 15% ao margin: de .apresentacao em style.css para salvarmos e testarmos o resultado no navegador.</p><p>Com isso, notaremos que os blocos de textos e a imagem da página já se posicionaram mais ao centro da tela.</p><p>Outra questão interessante para trabalharmos é o posicionamento dos elementos textuais que estão bem juntos.</p><p>Este valor é facilmente obtido no projeto do Figma para deixarmos fixo, que no caso é 40px.</p><p>Poderemos fazer isso usando o FlexBox que já conhecemos, o qual sempre será colocado na tag <container>. Temos os três elementos textuais de título <h1>, o parágrafo <p> e a <div> com os dois botões do nosso arquivo index.html, então colocaremos o FlexBox em "apresentacao__conteudo".</p><p>Abrindo o style.css, iremos até .apresentacao__conteudo e adicionaremos display: flex abaixo de width:.</p><p>Com isso, usaremos uma nova propriedade do FlexBox chamada flex-direction, descrita na documentação de guide.</p><p>Por padrão, ela é feita em row, fazendo com que nossos itens fiquem organizados por linhas.</p><p>Como queremos que se posicionem na vertical, utilizaremos o flex-direction: column abaixo do display: flex para que fiquem "em pé" nas colunas.</p><p>Feito isso, o posicionamento dos elementos voltará ao normal.</p><p>Agora precisaremos criar os espaços corretos, e existe outra propriedade descrita no guia do FlexBox chamada gap, a qual possuirá o espaçamento dos elementos filhos, que neste caso será 40px segundo o Figma.</p><p>Gap</p><p>A propriedade gap não é exclusiva do Flexbox, porém é utilizada quase sempre em conjunto com ele. Ela especifica no CSS o tamanho dos espaços entre linhas e colunas em layouts de grid, flex e multi-column. Sua sintaxe é bem simples e ela aceita um ou dois valores.</p><p>Figma do projeto atualizado</p><p>Iniciaremos um novo desafio: atualizar a nossa aplicação. No mundo real, geralmente desenvolvemos uma tela, assim como fizemos, e de repente precisamos atualizá-la, incluindo novas funcionalidades.</p><p>Sistemas de software, páginas Web e aplicações geralmente passam por atualizações.</p><p>Principalmente em momentos de alta nas vendas, como na Black Friday. Nestas datas, empresas de e-commerce enviam landing pages para que modifiquemos, adicionando chamadas de desconto. É bem comum recebermos no dia-a-dia pedidos de atualização de projetos.</p><p>Traremos acontecimentos do mundo real para esse curso. Não somos um e-commerce, mas temos uma atualização a ser implementada. O nosso projeto evoluirá um pouco mais: ele terá uma nova tela.</p><p>Temos botões com ícones em seu interior. O que visualmente chama mais a atenção.</p><p>Também temos o novo subtítulo "Acesse minhas redes", que antes eram completamente ciano. Agora eles possuem apenas uma borda nesta cor. Temos também ícones nos botões.</p><p>Estes elementos estão nas cores que estamos utilizando.</p><p>Agora temos também na parte superior os menus "Home" e "Sobre mim".</p><p>Nós já desenvolvemos o <header>, agora vamos adicionar em seu interior todas as nossas tags para criar o cabeçalho de fato. Nós o adicionamos e o deixamos vazio somente para entender onde ele deveria ficar.</p><p>O mesmo vale para o <footer> (ou "rodapé"). Onde está escrito "Desenvolvido por Alura", você pode adicionar seu nome.</p><p>Além dessa, temos uma página nova, que será acessada quando clicarmos no menu "Sobre mim".</p><p>Nela, o cabeçalho e o rodapé continuam iguais. O que muda é o conteúdo principal, do meio da tela. Teremos a chance de criar uma biografia, onde poderemos escrever um pouco sobre nós. Por isso, o texto que incluímos no Figma e no curso é ilustrativo.</p><p>É importante salientar que, quando recebemos um design para trabalhar, é comum que haja nele esse tipo de texto chamado Lorem ipsum. Ele serve para nos mostrar como o texto final fica disposto na página, sem precisarmos acessar o texto verdadeiro, o qual às vezes nem foi produzido ainda.</p><p>Os estilos das duas páginas são parecidos, utilizam os mesmos estilos.</p><p>Exatamente, a mudança está nas disposições e nos tamanhos do texto. A foto também é a mesma.</p><p>Com base no que já aprendemos, é possível deduzir os estilos de cada trecho: o "Sobre mim" seria um <h1>, e os blocos de biografia seriam dois blocos de parágrafo. Nós nos pegamos pensando se vamos utilizar um Flexbox na horizontal ou na vertical. Isso é muito comum. Com a prática, aos poucos, desenvolvemos esse tipo de percepção e passamos a aplicá-la em todas as páginas que vemos.</p><p>Posicionando os links</p><p>Já conhecemos o projeto novo. Por onde devemos começar: cabeçalho, rodapé, botões?</p><p>Isso é uma escolha de cada pessoa desenvolvedora. No nosso caso podemos começar pelos botões, pois existe uma diferença bem clara entre a etapa anterior e a atual.</p><p>A primeira mudança que podemos ver é a presença de um novo subtítulo antes dos links, escrito "Acesse minhas redes:". Vamos adicioná-lo.</p><p>Voltando ao VS Code, acessaremos o arquivo index.html. Em seu interior encontraremos a <div> que agrega os dois botões que criamos: "Instagram" e "Github". Criamos ela para utilizar o Flexbox e realizar o posicionamento dos dois.</p><p>Adicionaremos o novo subtítulo dentro dessa <div>, pois ela fará parte da divisão. Acima da linha com o botão do Instagram, adicionaremos um <h2>.</p><p>O</p><p>correto é utilizar somente um <h1> por página, para não atrapalharmos a pesquisa dela no Google. Assim, a página será retornada na pesquisa exibindo somente um título.</p><p>Entre as tags de fechamento e abertura do <h2> adicionaremos o texto "Acesse minhas redes:".</p><p>Acessaremos a nossa página por meio do navegador e veremos que o texto aparece em uma disposição totalmente errada: à esquerda dos botões, e não acima.</p><p>Precisamos alterar a forma como dispomos esses elementos.</p><p>Exatamente. Eles estão na horizontal porque criamos, dentro de style.css, um .apresentacao__links{} cujo interior possui um justify-content: space-between. Sabemos que quando se cria um display: flex, automaticamente a direção dele será de Row (ou linha). Precisamos alterar a sua direção para Column (ou coluna).</p><p>Para isso, acessaremos novamente o arquivo style.css. No interior das chaves de .apresentacao__links{}, abaixo de display: flex adicionaremos um flex-direction: column.</p><p>.apresentacao__links{</p><p>display: flex;</p><p>flex-direction: column;</p><p>justify-content: space-between;</p><p>}</p><p>Isso mesmo. Queremos que eles fiquem dispostos em coluna, ou seja, na vertical.</p><p>Se retornarmos à nossa página aberta no navegador já veremos a alteração. Agora o texto "Acesse minhas redes:" aparece acima dos botões.</p><p>Os três elementos (texto e botões) estão grudados. A impressão é de que, além de estarem muito próximos um do outro, estão encostados na borda esquerda do espaço dedicado a eles.</p><p>Exatamente. Para centralizar nossos elementos no eixo vertical, podemos utilizar uma outra propriedade do Flexbox, a qual já utilizamos anteriormente: o align-items.</p><p>Importante: Anteriormente havíamos utilizado o align-items para centralizar os elementos na vertical, pois o flex-direction estava em Row. Agora que alteramos a direção do Flexbox para Column, os elementos serão alinhados na vertical. Sempre que realizarmos uma alteração no flex-direction, ela se aplicará a todas as propriedades relacionadas.</p><p>Por este motivo, utilizaremos a mesma propriedade, mas obteremos um resultado diferente do anterior. Acessaremos novamente o interior das chaves de .apresentacao__links{}, e abaixo de justify-content adicionaremos um align-items: center.</p><p>.apresentacao__links{</p><p>display: flex;</p><p>flex-direction: column;</p><p>justify-content: space-between;</p><p>align-items: center;</p><p>}</p><p>Se abrirmos o Figma, temos um espaço entre cada elemento. Podemos adicioná-lo com o gap.</p><p>Se clicarmos no subtítulo e arrastarmos o mouse para o primeiro botão, o Figma nos mostrará a distância exata entre cada elemento: 32px.</p><p>Podemos dizer que queremos um espaço de 32px entre cada uma das redes.</p><p>Exato. Já havíamos conhecido a propriedade gap, a qual deve ser inserida em nossa tag contêiner. Para configurar esse espaçamento vamos adicionar um gap: 32px abaixo de align-items: center.</p><p>.apresentacao__links{</p><p>display: flex;</p><p>flex-direction: column;</p><p>justify-content: space-between;</p><p>align-items: center;</p><p>gap: 32px;</p><p>}</p><p>Salvaremos nosso código e retornaremos à página aberta no navegador. Nela, tanto o texto "Acesse minhas redes:" quanto os botões aparecem centralizados verticalmente, com um espaçamento entre cada um deles.</p><p>Estilizando os links</p><p>Conseguimos posicionar nossos links corretamente. O subtítulo ainda possui fonte e tamanho errados, portanto vamos estilizá-lo.</p><p>Retornaremos ao VS Code e acessaremos o arquivo index.html, onde criaremos uma classe para o subtítulo. Acessaremos a tag de abertura do nosso <h2>, entre os sinais de menor e de maior, e adicionaremos uma class="".</p><p>Copiaremos o nome da classe e acessaremos o arquivo style.css.</p><p>Devemos sempre escrever o CSS na ordem em que utilizamos as *tags no HTML*. Portanto, adicionaremos a nova classe .apresentacao__links__subtitulo{} acima de .apresentacao__links__link{}.</p><p>O primeiro detalhe a ser alterado será a fonte do subtítulo.</p><p>Se acessarmos o Figma e clicarmos neste elemento, descobriremos na aba "Design" o nome da fonte: Krona One. Já utilizamos esta fonte anteriormente, portanto já temos a sua importação no projeto. Basta que a chamemos.</p><p>Para chamá-la, adicionaremos entre as chaves de .apresentacao__links__subtitulo{} um font-family:'Krona One', 'sans-serif'. Temos que modificar também o peso e o tamanho dessa fonte.</p><p>Exato. Se acessarmos o Figma e clicarmos no subtítulo, descobriremos na aba "Inspect" o font-weight (ou "peso da fonte"): 400. Na mesma aba veremos o Size (ou "tamanho") de 24px.</p><p>Voltaremos ao VS Code e traremos estas configurações adicionando abaixo de font-family um font-weight: 400. Abaixo de font-weight, por sua vez, adicionaremos um font-size: 24px.</p><p>.apresentacao__links__subtitulo{</p><p>font-family:'Krona One', 'sans-serif';</p><p>font-weight: 400;</p><p>font-size: 24px;</p><p>}</p><p>O sans-serif é uma propriedade, portanto não precisamos adicioná-lo entre aspas simples. Vamos retirá-las.</p><p>.apresentacao__links__subtitulo{</p><p>font-family:'Krona One', sans-serif;</p><p>font-weight: 400;</p><p>font-size: 24px;</p><p>}</p><p>Salvaremos o código e retornaremos à página aberta pelo navegador. Nela, temos o subtítulo com a fonte, tamanho e peso desejados. Em seguida, estilizaremos os botões em si, trocando o fundo ciano por bordas nessa cor.</p><p>Retornaremos ao arquivo style.css pelo VS Code e buscaremos a classe .apresentacao__links__link{}. Entre suas chaves, alteraremos os seguintes elementos:</p><p>· Removeremos o fundo ciano, deletando o comando background-color: #22D4FD;</p><p>· Mudaremos a cor dos textos, modificando o valor de color de #000000 (preto) para #F6F6F6 (branco);</p><p>· Adicionaremos a borda 2px solid (borda sólida com 2px de espessura), na cor #22D4FD (ciano);</p><p>Os valores de cor do texto e de borda encontraremos no Figma. Com a seleção ativa nestes elementos, veremos na aba "Inspect" os campos color: #F6F6F6 e border: 2px solid #22D4FD, respectivamente. Basta copiar os valores destes campos.</p><p>Dica: Se você gostou da configuração anterior, é possível comentar estes trechos de código em vez de excluí-los. Os trechos de código que comentamos não são lidos pelo sistema. No Visual Studio Code, o atalho para comentar uma linha de código é "Ctrl + K + C". Após ativá-lo, o VS Code adicionará os comandos /* e */ no início e no final da linha, respectivamente.</p><p>Vamos comentar um trecho do código como exemplo: /* background-color: #22D4FD; */.</p><p>Salvaremos o código e retornaremos à página aberta pelo navegador. Nela, temos os dois botões na cor preta, com bordas ciano e seus respectivos textos na cor branca. Ficou do jeito que queríamos.</p><p>Vamos entender o código: na propriedade border, o primeiro valor informa a espessura da borda.</p><p>O segundo valor informa o tipo de tracejado. Neste caso é sólido. Se acessarmos a página do W3Schools sobre bordas do CSS, veremos na seção "CSS Border Style" (ou "estilo de borda CSS") várias opções de estilização de borda disponíveis.</p><p>O próprio CSS possui configurações nativas. Existem muitas propriedades pré-definidas, e cabe a nós explorarmos e aprendermos sobre elas.</p><p>Imagine receber um Figma com bordas pontilhadas, por exemplo. Se não houvesse a propriedade border, seria muito difícil configurar algo assim.</p><p>Voltaremos ao VS Code para entender o último valor de border: a cor. Como vimos anteriormente, se trata de um valor hexadecimal que traz a cor escolhida.</p><p>Acessaremos o Figma e veremos que a largura do botão também mudou, está maior. Clicaremos neste elemento e buscaremos na aba Inspect o valor de sua width: 378px. Copiaremos este valor e voltaremos ao VS Code. Em .apresentacao__links__link{} substituiremos o valor da width de 280px para 378px.</p><p>A forma do botão também mudou. Antes, tínhamos cantos arredondados, e agora eles estão mais retos. Buscaremos e copiaremos no Figma o valor de Radius da borda: 8px. Ainda em .apresentacao__links__link{} substituiremos o valor da border-radius de 16px para 8px.</p><p>Para saber mais: border e comentário nos códigos</p><p>Durante a aula, personalizamos a propriedade CSS chamada border, para adicionar a borda em volta dos botões. Essa propriedade pode ser usada para definir os valores de largura da borda,</p><p>estilo da borda e cor da borda e possui alguns estilos diferentes, como o “dotted”, que conhecemos na aula através da documentação.</p><p>O que são comentários?</p><p>Comentários são notas de texto que podem ser inseridas ao longo do desenvolvimento e que serão ignoradas pelo código, portanto não interferem em seu funcionamento.</p><p>Para que servem os comentários</p><p>Os comentários podem ser usados para anotar informações importantes sobre o código, para salvar códigos que estivermos testando sem que haja necessidade de apagar e reescrever, para descrever alguma função específica e facilitar manutenções futuras ou até para auxiliar na organização das ideias de construção do código.</p><p>Como comentar em HTML e CSS</p><p>O uso de comentários é comum em diversas linguagens e cada uma terá sua sintaxe particular. Isso também acontece em HTML e CSS, já que em cada uma temos uma maneira de adicionar comentários, que vamos conhecer a seguir:</p><p>HTML</p><p>Os comentários no HTML se assemelham com uma abertura de tag. Abrimos um comentário com <!-- e fazemos seu fechamento com -->. Tudo que estiver entre esses dois marcadores será considerado como comentário, inclusive quebras de linha:</p><p><p> Isso é um parágrafo de texto e será exibido pelo navegador </p></p><p><!-- Isso é um comentário e será ignorado --></p><p><!-- Isso é um comentário com quebra de linha</p><p>e também será ignorado --></p><p><p> Isso é um parágrafo de texto e será exibido pelo navegador </p></p><p>CSS</p><p>Os comentários em CSS também possuem abertura e fechamento. Abrimos esse tipo de comentário com /* e fechamos com */ e assim como no HTML, tudo que estiver entre essas marcações será considerado comentário, ainda que esteja entre mais de uma linha:</p><p>body{</p><p>background-color: white;</p><p>/* Isso é um comentário em CSS */</p><p>/*</p><p>Isso é um comentário em CSS com</p><p>quebra de linha</p><p>*/</p><p>}</p><p>Boas práticas ao comentar</p><p>Os comentários podem ser muito úteis para facilitar o desenvolvimento, no entanto, precisamos ter atenção a algumas boas práticas para fazer seu uso adequado:</p><p>· Evite adicionar muitos comentários para não gerar uma “bagunça” em seu código;</p><p>· Evite criar comentários muito longos. Tenha em mente que apesar de não serem executados, esses comentários ocupam espaço e podem deixar seu arquivo mais pesado;</p><p>· Use os comentários a seu favor, ou seja, anote informações essenciais neles, pois isso irá facilitar com que você encontre aquilo que é realmente necessário lembrar no momento de fazer manutenções em seu código;</p><p>· Ao usar comentários para testar sua aplicação, lembre-se de apagar essas notas quando terminar, para que seu código não fique desorganizado e com partes desnecessárias;</p><p>· Por fim, lembre-se sempre que um código descritivo é mais duradouro que muitos comentários. Quando estiver trabalhando com HTML, lembre-se de usar as Tags semânticas e ao criar suas classes CSS, adicione nomes significativos. Assim, seu código ficará naturalmente descritivo e não dependerá tanto dos comentários, que podem ser apagados ou se perderem ao longo de manutenções =) .</p><p>Ícones das redes sociais</p><p>Vamos inserir os ícones em nossos links. Em nosso código, temos links de duas redes: o Instagram e o Github.</p><p>Isso. Já no Figma, temos três: Github, LinkedIn e Twitch. Vamos atualizar com base no Figma. Contudo, você pode atualizar com as suas próprias redes!</p><p>Voltando ao VS Code, acessaremos novamente o arquivo index.html para trazer as imagens dos ícones, considerando que já sabemos como criar a tag <img>.</p><p>Primeiro, vamos realizar os passos abaixo:</p><p>· Deletar a tag <a> correspondente ao Github;</p><p>· Alterar o texto do primeiro <a>, de "Instagram" para "Github", substituindo o endereço do Instagram por um endereço de Github;</p><p>· Separar a tag de abertura <a>, o texto "Github" e a tag de fechamento </a>, pressionando "Enter" entre elas, deixando uma linha vazia acima do texto.</p><p>O que faremos para trazer a nossa imagem?</p><p>Precisamos especificar o local em que essa imagem está. Já fizemos o download de todas as imagens com os ícones das redes que precisamos.</p><p>Inclusive de alguns que não utilizaremos no projeto, mas que disponibilizamos para que sejam utilizados.</p><p>Acessaremos o explorador do nosso sistema operacional. Abriremos a pasta onde se encontram as imagens, e em seguida vamos selecioná-las e arrastá-las para o explorador do VS Code. Neste momento, todas as imagens serão coladas no projeto e ficarão dispostas aleatoriamente entre os arquivos.</p><p>Como boa prática, criaremos uma pasta para isolar todas as imagens do restante dos arquivos.</p><p>No topo do explorador, clicaremos no ícone de pasta denominado "New Folder" (ou "Novo Arquivo"). No campo de texto que será aberto, digitaremos o nome da nova pasta. Vamos nomeá-la "assets" pois é um nome muito utilizado nos projetos reais.</p><p>Pelo explorador, arrastaremos cada uma das imagens para dentro da pasta "assets".</p><p>Observação: A imagem que já havíamos utilizado, denominada imagem.png, será realocada. Portanto, precisamos informar no código o novo local em que ela se encontra. Para isso, acessaremos a linha dessa <img> e substituiremos dentro de src o local antigo ("imagem.png") pelo local novo: "./assets/imagem.png".</p><p>Informaremos o caminho da imagem que vamos inserir — ou seja, o ícone do Github. Voltaremos à nova tag <img> e antes do sinal de menor adicionaremos um src="", o qual possuirá entre as aspas duplas o endereço ./assets/github.png.</p><p>Para adicionar os outros ícones e botões, copiaremos a estrutura da tag <a> e colaremos duas vezes, uma embaixo da outra, já que utilizaremos a mesma classe, apresentacao__links__link, para as três.</p><p>Em seguida modificaremos o conteúdo de href, de src e do texto para que correspondam à cada rede social: acima o Github, no meio o LinkedIn, e embaixo a Twitch.</p><p>Atenção ao endereço de cada rede social, pois elas possuem padrões diferentes. Por exemplo, o endereço base do LinkedIn é "linkedin.com/in/nome-da-pessoa".</p><p>Salvaremos o nosso código e retornaremos ao navegador, onde veremos nossa página com os três botões, "Github", "LinkedIn" e "Twitch", com seus respectivos ícones à esquerda. Entretanto, eles estão desalinhados em relação ao texto (alguns para cima, outros para baixo). Precisamos modificar a estilização de posicionamento dos nossos dois elementos que estão dentro de cada botão.</p><p>Posicionando os ícones</p><p>Alinharemos os ícones junto a seus respectivos textos dentro dos botões de redes sociais.</p><p>Teremos que alterar o alinhamento e disposição de todos os elementos localizados dentro da tag <a>.</p><p>Por que justamente na tag <a>?</p><p>Porque precisamos alinhar tanto a imagem quanto o texto.</p><p>Exatamente. São os dois elementos filhos dessa tag. Normalmente, no Flexbox, alteramos o contêiner com as propriedades que costumamos usar. Também existem propriedades para os elementos filhos.</p><p>Acessaremos o arquivo style.css, no qual encontraremos a tag <a>. Faremos isso através da busca pela classe dela: .apresentacao__links__link{}.</p><p>Para garantir que os elementos tenham uma disposição diferente através do Flexbox, utilizamos o display: flex.</p><p>Perfeito. Vamos inserir o display: flex junto ao seu ponto e vírgula. Essa inserção será feita entre os códigos background-color e border.</p><p>Se consultarmos nossa página por meio do navegador, veremos que tanto os ícones quanto os textos foram movidos para o canto esquerdo do botão.</p><p>Sim, pois este é o padrão do Flexbox.</p><p>Agora precisamos alterar o alinhamento, informando aos elementos do botão que eles devem ser centralizados.</p><p>Para isso, utilizaremos qual propriedade?</p><p>O justify-content.</p><p>Isso mesmo. Consultaremos a página do Flexbox Guide (ou "Guia do Flexbox") conforme já fizemos anteriormente. Nela vamos até a seção "justify-content", onde encontraremos o valor que devemos utilizar dentro da propriedade justify-content para que o nosso conteúdo fique centralizado no eixo horizontal: center.</p><p>Vamos lembrar que, no Flexbox, a direção padrão é Row (ou seja, já é horizontal). Portanto, basta que adicionemos ao CSS dos nossos botões o comando justify-content: center. Essa adição será feita entre os códigos display e border.</p><p>Temos</p><p>outro problema: o ícone e o texto estão grudados. Se consultarmos o Figma, veremos que existe um pequeno espaço entre eles.</p><p>Acessaremos o Figma do projeto e clicaremos em um dos ícones de botão. Em seguida, direcionaremos o cursor para o texto à sua direita. O número que aparece em laranja é o valor do espaçamento em px entre o ícone e o texto. Neste caso, o valor é 16. Utilizaremos este valor em uma propriedade específica.</p><p>Para adicionar espaço entre todos os elementos, usaremos o gap.</p><p>Perfeito. Retornaremos ao arquivo CSS onde, abaixo da propriedade justify-content, adicionaremos um gap: 16px.</p><p>Hover</p><p>Conseguimos aproximar nosso código do Figma. No entanto, existe um detalhe que não é possível visualizar no Figma: uma espécie de animação. Quando passamos o mouse por cima do explorador lateral do Figma, cada menu perpassado ganha um destaque por meio de uma borda azul. Chamamos este efeito de Hover.</p><p>Vamos aplicá-lo em nossa página de portfólio, de modo que quando passamos o cursor por cima dos botões, eles serão destacados em outra cor.</p><p>É possível notar outro detalhe: quando o cursor passa pela tela da nossa página, ele se torna uma seta. Já quando o passamos por cima de um botão, ele se torna uma mão com o indicador levantado.</p><p>Exatamente. Isso é feito automaticamente pela âncora, quando utilizamos essa tag. Contudo, também é possível estilizar esse pointer, ou cursor. Por ora, focaremos no Hover.</p><p>A ideia consiste em ativar um recurso visual quando o cursor acessar a área do nosso elemento clicável.</p><p>Exatamente. Os designers disponibilizaram dentro do Figma, abaixo da nossa página, dois ícones de botão soltos: um representando o seu estado normal, e outro representando a borda destacada do Hover, preenchida na cor 272727. Essa cor consiste na cor de fundo original, em um tom levemente mais claro. Esta será a cor que veremos quando o cursor passar por cima do botão.</p><p>Veremos como esse processo funciona acessando a documentação do Hover no site W3Schools. Dentro da subseção "Example", veremos o exemplo de utilização abaixo.</p><p>Acima deste exemplo temos uma frase indicando que, com este comando, seremos capazes de selecionar e estilizar o link quando o mouse estiver por cima dele.</p><p>No exemplo, utilizamos a tag âncora a seguida de :hover.</p><p>Contudo, não precisamos necessariamente utilizar a tag a. Em vez disso, podemos informar uma classe.</p><p>Exatamente. Estamos utilizando a classe .apresentacao__links__link {}, portanto vamos copiá-la e colá-la abaixo de suas chaves, inserindo :hover à direita.</p><p>Quando estamos inserindo o hover, o VS Code mostra que existem várias outras opções de configuração possíveis.</p><p>Tudo o que adicionarmos dentro das chaves de .apresentacao__links__link:hover {} será estilizado no momento em que o mouse passar por cima dos links. Podemos mudar diversos aspectos: o tamanho da fonte, o seu tipo, a borda, etc. Neste caso, modificaremos apenas o fundo — adicionaremos um background-color que receberá uma hashtag (#) junto à cor que encontramos no Figma: 272727.</p><p>Salvaremos o nosso código e retornaremos à nossa página aberta pelo navegador. Se passarmos o mouse por cima de um dos botões, a sua cor será alterada para o tom que configuramos — um preto mais claro do que a cor de fundo da tela principal.</p><p>Isso é interessante pois conseguimos perceber visualmente a presença do mouse no botão.</p><p>Exato. Se adicionássemos uma cor para a fonte, ela seria alterada junto à cor de fundo. Neste caso faremos somente a alteração de cor do botão, pois já conseguimos um ótimo efeito.</p><p>Desenvolvendo o footer</p><p>Como ainda não criamos a outra página, poderemos finalizar o rodapé da página inicial para depois trabalharmos no menu.</p><p>Vamos copiar o texto de "Desenvolvido por Alura" na base da tela do Figma, porque é o único conteúdo que possui.</p><p>Sim, depois abriremos o arquivo index.html no VSCode e iremos até o <footer> que tínhamos definido no momento em que separamos a página em <header>, <main> e a tag do rodapé.</p><p>Dentro dela, abriremos uma nova linha e adicionaremos um parágrafo com <p> que receberá o texto copiado do Figma.</p><p>Lembrando que "Desenvolvido por Alura" pode ser substituído por qualquer outro escrito que quisermos.</p><p>No <footer>, adicionaremos uma classe chamada "rodape" para podermos estilizar o rodapé.</p><p>Em seguida, acessaremos o arquivo style.css e, na última linha, criaremos o seletor .rodape e abriremos chaves.</p><p>Salvando e voltando ao navegador, notaremos o texto "Desenvolvido por Alura" escrito bem pequeno na parte esquerda da base da tela.</p><p>Mesmo que não tenhamos colocado uma propriedade color: diretamente em .rodape, os caracteres aparecem na cor branca porque definimos como #F6F6F6 em body.</p><p>Esse texto "herda" dos elementos-pais que estão acima, e por isso fica em branco mesmo automaticamente.</p><p>Então vamos alterar a cor do texto do .rodape colocando color: com o valor #000000 para ficar na cor preta.</p><p>Já a propriedade da cor de fundo background-color terá o valor hexadecimal #22D4FD para ficar com a cor azul claro.</p><p>Conforme utilizamos a mesma paleta com os mesmos valores nas propriedades, o VSCode memoriza automaticamente o que escrevemos.</p><p>Já está aparecendo com a cor de texto e de fundo que definimos, mas a faixa ainda está muito estreita porque tem a altura do conteúdo, então não há uma margem e uma borda com padding: no rodapé.</p><p>Vamos relembrar o que é essa propriedade?</p><p>Abrindo a janela lateral de "Inspecionar" em nossa página no navegador, teremos uma parte inferior com a aba "Estilos" contendo a representação dos elementos da tela.</p><p>Temos a margem ou "margin" que é onde o conteúdo está, dentro dela temos a borda ou "border" onde inserimos o border-radius, e dentro dele há o "padding" que representa a distância do conteúdo para a borda de sua área.</p><p>Neste caso do rodapé, só teremos o conteúdo textual mesmo.</p><p>Não colocaremos uma margem para aumentarmos a altura da faixa azul porque significaria da borda dela para os demais elementos externos. No arquivo style.css, criaremos uma propriedade margin: de 28px apenas para entendermos como funciona.</p><p>Quando fazemos isso, salvamos e voltamos ao navegador, notaremos que há um espaçamento entre a borda da tela inteira e o início da faixa azul do rodapé, criando pequenos espaços em preto nas laterais dela.</p><p>Como queremos trabalhar na distância entre o conteúdo e a borda dessa própria faixa, substituiremos o margin: por padding:.</p><p>De volta ao Figma, apertaremos a tecla "Alt" e passaremos o cursor sobre o rodapé para obtermos o valor dessa propriedade.</p><p>Depois adicionaremos 24px à propriedade do .rodape.</p><p>Salvando e analisando o resultado no navegador, notaremos uma distância maior entre os limites da faixa azul do rodapé e o conteúdo textual interno.</p><p>O texto ainda está alinhado à esquerda, e iremos centralizá-lo de acordo com o projeto do Figma usando a propriedade text-align:.</p><p>Exatamente. A colocaremos com o valor center e salvaremos o arquivo.</p><p>No navegador, já teremos o escrito centralizado.</p><p>Ainda precisamos definir a fonte correta e o tamanho do texto.</p><p>A família da fonte 'Montserrat' será definida na propriedade font-family: que já conhecemos, que também é sem serifa ou sans-serif.</p><p>Em seguida, o tamanho de font-size: será de 24px. Vamos salvar e analisar a página no navegador.</p><p>Ainda falta vermos se o peso da fonte está certo também.</p><p>Vamos abrir o Figma e acessar a aba "Inspect" da janela lateral direita de propriedades, onde descobriremos que é 400.</p><p>De volta ao código, adicionaremos font-weight: com este valor, salvaremos e observaremos o resultado no navegador.</p><p>Como comentamos no início do nosso curso, queremos que todo o conteúdo em body esteja visível no tamanho da página usando a propriedade height: 100vh que determina a altura.</p><p>Ou seja, este valor é de 100% do viewport height ou da "altura da tela".</p><p>Agora não há mais necessidade de termos isso.</p><p>Sim, afinal já temos um rodapé e mais elementos na página, e antes os elementos não alcançavam a base da tela, justificando o uso de toda altura disponível que não é mais necessário.</p><p>Inclusive, abrindo o Inspecionador de Elementos</p><p>e selecionando a área do body, veremos que a seleção não atinge a base onde está o rodapé.</p><p>Portanto é interessante retiramos a height: 100vh para ajustarmos um novo valor e o footer ficar dentro do body.</p><p>No style.css, comentaremos a linha desta propriedade da altura usando o atalho "Ctrl + K + C" e salvaremos.</p><p>Com a aba de Inspecionar Elementos aberta no navegador, notaremos que a seleção do body estará englobando toda a página, inclusive os novos elementos adicionados que estavam maiores do que a área visível da tela.</p><p>Outro problema que temos agora é que os espaçamentos entre todos os elementos estão maiores do que deveriam. Quando navegamos e scrollamos, notaremos um espaço desnecessariamente grande no topo.</p><p>Já tínhamos definido essas margens como 10% e 15%, então poderemos usar um padding: ao invés de margin:, o qual definirá a distância da borda da tela até o conteúdo interno.</p><p>Em .apresentacao no style.css, substituiremos a propriedade de margem pelo padding:.</p><p>Vamos testar um valor de porcentagem como de 5%, por exemplo.</p><p>Salvando e observando a página no navegador, notaremos que os elementos até cabem na tela, mas o ideal é mantermos um espaço para inserirmos o cabeçalho. Então vamos testar o valor de 8%.</p><p>Desenvolvendo o cabeçalho</p><p>No Figma, temos dois links no topo da tela principal para "Home" e "Sobre mim".</p><p>Em nosso projeto no index.html, já temos a tag <header> preparada dentro de <body> para conseguirmos desenvolver o cabeçalho.</p><p>O <header> geralmente é composto por um menu de navegação na grande maioria das páginas web, contendo diversos links que nos direcionam para outras telas.</p><p>Para isso, também existe uma tag semântica.</p><p>Ela é chamada <nav> e receberá os links para navegarmos na página, que podem ser de um blog com uma hierarquia de links por assuntos, como uma opção "Programação" que envolveria "Front-end", seguido de "HTML" por exemplo. Essa forma também é uma navegação com a tag <nav>.</p><p>Nosso caso possui apenas dois: o da página inicial e "Sobre mim" com outras informações.</p><p>Dentro de <nav>, adicionaremos a tag âncora que já conhecemos, a qual receberá o texto Home. Já na segunda <a>, teremos Sobre mim.</p><p>Também criaremos as classes do cabeçalho para podermos estilizar. Então, ao lado de <header e antes de > na mesma linha, escreveremos class igual a "cabecalho". Já em <nav, a classe será "cabecalho__menu", e as duas tags <a, será "cabecalho__menu__link".</p><p>Sim, mas na verdade está bem pequeno no canto superior, então precisaremos estilizar no arquivo style.css para ficar igual ao projeto no Figma.</p><p>Para saber mais: Padding</p><p>Observe a imagem a seguir:</p><p>A tela acima apresenta os botões que criamos em nosso projeto para acessar as redes sociais. No entanto, podemos perceber que o ícone e o texto dentro de cada botão ficaram “espremido” pelas bordas, o que desfavorece o visual do projeto.</p><p>Todos os botões têm conteúdo: um ícone e o texto com o nome da rede social. Além disso, todos os botões possuem uma borda fina em azul. Portanto, precisamos adicionar alguma propriedade que faça com que haja um espaço entre o conteúdo e as bordas do botão, para obtermos o seguinte resultado:</p><p>Bem melhor, não é? Mas você sabe qual propriedade nos ajudou a definir a distância entre o conteúdo e a borda?</p><p>Se você pensou no padding, acertou!</p><p>O Padding é responsável por definir a distância entre um conteúdo e suas bordas. No caso do nosso projeto, adicionamos um padding: 21.5px 0, que já foi suficiente para criar um espaço interno mais amplo nos botões. Essa propriedade é extremamente útil pois garante que exista esse espaço de “respiro” entre as bordas e o conteúdo, deixando o visual mais limpo e harmônico.</p><p>Estilizando o cabeçalho</p><p>Já criamos nosso cabeçalho com HTML, mas ainda precisamos estilizá-lo.</p><p>Abrindo o arquivo style.css no VSCode, inseriremos as classes que já criamos no index.html, mas sempre deveremos colocar no momento em que as tags vão aparecendo.</p><p>Vamos deslocar o .titulo-destaque para depois de .apresentacao__conteudo__titulo porque possui a tag <strong> que é utilizada logo depois do <h1>.</p><p>Começaremos a estilização do escrito para depois posicionarmos os elementos, então a classe "cabecalho__menu__link" na âncora <a> de index.html será copiada e colada após o body em style.css.</p><p>Abriremos as chaves de .cabecalho__menu__link e dentro colocaremos as propriedades de cor, fonte e tamanho obtidas do projeto do Figma.</p><p>Primeiro, a font-family: é 'Montserrat', sans-serif, depois o font-size: terá o valor de 24px e, por fim, seu peso font-weight: será de 600.</p><p>Também precisaremos trocar a cor do texto de cabeçalho para azul claro, e já temos este valor também. Então color: será #22D4FD. Salvaremos e analisaremos o resultado no navegador.</p><p>Com isso, teremos nossos elementos estilizados.</p><p>Agora precisaremos trabalhar no posicionamento deles.</p><p>Exatamente, e poderemos usar o cabeçalho para estabelecer a posição de cima para baixo com espaçamento lateral usando padding:.</p><p>Pegaremos a classe "cabecalho" do <header> em index.html que agrupará toda a barra de navegação que contém as duas tags âncoras para podermos estilizá-las.</p><p>Copiaremos o nome dessa class e a adicionaremos acima de .cabecalho__menu__link, pois aparece antes.</p><p>Dentro das chaves, colocaremos o padding: para espaçarmos as duas âncoras, e queremos apenas na parte superior e de um lado só. Já aprendemos uma forma de escrevermos dois valores para trabalharmos no sentido vertical e horizontal.</p><p>Porém, agora precisaremos espaçar apenas dois lados, e não no sentido vertical e horizontal, e para isso poderemos inserir quatro valores para o padding:, o qual possui uma ordem específica.</p><p>Analisando a documentação do padding: aqui, encontraremos a parte "Se a propriedade padding tiver quatro valores:", que é justamente o que queremos.</p><p>O primeiro diz respeito à parte superior do conteúdo.</p><p>Então, no padding: de .cabecalho, colocaremos o valor 2% em porcentagem que é melhor, pois se fixarmos em pixels, pode ser que sofra distorções na tela dependendo do dispositivo que acessará a aplicação.</p><p>Feito isso, notaremos que a porcentagem foi aplicada a todos os quatro lados do conteúdo, pois só colocamos um valor apenas.</p><p>De volta à documentação, o espaçamento do lado direito será o segundo valor, que neste caso será 0%. Já o terceiro valor diz respeito ao espaçamento inferior que também será 0%. Por fim, o quarto valor do preenchimento do lado esquerdo terá 10%.</p><p>Com isso, repararemos que o espaçamento já está bem diferente de antes.</p><p>Mas ainda não está na mesma linha.</p><p>Isso aconteceu porque colocamos um padding: horizontal de 15% como segundo valor no main de .apresentacao do style.css.</p><p>Então, para ficar mais parecido com o Figma, colocaremos o valor de 15% ao invés de 10% no padding: do .cabecalho.</p><p>Feito isso, o texto já ficará alinhado. Agora, precisaremos afastar um pouco os conteúdos das duas tags âncoras.</p><p>No arquivo index.html, iremos para a <nav> e usaremos o FlexBox, lembrando que sempre jogaremos o display: flex no elemento container, no elemento-pai.</p><p>Copiaremos a classe "cabecalho__menu" e colaremos após o .cabecalho em style.css. Dentro, criaremos a propriedade display: flex para inicializarmos o FlexBox.</p><p>Vamos ver qual é essa distância de gap: no Figma.</p><p>Descobriremos que é de 80px.</p><p>Feito isso, teremos o espaçamento entre os textos "Home" e "Sobre mim" que queríamos.</p><p>Então terminamos nosso cabeçalho, porém ainda não está funcional, ou seja, quando clicamos em algum dos dois links, não nos direcionamos para as respectivas páginas.</p><p>Ainda tem um detalhe, pois seria interessante subir o bloco de texto que inicia com "Eleve seu negócio digital...".</p><p>Podemos subir para que fique mais próximo do cabeçalho.</p><p>De volta ao padding: de .apresentacao em style.css, substituiremos o valor 8% por 5%.</p><p>Navegando entre páginas</p><p>Criaremos uma nova página para deixarmos o menu do cabeçalho funcional, em que poderemos clicar para nos redirecionarmos para outras páginas.</p><p>Abriremos o VSCode e veremos que, na aba lateral esquerda de "Explorer", teremos a arquitetura das pastas do portfólio em que</p><p>"assets" contém todas as imagens. Ainda teremos os dois arquivos: index.html e styles.css.</p><p>Como criaremos uma nova página, da forma como nosso código está organizado, pode ser que sua manutenção e edição fiquem mais complicadas conforme cresce o número de telas do projeto.</p><p>Clicando com o botão direito do mouse sobre a aba "Explorer", escolheremos "New Folder..." ou "Nova pasta..." e nomearemos como "styles" porque é o padrão.</p><p>Em seguida, deslocaremos o arquivo styles.css para dentro da nova pasta. A partir de agora, qualquer documento .css que criarmos deverá ficar nela.</p><p>Depois, abriremos a página no navegador e não teremos mais a estilização dos elementos que aplicamos.</p><p>Isso aconteceu porque alteramos o lugar do documento de estilos, fazendo com que o index.html não o encontrasse mais através do href igual a "styles.css".</p><p>Então precisaremos alterar o endereço que estamos usando, e bastará substituirmos por "./styles/styles.css" para indicarmos o caminho de dentro da pasta "styles".</p><p>Desta forma, a estilização voltará a ser aplicada na página no navegador.</p><p>Todos os arquivos relacionados aos estilos dos elementos serão criados na pasta "styles", todas as imagens estarão em "assets" e todos os arquivos .html ficarão fora na raiz da aplicação.</p><p>Clicando com o botão direito na área da aba lateral de pastas, e escolheremos "New File..." ou "Novo Arquivo...".</p><p>Geralmente, a página de "Sobre mim" é nomeada como about.html, que é "sobre" em inglês.</p><p>Neste novo arquivo, usaremos o atalho "ponto de exclamação + Enter" para escrevermos a estrutura básica do HTML automaticamente, que é bastante comum, mas precisaremos alterar alguns detalhes.</p><p>Também apertaremos as teclas "Alt + Z" para quebrarmos a linha e conseguirmos exibir todo o texto sem cortes da tela.</p><p>Na segunda linha, mudaremos o idioma oficial de inglês para protuguês brasileiro substituindo lang igual a "en" por "pt-br", e o título da nossa aba será “Sobre mim” dentro da tag <title> do <head>. Também adicionaremos um <h1> dentro de <body> contendo o texto “Sobre mim”.</p><p>Por enquanto não trabalharemos muito nos elementos desta tela, pois queremos apenas conseguir clicar no link "Sobre mim" do cabeçalho da página principal e nos redirecionar para a nova que criamos.</p><p>Feito isso, voltaremos ao index.html onde temos o menu de navegação, e precisaremos fazer com que nos redirecione através do link "Sobre mim".</p><p>Sempre utilizamos o href para navegar até uma outra pasta, ou ainda, no caso de imagens, há o src que significa "source" ou "fonte" em português.</p><p>Para navegarmos até outra página com um link, também utilizaremos o href.</p><p>Outro ponto de atenção é que, onde temos a classe de <a>, escreveremos o href logo após seu nome e antes de fechar a navegação em >.</p><p>No caso do link "Home", sempre iremos voltar para a página inicial quando clicarmos, que é o "index.html".</p><p>Não colocaremos o ./ antes do nome do arquivo porque já estamos na mesma pasta que ele.</p><p>Faremos a mesma coisa para a segunda tag âncora, em que href será igual a "about.html". Salvaremos e voltaremos à página no navegador.</p><p>Repararemos que os dois links estão sublinhados depois que colocamos os dois hrefs.</p><p>Mas não queremos que fiquem sublinhados, então vamos retirar isso no arquivo de estilização.</p><p>Para isso, em styles.css, iremos ao seletor .cabecalho__menu__link e inseriremos a propriedade text-decoration: none ao final do bloco dentro das chaves.</p><p>Voltando à página no navegador, teremos retirados os sublinhados.</p><p>Se clicarmos em "Home", iremos apenas recarregar porque já estaremos na página principal, mas se clicarmos em "Sobre mim", iremos à nova tela que criamos.</p><p>Então já conseguimos navegar entre páginas. A seguir, iremos desenvolver o about.html.</p><p>Desenvolvendo a nova página</p><p>Nesta aula, iremos desenvolver a página "Sobre mim" que por enquanto só tem este texto no <h1> de <body> no about.html, que inclusive poderemos apagar pois não o utilizaremos mais.</p><p>Vamos lembrar da estrutura inicial mais semântica que sempre utilizamos no HTML.</p><p>Dentro de <body>, usaremos o <header>, seguido de <main> que é o conteúdo principal da página, e o <footer> depois.</p><p>Porém, se observarmos a tela de "Sobre mim" no Figma, notaremos que o cabeçalho e o rodapé são exatamente iguais aos da página inicial.</p><p>Então poderemos copiar este código de index.html com "Ctrl + C" e colar com "Ctrl + V" no about.html.</p><p>No documento da página inicial, usamos as classes "cabecalho" em <header> e "cabecalho__menu" em <nav>, e poderemos copiar este bloco para depois estilizarmos.</p><p>Dentro do <body> que acabamos de colocar em about.html, colaremos todo o bloco de <header> copiado do index.html.</p><p>Faremos a mesma coisa com o <footer> de classe "rodape" do index.html, colando-o em about.html.</p><p>Com isso, já teremos o <header> e o <footer> da página "Sobre mim" igual aos da página inicial.</p><p>Agora precisaremos completar o <main>.</p><p>Por enquanto há apenas os textos do cabeçalho sublinhados em azul porque são clicáveis, e a frase "Desenvolvido por Alura." do rodapé logo abaixo, tudo no canto superior esquerdo do fundo em branco.</p><p>Se clicarmos em "Home", nos redirecionaremos para a página inicial porque os links já estão definidos em <a>.</p><p>Ainda não temos os estilos porque não importamos o CSS.</p><p>Deveremos criar um novo arquivo style.css para essa página nova, ou manteremos o que já temos?</p><p>conseguiremos trazer este documento de estilos para a "Sobre mim", pois estamos utilizando exatamente as mesmas classes da mesma forma.</p><p>Por exemplo, se estivéssemos com um menu de cores e formatos diferentes, teríamos que utilizar outras classes ou criar mais arquivos .css.</p><p>Existem diversas possibilidades quando estamos em ambiente de desenvolvimento e criamos vários documentos para cada página para nos organizarmos, principalmente em grandes projetos.</p><p>Porém, na prática, no momento de colocarmos o projeto no ar, o ideal para a performance da nossa página ser boa, é termos o menor número de arquivos .css possível.</p><p>Então conseguiremos reutilizar nosso arquivo style.css em nosso projeto porque é bastante simples, e de fato usamos a mesma estilização.</p><p>Portanto, importaremos este documento no código da nova página.</p><p>Uma dica importante é, se formos em <title> com Sobre mim no about.html, e abaixo escrevermos apenas “link: css” para apertarmos a tecla "Enter" depois, aparecerá a linha de código <link> completa.</p><p>O problema é que temos "style.css" em href, mas havíamos criado uma pasta, então precisaremos corrigir para "./styles/style.css".</p><p>Se salvarmos e voltarmos ao navegador, encontraremos os links do cabeçalho e o texto do rodapé já com os estilos corretos.</p><p>Aparecem ainda muito juntos.</p><p>É porque ainda não temos nada no <main> do about.html, e a seguir iremos desenvolver o corpo da página.</p><p>Conteúdo da página Sobre Mim</p><p>Já temos nosso cabeçalho e nosso rodapé. Falta adicionarmos o conteúdo principal da página "Sobre mim". Podemos ver no Figma quais elementos existem dentro do nosso main:</p><p>· o título "Sobre mim";</p><p>· abaixo dele, dois parágrafos;</p><p>· à direita destes, a mesma imagem que usamos na página inicial.</p><p>Retornaremos ao VS Code e acessaremos o arquivo about.html para inserir estes elementos. Buscaremos o nosso <main> vazio e nele criaremos uma <section> para armazenar todos os elementos da página. Abaixo da <section> adicionaremos uma <img>.</p><p>Lembrando que já realizamos esse procedimento no nosso índice. A <section> será o elemento visualizado à esquerda da página, enquanto a <img> ficará à direita.</p><p>O que temos dentro dessa <section>?</p><p>Temos o <h1> com o texto "Sobre mim", e dois <p>s.</p><p>Dica: Para adicionarmos os dois parágrafos de uma vez, iremos até a linha vazia abaixo do <h1> e digitaremos o atalho p*2, seguido do "Enter".</p><p>Voltaremos ao Figma, onde copiaremos o "Lorem ipsum" dos dois parágrafos, um por vez. Voltaremos ao nosso código e colaremos esses conteúdos no interior das suas respectivas tags.</p><p>Agora precisamos da imagem. Ela possui as mesmas propriedades da imagem anterior. Podemos copiar o conteúdo do index.html e colá-lo no about.html. O código a ser copiado está disponível</p><p>abaixo.</p><p><img src=".assets/imagem.png" alt="Foto da Joana Santos programando"></p><p>Vamos ver como ficou no navegador. Abaixo do cabeçalho, temos os três textos e a imagem no canto esquerdo da página, dispostos na vertical. No topo temos o título "Sobre mim". Abaixo dele temos o primeiro parágrafo, e logo abaixo deste temos o segundo parágrafo. Por fim, abaixo dos textos, temos a imagem.</p><p>Por que as nossas configurações de CSS não estão funcionando no main?</p><p>Porque não atribuímos classes a elas. Vamos adicionar as seguintes classes:</p><p>· no <main>, a class="apresentacao";</p><p>· na <section>, a class="apresentacao__conteudo";</p><p>· no <h1>, a class="apresentacao__conteudo__titulo";</p><p>· nos dois <p>s, a class="apresentacao__conteudo__texto".</p><p>Dica 1: Podemos copiar os nomes das classes diretamente do index.html. Esse procedimento é muito comum no início da criação de páginas Web.</p><p>Dica 2: Para adicionar a mesma classe em dois locais de uma vez — como no caso dos nossos dois parágrafos —, basta clicar no primeiro local, segurar o botão "Alt" e clicar nos próximos locais em que deseja escrever. Desta forma, todos os locais selecionados serão editados simultaneamente.</p><p>Salvaremos nosso código e veremos o resultado no navegador. Abaixo do cabeçalho, agora temos o conteúdo centralizado na tela e dividido em dois blocos: o da esquerda possui o título, seguido abaixo pelos textos, enquanto o bloco da direita possui somente a imagem.</p><p>Variáveis CSS</p><p>O nosso projeto está sensacional! Conseguimos:</p><p>· navegar entre as páginas;</p><p>· acessar o "Sobre mim";</p><p>· visualizar o rodapé, o cabeçalho e todos os conteúdos da tela;</p><p>· voltar para o "Home" e</p><p>· visualizar o efeito Hover quando passamos o mouse pelos botões.</p><p>O projeto está visualmente incrível, contudo, existem alguns detalhes que podemos alterar em relação ao nosso código.</p><p>Vamos analisar as cores do nosso projeto. Temos três cores principais:</p><p>· a cor preta de fundo 000000, que é a cor principal;</p><p>· o branco F6F6F6, utilizado em vários elementos e</p><p>· o azul ciano 22D4FD, uma cor terciária que utilizamos para dar destaque.</p><p>Utilizamos essas cores diversas vezes no nosso CSS. Vamos abrir o arquivo style.css por meio do VS Code. Pressionaremos "Ctrl + F" e pesquisaremos a cor terciária, digitando "22D4FD" no campo de pesquisa. Constataremos que essa cor foi utilizada quatro vezes ao longo do projeto. Pesquisaremos em seguida a cor do fundo, digitando "000000" no campo de pesquisa. Perceberemos que ela foi utilizada duas vezes.</p><p>Ou seja, somando somente as duas cores, repetimos o nosso código seis vezes. Na prática, repetimos uma propriedade sensível oito vezes. Isso significa que, caso precisarmos alterar alguma das três cores principais do nosso projeto, teríamos que alterá-la em oito partes diferentes.</p><p>Esse processo de mudança de cor é muito comum. Muitas empresas decidem alterar as suas identidades visuais em algum ponto de sua trajetória.</p><p>Como poderemos reutilizar um único código de cor em partes diferentes da nossa aplicação?</p><p>Utilizaremos variáveis no CSS. Se você conhece alguma outra linguagem de programação, deve saber que elas são muito utilizadas. As variáveis são endereços na nossa memória reservada para armazenar um valor. Elas precisam ser nomeadas.</p><p>É possível criar, por exemplo, uma variável chamada azul-claro e armazenar nela a nossa cor, informando o valor hexadecimal #22D4FD. Com isso, podemos utilizar somente a variável ao invés de declarar o valor da cor diretamente em todas as partes do código. Além disso, poderemos alterar este valor sempre que precisarmos.</p><p>Com esse processo, podemos realizar alterações na cor do nosso projeto recorrendo a um único local, o qual enviará a alteração para todos os outros locais em que for inserido. Vamos entender as variáveis acessando a documentação.</p><p>Buscaremos no Google "variables css" (ou "variáveis no css"). No resultado da pesquisa, selecionaremos o link que nos guiará para a página do Developer Mozilla sobre variáveis do CSS, em português.</p><p>Selecionamos o Developer Mozilla pois nele temos um exemplo prático. Na seção "Uso básico", somos informados da possibilidade de criar variáveis para um escopo global ou para um escopo local. Voltaremos ao VS Code para demonstrar os dois processos.</p><p>Começaremos entendendo a variável de escopo local. Ela consiste em uma variável que poderá ser utilizada diversas vezes, mas que funcionará apenas em um bloco de código definido — como por exemplo, o body {} do nosso arquivo style.css.</p><p>Não temos nenhum caso desse em nosso código.</p><p>Não temos esse caso nem no código nem no nosso projeto. Portanto, faz mais sentido criarmos para o escopo global. Essa técnica consiste em definir as nossas variáveis dentro de um local por meio do qual possamos utilizá-las em vários blocos diferentes, seja o body, o header, ou outro qualquer.</p><p>Podemos encontrar esta técnica no segundo exemplo que nos é dado no site Developer Mozilla. A técnica consiste em utilizar a pseudoclasse root para que a variável possa ser aplicada globalmente no documento HTML. Podemos consultar o exemplo mencionado abaixo:</p><p>:root {</p><p>--main-bg-color: brown;</p><p>}</p><p>Neste exemplo declaramos uma variável dentro das chaves do root, utilizando a sintaxe --nome: valor. O brown ilustra um procedimento que já realizamos anteriormente. No lugar do nome da cor, adicionaremos o seu valor hexadecimal.</p><p>Retornando ao VS Code, ainda no interior do arquivo style.css, adicionaremos na linha 3, acima de todos os blocos de código, a pseudoclasse :root {} como se ela fosse um seletor.</p><p>Um seletor para utilizarmos ao longo de todo o nosso documento, ou seja, de forma global.</p><p>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');</p><p>:root {</p><p>}</p><p>* {</p><p>margin: 0;</p><p>padding: 0;</p><p>}</p><p>No interior de suas chaves, criaremos nomes para as três variáveis de cor:</p><p>· a cor principal se chamará --cor-primaria;</p><p>· a cor secundária se chamará --cor-secundaria e</p><p>· a cor terciária ou de destaque, chamaremos de --cor-terciaria.</p><p>Para definir a --cor-primaria, utilizaremos : #000000, seguido de ponto e vírgula. Faremos o mesmo para as outras cores, alterando o valor hexadecimal da --cor-secundaria para #F6F6F6, enquanto o valor da --cor-terciaria será #22D4FD.</p><p>:root {</p><p>--cor-primaria: #000000;</p><p>--cor-secundaria: #F6F6F6;</p><p>--cor-terciaria: #22D4FD;</p><p>}</p><p>Por enquanto, nada mudou no projeto, pois apenas declaramos essas variáveis.</p><p>Exatamente. Nós criamos um local onde definimos que temos três cores, e atribuímos um valor para cada uma delas. Nosso próximo desafio será utilizar esses elementos no nosso projeto.</p><p>Aplicando as variáveis</p><p>Declaramos todas as nossas variáveis. Precisamos utilizá-las nos trechos de código que fazem uso dessas cores. Para isso, voltaremos à nossa documentação sobre variáveis do CSS no site Developer Mozilla para consultar a seção abaixo da declaração de variáveis, onde encontraremos as instruções para utilização delas.</p><p>Temos o element {}, que poderá ser o body, a tag <h2>, o <p>, entre outros. Dentro dele, adiciona-se a propriedade background-color, a qual receberá a variável declarada anteriormente (--main-bg-color) dentro da função var().</p><p>element {</p><p>background-color: var(--main-bg-color);</p><p>}</p><p>Faremos esse procedimento, voltando ao VS Code.</p><p>Nos atentaremos ao detalhe mais importante: sempre que reutilizarmos variáveis, adicionaremos a função var() e o nome da variável entre os parênteses.</p><p>No arquivo CSS faremos as alterações a seguir.</p><p>Dica: No momento em que digitamos "var(" e pressionamos "Enter", o sistema abre uma lista com as variáveis disponíveis. Podemos selecionar cada uma por meio dessa lista.</p><p>Dentro das chaves do body {}, deletaremos os códigos hexadecimais e adicionaremos as funções abaixo:</p><p>· na propriedade background-color adicionaremos a var(--cor-primaria);</p><p>· na propriedade color adicionaremos a var(--cor-secundaria).</p><p>Dentro das chaves das classes .cabecalho__menu__link {} e .titulo-destaque {}:</p><p>· na propriedade color removeremos os hexadecimais e adicionaremos a função var(--cor-terciaria).</p><p>Dentro das chaves</p><p>da classe .apresentacao__links__link {}, por sua vez, deletaremos os hexadecimais e adicionaremos as funções abaixo:</p><p>· na propriedade border adicionaremos a var(--cor-terciaria);</p><p>· na propriedade color adicionaremos a var(--cor-secundaria);</p><p>O resultado das alterações qeu fizemos pode ser consultado abaixo.</p><p>Quando chegamos na classe .apresentacao__links__link:hover {}, percebemos que não criamos uma variável para a cor do Hover. Vamos criá-la para que seja possível modificá-la em relação à cor de fundo, caso necessário. No interior das chaves de :root {}, abaixo das outras cores, adicionaremos a variável --cor-hover, a qual receberá a cor #272727.</p><p>:root {</p><p>--cor-primaria: #000000;</p><p>--cor-secundaria: #F6F6F6;</p><p>--cor-terciaria: #22D4FD;</p><p>--cor-hover: #272727;</p><p>}</p><p>Retornaremos à classe .apresentacao__links__link:hover {} e continuaremos as nossas modificações. Dentro de suas chaves, na propriedade background-color, deletaremos o hexadecimal e adicionaremos a função var(--cor-hover).</p><p>Por fim, dentro das chaves da classe .rodape {}, deletaremos os códigos hexadecimais e adicionaremos as funções abaixo:</p><p>· na propriedade color adicionaremos a var(--cor-primaria) e</p><p>· na propriedade background-color adicionaremos a var(--cor-terciaria);</p><p>Além das variáveis de cor, vamos declarar as variáveis de fonte, pois também se tratam de dados muito repetidos ao longo do nosso código.</p><p>Voltaremos ao interior das chaves do :root {} e abaixo das variáveis existentes, criaremos mais duas: --fonte-primaria e --font-secundaria. Vamos manter um espaço entre os dois tipos de variáveis com uma linha vazia.</p><p>Na primeira variável nova, adicionaremos o valor do título:'Krona One', sans-serif, enquanto que na segunda adicionaremos o valor dos parágrafos: 'Montserrat', sans-serif.</p><p>:root {</p><p>--cor-primaria: #000000;</p><p>--cor-secundaria: #F6F6F6;</p><p>--cor-terciaria: #22D4FD;</p><p>--cor-hover: #272727;</p><p>--fonte-primaria: 'Krona One', sans-serif;</p><p>--font-secundaria: 'Montserrat', sans-serif;</p><p>}</p><p>Agora faremos a troca dos valores hexadecimais pelas novas variáveis, em todos os locais que utilizamos essas cores:</p><p>· na classe .cabecalho__menu__link {}, adicionaremos a var(--font-secundaria);</p><p>· na classe .apresentacao__conteudo__titulo {}, adicionaremos a var(--fonte-primaria);</p><p>· na classe .apresentacao__conteudo__texto {}, adicionaremos a var(--font-secundaria);</p><p>· na classe .apresentacao__links__subtitulo {}, adicionaremos a var(--fonte-primaria);</p><p>· na classe .apresentacao__links__link {}, adicionaremos a var(--font-secundaria) e por fim,</p><p>· na classe .rodape {}, adicionaremos a var(--font-secundaria).</p><p>Utilizamos essas fontes em vários lugares. Após essas alterações, se voltarmos ao projeto pelo navegador, não veremos nenhuma mudança visual. Contudo, faremos um teste que mostrará toda a diferença: mudaremos a paleta de cores do projeto.</p><p>Sim. Para isso, acessaremos a página Color Hunt, a qual disponibiliza uma seleção de paletas pré-definidas. Selecionaremos, no explorador à esquerda, a opção "Coffee", e nela encontraremos a paleta nova do nosso projeto, disponível neste link.</p><p>A nova paleta possui as seguintes cores, organizadas do tom mais escuro para o mais claro: #2C3639 (cinza escuro), #3F4E4F (cinza médio), #A27B5C (marrom) e #DCD7C9 (branco creme). Clicaremos em cima de cada faixa de cor para copiar o seu valor hexadecimal automaticamente.</p><p>Retornando ao VS Code, trocaremos todas as cores da pseudoclasse :root {} conforme abaixo:</p><p>· a --cor-primaria receberá o valor do cinza escuro: #2C3639;</p><p>· a --cor-secundaria receberá o valor do branco creme: #DCD7C9;</p><p>· a --cor-terciaria receberá o valor do marrom: #A27B5C e</p><p>· a --cor-hover receberá o valor do cinza médio: #3F4E4F.</p><p>· :root {</p><p>· --cor-primaria: #2C3639;</p><p>· --cor-secundaria: #DCD7C9;</p><p>· --cor-terciaria: #A27B5C;</p><p>· --cor-hover: #3F4E4F;</p><p>·</p><p>· --fonte-primaria: 'Krona One', sans-serif;</p><p>· --font-secundaria: 'Montserrat', sans-serif;</p><p>· }</p><p>Não conseguimos nem imaginar como ficará o projeto com essas novas cores. Vamos checar!</p><p>Este foi o resultado. Mudamos somente quatro valores e com eles alteramos as cores do projeto inteiro. A página "Sobre mim" possui o mesmo padrão nas alterações.</p><p>Podemos mudar infinitamente e facilmente essas quatro variáveis! Você pode escolher qualquer paleta que quiser para aplicar nesse projeto.</p><p>É possível modificar cores, fontes e até mesmo criar novas variáveis, caso você julgue que outro valor esteja se repetindo muito dentro do código.</p><p>Por que os ícones e os detalhes da imagem continuaram azul ciano? Porque são imagens prontas, baixadas diretamente do Figma. Caso você queira modificá-las, basta substituí-las por imagens de outra cor.</p><p>Finalizamos o teste, portanto retornaremos os valores de cor para o seu estado anterior.</p><p>:root {</p><p>--cor-primaria: #000000;</p><p>--cor-secundaria: #F6F6F6;</p><p>--cor-terciaria: #22D4FD;</p><p>--cor-hover: #272727;</p><p>--fonte-primaria: 'Krona One', sans-serif;</p><p>--font-secundaria: 'Montserrat', sans-serif;</p><p>}</p><p>Agora que finalizamos o projeto, é importante remover os comentários que havíamos feito. Nós comentamos algumas propriedades que não queríamos mais utilizar, mas agora que finalizamos, vamos limpar nosso código removendo-os. A seguir temos a lista de comentários que serão removidos do arquivo style.css:</p><p>· dentro de .apresentacao__links__link {}, removeremos o /* background-color: #22D4FD */ e</p><p>· dentro de body {}, removeremos o /* height: 100vh */.</p><p>Para saber mais: as variáveis no mundo da programação</p><p>Um armário cheio de gavetas!</p><p>Imagine que você trabalhe em uma sala de arquivos, que possui um armário muito grande e cheio de gavetas. Todos os dias, pessoas trazem seus objetos para que você guarde em uma gaveta para eles e para isso, te entregam uma etiqueta com um nome que será colado nessa gaveta que armazenará o objeto da pessoa.</p><p>Ana te entregou uma caneta e uma etiqueta com o nome: canetaDaAna, e você guardou a caneta dela em uma gaveta, onde colou a etiqueta. Ela escolheu o nome canetaDaAna, mas poderia ser qualquer outro nome e seu conteúdo poderia ser qualquer um também, como um livro, por exemplo, e não uma caneta.</p><p>Quando Ana precisar da caneta, ela irá te chamar e pedir pela canetaDaAna, e você a entregará o conteúdo da gaveta, ou seja, a caneta.</p><p>E como isso se relaciona com as variáveis?</p><p>Seu armário de gavetas no exemplo acima representa a memória do computador. Quando criamos uma variável, estamos solicitando ao computador que reserve uma “gavetinha” em sua memória para que guarde algo que precisaremos usar futuramente, e fazemos isso atribuindo um nome de variável que poderemos chamar a qualquer momento e que retornará o conteúdo que guardamos dentro dela. Esse nome pode ser um nome qualquer, no entanto sempre que solicitado ele trará como resposta aquilo que você armazenou nele.</p><p>O que são variáveis?</p><p>Variáveis são elementos que permitem que valores sejam manipulados ao longo da execução de seu código, através da definição de um nome para armazenar um valor que será usado repetidas vezes. Essa definição do nome e do conteúdo que será contido nele é o que nós chamamos de declaração.</p><p>Esse valor pode ser alterado ao longo do código, por isso o nome “váriavel”.</p><p>Observe o seguinte exemplo:</p><p>:root{</p><p>--tamanho-da-fonte: 24px;</p><p>}</p><p>Criamos no :root, ou seja, no escopo global de um código, uma variável que foi declarada com o nome --tamanho-da-fonte e seu valor foi atribuído como 24px. Toda vez que chamarmos pelo nome --tamanho-da-fonte, iremos obter como retorno o valor 24px.</p><p>Variáveis são utilizadas diariamente pelas pessoas desenvolvedoras para que consigam manipular e reutilizar valores em seu código e estão presentes nas mais diversas linguagens de programação, pois são elementos base ao criar qualquer código que tenha a mínima funcionalidade. Portanto, conforme você evoluir em seus conhecimentos no desenvolvimento é certo que irá lidar muito com variáveis.</p><p>Unidade de Medida REM</p><p>Vamos iniciar nossos estudos de HTML e CSS mergulhando mais profundamente no tema. Agora estudaremos</p><p>Unidades de medida.</p><p>Nós começamos a aprender sobre elas quando falamos sobre pixels e porcentagens, mas agora iremos realmente compreender o que é ideal para utilizar em cada situação, assim como conceitos novos.</p><p>Começando pelo primeiro ponto: nós definimos a maioria dos valores do nosso projeto utilizando a unidade de medida pixel, porém esses valores não são adaptáveis com as configurações do navegador da pessoa.</p><p>No canto direito da barra superior da janela do Chrome, após a barra de endereço, clica nos três pontos verticais. Em seguida, no menu, acessa "Configurações".</p><p>Somos direcionados para outra página, onde tem um menu de navegação na lateral esquerda. Nesse menu, vamos clicar em "Aparência". Com isso, no centro da tela aparecem algumas opções relacionadas à aparência do navegador.</p><p>Entre elas, temos a propriedade "Tamanho da fonte". Essa é uma propriedade que o navegador nos permite escolher. Ao abrirmos as opções, que ficam no canto direito dessa opção, notamos que podemos escolher entre: muito pequena, pequena, média (recomendado), grande e muito grande.</p><p>Eu vou abrir a página do nosso projeto, pressionar "Windows + ←" e, entre as opções que surgem para ocupar a metade direita da tela, vou clicar na janela de configurações.</p><p>O que eu quero fazer, é alterar as configurações de aparência do navegador e quero que o projeto acompanhe essa alteração.</p><p>Então vamos mudar o tamanho da fonte para "muito grande".</p><p>Quando eu cliquei, mudou o tamanho da fonte do menu, mas no nosso projeto nada se alterou.</p><p>Isso é muito ruim, gente, porque não estamos com nosso projeto adaptável com as configurações da pessoa.</p><p>E isso é importante para muitas pessoas. Nós achamos que não, e tendemos a deixar com uma configuração padrão, mas para muitas pessoas conseguirem enxergar e clicar, até pelo touch do celular. Portanto o tamanho da fonte é importante para acompanhar o que a pessoa quer.</p><p>Então vamos abrir a documentação, para descobrir qual unidade de medida precisamos usar para acompanhar essas configurações.</p><p>Vamos. Vou procurar no Google por "units in css".</p><p>Se puder deixar a fonte maior para conseguirmos visualizar.</p><p>Ok! Vou expandir a janela e clicar no link do W3Schools.</p><p>Ele explica sobre as medidas com valores absolutos. Vamos mudar para o português para entendermos melhor.</p><p>Podemos perceber que existem dois grandes grupos de medidas. Temos as absolutas, que é um valor que determinamos e ele não muda, como centímetros (cm), milímetros (mm) e pixels (px). Também temos as medidas relativas, que aprenderemos mais agora.</p><p>Existem diversas medidas relativas: em, ex, ch, rem, vw, vh, vmin, vmx e % (porcentagem).</p><p>Vamos testar o H1 que estamos utilizando? Qual medida vamos mudar?</p><p>Acho que seria interessante testarmos com o rem, porque ele é uma medida relativa que vai usar o root-element, que é o elemento raiz, ou seja, a página HTML. É o que a pessoa que está utilizando a página definiu no navegador.</p><p>É justamente o que queremos.</p><p>Exatamente, então vou deixar novamente a tela dividida com a janela do nosso portfólio à esquerda e nossas preferências de aparência à direita. Em seguida, vou sobrepor a janela do VS Code sobre a do código, portanto também à direita. Depois voltamos para a página com a aparência.</p><p>Nesse código, vamos alterar o H1, que tem a classe apresentacao__conteudo__titulo. Portanto vamos abrir o arquivo style.css e acessar as configurações dessa classe, que começam na linha 55.</p><p>Na linha 56 está marcado o tamanho da fonte como 36px. Nós precisamos alterar para rem.</p><p>Exatamente. E falando sobre a transformação de medidas entre si, nós usamos uma escala para mudar de pixels para rem. Nessa escala utiliza-se o valor mais recomendado pelos navegadores, que é de 16, então 16px equivale a 1rem e 32px equivale a 2rem.</p><p>E para converter os 36px, nós dividimos esse valor por 16px. Ao dividirmos 36 por 16, temos como resultado 2,25. Então 36px equivale a 2,25rem.</p><p>Parece um número quebrado, mas até o 0,25 é válido usar. Caso fosse um número muito quebrado, como 2,1752, poderíamos arredondar, mas o 2,25 é um bom valor.</p><p>Então pegamos o valor da medida em pixel e dividimos pode 16 e temos o valor em rem.</p><p>Isso! Quanto mais usarem, mais vocês irão se acostumar com essa medida. Por exemplo, para 16px vocês já usarão 1rem e para 32px, vocês usarão 2.</p><p>A janela do portifólio à esquerda e a do VS Code à direita da tela e vou alterar a linha 56 para font-size: 2.25rem;.</p><p>.apresentacao__conteudo__titulo {</p><p>font-size: 2.25rem;</p><p>font-family: var(--fonte-primaria);</p><p>}</p><p>Salvamos e nada se altera, porque não mudamos a configuração do nosso navegador. É para ele estar com a mesma medida, porque fizemos a conta.</p><p>Contudo, se abrirmos novamente a janela de aparências, à direita da tela, e alterarmos o tamanho da fonte para "Muito grande", reparamos, no nosso portifólio que está à esquerda, que o tamanho do título acompanha essa mudança.</p><p>Muito bom! Ficou a dica. Vamos mudar para o tamanho "Muito pequeno" para testarmos também.</p><p>Vamos. Quando eu mudo para "Muito pequeno" ele se altera e fica bem pequeno.</p><p>Nosso próximo desafio será configurar toda página para que ela fique com esse valor relativo.</p><p>Exato, mudar para o valor relativo em todas os elementos que queremos utilizar.</p><p>Aplicando o REM</p><p>Agora que entendemos que codando com rem nós acompanhamos a unidade de medida do navegador, vamos aplicar isso para os nossos próximos textos, porque acho isso importante.</p><p>Vou abrir o nosso arquivo styles.css, e em todos os lugares que tivermos font-size faremos o cálculo da medida de pixel para rem.</p><p>Nós podemos procurar com "Ctrl + F", que é o atalho para encontrar uma palavra rapidamente no navegador, e pesquisamos "font-size", que já encontraremos todos.</p><p>Boa ideia! Então quando procuramos, descobrimos que temos seis resultados.</p><p>O primeiro está no .cabecalho__menu__link. Nós temos 24px, e ao dividirmos por 16px temos 1.5rem.</p><p>.cabecalho__menu__link {</p><p>font-family: var(--font-secundaria);</p><p>font-size: 1.5rem;</p><p>font-weight: 600;</p><p>color: var(--cor-terciaria);</p><p>text-decoration: none;</p><p>}</p><p>Vamos salvar e vamos para o próximo, clicando na seta para baixo na barra de busca, que é o segundo ícone do lado direito. O seguinte é o título, que já tínhamos alterado. Clicando na seta para baixo novamente, temos o .apresentacao__conteudo__texto, com o valor de 24px novamente, ou seja, mudamos para 1.5rem.</p><p>.apresentacao__conteudo__texto {</p><p>font-size: 1.5rem;</p><p>font-family: var(--font-secundaria);</p><p>}</p><p>O próximo é o .apresentacao__links__subtitulo, que também tem 24px:</p><p>.apresentacao__links__subtitulo {</p><p>font-family: var(--fonte-primaria);</p><p>font-weight: 400;</p><p>font-size:1.5rem;</p><p>}</p><p>Em seguida temos o .apresentacao__links__link, que é o botão com os links. Ele também tem o font-size de 24px, então mudamos para 1.5rem. Por fim temos o rodapé, que também vamos mudar para font-size: 1.5rem;.</p><p>Feita essas alterações, podemos voltar para nossa página de portfólio no navegador e analisar como ficou, e se nossas mudanças fizeram sentido.</p><p>Isso. Então vamos fazer o teste se funcionou o que queríamos fazer. Vou deixar a página de portfólio ocupando apena a lateral esquerda e a página com as configurações de aparência na lateral direita.</p><p>Estamos usando o padrão recomendado no tamanho da fonte, que é o médio. Vamos deixar como "Muito grande", já exagerando mesmo no tamanho.</p><p>Quando mudamos percebemos que os textos da nossa página do portfólio se adaptam, então está tudo funcionando.</p><p>Vamos deixar um pouco menor, deixa apenas no "Grande". O texto já diminui. Se mudarmos para o "Médio" ele diminui mais um pouco.</p><p>E continua diminuindo quando optamos pelos tamanhos de fonte "Pequeno" e "Muito pequeno".</p><p>Para saber mais: a importância de utilizar as unidades de medidas relativas</p><p>É muito importante utilizarmos as unidades de medidas relativas nos textos e títulos ou até mesmo nos elementos do nosso site, como por exemplo, as imagens.</p><p>Essa medida ajuda as pessoas com baixa visão que precisam alterar a aparência do navegador ou aplicar mais zoom para aumentar o tamanho</p><p>dos elementos.</p><p>Lembrando que podemos diminuir o zoom da página também quando quisermos ter uma visão mais ampla dos elementos.</p><p>Descubra a super unidade de medida</p><p>Conseguimos adaptar nossos textos utilizando outra unidade de medida, mas nossa aplicação não contém só textos. Temos imagens, links e outros elementos na nossa página.</p><p>E temos que perceber em que momento precisamos alterar o tamanho da imagem e dos outros elementos. Por exemplo, pode ser que vocês estejam assistindo à aula em uma tela completamente diferente da nossa.</p><p>Nossa tela tem um tamanho específico e estamos desenvolvendo nosso projeto pensando nessa tela. Caso a sua não seja completamente igual a nossa, pode ter ficado com espaços maiores e com a imagem diferente. São esses pontos que vamos resolver a partir desse momento.</p><p>E como conseguimos visualizar essa transição dos tamanhos de pixels da tela?</p><p>Como nosso projeto fica em uma tela diferente, de outro tamanho?</p><p>Para visualizar como fica em uma tela de notebook, que é menor, por exemplo, podemos clicar na página com o botão direito, selecionar a opção "Inspecionar". Com isso, a janela de inspecionar abre na metade direita da tela.</p><p>No canto superior esquerdo da janela, o segundo botão, que é o "Alternar barra de ferramentas do dispositivo" tem o ícone de um celular sobrepondo o canto inferior direito de um retângulo. Ao clicar nele, aparece uma margem ao redor da nossa página para fazermos testes.</p><p>Nós conseguimos arrastar a margem lateral para direita ou para esquerda, aumentando ou diminuindo as dimensões da tela.</p><p>Um detalhe importante é que com o atalho "Ctrl + Shift + M" ativamos eles também. E eu tenho uma curiosidade. Vamos deixar a largura da tela menor, em 720px.</p><p>Vou escrever essa medida no primeiro campo que está na parte centro-superior da nossa página.</p><p>Feito isso, reparamos que a página abriu, mas a disposição dos elementos está estranha.</p><p>Muito. Percebemos que footer está menor, a imagem está levando tudo para direita, os botões estão encostados na imagem, ou seja, está tudo bem caótico.</p><p>Então vamos corrigir isso em etapas. Antes de modificarmos onde cada coisa ficará, existe uma forma de informarmos que queremos que esse conteúdo, a imagem e os links se adaptem?</p><p>Portanto não queremos usar unidades absolutas para esses valores, e sim unidades relativas.</p><p>Tem sim.</p><p>E qual unidade usaremos?</p><p>Na verdade, já até utilizamos em algumas partes, mas para conseguirmos trabalhar no tamanho da imagem, podemos usar a porcentagem (%). Inclusive nós vimos quando abrimos a documentação do W3Schools, sobre as unidades do CSS, que uma das unidades relativas é a porcentagem.</p><p>Vou abrir essa documentação novamente. Tento deixar em português para ficar um pouco mais claro, ele não muda, mas está informando que a porcentagem é relativa ao elemento pai.</p><p>Então ao mudarmos o tamanho da imagem para 50%, será 50% do espaço da tag pai da imagem. E quando abrimos o index.html para descobrirmos quem é a tag pai da imagem, observamos que ela é filha, assim como a <section>, da <main>.</p><p>Portanto seria o tamanho de 50% da tag main, e conseguimos usar essa unidade de medida.</p><p>Vamos então fazer isso. No lugar das unidades absolutas, usaremos as relativas.</p><p>Para a imagem, especificamente, ainda não tínhamos criado nenhuma classe, então faremos isso agora. No arquivo index.html, vamos até a linha 37 e vamos adicionar um class à tag <img> e vamos seguir o padrão de nome que estamos utilizando para classe, usando "apresentacao__imagem".</p><p><img class="apresentacao__imagem" src="./assets/imagem.png" alt="Foto da Joana Santos programando"></p><p>Também precisamos fazer isso no outro HTML que temos com o "Sobre mim", que é o about.html. Portanto também vamos colar essa classe na linha 25 desse arquivo, deixando o código de imagem idêntico nos dois arquivos.</p><p>Agora vamos copiar o nome dessa classe, abrir o style.css e vamos colar na linha acima à do .rodape, na linha 103. Em seguida abriremos chaves e vamos acrescentar a porcentagem para o tamanho.</p><p>Como estamos falando de tamanho, vamos configurar o width, certo?</p><p>Na verdade, quando mudamos o width da imagem, que é a largura, automaticamente a altura também muda, porque ela acompanha a escala da imagem que processamos, seja ela quadrada ou redonda. Então podemos usar:</p><p>.apresentacao__imagem {</p><p>width: 50%;</p><p>}</p><p>Vamos testar com metade.</p><p>Até porque estamos realmente usando metade da página.</p><p>Quando voltamos para nossa página de portfólio, já observamos que mudou, mas a experiência de navegação no celular fica diferente.</p><p>Ao arrastarmos a margem lateral para esquerda, diminuindo o tamanho da tela, percebemos que tem um texto e ao lado uma imagem minúscula.</p><p>O tamanho das outras coisas que estão muito grandes, na verdade, e não a imagem que está pequena.</p><p>Então vamos arrumar os outros elementos, porque, à medida que nossa tela muda de tamanho, o que está legal, mas a disposição do conteúdo está estranha, porque está fixa.</p><p>Exato, então temos que encontrar uma forma desse conteúdo diminuir também, à medida que diminuímos o tamanho da tela. Vamos descobrir onde alteramos isso.</p><p>Vamos procurar no index.html pelo elemento pai. Nele temos a apresentacao__conteudo que é filho do apresentacao.</p><p>Para mudar apenas o tamanho de onde estão os textos, seria na <section>. A imagem está fora da section, mas temos uma tag section dentro que contém o título, o texto e os botões.</p><p>Portanto, no style.css, vamos procurar pela .apresentacao__conteudo. Nela reparamos que temos uma width: 615px, ou seja, uma largura fixa, por isso está ficando muito grande. Conseguimos transformá-la em porcentagem.</p><p>Vamos colocar também 50% para começar.</p><p>É exatamente o que acho que deveríamos fazer, porque ela ocupa metade do <main>, enquanto a imagem ocupa a outra metade.</p><p>.apresentacao__conteudo {</p><p>width: 50%;</p><p>display: flex;</p><p>flex-direction: column;</p><p>gap: 40px;</p><p>}</p><p>Interessante! Vamos voltar para o nosso projeto e diminuir a tela para observarmos como fica. Assim reparamos que a disposição dela já vai mudando.</p><p>Antes nosso título e nosso parágrafo não quebravam para acompanhar a diminuição ou aumento da tela. Agora nós mudamos as medidas da tela e eles ocupam uma quantidade diferente de linhas para se espalharem melhor.</p><p>A única coisa que ainda está estranha, são os links, que ainda estão bem esmagados. Eu queria também aproveitar para trocar o nome de "links" para algo melhor.</p><p>Eu fiquei pensando que esse nome de classe "apresentacao__links__link" nós podemos mudar.</p><p>Podemos mudar para "apresentacao__links__navegacao".</p><p>Como tem vários "links", eu não posso selecionar a parte do "link" para mudar de uma única vez.</p><p>Tem como pressionar o "Alt" e clicar após cada "link".</p><p>Vamos fazer isso, pressionar o botão de apagar quatro vezes para apagar o "link" e escrever "navegacao" no lugar. Então nossa classe virou apresentacao__links__navegacao.</p><p>Em seguida, precisamos trocar no CSS, então na linha 83 vamos mudar para apresentacao__links__navegacao.</p><p>Isso é comum, mudarmos para um nome melhor conforme evoluímos. É complexo escolher um bom nome de primeira.</p><p>E por enquanto não fizemos nenhuma alteração no projeto, certo?</p><p>Ainda não. Agora vamos mudar a width do nosso link, que ainda está fixa e por isso fica muito grande. Vamos testar com 50% também, lembrando que as porcentagens são sempre relativas ao link pai, não estamos deduzindo do nada.</p><p>.apresentacao__links__navegacao {</p><p>display: flex;</p><p>justify-content: center;</p><p>gap: 16px;</p><p>border: 2px solid var(--cor-terciaria);</p><p>width: 50%;</p><p>text-align: center;</p><p>border-radius: 8px;</p><p>font-size: 1.5rem;</p><p>font-weight: 600;</p><p>padding: 21.5px 0;</p><p>text-decoration: none;</p><p>color: var(--cor-secundaria);</p><p>font-family: var(--font-secundaria);</p><p>}</p><p>Quando voltamos para página do nosso portfólio, reparamos que os links também acompanham o aumento e a diminuição da tela conforme mudamos as medidas. Entretanto, tem um ponto que se diminuímos demais a tela, ele quebra, ou seja, o texto fica fora do contorno do botão.</p><p>Para saber mais: Dev Tools - A melhor amiga de quem desenvolve</p><p>localizado à direita da barra de menus superior. Este ícone aponta as issues da página. Após a seleção, será aberta uma aba secundária denominada "Issues", na parte inferior da aba "Inspecionar", a qual exibirá a seguinte mensagem:</p><p>Page layout may be unexpected due to Quirks Mode</p><p>Podemos traduzi-la como "O layout da página pode ser inesperado devido ao Modo Quirks". Ou seja, a página está em "modo peculiaridades". Não sabemos o que isso significa. Vamos clicar nesta mensagem para entender mais a fundo.</p><p>Abaixo da mensagem será exibida uma explicação mais detalhada do problema apontado a qual apresentaremos uma versão resumida e traduzida:</p><p>Um ou mais documentos desta página foram abertos em um modo diferente do esperado. O Modo Quirks existe por razões históricas. Caso ele tenha sido acionado de forma não intencional, adicione o <!DOCTYPE html> para renderizá-la sem o Modo Quirks.</p><p>Afinal, o que é o Modo Quirks? Vamos acessar o link disponibilizado acima, o qual nos direcionará para uma nova página. Na parte superior dela veremos o título "A página não tem o doctype HTML, acionando assim o Modo Quirks". Esta página possui várias informações e links sobre o Modo Quirk, o modo Standards, códigos-fonte, etc.</p><p>Vamos resumir o problema: antigamente existiam dois grandes navegadores, o NetScape e o Internet Explorer. Quando codávamos, precisávamos informar para qual navegador a página estava sendo construída. Hoje em dia isso não é mais necessário, a não ser que seja algo intencional — como em casos de projetos antigos.</p><p>Na página sobre Quirks Mode e Standards Mode existe a seção "Como os navegadores determinam qual modo usar?", onde há uma explicação sobre a questão da determinação de modos. Nela veremos que, para informarmos ao navegador que utilizaremos o HTML5, precisamos adicionar o <!DOCTYPE html>.</p><p>Existe um ponto que incomoda em nossa página: a necessidade de atualizá-la sempre que alteramos o código.</p><p>Vamos adicionar uma extensão ao nosso editor de código para que ocorram atualizações automáticas na nossa página a cada salvamento. Acessaremos a coluna lateral esquerda do nosso VS Code, onde selecionaremos o ícone "Extensions" ("Extensões"). Podemos acessá-lo também por meio do atalho "Ctrl + Shift + X".</p><p>Neste momento, o explorador de arquivos será substituído por um campo de busca. Nele digitaremos "live server" e faremos a busca. Nos resultados abaixo do campo, buscaremos a opção "Live Server", a qual possui milhões de downloads.</p><p>Após a seleção, essa extensão será aberta na tela principal do VS Code, onde clicaremos no botão "Install". Após o término da instalação, ela será habilitada automaticamente. Caso contrário, basta clicar no botão "Enable". Em seguida fecharemos a aba dessa extensão.</p><p>Existem extensões para milhares de tarefas, inclusive para embelezar sintaxes de linguagens específicas. Podemos explorá-las e utilizá-las sempre que quisermos.</p><p>Agora temos um botão na barra inferior do VS Code denominado "Go Live". Como o arquivo HTML selecionado, clicaremos neste botão. Uma aba de Alerta de Segurança será aberta pelo nosso sistema, na qual selecionaremos a opção "Permitir acesso". Neste momento será aberta uma aba com a nossa página HTML no nosso navegador.</p><p>Vamos manter as duas abas abertas. Veremos que ambas estão rodando de locais diferentes: a antiga está rodando no local do arquivo, enquanto a nova (com live server ativo) exibe a URL com um número constituído de 10 dígitos.</p><p>A estrutura básica do HTML</p><p>Para criar um arquivo HTML funcional devemos seguir um padrão de construção, utilizando um conjunto de elementos, ou seja, os hipertextos, que se conectam entre si formando a página. Como já visto anteriormente, os elementos HTML ou também chamados de tags HTML, são utilizados para informar ao navegador que tipo de estrutura é essa que está sendo construída, podendo ser títulos, parágrafos, imagens, links, entre outros.</p><p>Um exemplo prático dessa estrutura básica seria:</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Document</title></p><p></head></p><p><body></p><p></body></p><p></html></p><p>1) Construindo a estrutura básica do HTML</p><p>Você acabou de iniciar um estágio em uma empresa de desenvolvimento web e sua primeira tarefa é criar um documento HTML básico para um novo projeto. O objetivo é construir a estrutura fundamental de um arquivo HTML, incluindo as tags essenciais: <!DOCTYPE html>, <html>, <head>, e <body>. Além disso, dentro da tag <head>, adicione uma tag <title> com um título de sua escolha para a página. Lembre-se de seguir as práticas de indentação corretas para manter o código organizado.</p><p>· Abra um editor de código como o VS Code.</p><p>· Comece o documento com a declaração <!DOCTYPE html> para especificar que você está usando HTML5.</p><p>· Abra a tag <html> para definir o início do documento HTML.</p><p>· Adicione a tag <head>dentro da tag <html>. A tag <head> contém informações sobre o documento.</p><p>· Dentro de <head>, inclua a tag <title> e dê um título à sua página, como <title>Meu primeiro projeto</title>.</p><p>· Após <head>, adicione a tag <body>, que conterá o conteúdo visível da sua página.</p><p>· Feche as tags </body> e </html> em ordem.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Meu primeiro projeto</title></p><p></head></p><p><body></p><p><!-- Conteúdo da página vai aqui --></p><p></body></p><p></html></p><p>2) Adicionando conteúdo ao HTML</p><p>Agora que a estrutura básica do seu documento HTML está pronta, seu supervisor pediu para adicionar um cabeçalho e um parágrafo ao corpo do documento. Use as tags <h1> para o cabeçalho e <p> para o parágrafo. Escolha um tema para o cabeçalho e escreva um breve parágrafo relacionado a esse tema.</p><p>· No editor de código, localize a tag <body> no seu documento HTML.</p><p>· Adicione a tag <h1>com um texto de cabeçalho relevante, como <h1>Boas-vindas ao meu site</h1>.</p><p>· Abaixo da tag <h1>, adicione a tag <p>e escreva um parágrafo, como <p>Este é um exemplo de um parágrafo em HTML.</p>.</p><p>· Salve as alterações e visualize o arquivo em um navegador para ver o cabeçalho e o parágrafo exibidos.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Meu primeiro projeto</title></p><p></head></p><p><body></p><p><h1>Boas-vindas ao meu site</h1></p><p><p>Este é um exemplo de um parágrafo em HTML.</p></p><p></body></p><p></html></p><p>3) Trabalhando com meta tags e título</p><p>Você precisa otimizar a seção <head> da página HTML existente. Adicione uma meta tag para definir a codificação de caracteres como UTF-8 e altere o título da página para algo mais descritivo e apropriado para o conteúdo do site.</p><p>· Abra o documento HTML no editor de código.</p><p>· Na seção <head>, adicione a meta tag <meta charset="UTF-8">. Isso define a codificação de caracteres para UTF-8, o que é essencial para exibir caracteres especiais corretamente.</p><p>· Altere o conteúdo da tag <title> para algo que descreva melhor o site, como <title>Aventuras em HTML</title>.</p><p>· Salve o documento e abra-o em um navegador para verificar as mudanças.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><meta charset="UTF-8"></p><p><title>Aventuras em HTML</title></p><p></head></p><p><body></p><p><h1>Boas-vindas ao meu site</h1></p><p><p>Este é um exemplo de um parágrafo em HTML.</p></p><p></body></p><p></html></p><p>4) Organizando conteúdo com tags HTML</p><p>Você está desenvolvendo a página inicial de um site para um projeto pessoal. Você precisa criar um título principal e um subtítulo, seguidos por um breve parágrafo explicativo. Utilize HTML para estruturar esses elementos. Crie um arquivo HTML e adicione um título principal com a tag <h1>, um subtítulo com a tag <h2>, e um parágrafo com a tag <p>. Use textos de sua escolha para cada um destes. Lembre-se de seguir a hierarquia correta das tags e verificar o resultado no navegador.</p><p>· Crie um arquivo HTML.</p><p>· Adicione a estrutura básica do HTML (<!DOCTYPE html>, <html>, <head>, e <body>).</p><p>· Dentro da tag <body>, adicione a tag <h1> para o título principal.</p><p>A ferramenta de desenvolvimento (Dev Tool) ajuda muito no processo de criação e desenvolvimento de projetos web. Além de inspecionar os nossos códigos HTML e CSS, podemos fazer algumas alterações temporárias e ela nos mostra uma prévia de outros tamanhos de telas e dispositivos como tablets e celulares e isso ajuda muito na hora de criarmos a versão mobile e toda a parte responsiva.</p><p>Para abrir o Dev Tools, quando estiver com o navegador aberto aperte as teclas CTRL + SHIFT + C no Chrome do Windows,ou COMMAND + OPTION + C no MAC ou você pode clicar com o botão direito do mouse na tela do navegador e clicar em inspecionar na lista suspensa ou inspect caso esteja em inglês. Veja:</p><p>Com o Dev Tools aberto você pode:</p><p>· Escolher o tipo de dispositivo (celular, tablet etc);</p><p>· Inspecionar os elementos HTML;</p><p>· Alterar o tamanho da tela;</p><p>· Alterar os estilos CSS da página temporariamente;</p><p>· Apertar as teclas CTRL + SHIFT + M para abrir a visualização responsiva.</p><p>Figma Mobile</p><p>Assim como no curso anterior que recebemos um Figma com uma nova página, porque nosso projeto está crescendo, temos um novo desafio, certo, que é tornar nossa página...</p><p>Responsiva.</p><p>Responsividade significa termos no nosso projeto a capacidade da tela se adaptar dependendo do dispositivo que estivermos acessando. Então a página fica boa em um desktop, no notebook e até no celular.</p><p>A ideia no celular, na verdade, não é só deixar tudo esmagado.</p><p>Nós até estávamos fazendo isso e mesmo assim o design não estava bom.</p><p>A ideia no celular é que os elementos mudem de posição, deixando a imagem mais em cima, dispor os elementos em coluna e coisas do tipo. Pensando nisso, o que acontece no mundo real é que a pessoa que trabalha com o Figma e com design pensa nisso, e nós, devs do Front-end, implementamos o que foi pensado.</p><p>Usaremos o mesmo Figma que estávamos utilizando para fazer o footer e a segunda página com o "Sobre mim". Na parte superior da coluna da esquerda, existem duas páginas: a web, que utilizamos para desenvolver o projeto até agora, e a página mobile. Na página mobile é onde temos o design para dispositivos móveis.</p><p>Percebemos que o conteúdo é igual: os textos, os links e a imagem, mas a posição deles está diferente.</p><p>Eu falo tudo igual, mas a imagem talvez seja diferente, em outro tamanho, para a experiência da pessoa que vai navegar pelo celular fique melhor. Então temos um desafio, Rafa: implementar esse design de alguma forma.</p><p>Imagino que usaremos bastante o CSS, apesar de não saber ainda o código, mas imagino que teremos que informar que, ao estarmos em uma tela com determinado tamanho, a disposição dos elementos precisa mudar.</p><p>Media Queries</p><p>Um ponto muito interessante agora, Rafa, é tentarmos identificar em que momento nossa aplicação começa a ter o comportamento que não estamos esperando, com elementos muito próximos uns dos outros.</p><p>Vou clicar com botão direito na nossa página do portifólio, abrir a aba do "Inspecionar" e clicar no nosso atalho para ajuste de tela.</p><p>Lembrete: Também é possível usar o atalho "Ctrl + Shift + M"</p><p>Agora vamos diminuir a tela aos poucos e observar o que acontece. O que você percebeu?</p><p>Eu senti que a imagem está colada ao texto, isso te incomodou?</p><p>Bastante, porque dá a sensação de que a tela vai diminuindo e vai meio que amassando todo o conteúdo. O que podemos fazer é adicionar um gap entre os elementos da section e a imagem.</p><p>Vamos voltar no nosso código HTML, porque acho interessante mostrarmos isso.</p><p>A partir da linha 17 do arquivo index.html, temos o main, que é a classe apresentacao, com o conteúdo. Dentro dessa classe temos a apresentacao__conteudo, que tem todo o texto, e a apresentacao__imagem.</p><p>O que faremos é que, por mais que esteja diminuindo, sempre iremos garantir um espaço entre os dois.</p><p>E esse espaço será o gap, que já conhecemos no flex box. Precisamos adicioná-lo à classe apresentacao para gerarmos esse espaço entre os filhos.</p><p>Então vamos no arquivo style.css e na linha 46, dentro da .apresentacao{}, vamos codar o gap. E o valor está no projeto web do nosso Figma, que tem a indicação do espaço que fica bom. No caso, o valor de 82px;</p><p>.apresentacao {</p><p>padding: 5% 15%;</p><p>display: flex;</p><p>align-items: center;</p><p>justify-content: space-between;</p><p>gap: 82px;</p><p>Agora quando voltamos para nossa página e mudamos o tamanho da tela, reparamos que o espaço entre o texto e a imagem se mantém.</p><p>Diminui mais, vamos reparar em que momento nos sentimos incomodados. Quando chega por volta de 1300px de largura da tela, começa a ficar estranho.</p><p>A parte do texto na coluna está legal, mas a imagem fica isolada sozinha no lado direito. O que podemos fazer é falar que quando a largura da tela for menor que, vou propor um valor, 1023px ou algo assim, vamos deixar a imagem na mesma coluna.</p><p>Vamos! Porque assim já fica pronto conforme o design mobile do Figma, que leva a imagem para cima. E para isso podemos utilizar o media no CSS, então vamos abrir a documentação para descobrir como ele funciona.</p><p>Então de alguma forma existe uma propriedade do CSS, que são as Media Queries que garante que se a tela tiver um tamanho máximo ou mínimo terá a aplicação do estilo que determinarmos. É isso que faremos.</p><p>Portanto vamos abrir a documentação do Developer Mozila, que é o segundo link que aparece quando pesquisamos "css @media". Nela já temos a sintaxe de como usamos o media queries.</p><p>E é isso que queremos. Na documentação temos um exemplo de max-width, ou seja, o tamanho máximo:</p><p><!-- CSS media query dentro de um stylesheet --></p><p>@media (max-width: 600px)</p><p>{</p><p>.facet_sidebar</p><p>{</p><p>display: none;</p><p>}</p><p>}</p><p>Se o tamanho máximo for 600px, que deve ter feito sentido para esse projeto, ele abriu chaves ({) e começou a adicionou a classe.</p><p>Exatamente, o .facet_sidebar seria como o nosso .apresentacao.</p><p>Depois ele começou a manipular elementos como sempre fazemos, e é isso que queremos. Por exemplo, informamos que se for até determinado valor, aplicaremos um tipo diferente de estilos, com a apresentação, tamanho da fonte e padding diferentes.</p><p>Podemos mudar até a cor, então podemos informar que se for para Mobile queremos outra cor de fundo.</p><p>Sim, nós somos livres! No caso, não queremos mudar a cor para mobile.</p><p>Não, ainda não!</p><p>Então vamos adicionar essa propriedade ao nosso código.</p><p>Certo, vou abrir o styles.css e codar na última linha, que é a 118, e declarar qual será nossa condição, ou seja, a largura máxima de tela para começarmos a utilizar os estilos que iremos definir:</p><p>@media (max-width: )</p><p>Só um detalhe, Rafa. Nós escrevemos como @media porque o CSS já tem isso naturalmente, e abrimos e fechamos parênteses (()), diferente de antes, que usávamos chaves.</p><p>É porque esses parênteses representam uma condição, nós verificamos se o que tem dentro deles é verdadeiro. Então se escrevermos um max-width: 1000px, se a tela tiver uma largura menor que isso, será aplicado o que está dentro das chaves.</p><p>Então os parênteses indicam que se tiver essa condição, aplica-se o que determinamos, senão, se a largura for maior, aplica-se os outros estilos que declaramos anteriormente.</p><p>Vamos descobrir diminuindo o tamanho da tela no navegador.</p><p>Por volta do 1020px começa a quebrar, certo?</p><p>Acho que antes, podemos deixar em 1200px.</p><p>Então se for até o tamanho de 1200px usaremos os estilos que definiremos entre chaves.</p><p>Vamos abrir e fechar chaves ({}) e tudo que colocarmos dentro delas, sejam as classes ou o h1 só vai mudar quando essa função for verdadeira.</p><p>Pensando no nosso Figma, conseguimos deixar a imagem em cima e depois alinhar os demais elementos?</p><p>Sim! Vamos conferir nossa classe .apresentacao no arquivo do CSS, onde estamos aplicando o flex box e estamos deixando os elementos alinhados. Temos o display: flex com o flex-direction automaticamente configurado para row (linha).</p><p>Então quando voltamos na página do nosso projeto do navegador os elementos estão dispostos em linha, mas queremos transformar em coluna, portanto no @media vamos configurar o flex-direction: column;.</p><p>@media (max-width: 1200px) {</p><p>.apresentacao {</p><p>flex-direction: column;</p><p>}</p><p>}</p><p>Ao fazemos isso e voltarmos para página, reparamos que já mudou, mas a imagem ficou embaixo, enquanto no Figma a imagem está em cima.</p><p>Precisamos lembrar que nosso código HTML tem a imagem depois do texto. Temos a section com o título, o parágrafo e os links e após eles que vem a imagem.</p><p>Nós precisaríamos inverter.</p><p>Isso, e o flex box tem esse valor. Ele tem o flex-direction como row (linha) e column (coluna), mas também o row-reverse (linha reversa) e column-reverse (coluna reversa), trocando a ordem dos elementos.</p><p>@media (max-width: 1200px) {</p><p>.apresentacao {</p><p>flex-direction: column-reverse;</p><p>}</p><p>}</p><p>Quando salvarmos esse código e voltamos para página do navegador, reparamos que a ordem da imagem foi invertida e agora ela está em cima.</p><p>Não está exatamente igual ao Figma, precisamos manipular outros elementos, mas já ficou com uma aparência melhor.</p><p>Cabeçalho responsivo</p><p>Agora já conseguimos modificar um pouco nosso estilo da página a partir do momento em que a tela fica menor, ou seja, para celulares e dispositivos com uma tela menor do que a que estamos usando. Nós conseguimos observar isso quando mudamos a largura da tela com a função disponível no inspecionar ou com o atalho "Ctrl + Shift + M".</p><p>Ao mudarmos a tela para 1200px de largura, ela muda para um design diferente. Agora vamos melhorar ainda mais esse design nos baseando no Figma que nós temos.</p><p>Uma coisa que está estranha quando eu olho, é o "Home" e o "Sobre mim" que estão na parte superior da tela. No Figma os dois estão bonitos e centralizados no mobile. Vamos fazer isso?</p><p>Vamos. Esses dois textos, no nosso index.html, nós chamamos pela classe cabecalho, que é o <header>. Então vamos abrir o style.css.</p><p>Na linha 24, nosso .cabecalho tem apenas um padding, quando nossa tela está maior. Esse padding é de 2% e o padding lateral é de 15%. Não tinha padding nem no lado direito, nem abaixo.</p><p>.cabecalho {</p><p>padding: 2% 0% 0% 15%;</p><p>}</p><p>Nesse caso, podemos começar trocando esse espaçamento, então quando estivermos em dispositivos menores, teremos um padding diferente desse. Notamos que esse deixa nosso header muito para esquerda e um dos paddings acaba quebrando.</p><p>Então voltaremos para o styles.css e dentro do @media eu vou adicionar a classe .cabecalho na linha 123.</p><p>Estou com uma dúvida. O apresentação geralmente vem abaixo do cabeçalho, no @media faz sentido mantermos?</p><p>Faz sentido.</p><p>Pensando mais em reutilizar.</p><p>Então vamos alterar o padding.</p><p>Quanto você acha que podemos colocar? Eu sinto que podemos definir um padding maior no topo.</p><p>Exatamente, ele tem bem mais espaço na parte superior da tela, depois podemos centralizar os dois elementos usando o flexbox.</p><p>Vamos colocar então 6% de padding.</p><p>@media (max-width: 1200ox) {</p><p>.cabecalho {</p><p>padding: 6%;</p><p>}</p><p>.apresentacao {</p><p>flex-direction: column;</p><p>}</p><p>}</p><p>Salvamos e quando voltamos para nossa página, que está com a largura da tela menor que 1200px, reparamos que o padding já aumentou. Na lateral esquerda ele até diminuiu, mas como vamos alterar com o flexbox, não precisamos nos preocupar.</p><p>Acha que esse espaço é o suficiente?</p><p>Acho que podemos colocar mais.</p><p>Então vamos mudar para 10%. Quando observamos o projeto, vemos que ficou mais legal.</p><p>Agora conseguimos centralizar o "Home" e o "Sobre mim" usando o flexbox. Para isso vamos utilizar a classe da tag "pai" do Container. No caso, é o .cabecalho__menu, e nele usaremos o flexbox para centralizar.</p><p>Esses dois elementos precisam estar juntos e centralizados, então será o justify-content.</p><p>Uma coisa muito importante quando estamos usando o media query é sempre analisarmos o que escrevemos anteriormente, porque se quisermos usar o flexbox, precisamos usar o display: flex.</p><p>Porém no .cabecalho__menu, que codamos na linha 28, já usamos o display: flex naturalmente, portanto não precisamos reescrever essa propriedade. Automaticamente ele vai obter essa informação do resto do nosso documento. Sendo assim, podemos usar apenas o justify-content.</p><p>@media (max-width: 1200px) {</p><p>.cabecalho {</p><p>padding: 10%;</p><p>}</p><p>.cabecalho__menu {</p><p>justify-content: center;</p><p>}</p><p>.apresentacao {</p><p>flex-direction: column;</p><p>}</p><p>}</p><p>Notamos que o justify-content tem várias propriedades, como baseline, center, end e first baseline. Porém queremos o center.</p><p>Para saber mais: mais de uma Media Query</p><p>Sabia que você pode ter mais de uma media query em seu projeto? É possível definir um tamanho de tela para o celular outro para o tablet e deixar a “padrão” para o desktop.</p><p>Exemplo:</p><p>Podemos definir uma largura máxima de “480px” para o celular: @media (max-width: 480px), e em outra media query definir uma largura máxima de “800px” para os tablets: @media (max-width: 800px), e então atribuímos os ajustes necessários dentro de cada media query, dessa forma teremos nosso site 100% responsivo.</p><p>Podemos também definir intervalos para os tamanhos de telas com um único media query, atribuímos o valor mínimo e depois o valor máximo separando ele pelo atributo and, veja: @media (min-width: 480px ) and (max-width: 800px), nesse caso os estilos serão aplicados em telas de no mínimo “480px” e de no máximo “800px”.</p><p>Lembrando que a maioria dos acessos à internet hoje em dia é através dos dispositivos móveis, portanto, não se esqueça de sempre deixar os seus projetos e sites responsivos.</p><p>Para aprender mais, visite o site da Mozilla, e leia a documentação sobre media queries.</p><p>Para saber mais: o que é responsividade</p><p>Já notou que quando acessamos alguns sites eles mudam o seu layout a depender do dispositivo? Por exemplo, se você acessar o site da Alura no computador, o layout será um pouco diferente do que se você acessá-lo pelo celular.</p><p>Mas, que ferramenta é responsável por isso?</p><p>A responsividade! Quando o site adapta o tamanho de suas páginas (Layout) de acordo com o tamanho da tela do dispositivo no qual ele está sendo acessado ou quando diminuímos o tamanho da janela do navegador (essa transformação pode ser feita também quando aplicamos um zoom na página), dizemos que este site é um site responsivo.</p><p>A responsividade não só altera o tamanho das fontes e elementos, como suporta qualquer mudança como por exemplo: na cor de fundo, cor de texto, bordas, etc. Isso depende dos estilos aplicados dentro das medias queries no arquivo CSS.</p><p>Se você atribuir uma cor de fundo diferente no body dentro da media query, a cor só vai alterar quando a tela atingir o tamanho definido por ela.</p><p>Você pode aprender muito mais aqui na Alura sobre responsividade através desse ótimo curso sobre Layouts Responsivos.</p><p>Conteúdo responsivo</p><p>Estamos melhorando o design para telas menores cada vez mais, porém ainda há bastante trabalho pela frente.</p><p>Na tela do navegador, vai parecer que todo o nosso texto foi "espremido" ao centro.</p><p>Exatamente, todo o texto está com muitas linhas para caber no meio entre os espaços que colocamos nas laterais da tela.</p><p>Este espaçamento é a largura do comprimento.</p><p>Sim, e definimos isso em nosso CSS para telas maiores, mas para as menores, ainda precisaremos fazer alterações.</p><p>No style.css, iremos ao .apresentacao que contém tanto a parte de imagem quanto de texto do<main> de classe "apresentacao" no arquivo index.html, em que adicionamos um padding: de 5% e 15%.</p><p>Lembrando que, sempre que tivermos dois valores nessa propriedade, o primeiro dirá respeito respectivamente ao espaço superior e inferior, enquanto o segundo definirá os espaços laterais.</p><p>Em nosso caso, o valor de 15% é muito grande, então diminuiremos para telas menores.</p><p>Colocaremos um padding: de 5% abaixo do flex-direction: de .apresentacao dentro @media da largura máxima de 1200px.</p><p>Fazendo isso, teremos o mesmo espaço para todos os lados. Vamos salvar e avaliar o resultado no navegador.</p><p>//código omitido</p><p>@media (max-width: 1200px) {</p><p>.cabecalho {</p><p>padding: 10%;</p><p>}</p><p>.cabecalho__menu {</p><p>justify-content: center;</p><p>}</p><p>.apresentacao {</p><p>flex-direction: column-reverse;</p><p>padding: 5%;</p><p>}</p><p>}</p><p>Melhorou, mas o espaçamento diminuiu pouco.</p><p>Para entendermos</p><p>o que aconteceu, abriremos o Inspecionador de Elementos no navegador e clicaremos no primeiro ícone que aparece no topo desta aba.</p><p>Conseguiremos ver o padding: de 5%, mas o conteúdo em si ainda está muito grande mesmo tendo apenas os textos dos parágrafos e os botões.</p><p>Adicionamos algo a mais, então abriremos o style.css e iremos para a .apresentacao__conteudo em que definimos a largura width: de 50%.</p><p>Quando temos telas grandes, queremos que a largura ocupe bastante o espaço do elemento-pai, ou seja, metade dele com 50%.</p><p>Porém, nos dispositivos menores, queremos que a largura acompanhe o padding: que definimos no .apresentacao acima, lembrando que a classe "apresentacao__conteudo" no index.html tem apenas o título, o parágrafo e os links.</p><p>Então precisaremos alterar a largura de 50%. Portanto, ao final do arquivo style.css, adicionaremos .apresentacao__conteudo dentro do @media de 1200px.</p><p>Dentro das chaves, colocaremos o width: com 0.</p><p>Se estamos usando só a metade da tela e o espaçamento ainda não está bom, iremos "zerar" a largura.</p><p>Sim, e com isso não teremos uma largura fixa, mas vamos salvar e testar para termos certeza.</p><p>//código omitido</p><p>@media (max-width: 1200px) {</p><p>//código omitido</p><p>.apresentacao {</p><p>flex-direction: column-reverse;</p><p>padding: 5%;</p><p>}</p><p>.apresentacao__conteudo {</p><p>width: 0;</p><p>}</p><p>}</p><p>A tela ficou pior do que estava antes e os textos ficaram mais apertados e com mais linhas ainda.</p><p>Isso aconteceu porque a propriedade width: precisa existir, e estamos apenas dizendo que nosso seletor .apresentacao__conteudo não terá largura nenhuma quando damos o valor 0, mas possui um conteúdo e irão ultrapassar os limites.</p><p>Portanto, não poderemos simplesmente "zerar" deste jeito, então teremos que dar um valor que siga o comportamento do elemento-pai, como pegar todo o espaço disponível.</p><p>Existe uma maneira que delimita a área a ser ocupada e o padding:.</p><p>Sim, é o valor auto de "automático". Vamos aplicá-lo e salvar o código para avaliarmos o resultado.</p><p>//código omitido</p><p>@media (max-width: 1200px) {</p><p>//código omitido</p><p>.apresentacao {</p><p>flex-direction: column-reverse;</p><p>padding: 5%;</p><p>}</p><p>.apresentacao__conteudo {</p><p>width: auto;</p><p>}</p><p>}</p><p>Quando fizermos isso, o conteúdo irá se adequar à área da tela conforme queríamos e o padding: de 5% estará funcionando.</p><p>image2.png</p><p>image3.png</p><p>image4.png</p><p>image5.png</p><p>image6.png</p><p>image7.png</p><p>image8.png</p><p>image9.png</p><p>image10.png</p><p>image11.png</p><p>image12.png</p><p>image13.png</p><p>image14.png</p><p>image15.png</p><p>image16.png</p><p>image17.png</p><p>image18.png</p><p>image19.png</p><p>image20.png</p><p>image1.png</p><p>Exemplo: <h1>Meu projeto pessoal</h1>.</p><p>· Adicione a tag <h2> para o subtítulo. Exemplo: <h2>Uma breve introdução</h2>.</p><p>· Adicione a tag <p> para um parágrafo explicativo. Exemplo: <p>Este é um projeto que visa... </p>.</p><p>· Salve o arquivo e abra-o no navegador para visualizar o resultado.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Meu projeto</title></p><p></head></p><p><body></p><p><h1>Meu projeto pessoal</h1></p><p><h2>Uma breve introdução</h2></p><p><p>Este é um projeto que visa...</p></p><p></body></p><p></html></p><p>5) Adicionando imagens com acessibilidade</p><p>Neste desafio, você vai adicionar uma imagem ao seu projeto de site pessoal. Escolha uma imagem de sua preferência (pode ser um logo ou uma foto relacionada ao tema do site). Utilize a tag <img> para inserir a imagem no corpo do documento HTML, e não se esqueça de incluir o atributo alt para descrever a imagem, melhorando a acessibilidade do site. Verifique o resultado no navegador.</p><p>· Escolha uma imagem e salve-a na mesma pasta do seu arquivo HTML.</p><p>· No seu arquivo HTML, abaixo do parágrafo, adicione a tag <img>. Use o atributo src para especificar o caminho da imagem. Exemplo: <img src="imagem.jpg">.</p><p>· Adicione o atributo alt para descrever a imagem. Exemplo: <img src="imagem.jpg" alt="Descrição da imagem">.</p><p>· Salve o arquivo e abra-o no navegador para visualizar a imagem inserida.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Meu projeto</title></p><p></head></p><p><body></p><p><h1>Meu projeto pessoal</h1></p><p><h2>Uma breve introdução</h2></p><p><p>Este é um projeto que visa...</p></p><p><img src="imagem.jpg" alt="Descrição da imagem"></p><p></body></p><p></html></p><p>6) Listando Itens em HTML</p><p>Agora, adicione uma lista de itens ao seu site. Esta lista pode ser de características do projeto, etapas de desenvolvimento, ou qualquer outra informação relevante. Utilize a tag <ul> para uma lista não ordenada ou <ol> para uma lista ordenada, e <li>para cada item da lista. Verifique o layout no navegador após a inserção.</p><p>· Decida se a lista será ordenada (<ol>) ou não ordenada (<ul>).</p><p>· Após o último elemento inserido no corpo do documento, adicione a tag escolhida (<ul> ou <ol>).</p><p>· Dentro desta tag, adicione várias tags <li>, cada uma contendo um item da lista. Exemplo: <li>Item 1</li>.</p><p>· Salve e abra o arquivo no navegador para visualizar a lista.</p><p>Veja como ficou:</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><title>Meu projeto</title></p><p></head></p><p><body></p><p><h1>Meu projeto pessoal</h1></p><p><h2>Uma breve introdução</h2></p><p><p>Este é um projeto que visa...</p></p><p><img src="imagem.jpg" alt="Descrição da imagem"></p><p><ul></p><p><li>Característica 1</li></p><p><li>Característica 2</li></p><p><li>Característica 3</li></p><p></ul></p><p></body></p><p></html></p><p>7) Explorando o impacto do DOCTYPE no HTML</p><p>A sua tarefa é explorar o impacto da declaração <!DOCTYPE html> em um documento HTML. Crie um arquivo HTML básico com a estrutura apresentada no relato, incluindo elementos como <head>, <title>, <body>, <h1>, <p>, e <img>. Primeiro, visualize a página com a declaração <!DOCTYPE html>. Em seguida, remova a declaração e visualize novamente. Use a ferramenta de inspeção do navegador para explorar as diferenças no modo de renderização da página, focando na presença ou ausência do "Modo Quirks".</p><p>· Crie um arquivo HTML e adicione a estrutura básica com a declaração <!DOCTYPE html>.</p><p>· Visualize a página no navegador e observe sua aparência.</p><p>· Remova a declaração <!DOCTYPE html> e visualize a página novamente.</p><p>· Abra a ferramenta de inspeção do navegador e verifique se o "Modo Quirks" foi ativado, observando as diferenças de renderização.</p><p>· Adicione novamente a declaração <!DOCTYPE html> e note as mudanças no modo de renderização da página ao atualizar.</p><p>·</p><p>8) Automatizando a atualização da página com Live Server</p><p>Instale e utilize a extensão "Live Server" no Visual Studio Code para automatizar a atualização da sua página HTML. Faça alterações no código HTML, como adicionar um texto ao parágrafo, e observe as mudanças sendo refletidas automaticamente no navegador.</p><p>· Abra o VS Code e acesse a seção "Extensions".</p><p>· Pesquise por "Live Server" e instale a extensão.</p><p>· Abra seu arquivo HTML e clique em "Go Live" na barra inferior do VS Code.</p><p>· Faça uma alteração no código, como adicionar uma palavra ao parágrafo.</p><p>· Observe a atualização automática na página do navegador, sem a necessidade de recarregar manualmente.</p><p>Projeto no Figma</p><p>Geralmente, o mercado e o cotidiano de quem trabalha com desenvolvimento é dividido em dois tipos de profissionais: Há a pessoa que faz o desenho da página e indica onde estarão as imagens, ícones, cores e tamanhos, e que passa para a segunda pessoa que irá codificar o design com HTML, CSS, React, JavaScript e etc.</p><p>A pessoa que desenha a página "do zero" faz toda uma pesquisa sobre ideias e direções para construir o design, estudando os porquês de cada elemento possuir uma cor e um formato com base na importante experiência do usuário ou UX/UI.</p><p>Na prática, existem várias ferramentas que essas pessoas utilizam para construir páginas e que servem como base para profissionais de desenvolvimento.</p><p>Uma das mais utilizadas é o Figma, justamente o que estamos usando para desenvolver.</p><p>Tags semânticas</p><p>Vamos abrir o arquivo index.html no VSCode. Sempre que criarmos uma página HTML, devemos escrever <!DOCTYPE html>, <html>, <head>, <body> e fechá-los?</p><p>Existem alguns atalhos que nos permitem iniciar um documento .html com essa estrutura básica.</p><p>Digitaremos apenas um ponto de exclamação! na primeira linha do documento e exibiremos uma janela de título "Emmet Abbreviation" contendo todo um código. Quando simplesmente apertarmos a tecla "Enter", toda a estrutura básica do HTML aparecerá.</p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Document</title></p><p></head></p><p><body></p><p></body></p><p></html></p><p>Fazendo uma primeira leitura, ao posicionarmos o cursor sobre lang="en", exibiremos uma caixa de diálogo com um texto explicando que este trecho define a língua oficial do elemento que estamos trabalhando, que neste caso está em inglês.</p><p>Utilizaremos em português e escreveremos o conteúdo usando os acentos específicos que não são usados com "en", então substituiremos por "pt-br" para especificar que é do Brasil.</p><p>Na quarta linha, encontraremos a primeira tag <meta> seguido de charset="UTF-8".</p><p>O UTF-8 é a codificação dos caracteres mais usada no mundo, pois consegue trazer todos os acentos que comentamos, além de interpretar corretamente as outras línguas.</p><p>É Unicode, como se fosse um grande dicionário de caracteres que usaremos na aplicação.</p><p>Se não utilizarmos o UTF-8, pode ser que não consigamos exibir acentos como ~ ou circunflexo ^ corretamente em alguns navegadores.</p><p>E na quinta linha com a segunda <meta> que tem http-equiv="X-UA-Compatible" e content="IE=edge", é algo para o Microsoft Edge?</p><p>Exato, esta é uma configuração para sempre utilizarmos sua versão mais recente neste navegador especificamente.</p><p>Caso estejamos rodando o código no Edge, é importante que coloquemos esta informação <meta>, além de que a pessoa usuária final que vai usar nossa aplicação pode estar rodando nele também, principalmente se forem versões anteriores.</p><p>Já na sétima linha, temos o <title> que já conhecemos, contendo Document. Na sexta linha com o terceiro <meta> que tem name="viewport" e o content.</p><p>Aparentemente, o conteúdo de content parece dizer respeito à largura e ao tamanho da imagem.</p><p>Exato, o nome "viewport" é o próprio dispositivo que acessará nossa página, e obtém sua largura com width=device-width para depois gerar a escala da página com initial-scale, que sempre iniciará com 1.0 com base na tela, seja de celular, Ipad, computador, entre outras.</p><p>Com isso, não teremos o problema de elementos ficarem posicionados de forma errada e nem da fonte ter um tamanho desproporcional.</p><p>É interessante analisarmos o Figma e separar nossas tarefas em partes, como pelo cabeçalho da página no topo, ou o rodapé na base, e há também o conteúdo principal no centro da tela, como no nosso caso.</p><p>No HTML, utilizamos algumas tags de maneira semântica para separarmos de fato os elementos da página conforme as estruturas que temos. A que seguiremos será pelo cabeçalho, conteúdo principal e o rodapé.</p><p>Primeiramente, no topo da página, teremos o menu com <header> que significa "cabeçalho", que é diferente de <head>. A inseriremos dentro de <body>, abrindo e fechando na mesma linha.</p><p>Em seguida, teremos o conteúdo principal em <main> na linha seguinte, que é a própria tradução do inglês.</p><p>Dentro desta tag, iremos colocar o título, o parágrafo, os botões e a imagem.</p><p>Na linha seguinte, teremos o <footer> relativo a "rodapé", também abrindo e fechando.</p><p><!DOCTYPE html></p><p><html lang="pt-br"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta http-equiv="X-UA-Compatible" content="IE=edge"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Portfolio</title></p><p></head></p><p><body></p><p><header></header></p><p><main></main></p><p><footer></footer></p><p></body></p><p></html></p><p>Com isso, teremos a estrutura básica do HTML, e vamos começar com o <main>.</p><p>Desenvolvendo o HTML</p><p>O primeiro passo é entender o que precisamos fazer em nossa página web e planejar o que iremos estruturar.</p><p>Observando a tela inicial do projeto no Figma, notaremos dois blocos de texto um em cima do outro, dois botões lado a lado logo abaixo de "Instagram" e "GitHub", e uma imagem à direita desses elementos.</p><p>Uma boa sugestão é começar a trabalhar com os elementos da esquerda para direita, de cima para baixo. Então começaremos pelo título, depois pelo parágrafo, seguido pelos botões, e por fim colocaremos a foto.</p><p>Abriremos uma nova linha dentro da tag <main> e começaremos com o título usando <h1>, em que "h" remete a "heading".</p><p>Outro detalhe importante é que, ainda na parte do título, o trecho "com um Front-end de qualidade!" possui uma cor diferente que o destaca do começo do texto.</p><p>Para fazer essa diferenciação, existe uma tag semântica em nosso próprio HTML que indica ao navegador que deve destacar essa parte.</p><p>Para isso, antes desta parte de destaque, aplicaremos a <strong>, que é justamente a palavra em inglês para "forte", e a fecharemos antes do fechamento da <h1>, pois a tag está dentro dela.</p><p>Visualmente, não há diferença entre os trechos, mas o navegador já sabe que a parte importante deve ser destacada.</p><p>Trabalharemos com essas questões visuais quando entrarmos na parte de estilização.</p><p>Em seguida, observando o Figma, teremos o nosso parágrafo que também copiaremos e, logo abaixo da </h1> no index.html, adicionaremos a tag <p> de "parágrafo" que já conhecemos para então colarmos o texto dentro dela.</p><p>Com isso, já teremos as duas partes de texto em nossa página, e agora vamos colocar os dois botões.</p><p>Quando clicamos em "Instagram" ou "GitHub", o esperado é que nos redirecionem para outro lugar. Mas esta questão de redirecionamento para outra página geralmente não é o comportamento de um botão.</p><p>Existe uma tag do HTML chamada <Botao> que é usada quando estamos trabalhando com formulário, por exemplo. Semanticamente, neste nosso caso, usaremos a tag âncora <a>.</p><p>Certo, então a adicionaremos após </p> e sabemos que ela abre e fecha também. Mas o que colocamos como conteúdo?</p><p>Colocaremos o link. Se voltarmos ao código, o que escrevermos dentro dela como um texto é o que será exibido na tela, ou seja, Instagram. Inseriremos outra tag <a> abaixo e adicionaremos Github.</p><p>A tag âncora é bastante semelhante à propriedade que estávamos colocando de imagem com src, que vem de source ou "fonte".</p><p>Em <a>, vamos usar um hiperlink que nos permite clicar e ir para outra página. Escrevendo href entre a e > na abertura da primeira tag, e já exibiremos uma caixa com uma descrição.</p><p>Depois do sinal de igual =, escreveremos a URL de destino entre aspas para onde vamos nos redirecionar. Neste exemplo, será https://instagram.com/rafaballerini.</p><p>Já se tornou um elemento clicável com o destaque sublinhado em azul, e quando clicamos, nos redirecionaremos para a página do Instagram que colocamos em href.</p><p>Quando clicarmos em "Github" também já clicável e sublinhado em azul, iremos para a página do GitHub do Guilherme.</p><p>Revisando o que fizemos, construímos tudo isso dentro do <main> até agora.</p><p>Na tag <strong>, pegamos o texto em destaque no Figma, mas visualmente não há diferença no navegador. Mesmo não tendo alterado nada, já indicou que é algo a ser destacado.</p><p>Também criamos o parágrafo com <p>, além dos dois links que redirecionam para o Instagram e GitHub, que não são literalmente dois botões.</p><p>Deixaremos essas duas âncoras <a> para outros sites com aparência de botão apenas, como está na tela no Figma.</p><p>Exatamente. Nosso último passo é inserir a fotografia da direita, e conseguimos fazer seu download direto do Figma, afinal não a encontraremos no Google.</p><p>Mas poderemos usar qualquer outra imagem que tivermos salvas no computador.</p><p>Para a adicionarmos no código, inseriremos a tag <img> que já conhecemos e sabemos que é única, então não precisamos abrir e fechar.</p><p>A propriedade usada para encontrar a imagem é a src que será igual a "imagem.png" entre aspas, pois já está na mesma pasta do projeto, bastando só escrever o nome do arquivo.</p><p>Além disso, usaremos outra importante propriedade chamada alt que diz respeito ao texto alternativo que descreve a imagem, como "Foto da Joana Santos programando" por exemplo.</p><p>Para saber mais: tags semânticas</p><p>Quando começamos um arquivo HTML, há uma estrutura padrão que é usada em qualquer projeto. É importante saber quais são as tags que precisam ser implementadas e entender suas funções dentro do código. Para facilitar esse processo, utilizamos as tags semânticas, que são tags descritivas sobre o conteúdo que armazenam, como é o caso das tags <header>, <main> e <footer>, que conhecemos nessa aula. Elas servem tanto para otimizar a leitura pelos navegadores, como pelas pessoas desenvolvedoras que vão fazer a manutenção do código.</p><p>Criando o CSS</p><p>Vamos criar o arquivo CSS e estilizar nossa página web.</p><p>Damos o nome de index.html para a página principal da aplicação, e para o estilo principal, geralmente nomeamos apenas como style.css, que é "estilos” em inglês.</p><p>Precisaremos sempre linkar o CSS no HTML para que seja utilizado e os estilos sejam de fato aplicados.</p><p>Abrindo o index.html, iremos às metainformações do <head> e usaremos uma tag chamada <link>, a qual também possui algumas propriedades que serão inseridas dentro para indicarmos o arquivo CSS que iremos usar.</p><p>Primeiro, escreveremos a rel que irá indicar qual a relação do documento HTML com o outro que traremos, que no caso será "stylesheet" que significa "folha de estilo".</p><p>Em seguida, colocaremos onde este arquivo está usando href igual ao nosso próprio "style.css" entre aspas. Por fim, fecharemos a tag apenas com >.</p><p>Como ficou:</p><p><link rel="stylesheet" href="style.css"></p><p>Voltando ao Figma, notaremos que há vários detalhes como cores dos elementos e fundo, posicionamentos, tamanhos e outras características, então não conseguiremos fazer tudo de uma só vez.</p><p>Uma sugestão é começarmos pela cor de fundo e pela cor do texto.</p><p>É uma boa ideia, porque começamos de algo que engloba todos os elementos até irmos especificando cada um deles.</p><p>Conforme a documentação do CSS que vimos anteriormente, conseguimos definir qual a tag que queremos alterar. Neste caso, como estamos utilizando a página inteira, conseguiremos usar a <body>, que é justamente onde inicia o corpo da página logo abaixo das metainformações.</p><p>Na primeira linha em style.css, escreveremos body e abriremos as chaves {} em seguida.</p><p>A ideia do código em "cascata" remete ao sentido de cima para baixo, e "desceremos" em cada elemento conforme avançamos.</p><p>Há uma que é relacionada a cor do plano fundo, chamada background-color: que é este mesmo termo em inglês.</p><p>Vamos mudar apenas a cor do texto. Em nosso arquivo style.css no editor de código,</p><p>usaremos a propriedade color.</p><p>Então teremos o background-color que diz respeito à cor de fundo, e apenas color: que altera a cor do texto.</p><p>Aprendemos que com o CSS podemos selecionar elementos do HTML e atribuir propriedades do CSS dentro de chaves para que esses elementos sejam estilizados.</p><p>Fizemos isso atribuindo à tag <body> uma cor de fundo preta, através da propriedade background-color e alteramos a cor do texto para branco utilizando a propriedade color.</p><p>Cores no CSS</p><p>Coolors</p><p>O Coolors possui uma interface bem clara. Com a barra de espaço do seu teclado, você consegue criar várias combinações, e uma das funções mais legais é a opção travar, que você pode usar se gostar de apenas uma cor, e assim que você clica nela, consegue continuar elaborando outras combinações levando em conta a cor que você escolheu.</p><p>Adobe Color</p><p>O Adobe color apresenta um Color Wheel (roda de cores) que pode ser ajustado de maneiras variadas para obter uma harmonia de cores, e você pode aplicar diversas regras de harmonia de cores, como o modo análogo, monocromático, tríade, complementar, quadrado, composto, entre outros.</p><p>Color Hunt</p><p>O Color Hunt dispõe de diversas paletas elaboradas. Você consegue encontrar a combinação que mais te agrada e consegue buscar por palavras-chave como pastel, vintage, neon e assim por diante. E caso não encontre nenhuma que te agrade, você consegue criar a sua própria paleta clicando nos três pontinhos do canto superior direito da página.</p><p>Color Tool - Material Design</p><p>O Color Tool é ótimo para criar, compartilhar e aplicar paletas de cores à interface do usuário, bem como é possível medir o nível de acessibilidade de qualquer combinação de cores na aba accessibility.</p><p>Destacando o texto</p><p>Olhando para o nosso design, já aplicamos os estilos de plano de fundo e decidimos a cor principal das nossas fontes.</p><p>Porém, o trecho "com um Front-End de qualidade!" em destaque no título está na cor azul.</p><p>Por isso definimos a tag <strong> em index.html para destacarmos essa parte.</p><p>No arquivo style.css, pegamos a body que queríamos, abrimos chaves e dentro colocamos as duas propriedades.</p><p>Já que strong também é uma tag, poderemos pegá-la e indicar qual a cor iremos usar nesse trecho do texto com color.</p><p>body {</p><p>background-color: #000000;</p><p>color: #F6F6F6;</p><p>}</p><p>strong {</p><p>color: #22D4FD;</p><p>}</p><p>Funcionou, mas se voltarmos ao Figma, notaremos que, durante todo o projeto, a maioria dos textos que aparecem possuem a cor branca #F6F6F6.</p><p>Já o trecho "com um Front-end de qualidade!" foi definido com <strong>. Mas se a colocarmos em outra parte do projeto, também irá alterar a cor?</p><p>Vamos testar para saber. No index.html, copiaremos a tag de destaque do trecho e a colaremos para destacar o trecho com as três tecnologias citadas no texto do parágrafo em <p>, "React, HTML e CSS". O restante ficará em branco mesmo.</p><p>Veremos que a <strong> deixou na mesma cor azul claro que havíamos definido no CSS, portanto toda vez que ela for aplicada, terá a mesma cor.</p><p>Certo, mas não é o que queremos, pois teoricamente, se nosso projeto continuar evoluindo e o código aumentando, todas as partes de texto que tiverem essa tag terão a cor que definimos.</p><p>Caso queiramos depois criar um subtítulo com outro trecho em destaque em uma cor diferente, não poderemos usar a <strong>.</p><p>Exatamente, então precisaremos de uma forma para dizer que somente uma dessas tags usará o azul claro.</p><p>Porém existe outra tag que também é muito utilizada para isso que é a tag <span>, diferente da strong a span não deixa em negrito por padrão mas é uma ótima forma de marcar trechos do texto em HTML.</p><p><h1>Formação de <span>Front-end</span></h1></p><p>h1{</p><p>font-weight: bold;</p><p>}</p><p>span{</p><p>color: #22D4FD;</p><p>border: 1px solid #22D4FD;</p><p>padding: 10px;</p><p>}</p><p>Explicando o código acima:</p><p>font-weight: bold; (Texto em negrito)</p><p>color: #22D4FD; (Cor do texto azul)</p><p>border: 1px solid #22D4FD; (Borda com 1 px de largura, do tipo sólida e cor da borda azul)</p><p>padding: 10px; (Espaçamento interno de 10px)</p><p>Classes no CSS</p><p>Estamos em uma situação na qual queremos determinar uma cor específica para tag strong sem que essa formatação passe para todos os elementos que a utilizam. E existe uma maneira para fazermos isso.</p><p>No arquivo style.css, estamos usando as tags body e strong como seletores do CSS, o que significa que conseguimos escrever o nome da tag, as chaves {} e o que queremos que altere nela dentro dessas chaves. No caso do body, é a cor do fundo e da letra.</p><p>Contudo, essa não é a única forma de seletor, uma que é muito utilizada no dia a dia é o seletor de classe que consegue resolver justamente esse problema.</p><p>Quando trabalhamos com classes, é diferente. Para criarmos classes no CSS, primeiramente vamos ao HTML e especificamos que a tag possui uma classe específica.</p><p>Então, no explorador, abriremos o arquivo index.html e na linha 13, onde temos a <strong> adicionaremos a propriedade class (classe). Essa propriedade fica realmente dentro da tag, como descobrimos com as imagens e com a âncora.</p><p>Portanto para definir uma classe para qualquer tag, basta escrever class="" e entre as aspas o nome da classe que queremos, tudo isso dentro da tag, no caso, <strong class="">.</p><p>Essa estrutura se aplica a qualquer tag para qual queiramos definir uma classe.</p><p>Recomendo sempre escrevermos algo que deixa bem óbvio do que se trata. Por exemplo, estamos no título da nossa página, e o strong é um destaque desse título, então seria bom nomearmos a classe como "titulo-destaque".</p><p>Vamos então nomear como class="titulo-destaque".</p><p>Descobrimos também que para selecionar esse titulo-destaque precisamos usar o ponto (.) . Portanto voltaremos para o arquivo style.css e, no lugar do strong, escreveremos .titulo-destaque.</p><p>Como ficou:</p><p>body {</p><p>background-color: #000000;</p><p>color: #F6F6F6;</p><p>}</p><p>.titulo-destaque {</p><p>color: #22D4FD;</p><p>}</p><p>Reparem que agora estamos em um momento diferente. Sempre que criamos uma classe CSS, selecionamos essa classe com o ponto final.</p><p>É a forma que informamos para o CSS que se trata de uma classe e não apenas de uma tag do HTML.</p><p>Box Model</p><p>Existe um padrão quando estamos desenvolvendo em HTML e CSS, e justamente por isso, como pessoas desenvolvedoras Front-End, nós utilizamos a modularidade, através do "reset CSS".</p><p>Então resetamos o padrão que já existe, como uma decoração nos nossos links ou o espaçamento enorme que existe entre o início da nossa página e o título. No figma, todo conteúdo está no centro da página, e para termos o controle de posicionamento desse título, não podemos contar com esse espaço do começo, que nem sabemos de quanto é.</p><p>Sendo que esse espaço não é padrão para todos os navegadores, certo?</p><p>Ainda tem esse ponto, os navegadores têm padrões um pouco diferentes.</p><p>Mudando a cor ou o tipo do link, por exemplo. Então realmente temos um problema, que é, temos um estilo e precisamos removê-lo.</p><p>Precisamos resetá-los para termos o controle de todos eles.</p><p>E podemos usar diversos tipos de reset para o CSS, desde gigantes, que resetam várias tags, e nem descobriremos tão cedo na nossa carreira, até os mais simples, com os quais conseguimos resetar as tags mais usadas. Por exemplo, conseguimos resetar o espaçamento da página, ajustando a margem e o padding, que são duas propriedades que entenderemos agora como funcionam no CSS.</p><p>O teste é o seguinte. Clicamos com o botão direito do mouse na página e selecionamos "inspecionar", abrindo uma coluna na metade direita da janela com as DevTools.</p><p>Na parte superior dessa coluna pode aparecer a opção "Switch DevTools to Portuguese", e nós podemos clicar nela para mudar para o idioma das DevTools para o português. Na aba "elementos" das DevTools há duas divisões na parte superior: na direita está a área do código e na área esquerda está a área de "estilos".</p><p>Sendo assim, vamos clicar no botão "selecionar elemento" representado pelo ícone de um quadrado com o cursor do mouse no canto inferior direito. Esse botão está no canto superior esquerdo da DevTools, mas também podemos usar o atalho "Ctrl + Shift + C" para</p><p>ativá-lo.</p><p>Feito isso, deixaremos o mouse no elemento do título, que está na metade esquerda da janela. Ao selecionar o título, a sensação que eu tenho, é que tem o texto e em cima e embaixo tem algo envolvendo o texto.</p><p>Ao observarmos na aba "estilos" da DevTools, na parte inferior temos vários retângulos um dentro do outro, cada vez menores em cores diferentes. Esses retângulos são:</p><p>· margin (margem): o maior e mais externo retângulo, que está na cor laranja-claro;</p><p>· border (borda): está dentro do retângulo da margem, sendo proporcionalmente menor a ele, e é da cor amarelo claro;</p><p>· padding (espaçamento): retângulo verde-claro que está dentro do retângulo da borda, também proporcionalmente menor a ele;</p><p>· conteúdo: um retângulo azul-claro que está dentro do retângulo de espaçamento e é proporcionalmente menor que ele.</p><p>Na aba "estilos", ao passarmos o mouse sobre o retângulo da margem, percebemos que no título da página, na metade esquerda da janela, observamos essa margem em destaque também, mudando a cor.</p><p>Passamos o mouse por cada um dos elementos, na aba "estilos" constatamos que todos seguem o modelo de caixa. Da mesma forma, visivelmente enxergamos uma borda amarela em cima e embaixo do conteúdo no qual deixamos o mouse em cima. Essa borda representa a margem.</p><p>Nós não adicionamos nenhuma informação sobre margem na nossa página, então é isso que estávamos conversando. Existe um padrão que é criado automaticamente nas nossas páginas.</p><p>Voltando para documentação, descobrimos que existem, na verdade, três propriedades que conseguimos definir para o nosso elemento. O primeiro é a margem, que é mais externa, seguido da borda, que não está visível no nosso projeto, mas ela existe.</p><p>E dentro da borda existe o padding, que é o espaçamento da borda até o conteúdo. Então conseguimos encolher o conteúdo em relação à borda com o padding, enquanto da borda em relação aos elementos externos temos outro espaçamento, que é a margin.</p><p>Vamos remover essa margem e também o padding, para garantirmos que não teremos esse espaçamento.</p><p>E voltando para o VS Code, no CSS existe uma forma de nos referirmos a todos os elementos da nossa página HTML.</p><p>No nosso arquivo style.css, podemos fazer isso digitando apenas um asterisco (*). Assim ele pega todos os elementos da página. Em seguida, como em todos os elementos, abrimos chaves e, dento delas escrevemos margin: 0 e padding: 0.</p><p>* {</p><p>margin: 0;</p><p>padding: 0;</p><p>}</p><p>Essa é a configuração padrão que mais utilizamos. Existem outros resets CSS que retiram a decoração, entre outras coisas, mas usaremos só esses no nosso projeto, que é bem mais tranquilo.</p><p>Com isso conseguimos notar que todo espaço que tínhamos entre o conteúdo e a página desapareceu. Inclusive podemos clicar para Inspecionar a página, sendo que às vezes a aba "estilos" muda de posição. Dessa vez ela está em uma divisão abaixo do código, então vamos analisar o modelo de caixas.</p><p>Quando ativamos o seletor de elementos, pressionando "Ctrl + Shift + C" e passamos o mouse sobre os elementos da nossa página, reparamos que realmente não tem mais aquela margem padrão. Isso nos ajuda a ter muito mais controle dos elementos da nossa página.</p><p>Height e box-sizing</p><p>No nosso código CSS, aplicamos o margin: 0 e o padding: 0. Existem outros padrões para adicionarmos e desenvolvermos nosso projeto de uma forma legal.</p><p>É bom sabermos esses padrões desde o começo. Por exemplo, existe alguma forma de garantirmos que nossa página ocupará 100% do tamanho da tela?</p><p>Vamos voltar ao Figma do projeto para eu mostrar uma coisa para você. Nesse Figma, toda nossa aplicação fica em uma tela. Não temos scroll, está tudo em uma tela só.</p><p>Tem alguma propriedade do CSS que nos permite informar que ocupamos todo tamanho dessa tela e como vermos que não está ocupando?</p><p>Tem sim, vamos descobrir como. Abrindo o "Inspecionar" do nosso projeto de portfólio, e aqui eu vou diminuir o zoom, porque está em 155%, ao passarmos o mouse sobre o código body, na coluna da direita.</p><p>Lembrando que o body contém todo nosso conteúdo e, ao observamos a seleção, notamos que ele não ocupa toda página. Na verdade, ele termina praticamente na metade da página.</p><p>O que conseguimos fazer é usar um padrão inicial no qual sempre conseguimos usar 100% da altura da tela. Para isso, voltaremos ao arquivo style.css no VS Code e, dentro das chaves do body, adicionaremos o valor de height (altura).</p><p>E definiremos uma altura para o nosso body.</p><p>E nós vamos definir uma altura para o nosso body, ou seja, todo corpo da página. E o valor que vamos atribuir é de 100vh.</p><p>body {</p><p>height: 100vh;</p><p>background-color: #000000;</p><p>color: #F6F6F6;</p><p>}</p><p>E o que é esse vh?</p><p>Vou até voltar para o arquivo do index.html, onde criamos uma meta informação na linha 6 chamada viewport. Essa é a tela onde estamos acessando nosso projeto.</p><p>Então no CSS nós definimos a altura dessa tela equivalente a 100% do viewport, ou seja, da tela do nosso projeto no navegador.</p><p>Vamos passar o mouse sobre o código do elemento body. Feito isso, toda tela fica azul, que é a cor desse elemento, então estamos ocupando 100% da tela!</p><p>E esse é um padrão que podemos utilizar sempre, no começo dos nossos códigos. Além disso, tem outro padrão interessante de adicionarmos.</p><p>Nós informamos que a altura máxima será equivalente a toda a tela do dispositivo, agora precisamos garantir que nada fique de fora dessa tela.</p><p>Às vezes temos uma imagem cuja margem à esquerda fica tão grande que ela sai do body. Então precisamos garantir que os elementos "filhos", que estão dentro das tags maiores, como a tag "pai" <body>, ou seja, uma tag que está abaixo de outra não saia da tela.</p><p>Para isso, temos uma propriedade, que veremos agora na documentação. Para acessar a documentação, vamos pesquisar pelo nome da propriedade, que é "box sizing". E para ela eu gosto muito de usar como referência o Mozilla, porque tem um exemplo mais visual.</p><p>Então acessaremos a página box-sizing do Mozilla e traduziremos o texto para o Português. No começo da página já encontramos três exemplos de box sizing no centro esquerdo da página, e o efeito deles no conteúdo do lado direito.</p><p>Inicialmente temos o valor do content-box, e ele declara o width (largura) de 100%. No segundo exemplo também tem um content-box ao qual é adicionado uma borda e um padding, que já aprendemos o que são. Por fim, tem um box-sizing com o valor border-box.</p><p>box-sizing: content-box;</p><p>width: 100%;</p><p>box-sizing: content-box;</p><p>width: 100%;</p><p>border: solid #5B6DCD 10px;</p><p>padding: 5px;</p><p>box-sizing: border-box;</p><p>width: 100%;</p><p>border: solid #5B6DCD 10px;</p><p>padding: 5px;</p><p>A cada exemplo que clicamos, observamos como o conteúdo vai se alterando no lado direito. Então com o primeiro momento o elemento "filho" tem 100% da largura, então ele fica completamente dentro do elemento "pai". Pensando no nosso projeto, se deixássemos a imagem com width: 100%, ela ocuparia toda a largura do body.</p><p>No segundo exemplo temos uma borda e um padding. Se quiséssemos aplicar isso à imagem do nosso projeto, ou seja, adicionar uma borda colorida e deixar um espaçamento entre essa borda e o conteúdo, a imagem iria sair do nosso body, como aconteceu conteúdo do exemplo.</p><p>Com o valor content-box no box-sizing pode acontecer isso, e não é o que queremos. O que queremos é o valor border-box, porque com ele conseguimos criar, por exemplo, uma borda e um padding, ou o que quisermos, e o conteúdo será encolhido para sempre ser mantido dentro do elemento "pai".</p><p>Pode não parecer legal encolher esse conteúdo, mas é isso que faz com que tenhamos controle de como todos os elementos estão funcionando, já que é muito frustrante estar fazendo uma alteração no elemento "filho" e ele sair do "pai. Outro exemplo no nosso projeto: temos como "filho" o destaque do título, imagina se ele sai do elemento "pai".</p><p>Então precisamos desse controle do "filho" dentro do "pai", e para isso conseguimos usar como padrão o box-sizing: border-box.</p><p>body {</p><p>height: 100vh;</p><p>box-sizing: border-box;</p><p>background-color: #000000;</p><p>color: #F6F6F6;</p><p>}</p><p>E essa é uma ótima prática</p><p>para vocês aplicarem em todos os projetos que criarem, caso a intenção seja evitar que a imagem saia do body, ou seja, evitar que o elemento "filho" saia do elemento "pai".</p><p>O que é Viewport?</p><p>Em computação gráfica, a viewport é a porção de área visível de um plano e é utilizada como unidade de medida no CSS para criar páginas Web 100% responsivas. Em outras palavras, a viewport varia de dispositivo para dispositivo, por exemplo em computadores, tablets e celulares, cada tela possui dimensões diferentes e enquanto uma página não responsiva apresentaria os elementos desproporcionais, uma página responsiva utilizando viewport teria seus elementos adequados a cada proporção.</p><p>Flexbox</p><p>Como mudamos o posicionamento desses elementos?</p><p>Seria legal ter os textos de um lado e a imagem do outro.</p><p>Existem várias formas de posicionarmos esses elementos na página. Podemos usar posições fixas e definir quanto pixels queremos de margem, por exemplo, 300px na margem superior do título, empurrando todo conteúdo para baixo.</p><p>Entretanto definir um número fixo não é uma boa prática, porque podemos usar várias telas para abrir nosso projeto, e assim ele não ficará da mesma forma como imaginamos.</p><p>Vou até usar um exemplo. Você define uma margem de 300px e eu abro no celular, que não tem todo esse espaço, então vai ficar muito estranho. Ou então eu abro em um super monitor gamer de 34 polegadas e o espaço ficará minúsculo.</p><p>Então podemos utilizar esse posicionamento específico em alguns pontos específicos. Porém quando temos dois elementos grandes para posicionar, como observamos no Figma do nosso projeto, e queremos posicionar em relação um ao outro, conseguimos usar tecnologias que já foram criadas para facilitar a resolver esse problema.</p><p>No caso, temos vários elementos para posicionar na nossa página, mas eu me referi a dois elementos porque temos uma seção principal, com o texto e os botões do lado esquerdo, e a imagem, do lado direito. Portanto são dois grandes elementos que queremos centralizar na página, mas deixá-los lado a lado.</p><p>Uma das tecnologias que usaremos agora no nosso projeto é o Flexbox.</p><p>Podemos até abrir a documentação do Mozilla sobre Flexbox e ao traduzir para o português somos informados que se trata de "uma nova tecnologia" e que a ideia deles é "centralizar blocos de conteúdo verticalmente dentro do seu pai". Inclusive já aprendemos que o "pai" seria o elemento que contém outros elementos dentro.</p><p>É um guia do Flexbox com imagens, sendo muito mais tranquilo de conhecerem: o chamado A Complete Guide to Flexbox. Também traduziremos essa página para o português e, ao rolar por essa página, nos deparamos com várias imagens.</p><p>Agora nós tentaremos entender como iniciar a utilização do Flexbox. O primeiro ponto é que existe uma propriedade que precisamos definir para o elemento "pai", e ela indica quando começaremos a usar o flexbox para posicionar nossos elementos. O nome dessa propriedade, como mostra o primeiro exemplo, é o display: flex.</p><p>Nesse caso, podemos chamar a tag "pai" de container, mas sempre precisamos adicionar essa propriedade.</p><p>Comparando o Figma com o index.html, conseguimos analisar que o elemento "pai" dos elementos que queremos posicionar, ou seja, o container que fica o envolve, é o <main>. Tudo está dentro do <main>, portanto é nele que vamos codar a propriedade que informa onde usaremos o Flexbox, como informou o Complete Guide.</p><p>E para conseguirmos estilizar nosso main, criaremos uma classe para ele.</p><p><main class="apresentacao"></p><p>O Flexbox faz isso por padrão, ou seja, deixa os elementos no sentido de linha, que em inglês é Row, mas isso é configurável. Não necessariamente queremos que nossos elementos fiquem em uma linha, e eles podem ficar na posição de coluna; Essa é outra propriedade que podemos inserir no código: a flex-direction, como mostra o Complete Guide.</p><p>Contudo, o padrão do nosso projeto é horizontal, ou seja, do lado esquerdo fica o texto e do direito a imagem. Então não precisamos alterar esse padrão, ou seja, não precisamos alterar a propriedade flex-direction e determinar se será coluna ou linha. Inclusive podemos escrever como flex-direction: row, mas ele já está fazemos o que gostaríamos.</p><p>Então por default (padrão) ele já tem algumas configurações.</p><p>Sim, por isso já ficou automaticamente em forma de linha.</p><p>Vamos voltar no nosso projeto no navegador, porque tem algo que achei interessante. Tiramos a margem e, quando deixamos no display: flex ele deixou na mesma linha.</p><p>Conseguimos centralizar esse conteúdo? Porque é um segundo passo grande vencido.</p><p>Descendo na documentação do Complete Guide, encontramos a propriedade Itens de alinhamento. Nela temos 5 imagens que representam a disposição dos itens na página.</p><p>Temos os itens na forma de flex-start, que é o valor da propriedade inicial, como está a página do nosso projeto. Além disso, podemos deixar todos os conteúdos no final da página, com flex-end, mas o que você falou para fazermos é deixá-lo no centro, então no valor da propriedade vamos codar align-items: center, como a documentação está informando para nós.</p><p>.apresentação {</p><p>display: flex;</p><p>align-items: center;</p><p>}</p><p>É justamente isso. Na verdade, o align-items alinha os itens de acordo com o próprio alinhamento deles. Então temos a imagem, que é o elemento de maior altura, e ela que define qual será o ponto central do alinhamento. Então todos os alinhamentos estão alinhados conforme a imagem.</p><p>Alinhando o conteúdo</p><p>Entendemos a questão do posicionamento do flex. Porém, se abrirmos o Figma do nosso projeto veremos que o título, o texto e os botões de Instagram e de Github parecem um só bloco, enquanto a imagem parece outro bloco acoplado.</p><p>São várias coisas. Vimos que é possível agrupar elementos em um único elemento pai, um container. Faremos isso no nosso HTML. Podemos agrupar todos os elementos que você apontou, do título até os botões, e manter a imagem como um elemento de fora. Acessaremos o nosso código e adicionaremos a tag <section> para criar uma seção separada da imagem. Vamos abri-la acima do h1 e fechá-la abaixo da última âncora do botão de Github.</p><p>Estamos utilizando o Flexbox e, conforme visto anteriormente, o elemento pai informará que os elementos em seu interior devem ficar enfileirados — os quais havíamos configurado como Row. Contudo, agora temos somente dois elementos filhos.</p><p>Tínhamos antes cinco elementos por baixo da nossa tag pai, portanto cinco elementos enfileirados no Flexbox. Agora temos apenas dois: um que possui vários elementos em seu interior e outro que possui apenas a imagem. Por isso em nossa aplicação conseguimos separar uma section e a imagem ao lado direito.</p><p>Contudo, mesmo separando as seções do texto e da imagem, ambos estão "grudados".</p><p>Na página do Flexbox temos uma seção denominada "justificar-conteúdo" — que na verdade se trata da propriedade justify-content, em inglês. Dentro dela temos várias formas de posicionar elementos, e cada exemplo utiliza grupos de três — é importante lembrar que temos somente dois em nosso projeto.</p><p>Queremos criar um espaço entre esses dois elementos sem criar uma margem externa muito grande. Vamos apenas espaçar a seção da imagem.</p><p>Para isso vamos utilizar o space-between localizado dentro da propriedade justify-content. Retornaremos ao nosso código e acessaremos o arquivo style.css, na qual buscaremos a seção .apresentacao{} a qual representa o nosso contêiner. Dentro de suas chaves, abaixo de align-items adicionaremos o justify-content: space-between;.</p><p>Enquanto houver espaço, o conteúdo será afastado. Se tivéssemos três elementos, o space-between dividiria esse espaço entre cada um deles.</p><p>Exatamente. Porém, os elementos estão colados nos cantos da tela: o texto à esquerda e a imagem à direita.</p><p>A imagem também está colada ao topo da tela. Podemos criar uma margem para fora, aglomerando os conteúdos em direção ao centro.</p><p>Já conhecemos a propriedade margin. Se retornarmos ao nosso código, ainda no arquivo style.css, veremos uma seção na linha 1 que estabelece a margem 0 para todos os elementos.</p><p>Podemos</p><p>informar que todos os elementos da propriedade apresentacao — ou seja, do main — possuirá uma margem específica.</p><p>Adicionaremos uma margem para que nossos dois elementos sejam agrupados. Dentro das chaves da seção .apresentação{}, acima de display, adicionaremos o comando margin:.</p><p>Após adicionarmos o sistema abre uma lista com várias sugestões: auto, porcentagem, entre outras. Vamos testar a porcentagem: selecionaremos a opção 0%, mudando o conteúdo para 10%.</p><p>Estilizando o texto</p><p>É possível definir um tamanho para que todos os elementos caibam dentro da seção. Para isso, utilizaremos uma propriedade dentro do arquivo CSS.</p><p>Precisamos de uma class para definir essa section localizada no index.html, assim como ocorre com a classe main. Portanto vamos adicioná-la entre os sinais de menor e maior da tag <section>.</p><p>Dica: Por padrão, para nomear elementos filhos, as pessoas utilizam o nome do elemento pai junto ao sinal __ e junto ao nome que será criado para o elemento filho.</p><p>Definiremos uma largura para essa section.</p><p>Exatamente, W é a largura e H é altura, ou height.</p><p>Vamos clicar no valor de W e copiá-lo — ele corresponde a 615. Voltaremos ao nosso código e dentro das chaves de .apresentacao__conteudo{} vamos adicionar um width: e colar o valor copiado.</p><p>Quando o conteúdo chega no limite dessa width que configuramos, ele é quebrado para a linha de baixo.</p><p>Então eu sugiro um próximo passo. Vamos aumentar o tamanho do nosso título.</p><p>Este título tem um tamanho de 36 pixels. Podemos localizar esta informação na seção "Text" na coluna lateral direita do Figma. Vamos colocar esse tamanho no código.</p><p>Retornaremos ao nosso código e acessaremos o arquivo index.html. Em seu interior buscaremos a tag <h1> e entre os sinais de menor e maior adicionaremos uma class.</p><p>Temos uma propriedade chamada font-size, onde font corresponde à fonte e size ao tamanho. Vamos adicioná-la dentro das chaves de .apresentacao__conteudo__titulo{}. em seguida adicionaremos o valor 36px que coletamos do Figma.</p><p>Vamos alterar também o conteúdo do subtítulo, ou seja, do parágrafo. Ele possui um tamanho específico que também podemos extrair do Figma: 24 pixels.</p><p>Retornaremos ao arquivo index.html e buscaremos a tag <p>. Entre os sinais de menor e maior dela criaremos uma class.</p><p>Salvaremos o código e acessaremos o arquivo style .css. Abaixo das chaves de .apresentacao__conteudo__titulo{} adicionaremos um apresentacao__conteudo__texto{}. Em seu interior adicionaremos um font-size: 24px.</p><p>Importando fontes</p><p>Já temos os tamanhos de fonte do nosso título e do parágrafo. Porém, existe uma grande diferença entre o Figma e a nossa página. Acessaremos o Figma do projeto e veremos que a fonte de ambos os textos é mais arredondada, é diferente.</p><p>Se clicarmos no elemento h1 (o título) pelo Figma, veremos na coluna à direita, na seção "Text", o nome da fonte utilizada nesse trecho: Krona One. Clicaremos também no parágrafo e veremos na mesma coluna o nome da sua fonte: Montserrat. Como utilizaremos essas fontes diferentes do Figma em nosso projeto?</p><p>Precisaremos trazer para o projeto essas fontes de alguma forma. Importar.</p><p>Essas fontes já estão em um lugar: o Google Fonts.</p><p>Acessaremos o site do Google e na barra de pesquisa digitaremos "google fonts". Clicaremos no primeiro link, o qual nos direcionará para a página inicial do Google Fonts. Essa página abrirá com diversas opções de fontes e línguas.</p><p>Como vamos importar as fontes? Por meio do Figma, copiaremos o nome da fonte "Krona One" e colaremos no campo de pesquisa denominada "Search fonts", localizada no topo esquerdo da página do Google fonts. Após pressionarmos "Enter", a fonte que pesquisamos será exibida como resultado abaixo do campo de pesquisa. Clicaremos no resultado e seremos direcionados para a página da fonte Krona One. Vamos descê-la até a seção "Styles", onde veremos os estilos dessa fonte.</p><p>As fontes podem ter pesos diferentes: podem vir com negrito, com itálico ou com regular. No caso dessa fonte, temos apenas a opção "Regular 400". É justamente essa que estamos utilizando no Figma. Dentro da seção "Regular 400" temos um exemplo visual da fonte neste formato e neste peso. No canto direito deste exemplo, temos um botão intitulado "Select Regular 400" ("Selecione Regular 400"). Vamos clicar nele. Em seguida clicaremos no ícone denominado "View selected families" (ou "Ver famílias selecionadas"), localizado no canto superior esquerdo da página.</p><p>Neste momento uma nova coluna será aberta à direita da página, nos informando que temos a família de fontes Krona One selecionada. Em seu interior veremos a seção "Use on the web" ("use na web"). Nela veremos, lado a lado, dois botões de radio denominados <link> e @import, respectivamente. Eles nos permitem copiar a fonte para utilizarmos em nossas páginas web. A opção "" exibe uma tag HTML para ser inserida em um link. Já a opção "@import" nos permite inserir um @import no CSS. Vamos selecionar a segunda opção, pois é a que normalmente utilizamos.</p><p>Após essa seleção, copiaremos o trecho de código que colaremos no CSS, exibido abaixo dos botões radio:</p><p>@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');</p><p>O <style> está em formato de tag HTML. No HTML é possível adicionarmos um trecho de CSS por meio dessa tag. Contudo, esta não é uma prática comum nos projetos. Se o projeto crescer de tamanho, queremos ser capazes de implementar vários estilos e criar uma ou mais folhas de estilo. Além de editá-las, se necessário.</p><p>Portanto, vamos copiar somente o trecho de CSS, sem a tag <style>.</p><p>Os arquivos dessa fonte estão em algum lugar. Estamos falando para o CSS buscar o local dessa fonte com o @import e trazer para o arquivo.</p><p>Uma coisa é trazer a fonte para o projeto. Outra coisa é informar o local onde se deve aplicá-la.</p><p>Trouxemos a fonte, mas não estamos usando-a, de fato. Para utilizar uma fonte adicionaremos uma propriedade no elemento onde ela será aplicada. Nós a queremos no título da página, especificamente.</p><p>Vamos acessar o arquivo index.html para confirmar. Nele temos o <h1> cuja classe se chama apresentacao__conteudo__titulo.</p><p>Retornaremos ao arquivo CSS e buscaremos a seção .apresentacao__conteudo__titulo{}. Dentro de suas chaves, abaixo de font-size, adicionaremos a propriedade font-family para trazer a fonte trazida pelo Google Fonts.</p><p>.apresentacao__conteudo__titulo{</p><p>font-size: 36px;</p><p>font-family: ;</p><p>}</p><p>Adicionaremos qual valor dentro de font-family? Retornaremos ao navegador, na página da fonte que acabamos de importar. Na coluna de "Selected Family", abaixo da seção "Use on the web", encontraremos a seção "CSS rules to specify families" (ou "regras do CSS para especificar famílias") na qual veremos o código CSS para implementar a nossa fonte.</p><p>font-family: 'Krona One', sans-serif;</p><p>Copiaremos o trecho 'Krona One', sans-serif, retornaremos ao arquivo CSS e o colaremos à direita do nosso font-family.</p><p>.apresentacao__conteudo__titulo{</p><p>font-size: 36px;</p><p>font-family: 'Krona One', sans-serif;</p><p>}</p><p>Vamos realizar o mesmo processo no parágrafo de forma bem rápida?</p><p>No parágrafo aplicaremos a fonte Montserrat. Retornaremos à página inicial do Google Fonts no navegador e digitaremos "Montserrat" no campo de pesquisa. A página retornará diversas opções abaixo, dentre as quais selecionaremos aquela denominada simplesmente "Montserrat".</p><p>Desceremos a página até a seção "Styles" e veremos que esta fonte possui mais de um estilo. Vamos conferir o estilo desejado acessando o Figma, selecionando o texto a ser editado e acessando a coluna à direita. No topo dela, selecionaremos a aba "Inspect". Em seu interior acessaremos a seção "CSS", a qual possui as informações da nossa fonte.</p><p>No Figma podemos ver o peso da fonte no atributo font-weight dentro da aba "Inspect": 400. Retornando à página do Google Fonts, é interessante observar que temos muitas opções. Na seção "Styles" buscaremos ao lado direito dos exemplos visuais de fonte o botão "Select Regular 400" e clicaremos nele.</p><p>Acessaremos a coluna "Selected families", buscaremos e selecionaremos</p><p>a opção "@import". Em seguida, copiaremos o trecho entre as tags de <style>.</p><p>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap')</p><p>Voltando ao código, no arquivo CSS substituiremos o nosso import antigo pelo copiado. Agora estamos importando com o mesmo comando as duas fontes, Krona One e Montserrat.</p><p>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');</p><p>Retornaremos à coluna lateral do Google Fonts onde encontraremos o código das fontes Krona One e Montserrat, disponíveis na seção "CSS Rules to specify families".</p><p>Copiaremos o trecho da fonte a ser importada: 'Montserrat', sans-serif, e colaremos dentro das chaves de .apresentacao__conteudo__texto{}, abaixo de font-size.</p><p>Para saber mais: Google Fonts</p><p>Google Fonts é uma biblioteca da Google com mais de 1000 fontes livres licenciadas. Além de um diretório web interativo para navegar na biblioteca, existem atalhos para usar convenientemente as fontes através do CSS.</p><p>Como importar as fontes</p><p>Para isso, recomendamos a leitura do guia oficial Primeiros passos com a API Google Fonts, o qual explica passo a passo como funciona e como utilizar a biblioteca.</p><p>Posicionando os botões</p><p>links do Instagram e do Github.</p><p>Podemos estilizá-los e depois posicioná-los.</p><p>Voltando no nosso Figma do projeto, veremos que os botões possuem espaçamentos.</p><p>Temos também um espaço entre eles. É isso que traremos para nosso código.</p><p>Já que os botões parecem estar unidos num grupo, podemos criar de fato um grupo entre eles. Acessaremos o arquivo index.html e veremos os botões localizados na tag âncora, ou <a>. Para agrupá-los, criaremos uma tag chamada <div> que significa "divisão". Ela envolverá os dois <a> dos botões.</p><p>Utilizamos esta tag para agrupamentos bem específicos, como no caso dos nossos botões. Não utilizamos para esses fins as tags <main> ou <section>.</p><p>Não é uma divisão de estrutura. Ela só aponta um agrupamento entre os elementos. E não precisam ser necessariamente botões. Podemos agrupar elementos de texto, desde que não se enquadrem em um contexto maior.</p><p>Em um contexto semântico, né. Por exemplo: o conteúdo principal precisa de um nome: é o <main>. Se estamos trabalhando com um agrupamento de elementos que querem dizer uma coisa só, digitamos <section>. Já a <div> é puramente visual e serve apenas para juntar os dois botões em um lugar só, não possui valor semântico.</p><p>Vamos estilizar os botões. Posicionaremos um botão à esquerda e outro à direita, na horizontal. Para isso, criaremos uma class para essa div.</p><p>Dentro de suas chaves criaremos um Flexbox. Já fizemos algo parecido quando selecionamos o elemento pai e utilizamos o space-between. Sempre que utilizamos o Flexbox, precisamos fazer um procedimento no elemento pai. Lembrando que se trata do pai pois incluímos os dois botões em seu interior como elementos filhos, e são estes que posicionaremos.</p><p>O que devemos adicionar como propriedade no elemento pai?</p><p>Um display: flex.</p><p>Exatamente. Adicionaremos um display: flex dentro das chaves de .apresentacao__links{}. Abaixo desse comando acrescentaremos a propriedade justify-content: space-between.</p><p>Quando utilizar div</p><p>A tag <div> define uma divisão em um documento HTML e costuma ser usada como um contêiner para outros elementos, o que ajuda na estilização do bloco. Por esse motivo, a <div> é frequentemente utilizada quando precisamos agrupar elementos sem usar as tags semânticas do HTML. Isso acontece porque a <div> não tem valor semântico. Portanto, não significa nada para os navegadores e mecanismos de pesquisa.</p><p>Além do mais, por ser muito utilizada para agrupar elementos, acaba facilitando na organização das informações nos layouts. Dessa forma, pode ser formatada e manipulada organicamente via CSS. Geralmente vem acompanhado de atributos de ID e classe para facilitar essa organização e formatação.</p><p>Estilizando os botões</p><p>Observando nosso código no VSCode, criamos o .apresentacao__links com display: flex para as duas tags âncoras, mas agora o processo será diferente, pois queremos estilizar os dois botões. Porém, o estilo de um é igual ao do outro.</p><p>No projeto do Figma, tanto o botão "Instagram" quanto o de "GitHub", ou ainda se criarmos mais, possuem as mesmas características: retângulo com vértices arredondados, fundo azul e usam a mesma fonte sem serifa.</p><p>Só muda o texto que definimos no HTML.</p><p>Exatamente, então uma ideia seria criarmos uma classe que será utilizada para ambos os botões.</p><p>No arquivo index.html, iremos à <div> da class igual a "apresentacao__links" e, na tag <a>, adicionaremos a nova classe chamada "apresentacao__links__link" antes de href.</p><p>Utilizaremos essa mesma class para a tag âncora seguinte.</p><p>Em nosso arquivo style.css, adicionaremos essa nova classe ao final do código para estilizarmos dentro das chaves.</p><p>Vamos começar pela cor de fundo que geralmente é feita com background-color:. Funciona também para a tag âncora?</p><p>Sim, funciona! Então podemos buscar no Figma qual é o valor hexadecimal ao clicarmos no botão, que no caso é #22D4FD. No arquivo CSS, adicionaremos o background-color: seguido deste valor que obtivemos.</p><p>Com isso, já teremos a cor azul no fundo dos botões, mas ainda estão muito pequenos e diferentes do Figma.</p><p>Vamos continuar estilizando o botão pegando sua largura de 280px. Copiaremos este valor e inseriremos na propriedade width: do arquivo CSS também.</p><p>O texto ainda está alinhado à esquerda, e precisamos centralizá-lo.</p><p>Para isso, teremos a propriedade text-align: com o valor center em .apresentacao__links__link para que fique alinhado ao centro.</p><p>Analisando o resultado no navegador, os escritos dos botões já estarão centralizados em suas áreas azuis, as quais ainda estão com as pontas em noventa graus.</p><p>Sim, pois no projeto final, esses retângulos possuem os vértices arredondados.</p><p>Têm sim, e este raio de arredondamento é estabelecido pela propriedade border-radius:, e no Figma veremos que seu valor é de 16px.</p><p>Já está melhorando! Mas a fonte dos textos dos botões deve ser maior também, contendo 24px.</p><p>Pegaremos este valor e adicionamos à propriedade font-size: no arquivo CSS.</p><p>Um ponto interessante que ainda está diferente do Figma é o espaço que há entre os limites do retângulo do botão e o texto central.</p><p>Lembrando do Box Model, queremos uma margem entre o conteúdo e a borda. Abriremos nosso projeto no navegador, clicaremos com o botão direito do mouse e escolheremos a opção "Inspecionar" para abrirmos a aba lateral.</p><p>Se passarmos o cursor e selecionarmos qualquer elemento, exibiremos a seleção no BoxModel da aba "Estilos". Se quisermos aumentar o espaço entre os elementos, precisaremos colocar um valor no padding:.</p><p>Para essa propriedade, iremos ao Figma, selecionaremos o conteúdo, apertaremos a tecla "Alt" e visualizaremos o valor das distâncias passando o mouse sobre a área que queremos alterar, que este caso será de 21.5px em relação à base e o topo no botão "Instagram".</p><p>21.5px, então adicionaremos o padding: com este valor.</p><p>Porém, já temos uma distância boa do texto até as bordas laterais, então não precisaremos alterá-la, e sim apenas no top e bottom relativos ao topo e à base respectivamente.</p><p>Até agora, selecionávamos apenas um valor para o padding:, e se escrevermos o valor de 21.5px e salvarmos, essa distância será colocada para todos os lados da área.</p><p>Quando queremos apenas selecionar um dos eixos, inserimos dois valores: o primeiro sempre será relativo ao eixo vertical, enquanto o segundo é do horizontal. Como não alteraremos este último, deixaremos como zero mesmo.</p><p>No Figma, os textos dos botões de "Instagram" e "GitHub" não estão sublinhados, diferente do que temos até agora.</p><p>Esta linha abaixo dos conteúdos é um padrão quando estamos desenvolvendo, e teremos que tirar sua decoração.</p><p>Faltam duas coisas ainda: a cor do texto do botão e a fonte, pois se observarmos, a fonte está em um tom de azul um pouco mais escuro que a cor do fundo da área.</p><p>Ainda está como link clicável, então retiraremos o sublinhado da decoração com text-decoration: sendo none</p>Mais conteúdos dessa disciplina
Chegou a hora da verdade! A interface está funcionando, e vocês decidem colocar a integração com o banco de dados para funcionar. Assim, escrevem o se- Chegou a hora da verdade! A interface está funcionando, e vocês decidem colocar a integração com o banco de dados para funcionar. Assim, escrevem o se
- Chegou a hora da verdade! A interface está funcionando, e vocês decidem colocar a integração com o banco de dados para funcionar. Assim, escrevem o se
- Prova Online LINGUAGEM DE PROGRAMAÇÃO Questão 4 Sem resposta Observe o código: def calcular_fatorial(numero) if numero = 0: return 1 else: return n...
- Os ensaios de proliferação celular são amplamente utilizados na pesquisa de câncer. Sobre esses ensaios, é correto afirmar que: Opção A A incorpor...
- LINGUAGEM DE PROGRAMAÇÃO Questão 4 Sem resposta Se todos os testes passarem, doctest não produzirá nenhuma saída. Se houver uma discrepância entre ...
- Quais são as vantagens da estrutura descentralizada do departamento de treinamento e desenvolvimento? Questão 14Escolha uma opção: a. Alinhamento
- Os registradores são componentes essenciais em circuitos digitais, utilizados para armazenar dados temporariamente. Um registrador em série, por ex...
- Questão 6 | CINESIOTERAPIA E REEDUCACAO FUNCIONAL Um motorista está estacionando seu carro em uma vaga apertada. Para verificar se há obstáculos at...
- O Decreto nº 2.494 de 10 de fevereiro de 1998 entende a modalidade de ensino a distância, estabelece que a EaD é? Escolha uma opção: a. Uma forma ...
- 12. (Unesc - 2024 - Prefeitura de Macieira - SC - Assessor Jurídico) Em um contrato de compra e venda de um imóvel, as partes incluíram uma cláusul...
- Questão 9 Ao desenvolver um sistema avançado de controle de estoque, é necessário não apenas armazenar a quantidade de produtos disponíveis, mas ta...
- lém de incluir profissionais que lidam eficientemente com uma atmosfera de mudanças intermitentes, a constituição de uma equipe de alto desempenho ...
- Sistemas de Informações Mercadológicas
- exercícios_lista3 IF