How to Create a Responsive Website Footer

Web Development Post by Christopher Spicer
Responsive Website Footer

The beginning and the end of your web page are both important elements that serve to frame the main content in between. Most web developers put a great deal of thought into to designing the header and banner that appear at the beginning of the page. But the end of the page, though equally important, is often overlooked.

This area is called the footer, and it's a key element that lets visitors know that the end of your page is not the end of their journey.

So what exactly is a footer? Simply stated, a footer is the conclusion to your website. Typically located along the bottom of each page, it supplements the main content area with additional information and actions that visitors may take.

A footer may include:

  • Copyright information
  • Links to internal and external pages (site navigation, partners, sponsors, resources, etc.)
  • Links to connect and share on social media
  • Links to technical and legal information (sitemap, terms of service, privacy policy, etc.)
  • Fields and buttons to send a message or subscribe
  • Contact information (map, address, phone number, email, etc.)
  • Testimonials
  • A call-to-action (CTA) button

This article, which is part of a series of web development tutorials, will guide you through the process of creating a website footer. We'll use HTML, CSS, and JavaScript to construct four footer layouts - a footer with a copyright, a footer with a back-to-top button, a footer with a link menu, and a footer with subscription and share bars. With each example, we’ll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life.

This article builds upon topics discussed in How to Create a Responsive Website Layout.

In this article, we'll use our standard HTML document structure and CSS naming convention.

Skip Ahead

Looking for something specific? Select a topic in this article to read more: