Beranda / Teknologi / Cara Membuat Landing Page dengan Visual Studio Code

Cara Membuat Landing Page dengan Visual Studio Code

Agustus 23, 2026

Berikut langkah-langkah yang dapat diikuti.

1. Install Visual Studio Code

Langkah pertama adalah memasang Visual Studio Code pada komputer.

Setelah aplikasi berhasil diinstal, buka Visual Studio Code.

Pada halaman awal, Anda dapat membuat atau membuka folder project yang akan digunakan untuk menyimpan file landing page.

2. Buat Folder Landing Page

Buat folder baru di komputer dengan nama:

landing-page

Kemudian buka folder tersebut menggunakan Visual Studio Code.

Struktur awal project dapat dibuat seperti berikut:

landing-page
│
├── index.html
├── style.css
└── script.js

Ketiga file tersebut mempunyai fungsi berbeda.

index.html digunakan untuk membuat struktur landing page.

style.css digunakan untuk mengatur tampilan landing page.

script.js digunakan untuk menambahkan fungsi interaktif menggunakan JavaScript.

Untuk landing page sederhana, sebenarnya kita bisa mulai hanya dengan HTML dan CSS.

3. Buat File index.html

Di dalam folder project, buat file baru dengan nama:

index.html

Kemudian masukkan kode HTML berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Landing Page Profesional</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header class="header">
        <div class="container">

            <div class="logo">
                WebsiteKu
            </div>

            <nav class="navigation">
                <a href="#home">Home</a>
                <a href="#tentang">Tentang</a>
                <a href="#fitur">Fitur</a>
                <a href="#kontak">Kontak</a>
            </nav>

        </div>
    </header>


    <section class="hero" id="home">

        <div class="container hero-container">

            <div class="hero-content">

                <span class="small-title">
                    SOLUSI DIGITAL UNTUK BISNIS
                </span>

                <h1>
                    Buat Website Profesional untuk Mengembangkan Bisnis Anda
                </h1>

                <p>
                    Hadirkan landing page modern, sederhana, responsif,
                    dan mudah digunakan untuk memperkenalkan produk atau
                    layanan kepada calon pelanggan.
                </p>

                <div class="hero-button">

                    <a href="#kontak" class="btn">
                        Mulai Sekarang
                    </a>

                    <a href="#tentang" class="btn secondary">
                        Pelajari Lebih Lanjut
                    </a>

                </div>

            </div>

            <div class="hero-image">

                <div class="image-box">
                    <span>🚀</span>

                    <h3>
                        Landing Page Modern
                    </h3>

                    <p>
                        Desain sederhana dan responsif
                        untuk berbagai perangkat.
                    </p>
                </div>

            </div>

        </div>

    </section>


    <section class="about" id="tentang">

        <div class="container">

            <div class="section-title">

                <span>TENTANG</span>

                <h2>
                    Landing Page untuk Kebutuhan Bisnis
                </h2>

                <p>
                    Landing page dapat membantu memperkenalkan produk,
                    jasa, maupun bisnis kepada calon pelanggan secara
                    lebih terarah.
                </p>

            </div>

        </div>

    </section>


    <section class="features" id="fitur">

        <div class="container">

            <div class="section-title">

                <span>KEUNGGULAN</span>

                <h2>
                    Mengapa Menggunakan Landing Page?
                </h2>

            </div>


            <div class="feature-grid">

                <div class="feature-card">

                    <div class="icon">
                        ⚡
                    </div>

                    <h3>
                        Cepat
                    </h3>

                    <p>
                        Struktur halaman sederhana sehingga
                        dapat dikembangkan dan dioptimalkan
                        dengan mudah.
                    </p>

                </div>


                <div class="feature-card">

                    <div class="icon">
                        📱
                    </div>

                    <h3>
                        Responsif
                    </h3>

                    <p>
                        Tampilan dapat disesuaikan untuk
                        komputer, tablet, maupun smartphone.
                    </p>

                </div>


                <div class="feature-card">

                    <div class="icon">
                        🎨
                    </div>

                    <h3>
                        Fleksibel
                    </h3>

                    <p>
                        Desain dan isi halaman dapat diubah
                        sesuai kebutuhan bisnis atau produk.
                    </p>

                </div>

            </div>

        </div>

    </section>


    <section class="cta" id="kontak">

        <div class="container">

            <h2>
                Siap Membuat Landing Page?
            </h2>

            <p>
                Gunakan landing page untuk memperkenalkan
                bisnis, produk, atau layanan Anda kepada
                lebih banyak orang.
            </p>

            <a href="mailto:emailanda@example.com" class="btn">
                Hubungi Kami
            </a>

        </div>

    </section>


    <footer class="footer">

        <p>
            &copy; 2026 WebsiteKu. Semua Hak Dilindungi.
        </p>

    </footer>


</body>
</html>

4. Buat File CSS

Setelah file HTML selesai, buat file baru dengan nama:

style.css

Masukkan kode berikut:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #ffffff;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}


/* HEADER */

.header {
    background: #111827;
    padding: 20px 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
}

.navigation {
    display: flex;
    gap: 25px;
}

.navigation a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
}

.navigation a:hover {
    opacity: 0.7;
}


/* HERO */

.hero {
    padding: 100px 0;
    background: linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );
}

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 60px;
}

.small-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 48px;
    line-height: 1.15;
    margin: 20px 0;
}

.hero p {
    color: #555;
    font-size: 18px;
    margin-bottom: 30px;
}

.hero-button {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    background: #2563eb;
    color: #ffffff;
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.btn:hover {
    background: #1d4ed8;
}

.btn.secondary {
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
}


/* HERO IMAGE */

.image-box {
    background: #ffffff;
    padding: 60px 35px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.image-box span {
    font-size: 70px;
}

.image-box h3 {
    margin: 20px 0 10px;
    font-size: 25px;
}

.image-box p {
    font-size: 16px;
}


/* ABOUT */

.about {
    padding: 90px 0;
    text-align: center;
}

.section-title {
    max-width: 750px;
    margin: auto;
}

.section-title span {
    font-size: 14px;
    font-weight: bold;
}

.section-title h2 {
    font-size: 36px;
    margin: 15px 0;
}

.section-title p {
    color: #666;
}


/* FEATURES */

.features {
    padding: 90px 0;
    background: #f8fafc;
}

.features .section-title {
    text-align: center;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.feature-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.feature-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.feature-card h3 {
    margin-bottom: 10px;
}

.feature-card p {
    color: #666;
}


/* CTA */

.cta {
    padding: 90px 0;
    text-align: center;
    background: #111827;
    color: #ffffff;
}

.cta h2 {
    font-size: 38px;
    margin-bottom: 15px;
}

.cta p {
    max-width: 650px;
    margin: 0 auto 30px;
    color: #d1d5db;
}


/* FOOTER */

.footer {
    padding: 25px;
    text-align: center;
    background: #030712;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 768px) {

    .header .container {
        flex-direction: column;
        gap: 15px;
    }

    .navigation {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        padding: 70px 0;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 16px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .cta h2 {
        font-size: 30px;
    }
}

5. Simpan Semua File

Setelah kode dimasukkan, pastikan kedua file sudah disimpan.

Struktur folder seharusnya seperti berikut:

landing-page/
│
├── index.html
│
└── style.css

Jika ingin menambahkan gambar, Anda dapat membuat folder tambahan:

landing-page/
│
├── index.html
├── style.css
│
└── images/
    ├── produk.jpg
    └── logo.png

6. Jalankan Landing Page

Sekarang saatnya melihat hasil landing page.

Cara paling sederhana adalah membuka file:

index.html

Klik dua kali file tersebut.

Browser akan terbuka dan menampilkan landing page yang telah dibuat.

Jika menggunakan Visual Studio Code, Anda juga dapat menggunakan extension Live Server.

7. Menggunakan Live Server

Live Server sangat membantu ketika sedang mengembangkan website.

Dengan Live Server, perubahan yang dilakukan pada kode dapat ditampilkan di browser dengan lebih praktis.

Langkahnya:

  1. Buka Visual Studio Code.
  2. Klik menu Extensions.
  3. Cari Live Server.
  4. Install extension tersebut.
  5. Buka index.html.
  6. Klik kanan pada halaman.
  7. Pilih Open with Live Server.

Browser kemudian akan membuka landing page.

8. Cara Mengubah Nama Website

Pada kode HTML terdapat bagian:

<div class="logo">
    WebsiteKu
</div>

Ganti WebsiteKu dengan nama bisnis atau website Anda.

Contohnya:

<div class="logo">
    TokoDigital
</div>

9. Cara Mengubah Judul Landing Page

Anda dapat mengubah judul utama pada bagian:

<h1>
    Buat Website Profesional untuk Mengembangkan Bisnis Anda
</h1>

Misalnya untuk toko online:

<h1>
    Temukan Produk Terbaik dengan Harga Terjangkau
</h1>

Sedangkan untuk jasa desain:

<h1>
    Jasa Desain Profesional untuk Bisnis Anda
</h1>

Sebaiknya judul landing page dibuat singkat, jelas, dan menjelaskan manfaat yang ditawarkan.

10. Cara Mengubah Tombol CTA

Pada landing page terdapat tombol:

<a href="#kontak" class="btn">
    Mulai Sekarang
</a>

Tulisan tersebut dapat diubah menjadi:

<a href="#kontak" class="btn">
    Pesan Sekarang
</a>

atau:

<a href="#kontak" class="btn">
    Konsultasi Gratis
</a>

Sesuaikan tulisan tombol dengan tujuan landing page.

11. Cara Menambahkan Gambar

Jika ingin menggunakan gambar sendiri, buat folder:

images

Kemudian masukkan gambar ke dalam folder tersebut.

Misalnya:

images/produk.jpg

Kemudian tambahkan kode berikut pada HTML:

<img src="images/produk.jpg" alt="Produk yang ditawarkan">

Agar gambar tidak terlalu besar, Anda dapat mengatur ukurannya menggunakan CSS:

img {
    max-width: 100%;
    height: auto;
}

12. Cara Membuat Landing Page Responsif

Landing page responsif adalah halaman yang dapat menyesuaikan ukuran layar perangkat.

Hal ini penting karena pengunjung dapat mengakses website menggunakan berbagai perangkat.

Contohnya:

  • Desktop.
  • Laptop.
  • Tablet.
  • Smartphone.

CSS yang digunakan untuk membuat tampilan responsif biasanya menggunakan media query.

Contohnya:

@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;
    }
}

Kode tersebut membuat layout menjadi satu kolom ketika ukuran layar lebih kecil.

13. Cara Memasukkan Landing Page ke WordPress

Setelah landing page selesai dibuat di Visual Studio Code, Anda mungkin ingin menggunakannya pada website WordPress.

Ada beberapa metode yang dapat digunakan.

Menggunakan Custom HTML

Untuk kode HTML sederhana, Anda dapat menggunakan blok Custom HTML di editor WordPress.

Caranya:

  1. Login ke dashboard WordPress.
  2. Pilih Pages.
  3. Pilih Add New.
  4. Tambahkan blok Custom HTML.
  5. Masukkan kode HTML.
  6. Simpan halaman.
  7. Lihat hasilnya.

Namun, kode CSS tidak otomatis mengikuti jika file style.css masih berada di komputer Anda.

CSS tersebut perlu dimasukkan ke website WordPress menggunakan metode yang sesuai.

14. Menambahkan CSS di WordPress

Jika menggunakan tema WordPress yang mendukung CSS tambahan, Anda dapat memasukkan CSS melalui bagian Additional CSS.

Secara umum, bagian tersebut dapat ditemukan melalui:

Appearance → Customize → Additional CSS

Namun, lokasi menu dapat berbeda tergantung tema WordPress yang digunakan.

Salin kode CSS dari style.css, kemudian masukkan ke bagian CSS tambahan jika metode tersebut sesuai dengan tema Anda.

15. Mengapa Landing Page Penting untuk Website?

Landing page dapat membantu website memiliki halaman yang lebih fokus.

Misalnya, sebuah bisnis menjual jasa pembuatan website.

Daripada pengunjung harus mencari informasi melalui banyak halaman, sebuah landing page dapat langsung menampilkan:

  • Masalah yang dihadapi pelanggan.
  • Solusi yang ditawarkan.
  • Keunggulan layanan.
  • Harga atau paket.
  • Testimoni.
  • Cara menghubungi bisnis.
  • Tombol pemesanan.

Dengan demikian, pengunjung dapat memahami penawaran dengan lebih cepat.

Tips Membuat Landing Page yang Bagus

Berikut beberapa tips yang dapat diterapkan.

1. Gunakan Judul yang Menarik

Judul merupakan salah satu bagian pertama yang dilihat pengunjung.

Gunakan kalimat yang menjelaskan manfaat produk atau layanan.

2. Jangan Terlalu Banyak Informasi

Landing page sebaiknya tidak dipenuhi teks panjang yang tidak diperlukan.

Gunakan paragraf pendek dan struktur heading yang jelas.

3. Gunakan CTA yang Jelas

Pastikan pengunjung mengetahui tindakan apa yang harus dilakukan.

Contohnya:

Beli Sekarang, Daftar Sekarang, atau Hubungi Kami.

4. Gunakan Desain yang Konsisten

Gunakan gaya desain yang konsisten dari bagian atas sampai bawah halaman.

5. Perhatikan Tampilan Smartphone

Jangan hanya menguji website pada komputer.

Pastikan landing page juga nyaman digunakan pada smartphone.

6. Optimalkan Gambar

Gambar berukuran terlalu besar dapat membuat halaman menjadi berat.

Sebelum digunakan, optimalkan ukuran gambar agar tidak membebani website.

7. Pastikan Semua Link Berfungsi

Periksa semua tombol dan menu sebelum landing page dipublikasikan.

Kesalahan yang Sebaiknya Dihindari

Ada beberapa kesalahan yang sering dilakukan ketika membuat landing page.

Menggunakan Terlalu Banyak Warna

Terlalu banyak warna dapat membuat halaman terlihat tidak profesional.

CTA Tidak Jelas

Jika pengunjung tidak tahu harus melakukan apa setelah membaca halaman, kemungkinan mereka akan meninggalkan website.

Tidak Responsif

Landing page yang hanya bagus di desktop tetapi berantakan di smartphone dapat memberikan pengalaman pengguna yang buruk.

Gambar Terlalu Besar

File gambar yang besar dapat meningkatkan waktu loading halaman.

Terlalu Banyak Animasi

Animasi memang dapat membuat halaman terlihat menarik, tetapi penggunaan yang berlebihan dapat mengganggu pengunjung.

Kesimpulan

Cara membuat landing page dengan Visual Studio Code dapat dilakukan oleh pemula dengan mempelajari dasar HTML dan CSS. Visual Studio Code digunakan untuk menulis kode, HTML digunakan untuk membuat struktur halaman, sedangkan CSS digunakan untuk mengatur tampilan.

Dengan membuat landing page sendiri, Anda dapat mengatur desain dan struktur halaman sesuai kebutuhan. Landing page juga dapat digunakan untuk berbagai keperluan seperti promosi produk, jasa, bisnis, portofolio, pendaftaran, hingga kampanye pemasaran.

Jika Anda menggunakan WordPress, landing page yang dibuat melalui Visual Studio Code juga dapat diintegrasikan ke dalam website dengan metode yang sesuai.

Yang paling penting adalah membuat halaman yang jelas, responsif, cepat, mudah digunakan, dan memiliki tujuan yang spesifik.

Dengan latihan secara rutin, membuat landing page menggunakan Visual Studio Code dapat menjadi langkah awal untuk mempelajari dunia HTML, CSS, JavaScript, web development, dan WordPress.

Tag:
bul2i

Related Posts

Manfaat Coding untuk Kehidupan Sehari-hari
Agustus 20, 2026
Pengertian Jobdesk Seorang Engineering dan IT
Agustus 18, 2026
Cara Memperluas Jangkauan Website agar Lebih Banyak Pengunjung
Agustus 16, 2026

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *