Membuat website sendiri bisa menjadi proyek pertama yang bagus untuk pelajar yang sedang belajar coding. Kamu tidak perlu langsung menggunakan framework atau menguasai bahasa pemrograman yang rumit. Dengan HTML dan CSS saja, sebuah website portfolio pelajar sudah bisa berisi profil, keterampilan, tugas sekolah, proyek, desain, pengalaman organisasi, sampai prestasi yang pernah kamu raih.
HTML digunakan untuk menyusun isi halaman, sedangkan CSS mengatur tampilannya. Keduanya cukup mudah dipelajari secara bertahap dan hasilnya bisa langsung dilihat melalui browser.
Dalam panduan ini, kita akan membuat portfolio sederhana dari awal: menyiapkan folder, membuat struktur HTML, menambahkan CSS, membuat tampilan responsive di HP, sampai memahami cara mempublikasikannya secara online.
Website portfolio pelajar adalah website pribadi yang digunakan untuk menampilkan informasi tentang diri dan hasil karya yang pernah dibuat.
Isinya tidak harus berupa proyek coding. Kamu juga bisa memasukkan desain poster, fotografi, tugas sekolah, video, kegiatan organisasi, karya tulis, atau proyek lain yang menunjukkan minat dan kemampuanmu.
Portfolio seperti ini dapat digunakan untuk berbagai kebutuhan, misalnya tugas sekolah, kegiatan ekstrakurikuler, lomba, pendaftaran organisasi, persiapan kuliah, hingga melengkapi pendaftaran magang.
Website portfolio juga berbeda dengan CV. CV biasanya berisi ringkasan pendidikan, pengalaman, dan kemampuan dalam format yang cukup singkat. Portfolio dapat memberikan penjelasan lebih lengkap sekaligus menunjukkan hasil pekerjaan secara visual.
Tidak ada aturan bahwa sebuah portfolio harus memiliki banyak halaman. Untuk pemula, satu halaman saja sebenarnya sudah cukup selama informasi pentingnya tersusun dengan jelas.
Bagian ini berisi perkenalan singkat, misalnya nama, bidang yang sedang dipelajari, minat, serta aktivitas yang sedang kamu tekuni.
Hindari memasukkan informasi pribadi yang tidak diperlukan seperti alamat rumah lengkap, nomor identitas, data keluarga, atau informasi sensitif lainnya.
Gunakan bagian skills untuk menunjukkan kemampuan yang sedang kamu pelajari atau sudah cukup kamu kuasai.
Contohnya:
Tidak perlu memasukkan skill hanya agar portfolio terlihat penuh. Lebih baik tampilkan kemampuan yang memang bisa kamu jelaskan atau tunjukkan melalui proyek.
Bagian projects adalah salah satu bagian terpenting dalam portfolio.
Project yang ditampilkan bisa berupa:
Tambahkan nama project dan deskripsi singkat mengenai apa yang kamu kerjakan.
Bagian kontak membantu orang lain menghubungimu jika portfolio memang digunakan untuk kegiatan sekolah, lomba, komunitas, atau magang.
Gunakan email yang profesional atau akun media sosial yang memang ingin digunakan untuk keperluan portfolio.
Kita tidak membutuhkan banyak software untuk mulai membuat website.
Siapkan:
Untuk text editor, pemula dapat menggunakan Visual Studio Code. Editor lain seperti Notepad atau Sublime Text juga bisa digunakan.
Browser seperti Chrome, Firefox, atau Edge nantinya digunakan untuk melihat hasil coding.
Jika kamu masih belum memahami hubungan antara HTML dan CSS, baca juga panduan menggunakan HTML dan CSS sebelum melanjutkan.
Buat sebuah folder baru, misalnya:
portfolio-pelajar/
│
├── index.html
├── style.css
└── images/
└── profile.jpgFungsi masing-masing file cukup sederhana.
index.html berisi struktur dan konten website. style.css digunakan untuk mengatur desain halaman, sedangkan folder images menjadi tempat menyimpan foto atau gambar project.
Pastikan penamaan file sama dengan yang digunakan di dalam kode. Kesalahan seperti menulis Style.css padahal nama file sebenarnya style.css dapat membuat CSS tidak terbaca.
Sekarang 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="Portfolio pelajar berisi profil, keterampilan, dan proyek.">
<title>Portfolio Nama Pelajar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<div class="container">
<h1>Nama Pelajar</h1>
<p>Pelajar yang sedang belajar HTML, CSS, dan desain website.</p>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="#about">Tentang</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Project</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section id="about">
<div class="about-content">
<img
src="images/profile.jpg"
alt="Foto profil Nama Pelajar"
class="profile-photo"
>
<div>
<h2>Tentang Saya</h2>
<p>
Halo! Saya adalah seorang pelajar yang tertarik mempelajari
pembuatan website, desain, dan teknologi.
</p>
<p>
Saat ini saya sedang belajar membuat website menggunakan
HTML dan CSS melalui berbagai proyek sederhana.
</p>
</div>
</div>
</section>
<section id="skills">
<h2>Skills</h2>
<ul class="skill-list">
<li>HTML Dasar</li>
<li>CSS Dasar</li>
<li>Desain</li>
<li>Microsoft Office</li>
</ul>
</section>
<section id="projects">
<h2>Project Saya</h2>
<div class="project-grid">
<article class="project-card">
<h3>Website Sekolah</h3>
<p>
Website sederhana berisi informasi kegiatan sekolah
yang dibuat menggunakan HTML dan CSS.
</p>
</article>
<article class="project-card">
<h3>Landing Page</h3>
<p>
Latihan membuat landing page responsive dengan
layout sederhana dan tampilan yang nyaman dibaca.
</p>
</article>
<article class="project-card">
<h3>Desain Poster</h3>
<p>
Koleksi poster yang dibuat untuk tugas dan
kegiatan sekolah.
</p>
</article>
</div>
</section>
<section id="contact">
<h2>Kontak</h2>
<p>
Jika ingin menghubungi saya, kirim email melalui
<a href="mailto:nama@email.com">nama@email.com</a>.
</p>
</section>
</main>
<footer>
<p>© 2026 Nama Kamu. All rights reserved.</p>
</footer>
</body>
</html>Ganti nama, deskripsi, email, foto, skills, dan project sesuai dengan portfolio milikmu. Tahun pada bagian copyright juga dapat diganti sesuai tahun yang digunakan.
Tidak perlu menghafal semua tag sekaligus. Cukup pahami fungsi utamanya.
<header> digunakan untuk area pembuka website, sedangkan <nav> menampung menu navigasi.
<main> menjadi tempat konten utama halaman dan <section> digunakan untuk memisahkan kelompok konten seperti About, Skills, dan Projects.
<h1> merupakan heading utama halaman. Tag <a> digunakan untuk membuat link, <ul> untuk membuat daftar, dan <footer> menjadi bagian penutup website.
Struktur seperti ini disebut semantic HTML karena nama elemennya membantu menjelaskan fungsi setiap bagian halaman.
HTML yang sudah dibuat sebenarnya dapat dibuka langsung, tetapi tampilannya masih sangat sederhana.
Buat file style.css dalam folder yang sama dengan index.html, kemudian masukkan kode berikut:
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
color: #1f2937;
background-color: #f4f6f8;
}
.container {
width: 90%;
max-width: 960px;
margin: auto;
}
.hero {
background-color: #0f172a;
color: white;
padding: 50px 0;
text-align: center;
}
.hero h1 {
margin: 0 0 10px;
}
.hero p {
margin-bottom: 25px;
}
nav ul {
display: flex;
justify-content: center;
gap: 20px;
padding: 0;
margin: 0;
list-style: none;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 30px 0;
}
section {
margin-bottom: 25px;
padding: 30px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}
h2 {
margin-top: 0;
}
.about-content {
display: flex;
align-items: center;
gap: 25px;
}
.profile-photo {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
.skill-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0;
list-style: none;
}
.skill-list li {
padding: 8px 14px;
background-color: #e2e8f0;
border-radius: 20px;
}
.project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.project-card {
padding: 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
#contact a {
color: #2563eb;
}
footer {
padding: 20px;
text-align: center;
color: white;
background-color: #0f172a;
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 10px;
}
.about-content {
flex-direction: column;
text-align: center;
}
.project-grid {
grid-template-columns: 1fr;
}
section {
padding: 22px;
}
}Bagian .container membatasi lebar website agar teks tidak terlalu melebar pada monitor besar.
Flexbox digunakan pada bagian profil dan skills, sedangkan CSS Grid digunakan untuk menyusun card project.
border-radius membuat sudut elemen lebih halus dan box-shadow memberikan sedikit kedalaman tanpa membuat desain terlalu ramai.
Efek hover pada project hanya memberikan gerakan kecil ketika pointer berada di atas card.
Susunan halaman yang kita buat kurang lebih seperti berikut:
HEADER
│
├── Nama
├── Deskripsi singkat
└── Navigation
ABOUT
│
└── Profil
SKILLS
│
├── HTML
├── CSS
└── Skill lainnya
PROJECTS
│
├── Project 1
├── Project 2
└── Project 3
CONTACT
FOOTERUntuk portfolio pertama, layout satu halaman seperti ini sudah cukup. Kamu tidak perlu langsung membuat banyak halaman atau navigasi yang rumit.
Card grid juga membuat beberapa project dapat ditampilkan dengan rapi tanpa membuat struktur HTML sulit dipahami.
Setelah HTML dan CSS selesai dibuat:
index.html;style.css;index.html;Jika menggunakan VS Code, kamu juga dapat memasang extension seperti Live Server agar perubahan lebih cepat terlihat. Namun extension tersebut hanya mempermudah proses dan bukan keharusan.
Website yang terlihat bagus di laptop belum tentu nyaman dibuka melalui smartphone.
Karena itu, bagian <head> tadi menggunakan:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Tag tersebut membantu browser menyesuaikan ukuran halaman dengan lebar perangkat.
Kemudian CSS memiliki:
@media (max-width: 768px) {
.project-grid {
grid-template-columns: 1fr;
}
}Pada layar yang lebih besar, tiga project dapat tampil berdampingan. Ketika layar memiliki lebar 768 piksel atau kurang, project berubah menjadi satu kolom.
Cara sederhana ini sudah cukup untuk memperkenalkan konsep responsive web design kepada pemula.
Portfolio yang bagus tidak harus mempunyai desain rumit. Justru konsistensi sering membuat tampilannya lebih nyaman.
Beberapa hal yang bisa kamu terapkan:
Jika memiliki banyak project, pilih beberapa karya yang paling relevan daripada memasukkan semuanya tanpa penjelasan.
Salah satu masalah paling umum adalah CSS tidak bekerja. Biasanya penyebabnya adalah nama file berbeda dengan yang tertulis pada:
<link rel="stylesheet" href="style.css">Kesalahan lain adalah menggunakan terlalu banyak warna, ukuran teks yang terlalu besar, dan gambar beresolusi sangat tinggi sehingga halaman menjadi berat.
Perhatikan juga nama file dan folder. Jika HTML memanggil images/profile.jpg, gambar harus berada pada lokasi tersebut.
Jangan hanya mengecek halaman dari komputer. Buka juga melalui tampilan mobile atau perkecil ukuran browser untuk melihat apakah layout tetap nyaman digunakan.
Untuk bagian project, jangan hanya memasukkan gambar. Tambahkan sedikit penjelasan mengenai tujuan project dan apa yang kamu kerjakan.
JavaScript tidak wajib untuk membuat portfolio dasar.
Dengan HTML dan CSS, kamu sudah dapat membuat profil, daftar skills, bagian project, navigasi, kontak, dan layout responsive.
JavaScript baru diperlukan ketika ingin menambahkan fitur yang lebih interaktif seperti menu mobile, dark mode, filter project, animasi tertentu, atau form yang memiliki perilaku khusus.
Karena itu, pemula sebaiknya memahami HTML dan CSS terlebih dahulu sebelum menambahkan fitur yang lebih kompleks.
Website yang kita buat dapat digunakan secara offline hanya dengan membuka index.html.
Kalau ingin portfolio dapat dibuka melalui internet, website HTML/CSS seperti ini juga bisa dipublikasikan menggunakan layanan static hosting seperti GitHub Pages, Cloudflare Pages, atau Netlify.
GitHub menyediakan dokumentasi resmi mengenai GitHub Pages jika kamu ingin mempelajari prosesnya lebih lanjut.
Deployment tidak harus dilakukan sekarang. Kamu bisa menyelesaikan dan menguji portfolio secara offline terlebih dahulu sebelum mempublikasikannya.
Membuat portfolio sendiri adalah cara praktis untuk melatih HTML dan CSS karena kamu langsung menggunakannya pada sebuah proyek nyata.
Portfolio juga dapat menjadi tempat untuk mendokumentasikan perkembangan skill. Project pertama mungkin masih sederhana, tetapi beberapa bulan kemudian kamu bisa membandingkannya dengan project baru dan melihat perkembangan kemampuanmu.
Selain itu, portfolio dapat digunakan untuk mengumpulkan karya sekolah, menunjukkan project saat mengikuti lomba, membantu memberikan gambaran kemampuan ketika mendaftar magang, serta menjadi persiapan menuju kuliah atau dunia kerja.
Portfolio bukan jaminan seseorang akan diterima pada sekolah, kampus, magang, atau pekerjaan tertentu. Namun, portfolio membantu membuat karya yang pernah dibuat menjadi lebih mudah dilihat dan dijelaskan.
Membuat website portfolio pelajar tidak membutuhkan framework atau kemampuan coding tingkat lanjut. Untuk tahap awal, HTML sudah cukup untuk menyusun profil, skills, project, dan kontak, sementara CSS digunakan untuk membuat tampilannya lebih rapi dan responsive.
Urutannya juga cukup sederhana: siapkan project → buat HTML → atur CSS → cek responsive → isi project → publikasikan jika diperlukan.
Jangan terlalu fokus membuat desain yang rumit pada project pertama. Pastikan struktur kode mudah dipahami dan halaman nyaman digunakan terlebih dahulu. Setelah terbiasa dengan HTML dan CSS, kamu dapat memperbarui portfolio sedikit demi sedikit dengan project baru dan mempelajari fitur web yang lebih lanjut.
Bisa. Portfolio sederhana dapat dibuat hanya menggunakan HTML dan CSS dasar. Mulailah dengan satu halaman yang berisi profil, skills, project, dan kontak. Setelah memahami struktur dasarnya, kamu bisa memperbaiki desain atau menambahkan fitur lain secara bertahap.
Internet tidak diperlukan ketika menulis dan mencoba HTML serta CSS di komputer. File index.html dapat langsung dibuka melalui browser. Internet baru dibutuhkan untuk mengunduh software tertentu, mencari referensi, atau mempublikasikan website agar bisa diakses orang lain secara online.
Tidak. JavaScript bukan syarat untuk membuat portfolio dasar. HTML dapat menangani struktur konten dan CSS mengatur tampilannya. JavaScript dapat dipelajari kemudian jika ingin menambahkan fitur interaktif seperti dark mode, menu mobile, filter project, atau form yang lebih dinamis.
Bagian dasarnya dapat berupa profil singkat, skills, beberapa project atau hasil karya, serta kontak. Pelajar juga dapat menambahkan prestasi dan pengalaman organisasi jika relevan. Hindari mencantumkan alamat lengkap, nomor identitas, atau informasi pribadi sensitif yang tidak diperlukan.
Bisa. HTML dan CSS sudah cukup untuk membuat portfolio satu halaman dengan navigasi, profil, skills, kumpulan project, kontak, card layout, efek hover, dan desain responsive. Framework maupun JavaScript tidak diperlukan untuk menghasilkan portfolio dasar yang rapi.
Setelah selesai diuji di komputer, file HTML, CSS, dan gambar dapat diunggah ke layanan hosting. Untuk website statis, beberapa contoh platform yang dapat digunakan adalah GitHub Pages, Cloudflare Pages, dan Netlify. Sebelum dipublikasikan, pastikan semua file, gambar, serta link sudah berfungsi.
Daftar IsiApa Itu Partikel?Dari Benda hingga Partikel yang Sangat KecilMengenal Struktur AtomApa Itu Partikel Subatom?Apa…
Daftar IsiApakah Waktu Setiap Orang Benar-Benar Berbeda?Bagaimana Manusia Memahami Waktu Sebelum Einstein?Gravitasi Newton dan Konsep…
Setelah lama menjadi bahan rumor dan spekulasi di kalangan gamer, Resident Evil 9 akhirnya hadir…
Kita hampir setiap hari melihat langit berwarna biru, tetapi jarang memikirkan kenapa warna yang muncul…
Di era digital saat ini, membuat website tidak selalu membutuhkan biaya mahal. Dengan cloudflare deploy…
Membuat aplikasi sekarang tidak lagi harus mahal atau rumit. Dengan server gratis dari VercelApp, siapa…