Cara Membuat Portofolio Digital SMK dengan HTML & CSS

Cara Membuat Portofolio Digital Siswa SMK dengan HTML dan CSS

Portofolio digital merupakan salah satu cara efektif bagi siswa Sekolah Menengah Kejuruan (SMK) untuk menunjukkan identitas, keterampilan, kreativitas, dan hasil proyek yang telah dikerjakan selama belajar. Melalui website sederhana, siswa dapat mengumpulkan berbagai karya dalam satu tempat yang mudah diakses dan dibagikan kepada guru, calon tempat magang, calon klien, atau pihak yang membutuhkan bukti kompetensi.

Kabar baiknya, membuat portofolio digital tidak harus menggunakan platform berbayar atau aplikasi desain yang rumit. Siswa dapat memulai dengan HTML untuk menyusun struktur halaman dan CSS untuk mengatur tampilannya. Dengan memahami dua teknologi dasar tersebut, siswa bisa membangun website pribadi yang responsif, menarik, dan sesuai dengan bidang keahliannya.

Portofolio ini juga cocok untuk siswa jurusan Desain Komunikasi Visual (DKV), Pengembangan Perangkat Lunak dan Gim (PPLG), Teknik Komputer dan Jaringan (TKJ), serta kompetensi keahlian lain yang menghasilkan karya atau proyek.

1. Apa Itu Portofolio Digital Siswa SMK?

Portofolio digital adalah kumpulan karya, proyek, pengalaman belajar, dan keterampilan yang disajikan dalam bentuk digital. Salah satu bentuknya adalah website pribadi yang dapat dibuka melalui browser di komputer maupun ponsel.

Berbeda dengan CV yang umumnya berisi ringkasan identitas, pendidikan, dan pengalaman, portofolio memperlihatkan bukti kemampuan melalui hasil pekerjaan.

Sebagai contoh, siswa DKV dapat menampilkan desain poster, fotografi produk, ilustrasi, dan rancangan identitas visual. Sementara itu, siswa bidang Informatika dapat menampilkan website, program sederhana, dokumentasi perakitan komputer, atau proyek basis data yang dibuat selama pembelajaran.

Portofolio digital memiliki beberapa manfaat, antara lain:

Menampilkan kemampuan secara nyata. Pengunjung dapat melihat hasil pekerjaan, bukan sekadar membaca daftar keterampilan.
Mendukung persiapan magang. Siswa memiliki bahan untuk memperkenalkan diri kepada calon tempat Praktik Kerja Lapangan (PKL).
Melatih keterampilan digital. Proses pembuatannya membantu siswa memahami struktur website, desain antarmuka, dan pengelolaan konten.
Mendokumentasikan perkembangan belajar. Karya lama dan baru dapat digunakan untuk melihat peningkatan kemampuan.
Membangun identitas profesional. Siswa mulai belajar menyampaikan keahlian, pengalaman, dan karakter kreatifnya.

Portofolio yang baik tidak harus memiliki banyak halaman atau animasi kompleks. Hal terpenting adalah informasi yang jelas, karya yang relevan, dan tampilan yang nyaman digunakan.

2. Tentukan Tujuan dan Audiens Portofolio

Sebelum menulis kode HTML, tentukan terlebih dahulu tujuan website yang akan dibuat. Tujuan ini akan memengaruhi pemilihan karya, gaya visual, susunan informasi, dan cara pengunjung menghubungi pemiliknya.

Misalnya, portofolio untuk kebutuhan pembelajaran dapat berisi tugas dan refleksi siswa. Portofolio untuk melamar magang sebaiknya menampilkan proyek terbaik, keterampilan yang relevan, serta penjelasan kontribusi siswa dalam setiap proyek.

Berikut contoh penyesuaian portofolio berdasarkan kebutuhan.

Tujuan	Konten utama	Gaya penyajian
Tugas sekolah	Identitas, materi, dan hasil tugas	Sederhana dan informatif
Melamar PKL	Proyek terbaik, keterampilan, dan kontak profesional	Rapi dan formal
Portofolio DKV	Poster, ilustrasi, fotografi, dan desain visual	Visual dan konsisten
Portofolio Informatika	Website, program, dan dokumentasi teknis	Terstruktur dan fungsional
Freelance pemula	Karya, layanan, proses, dan kontak	Profesional dan berorientasi pada calon klien

Pilih satu tujuan utama agar website tidak dipenuhi informasi yang tidak diperlukan.

3. Susun Struktur Halaman Website

Website portofolio pemula dapat dibuat dalam satu halaman dengan beberapa bagian yang terhubung melalui menu navigasi. Struktur ini cukup praktis karena pengunjung dapat berpindah ke bagian yang dibutuhkan tanpa membuka banyak halaman.

Bagian yang disarankan meliputi:

Beranda

Beranda adalah bagian pertama yang dilihat pengunjung. Tampilkan nama, bidang keahlian, dan kalimat singkat yang menjelaskan fokus portofolio.

Contoh:

“Pelajar SMK yang tertarik pada desain visual, fotografi, dan pengembangan konten digital. Saya terus mengembangkan keterampilan melalui proyek kreatif dan pembelajaran mandiri.”

Hindari deskripsi yang terlalu umum. Jika memungkinkan, jelaskan bidang yang benar-benar sedang dipelajari.

Tentang Saya

Bagian ini berisi pengenalan singkat, jurusan, minat, dan tujuan belajar. Tidak perlu mencantumkan seluruh riwayat pribadi.

Keahlian

Tampilkan keterampilan yang benar-benar dikuasai atau sedang dipelajari. Misalnya, HTML dasar, CSS, desain poster, fotografi produk, pengolahan gambar, atau penyuntingan video.

Bedakan antara keterampilan dasar dan keterampilan yang sudah cukup dikuasai. Jangan mengaku mahir menggunakan perangkat lunak yang baru dicoba beberapa kali.

Proyek

Bagian proyek merupakan inti portofolio. Pilih beberapa karya terbaik dan berikan penjelasan singkat mengenai tujuan, proses, alat yang digunakan, serta hasilnya.

Kontak

Gunakan cara komunikasi yang aman dan sesuai tujuan, seperti alamat email khusus untuk kegiatan profesional atau tautan profil karya yang memang ingin dibagikan kepada publik.

Siswa tidak harus menampilkan nomor telepon pribadi, alamat rumah, tanggal lahir lengkap, atau informasi sensitif lainnya.

4. Siapkan Proyek yang Akan Ditampilkan

Portofolio tidak harus menunggu sampai siswa memiliki pengalaman kerja. Proyek tugas sekolah, latihan mandiri, dan karya eksperimen dapat menjadi isi portofolio selama disajikan secara jujur.

Mulailah dengan tiga sampai enam proyek yang menunjukkan kemampuan berbeda.

Contoh proyek yang dapat digunakan:

Poster kegiatan sekolah: menunjukkan kemampuan menyusun komposisi, tipografi, warna, dan hierarki informasi.
Identitas visual usaha lokal: menampilkan proses pembuatan logo, pemilihan warna, dan penerapan desain.
Fotografi produk: menunjukkan kemampuan mengatur pencahayaan, sudut pengambilan gambar, dan penyuntingan.
Website profil pribadi: memperlihatkan pemahaman struktur HTML dan desain CSS.
Infografis pendidikan: membuktikan kemampuan mengolah informasi menjadi visual yang mudah dipahami.
Katalog produk sederhana: menggabungkan keterampilan desain, penataan informasi, dan konsistensi visual.

Setiap proyek idealnya memiliki judul, deskripsi, tujuan, peran, alat yang digunakan, dan hasil akhir.

Jika proyek dikerjakan bersama kelompok, jelaskan bagian yang benar-benar menjadi tanggung jawab pribadi. Mintalah izin sebelum memublikasikan karya kelompok atau materi milik pihak lain.

Untuk mendapatkan inspirasi proyek desain, baca juga artikel 10 Proyek DKV untuk Siswa SMK yang Bisa Masuk Portofolio melalui tautan internal yang sesuai di blog.

5. Mengenal HTML sebagai Struktur Website

HTML merupakan singkatan dari HyperText Markup Language. HTML digunakan untuk menyusun elemen dan struktur konten website, seperti judul, paragraf, gambar, menu, dan tautan.

HTML bukan bahasa pemrograman dalam pengertian yang sama dengan JavaScript. HTML berfungsi sebagai bahasa markup yang memberi struktur pada konten.

Contoh elemen HTML yang sering digunakan dalam portofolio adalah:

<header> untuk bagian kepala halaman.
<nav> untuk navigasi.
<main> untuk konten utama.
<section> untuk mengelompokkan bagian konten.
<article> untuk konten mandiri, misalnya kartu proyek.
<footer> untuk bagian penutup halaman.
<h1>, <h2>, dan <h3> untuk hierarki judul.
<p> untuk paragraf.
<a> untuk tautan.
<img> untuk menampilkan gambar.

Penggunaan elemen semantik membantu membuat struktur halaman lebih mudah dipahami dan dipelihara.

6. Mengenal CSS untuk Mempercantik Tampilan

CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen HTML, mulai dari warna, ukuran huruf, jarak, garis tepi, hingga tata letak.

Jika HTML berfungsi sebagai kerangka rumah, CSS dapat diibaratkan sebagai pengaturan cat, pencahayaan, dekorasi, dan tata ruangnya.

Beberapa properti CSS yang penting untuk dipelajari siswa adalah:

Properti	Fungsi
`color`	Mengatur warna teks
`background`	Mengatur latar belakang
`font-family`	Menentukan jenis huruf
`font-size`	Mengatur ukuran teks
`margin`	Mengatur jarak luar elemen
`padding`	Mengatur jarak di dalam elemen
`display`	Mengatur cara elemen ditampilkan
`grid-template-columns`	Mengatur kolom pada CSS Grid
`border-radius`	Membuat sudut elemen melengkung
`max-width`	Membatasi lebar maksimum elemen

Untuk portofolio siswa, pilih palet warna yang konsisten dan gunakan ukuran teks yang mudah dibaca. Hindari penggunaan terlalu banyak jenis huruf, warna mencolok, atau efek visual yang mengganggu isi utama.

7. Contoh Membuat Portofolio Digital dengan HTML dan CSS

Berikut contoh website portofolio sederhana yang menggunakan HTML dan CSS dalam satu file. Kode ini dirancang agar mudah dipelajari, dapat dibuka secara lokal, dan responsif pada layar ponsel maupun komputer.

Langkah pertama: Buat file HTML

Buka Notepad, Visual Studio Code, atau editor kode lainnya. Buat file bernama index.html, kemudian masukkan kode berikut.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
        content="Portofolio digital siswa SMK untuk menampilkan profil, keterampilan, dan proyek kreatif.">
  <title>Portofolio Digital | Nama Siswa</title>
  <style>
    :root {
      --primary: #2563eb;
      --dark: #172033;
      --muted: #64748b;
      --surface: #ffffff;
      --background: #f1f5f9;
      --border: #e2e8f0;
    }
    * {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      color: var(--dark);
      background: var(--background);
      line-height: 1.7;
    }
    a {
      color: var(--primary);
    }
    .container {
      width: min(1080px, 92%);
      margin: auto;
    }
    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    nav {
      min-height: 68px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 12px 0;
    }
    .brand {
      font-size: 1.15rem;
      font-weight: 800;
      text-decoration: none;
      color: var(--dark);
    }
    .menu {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    .menu a {
      text-decoration: none;
      font-weight: 600;
      color: var(--dark);
    }
    .menu a:hover,
    .menu a:focus-visible {
      color: var(--primary);
    }
    .hero {
      padding: 76px 0;
      background: linear-gradient(135deg, #dbeafe, #f8fafc);
    }
    .hero-content {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 36px;
      align-items: center;
    }
    .eyebrow {
      color: var(--primary);
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.15;
      margin: 12px 0;
    }
    h2 {
      line-height: 1.25;
    }
    .hero p {
      max-width: 620px;
      color: #334155;
    }
    .button {
      display: inline-block;
      padding: 12px 18px;
      margin-top: 12px;
      background: var(--primary);
      color: white;
      text-decoration: none;
      border-radius: 10px;
      font-weight: 700;
    }
    .button:hover,
    .button:focus-visible {
      background: #1d4ed8;
    }
    .profile-card,
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    }
    .avatar {
      width: 100%;
      aspect-ratio: 4 / 3;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #dbeafe;
      color: #1d4ed8;
      font-size: 3rem;
      font-weight: 800;
    }
    section.content {
      padding: 56px 0;
    }
    .section-heading {
      margin-bottom: 24px;
    }
    .section-heading p {
      color: var(--muted);
    }
    .skills,
    .projects {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
    .skill-tag {
      display: inline-block;
      margin: 4px 4px 4px 0;
      padding: 6px 10px;
      border-radius: 20px;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 0.9rem;
    }
    .project-visual {
      min-height: 150px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      border-radius: 12px;
      background: linear-gradient(135deg, #dbeafe, #e2e8f0);
      color: #1e40af;
      font-size: 1.1rem;
      font-weight: 800;
      text-align: center;
      padding: 16px;
    }
    .card p {
      color: var(--muted);
    }
    .contact {
      background: var(--dark);
      color: white;
      border-radius: 20px;
      padding: 32px;
    }
    .contact p {
      color: #e2e8f0;
    }
    .contact a {
      color: #bfdbfe;
    }
    footer {
      padding: 28px 0;
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }
    a:focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 4px;
    }
    @media (max-width: 760px) {
      .hero {
        padding: 48px 0;
      }
      .hero-content {
        grid-template-columns: 1fr;
      }
      .skills,
      .projects {
        grid-template-columns: 1fr;
      }
      nav {
        align-items: flex-start;
      }
      .menu {
        gap: 12px;
      }
      .profile-card,
      .card {
        padding: 18px;
      }
    }
  </style>
</head>
<body>
  <header>
    <nav class="container" aria-label="Navigasi utama">
      <a class="brand" href="#beranda">Portofolio Saya</a>
      <div class="menu">
        <a href="#tentang">Tentang</a>
        <a href="#keahlian">Keahlian</a>
        <a href="#proyek">Proyek</a>
        <a href="#kontak">Kontak</a>
      </div>
    </nav>
  </header>
  <main>
    <section class="hero" id="beranda">
      <div class="container hero-content">
        <div>
          <span class="eyebrow">Portofolio Siswa SMK</span>
          <h1>Halo, saya Nama Siswa.</h1>
          <p>
            Saya adalah siswa SMK yang sedang mengembangkan
            keterampilan di bidang desain, teknologi, dan
            pembuatan karya digital.
          </p>
          <a class="button" href="#proyek">Lihat Proyek Saya</a>
        </div>
        <div class="profile-card">
          <div class="avatar" role="img"
               aria-label="Tempat foto profil siswa">NS</div>
          <h2>Nama Siswa</h2>
          <p>Kelas X · Nama Jurusan</p>
          <p>Belajar, berkarya, dan terus berkembang.</p>
        </div>
      </div>
    </section>
    <section class="content" id="tentang">
      <div class="container">
        <div class="section-heading">
          <h2>Tentang Saya</h2>
          <p>Perkenalan singkat dan tujuan belajar saya.</p>
        </div>
        <div class="card">
          <p>
            Saya tertarik mempelajari teknologi dan kreativitas
            digital. Melalui tugas sekolah dan latihan mandiri,
            saya berusaha meningkatkan kemampuan menyelesaikan
            masalah, bekerja secara terstruktur, dan menghasilkan
            karya yang bermanfaat.
          </p>
        </div>
      </div>
    </section>
    <section class="content" id="keahlian">
      <div class="container">
        <div class="section-heading">
          <h2>Keahlian</h2>
          <p>Keterampilan yang sedang saya pelajari.</p>
        </div>
        <div class="skills">
          <article class="card">
            <h3>Desain Digital</h3>
            <span class="skill-tag">Desain Poster</span>
            <span class="skill-tag">Tipografi</span>
          </article>
          <article class="card">
            <h3>Web Dasar</h3>
            <span class="skill-tag">HTML</span>
            <span class="skill-tag">CSS</span>
          </article>
          <article class="card">
            <h3>Konten Digital</h3>
            <span class="skill-tag">Fotografi</span>
            <span class="skill-tag">Pengolahan Gambar</span>
          </article>
        </div>
      </div>
    </section>
    <section class="content" id="proyek">
      <div class="container">
        <div class="section-heading">
          <h2>Proyek Pilihan</h2>
          <p>Contoh karya yang dapat diganti dengan hasil sendiri.</p>
        </div>
        <div class="projects">
          <article class="card">
            <div class="project-visual"
                 role="img"
                 aria-label="Placeholder visual proyek poster">
              Proyek Poster
            </div>
            <h3>Poster Kegiatan Sekolah</h3>
            <p>
              Poster informatif yang dibuat untuk latihan
              hierarki visual, warna, dan tipografi.
            </p>
            <p><strong>Alat:</strong> Aplikasi desain pilihan.</p>
          </article>
          <article class="card">
            <div class="project-visual"
                 role="img"
                 aria-label="Placeholder visual proyek website">
              Website Profil
            </div>
            <h3>Website Profil Pribadi</h3>
            <p>
              Website satu halaman untuk mempelajari struktur
              HTML, CSS, dan tata letak responsif.
            </p>
            <p><strong>Alat:</strong> HTML dan CSS.</p>
          </article>
          <article class="card">
            <div class="project-visual"
                 role="img"
                 aria-label="Placeholder visual proyek fotografi">
              Fotografi Produk
            </div>
            <h3>Foto Produk Sederhana</h3>
            <p>
              Latihan pengambilan gambar, pencahayaan,
              komposisi, dan penyuntingan foto.
            </p>
            <p><strong>Alat:</strong> Kamera atau ponsel.</p>
          </article>
        </div>
      </div>
    </section>
    <section class="content" id="kontak">
      <div class="container">
        <div class="contact">
          <h2>Hubungi Saya</h2>
          <p>
            Untuk keperluan pembelajaran atau kolaborasi,
            silakan hubungi saya melalui email profesional.
          </p>
          <p>
            Email:
            <a href="mailto:[email protected]">
              [email protected]
            </a>
          </p>
          <p>Ganti alamat email contoh sebelum publikasi.</p>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="container">
      <p>
        &copy; <span id="tahun">2026</span> Nama Siswa.
        Dibuat sebagai proyek pembelajaran HTML dan CSS.
      </p>
    </div>
  </footer>
</body>
</html>

Langkah kedua: Buka website di browser

Setelah menyimpan kode:

Pastikan nama file adalah index.html, bukan index.html.txt.
Buka folder tempat file tersebut disimpan.
Klik dua kali file index.html.
Browser akan menampilkan website portofolio.
Ubah ukuran jendela browser untuk menguji tampilan desktop dan ponsel melalui fitur perangkat pada Developer Tools.

Kode tersebut merupakan contoh awal. Nama, jurusan, deskripsi, daftar keahlian, proyek, dan email masih harus diganti sesuai kondisi siswa. Bagian proyek di atas adalah contoh visual, bukan bukti karya nyata.

8. Cara Mengganti Data Profil dan Karya

Agar portofolio mencerminkan kemampuan pemiliknya, lakukan penyesuaian pada beberapa bagian.

Mengubah nama dan jurusan

Cari teks berikut dalam kode:

<h1>Halo, saya Nama Siswa.</h1>
<p>Kelas X · Nama Jurusan</p>

Ganti dengan nama tampilan dan jurusan yang sesuai. Untuk publikasi terbuka, siswa dapat memakai nama profesional atau nama panggilan jika tidak perlu menampilkan identitas lengkap.

Mengganti daftar keahlian

Cari bagian dengan atribut id="keahlian". Ubah nama keterampilan sesuai kemampuan yang dapat dibuktikan.

Contohnya, siswa DKV dapat menampilkan desain poster, tata letak, fotografi, ilustrasi, dan pengolahan gambar. Siswa Informatika dapat menampilkan HTML, CSS, algoritma dasar, pengelolaan data, atau pemecahan masalah komputer.

Menambahkan gambar karya

Placeholder proyek dapat diganti dengan gambar karya sendiri. Misalnya, jika gambar disimpan pada folder bernama images, gunakan struktur seperti berikut:

portofolio/
├── index.html
└── images/
    ├── poster-sekolah.jpg
    ├── website-profil.jpg
    └── fotografi-produk.jpg

Kemudian, ganti elemen placeholder dengan gambar:

<img
  src="images/poster-sekolah.jpg"
  alt="Poster kegiatan sekolah dengan judul dan informasi acara"
  loading="lazy"
  style="width: 100%; height: auto; border-radius: 12px;"
>

Pastikan file gambar benar-benar tersedia pada lokasi yang disebutkan. Teks alt sebaiknya menjelaskan isi atau fungsi gambar, bukan sekadar menuliskan “gambar poster”.

Untuk penggunaan jangka panjang, aturan gambar tersebut dapat dipindahkan ke CSS agar kode HTML lebih rapi.

Menambahkan penjelasan proyek

Jangan hanya menampilkan gambar. Tambahkan penjelasan singkat yang menjawab pertanyaan berikut:

Apa tujuan proyek tersebut?
Siapa audiens atau pengguna yang dituju?
Apa peran yang dikerjakan secara pribadi?
Alat atau teknologi apa yang digunakan?
Apa tantangan yang ditemui dan bagaimana cara mengatasinya?
Apa hasil dan pelajaran yang diperoleh?

Penjelasan ini membuat portofolio lebih bernilai karena pengunjung dapat memahami proses berpikir di balik hasil akhirnya.

9. Terapkan Desain Responsif untuk Ponsel dan Desktop

Banyak orang membuka tautan portofolio melalui ponsel. Oleh karena itu, website harus dapat menyesuaikan tata letak dengan ukuran layar yang berbeda.

Teknik tersebut dikenal sebagai responsive web design.

Contoh dalam kode menggunakan CSS Grid untuk membagi konten menjadi beberapa kolom, kemudian mengubahnya menjadi satu kolom ketika lebar layar lebih kecil.

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .projects {
    grid-template-columns: 1fr;
  }
}

Pada layar lebar, proyek ditampilkan dalam tiga kolom. Ketika layar lebih kecil dari batas yang ditentukan, proyek disusun secara vertikal.

Selain tata letak, periksa beberapa aspek berikut:

Ukuran teks nyaman dibaca tanpa harus memperbesar layar.
Menu navigasi tidak bertumpuk secara berlebihan.
Tombol memiliki area sentuh yang cukup.
Gambar tidak melewati lebar kontainer.
Jarak antarelemen tetap konsisten.
Teks dan latar belakang memiliki kontras yang memadai.
Pengunjung dapat menggunakan navigasi dengan keyboard.

Jangan hanya mengandalkan tampilan yang terlihat bagus pada komputer. Uji website menggunakan perangkat yang berbeda sebelum membagikan tautannya.

10. Perhatikan Aksesibilitas dan Kecepatan Website

Website yang profesional tidak hanya menarik secara visual, tetapi juga mudah digunakan oleh berbagai pengunjung.

Gunakan hierarki heading yang logis

Gunakan satu judul utama yang menjelaskan halaman, kemudian susun subjudul berdasarkan hubungan antarkonten. Hindari memilih tingkat heading hanya karena ukuran hurufnya terlihat cocok.

Gunakan teks tautan yang bermakna

Tautan seperti “Lihat proyek website profil” lebih informatif daripada “Klik di sini”. Pengunjung sebaiknya dapat memahami tujuan tautan sebelum membukanya.

Optimalkan gambar

Foto beresolusi sangat besar dapat memperlambat pemuatan website. Kompres gambar dengan tetap menjaga kualitas visual yang diperlukan. Gunakan format gambar modern jika didukung oleh layanan publikasi.

Hindari efek berlebihan

Animasi, transisi, dan elemen dekoratif boleh digunakan jika membantu pengalaman pengunjung. Namun, hindari efek yang membuat teks sulit dibaca atau memperlambat halaman.

Pastikan konten tetap bisa dipahami

Informasi penting sebaiknya tidak hanya disampaikan melalui warna atau animasi. Gunakan teks yang jelas dan struktur HTML yang tepat agar konten tetap dapat dipahami oleh lebih banyak pengguna.

11. Publikasikan Portofolio agar Dapat Diakses Secara Online

Website yang masih dibuka dari file lokal hanya dapat diakses melalui perangkat atau lokasi penyimpanan tersebut. Jika ingin membagikan tautan kepada guru, calon tempat magang, atau klien, unggah website ke layanan hosting yang mendukung file HTML dan CSS statis.

Beberapa pilihan yang dapat dipelajari adalah:

GitHub Pages: cocok untuk website statis yang disimpan dalam repositori GitHub.
Netlify: menyediakan alur publikasi website statis melalui unggahan atau integrasi repositori.
Cloudflare Pages: dapat digunakan untuk menerbitkan proyek website statis.

Layanan, batas penggunaan, dan ketentuan akun dapat berubah. Periksa dokumentasi resmi sebelum memilih layanan.

Alur publikasi menggunakan GitHub Pages

Secara umum, langkah-langkahnya adalah:

Buat akun GitHub jika belum memilikinya.
Buat repositori baru untuk menyimpan proyek portofolio.
Unggah index.html dan folder gambar yang dibutuhkan.
Buka pengaturan repositori dan cari bagian Pages.
Pilih sumber publikasi sesuai pilihan yang tersedia.
Simpan pengaturan dan tunggu proses penerbitan selesai.
Buka alamat website yang diberikan untuk menguji hasil publikasi.

Nama menu dan pilihan konfigurasi dapat berubah. Ikuti petunjuk resmi GitHub Pages apabila tampilan yang ditemukan berbeda.

Sebelum membagikan alamat website, pastikan semua gambar dapat dimuat, tautan berfungsi, dan halaman tidak menampilkan informasi yang seharusnya bersifat pribadi.

12. Optimalkan Portofolio untuk Kebutuhan Profesional

Setelah website berhasil diterbitkan, tingkatkan kualitasnya secara bertahap.

Gunakan identitas visual yang konsisten

Pilih warna utama, warna pendukung, jenis huruf, dan gaya gambar yang sesuai dengan bidang keahlian. Siswa DKV dapat menggunakan pendekatan visual yang lebih ekspresif, sedangkan portofolio teknis dapat mengutamakan keterbacaan dan struktur informasi.

Konsistensi bukan berarti semua bagian harus terlihat sama. Setiap bagian boleh memiliki variasi selama masih berada dalam sistem desain yang sama.

Tampilkan proses, bukan hanya hasil

Untuk proyek desain, sertakan gambaran singkat dari proses riset, sketsa, eksplorasi konsep, sampai hasil akhir. Untuk proyek pemrograman, jelaskan tujuan aplikasi, fitur yang dibuat, teknologi yang digunakan, dan masalah yang berhasil diselesaikan.

Jika menggunakan kode atau aset pihak lain, cantumkan atribusi dan lisensi sesuai ketentuan yang berlaku. Jangan mengklaim hasil kerja orang lain sebagai karya sendiri.

Perbarui portofolio secara berkala

Portofolio sebaiknya berkembang seiring meningkatnya kemampuan. Ganti proyek yang kurang relevan dengan karya yang lebih baik, perbaiki deskripsi, dan periksa kembali tautan yang sudah tidak berfungsi.

Kualitas tiga proyek yang dijelaskan dengan baik sering kali lebih meyakinkan daripada banyak proyek tanpa konteks.

13. Kesalahan yang Perlu Dihindari

Beberapa kesalahan umum dapat mengurangi kualitas portofolio digital siswa.

1. Menampilkan terlalu banyak karya tanpa seleksi. Pilih proyek yang paling relevan dan menunjukkan kemampuan berbeda.

2. Menggunakan desain yang ramai. Terlalu banyak warna, efek, dan jenis huruf membuat pengunjung sulit fokus pada karya.

3. Mengabaikan tampilan ponsel. Website harus diuji pada layar kecil, bukan hanya pada komputer.

4. Menggunakan gambar tanpa penjelasan. Tambahkan konteks mengenai tujuan, proses, peran, dan hasil proyek.

5. Mengklaim kemampuan yang belum dikuasai. Tuliskan tingkat kemampuan secara jujur dan gunakan karya sebagai bukti.

6. Membagikan data pribadi. Hindari alamat rumah, kata sandi, dokumen identitas, data siswa lain, atau informasi yang dapat membahayakan privasi.

7. Tidak memeriksa tautan. Tautan yang rusak atau gambar yang gagal dimuat dapat memberikan kesan kurang teliti.

8. Menyalin template tanpa penyesuaian. Template boleh menjadi titik awal belajar, tetapi sesuaikan isi, desain, dan kode agar mencerminkan kemampuan sendiri.

14. Checklist Sebelum Portofolio Dibagikan

Gunakan daftar berikut untuk melakukan pemeriksaan akhir.

Nama tampilan dan deskripsi profil sudah benar.
Jurusan dan keterampilan ditulis secara jujur.
Proyek yang ditampilkan merupakan karya sendiri atau memiliki izin yang sesuai.
Setiap proyek memiliki deskripsi dan konteks.
Menu navigasi dan semua tautan berfungsi.
Website terlihat baik di ponsel dan komputer.
Gambar memiliki teks alternatif yang sesuai.
Tidak ada gambar atau tautan yang gagal dimuat.
Ejaan, tanda baca, dan struktur heading sudah diperiksa.
Informasi pribadi dan rahasia tidak dipublikasikan.
Email atau kontak yang ditampilkan aman untuk dibagikan.
Website telah diuji oleh guru, teman, atau orang lain.

Meminta orang lain mencoba website adalah cara sederhana untuk menemukan masalah yang mungkin tidak terlihat oleh pembuatnya sendiri.

15. Jadikan Portofolio sebagai Proyek Pembelajaran

Membuat portofolio digital dapat menjadi latihan terpadu untuk memahami teknologi sekaligus mengembangkan kreativitas. Siswa belajar menyusun informasi, menerapkan desain, menulis kode, menguji tampilan, dan memublikasikan hasil pekerjaan.

Bagi siswa DKV, website dapat menjadi media presentasi karya desain grafis, fotografi, ilustrasi, dan tata letak. Bagi siswa Informatika, portofolio dapat berkembang menjadi tempat mendokumentasikan latihan HTML, CSS, JavaScript, atau proyek aplikasi sederhana.

Guru juga dapat menggunakan tugas ini untuk menilai keterampilan teknis dan proses kerja. Penilaian tidak harus berfokus pada tampilan akhir. Struktur HTML, keterbacaan CSS, responsivitas, keaslian karya, dokumentasi, dan refleksi siswa juga penting.

Portofolio dapat terus dikembangkan dengan menambahkan halaman proyek, dokumentasi proses, atau tautan ke repositori kode. Namun, setiap fitur baru sebaiknya ditambahkan berdasarkan kebutuhan, bukan sekadar mengikuti tren.

Kesimpulan

Cara membuat portofolio digital siswa SMK dengan HTML dan CSS dapat dimulai dari satu file sederhana. Tentukan tujuan, susun struktur halaman, pilih proyek yang representatif, buat tampilan responsif, lalu uji dan publikasikan website melalui layanan hosting yang sesuai.

Portofolio yang efektif bukan sekadar kumpulan gambar dengan desain menarik. Portofolio yang baik memperlihatkan kemampuan, proses berpikir, tanggung jawab, dan perkembangan belajar pemiliknya.

Mulailah dengan karya yang sudah dimiliki, tampilkan secara jujur, dan perbaiki berdasarkan umpan balik. Dengan latihan yang konsisten, website sederhana dapat berkembang menjadi aset digital yang bermanfaat untuk pembelajaran, persiapan PKL, dan pengembangan karier.