Scribd
Unggah
108 tayangan8 halaman

Panduan Membuat Website dengan VS Code

Modul ini memberikan panduan langkah demi langkah untuk siswa SMK dalam menggunakan Visual Studio Code untuk membuat website sederhana, mencakup instalasi, pengenalan antarmuka, dan penulisan kode HTML dan CSS. Selain itu, modul ini juga menjelaskan cara memasang ekstensi Live Server untuk melihat perubahan secara langsung di browser. Terdapat juga tips dan shortcut yang berguna untuk meningkatkan efisiensi penggunaan VS Code.

Diunggah oleh

Yuri Septi
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
108 tayangan8 halaman

Panduan Membuat Website dengan VS Code

Modul ini memberikan panduan langkah demi langkah untuk siswa SMK dalam menggunakan Visual Studio Code untuk membuat website sederhana, mencakup instalasi, pengenalan antarmuka, dan penulisan kode HTML dan CSS. Selain itu, modul ini juga menjelaskan cara memasang ekstensi Live Server untuk melihat perubahan secara langsung di browser. Terdapat juga tips dan shortcut yang berguna untuk meningkatkan efisiensi penggunaan VS Code.

Diunggah oleh

Yuri Septi
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Modul Tutorial: Menggunakan Visual

Studio Code (VS Code)


Modul ini memandu siswa SMK menggunakan Visual Studio Code untuk membuat website
sederhana. Isi modul: instalasi, pengenalan antarmuka, membuat proyek, menulis kode,
memasang ekstensi Live Server, menjalankan website, serta pengaturan dasar.

Daftar Isi
1. Install VS Code

2. Mengenal Antarmuka

3. Membuka Folder Proyek

4. Membuat File [Link] & [Link]

5. Menulis Kode (HTML & CSS)

6. Memasang Ekstensi Live Server

7. Menjalankan Website dengan Live Server

8. Pengaturan Tema & Bahasa

9. Shortcut & Tips

1) Install VS Code
• Buka [Link] → Download sesuai OS → jalankan installer hingga
selesai.
2) Mengenal Antarmuka VS Code
Kenali bagian utama: Activity Bar, Explorer, Editor Area, dan Terminal.
3) Membuka Folder Proyek
File → Open Folder… → pilih folder proyek (misal: website_pribadi).

4) Membuat File [Link] & [Link]


Di Explorer, klik ikon New File → buat dua file: [Link] dan [Link].
5) Menulis Kode (HTML & CSS)
Salin tempel kode berikut ke masing-masing file. Simpan (Ctrl+S).

[Link]:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Pribadi</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>Halo, ini Website Saya</h1>
<p>Saya siswa SMK jurusan RPL.</p>
</header>
<section>
<h2>Tentang Saya</h2>
<p>Suka koding, desain web, dan belajar hal baru.</p>
</section>
<footer>© 2025 Website Pribadi</footer>
</body>
</html>

[Link]:
* { box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f0f0f5;
color: #333;
}
header {
background: #4CAF50;
color: #fff;
padding: 24px;
text-align: center;
}
section {
background: #fff;
margin: 24px;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
footer {
text-align: center;
padding: 12px;
background: #333;
color: #fff;
}

6) Memasang Ekstensi Live Server


Buka tab Extensions → cari “Live Server” → Install.
7) Menjalankan Website dengan Live Server
Klik kanan [Link] → Open with Live Server → browser terbuka otomatis, perubahan
terlihat langsung.
8) Pengaturan Tema & Bahasa
Ganti tema warna: File → Preferences → Color Theme.

Ganti bahasa antarmuka: File → Preferences → Settings → cari ‘Display Language’ → pilih
Bahasa Indonesia.
9) Shortcut & Tips
Shortcut penting:
- Ctrl + S: Simpan file
- Ctrl + N: File baru
- Ctrl + P: Quick Open
- Ctrl + B: Tampilkan/sembunyikan Explorer
- Ctrl + Shift + P: Command Palette
Tips: gunakan Live Server saat mengerjakan HTML/CSS agar hasil langsung terlihat di
browser.

Anda mungkin juga menyukai