JWS Docs / Build Steps / Changing the Footer

Footer

The footer has been split into three areas using <div> elements one for <div class="social_icons"> containing social media links, the second <div class="contact_panel"> displaying contact details and the third <div class="copyrights"> displaying the copyright details.

The CSS then controls these <div> elements to be 100% width in mobile/small screen views and when the browser/device screen is wide enough the top two become 50% width of the browser window sitting side by side, with the third div staying 100% width and its contents centred.

Social icon links

Inside the "social_icons" div we can see four anchor elements <a> </a> these link our page to other webpages or websites by the URL which we write inside a href="" though this part is not visible on the webpage.

<a href="https://github.com/fiddleandfettle"></a>

We now need to add something visible for your users to click on to activate the link this is most often a written link between the <a> </a> tags e.g. GitHub, but you can also use an image too.

Just as we are doing by using our svg icon image, so we need to add an img tag.

Like before the <img> must contain a source="" width="" height="" and alt=""

Though this time we are adding something new loading="lazy" which lets the browser know that this image will not need loading with the initial page load, only when the user scrolls down the webpage and the image becomes visible.

<a href="#"><img src="img/github.svg" width="31" height="30" loading="lazy" alt="Github icon"></a>

after the the <img> tag closes the </a> also needs to close.

Then we need to make sure the "social_icons" </div> is closed.

Obviously if you are making this website with your own content you may wish to keep or delete some of these social links. But if you are planning on just making this a dummy site that does not link to anywhere please add a # to the href="" so not to have any empty links which upsets the search engines.

Contact details

Next we have the "contact_panel" div. Here you will find a <p>Add contact details here for example</p> you can either add your own text here or remove it.

This is followed by the <address> </address> tag, within here you can add your telephone number and email address like shown or even add a postal address.

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

After you have written in the contact details the "contact_panel" div needs to close </div>.

Copyright details

Lastly we have the "copyrights" div. This contains a <p> where we state our copyright details by adding the word Copyright the © symbol and a <time> element with a datetime="" tag. This is then followed by your details e.g. company/organisation's name.

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

After you have filled in the copyright details the "copyrights" div needs to close </div>.

Below this the footer should be closed </footer>

Then the </body> and lastly the </html>

And that is it your first website page is finished!!!