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.

The assignment footer this week requires linked, social media icons as well as some basic page and author information, and dynamic 'lastModified' 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 a png or jpg file. Rather 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. [❔hover for answer ]
    2. The height of the icon. [❔hover for answer ]
    3. The color of the icon. [❔hover for answer ]
    4. How many shapes are used to create this icon? [❔hover for answer ]
  4. Change the svg by doubling its size.
    Check Your Understanding

    Change the width and height attributes to 48 pixels each.

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

    Change the fill attribute to "purple".

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

    Remove the first path code.

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 and 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.

Video Demonstration

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