JWS Docs / Next Build Steps / Footer

Adding Footer Contents

Here in this final section of the page the <footer> we find the snippet file has provided us with three div's each with different class names. The first two "social_icons" and "contact_panel" have no other elements inside them, unlike the third "copyrights" which contains a <p> with the beginnings of the copyright details inside.

   
      </main>      
      <footer>
         <div class="social_icons">
         </div>
         <div class="contact_panel">
         </div>
         <div class="copyrights">
         <p>Copyright &copy; <time datetime="2025">2025</time> </p>
         </div>
      </footer>
   

Social Links

We are going to start with the "social_icons" div first, where we will be adding our dummy social media links for now, but you can link them up to your own social media accounts if you want to.

If you followed along previously with our docs Build Steps you will already be familiar with adding links and image source here.

This time though instead of just filling in a couple of the tags we are going to learn how to create the whole link element using Emmet commands.

By first making a line space inside the div and then typing: (a>img)*3

   
     <div class="social_icons">
     <a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a>
     </div>
   

You should now see three <a> elements each containing an <img>.

To make it easier for us to read we'll move each <a> to a separate line by pressing Enter / Return after the first and second closing anchor </a>.

   
     <div class="social_icons">
         <a href=""><img src="" alt=""></a>
         <a href=""><img src="" alt=""></a>
         <a href=""><img src="" alt=""></a>
     </div>
   

As you can see like previously each <img> needs width="" and height="" adding before the alt.

    
     <div class="social_icons">
         <a href=""><img src="" width="" height="" alt=""></a>
         <a href=""><img src="" width="" height="" alt=""></a>
         <a href=""><img src="" width="" height="" alt=""></a>
     </div>
   

Next we are going to add the URL to the <a> inside the href="", though if like us you are adding dummy links then add a hash/pound # here instead.

Like our other <img> elements we now need to add details to the src="" width="" height="" and alt="" tags.

    
     <div class="social_icons">
         <a href="#"><img src="../img/github.svg" width="31" height="30" alt="Github icon"></a>
         <a href="#"><img src="../img/facebook.svg" width="30" height="30" alt="Facebook icon"></a>
         <a href="#"><img src="../img/twitter.svg" width="39" height="30" alt="Twitter icon"></a>
     </div>
   

We are also going to add two more tags to the <img> this time:

loading="lazy" as the footer images are not likely to be visible until scrolling down the page this will delay them loading until necessary.

title="" in case the user does not know what social networks the images represent a title will appear when they are hovered over.

    
     <div class="social_icons">
         <a href="#"><img src="../img/github.svg" width="31" height="30" loading="lazy" title="Github" alt="Github icon"></a>
         <a href="#"><img src="../img/facebook.svg" width="30" height="30" loading="lazy" title="Facebook" alt="Facebook icon"></a>
         <a href="#"><img src="../img/twitter.svg" width="39" height="30" loading="lazy" title="Twitter" alt="Twitter icon"></a>
     </div>
   

Contact Details

In this "contact_panel" div we will be adding a <address> element with two <p> inside each containing an <a>.

We can add these using Emmet by making a line space inside the div and then typing: address>(p>a)*2

    
     <div class="contact_panel">
        <address>
         <p><a href=""></a></p>
         <p><a href=""></a></p>
        </address>
     </div>
   

For those following along you should now add the following dummy details.

Or you can add your own details if you wish and if you need more lines within the <address> element adjust the *2 (times by number) in the Emmet command.

    
     <div class="contact_panel">
        <address>
         <p>Email: <a href="#">ayeup@someones_email.address</a></p>
         <p>Tel: <a href="#">00000 000000</a></p>
        </address>
     </div>
   

Copyright

In our final footer div "copyrights" we find that the snippet file has already provided us with all the elements needed.

A <p> containing the word "Copyright" plus a © the copyright symbol is written using the entity name of © (we have a link on our extras page for more entity names/codes) then we have a <time> element with a datetime="" tag.

   
         <div class="copyrights">
         <p>Copyright &copy; <time datetime="2025">2025</time> </p>
         </div>
   

All we need to do is make sure that the time is displaying the same correct year within the datetime="2025" and before the closing </time>.

Then lastly you need to add a name before the closing </p> whether that is yours, a company or an organisation. Making sure you leave a space before the name.

Hopefully your complete footer should look like this.

   
         <div class="copyrights">
         <p>Copyright &copy; <time datetime="2025">2025</time>  Sir Youllfind Itsmine</p>
         </div>
   

Congratulations you have now made a webpage from scratch!!

Let's continue on and learn how to review your new site using GitHub Codespaces.