Cara Membuat Halaman Portofolio Pribadi dengan HTML dan CSS (Internal CSS) untuk Pemula
Ingin memiliki website portofolio pribadi sederhana yang bisa Anda buat sendiri? Artikel ini akan memandu Anda langkah demi langkah untuk membuat halaman portofolio menggunakan HTML dan CSS internal. Panduan ini dirancang khusus untuk pemula agar mudah diikuti tanpa kebingungan.
Langkah 1: Siapkan File HTML
Buka editor teks seperti Notepad atau VSCode, lalu buat file baru dan beri nama:
index.htmlSemua kode akan kita tulis dalam file ini.
Langkah 2: Struktur Dasar HTML dengan CSS Internal
Salin kode di bawah ini dan paste ke file index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Pribadi</title>
<!-- CSS Internal -->
<style>
/* Gaya untuk body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
/* Gaya untuk Heading 1 */
h1 {
color: #007bff;
}
/* Gaya untuk Paragraf P */
p {
font-size: 18px;
}
/* Gaya untuk Section*/
section {
margin-top: 20px;
padding: 10px;
background: #fff;
border-radius: 8px;
}
/* Gaya untuk UL */
ul {
list-style-type: square;
padding-left: 20px;
}
/* Gaya untuk A dan A Hover */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Gaya untuk IMG */
img {
border-radius: 50%;
}
</style>
</head>
<body>
<!-- Konten akan ditambahkan di langkah berikut -->
<!-- Tambahkan 3: Tambahkan Judul & Intro di sini -->
<!-- Tambahkan 4: Bagian Tentang Saya di sini -->
<!-- Tambahkan 5: Foto Profil di sini -->
<!-- Tambahkan 6: Daftar Proyek di sini -->
<!-- Tambahkan 7: Tambahkan Kontak di sini -->
</body>
</html>
💡 Catatan: CSS internal berada di dalam tag <style> di bagian <head>, sehingga tidak perlu file terpisah.
Langkah 3: Tambahkan Judul & Intro
Di dalam tag <body>, tambahkan kode ini:
<h1>Halo, Saya [Nama Anda]</h1> <p>Selamat datang di portofolio pribadi saya.</p>
Langkah 4: Bagian Tentang Saya
Tambahkan di bawah paragraf intro:
<section id="about"> <h2>Tentang Saya</h2> <p>Saya adalah seorang [profesi/hobi] yang tertarik pada [bidang Anda].</p> </section>
Langkah 5: Tambahkan Foto Profil
Simpan foto profil di folder yang sama dengan index.html (contoh: foto.jpg), lalu tambahkan kode ini setelah bagian "Tentang Saya":
<img src="foto.jpg" alt="Foto Profil" width="150">
Langkah 6: Daftar Proyek
Tambahkan daftar proyek Anda:
<section id="projects">
<h2>Proyek Saya</h2>
<ul>
<li>Website Toko Online</li>
<li>Aplikasi Catatan Harian</li>
<li>Desain Poster Digital</li>
</ul>
</section>
Langkah 7: Tambahkan Kontak
Di bagian paling bawah (sebelum </body>):
<section id="contact"> <h2>Kontak</h2> <p>Email: <a href="mailto:emailanda@gmail.com">emailanda@gmail.com</a></p> <p>LinkedIn: <a href="https://linkedin.com/in/username" target="_blank">Profil Saya</a></p> </section>
Langkah 8: Simpan & Lihat Hasilnya
Simpan file index.html, lalu buka di browser (Chrome/Edge/Firefox). Anda sekarang memiliki halaman portofolio sederhana yang sudah rapi!
🚀 Tips Tambahan SEO
- Gunakan kata kunci seperti "portofolio HTML CSS" di judul dan deskripsi.
- Tambahkan foto profil dengan nama file yang relevan, misalnya
foto-profil-nama.jpg. - Buat konten relevan yang mencantumkan keahlian dan proyek Anda.
Membuat website portofolio pribadi yang profesional menggunakan HTML dan CSS internal. kita akan lanjut Part 2: Menambahkan Header dan Footer dengan format step by step lanjutan dari Part 1.