Kursus ini menguraikan dasar-dasar CSS menjadi potongan-potongan yang jelas dan mudah dicerna. Dalam beberapa modul berikutnya, Anda akan mempelajari cara kerja aspek inti CSS dan cara menggunakannya secara efektif dalam project. Gunakan panel menu dengan logo "Learn CSS" untuk membuka modul.
Anda akan mempelajari dasar-dasar CSS seperti model boks, cascade dan kekhususan, flexbox, grid, dan indeks z. Anda juga akan mempelajari fungsi, jenis warna, gradien, sifat logis, dan pewarisan untuk menjadikan Anda developer frontend yang berpengalaman dan siap digunakan pada antarmuka pengguna apa pun.
Setiap modul penuh dengan demo interaktif dan penilaian mandiri untuk Anda gunakan untuk menguji pengetahuan Anda. Selain belajar melalui pembacaan 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 lanjutan. Anda dapat mempelajari rangkaian ini dari awal hingga akhir untuk mendapatkan pemahaman umum tentang CSS dari atas ke bawah, atau menggunakannya sebagai referensi untuk subjek gaya visual tertentu. Bagi yang baru mengenal pengembangan web secara keseluruhan, lihat Mempelajari HTML untuk mempelajari cara menulis markup dan menautkan stylesheet.
Inilah yang akan Anda pelajari:
Model Kotak
Karena semua yang ditampilkan CSS adalah kotak, memahami cara kerja Model Kotak CSS adalah dasar utama CSS.
Pemilih
Untuk menerapkan CSS ke elemen, Anda harus memilihnya. CSS memberi Anda sejumlah cara berbeda untuk melakukannya, dan Anda dapat mempelajarinya di modul ini.
Air terjun
Terkadang dua atau lebih aturan CSS yang bersaing dapat diterapkan ke sebuah elemen. Cari tahu cara browser memilih mana yang akan digunakan, dan cara mengontrol pilihan ini.
Kekhususan
Modul ini membahas secara lebih mendalam kekhususan, yang merupakan bagian penting dari kaskade.
Pewarisan
Beberapa properti CSS mewarisi jika Anda tidak menentukan nilainya. Pelajari cara kerjanya dan cara menggunakannya untuk mendapatkan manfaat Anda dalam modul ini.
Warna
Ada beberapa cara untuk menentukan warna dalam CSS. Modul ini mempelajari nilai warna yang paling umum digunakan.
Mengukur Unit
Pelajari cara menyesuaikan ukuran elemen menggunakan CSS, dengan memanfaatkan media web yang fleksibel.
Tata letak
Ringkasan berbagai metode tata letak yang harus Anda pilih saat membangun komponen atau tata letak halaman.
Kotak Fleksibel
Flexbox adalah mekanisme tata letak yang dirancang untuk menata letak 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 hal yang ditawarkan {i>grid<i}.
Properti Logis
Properti dan nilai yang logis dan relatif terhadap alur ditautkan dengan aliran teks, bukan bentuk fisik layar. Pelajari cara memanfaatkan pendekatan baru terhadap CSS ini.
Spasi
Cari tahu cara memilih metode terbaik untuk elemen spasi untuk metode tata letak yang Anda gunakan dan komponen yang Anda buat.
Elemen Pseudo
Elemen pseudo seperti menambahkan atau menargetkan elemen tambahan tanpa harus menambahkan lebih banyak HTML. Perannya memiliki berbagai peran, dan Anda dapat mempelajarinya dalam modul ini.
Class Pseudo
Class Pseudo memungkinkan Anda menerapkan CSS berdasarkan perubahan status. Ini berarti desain Anda dapat bereaksi terhadap input pengguna, seperti alamat email yang tidak valid.
Batas
Border menyediakan bingkai untuk kotak-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 ditujukan untuknya.
Fokus
Memahami pentingnya fokus dalam aplikasi web Anda. Anda akan mempelajari cara mengelola fokus, dan cara memastikan jalur sepanjang halaman berfungsi untuk orang yang menggunakan mouse dan orang yang menggunakan keyboard untuk bernavigasi.
Indeks Z dan konteks penumpukan
Temukan cara mengontrol urutan lapisan elemen di atas satu sama lain menggunakan indeks z dan konteks penumpukan.
Fungsi
CSS memiliki berbagai fungsi bawaan. Pelajari beberapa fungsi utama dan cara menggunakannya.
Gradien
Dalam modul ini, Anda akan mengetahui cara menggunakan berbagai jenis gradien yang tersedia di CSS. Gradien dapat membuat sejumlah besar efek yang berguna, tanpa perlu menggunakan aplikasi grafis untuk membuat gambar.
Animasi
Animasi adalah cara yang bagus untuk menyoroti elemen interaktif, dan menambahkan daya tarik dan kesenangan pada desain Anda. Cari tahu cara menambahkan dan mengontrol efek animasi dengan CSS.
Filter
Filter dalam CSS memungkinkan Anda menerapkan efek yang mungkin hanya dapat diterapkan di aplikasi grafis. Dalam modul ini, Anda dapat menemukan apa saja yang tersedia.
Mode Kombinasi
Buat efek komposisi dengan mencampur dua atau beberapa lapisan, dan pelajari cara mengisolasi gambar dengan latar belakang putih dalam modul ini mengenai 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.
Transisi
Mempelajari cara menentukan transisi antar-status elemen. Gunakan transisi untuk meningkatkan pengalaman pengguna dengan memberikan masukan visual untuk interaksi pengguna.
Kelebihan air
Overflow adalah cara Anda menangani konten yang tidak sesuai dengan ukuran induk yang telah ditetapkan. Dalam modul ini, Anda akan berpikir kreatif dan mempelajari cara menata gaya konten yang berlebih.
Latar belakang
Pelajari cara menata gaya latar belakang kotak menggunakan CSS.
Teks dan tipografi
Pelajari cara menata gaya teks di web.
Kesimpulan dan langkah berikutnya
Referensi lebih lanjut untuk membantu Anda mengambil langkah berikutnya.
Jadi, apakah Anda siap untuk belajar CSS? Mari kita mulai.