Cari materi atau course... ⌘K Masuk Mahir.dev Jalur belajar pengembangan web berbasis teks untuk orang yang sudah capek lompat-lompat tutorial. Selesaikan, buktikan, dan pakai skill webmu.
© 2026 Mahir.dev Academy. Semua hak cipta dilindungi.
Studi Kasus: Bikin Company Profile | Dasar Hosting & Deployment | Mahir.dev | Mahir.dev Academy
3 Studi Kasus: Bikin Company Profile (3/7) Praktik langsung! Ikuti langkah-langkah membuat website company profile sederhana menggunakan HTML dan CSS yang akan kita gunakan sebagai contoh untuk dideploy ke platform hosting.
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 > © < 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 > © < 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 > © < 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 > © < 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.csscss /* 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
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_AND A > git push -u origin master <URL_REPO_GITHUB_ANDA> dengan URL yang kamu copy.
mahir-company!
Simpan Bagikan Ikuti di Google Ajukan pertanyaan, beri solusi, atau diskusikan materi pelajaran ini.
0 komentar Belum ada komentar untuk pelajaran ini.
Jadilah yang pertama memulai diskusi atau mengajukan pertanyaan!
, Geneva,
Verdana
,
sans-serif
;
}
body {
line-height : 1.6 ;
color : #333 ;
background-color : #f4f4f4 ;
}
header {
background-color : #333 ;
color : white ;
padding : 1 rem 0 ;
position : sticky ; /* Bikin header nempel di atas */
top : 0 ;
z-index : 100 ;
}
nav {
width : 90 % ;
max-width : 1100 px ;
margin : 0 auto ;
display : flex ;
justify-content : space-between ;
align-items : center ;
}
nav .logo {
font-size : 1.5 rem ;
font-weight : bold ;
}
nav ul {
list-style-type : none ;
display : flex ;
}
nav ul li {
margin-left : 20 px ;
}
nav ul li a {
color : white ;
text-decoration : none ;
padding : 5 px 10 px ;
transition : background-color 0.3 s 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 : 4 px ;
}
main {
width : 90 % ;
max-width : 1100 px ;
margin : 2 rem auto ; /* Kasih jarak dari header dan footer */
padding-bottom : 2 rem ; /* Jarak ke footer */
}
.hero {
background : #5c67f2 ;
color : white ;
padding : 4 rem 2 rem ;
text-align : center ;
border-radius : 8 px ;
margin-bottom : 2 rem ;
}
.hero h1 {
font-size : 2.5 rem ;
margin-bottom : 1 rem ;
color : white ; /* Pastikan warna kontras */
}
.tombol-utama {
display : inline-block ;
background-color : #ff6b6b ;
color : white ;
padding : 0.8 rem 1.5 rem ;
text-decoration : none ;
border-radius : 5 px ;
font-weight : bold ;
margin-top : 1 rem ;
transition : background-color 0.3 s ease ;
}
.tombol-utama:hover {
background-color : #ee5253 ;
}
.fitur-unggulan h2 , .konten-halaman h1 , .konten-halaman h2 {
margin-bottom : 1.5 rem ;
color : #333 ;
text-align : center ;
}
.konten-halaman h1 { font-size : 2.2 rem ; }
.konten-halaman h2 { font-size : 1.8 rem ; margin-top : 2 rem ;}
.grid-fitur , .grid-layanan {
display : grid ;
grid-template-columns : repeat ( auto-fit , minmax ( 280 px , 1 fr )); /* Responsif! */
gap : 20 px ;
margin-bottom : 2 rem ;
}
.item-fitur , .item-layanan {
background-color : white ;
padding : 20 px ;
border-radius : 8 px ;
box-shadow : 0 2 px 10 px rgba ( 0 , 0 , 0 , 0.1 );
}
.item-fitur h3 , .item-layanan h2 {
color : #5c67f2 ;
margin-bottom : 0.5 rem ;
text-align : left ; /* Override center dari parent */
}
.item-layanan h2 { font-size : 1.5 rem ; } /* Sesuaikan ukuran judul di item layanan */
.info-kontak {
margin-bottom : 2 rem ;
padding : 15 px ;
background-color : #e9ecef ;
border-left : 5 px solid #5c67f2 ;
border-radius : 4 px ;
}
.form-kontak label {
display : block ;
margin-bottom : 5 px ;
font-weight : bold ;
}
.form-kontak input [ type = "text" ],
.form-kontak input [ type = "email" ],
.form-kontak textarea {
width : 100 % ;
padding : 10 px ;
margin-bottom : 15 px ;
border : 1 px solid #ccc ;
border-radius : 4 px ;
font-size : 1 rem ;
}
.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 : 1 rem 0 ;
margin-top : 2 rem ; /* Kasih jarak dari konten terakhir */
}
bash
