Latihan 1: Responsive Components — Tailwind CSS

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

Kode awal sudah punya <nav id="navbar"> berisi <span>Logo</span> dan <div class="flex gap-4"> dengan 3 link: Home, About, Contact. Biarkan isinya. Yang perlu kamu lakukan:

Tambahkan class="flex items-center justify-between p-4" di <nav id="navbar">.

Yang dicek di #navbar:

display: flex (dari flex)
align-items: center (dari items-center)
justify-content: space-between (dari justify-between)
minimal 3 link <a> di dalamnya

p-4 memberi jarak dalam 16px supaya rapi, tapi gak ikut dicek.

Hint

Navbar yang logonya di kiri dan link-nya di kanan adalah flex container. Class-nya dipasang di nav, induknya, bukan di span atau link-nya.
flex menyalakan Flexbox, items-center merata-tengahkan dari atas ke bawah, justify-between mendorong Logo ke kiri dan grup link ke kanan. Tiga link di kode awal jangan dihapus.
<nav id="navbar" class="flex items-center justify-between p-4"> <span>Logo</span> <div class="flex gap-4"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </div> </nav>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Responsive Components — Tailwind CSS

Hint

Memperbarui Aplikasi