Menu
CoddyTech
START LEARNING
html iconBagian dari Perjalanan HTMLPopulerPerjalanan

Belajar CSS

Kursus CSS yang gratis dan interaktif. Di setiap pelajaran kamu memberi gaya pada HTML sungguhan: selector, box model, warna, font, flexbox, grid, desain responsif. Ada pratinjau langsung saat mengetik dan sertifikat gratis saat selesai. Bagian ini termasuk dalam perjalanan HTML, jadi konteks markup yang dibutuhkan CSS sudah tersedia.

Mulai belajar(gratis)
Lihat silabusPlayground Menata dengan CSS

348,572+ coder terdaftar

119 pelajaran114 tantangan582 soal kuis

Silabus

2 bagian3 proyek119 pelajaran114 tantangan582 soal kuis

Bagian ini termasuk dalam Perjalanan HTML. Silabus lengkapnya punya lebih banyak bagian: klik pratinjau mana pun di bawah untuk melihatnya di halaman Perjalanan.

  1. Bagian 1Dasar-Dasar60 pelajaran
  2. Bagian 2

    Menata dengan CSS

    Mulai bagianMulaiLuaskanCiutkan    Hidupkan halaman webmu dengan warna, tata letak, dan gaya76 pelajaran110 tantangan418 soal3 proyek

    Pengantar

    5 pelajaran540

    Menambahkan CSS

    4 pelajaran725

    Selektor Dasar

    7 pelajaran1247

    Dasar-Dasar Teks

    8 pelajaran1450

    Warna dan Latar Belakang

    5 pelajaran834

    Menu Kafe

    Proyek3 pelajaran3

    Model Kotak Bagian 1

    6 pelajaran943

    Model Kotak Bagian 2

    5 pelajaran833

    Flexbox

    6 pelajaran943

    Formulir Login

    Proyek4 pelajaran4

    Teknik Tata Letak

    7 pelajaran1151

    Dasar-Dasar Desain Responsif

    6 pelajaran1052

    Halaman Web Tonga

    Proyek6 pelajaran6

    Tantangan Akhir

    4 pelajaran4
  3. Bagian 3

    Menguasai CSS

    Mulai bagianMulaiLuaskanCiutkan    Tingkatkan keterampilan CSS-mu ke level berikutnya!43 pelajaran40 tantangan164 soal

    Menguasai Selector, Kombinasi

    6 pelajaran539

    Pseudo-Class Interaktif

    5 pelajaran431

    pseudo-class struktural

    5 pelajaran432

    Proyek Menu Dropdown

    4 pelajaran4

    Efek Visual

    5 pelajaran536

    Halaman Landing

    5 pelajaran5

    Membangun dengan CSS Grid

    4 pelajaran426

    Situs web Flavor Fiesta

    4 pelajaran4

    Tantangan Akhir

    5 pelajaran5
  4. Bagian 4Frontend Praktis35 pelajaran
  5. Bagian 5JavaScript dalam Aksi27 pelajaran
Lihat silabus lengkap Perjalanan HTML
Yang kamu dapatkan
Semua yang kamu pakai untuk belajar coding

Belajar sambil praktik

Tulis kode sungguhan, query database, buat website, dan kuasai prompt AI. Pelajaran interaktif kami mencakup setiap keterampilan yang dibutuhkan developer modern.

playground.js
Editor kode
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Tes #1test Case Success icon
Tes #2test Case Success icon
Tes #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Bangun streakmu

Tetap konsisten dan lihat progresmu bertumbuh! Pantau kebiasaan coding harianmu, lindungi streakmu dengan hari beku, dan raih hadiah karena hadir setiap hari.

12 hari streak

Kembali besok untuk menjaga streakmu!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Gandakan atau hangus

Hari ke-5 dari 7

fire Freeze icon

Pembeku Streak

2 left

Coding di mana saja

Bawa perjalanan coding-mu ke mana saja! Tanpa setup, tanpa unduhan: cukup buka dan mulai coding. Tersedia di iOS, Android, dan Web dengan rating bintang 4,9.

app Store iconUnduh diApp Storegoogle Play iconTersedia diGoogle Play
Python
7Streak
250Skor
5Energi
Variabel
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
Lanjutkan
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Perjalanan
Target
Papan peringkat
Profil
4.9
BintangBintangBintangBintangBintang
Rating

Kamu tidak sendirian

Bersaing di papan peringkat global, ajak teman untuk mendapat hadiah, dan rayakan kemenangan satu sama lain. Coding lebih seru bersama teman!

Liga Challenger
Liga Challenger7 teratas naik
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconZona promosileaderboard Arrow Up icon

Semua cara belajar

Baca, dengarkan, uji dirimu, tanya AI, atau cari lagi apa pun yang sudah kamu pelajari. Setiap pelajaran menyesuaikan diri denganmu.

Pengenalan variabel
Audio

Variabel adalah wadah bernama yang menyimpan nilai yang bisa kamu pakai lagi nanti di programmu.

Di Python, kamu membuatnya dengan menulis nama, tanda sama dengan, lalu nilai yang ingin kamu simpan.

Nilainya bisa berubah seiring waktu. Menetapkan ulang nama itu cukup membuatnya menunjuk ke nilai baru.

1xSarah

Dapatkan sertifikat

Dapatkan sertifikat untuk setiap kursus yang kamu selesaikan. Tambahkan ke profil LinkedIn dan CV-mu untuk menunjukkan keahlian coding-mu kepada pemberi kerja.

CoddySertifikat Penyelesaian
Dengan ini menyatakan bahwaBudi Santosotelah berhasil menyelesaikan
python iconDasar Python
Terverifikasi
TanggalJan 2026
LinkedInTambahkan ke LinkedIn

Kenapa belajar CSS dengan Coddy

  • Tulis CSS di browser dan lihat tampilan halaman berubah secara langsung. Tanpa build step, tanpa setup editor. Setiap perubahan pada selector atau property langsung terlihat, jadi kamu tahu persis apa yang dilakukan setiap aturan.
  • CSS inti: selector dan specificity, box model, positioning, flexbox, CSS grid, transition, media query, dan desain responsif. CSS yang dibutuhkan setiap front-end developer sehari-hari.
  • Petunjuk AI membantumu debug hal-hal yang selalu bikin orang tersandung, seperti specificity yang mengejutkan, layout yang meluap, atau perilaku flexbox yang aneh, tanpa membocorkan solusinya. Jadi CSS terasa masuk akal, bukan seperti sulap.
  • Sertifikat CSS gratis saat kamu menyelesaikan bagian ini. Cocok dipadukan dengan kursus HTML dan JavaScript untuk fondasi front-end yang lengkap.

Pertanyaan yang sering diajukan tentang belajar CSS

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan halaman HTML: warna, font, jarak, layout, animasi, dan perilaku responsif di berbagai ukuran layar. HTML menentukan apa yang ada di halaman, CSS menentukan bagaimana semuanya ditampilkan.

Apakah CSS sulit dipelajari?

CSS dasar, seperti selector, warna, font, dan box model, mudah dipahami dalam beberapa jam. Bagian yang lebih sulit datang belakangan: aturan specificity, layout flexbox dan grid, dan membuat tampilan tetap rapi di setiap ukuran layar. Kursus ini memperkenalkannya selangkah demi selangkah dengan pratinjau langsung, jadi kamu melihat persis apa yang dilakukan setiap aturan.

Apakah sebaiknya belajar HTML sebelum CSS?

Ya. HTML menentukan struktur halaman, CSS memberinya gaya. Tanpa HTML, tidak ada yang bisa diberi gaya. Karena itulah bagian CSS ini termasuk dalam perjalanan HTML: bagian dasar-dasar HTML datang lebih dulu, lalu sebagian besar perjalanan kamu habiskan untuk memberi gaya pada HTML itu.

Apa bedanya CSS, Flexbox, dan Grid?

Flexbox dan Grid adalah modul layout di dalam CSS. Keduanya bukan teknologi terpisah, melainkan fitur CSS. Flexbox paling cocok untuk layout satu dimensi (deretan kartu, navbar). Grid paling cocok untuk layout dua dimensi (satu halaman penuh, susunan kartu yang rumit). Kebanyakan situs sungguhan memakai keduanya, dan kursus ini membahas kapan memakai masing-masing.

Bisakah belajar CSS online secara gratis?

Bisa. Bagian CSS interaktif ini gratis: pelajaran lengkap, latihan coding, pratinjau langsung, dan sertifikat. Semuanya berjalan di browser, jadi kamu tidak perlu menginstal editor atau alat apa pun untuk memulai.

Apakah ada sertifikat setelah kursus CSS?

Ya. Setelah menyelesaikan bagian CSS, kamu mendapat sertifikat kelulusan gratis. Bukti yang bisa diverifikasi untuk dicantumkan di CV atau dibagikan di LinkedIn, bersama sertifikat HTML dan JavaScript sebagai bagian dari portofolio front-end.

Jalur belajar yang memuat kursus ini

Kursus ini adalah satu langkah dari jalur yang lebih panjang: beberapa kursus dalam urutan yang akan diajarkan seorang mentor, masing-masing dengan sertifikat gratisnya sendiri.

Ilustrasi bahasa pemrograman di Coddy

Belajar Menata dengan CSS dengan Coddy

Mulai