Sebagai seorang profesional, freelancer, atau seorang yang ingin membangun kehadiran online, memiliki website portofolio adalah langkah yang sangat penting. Website portofolio memungkinkan Anda untuk menampilkan karya Anda, pengalaman, dan kemampuan kepada dunia. Dalam panduan ini, Anda akan belajar cara membuat website portofolio gratis dengan HTML dan CSS, tanpa perlu mengeluarkan biaya tambahan.
Cara Membuat Website Portofolio Gratis Dengan HTML dan CSS Beserta Contohnya :
1. Perencanaan Website Portofolio Anda
Sebelum Anda mulai membuat website portofolio, ada beberapa hal yang perlu Anda rencanakan dan persiapkan.
1. Tentukan Tujuan Anda
Pertama-tama, tentukan tujuan utama dari website portofolio Anda. Apakah Anda ingin menampilkan karya seni, proyek desain, atau portofolio profesional Anda? Tentukan audiens target Anda.
2. Kumpulkan Materi
Kumpulkan semua materi yang ingin Anda tampilkan di portofolio Anda, seperti gambar, deskripsi proyek, informasi kontak, dan CV. Pastikan untuk memiliki versi digital dan berkualitas tinggi dari karya-karya Anda.
3. Pilih Nama Domain
Pilih nama domain yang mencerminkan identitas Anda atau bisnis Anda. Anda dapat menggunakan layanan domain gratis atau membeli nama domain yang sesuai.
2. Membuat Website dengan HTML
Sekarang kita akan mulai membuat website portofolio menggunakan HTML, bahasa markup dasar untuk halaman web.
1. Struktur Dasar HTML
Setiap halaman web HTML memiliki struktur dasar. Berikut adalah kerangka dasar untuk website portofolio Anda:
html :
<!DOCTYPE html>
<html>
<head>
<title>Portofolio Saya</title>
</head>
<body>
<!– Konten portofolio Anda akan ditambahkan di sini –>
</body>
</html>
2. Membuat Header
Header adalah bagian atas halaman web yang berisi judul, menu navigasi, dan informasi singkat tentang Anda. Ini adalah tempat yang bagus untuk menyambut pengunjung Anda.
html :
<header>
<h1>Selamat Datang di Portofolio Saya</h1>
<nav>
<ul>
<li><a href=”#tentang”>Tentang</a></li>
<li><a href=”#portofolio”>Portofolio</a></li>
<li><a href=”#kontak”>Kontak</a></li>
</ul>
</nav>
</header>
3. Menambahkan Tentang Saya
Bagian “Tentang” adalah tempat Anda dapat memperkenalkan diri Anda kepada pengunjung. Ini dapat mencakup deskripsi pribadi, latar belakang, dan keterampilan Anda.
html :
<section id=”tentang”>
<h2>Tentang Saya</h2>
<p>Saya adalah seorang desainer grafis dengan pengalaman selama 5 tahun dalam industri. Saya berfokus pada desain branding dan identitas perusahaan.</p>
</section>
4. Menambahkan Portofolio
Bagian “Portofolio” adalah area di mana Anda akan menampilkan karya-karya terbaik Anda. Gunakan elemen HTML seperti <div> dan <img> untuk menampilkan karya Anda.
html :
<section id=”portofolio”>
<h2>Portofolio</h2>
<div class=”item”>
<img src=”gambar1.jpg” alt=”Karya 1″>
<h3>Karya 1</h3>
<p>Deskripsi singkat tentang karya 1.</p>
</div>
<div class=”item”>
<img src=”gambar2.jpg” alt=”Karya 2″>
<h3>Karya 2</h3>
<p>Deskripsi singkat tentang karya 2.</p>
</div>
</section>
5. Menambahkan Kontak
Tambahkan informasi kontak Anda sehingga pengunjung dapat dengan mudah menghubungi Anda.
html :
<section id=”kontak”>
<h2>Kontak</h2>
<p>Silakan hubungi saya melalui email: <a href=”mailto:[email protected]”>[email protected]</a></p>
</section>
6. Membuat Footer
Footer adalah tempat Anda dapat menambahkan informasi tambahan, tautan sosial media, atau hak cipta.
html :
<footer>
<p>© 2023 Portofolio Saya</p>
<ul class=”sosial-media”>
<li><a href=”https://www.facebook.com/”>Facebook</a></li>
<li><a href=”https://www.instagram.com/”>Instagram</a></li>
<li><a href=”https://www.linkedin.com/”>LinkedIn</a></li>
</ul>
</footer>
3. Mempercantik dengan CSS
Sekarang kita akan memberi tampilan yang menarik pada website portofolio Anda dengan CSS.
1. Membuat File CSS Terpisah
Anda dapat membuat file CSS terpisah untuk mengatur tampilan situs web Anda. Buat file dengan ekstensi .css dan simpan dalam direktori yang sama dengan file HTML Anda.
2. Menghubungkan File CSS
Tambahkan elemen <link> ke dalam bagian <head> dokumen HTML Anda untuk menghubungkan file CSS ke halaman web Anda.
html :
<head>
<title>Portofolio Saya</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
3. Mengatur Gaya CSS
Anda dapat menentukan gaya untuk elemen HTML menggunakan CSS. Contoh sederhana untuk mengatur tampilan header:
css :
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
header h1 {
font-size: 36px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #fff;
}
Pastikan untuk menggantikan kode CSS ini sesuai dengan preferensi desain Anda.
4. Menambahkan Gambar
Gambar adalah elemen penting dalam website portofolio. Anda dapat menambahkan gambar karya Anda dengan elemen <img>. Pastikan untuk menyimpan gambar dalam direktori yang sama dengan file HTML Anda.
html :
<div class=”item”>
<img src=”gambar1.jpg” alt=”Karya 1″>
<h3>Karya 1</h3>
<p>Deskripsi singkat tentang karya 1.</p>
</div>
Pastikan untuk menggantikan “gambar1.jpg” dengan nama file gambar Anda.
5. Responsifitas
Pastikan bahwa website Anda dapat diakses dengan baik di berbagai perangkat, termasuk ponsel dan tablet. Anda dapat menggunakan CSS media queries untuk mengatur tampilan yang berbeda tergantung pada ukuran layar.
css :
@media (max-width: 768px) {
/* Gaya CSS untuk layar berukuran kecil di sini */
}
6. Pengujian dan Peluncuran
Sebelum Anda meluncurkan website portofolio Anda, lakukan pengujian akhir untuk memastikan semua tautan berfungsi dengan baik dan konten terlihat seperti yang diharapkan. Setelah selesai, Anda dapat meluncurkannya dan membagikan tautan kepada orang lain.
Kesimpulan :
Membuat website portofolio dengan HTML dan CSS adalah langkah penting untuk memamerkan karya dan kemampuan Anda kepada dunia. Dengan langkah-langkah di atas, Anda dapat dengan mudah membuat website portofolio yang profesional dan menarik secara gratis. Ingatlah bahwa perawatan dan pembaruan teratur akan membantu website portofolio Anda tetap relevan dan efektif dalam jangka panjang. Selamat membuat portofolio online Anda!