Cara Membuat Portofolio Dengan HTML dan CSS

Cara Membuat Portofolio Dengan HTML dan CSS – Sobat Tekno, memiliki sebuah portofolio merupakan langkah yang sangat penting dalam pengembangan karir seseorang. Mengapa demikian? Sebab, portofolio tidak hanya sekadar kumpulan informasi, melainkan merangkum segala hasil karya, prestasi, pelatihan, kemampuan, dan pengalaman kerja yang pernah dijalani.

Oleh karena itu, membuat web portofolio dengan HTML dan CSS bukan hanya proyek biasa, melainkan kesempatan untuk memperlihatkan karya dan keterampilan kepada pihak lain. Selain itu, ini juga menjadi cara yang sangat baik untuk berlatih dan memperdalam pemahaman tentang HTML dan CSS, terutama jika kamu masih dalam tahap pemula.

Jika kamu memiliki keinginan untuk membuat web portofolio hanya menggunakan HTML dan CSS, maka kamu bisa dengan mudah membuatnya meskipun kamu pemula sekalipun. Hal ini dikarenakan TeknoTask akan memberikanmu panduan dalam membuat web portofolio dengan mudah dan menarik

Apa Itu Portofolio?

Sebelum kita masuk lebih dalam, mari kita pahami terlebih dahulu apa yang dimaksud dengan portofolio. Kata “portofolio” berasal dari dua kata, yakni “port” yang berasal dari kata “report” yang berarti laporan, dan “folio” yang memiliki arti lengkap atau penuh. Jika digabungkan, portofolio dapat diartikan sebagai kumpulan dokumen yang berasal dari individu, kelompok, lembaga, organisasi, perusahaan, dan sebagainya. Dokumen-dokumen ini tersusun rapi, memuat semua pekerjaan yang pernah dilakukan.

Secara umum, pengertian portofolio adalah kumpulan dokumen yang mendokumentasikan perkembangan suatu proses dalam mencapai tujuan yang sudah ditetapkan. Pengertian ini bisa bervariasi antara bidang yang satu dengan bidang lainnya. Misalnya, dalam bidang politik, portofolio menjadi kewajiban dan pilar pemerintahan para menteri kabinet dan pejabat pimpinan departemen di sebuah institusi pemerintah.

Di bidang seni, portofolio diartikan sebagai kumpulan hasil karya terbaik seorang seniman yang dipamerkan. Sementara dalam investasi dan saham, portofolio merupakan sekumpulan investasi, dan di bidang keuangan, portofolio adalah kombinasi berbagai macam aktiva, seperti properti, deposito, real estate, dan lainnya.

Fungsi Portofolio

Dengan memahami apa itu portofolio, kita dapat melihat fungsi-fungsinya yang mungkin bervariasi sesuai bidangnya masing-masing. Secara umum, fungsi portofolio dapat dijelaskan sebagai berikut:

  1. Dokumentasi Pekerjaan: Menyimpan catatan dokumentasi dari berbagai pekerjaan yang pernah dilakukan.
  2. Referensi Prestasi: Menjadi referensi terhadap prestasi atau pekerjaan yang telah dilakukan oleh seseorang.
  3. Informasi Pengalaman Kerja: Menyajikan informasi tentang pengalaman kerja, hasil karya terbaik, dan prestasi yang pernah dicapai.
  4. Refleksi Diri: Memberikan gambaran diri yang ditujukan kepada pembaca portofolio.
  5. Demonstrasi Kemampuan: Menunjukkan kemampuan yang dimiliki oleh individu atau kelompok.
  6. Alat Penilaian: Sebagai alat penilaian otentik berbasis kinerja.
  7. Alat Pengajaran: Dalam dunia pendidikan, portofolio digunakan sebagai alat pengajaran karena mengandung kinerja siswa yang menunjukkan hasil kerja.
Artikel Terkait:   Cara Membuat Layout Footer Web dengan HTML dan CSS

Manfaat Portofolio

Membuat dan memiliki portofolio sendiri memberikan banyak manfaat, terutama dalam hal karir dan pekerjaan. Beberapa manfaatnya meliputi:

  1. Meningkatkan Kredibilitas: Portofolio merupakan bukti konkret dari hasil kerja dan kemampuan, meningkatkan tingkat kredibilitas individu.
  2. Menceritakan Keahlian: Menunjukkan perkembangan karir dari waktu ke waktu, memberikan gambaran keahlian, kontribusi, dan potensi yang dimiliki.
  3. Meningkatkan Kesempatan Mendapatkan Klien: Portofolio membantu calon klien mengidentifikasi jasa atau produk yang ditawarkan dengan cepat, meningkatkan kepercayaan dan loyalitas.
  4. Menjadi Pembeda dengan Pesaing: Portofolio online efektif membedakan diri dari pesaing, khususnya dalam dunia yang semakin digital seperti sekarang ini.

Cara Membuat Web Portofolio dengan HTML dan CSS

1. Persiapkan Struktur Folder dan File

Sebelum memulai, pastikan kamu telah menyiapkan struktur folder dan file dengan baik. Langkah awal ini melibatkan pembuatan folder proyek, file HTML, file CSS, dan menambahkan gambar logo. Berikut langkahnya:

  1. Buat Folder Proyek: Buka manajer file Anda dan buat folder baru, misalnya “PortfolioSaya”.
  2. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html”.
  3. Buat File CSS: Buat file CSS baru, misalnya “style.css”, di dalam folder yang sama.
  4. Tambahkan Gambar Logo: Buat folder image dan letakkan gambar logo di dalam folder proyek, misalnya “logo.png” dan untuk gambar logonya bisa kamu unduh disini serta untuk gambar proyeknya bisa kamu sesuaikan sendiri dengan gambar proyek yang sudah kamu selesaikan.

2. Buat Kode HTML Web Portofolio

Setelah struktur folder dan file siap, buka file “index.html” menggunakan Sublime Text dan tambahkan struktur HTML dasar.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portofolio Saya</title>
</head>
<body>

    <header>
        <div class="logo">
            <img src="logo/logo teknotask.png" alt="Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#about">Tentang Saya</a></li>
                <li><a href="#experience">Pengalaman</a></li>
                <li><a href="#education">Pendidikan</a></li>
                <li><a href="#projects">Proyek</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section id="about">
        <h2>Tentang Saya</h2>
        <p>
            Hai, saya [Nama Anda]. Saya seorang pengembang web yang berdedikasi dengan pengalaman selama [jumlah] tahun.
            Saya mengkhususkan diri dalam pengembangan front-end dan back-end menggunakan berbagai teknologi seperti HTML, CSS, JavaScript, dan lainnya.
        </p>
    </section>

    <section id="experience">
        <h2>Pengalaman</h2>
        <ul>
            <li>
                <h3>Web Developer di Perusahaan ABC</h3>
                <p>Bekerja pada berbagai proyek, meningkatkan kinerja situs web dan pengalaman pengguna.</p>
                <span>2018 - 2021</span>
            </li>
            <!-- Tambahkan lebih banyak pengalaman jika diperlukan -->
        </ul>
    </section>

    <section id="education">
        <h2>Pendidikan</h2>
        <ul>
            <li>
                <h3>Gelar Sarjana dalam Ilmu Komputer</h3>
                <p>Universitas XYZ, Lulus tahun 2018</p>
            </li>
            <!-- Tambahkan lebih banyak pendidikan jika diperlukan -->
        </ul>
    </section>

    <section id="projects">
        <h2>Proyek</h2>
        <div class="project">
            <img src="images/gambar1.png" alt="Proyek 1">
            <h3>Nama Proyek 1</h3>
            <p>Deskripsi proyek akan diisi di sini.</p>
        </div>
        <!-- Tambahkan lebih banyak proyek jika diperlukan -->
    </section>

    <section id="contact">
        <h2>Kontak</h2>
        <p>Silakan hubungi saya melalui email di [[email protected]]</p>
    </section>

</body>
</html>

3. Tambahkan Style CSS Untuk Tampilan

Selanjutnya, buka file “style.css” dan tambahkan gaya CSS untuk membuat tampilan web portofolio lebih menarik.

<style type="text/css">

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: cadetblue;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 190px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #ffcc00;
}

section {
    padding: 40px 20px;
    background-color: #fff;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #333;
}

p, span {
    color: #555;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 20px;
}

.project {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.project img {
    width: 40%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.project h3 {
    color: #333;
}

</style>

4. Jalankan Kode

Jika dirasa sudah menambahkan kode HTML dan CSS untuk membuat portofolio, buka file “index.html” menggunakan browser atau live server Sublime Text untuk melihat hasilnya. Pastikan juga file “style.css” berada di folder yang sama, untuk cara menjalankannya bisa lihat gambar diatas..

Artikel Terkait:   Cara Membuat Website Toko Online dengan HTML

5. Tampilkan Website

Akhirnya, buka file “index.html” menggunakan browser atau live server Sublime Text untuk melihat hasilnya. Pastikan juga file “style.css” berada di folder yang sama, untuk hasil kode diatas seperti gambar dibawah ini.

Akhir Kata

Demikianlah panduan lengkap mengenai cara membuat web portofolio dengan HTML dan CSS. Dengan mengikuti langkah-langkah di atas, kamu tidak hanya membangun portofolio yang responsif, tetapi juga meningkatkan keterampilan dalam pengembangan web.