Editor HTML/CSS Realtime dan Ringan

Dari kemarin hari saya disibukkan dengan membuat editor HTML/CSS. Hal ini sebenarnya terinspirasi dari Try-It Editor milik w3schools. Bermula dari salah satu temanku yang mengobrol lewat Facebook, mengatakan bahwa dia butuh Try-It Editor. Padahal tahun lalu dia sempat membuat Try-It Editor versinya sendiri, namun naas hilang bersama harddisk yang rusak.

Berawal dari tertantang untuk membuat Try-It Editor, akhirnya saya malah ketagihan dan telah membuat setidaknya dua macam Try-It Editor sendiri. Ingin tahu bagaimana hasilnya? Berikut ini adalah ulasannya.

Try-It Editor versi Iskael

Try-It Editor memang merupakan salah satu alat bantu bagi orang yang ingin belajar HTML dan CSS. Membuat Try-It Editor atau setidaknya mendapatkan Try-It Editor yang sesuai dengan keinginan di jagad internet tidaklah mudah. Saya juga pernah membahas beberapa Try-It Editor yang populer.

Jika dibandingkan dengan Try-It Editor buatan saya, buatan yang ada di internet jauh lebih bagus dan memiliki banyak fitur. Karena fitur yang banyak inilah akhirnya membutuhkan load halaman yang lumayan berat. Berbeda dengan buatan saya yang memang saya desain sangat ringan. Ukurannya hanya 4 KB saja. Bahkan sebelumnya Try-It Editor yang kedua milik saya hanya 2 KB sebelum akhirnya saya tambahkan fitur show/hide pada editornya.

Try-It Editor Pertama

Try-It Editor pertama, sengaja saya pisahkan antara CSS dan konten HTML-nya. Hal ini agar lebih memudahkan bagi pemula. Selain itu, fitur pada Try-It Editor pertama bisa men-generate kode HTML dari tampilan hasil yang sudah kamu coba. Penasaran? Kamu bisa mencobanya di sini.

Try-It Editor Kedua

Berbeda dengan yang pertama, Try-It Editor kedua menawarkan konsep editor menyatu dengan apa yang ditulis. Kamu juga bisa menyembunyikan editor apabila ingin melihat hasil lebih bersih, tanpa adanya editor. Ingin mencobanya? Kamu bisa ikuti tautan ini.

Sudah dicoba? Bagaimana menurutmu?

Jika kamu masih bingung mau mencoba apa dengan Try-It Editor di atas, kamu bisa menggunakannya untuk belajar melalui video yang ada di Cara Membuat Website dengan CSS. Selamat mencoba :)