Footer dan Penyempurnaan Responsif
Tambahkan footer multikolom dengan tautan dan pendaftaran buletin, lalu audit seluruh halaman untuk tata letak responsif pada breakpoint sm, md, dan lg.
Footer dan Penyempurnaan Responsif adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Struktur Tata Letak Footer
Footer halaman arahan yang terstruktur dengan baik berisi logo dan slogan, kisi tautan multi-kolom, serta bilah bawah dengan hak cipta dan tautan hukum. Gunakan latar belakang gelap seperti bg-gray-900 text-gray-400 untuk menutup halaman secara visual. Wadah footer harus selaras dengan bagian halaman lainnya menggunakan 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>Logo dan Slogan Footer
Logo dan slogan footer memperkuat merek saat pengguna mencapai bagian bawah halaman. Letakkan logo di sebelah kiri dengan deskripsi singkat di bawahnya. Di desktop, kolom ini membentang sepanjang dua kolom kisi, sedangkan setiap kolom tautan hanya menempati satu kolom. Gunakan gaya tanda logo yang sama seperti pada header untuk menjaga konsistensi merek, dan atur teks slogan dengan 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>Kisi Tautan Multi-Kolom
Letakkan tiga atau empat kolom tautan di bagian kanan kisi footer. Setiap kolom memiliki judul kolom dengan font-semibold text-white text-sm uppercase tracking-widest, diikuti daftar tautan. Setiap tautan menggunakan text-sm text-gray-400 hover:text-white transition-colors untuk gaya interaktif yang konsisten dan mudah dibaca.
<!-- 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>Pendaftaran Buletin di Footer
Formulir pendaftaran buletin email di footer menangkap calon pelanggan yang tertarik tetapi belum siap membeli. Gunakan pasangan input dan tombol sebaris dengan flex gap-2. Atur gaya input dengan flex-1 rounded-lg bg-gray-800 px-4 py-2 text-sm text-white placeholder:text-gray-500 dan gunakan gaya tombol biru terisi yang sesuai dengan warna CTA utama situs.
<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>Ikon Media Sosial
Tautan media sosial biasanya hanya menggunakan ikon agar tampil ringkas secara visual. Gunakan flex gap-4 untuk mengatur jaraknya dan terapkan h-5 w-5 pada setiap ikon SVG. Bungkus setiap ikon dalam jangkar dengan text-gray-400 hover:text-white transition-colors. Kelompokkan ikon di dekat logo pada bagian atas footer agar mudah ditemukan tanpa memenuhi kolom tautan.
<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>Bilah Bawah dengan Hak Cipta
Bilah bawah footer berisi teks hak cipta di sebelah kiri dan tautan hukum (Kebijakan Privasi, Ketentuan Layanan) di sebelah kanan. Gunakan mt-16 flex flex-col items-center justify-between gap-4 border-t border-gray-800 pt-8 sm:flex-row agar elemen bertumpuk di perangkat seluler dan berjajar berdampingan pada layar kecil. Gunakan teks kecil dengan 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>Penyempurnaan Responsif: Tinjauan Seluler
Setelah halaman selesai, lakukan tinjauan seluler secara sistematis. Uji pada 375px (iPhone SE), 390px (iPhone 14), dan 414px (Android besar). Pastikan teks mudah dibaca, tombol cukup besar untuk diketuk (target sentuh minimal 44×44px), dan tidak muncul pengguliran horizontal. Gunakan DevTools peramban untuk menyimulasikan ukuran tersebut tanpa perangkat fisik.
<!-- 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>Penyempurnaan Responsif: Tinjauan Tablet
Pada titik henti md (768px), pastikan tata letak dua kolom muncul dan tumpukan satu kolom telah beralih. Bilah navigasi harus menampilkan tautan desktop pada md: dan menyembunyikan tombol hamburger. Tata letak hero harus terasa lapang. Kartu fitur harus beralih dari satu menjadi dua kolom. Kartu harga harus tetap bertumpuk hingga lg:—tiga kolom pada 768px terlalu sempit.
<!-- 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">Penyempurnaan Responsif: Penskalaan Tipografi
Judul hero yang besar dapat terasa berlebihan pada area pandang kecil. Skala tipografi yang umum untuk judul adalah: text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl. Judul bagian seperti judul fitur biasanya menggunakan text-2xl md:text-3xl lg:text-4xl. Teks isi dasar tetap menggunakan text-base pada semua ukuran karena 16px mudah dibaca di mana pun.
<!-- 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>Audit Akhir Jarak dan Padding
Periksa setiap bagian dan pastikan jarak vertikal konsisten serta memiliki tujuan. Bagian dengan py-24 harus terasa lapang tetapi tidak kosong. Di dalam bagian, jarak antarkomponen seperti mb-16 untuk header dan gap-8 untuk kisi harus menciptakan ruang bernapas tanpa berlebihan. Kurangi padding pada titik henti yang lebih kecil jika bagian terasa terlalu tinggi di perangkat seluler.
<!-- 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>Pemeriksaan Akhir Kinerja dan Aksesibilitas
Sebelum menganggap halaman arahan selesai, jalankan audit Lighthouse di Chrome DevTools. Periksa atribut alt yang hilang pada gambar, rasio kontras warna yang tidak memadai, dan aria-label yang hilang pada tombol yang hanya berisi ikon. Pastikan bilah navigasi tetap tidak menutupi konten dan halaman memiliki hierarki judul yang logis: satu h1, lalu h2 untuk setiap bagian, kemudian h3 untuk setiap kartu.
<!-- 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 -->Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep penguasaan Tailwind CSS dari pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, Anda mempelajari: membangun footer multi-kolom dengan logo, kolom tautan, pendaftaran buletin, dan bilah bawah; melakukan tinjauan responsif pada titik henti seluler, tablet, dan desktop; serta mengaudit tipografi, jarak, dan aksesibilitas sebelum peluncuran. Selanjutnya, kita akan membangun antarmuka dasbor lengkap, dimulai dari kerangka dan bilah samping.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Footer dan Penyempurnaan Responsif” gratis?
Ya — teks lengkap “Footer dan Penyempurnaan Responsif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Footer dan Penyempurnaan Responsif”?
Tambahkan footer multikolom dengan tautan dan pendaftaran buletin, lalu audit seluruh halaman untuk tata letak responsif pada breakpoint sm, md, dan lg. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Footer dan Penyempurnaan Responsif” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Bagian Hero dan Navigasi
- Bagian Fitur dan Bukti Sosial
- Bagian Tabel Harga
- Footer dan Penyempurnaan Responsif