Latihan - Menyiapkan struktur aplikasi web Anda

Selesai

Ada berbagai cara untuk membuat dan mengelola proyek situs web. Beberapa perbedaan ini bergantung pada alat tertentu yang Anda miliki dan preferensi organisasi Anda. Saat membuat situs web, tidak jarang struktur proyek Anda berubah seiring waktu karena struktur proyek menjadi lebih rumit. Proyek-proyek besar sering kali membutuhkan tingkat perawatan dan perhatian yang lebih tinggi sehingga banyak orang dapat mengatur semuanya. Kuncinya adalah mempertahankan kesamaan organisasi, dan ada strategi umum untuk membantu Anda.

Di unit ini, Anda membuat struktur proyek kecil menggunakan Visual Studio Code. Proyek ini memiliki tiga file: file HTML, file CSS, dan file JavaScript. Anda juga menambahkan ekstensi Visual Studio Code untuk menyederhanakan menjalankan situs web di browser Anda.

Membuat folder baru untuk situs web Anda

1. Buka Visual Studio Code.

   Saat Anda membuka Visual Studio Code, halaman Selamat Datang terbuka. Perhatikan bahwa Anda dapat membuat file baru atau membuka folder di daftar Mulai .

   

   Jika halaman Selamat Datang tidak terlihat, Anda dapat menampilkannya dengan memilih Selamat Datang Bantuan > pada menu. (Atau, Anda dapat menampilkan halaman Selamat Datang dengan membuka Palet Perintah menggunakan pintasan keyboard Shift+Ctrl+P di komputer Windows atau Shift+Cmd+P di macOS, atau dengan memilih Tampilkan > Palet Perintah dari menu Visual Studio Code. Saat Palet Perintah ditampilkan, masukkan >Bantuan: Selamat Datang di bidang pencarian untuk membuka halaman Selamat Datang .)

2. Pilih Buka folder di daftar Mulai halaman Selamat Datang , atau pilih Buka File > Folder dari menu Visual Studio Code.

   

   Saat Anda membuka folder, sistem operasi memiliki opsi menu untuk membuat Folder Baru.

3. Navigasi ke lokasi tempat Anda ingin membuat folder baru untuk situs web Anda, dan pilih Folder Baru.

4. Beri nama folder simple-website, lalu pilih Pilih Folder.

   Penting

   Jika dialog Visual Studio Code muncul, pilih Percayai penulis semua file di folder induk...; ini adalah fitur Kepercayaan Ruang Kerja yang memungkinkan Anda memutuskan apakah folder proyek Anda harus mengizinkan atau membatasi eksekusi kode otomatis. Anda baru saja membuat folder, sehingga aman.

Membuat beberapa file

1. Buat file baru dengan memilih File > File Baru dari menu, atau dengan menggunakan Control+N di Windows atau Command+N di macOS.

2. Simpan file dengan memilih Control+S di Windows, atau Command+S di macOS.

3. Masukkan index.html untuk nama file, lalu pilih Simpan.

4. Ulangi langkah sebelumnya untuk membuat dua file lagi: main.css dan app.js. Setelah selesai, folder proyek situs web sederhana di Visual Studio Code Explorer harus berisi file berikut:

   • index.html
   • main.css
   • app.js

   

Anda dapat membangun situs web dengan memasukkan semua HTML, gaya CSS, dan kode JavaScript Anda dalam satu file. Tetapi, dalam latihan ini Anda menggunakan file HTML untuk konten Anda, file CSS untuk gaya Anda, dan file JavaScript untuk interaktivitas Anda.

Menyiapkan tiga file membantu menjaga proyek situs web Anda tetap teratur. Pemisahan konten, gaya, dan logika adalah contoh peningkatan progresif. Jika JavaScript tidak diaktifkan atau didukung oleh pelanggan Anda, CSS dan HTML Anda akan tetap berfungsi. Tetapi, jika CSS tidak didukung oleh pelanggan Anda, setidaknya konten HTML Anda akan muncul.

Menginstal ekstensi atau paket

Anda dapat meluaskan fungsionalitas Visual Studio Code menggunakan marketplace ekstensi. Perlu diingat bahwa ekstensi ini adalah sumber daya yang dikembangkan komunitas, dan sering kali ada beberapa solusi untuk jenis fitur yang sama. Anda dapat menginstal ekstensi satu per satu atau sekaligus di penyunting dengan menggunakan baris perintah.

Untuk pengembangan web, yang Anda perlukan sekarang adalah buka di browser. Ekstensi ini membantu Anda membuka situs web dengan cepat di browser default Anda, daripada menyalin dan menempel URL file ke browser Anda.

Untuk menginstal ekstensi ini, ikuti langkah-langkah berikut:

1. Pilih ikon Ekstensi pada Bilah Aktivitas vertikal (panel kiri).

2. Masukkan buka di kotak pencarian, lalu pilih buka di ekstensi browser yang diterbitkan oleh TechER.

3. Pilih Instal, dan Visual Studio Code menginstal ekstensi.

   

4. Beralih kembali ke Explorer dengan mengklik ikon atas di Bilah Aktivitas, atau gunakan Control+Shift-E di Windows atau Command+Shift-E di macOS.

Bagus! Penginstalan dan penyiapan membutuhkan sedikit waktu ekstra, tetapi Anda hanya perlu menginstal dan menyiapkan sekali. Sekarang Anda siap untuk membuat situs web.