MoreLesson 266Preview gratis
Chat Messages
Lesson ini bagian dari How To · Semua level
Ringkasan
Chat messages adalah tampilan percakapan berbentuk gelembung yang dipisahkan antara pengirim dan penerima. Flexbox memudahkan penataan pesan ke kiri atau kanan, sedangkan lebar maksimum menjaga baris tetap nyaman dibaca. Sertakan waktu dan penanda pengirim yang jelas agar percakapan mudah diikuti.
Poin kunci
- Gunakan flex column pada wadah chat agar pesan tersusun vertikal.
- align-self: flex-end menempatkan gelembung pengirim di sisi kanan.
- max-width pada gelembung mencegah baris teks terlalu panjang.
- Elemen <time datetime="..."> memberi makna semantik pada waktu pesan.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.