Windows / Mac / Linux

Disini aku pakai Windows untuk mendemonstrasikan. Kalau kalian ada yang menggunakan Mac, setauku prosesnya sama, bahkan lebih sederhana.

Install Browser

Ini pastinya sudah jelas kalian punya. Karena kalian ngebuka website ini kalau ga pake browser pake apa coba ya kannn.

Banyak browser bisa dipakai. Jadi bebas kalian bisa pakai Chromium based kayak Chrome, Edge, Brave, dll. Atau kalau kalian prefer Firefox juga boleh. Kalau kalian user Mac bisa juga pakai Safari. Jadi bebas, semua browser bisa, yang penting mereka udah ada di versi terbaru. Jadi jangan lupa update yahh.

Text Editor (Visual Studio Code)

Untuk yang pakai komputer. Banyak sebenarnya text editor yang bisa kalian pakai. Tapi aku bakal ngerekomendasiin Visual Studio Code. Why? karena ini enak bangett. Serius kalian juga selama kuliah bakal sering pakai ini. Fiturnya lengkap dan kalian bisa nambahin fitur sesuai kebutuhan kalian pakai Ekstensi.

Tutorial Install Visual Studio Code

Ke web official visual studio code di code.visualstudio.com. Inget yaa, Visual Studio Code tuh tidak sama dengan Visual Studio. Kita pakai yang ada "Code" nya.

Disini aku pakai Windows, jika kalian pakai Mac bisa lihat tutorialnya di sini. Kalau pake Linux bisa menyesuaikan distro kalian.

Langsung aja klik "Download for Windows". Tergantung jenis OS kalian apa.

Tunggu sampai downloadnya selesai.

Kalo udah ke download. Kalian bisa langsung klik icon nya atau ke file explorer seperti di gambar ke folder Downloads.

Buka file .exe installer nya. Inget yaa, .exe installer tuh beda sama .exe aplikasinya. Installer ini cuman berfungsi buat install vs code ke komputer kita. Nanti kalau udah ke install buka nya bukan dari situ lagi. Tapi dari start menu / desktop.

Di bagian ini kalian pilih I accept the agreement. Setelah itu klik Next

Untuk lokasi instalasi kita biarkan default. Jadi klik Next

Klik Next aja terus

Klik Nextttttttt

Akhirnya, klik Install

Tunggu sampai instalasi selesai.

Instalasi selesai dan kalian bisa biarin Launch Visual Studio Code nya checked, jadi abis kalian klik Finish bakal langsung kebuka Visual Studio Codenya atau VS Code.

Cara Buka Visual Studio Code

Kalo kalian di windows kalian bisa dari start menu. Atau cari di search start menu. Kalau kalian user Mac bisa pakai spotlight.

Jadi bukan lewat .exe yang di Downloads yaa kawan-kawan.

Membuka Folder Projet di VS Code

Buka VS Code (jika belum). Dan akan muncul window VS Code kosongan seperti ini:

Klik ini yang ditunjuk oleh anak panah.

Terus pilih Open Folder

Nah disini kalian milih website kalian mau disimpan di folder apa. Bebas mau dimanapun. Misal contoh nih aku di Documents. Aku klik kanan, kemudian bikin folder baru. Setelah itu kasih nama foldernya bebas, misal week1frontend.

Setelah itu double click foldernya.

dan pilih Select Folder.

Tunggu VS Code loading.

Kalau muncul ini, klik Yes, I trust the authors

Yey, selamat datang di project website kalian menggunakan VS Code.

Menginstall Ekstensi Live Server

Di VS Code ada banyak sekali extension yang bisa kalian pakai untuk memudahkan ngoding kalian. Tapi yang mau aku fokusin disini adalah Live Server.

Live server berguna untuk ngebuka file html kalian tanpa perlu membuka manual. Mereka akan host localhost server local kalian dan membuka browser di localhost:5500. Enaknya lagi kalian gaperlu refresh setiap kali ngelakuin perubahan di file html kalian.

Navigasi ke icon ini yang ditunjuk oleh panah.

Ketik pada search bar Live Server.

Pilih yang ini (yang publishernya Ritwick Dey) dan klik install.

Klik Trust...

Tunggu sampai instalasi selesai.

Dan yap. Ekstensi sudah selesai terinstall.