Kembali ke Semua Kursus
JALUR HTML

Dasar-Dasar HTML

Pelajari bahasa markup dasar untuk web. Menyusun dokumen, tag, formulir, dan semantik.

1

Dasar-dasar

Pelajari struktur inti dan sintaksis untuk membuat halaman web dari awal

Apa itu HTML? (Mulai)
Struktur Dasar HTML
Tag dan Elemen
Tag Bersarang dan Penutup
Komentar dalam HTML
Judul
Paragraf
Istirahat Garis
Teks Tebal dan Miring
Tebal dan Miring Lagi
Rekap - Pemformatan
Daftar Tidak Berurutan
Daftar Pesanan
Daftar Bersarang
Rekap - Daftar
Ikhtisar Proyek
Judul dan Deskripsi Resep
Bahan-bahan
Tangga
Atribut HTML
Tautan
Tautan Halaman Baru
Gambar
Atribut Gambar
Divisi
Rentang Sebaris
Tag Semantik
Bagian dan Artikel
Rekap - Tata Letak
Ikhtisar Proyek
Bagian Tajuk
Foto profil
Bagian Tentang Saya
Tautan Sosial
Dasar-dasar Formulir
Masukan Teks
Atribut Masukan
Bidang Kata Sandi
Label untuk Masukan
Rekap - Bentuk Dasar
Tombol Radio
kotak centang
Dropdown
Tombol
Tombol di Formulir
Rekap - Formulir #1
Rekap - Formulir #2
Dasar-Dasar Tabel
Menambahkan Keterangan
Rentang Baris dan Kolom
Rekap - Tabel
Ikhtisar Proyek
Bagian Tajuk
Bagian Detail Acara
Formulir Pendaftaran
Bagian Catatan Kaki
Kartu Profil Sederhana
Kartu Undangan Acara
Halaman Artikel Sederhana
Daftar Buku Favorit
2

Menata gaya dengan CSS

Hidupkan halaman web Anda dengan warna, tata letak, dan gaya

Apa itu CSS?
Sintaks CSS
Komentar CSS
Tag Kepala
Tag Judul
CSS sebaris
CSS dalaman
CSS eksternal
Tantangan Penataan Dasar
Pengantar Selector
Jenis Pemilih
Pemilih Kelas
Pemilih ID
Pemilih Grup
Pemilih Universal
Tantangan Seleksi
Warna Teks
Keluarga Font
Ukuran Huruf
Berat Font
Perataan Teks
Dekorasi Teks
Rekap Tantangan #1
Rekap Tantangan #2
Warna Latar Belakang
Warna HEX
Warna RGB
Transparansi dengan RGBA
Rekap Tantangan #1
Dasar-dasar Tipografi
Penataan Teks
Warna dan Latar Belakang
Apa Model Kotaknya?
Lapisan
Margin
Perbatasan
Lebar dan Tinggi
Tantangan Rekap
Ukuran Kotak
Radius Perbatasan
Meluap
Bayangan Kotak
Tantangan Rekap
Apa itu Kotak Fleksibel?
Arah Fleksibel
Membenarkan Konten
Sejajarkan Item
Pusat Sempurna
Tantangan Kotak Fleksibel
Tubuh
Wadah Formulir
Masukan
Tombol
Blokir vs Elemen Sebaris
Dasar-dasar Pemosisian
Posisi Relatif
Penentuan Posisi Absolut
Penentuan Posisi Tetap
Dasar-dasar Indeks Z
Tantangan Rekap
Apa itu Desain Responsif?
Tag Meta Area Pandang
Tata Letak yang Cair
Unit Area Pandang
Dasar-dasar Kueri Media
Gambar Fleksibel
Menu Navigasi
Selamat Datang Tajuk
Tentang Bagian
Bagian Kontak
Tag Area Pandang
Kueri Media
Susun Barang
Daftar Film
Kartu Undangan Pernikahan
Notifikasi Mengambang
3

Penguasaan CSS

Membawa Anda keterampilan css ke level selanjutnya!

Perkenalan
Pemilih Keturunan
Pemilih Anak
Pemilih Saudara yang Berdekatan
Pemilih Saudara Umum
Tantangan Rekap
Kelas Pseudo
Efek Melayang
Efek Fokus
Gaya Aktif
Tantangan Rekap
Kelas semu struktural
Menyasar Anak Pertama
Menargetkan Anak Terakhir
Kekuatan Pola: Menggunakan anak ke-n
Tantangan Rekap
Tambahkan Submenu
Tampilkan Submenu
Lebih banyak gaya
Masukan dan tombol
Gradien
Filter CSS
Mengubah
Transisi & Efek Melayang
Tantangan Rekap
Gaya Bagian Header
Gaya tombolnya
Tata Letak Bagian
Tata Letak Kartu
Tambahkan Sentuhan Akhir
Dasar-dasar Jaringan
Penempatan Item baris kisi
Area yang Dinamakan
Tantangan Rekap
Mengatur kisi-kisi
Tajuk
Bagian utama
catatan kaki
Sorot Menu Aktif
Baris Tabel Zebra
Efek Melayang Tombol
Tata Letak Kartu Kotak
Gambar Pahlawan Kabur
4

Bagian Depan Praktis

Gabungkan struktur dan gaya untuk mendesain halaman web yang lengkap dan responsif

Variabel
Menggunakan Variabel CSS
Variabel untuk Token Desain
Variabel Lokal
Tantangan Rekap
Apa yang dimaksud dengan “mengutamakan seluler”.
Tipografi Mobile-First
Navigasi yang Memprioritaskan Seluler
Gambar yang Memprioritaskan Seluler
Formulir yang Memprioritaskan Seluler
Tantangan Rekap
Tema dalam CSS
Dasar-dasar Mode Gelap/Terang
Warna & Sorotan Aksen
Tema Tipografi
Tantangan Rekap
Variabel
Seluler-Pertama
Tema
Menu tarik-turun
tab
Lencana
Keterangan alat
Spanduk Pemberitahuan
Tantangan Rekap
Tata Letak Cawan Suci
Tata Letak Kotak Kartu
Bilah Sisi + Tata Letak Konten
Tata Letak Layar Terpisah
Header / Footer Lengket
Tantangan Rekap
Kartu Profil
Kotak Galeri Cokelat
Tujuh Keajaiban
Tujuh Keajaiban Baru
5

JavaScript sedang Beraksi

Jelajahi bagaimana javascript digunakan dengan html dan css

tab
Akordeon (perluas/ciutkan)
Modal (buka/tutup)
tarik-turun
Validasi masukan
Pesan kesalahan khusus
Kirim tombol
Pesan roti panggang
Spanduk yang dapat ditutup
Memuat indikator
Tampilkan Pesan Toast
Sembunyikan Pesan Toast
Tombol menu burger seluler
Navigasi samping yang dapat dilipat
Menu tarik-turun
Tema gelap/terang
Simpan pilihan tema
Transisi CSS
Menganimasikan elemen pada gulir
Animasi klik tombol
Variabel
Pendengar acara
transisi CSS
Akordeon FAQ interaktif
Formulir Masuk
Navbar Responsif
Halaman Blog dengan Tema