Memulai dengan Kode Visual Studio dan Membangun Situs Web HTML – Pada artikel ini, kita akan membahas langkah-langkah yang diperlukan untuk mengunduh editor teks populer yang disebut Visual Studio Code, juga disebut sebagai “VS Code.” Pada akhir artikel Anda akan dapat membuat folder di Visual Studio Code yang berisi dokumen HTML yang dapat Anda buka di browser web Anda.
Memulai dengan Kode Visual Studio dan Membangun Situs Web HTML
Apa itu ‘editor teks’?
binaryjs – Editor teks, juga disebut editor kode, adalah aplikasi yang digunakan oleh pengembang untuk menulis kode. Mereka dapat menyorot dan memformat kode Anda sehingga lebih mudah dibaca dan dipahami.
Jika Anda pernah menggunakan Codecademy, Anda sudah terbiasa dengan editor teks. Ini adalah area tempat Anda menulis kode.
Baca Juga : 9 Pertanyaan Wawancara Pengkodean Umum Dan Keterampilan Yang di Uji
Menggunakan editor teks adalah bagian dari menciptakan “lingkungan pengembangan” Anda, seperangkat alat yang Anda gunakan untuk mengerjakan proyek pengkodean. Ini akan memungkinkan Anda untuk mengambil apa yang telah Anda pelajari di Codecademy dan mempraktikkannya saat Anda mengerjakan proyek di komputer Anda.
Ini tidak hanya akan memperkenalkan Anda pada alat yang biasanya digunakan oleh pengembang profesional, tetapi juga berarti bahwa Anda telah tumbuh sebagai pengembang dan siap untuk mulai bekerja sendiri—kerja bagus!
Khusus untuk menulis kode, editor teks memberikan sejumlah keuntungan:
- Penyorotan sintaks khusus bahasa Language
- Indentasi kode otomatis
- Skema warna yang sesuai dengan preferensi Anda dan membuat kode lebih mudah dibaca
- Plug-in, atau program tambahan, untuk menangkap kesalahan dalam kode
- Tampilan hierarki, atau representasi visual, dari folder dan file proyek, sehingga Anda dapat dengan mudah menavigasi proyek Anda
- Pintasan tombol, atau kombinasi, untuk pengembangan yang lebih cepat
Anda mungkin juga pernah membaca atau mendengar tentang IDE, atau “editor pengembangan terintegrasi”. IDE memungkinkan Anda untuk tidak hanya mengedit, tetapi juga mengkompilasi, dan men-debug kode Anda melalui satu aplikasi atau antarmuka.
Meskipun editor teks yang kami sarankan tidak dianggap sebagai IDE, ia memiliki banyak fitur mirip IDE yang membuat hidup sebagai pengembang lebih mudah tanpa memerlukan banyak sumber daya yang biasanya dibutuhkan IDE. Terbaik dari kedua dunia!
Memilih Editor Teks
Ada sejumlah editor teks untuk dipilih. Misalnya, Visual Studio Code adalah salah satu editor teks paling populer yang digunakan oleh pengembang. (Itu Visual Studio Code dan bukan Visual Studio, yang sedikit berbeda. Kami ingin yang pertama, yang namanya ‘Code’.) Editor teks populer lainnya yang mungkin pernah Anda dengar adalah Atom dan Sublime Text.
Salah satu editor teks yang disebutkan ini bagus untuk pengembangan tetapi untuk mempermudah, kami sarankan Anda memulai dengan Visual Studio Code. Beberapa keunggulan editor ini adalah:
- Gratis untuk digunakan
- Open-source, (artinya kode program dapat dilihat, dimodifikasi, dan dibagikan)
- Fitur seperti IDE
- Didukung oleh komunitas besar pengguna dan Microsoft
Ketika Anda semakin jauh dalam karir pengkodean Anda, Anda dapat mencoba editor kode lain untuk melihat fitur apa yang paling sesuai dengan alur kerja pengembangan pribadi Anda.
II. Menginstal Kode Visual Studio
Jadi, kami telah memilih editor teks kami, sekarang kami hanya perlu menginstalnya di komputer kami!
Langkah-langkah Instalasi
Proses instalasi untuk komputer yang menjalankan macOS, Windows, dan Linux, (khususnya Ubuntu dan Debian), akan sangat mirip dan menggunakan Visual Studio Code di semuanya akan sama.
1. Kunjungi situs web Visual Studio Code untuk mengunduh versi terbaru dari Visual Studio Code.
2. Anda akan melihat sistem operasi komputer Anda ditampilkan, tetapi jika itu tidak benar, klik panah bawah dan temukan opsi yang cocok dengan sistem operasi Anda dari menu tarik-turun dan klik ikon panah bawah di bawah “Stabil.”
Pengguna Windows: Ini akan mengunduh versi terbaru dari Visual Studio Code sebagai file .exe.
Pengguna Mac: Ini akan mengunduh versi terbaru dari Visual Studio Code untuk Mac sebagai file .zip.
Pengguna Linux: .deb dan .rpm adalah tipe file yang berbeda untuk menyimpan data. Kami menyarankan Anda mengunduh file .deb sehingga pembaruan otomatis berfungsi seperti yang disarankan oleh dokumentasi Visual Studio Code.
3. Setelah file Visual Studio Code selesai diunduh, kita perlu menginstalnya. Temukan file Visual Studio Code di manajer file Anda, program yang memungkinkan Anda melihat file dan folder di komputer Anda.
Pengguna Windows: Buka file .exe dengan mengkliknya dan jalankan penginstal. Terus klik ‘Berikutnya’ dan akhirnya ‘Selesai.’
Pengguna Mac: File .zip yang diunduh harus berada di folder ‘Unduhan’ Anda. Buka filenya. Jika Anda melihat pesan ini pilih “Buka.”
Pengguna Linux: File yang diunduh harus ada di folder ‘Unduhan’ Anda.
Temukan di pengelola file Anda, klik dua kali dan pilih ‘Instal’ di pusat perangkat lunak GUI, atau jalankan perintah berikut, satu per satu, di terminal:
sudo dpkg -i downloaded_filename.deb
sudo apt-get install -f
4. Pastikan Anda memiliki aplikasi Kode Visual Studio yang disimpan di tempat yang Anda tahu dapat dengan mudah menemukannya.
Pengguna Windows: Secara otomatis akan ditempatkan di menu Start Anda.
Pengguna Mac: Klik dan seret ikon Visual Studio Code dari folder Downloads ke folder Applications. Pengguna Linux: Ini akan muncul di bilah tugas program Anda.
Baca Juga : Ini Dia Yang Harus Anda Butuhkan Ketika Menggunakan Linux
Itu saja, Anda telah berhasil menginstal editor teks Anda dan siap untuk memulai pengkodean!
Gunakan Kode Visual Studio untuk memulai proyek di luar platform
Saat Anda menelusuri berbagai pelajaran dan jalur di sini di Codecademy, Anda mungkin merasa perlu membuat proyek di komputer Anda sendiri dan bukan di lingkungan belajar Codecademy. Ini bisa rumit, tetapi ini adalah langkah menarik yang menandakan bahwa Anda siap bekerja secara mandiri.
Untuk melakukan ini, kita harus menggunakan editor teks yang kita instal di atas. Mari luangkan waktu sejenak untuk mencoba Visual Studio Code.
Apa itu ‘folder pengembangan’?
Sebelum menggunakan editor teks Anda, penting untuk membuat sistem file yang terorganisir. Seiring bertambahnya jumlah dan ukuran proyek Anda, menjadi semakin penting untuk mengetahui di mana harus menyimpan proyek baru dan menemukan proyek lama.
Sebagian besar pengembang menyimpan proyek mereka di direktori yang mudah ditemukan, (yang mungkin biasa Anda sebut ‘folder’). Di sini, di Codecademy, kami menyarankan untuk menamai proyek direktori ini .
Ini akan menyimpan semua proyek pengkodean Anda. Setiap kali Anda membuat proyek baru, sekecil apa pun, Anda harus selalu membuat folder baru di dalam direktori proyek Anda. Anda akan menemukan bahwa proyek file tunggal dapat dengan cepat berubah menjadi proyek multi-folder yang besar.
1. Buat folder pengembangan.
Navigasikan ke folder menggunakan pengelola file atau terminal Anda. Pastikan itu adalah folder yang Anda kunjungi secara teratur dan akan diingat. Buat folder baru bernama proyek .
Pengguna Mac: Ini mungkin akun Pengguna atau folder “Beranda”.
Pengguna Windows: Anda mungkin ingin menyimpan ini di drive C Anda.
Pengguna Linux: Anda mungkin ingin menyimpan ini di folder Pengguna Anda di dalam folder “Beranda”.
Di dalam folder proyek , buat folder baru bernama HelloWorld . Semua yang Anda tambahkan ke folder ini akan menjadi bagian dari proyek HelloWorld Anda .
2. Buka Kode Visual Studio
3. Buka folder pengembangan Anda
Klik ikon ‘Explorer’ di menu sebelah kiri dan klik tombol ‘Buka Folder’ dan pilih folder pengembangan Anda. Ini akan meluncurkan pengelola file Anda.
Arahkan ke folder HelloWorld dan pilih Buka. Folder akan terbuka di panel samping Visual Studio Code. Pada titik ini, seharusnya tidak ada konten apa pun di folder. Kami akan menambahkan file di langkah berikutnya.
4. Tambahkan file.
Sebelum Anda mempelajari cara menambahkan file ke folder proyek, penting untuk memahami tujuan ekstensi file. Ekstensi file adalah akhiran dari nama file (3 atau 4 karakter terakhir dalam nama file, didahului dengan titik) dan menjelaskan jenis konten yang berisi file. Misalnya, ekstensi file HTML adalah .html, dan memberitahu browser (dan aplikasi lain) untuk menafsirkan isi file sebagai dokumen HTML. Setelah Visual Studio Code memuat folder proyek, Anda dapat menambahkan file. Langkah-langkah di bawah ini menjelaskan cara menambahkan file. Jangan khawatir tentang melakukan ini di komputer Anda sendiri. Kami akan membahasnya selanjutnya.
Di panel Explorer Visual Studio Code, klik nama folder pengembangan Anda. Anda akan melihat empat ikon muncul di sebelah kanan nama folder. Klik ikon ‘File Baru’. Ketik nama file baru dengan ekstensi file yang sesuai (misalnya, .html, .css, .csv). Sangat penting bahwa Anda menyertakan ekstensi file yang benar, sehingga program seperti linter tahu bagaimana menafsirkan isinya. Tekan Enter setelah selesai.
5. Mulai coding!
Simpan file Anda sesering mungkin dengan fitur Simpan Otomatis dan lacak perubahan dengan sistem kontrol versi jika Anda tahu cara menggunakannya. (Untuk mengaktifkan Simpan Otomatis, klik ‘File’ lalu ‘Simpan Otomatis’. Saat aktif, Anda akan melihat tanda centang di sebelah ‘Simpan Otomatis’.) Ini akan mengurangi kemungkinan kehilangan pekerjaan yang belum disimpan.
Ekstensi File dan Penyorotan Sintaks
Sintaks adalah seperangkat aturan yang memberi tahu kita cara membuat kode yang ditulis dengan benar. Visual Studio Code dan editor teks lainnya dapat menginterpretasikan ekstensi file dan memberikan penyorotan sintaks khusus bahasa.
Penyorotan sintaks adalah alat untuk membuat kode lebih mudah dibaca. Lihatlah file index.html Anda. Teks dan tag memiliki warna yang berbeda. Beginilah cara Visual Studio Code menyoroti sintaks .html. Dengan setiap bahasa baru yang Anda pelajari, Visual Studio Code akan menyorot teks dengan cara yang membuat kode Anda mudah dibaca. Ini mungkin berbeda dari editor teks lain dan juga berbeda dari cara kode Anda disorot di Codecademy.
Opsional: Ubah skema warna
Meskipun Visual Studio Code dilengkapi dengan penyorotan sintaks default, Anda mungkin ingin mengubah warna yang digunakan. Tema warna yang bagus akan membuat membaca semua baris kode itu mudah di mata Anda. (Cobalah kontras rendah, tema gelap seperti “Solarized Dark” atau “Dracula Dark.”)
Untuk melakukan ini, pilih Tema Warna dari halaman Selamat Datang saat Anda pertama kali membuka Kode Visual Studio, atau klik Kode di bilah menu di bagian atas jendela desktop Anda, lalu klik Preferensi, diikuti oleh Tema Warna. Anda juga dapat mencari tema warna untuk dipasang menggunakan menu Ekstensi.
6. Lihat file HTML Anda di browser
Pada titik ini, file Anda siap untuk dilihat di browser web. Langkah-langkah berikut harus diambil di luar Kode Visual Studio:
Arahkan ke file index.html di folder Hello World Anda melalui pengelola file atau terminal Anda.
Klik dua kali atau buka index.html . Halaman akan terbuka di browser web default Anda. Luangkan waktu sejenak untuk mengagumi hasil karya Anda—Anda membuat proyek pertama Anda dengan Visual Studio Code.
Melangkah lebih jauh dengan fitur Visual Studio Code
Jika Anda sudah merasa nyaman dengan langkah sebelumnya, jelajahi fitur berikut untuk menyesuaikan lebih lanjut lingkungan pengembangan Anda. Anda tidak perlu menggunakan saran ini untuk menyelesaikan proyek di Codecademy tetapi saran ini dapat membantu Anda lebih efisien saat menulis kode dan itulah yang membuat Visual Studio Code menjadi editor yang berguna!
Men-debug kode di editor: Itu benar, Anda dapat menjalankan dan menguji kode dari editor! Kontrol versi: Anda tidak perlu beralih ke terminal di komputer Anda untuk melacak perubahan dengan Git.
Terminal terintegrasi: Anda dapat menjalankan perintah baris perintah dari editor Anda dengan Visual Studio Code.
