Studi Kasus: Bikin Company Profile Sederhana (Siap Deploy!)

Sebelum kita benar-benar "nerbangin" website ke internet, yuk kita bikin dulu website sederhana yang bakal jadi bahan praktik kita buat di-deploy. Gak perlu yang rumit-rumit, yang penting kita punya beberapa halaman HTML dan satu file CSS buat ngasih tampilan dasar.

Kita akan bikin website company profile fiktif bernama "Mahir Company", sebuah perusahaan teknologi yang fokus pada perkembangan web dan pendidikan programmer.

Tujuan: Membuat proyek website statis kecil yang terdiri dari beberapa halaman dan siap untuk di-commit ke Git dan di-push ke GitHub dengan nama repositori mahir-company.

Langkah 1: Siapkan Struktur Folder Proyek

Buka terminalmu.
Buat folder baru untuk proyek ini, misalnya mahir-company, lalu masuk ke dalamnya:
bash
```
mkdir mahir-company
cd mahir-company
```

Di dalam folder mahir-company, buat struktur folder berikut:

plaintext

mahir-company/
├── index.html
├── tentang.html
├── layanan.html
├── kontak.html
└── css/
    └── style.css
└── images/ 
    └── (Kosongkan dulu atau siapkan beberapa gambar placeholder jika mau)

Kamu bisa membuatnya pake perintah mkdir css images dan touch index.html tentang.html layanan.html kontak.html css/style.css.

Langkah 2: Isi File HTML

Salin dan tempel kode berikut ke masing-masing file HTML.

a. `index.html` (Halaman Utama)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selamat Datang di Mahir Company</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Mahir Company</div>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="layanan.html">Layanan</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <section class="hero">
            <h1>Inovasi Teknologi, Edukasi Programmer Masa Depan</h1>
            <p>Kami membantu Anda dan perusahaan Anda bertransformasi melalui solusi web canggih dan program pelatihan developer berkualitas.</p>
            <a href="layanan.html" class="tombol-utama">Lihat Layanan Kami</a>
        </section>
 
        <section class="fitur-unggulan">
            <h2>Kenapa Memilih Kami?</h2>
            <div class="grid-fitur">
                <div class="item-fitur">
                    <h3>Solusi Inovatif</h3>
                    <p>Teknologi web terkini untuk kebutuhan bisnis Anda.</p>
                </div>
                <div class="item-fitur">
                    <h3>Tim Ahli</h3>
                    <p>Developer dan instruktur berpengalaman siap membantu.</p>
                </div>
                <div class="item-fitur">
                    <h3>Kurikulum Terdepan</h3>
                    <p>Program edukasi yang relevan dengan industri.</p>
                </div>
            </div>
        </section>
    </main>
 
    <footer>
        <p>&copy; <script>document.write(new Date().getFullYear())</script> Mahir Company. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

b. `tentang.html` (Halaman Tentang Kami)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tentang Mahir Company</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Mahir Company</div>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="layanan.html">Layanan</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <section class="konten-halaman">
            <h1>Tentang Mahir Company</h1>
            <p>Mahir Company didirikan dengan visi untuk menjadi yang terdepan dalam inovasi teknologi web dan pengembangan sumber daya manusia di bidang pemrograman. Kami percaya bahwa teknologi adalah kunci untuk masa depan, dan developer yang kompeten adalah motor penggeraknya.</p>
            <h2>Misi Kami</h2>
            <ul>
                <li>Menyediakan solusi pengembangan web kustom yang berkualitas tinggi.</li>
                <li>Menyelenggarakan program pelatihan dan edukasi pemrograman yang efektif dan relevan.</li>
                <li>Membangun komunitas developer yang solid dan saling mendukung.</li>
            </ul>
            <p>Tim kami terdiri dari para profesional berpengalaman yang memiliki passion di bidang teknologi dan pendidikan. Kami siap menjadi mitra Anda dalam mencapai kesuksesan digital.</p>
        </section>
    </main>
 
    <footer>
        <p>&copy; <script>document.write(new Date().getFullYear())</script> Mahir Company. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

c. `layanan.html` (Halaman Layanan)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layanan Kami - Mahir Company</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Mahir Company</div>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="layanan.html">Layanan</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <section class="konten-halaman">
            <h1>Layanan Unggulan Kami</h1>
            <div class="grid-layanan">
                <article class="item-layanan">
                    <h2>Pengembangan Web Kustom</h2>
                    <p>Dari website company profile, toko online, hingga aplikasi web kompleks, kami siap mewujudkannya dengan teknologi terkini.</p>
                </article>
                <article class="item-layanan">
                    <h2>Pelatihan Pemrograman Intensif</h2>
                    <p>Program bootcamp dan kursus singkat untuk menjadi Full-Stack Developer, Frontend Developer, atau Backend Developer handal.</p>
                </article>
                <article class="item-layanan">
                    <h2>Konsultasi Teknologi</h2>
                    <p>Butuh saran strategis untuk transformasi digital bisnismu? Tim ahli kami siap membantu.</p>
                </article>
            </div>
        </section>
    </main>
 
    <footer>
        <p>&copy; <script>document.write(new Date().getFullYear())</script> Mahir Company. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

d. `kontak.html` (Halaman Kontak)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hubungi Kami - Mahir Company</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Mahir Company</div>
            <ul>
                <li><a href="index.html">Beranda</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="layanan.html">Layanan</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
 
    <main>
        <section class="konten-halaman">
            <h1>Hubungi Mahir Company</h1>
            <p>Kami senang mendengar dari Anda! Silakan gunakan informasi di bawah ini untuk menghubungi kami, atau isi formulir kontak.</p>
            
            <div class="info-kontak">
                <p><strong>Email:</strong> <a href="mailto:halo@mahir.dev">halo@mahir.dev</a></p>
                <p><strong>Alamat:</strong> Jl. Hijrah, Baturaja, OKU, Sumatera Selatan Indonesia</p>
                <!-- Bisa tambahkan nomor telepon jika mau -->
            </div>
 
            <form action="https://formspree.io/f/YOUR_UNIQUE_FORM_ID" method="POST" class="form-kontak"> <!-- Ganti dengan ID Formspree Anda -->
                <label for="nama">Nama Anda:</label>
                <input type="text" id="nama" name="nama" required>
 
                <label for="email">Email Anda:</label>
                <input type="email" id="email" name="email" required>
 
                <label for="pesan">Pesan Anda:</label>
                <textarea id="pesan" name="pesan" rows="5" required></textarea>
 
                <button type="submit" class="tombol-utama">Kirim Pesan</button>
            </form>
        </section>
    </main>
 
    <footer>
        <p>&copy; <script>document.write(new Date().getFullYear())</script> Mahir Company. Semua Hak Dilindungi.</p>
    </footer>
</body>
</html>

(Catatan: Untuk form kontak, saya menggunakan action Formspree sebagai contoh. Anda perlu mengganti YOUR_UNIQUE_FORM_ID dengan ID form Anda sendiri di Formspree jika ingin form tersebut berfungsi mengirim email.)

Langkah 3: Isi File CSS Dasar

Salin dan tempel kode berikut ke file css/style.css. Ini adalah styling yang sangat dasar, kamu bebas mengembangkannya nanti!

`css/style.css`

css

/* Reset dasar sederhana */
body, h1, h2, h3, p, ul, li, a, form, input, textarea, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
 
body {
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}
 
header {
    background-color: #333;
    color: white;
    padding: 1rem 0;
    position: sticky; /* Bikin header nempel di atas */
    top: 0;
    z-index: 100;
}
 
nav {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
nav .logo {
    font-size: 1.5rem;
    font-weight: bold;
}
 
nav ul {
    list-style-type: none;
    display: flex;
}
 
nav ul li {
    margin-left: 20px;
}
 
nav ul li a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}
 
nav ul li a:hover, nav ul li a.active { /* (Tambahkan class 'active' di HTML untuk halaman saat ini) */
    background-color: #555;
    border-radius: 4px;
}
 
main {
    width: 90%;
    max-width: 1100px;
    margin: 2rem auto; /* Kasih jarak dari header dan footer */
    padding-bottom: 2rem; /* Jarak ke footer */
}
 
.hero {
    background: #5c67f2;
    color: white;
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 2rem;
}
 
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white; /* Pastikan warna kontras */
}
 
.tombol-utama {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}
 
.tombol-utama:hover {
    background-color: #ee5253;
}
 
.fitur-unggulan h2, .konten-halaman h1, .konten-halaman h2 {
    margin-bottom: 1.5rem;
    color: #333;
    text-align: center;
}
.konten-halaman h1 { font-size: 2.2rem; }
.konten-halaman h2 { font-size: 1.8rem; margin-top: 2rem;}
 
 
.grid-fitur, .grid-layanan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsif! */
    gap: 20px;
    margin-bottom: 2rem;
}
 
.item-fitur, .item-layanan {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
 
.item-fitur h3, .item-layanan h2 {
    color: #5c67f2;
    margin-bottom: 0.5rem;
    text-align: left; /* Override center dari parent */
}
.item-layanan h2 { font-size: 1.5rem; } /* Sesuaikan ukuran judul di item layanan */
 
 
.info-kontak {
    margin-bottom: 2rem;
    padding: 15px;
    background-color: #e9ecef;
    border-left: 5px solid #5c67f2;
    border-radius: 4px;
}
 
.form-kontak label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
 
.form-kontak input[type="text"],
.form-kontak input[type="email"],
.form-kontak textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}
 
.form-kontak textarea {
    resize: vertical; /* Biar user bisa resize tinggi textarea */
}
 
.form-kontak .tombol-utama { /* Styling ulang tombol di form kontak */
    display: block;
    width: auto; /* Atau 100% jika mau full width */
    margin-top: 0;
}
 
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem; /* Kasih jarak dari konten terakhir */
}

Langkah 4: Inisialisasi Git dan Push ke GitHub

Sekarang, mari kita simpan proyek ini ke Git dan GitHub.

Inisialisasi Repositori Git Lokal: Di terminal, pastikan kamu ada di folder mahir-company. Lalu jalankan:

bash

git init
git config --global init.defaultBranch master # (Jika belum pernah diset global)
git branch -M master # Set branch saat ini ke main jika defaultnya master

Buat File .gitignore: Buat file bernama .gitignore di root folder proyek (mahir-company/) dan isi dengan:
gitignore
```
# File sistem operasi
.DS_Store
Thumbs.db
 
# Folder editor (jika ada, sesuaikan)
.vscode/
.idea/
```
Add dan Commit Awal:
bash
```
git add .
git commit -m "first commit"
```
Buat Repositori Baru di GitHub:
- Buka GitHub, buat repositori baru dengan nama mahir-company (atau nama lain yang kamu suka).
- Jangan inisialisasi dengan README, .gitignore, atau license dari GitHub (biar kosong).
Hubungkan Lokal ke Remote dan Push:
- Copy URL HTTPS dari repositori GitHub-mu yang baru dibuat.
- Kembali ke terminal, jalankan:
  bash
```
git remote add origin <URL_REPO_GITHUB_ANDA>
git push -u origin master
```
  Ganti <URL_REPO_GITHUB_ANDA> dengan URL yang kamu copy.

Sekarang, proyek company profile sederhana "Mahir Company" sudah ada di komputermu dan juga sudah tersimpan di GitHub dengan nama repositori mahir-company!

Studi Kasus: Bikin Company Profile

Studi Kasus: Bikin Company Profile Sederhana (Siap Deploy!)

Langkah 1: Siapkan Struktur Folder Proyek

Langkah 2: Isi File HTML

a. index.html (Halaman Utama)

b. tentang.html (Halaman Tentang Kami)

c. layanan.html (Halaman Layanan)

d. kontak.html (Halaman Kontak)

Langkah 3: Isi File CSS Dasar

css/style.css

Langkah 4: Inisialisasi Git dan Push ke GitHub

a. `index.html` (Halaman Utama)

b. `tentang.html` (Halaman Tentang Kami)

c. `layanan.html` (Halaman Layanan)

d. `kontak.html` (Halaman Kontak)

`css/style.css`