Pada pembelajaran yang menuliskan kode seperti CSS, seringkali terjadi pemisahan sumber belajar yang menyulitkan proses pembelajaran. Untuk mengatasi masalah tersebut, diperlukan pengembangan media pembelajaran interaktif berbasis web yang menyatukan sumber-sumber belajar tersebut dalam satu media. Penelitian ini bertujuan untuk mengembangkan media pembelajaran interaktif berbasis web dengan pendekatan gamifikasi pada materi dasar CSS. Pendekatan pembelajaran dengan gamifikasi dapat membuat proses belajar menjadi menarik dan menyenangkan. Metode yang digunakan dalam penelitian ini adalah Research and Development dengan menerapkan model pengembangan ADDIE yang dibatasi yaitu analisis, perancangan, pengembangan, dan evaluasi. Teknik pengumpulan data dilakukan dengan menggunakan angket validasi media dan validasi materi. Teknik analisis data yang digunakan adalah analisis statistic deskriptif. Penelitian ini menghasilkan media berbasis web yang dikembangkan menggunakan teknologi HTML, CSS, JavaScript, Firebase, Ace Editor, dan Cropper JS. Elemen gamifikasi yang digunakan dalam penelitian ini mencakup exp, level, leaderboard, challenge, dan badges. Penelitian menunjukan bahwa media pembelajaran termasuk valid, dengan nilai validitas materi dalam kategori sangat valid dan nilai validitas media dalam kategori sangat valid. Oleh karena itu, dapat disimpulkan bahwa media pembelajaran interaktif berbasis web dengan pendekatan gamifikasi pada materi CSS dasar dinyatakan dapat digunakan untuk uji coba.