Cara Membuat Portfolio Online dengan HTML dan CSS

Panduan lengkap untuk membuat portfolio online menggunakan HTML dan CSS, termasuk langkah-langkah desain, penulisan kode, dan tips untuk menampilkan karya dengan cara yang menarik.

Pengembangan Web

by admin

1 tahun ago 0 888

Cara Membuat Portfolio Online dengan HTML dan CSS

Pengantar

Membuat portfolio online adalah cara yang efektif untuk menunjukkan keterampilan dan karya Anda kepada calon klien atau pemberi kerja. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat portfolio online menggunakan HTML dan CSS. Dengan mengikuti panduan ini, Anda akan memiliki website yang menarik dan fungsional dalam waktu singkat.

Persiapan

Sebelum mulai membuat portfolio, ada beberapa hal yang perlu Anda siapkan:

Editor teks (seperti Visual Studio Code, Sublime Text, atau Notepad++)
Browser web untuk melihat hasil kerja Anda
Konten yang ingin Anda tampilkan (gambar, deskripsi proyek, dll.)

Membuat Struktur HTML

Langkah pertama adalah membuat file HTML dasar. Berikut adalah contoh struktur HTML untuk portfolio Anda:


<!DOCTYPE html>
<html>
<head>
    <title>Portfolio Saya</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Nama Anda</h1>
        <nav>
            <ul>
                <li><a href="#tentang">Tentang</a></li>
                <li><a href="#proyek">Proyek</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="tentang"></section>
        <section id="proyek"></section>
        <section id="kontak"></section>
    </main>
    <footer></footer>
</body>
</html>

Menambahkan Gaya dengan CSS

Setelah Anda memiliki struktur HTML, langkah berikutnya adalah menambahkan gaya menggunakan CSS. Buat file bernama styles.css dan tambahkan kode berikut:


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #f1f1f1;
}

Menambahkan Konten

Setelah Anda menambahkan gaya, saatnya untuk mengisi konten di setiap bagian. Misalnya, di bagian tentang, Anda bisa menambahkan deskripsi tentang diri Anda. Di bagian proyek, tampilkan beberapa proyek yang telah Anda kerjakan dengan gambar dan deskripsi singkat.


<section id="tentang">
    <h2>Tentang Saya</h2>
    <p>Deskripsi tentang diri Anda.</p>
</section>

<section id="proyek">
    <h2>Proyek Saya</h2>
    <div>
        <h3>Proyek 1</h3>
        <img src="proyek1.jpg" alt="Proyek 1">
        <p>Deskripsi proyek 1.</p>
    </div>
    <div>
        <h3>Proyek 2</h3>
        <img src="proyek2.jpg" alt="Proyek 2">
        <p>Deskripsi proyek 2.</p>
    </div>
</section>

Publikasi Portfolio

Setelah selesai membuat dan mengisi konten, langkah terakhir adalah mempublikasikan portfolio Anda. Anda bisa menggunakan layanan hosting gratis seperti GitHub Pages, Netlify, atau Vercel untuk mengunggah file HTML dan CSS Anda.

Kesimpulan

Membuat portfolio online menggunakan HTML dan CSS tidaklah sulit. Dengan mengikuti langkah-langkah di atas, Anda dapat menampilkan karya dan keterampilan Anda dengan cara yang menarik. Pastikan untuk selalu memperbarui konten Anda agar tetap relevan dan menarik bagi pengunjung.