WDD 231: Desenvolvimento Frontend para Web I

S01 - Atividade de Aprendizagem: Rodapé do Site

Visão Geral

O rodapé é um local comum para colocar informações de contato, links de sites, informações de direitos autorais e links para redes sociais.

O rodapé da tarefa desta semana requer ícones vinculados a redes sociais, bem como informações básicas sobre a página e o autor, além de uma data dinâmica de lastModified (última modificação).

Existem muitos sites onde você pode obter ícones SVG de redes sociais. Alguns pedem crédito, alguns são gratuitos e outros exigem uma assinatura mensal.

Para ajudar você a se preparar para esta tarefa, esta atividade mostrará como usar ícones SVG, como modificá-los e como colocá-los em um rodapé.

Instruções da Atividade

Compreendendo e Modificando Ícones SVG

Os ícones SVG não são baseados em pixels como um arquivo png ou jpg. Na verdade, são caminhos e formas descritos usando texto. Isso significa que eles têm um código que pode ser aberto e alterado em um editor de texto.

  1. Navegue até este ícone do MS Teams no Bootstrap. - (conteúdo em inglês)
  2. Baixe o SVG e abra-o no VS Code. 
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-microsoft-teams" viewBox="0 0 16 16">
  <path d="M9.186 4.797a2.42 2.42 0 1 0-2.86-2.448h1.178c.929 0 1.682.753 1.682 1.682zm-4.295 7.738h2.613c.929 0 1.682-.753 1.682-1.682V5.58h2.783a.7.7 0 0 1 .682.716v4.294a4.197 4.197 0 0 1-4.093 4.293c-1.618-.04-3-.99-3.667-2.35Zm10.737-9.372a1.674 1.674 0 1 1-3.349 0 1.674 1.674 0 0 1 3.349 0m-2.238 9.488-.12-.002a5.2 5.2 0 0 0 .381-2.07V6.306a1.7 1.7 0 0 0-.15-.725h1.792c.39 0 .707.317.707.707v3.765a2.6 2.6 0 0 1-2.598 2.598z"/>
  <path d="M.682 3.349h6.822c.377 0 .682.305.682.682v6.822a.68.68 0 0 1-.682.682H.682A.68.68 0 0 1 0 10.853V4.03c0-.377.305-.682.682-.682Zm5.206 2.596v-.72h-3.59v.72h1.357V9.66h.87V5.945z"/>
</svg>
  3. Observe o código SVG e encontre o seguinte:
    1. A largura do ícone. [passe o mouse aqui para ver a resposta]
    2. A altura do ícone. [passe o mouse aqui para ver a resposta]
    3. A cor do ícone. [ passe o mouse aqui para ver a resposta]
    4. Quantas formas são usadas para criar este ícone? [passe o mouse aqui para ver a resposta]
  4. Altere o svg dobrando seu tamanho.
    Avalie Seu Conhecimento

    Altere os atributos de width (largura) e height (altura) para 48 pixels.

  5. Altere a cor de preenchimento do ícone para roxo (purple).
    Avalie Seu Conhecimento

    Altere o atributo fill para purple (roxo).

  6. Remova as imagens de pessoas atrás da parte T do ícone.
    Avalie Seu Conhecimento

    Remova o primeiro path do código SVG.

Layout de Ícones de Redes Sociais

Você criará uma divisão usando div como pai para todos os ícones de redes sociais e vai organizá-los na horizontal usando flexbox. Você pode controlar o espaço entre cada ícone usando column-gap e pode centralizá-los na página usando justify-content.

  1. Baixe um ícone do GitHub, um ícone do LinkedIn e um ou dois outros de sua escolha.
  2. Mova-os para a pasta de imagens do seu site.
  3. Crie um <div> pai dentro da tag de rodapé e dê a ele um nome de classe.
  4. Coloque cada imagem dentro de uma tag de âncora e vincule cada âncora às suas contas nas redes sociais.

Demonstração em Vídeo

Assista ao vídeo WDD231 Rodapé de Site 1 Construindo um conjunto de ícones de redes sociais no rodapé