Cara Membuat Website Toko Sepatu dengan HTML dan CSS

Cara Membuat Website Toko Sepatu dengan HTML dan CSS – Apakah Anda tertarik untuk memulai bisnis online Anda sendiri dengan membuat website toko sepatu? Jika iya, Anda berada di tempat yang tepat! Dalam panduan ini, haikalweb akan membimbing Anda melalui langkah-langkah detail untuk membuat website toko sepatu menggunakan HTML dan CSS. Anda tidak perlu memiliki pengalaman sebelumnya dalam pengembangan web, karena panduan ini dirancang untuk pemula.

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website toko sepatu dengan html dan css:

Perangkat laptop,
Text editor code (Sublime text),
Web browser (disarankan menggunakan Chrome),
Niat yang kuat.

Cara Membuat Website Toko Sepatu dengan HTML dan CSS

1. Buat Folder Project Website Toko Sepatu

Pertama, mari kita mulai dengan membuat folder untuk proyek website toko sepatu Anda. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “TokoSepatuWebsite“.

2. Buat Folder img

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda, seperti gambar produk sepatu. Download gambar disini untuk dapat diterapkan dalam project website toko sepatu.

3. Buat Sebuah File toko_sepatu.html

Sekarang, mari kita buat file HTML untuk halaman utama website toko sepatu. Buka editor teks favorit Anda dan buat file baru dengan nama “toko_sepatu.html“. Mulailah dengan menulis struktur dasar HTML, seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Sepatu Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Toko Sepatu Online</h1>
    </header>
    <main>
        <section class="products">
            <div class="product">
                <img src="img/sepatu1.jpg" alt="Sepatu 1">
                <h2>Sepatu Keren 1</h2>
                <p>Harga: Rp 200.000</p>
                <button>Beli Sekarang</button>
            </div>
            <div class="product">
                <img src="img/sepatu2.jpg" alt="Sepatu 1">
                <h2>Sepatu Keren 2</h2>
                <p>Harga: Rp 250.000</p>
                <button>Beli Sekarang</button>
            </div>
            <div class="product">
                <img src="img/sepatu3.jpg" alt="Sepatu 1">
                <h2>Sepatu Keren 3</h2>
                <p>Harga: Rp 280.000</p>
                <button>Beli Sekarang</button>
            </div>
            <!-- Tambahkan lebih banyak produk sesuai kebutuhan -->
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Toko Sepatu Online</p>
    </footer>
</body>
</html>

4. Buat File style.css

Selanjutnya, kita perlu membuat file CSS untuk mendesain tampilan website toko sepatu kita. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Berikut ini file css yang dapat Anda tambahkan untuk dapat membuat website toko sepatu:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.product {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.product img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

5. Mengubah Produk Toko Sepatu

Sekarang, saatnya untuk menambahkan produk-produk sepatu ke dalam website Anda. Anda dapat menggunakan tag HTML seperti <div> untuk membuat layout dan struktur untuk setiap produk, dan kemudian menggabungkannya dengan CSS untuk menambahkan gaya dan tata letak.

<div class="product">
    <img src="img/sepatu1.jpg" alt="Sepatu 1">
    <h2>Sepatu 1</h2>
    <p>Harga: Rp XXX</p>
    <button>Beli Sekarang</button>
</div>

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS Anda, pastikan untuk menyimpan perubahan Anda. Kemudian, buka file “toko_sepatu.html” menggunakan browser web Anda untuk melihat tampilan website Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat website toko sepatu sederhana menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen lebih lanjut dengan desain dan fungsionalitasnya sesuai keinginan Anda. Semoga sukses dengan proyek website Anda!