Cara Membuat Website Toko Sepatu dengan HTML dan CSS

by

Cara Membuat Website Toko Sepatu dengan HTML dan CSS – Dalam era digital yang serba cepat dan berkembang pesat seperti sekarang, keberadaan toko online telah menjadi kebutuhan hampir bagi setiap bisnis. Dengan teknologi yang semakin canggih, menjalankan bisnis sepatu melalui platform online telah menjadi lebih mudah dari sebelumnya. Salah satu langkah yang krusial dalam membangun presensi online adalah dengan memiliki website yang menarik dan fungsional.

Dalam panduan ini, caramembuatweb akan memandu Anda melalui proses langkah demi langkah dalam membuat sebuah website toko sepatu menggunakan bahasa pemrograman HTML dan CSS. Tidak perlu khawatir jika Anda pemula dalam dunia pengembangan web, kami akan menjelaskan setiap langkah dengan detail sehingga Anda dapat mengikutinya dengan mudah. Mari kita mulai membangun toko sepatu online yang menarik dan profesional!

Alat yang harus Anda siapkan

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

  • Perangkat laptop,
  • Web browser (Google chrome),
  • Sublime text (Text editor code),
  • Niat yang sungguh-sungguh.

Cara Membuat Website Toko Sepatu dengan HTML dan CSS

1. Buat Folder Project Toko Sepatu

Pertama, buatlah folder khusus untuk proyek toko sepatu Anda. Anda dapat memberinya nama sesuai keinginan, misalnya “toko_sepatu_project“.

2. Buat Folder img

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

3. Buat Sebuah File toko_sepatu.html

Gunakan editor teks favorit Anda dan buatlah file baru dengan nama “toko_sepatu.html” di dalam folder proyek Anda. Ini akan menjadi halaman utama website toko sepatu Anda.

Berikut ini file html yang harus Anda tambahkan untuk dapat membuat website toko sepatu dengan html dan css:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toko Sepatu</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>Toko Sepatu</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Beranda</a></li>
                    <li><a href="https://riztekno.com/">Produk</a></li>
                    <li><a href="https://riztekno.com/">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="landing-page">
        <div class="container">
            <div class="landing-content">
                <h1>Toko Sepatu Sejahtera</h1>
                <p>Temukan Koleksi Sepatu Terbaru di Toko Kami!</p>
                <button class="button">Coba Sekarang</button>
            </div>
            <img src="img/gambar_landing.jpg" alt="Deskripsi gambar" class="landing-image">
        </div>
    </section>
    

    <section class="produk">
        <div class="container">
            <div class="produk-item">
                <img src="img/shoe2.jpg" alt="Sepatu 1">
                <h2>Sepatu Keren</h2>
                <p>Deskripsi singkat tentang sepatu ini.</p>
                <span class="harga">Rp 200.000</span>
                <a href="https://riztekno.com/" class="btn">Beli</a>
            </div>
            <div class="produk-item">
                <img src="img/shoe3.jpg" alt="Sepatu 2">
                <h2>Sepatu Elegan</h2>
                <p>Deskripsi singkat tentang sepatu ini.</p>
                <span class="harga">Rp 250.000</span>
                <a href="https://riztekno.com/" class="btn">Beli</a>
            </div>
            <div class="produk-item">
                <img src="img/shoe1.jpg" alt="Sepatu 3">
                <h2>Sepatu Bagus</h2>
                <p>Deskripsi singkat tentang sepatu ini.</p>
                <span class="harga">Rp 169.000</span>
                <a href="https://riztekno.com/" class="btn">Beli</a>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>Hak Cipta © 2024 Toko Sepatu</p>
        </div>
    </footer>
</body>

</html>
 

4. Buat File style.css

Sekarang, buatlah file baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk mengatur tata letak dan tampilan visual dari halaman HTML Anda.

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

    .container {
        width: 80%;
        margin: 0 auto;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 20px 0;
    }

    header h1 {
        margin: 0;
        display: inline;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    nav ul li {
        display: inline;
        margin-right: 20px;
    }

    nav ul li a {
        color: #fff;
        text-decoration: none;
    }

    .landing-page {
        background-color: #f2f2f2;
        padding: 50px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .landing-content {
        flex: 1;
        margin-right: 20px;
    }

    .landing-content h1 {
        font-size: 36px;
        margin-bottom: 10px; /* Mengurangi jarak antara judul dan paragraf */
    }

    .landing-content p {
        font-size: 18px;
        margin-bottom: 10px; /* Mengurangi jarak antara paragraf dan tombol */
    }

    .landing-image {
        width: 40%;
        margin-right: 50px; /* Memberi jarak antara gambar dan konten */
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    .button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #0056b3;
    }



    .btn {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
    }

    .produk {
        background-color: #fff;
        padding: 50px 0 0;
    }

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

    .produk-item {
        text-align: center;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    .produk-item img {
        width: 100%;
        max-width: 200px;
        border-radius: 5px;
    }

    .produk-item h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .produk-item p {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .produk-item .harga {
        font-size: 20px;
        font-weight: bold;
    }

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

5. Mengubah Produk Toko Sepatu

Di dalam file “toko_sepatu.html“, Anda dapat mulai menambahkan konten seperti judul, deskripsi toko, dan tentu saja, produk-produk sepatu yang Anda jual. Gunakan tag HTML seperti <div>, <h1>, <p>, dan lainnya untuk membuat struktur halaman Anda.

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS

Contoh:

 
<div class="product">
    <img src="img/sepatu1.jpg" alt="Sepatu 1">
    <h2>Sepatu Keren 1</h2>
    <p>Harga: Rp200.000</p>
</div>
 

Pastikan juga untuk menyimpan gambar-gambar produk sepatu Anda di dalam folder “img” yang telah Anda buat sebelumnya.

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, simpan perubahan Anda. Buka file “toko_sepatu.html” menggunakan browser web Anda untuk melihat tampilan website toko sepatu Anda yang sedang berkembang.

Preview hasil

Berikut ini hasil yang akan tampil nantinya jika Anda berhasil membuat website toko sepatu dengan html dan css:

Penutup

Melalui panduan langkah demi langkah ini, Anda telah mempelajari bagaimana membuat website toko sepatu menggunakan HTML dan CSS dengan mudah. Dengan teknologi yang semakin maju, memiliki toko online bukan lagi mimpi yang jauh dari jangkauan, tetapi merupakan langkah yang sangat mungkin untuk meningkatkan bisnis Anda.

Ingatlah bahwa belajar tidak pernah berhenti, dan dunia pengembangan web terus berkembang. Jangan ragu untuk terus eksplorasi dan belajar lebih lanjut tentang teknologi web yang baru. Dengan kreativitas dan dedikasi, Anda dapat menghasilkan website yang menarik dan efektif untuk menjual produk sepatu Anda.

Sekarang, saatnya untuk menerapkan pengetahuan yang Anda dapatkan dalam praktik. Mulailah dengan membuat website toko sepatu Anda sendiri dan saksikan bagaimana bisnis online Anda berkembang. Semoga sukses dalam perjalanan Anda menuju dunia e-commerce!

Related posts:

Artikel Terkait:   Cara Membuat Web Dinamis dengan HTML dan CSS