Kursus ini menguraikan dasar-dasar CSS menjadi bagian-bagian yang jelas dan mudah dipahami. Dalam beberapa modul berikutnya, Anda akan mempelajari cara kerja aspek inti CSS dan cara menggunakannya secara efektif dalam proyek Anda. Gunakan panel menu dengan logo "Learn CSS" untuk membuka modul.
Anda akan mempelajari dasar-dasar CSS seperti model kotak, susunan dan spesifisitas, flexbox, petak, dan z-index. Anda juga akan mempelajari fungsi, jenis warna, gradien, properti logis, dan pewarisan untuk menjadikan Anda pengembang frontend yang serba bisa dan siap menangani antarmuka pengguna apa pun.
Setiap modul penuh dengan demo interaktif dan penilaian mandiri untuk menguji pengetahuan Anda. Selain belajar melalui membaca dan demo, ada episode podcast yang menyertai setiap topik sebagai cara lain untuk belajar dan terus memperluas pengetahuan Anda.
Kursus ini dibuat untuk developer CSS pemula dan tingkat lanjut. Anda dapat mempelajari seri ini dari awal hingga akhir untuk mendapatkan pemahaman umum tentang CSS dari atas hingga bawah, atau Anda dapat menggunakannya sebagai referensi untuk topik gaya tertentu. Bagi yang baru mengenal pengembangan web secara keseluruhan, lihat Learn HTML untuk mempelajari cara menulis markup dan menautkan stylesheet.
Berikut hal-hal yang akan Anda pelajari:
Model Box
Karena semua yang ditampilkan CSS adalah kotak, memahami cara kerja Model Kotak CSS adalah dasar inti CSS.
Pemilih
Untuk menerapkan CSS ke elemen, Anda harus memilihnya. CSS memberi Anda sejumlah cara berbeda untuk melakukannya, dan Anda dapat mempelajarinya dalam modul ini.
Menyusun
Menyematkan aturan gaya CSS dapat membuat stylesheet Anda lebih teratur, lebih mudah dibaca, dan lebih mudah dikelola.
Cascade
Terkadang dua aturan CSS atau lebih yang bersaing dapat diterapkan ke suatu elemen. Cari tahu cara browser memilih mana yang akan digunakan, dan cara mengontrol pilihan ini.
Spesifisitas
Modul ini membahas lebih dalam spesifisitas, yang merupakan bagian penting dari susunan bertingkat.
Pewarisan
Beberapa properti CSS diwarisi jika Anda tidak menentukan nilainya. Cari tahu cara kerjanya dan cara menggunakannya untuk keuntungan Anda dalam modul ini.
Warna
Ada beberapa cara berbeda untuk menentukan warna di CSS. Modul ini membahas nilai warna yang paling umum digunakan.
Satuan Ukuran
Cari tahu cara menentukan ukuran elemen menggunakan CSS, dengan memanfaatkan media web yang fleksibel.
Tata letak
Ringkasan berbagai metode tata letak yang dapat Anda pilih saat membangun tata letak komponen atau halaman.
Flexbox
Flexbox adalah mekanisme tata letak yang dirancang untuk menata kelompok item dalam satu dimensi. Pelajari cara menggunakannya dalam modul ini.
Petak
Tata Letak Petak CSS menyediakan sistem tata letak dua dimensi, yang mengontrol tata letak dalam baris dan kolom. Temukan semua yang ditawarkan petak.
Properti Logis
Properti dan nilai logis yang relatif terhadap alur ditautkan ke alur teks, bukan bentuk fisik layar. Pelajari cara memanfaatkan pendekatan CSS yang lebih baru ini.
Properti Kustom
Properti kustom, atau variabel CSS, memungkinkan Anda mengatur dan menggunakan kembali nilai di CSS, sehingga gaya Anda lebih fleksibel dan lebih mudah dipahami.
Spasi
Cari tahu cara memilih metode terbaik untuk mengatur jarak elemen tata letak yang Anda gunakan dan komponen yang Anda buat.
Elemen semu
Elemen semu seperti menambahkan atau menargetkan elemen tambahan tanpa harus menambahkan lebih banyak HTML. Mereka memiliki berbagai peran, dan Anda dapat mempelajarinya dalam modul ini.
Pseudo-class
Pseudo-class memungkinkan Anda menerapkan CSS berdasarkan perubahan status. Artinya, desain Anda dapat bereaksi terhadap input pengguna, seperti alamat email yang tidak valid.
Batas
Batas memberikan bingkai untuk kotak Anda. Cari tahu cara mengubah ukuran, gaya, dan warna batas menggunakan CSS.
Bayangan
Ada sejumlah cara untuk menambahkan bayangan ke teks dan elemen di CSS. Pelajari cara menggunakan setiap opsi, dan tugas yang dirancang untuk opsi tersebut.
Fokus
Pahami pentingnya fokus dalam aplikasi web Anda. Anda akan mempelajari cara mengelola fokus, dan cara memastikan jalur melalui halaman Anda berfungsi untuk pengguna yang menggunakan mouse dan pengguna yang menggunakan keyboard untuk melakukan navigasi.
Kursor dan penunjuk
Kursor adalah cara penting bagi pengguna Anda untuk mengetahui apa yang sedang mereka interaksikan. Dalam modul ini, pelajari cara Anda dapat menata kursor dalam situasi tertentu.
Indeks Z dan konteks penumpukan
Cari tahu cara mengontrol urutan elemen yang ditumpuk di atas satu sama lain dengan menggunakan z-index dan konteks penumpukan.
Penentuan posisi anchor
Penempatan anchor CSS menyediakan cara untuk menempatkan elemen secara deklaratif relatif terhadap elemen lain.
Popover dan dialog
Popover adalah elemen apa pun dengan atribut popover, dan berguna untuk berbagai pola interaktif, termasuk tooltip, pemberitahuan, toast, dan lainnya.
Fungsi
CSS memiliki berbagai fungsi bawaan. Pelajari beberapa fungsi utama dan cara menggunakannya.
Jalur, bentuk, pemangkasan, dan masking
Jalur, bentuk, pemangkasan, dan masking memberi developer kemampuan untuk merender bentuk kompleks di CSS melalui berbagai fungsi yang dapat menciptakan pengalaman yang berkesan bagi pengguna Anda.
Gradien
Dalam modul ini, Anda akan mengetahui cara menggunakan berbagai jenis gradien yang tersedia di CSS. Gradien dapat menciptakan berbagai efek yang berguna, tanpa perlu aplikasi grafis untuk membuat gambar.
Animasi
Animasi adalah cara yang bagus untuk menyoroti elemen interaktif, dan menambahkan daya tarik dan keseruan pada desain Anda. Cari tahu cara menambahkan dan mengontrol efek animasi dengan CSS.
Filter
Filter di CSS berarti Anda dapat menerapkan efek yang mungkin hanya Anda pikirkan dapat dilakukan di aplikasi grafis. Dalam modul ini, Anda dapat menemukan apa yang tersedia.
Mode Perpaduan
Buat efek komposisi dengan menggabungkan dua atau lebih lapisan, dan pelajari cara mengisolasi gambar dengan latar belakang putih dalam modul ini tentang mode campuran.
Daftar
Secara struktural, daftar terdiri dari elemen penampung daftar yang diisi dengan item daftar. Dalam modul ini, Anda akan mempelajari cara menata gaya semua bagian daftar.
Penghitung
CSS menyediakan beberapa cara untuk mengontrol penghitung dalam daftar untuk berbagai kasus penggunaan. Dalam modul ini, Anda akan mempelajari cara mengontrol penghitung dalam daftar.
Transisi
Pelajari cara menentukan transisi antar-status elemen. Gunakan transisi untuk meningkatkan pengalaman pengguna dengan memberikan masukan visual untuk interaksi pengguna.
Transisi Tampilan untuk SPA
Transisi Tampilan memberi Anda cara untuk menunjukkan kontinuitas atau konteks di antara halaman di SPA Anda.
Overflow
Overflow adalah cara Anda menangani konten yang tidak sesuai dengan ukuran induk yang ditetapkan. Dalam modul ini, Anda akan berpikir kreatif dan mempelajari cara menata gaya konten yang meluap.
Latar belakang
Pelajari cara mendesain latar belakang kotak menggunakan CSS.
Teks dan tipografi
Pelajari cara menata teks di web.
Kueri penampung
Tidak seperti kueri media, kueri penampung memungkinkan Anda melakukan penyesuaian yang lebih spesifik pada elemen berdasarkan ukuran dan status elemen induknya, atau penampung.
Kesimpulan dan langkah selanjutnya
Referensi lainnya untuk membantu Anda mengambil langkah selanjutnya.
Jadi, apakah Anda siap mempelajari CSS? Mari kita mulai.