Persiapan Belajar CSS: Browser dan Kode Editor

Agar kita bisa belajar CSS dengan nyaman, kita perlu menyiapkan dua aplikasi, kode editor dan browser.

Kita sebetulnya bisa menggunakan aplikasi Notepad bawaan Windows untuk menulis kode CSS, tapi ini rawan kesalahan karena tidak dibuat khusus untuk menulis kode.

Dengan menggunakan kode editor, kita bisa menulis kode CSS dengan nyaman karena dibekali dengan fitur yang dapat membantu kita dalam menulis kode.

Kita juga membutuhkan browser, fungsinya tentu saja untuk melihat hasil dari kode CSS yang kita tulis.

Mari kita siapkan satu per satu aplikasi.

1. Install Visual Studio Code
2. Install Ekstensi Prettier
3. Install Browser Google Chrome
4. Mengubah CSS di Browser

Install Visual Studio Code

Ada banyak kode editor yang bisa kita gunakan di PC. Saya lebih merekomendasikan menggunakan VS Code karena gratis dan open-source.

Selain itu, kode editor buatan Microsoft ini sedang populer, jika kita mencari tutorial di YouTube, sebagian besar dari mereka menggunakan VS Code.

Kalau fitur bawaan yang disediakan tidak cukup, kita juga bisa memperluas fiturnya menggunakan ratusan ekstensi gratis yang disediakan.

Silahkan unduh Visual Studio Code di situs resminya, lalu install seperti biasa.

Jika Anda ingin menggunakan kode editor PC yang lain, berikut beberapa diantaranya:

1. Notepad++
2. Sublime Text
3. Atom
4. Vim

Kalau Anda menggunakan Android, bisa menggunakan:

1. Dcoder
2. Code Editor
3. Spck Code Editor

Install Ekstensi Prettier

Menulis kode yang rapi membuat kode menjadi lebih mudah dibaca.

Oleh karena itu kode CSS yang ditulis harus memiliki spasi yang memisahkan properti dan nilai, baris baru, indentasi dan sebagainya.

Semua itu tidak perlu ditulis secara manual, kita bisa menggunakan ekstensi di Visual Studio Code bernama Prettier.

Dengan menggunakan ekstensi ini, kode yang kita tulis akan diformat atau dirapikan secara otomatis.

Cara install Prettier di Visual Studio Code:

1. Tekan Ctrl + Shift + X untuk membuka tab ekstensi.
2. Ketik Prettier di kolom pencarian ekstensi.
3. Pilih Prettier - Code Formatter.
4. Lalu klik install.

Secara default, Visual Studio Code menggunakan formatter bawaan.

Oleh karena itu, kita perlu mengubahnya agar menggunakan Prettier, caranya:

1. Tekan Ctrl + , untuk membuka menu pengaturan.
2. Ketik dikolom pencarian Default Formatter lalu ubah menjadi Prettier - Code formatter.
3. Cari pengaturan Format On Save lalu centang.

Mencentang opsi Format On Save akan membuat prettier merapikan kode secara otomatis ketika kita menyimpan perubahan.

Install Browser Google Chrome

Untuk melihat hasil dari kode CSS yang kita tulis tentunya kita memerlukan browser.

Kita bisa menggunakan browser apa pun sesuai keinginan, tapi di sini saya lebih merekomendasikan menggunakan Google Chrome.

Selain Chrome, Mozilla Firefox juga cukup populer dikalangan frontend developer karena memiliki beberapa alat yang dapat membantu kita dalam menulis kode CSS.

Tapi kalau untuk belajar, fitur-fitur tersebut tidak dibutuhkan dan berlebihan.

Mengubah CSS di Browser

Sebagian besar browser populer, menyediakan alat yang disebut Developer Tools. Ini adalah alat yang ditujukan untuk membantu memudahkan pengembang web.

Sebetulnya ada banyak kegunaannya, tapi untuk saat ini kita hanya perlu tahu bahwa Developer Tools memungkinkan kita menulis kode CSS secara langsung di browser, dan hasilnya bisa dilihat secara langsung.

Sehingga kita tidak perlu beralih dari kode editor ke browser untuk menulis kode CSS dan melihat hasilnya.

Jika hasilyna sudah sesuai baru kode CSS tersebut bisa kita salin ke kode editor untuk disimpan secara permanen.

Caranya:

1. Tekan Ctrl + Shift + C untuk membuka tab Elements di Developer Tools.
2. Pilih elemen HTML yang ingin dimodifikasi, nanti akan muncul tab di sisi kanan/bawah.
3. Pada tab Styles tulis kode CSS yang ingin diterapkan.