Close Menu
Forum

Cara Membuat Project Web Pribadi dengan HTML di VSCode

Analis WinterBy
Cara Membuat Project Web Pribadi dengan HTML di VSCode

Berikut adalah cara membuat project web pribadi sederhana menggunakan HTML di Visual Studio Code (VSCode). Langkah-langkah ini cocok untuk pemula yang ingin membuat halaman web statis sebagai portofolio atau halaman profil sederhana.

Cara Membuat Project Web Pribadi dengan HTML di VSCode

Persiapan Awal

  1. Unduh dan Install VSCode: Pastikan kalian sudah memiliki Visual Studio Code. Jika belum, kalian bisa mengunduhnya di https://code.visualstudio.com.
  2. Buat Folder Proyek: Siapkan folder di komputer kalian untuk menyimpan semua file proyek web. Misalnya, beri nama my-website.
  3. Buka Folder di VSCode: Setelah folder proyek dibuat, buka VSCode, lalu pilih File > Open Folder dan arahkan ke folder my-website.

Membuat Struktur Dasar Project

Di dalam folder proyek kalian, buat beberapa file dasar berikut ini untuk memulai.

Nama FileFungsi
index.htmlHalaman utama situs web
styles.cssFile CSS untuk mengatur tampilan
script.jsFile JavaScript (opsional)

Untuk proyek ini, kita akan fokus pada file HTML dan CSS.

Langkah-Langkah Membuat Halaman Utama (index.html)

  1. Buat File HTML: Di dalam VSCode, klik kanan di dalam folder proyek, pilih New File, lalu beri nama index.html.
  2. Tambahkan Struktur Dasar HTML: Di dalam file index.html, ketikkan kode HTML dasar berikut:
    <!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Web Pribadi Saya</h1>
        <p>Ini adalah proyek web sederhana saya.</p>
    </header>
    <section>
        <h2>About Me</h2>
        <p>Saya seorang pengembang web pemula yang tertarik untuk belajar HTML, CSS, dan JavaScript.</p>
    </section>
    <footer>
        <p>&copy; 2024 My Personal Website</p>
    </footer>
</body>
</html>
  3. Jelaskan Kode di Atas:
    • Header: Bagian header digunakan untuk judul dan deskripsi situs.
    • Section: Bagian section berisi informasi tentang diri kalian.
    • Footer: Bagian footer menampilkan informasi hak cipta.

Membuat Tampilan dengan CSS (styles.css)

  1. Buat File CSS: Buat file baru di folder proyek dan beri nama styles.css.
  2. Tambahkan Gaya Dasar untuk Tampilan: Masukkan kode CSS berikut di dalam styles.css untuk mengatur tata letak dan warna halaman.
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f4f4f4;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2em;
    color: #333;
}

section {
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    color: #777;
    margin-top: 20px;
}
  3. Jelaskan Gaya CSS di Atas:
    • body: Mengatur font, tata letak, dan latar belakang halaman.
    • header dan section: Memusatkan teks dan memberi jarak antar-elemen.
    • box-shadow dan border-radius: Memberikan efek bayangan dan sudut melengkung pada section.

Memulai dan Meninjau Website

  1. Buka di Browser: Klik kanan pada file index.html di dalam VSCode dan pilih Open with Live Server. Jika kalian belum menginstal Live Server, bisa mengunduhnya dari Extensions di VSCode.
  2. Tinjau Halaman: kalian akan melihat halaman sederhana yang menampilkan konten web kalian dengan format HTML dan gaya dari CSS yang sudah dibuat.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kalian berhasil membuat situs web pribadi sederhana menggunakan HTML dan CSS di Visual Studio Code. kalian bisa mengembangkan proyek ini dengan menambahkan lebih banyak bagian, gaya, atau bahkan JavaScript untuk meningkatkan interaktivitasnya. Sekian dari analiwinter.com, terimakasih.

Share.

Related Posts

Add A Comment
Leave A Reply