Pendahuluan
Memiliki portfolio yang menarik dan profesional merupakan aset penting bagi setiap web developer. Portfolio ini berfungsi sebagai etalase yang memamerkan kemampuan dan proyek-proyek yang telah Anda kerjakan. Dengan portfolio yang baik, Anda dapat menarik perhatian calon klien atau pemberi kerja dan meyakinkan mereka bahwa Anda adalah orang yang tepat untuk pekerjaan tersebut.
Salah satu cara termudah dan paling efektif untuk membuat portfolio adalah dengan menggunakan bahasa pemrograman web dasar, yaitu HTML dan CSS. HTML digunakan untuk membangun struktur dan konten website, sedangkan CSS digunakan untuk mengatur tampilan dan gaya website.
Artikel ini akan memandu Anda langkah demi langkah dalam membuat portfolio sederhana menggunakan HTML dan CSS. Kami akan membahas semua dasar-dasar yang Anda butuhkan, mulai dari membuat file HTML hingga menambahkan elemen desain yang menarik.
Menyiapkan Struktur HTML
Langkah pertama adalah membuat file HTML baru. Anda dapat melakukannya dengan editor teks seperti Notepad (Windows), TextEdit (Mac), atau editor kode seperti Visual Studio Code atau Atom.
Membuat File HTML
Buat file baru dan beri nama "portfolio.html". Di dalam file tersebut, ketik kode HTML dasar berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - [Nama Anda]</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Kode ini mendefinisikan struktur dasar website Anda. Elemen-elemen utama meliputi:
<!DOCTYPE html>: Menyatakan versi HTML yang digunakan.<html lang="id">: Elemen akar website, mendefinisikan bahasa website.<head>: Menyimpan informasi meta tentang website, seperti judul dan tautan ke file CSS.<title>: Judul yang akan ditampilkan pada tab browser.<link rel="stylesheet" href="style.css">: Menyertakan file CSS yang akan digunakan untuk mengatur gaya website.<body>: Elemen yang berisi semua konten yang akan ditampilkan di website.
Menambahkan Konten dan Struktur
Sekarang mari kita tambahkan konten dan struktur dasar ke dalam portfolio Anda.
Header
Di dalam tag <body>, tambahkan elemen header untuk bagian atas website. Elemen ini biasanya berisi logo, judul, dan navigasi.
<header>
<h1>[Nama Anda]</h1>
<nav>
<ul>
<li><a href="#about">Tentang</a></li>
<li><a href="#projects">Proyek</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</header>
Kode ini membuat header dengan judul "Nama Anda", dan sebuah menu navigasi dengan tiga item: "Tentang", "Proyek", dan "Kontak".
Section: Tentang
Berikutnya, tambahkan sebuah section untuk menampilkan informasi tentang Anda.
<section id="about">
<h2>Tentang Saya</h2>
<p>Ini adalah bagian tentang Anda. Tuliskan sedikit tentang siapa Anda, latar belakang Anda, dan apa yang Anda lakukan. Anda dapat menambahkan foto atau informasi lain yang relevan.</p>
</section>
Section: Proyek
Buat section untuk menampilkan proyek-proyek yang telah Anda kerjakan.
<section id="projects">
<h2>Proyek Saya</h2>
<div class="project-container">
<div class="project">
<img src="gambar-proyek1.jpg" alt="Gambar Proyek 1">
<h3>Judul Proyek 1</h3>
<p>Deskripsi singkat tentang proyek 1.</p>
<a href="#" target="_blank">Lihat Demo</a>
</div>
<!-- Tambahkan div .project lainnya untuk proyek-proyek lainnya -->
</div>
</section>
Section: Kontak
Terakhir, tambahkan section untuk menampilkan informasi kontak Anda.
<section id="contact">
<h2>Hubungi Saya</h2>
<p>Anda dapat menghubungi saya melalui:</p>
<ul>
<li>Email: [alamat email]</li>
<li>LinkedIn: [link LinkedIn]</li>
<li>Github: [link Github]</li>
</ul>
</section>
Menambahkan Gaya dengan CSS
Sekarang mari kita tambahkan gaya ke portfolio Anda menggunakan CSS.
Membuat File CSS
Buat file CSS baru dengan nama "style.css" di folder yang sama dengan file HTML Anda.
Mengatur Gaya Dasar
Di dalam file CSS, tambahkan kode berikut untuk mengatur gaya dasar website:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1, h2, h3 {
text-align: center;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Kode ini mengatur font, margin, padding, warna latar belakang, dan warna teks untuk elemen body. Ini juga mengatur gaya untuk header, judul, dan link.
Mengatur Gaya Section
Anda dapat menambahkan gaya untuk setiap section dengan selector CSS yang sesuai. Misalnya, untuk mengatur gaya section "Tentang":
#about {
padding: 20px;
text-align: center;
background-color: #fff;
margin: 20px;
}
Mengatur Gaya Proyek
Gaya untuk section "Proyek" bisa disesuaikan dengan kebutuhan Anda. Berikut contoh sederhana:
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.project {
width: 30%;
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.project img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
Kode ini mengatur layout proyek dalam bentuk grid, dengan margin dan padding untuk setiap proyek.
Menyimpan dan Menjalankan Portfolio
Setelah Anda selesai membuat dan mengatur gaya portfolio, simpan file HTML dan CSS. Anda dapat membuka file HTML di browser web untuk melihat portfolio Anda.
Tips Tambahan
- Gunakan gambar berkualitas tinggi: Gambar-gambar dalam portfolio Anda harus tajam dan profesional.
- Tambahkan efek hover: Anda dapat menambahkan efek hover ke link atau gambar untuk membuat portfolio Anda lebih interaktif.
- Gunakan warna dan font yang sesuai: Pilih skema warna dan font yang sesuai dengan merek Anda.
- Perhatikan responsivitas: Pastikan portfolio Anda terlihat baik di semua perangkat, baik desktop, tablet, maupun ponsel.
- Uji dengan berbagai browser: Pastikan portfolio Anda berfungsi dengan baik di semua browser populer.
Kesimpulan
Membuat portfolio dengan HTML dan CSS adalah cara yang mudah dan efektif untuk menampilkan kemampuan Anda sebagai web developer. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat portfolio yang profesional dan menarik yang akan membantu Anda dalam mencapai tujuan karir Anda.