Stopka i dopracowanie responsywności
Dodadzą Państwo wielokolumnową stopkę z linkami i formularzem zapisu do newslettera, a następnie sprawdzą responsywność całej strony w punktach przerwania sm, md i lg.
Stopka i dopracowanie responsywności to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Footer Layout Structure
A well-structured landing page footer contains a logo and tagline, a multi-column link grid, and a bottom bar with copyright and legal links. Use a dark background like bg-gray-900 text-gray-400 to visually close the page. The footer container should match the rest of the page with mx-auto max-w-7xl px-4.
<footer class="bg-gray-900 px-4 py-16 text-gray-400">
<div class="mx-auto max-w-7xl">
<!-- Logo + tagline row -->
<!-- Link columns grid -->
<!-- Newsletter signup -->
<!-- Bottom bar -->
</div>
</footer>Footer Logo and Tagline
The footer logo and tagline reinforce the brand as users reach the bottom of the page. Place the logo on the left with a brief description below it. On desktop this column spans two grid columns while link columns each take one. Style the logo mark the same as in the header for brand consistency, and make the tagline text mt-2 text-sm text-gray-500.
<div class="grid grid-cols-2 gap-12 lg:grid-cols-5">
<!-- Logo column spans 2 on large screens -->
<div class="col-span-2">
<a href="/" class="flex items-center gap-2 font-bold text-white">
<div class="h-8 w-8 rounded-lg bg-blue-500"></div>
Launchify
</a>
<p class="mt-4 max-w-xs text-sm text-gray-400 leading-relaxed">
The all-in-one platform for indie makers to build and ship faster.
</p>
<!-- Social links -->
</div>
<!-- Link columns here -->
</div>Multi-Column Link Grid
Place three or four columns of links in the right portion of the footer grid. Each column has a column heading in font-semibold text-white text-sm uppercase tracking-widest followed by a list of links. Each link uses text-sm text-gray-400 hover:text-white transition-colors for a consistent, readable interactive style.
<!-- Product column -->
<div>
<h4 class="text-sm font-semibold uppercase tracking-widest text-white">Product</h4>
<ul class="mt-4 space-y-3">
<li><a href="/features" class="text-sm transition-colors hover:text-white">Features</a></li>
<li><a href="/pricing" class="text-sm transition-colors hover:text-white">Pricing</a></li>
<li><a href="/changelog" class="text-sm transition-colors hover:text-white">Changelog</a></li>
<li><a href="/roadmap" class="text-sm transition-colors hover:text-white">Roadmap</a></li>
</ul>
</div>Newsletter Signup in Footer
An email newsletter signup in the footer captures leads who are interested but not yet ready to buy. Use an inline input-button pair with flex gap-2. Style the input with flex-1 rounded-lg bg-gray-800 px-4 py-2 text-sm text-white placeholder:text-gray-500 and the button with a blue filled style matching the site's primary CTA color.
<div class="mt-12 border-t border-gray-800 pt-12">
<h4 class="text-sm font-semibold text-white">Stay in the loop</h4>
<p class="mt-1 text-sm text-gray-400">Get product updates and tips, no spam.</p>
<form class="mt-4 flex gap-2">
<input
type="email"
placeholder="you@example.com"
class="flex-1 rounded-lg bg-gray-800 px-4 py-2 text-sm text-white
placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button type="submit"
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold
text-white transition hover:bg-blue-700">
Subscribe
</button>
</form>
</div>Social Media Icons
Social links are typically icon-only for visual compactness. Use flex gap-4 to space them and apply h-5 w-5 to each icon SVG. Wrap each in an anchor with text-gray-400 hover:text-white transition-colors. Keep them grouped near the logo in the footer's top section so they are discoverable without cluttering the link columns.
<div class="mt-6 flex gap-4">
<a href="https://twitter.com/launchify"
class="text-gray-400 transition-colors hover:text-white"
aria-label="Twitter">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<!-- Twitter/X icon path -->
</svg>
</a>
<a href="https://github.com/launchify"
class="text-gray-400 transition-colors hover:text-white"
aria-label="GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<!-- GitHub icon path -->
</svg>
</a>
</div>Bottom Bar With Copyright
The footer's bottom bar contains copyright text on the left and legal links (Privacy Policy, Terms of Service) on the right. Use mt-16 flex flex-col items-center justify-between gap-4 border-t border-gray-800 pt-8 sm:flex-row to stack on mobile and go side by side on small screens. Keep the text small with text-xs text-gray-500.
<div class="mt-16 flex flex-col items-center justify-between gap-4
border-t border-gray-800 pt-8 sm:flex-row">
<p class="text-xs text-gray-500">
© 2026 Launchify, Inc. All rights reserved.
</p>
<div class="flex gap-6">
<a href="/privacy" class="text-xs text-gray-500 hover:text-white">Privacy Policy</a>
<a href="/terms" class="text-xs text-gray-500 hover:text-white">Terms of Service</a>
<a href="/cookies" class="text-xs text-gray-500 hover:text-white">Cookie Policy</a>
</div>
</div>Responsive Polish: Mobile Review
With the page complete, conduct a systematic mobile review. Test at 375px (iPhone SE), 390px (iPhone 14), and 414px (large Android). Check that text is readable, buttons are large enough to tap (minimum 44×44px touch targets), and no horizontal scrolling appears. Use browser DevTools to simulate these sizes without a physical device.
<!-- Touch target minimum size check -->
<!-- Buttons should have at minimum py-2.5 px-4 for adequate tap area -->
<button class="rounded-lg px-4 py-2.5 text-sm font-semibold">
<!-- min height ~40px on most browsers -->
</button>
<!-- Even better: use min-h-[44px] to guarantee iOS HIG compliance -->
<button class="flex min-h-[44px] items-center rounded-lg px-4 text-sm font-semibold">
Tap me
</button>Responsive Polish: Tablet Review
At the md breakpoint (768px), ensure two-column layouts appear and single-column stacks have transitioned. The navbar should show its desktop links at md: and hide the hamburger. The hero layout should feel spacious. Feature cards should switch from 1 to 2 columns. Pricing cards should remain stacked until lg: — three columns at 768px is too cramped.
<!-- Tailwind breakpoint reminder -->
<!-- sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px -->
<!-- Feature grid: 1 col → 2 col → 3 col -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Pricing grid: 1 col → 3 col at lg only (not md) -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">Responsive Polish: Typography Scaling
Large hero headlines can overwhelm a small viewport. A common typography scale for headings: text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl. Section headings like feature titles typically go text-2xl md:text-3xl lg:text-4xl. The base body text stays at text-base across all sizes since 16px is readable everywhere.
<!-- Responsive hero heading -->
<h1 class="text-3xl font-extrabold tracking-tight text-gray-900
sm:text-4xl md:text-5xl lg:text-6xl">
Ship faster with Launchify
</h1>
<!-- Responsive section heading -->
<h2 class="text-2xl font-bold tracking-tight text-gray-900
md:text-3xl lg:text-4xl">
Features that scale with you
</h2>Final Spacing and Padding Audit
Go through every section and verify that vertical spacing is consistent and intentional. Sections with py-24 should feel generous but not empty. Within sections, component spacing like mb-16 for headers and gap-8 for grids should create breathing room without excess. Reduce padding at smaller breakpoints when sections feel too tall on mobile.
<!-- Responsive vertical padding -->
<section class="px-4 py-16 md:py-24">
<!-- Less vertical space on mobile, more on desktop -->
</section>
<!-- Responsive grid gap -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-3 lg:gap-10">
<!-- Gap scales up as more horizontal space is available -->
</div>Performance and Accessibility Final Check
Before considering the landing page complete, run a Lighthouse audit in Chrome DevTools. Check for missing alt attributes on images, insufficient color contrast ratios, and missing aria-label on icon-only buttons. Verify that the sticky navbar does not overlap content and that the page has logical heading hierarchy: one h1, then h2 per section, then h3 per card.
<!-- Common accessibility fixes -->
<!-- 1. Alt text on all images -->
<img src="/hero.png" alt="Launchify dashboard showing project overview">
<!-- 2. aria-label on icon-only buttons -->
<button aria-label="Open navigation menu" class="p-2 md:hidden">
<svg><!-- hamburger icon --></svg>
</button>
<!-- 3. Logical heading structure -->
<!-- h1: Hero headline -->
<!-- h2: Features, Testimonials, Pricing -->
<!-- h3: Each feature card title, each plan name -->Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a multi-column footer with logo, link columns, newsletter signup, and bottom bar, conducting responsive reviews at mobile, tablet, and desktop breakpoints, and auditing typography, spacing, and accessibility before launch. Next up we build a complete dashboard UI starting with the shell and sidebar.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Stopka i dopracowanie responsywności” jest bezpłatna?
Tak — pełny tekst „Stopka i dopracowanie responsywności” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Stopka i dopracowanie responsywności”?
Dodadzą Państwo wielokolumnową stopkę z linkami i formularzem zapisu do newslettera, a następnie sprawdzą responsywność całej strony w punktach przerwania sm, md i lg. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Stopka i dopracowanie responsywności”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Sekcja hero i nawigacja
- Sekcje funkcji i dowodów społecznych
- Sekcja tabeli cenowej
- Stopka i dopracowanie responsywności