Latihan 1: Proyek: Landing Page — Tailwind CSS

Latihan 1 dari materi Proyek: Landing Page di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya hero dengan #hero, #headline, #tagline dan #cta. Biarkan id dan teksnya, lalu tambahkan class:

<section id="hero">: text-center py-16 px-4.
<h1 id="headline">: text-4xl font-bold.
<p id="tagline">: mt-4 text-gray-500.
<button id="cta">: mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg.

Yang dicek, lewat gaya yang dihitung browser:

#hero: text-align center (text-center).
#headline: font-weight 700 (font-bold).
#cta: border-radius 8px (rounded-lg) dan padding-left 24px (px-6).

Class lainnya (jarak, ukuran dan warna) gak dinilai, tapi tetap pasang supaya hero-nya sama dengan langkah 1 di materi.

Hint

Tiap bagian sudah punya id yang dibaca penilai. Kamu cuma menambah atribut class berisi utility, tanpa mengubah id dan teksnya.
Section butuh text-center, judul butuh font-bold, dan tombol butuh px-6 untuk padding kiri-kanan 24px serta rounded-lg untuk sudut 8px. Lengkapi dengan jarak dan warna dari langkah 1.
<section id="hero" class="text-center py-16 px-4"> <h1 id="headline" class="text-4xl font-bold">BelajarWeb.dev</h1> <p id="tagline" class="mt-4 text-gray-500">Platform belajar web development interaktif</p> <button id="cta" class="mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg">Mulai Belajar</button> </section>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Proyek: Landing Page — Tailwind CSS

Hint

Memperbarui Aplikasi