WDD 231: Web Frontend Development I

W01 Learning Activity: Site Footer

Overview

The footer is a common location for contact information, site links, copyright information, and social media links.

This week's footer requires linked social media icons, basic page and author information, and a dynamic last-modified date.

There are many websites where you can get social media SVG icons. Some sites require attribution, some are free, and others require a monthly fee.

To help you prepare for this assignment, this activity will look at how to use SVG icons, how to modify them, and how to lay them out in a footer.

Activity Instructions

Understanding and Modifying SVG Icons

SVG icons are not pixel-based like PNG or JPG files. Instead, they are paths and shapes described using text. This means that they have code that can be opened in a text editor and manipulated.

  1. Navigate to this MS Teams icon from Bootstrap.
  2. Download the SVG and open it in 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. Look at the SVG code and find the following:
    1. The width of the icon.
    2. The height of the icon.
    3. The color of the icon.
    4. How many shapes are used to create this icon?
    Check Your Understanding
    1. 16 pixels
    2. 16 pixels
    3. The currentColor value means the SVG will inherit the text color from its parent element or the current CSS color context. This is a common practice for SVG icons because it allows them to automatically match the text color of wherever they're placed, making them flexible for different design contexts.
    4. 2 shapes (two defined paths)
  4. Change the SVG by tripling its size (48 × 48).
    Check Your Understanding

    Change the width and height attributes to 48 pixels each.

  5. Change the fill color of the icon to purple.
    Check Your Understanding

    Change the fill attribute to "purple".

  6. Remove the people shapes behind the T portion of the icon.
    Check Your Understanding

    Delete the first <path> element.

Social Media Icon Layout

You will create a parent division for all the social media icons and then lay them out horizontally using flexbox. You can control the space between each icon using column-gap and center them on the page using justify-content.

  1. Download a GitHub icon, a LinkedIn icon, and one or two others of your choosing.
  2. Move them into the images folder of your site.
  3. Create a parent division <div> just inside the footer tag and give it a class name.
  4. Wrap each image inside an anchor tag and link each anchor to your personal social media accounts.
  5. Give each image meaningful alt text, such as "GitHub profile", because the image is the only content of the link.
  6. In your CSS, lay out the icons horizontally by applying display: flex, justify-content: center, and column-gap: 1rem to the parent division.

Video Demonstration

Watch WDD231-Site-Footer 1Building a social media icon set in the footer