Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Responsive Footer
The footer is the last thing users see - it contains navigation links, contact info, social media, and legal text. Build a professional multi-column footer that stacks cleanly on mobile and looks organized on desktop.
Footer Structure
- Multi-column grid - 4 columns on desktop: logo/about, links, links, newsletter/social
- Mobile stacking - Single column on mobile with each section stacking vertically
- Link groups - Column headers with link lists underneath, styled consistently
- Social icons - Row of social media icons/links with hover color transitions
- Newsletter form - Simple email input + subscribe button in a flex row
- Bottom bar - Copyright text with horizontal rule separator. Links to terms/privacy
- Branding - Logo and brief description in the first column
Footer Code
/* Footer */
.footer {
background: #1a1a2e;
color: #a0a0b0;
padding: 60px 24px 24px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.footer-brand .logo {
font-size: 1.5rem;
font-weight: 800;
color: #E44D26;
margin-bottom: 12px;
}
.footer-brand p {
line-height: 1.6;
font-size: 0.9em;
}
.footer-links h4 {
color: white;
margin-bottom: 16px;
font-size: 1em;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
color: #a0a0b0;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover { color: white; }
.footer-bottom {
border-top: 1px solid #2a2a4a;
margin-top: 48px;
padding-top: 20px;
text-align: center;
font-size: 0.85em;
max-width: 1200px;
margin-inline: auto;
}Tip
Footer link colors should be muted (#a0a0b0) with a white hover transition. This subtle interaction indicates clickability without competing with page content. Column headings should be white to establish visual hierarchy.
Flexbox is ideal for one-dimensional layouts (row or column)
Common Mistake
Using a separate layout approach for footer columns. Use the same repeat(auto-fit, minmax(200px, 1fr)) Grid pattern used throughout the course. The footer is just another responsive grid - it stacks automatically on mobile.
Practice Task
Build a complete footer: (1) 4-column auto-fit grid: brand/about, product links, company links, newsletter, (2) Email input + subscribe button in a flex row, (3) Social media icon row with hover color change, (4) Bottom bar with copyright and legal links.
Quick Quiz
Key Takeaways
- The footer is the last thing users see - it contains navigation links, contact info, social media, and legal text.
- Multi-column grid - 4 columns on desktop: logo/about, links, links, newsletter/social
- Mobile stacking - Single column on mobile with each section stacking vertically
- Link groups - Column headers with link lists underneath, styled consistently