Cara Membuat Website Profile Freelance dengan HTML dan CSS
Oleh
Mutiara Auliya
Website profile dapat menjadi tempat untuk memperkenalkan diri, menunjukkan keahlian, menampilkan hasil pekerjaan, hingga memudahkan calon klien menghubungimu.
Kali ini, kamu akan membuat website profile freelance sederhana menggunakan HTML dan CSS. Tidak menggunakan WordPress, website builder, maupun database. Jadi, kamu bisa memahami langsung bagaimana sebuah halaman website dibuat dari kode hingga akhirnya dapat diakses melalui domain.
Sebagai contoh, kita akan membuat website milik seorang freelance web designer dengan bagian profil, layanan, portfolio, dan kontak.
Setelah website selesai dibuat di komputer, file akan di-upload ke hosting agar website dapat diakses secara online.
Persiapan Membuat Website Profile
Tidak banyak tools yang dibutuhkan untuk mengikuti tutorial ini. Kamu cukup menyiapkan:
- Text editor atau code editor.
- Browser seperti Chrome, Firefox, atau Edge.
- Hosting dan domain untuk mempublikasikan website.
Kamu dapat menggunakan Visual Studio Code, Sublime Text, Notepad++, atau berbagai HTML editor lainnya.
Tutorial ini menggunakan HTML untuk membentuk struktur halaman dan CSS untuk mengatur tampilannya. Jika masih ingin memahami sintaks dasarnya, kamu bisa mempelajari dasar HTML dan cara menggunakan CSS terlebih dahulu.
Website yang dibuat akan bersifat statis. Artinya, kita tidak memerlukan database untuk menjalankan halaman profile ini.
Membuat Website Profile Freelance
Kita akan mulai dari struktur project sederhana, kemudian membuat HTML dan CSS secara terpisah agar kode lebih mudah dikelola.
1. Buat Folder Project Website
Buat folder baru di komputer dengan nama:
|
1 |
website-profile |
Di dalam folder tersebut, buat dua file:
|
1 2 3 4 |
website-profile/ ├── index.html └── style.css |
File index.html menjadi halaman utama website, sedangkan style.css digunakan untuk mengatur warna, layout, ukuran teks, tombol, dan tampilan responsive.
Penamaan index.html penting karena file ini nantinya menjadi halaman yang pertama kali dibaca ketika seseorang membuka domain.
2. Buat Struktur Website dengan HTML
Buka file index.html, kemudian masukkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 |
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Domion Deneva | Freelance Web Designer</title> <meta name="description" content="Website portfolio Domion Deneva, freelance web designer yang membantu bisnis membuat website modern dan responsive." > <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <nav class="container navbar"> <a href="#home" class="brand">Domion.</a> <div class="nav-links"> <a href="#about">Tentang</a> <a href="#services">Layanan</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Kontak</a> </div> </nav> </header> <main> <section class="hero container" id="home"> <div class="hero-content"> <p class="eyebrow">Freelance Web Designer</p> <h1> Membantu Bisnis Tampil Lebih Profesional di Internet </h1> <p class="hero-description"> Halo, saya Domion. Saya membantu UMKM dan bisnis membangun website yang sederhana, responsive, dan mudah digunakan. </p> <div class="hero-buttons"> <a href="#portfolio" class="button button-primary"> Lihat Portfolio </a> <a href="mailto:halo@namadomain.com" class="button button-secondary"> Hubungi Saya </a> </div> </div> <div class="profile-card"> <div class="avatar">DD</div> <h2>Domion Deneva</h2> <p>Web Designer & Front-end Developer</p> <div class="profile-stats"> <div> <strong>20+</strong> <span>Project</span> </div> <div> <strong>3 Tahun</strong> <span>Pengalaman</span> </div> </div> </div> </section> <section class="section container" id="about"> <p class="section-label">Tentang Saya</p> <h2>Website yang Tidak Hanya Bagus, tetapi Juga Fungsional</h2> <p class="section-description"> Saya adalah freelance web designer yang berfokus membantu bisnis membangun identitas digital melalui website yang bersih, cepat, dan mudah digunakan. </p> </section> <section class="section container" id="services"> <p class="section-label">Layanan</p> <h2>Apa yang Bisa Saya Bantu?</h2> <div class="card-grid"> <article class="card"> <span class="card-number">01</span> <h3>Landing Page</h3> <p> Membuat landing page untuk campaign, produk, jasa, maupun kebutuhan promosi bisnis. </p> </article> <article class="card"> <span class="card-number">02</span> <h3>Company Profile</h3> <p> Website company profile sederhana untuk memperkenalkan bisnis dan layanan kepada pelanggan. </p> </article> <article class="card"> <span class="card-number">03</span> <h3>Website Maintenance</h3> <p> Membantu melakukan pembaruan konten dan pemeliharaan website secara berkala. </p> </article> </div> </section> <section class="section container" id="portfolio"> <p class="section-label">Portfolio</p> <h2>Beberapa Project Terbaru</h2> <div class="portfolio-grid"> <article class="project-card"> <div class="project-preview"> Landing Page </div> <div class="project-content"> <p>Web Design</p> <h3>Landing Page Brand Fashion</h3> </div> </article> <article class="project-card"> <div class="project-preview"> Company Profile </div> <div class="project-content"> <p>Website Development</p> <h3>Website Konsultan Bisnis</h3> </div> </article> <article class="project-card"> <div class="project-preview"> Personal Website </div> <div class="project-content"> <p>Portfolio</p> <h3>Portfolio Photographer</h3> </div> </article> </div> </section> <section class="section container" id="contact"> <div class="contact-box"> <div> <p class="section-label">Mari Bekerja Sama</p> <h2>Punya Project Website?</h2> <p> Ceritakan kebutuhan websitemu dan mari diskusikan bagaimana saya bisa membantu. </p> </div> <a href="mailto:halo@namadomain.com" class="button button-primary" > Kirim Email </a> </div> </section> </main> <footer class="footer"> <div class="container"> <p> © 2026 Domion Deneva. All rights reserved. </p> </div> </footer> </body> </html> |
Kode di atas sudah membentuk seluruh struktur website, mulai dari navigasi, halaman pembuka, profil freelancer, layanan, portfolio, hingga kontak.
Kamu dapat mengganti nama Domion Deneva, jenis layanan, pengalaman, email, dan project dengan informasi milikmu sendiri.
Jika masih mencari referensi layout atau bagian apa saja yang sebaiknya ditampilkan, lihat beberapa inspirasi website portfolio.
3. Atur Tampilan Website dengan CSS
HTML yang sudah dibuat sebenarnya dapat dibuka melalui browser, tetapi tampilannya masih sangat sederhana.
Sekarang buka style.css, kemudian tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 |
* { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: Arial, sans-serif; color: #16324f; background: linear-gradient(180deg, #ffffff 0%, #fff7e6 100%); line-height: 1.6; } a { color: inherit; text-decoration: none; } .container { width: min(1100px, calc(100% - 40px)); margin: 0 auto; } .site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #c2fcff; } .navbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { color: #0566c6; font-size: 24px; font-weight: 800; } .nav-links { display: flex; gap: 24px; font-size: 14px; font-weight: 600; } .nav-links a:hover { color: #008bea; } .hero { min-height: 650px; display: grid; grid-template-columns: 1.4fr 0.8fr; align-items: center; gap: 72px; padding-top: 80px; padding-bottom: 80px; } .eyebrow, .section-label { color: #008bea; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .hero h1 { max-width: 720px; margin-top: 16px; font-size: clamp(42px, 6vw, 72px); line-height: 1.05; color: #005499; } .hero-description { max-width: 620px; margin-top: 24px; font-size: 18px; color: #557086; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .button { display: inline-flex; min-height: 48px; padding: 0 24px; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; transition: 0.2s ease; } .button-primary { color: #ffffff; background: #0566c6; } .button-primary:hover { background: #005499; transform: translateY(-2px); } .button-secondary { color: #0566c6; border: 1px solid #78f2ff; background: #ffffff; } .profile-card { padding: 40px; border: 1px solid #78f2ff; border-radius: 24px; background: linear-gradient( 145deg, #ffffff, #fff7e6 ); } .avatar { width: 100px; height: 100px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 50%; background: #0566c6; color: #ffffff; font-size: 32px; font-weight: 800; } .profile-card h2 { color: #005499; } .profile-card > p { margin-top: 6px; color: #557086; } .profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #78f2ff; } .profile-stats strong, .profile-stats span { display: block; } .profile-stats strong { color: #005499; font-size: 20px; } .profile-stats span { color: #557086; font-size: 13px; } .section { padding-top: 90px; padding-bottom: 90px; } .section h2 { max-width: 750px; margin-top: 12px; color: #005499; font-size: clamp(30px, 4vw, 46px); line-height: 1.2; } .section-description { max-width: 760px; margin-top: 24px; color: #557086; font-size: 18px; } .card-grid, .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .card { padding: 32px; border: 1px solid #c2fcff; border-radius: 18px; } .card-number { color: #00aeef; font-weight: 800; } .card h3 { margin-top: 28px; color: #005499; } .card p { margin-top: 12px; color: #557086; } .project-card { overflow: hidden; border: 1px solid #c2fcff; border-radius: 18px; background: #ffffff; } .project-preview { min-height: 220px; display: grid; place-items: center; padding: 24px; color: #005499; background: linear-gradient( 135deg, #c2fcff, #43e4ff ); font-size: 24px; font-weight: 800; } .project-content { padding: 24px; } .project-content p { color: #008bea; font-size: 13px; font-weight: 700; text-transform: uppercase; } .project-content h3 { margin-top: 8px; color: #005499; } .contact-box { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 48px; border-radius: 24px; background: #fff7e6; } .contact-box p:not(.section-label) { max-width: 650px; margin-top: 12px; color: #557086; } .footer { padding: 32px 0; color: #557086; border-top: 1px solid #c2fcff; text-align: center; font-size: 14px; } @media (max-width: 800px) { .nav-links { display: none; } .hero { min-height: auto; grid-template-columns: 1fr; gap: 40px; padding-top: 64px; } .card-grid, .portfolio-grid { grid-template-columns: 1fr; } .contact-box { align-items: flex-start; flex-direction: column; padding: 32px; } } |
CSS tersebut membuat halaman lebih nyaman dilihat di desktop maupun perangkat dengan layar lebih kecil.
Kamu bebas mengubah warna, ukuran tulisan, jarak antarbagian, ataupun isi setiap card sesuai personal branding yang ingin ditampilkan.
Coba Website di Komputer
Sebelum website di-upload, pastikan semuanya berjalan dengan benar di komputer.
4. Buka File index.html
Masuk ke folder website-profile, kemudian klik dua kali file:
|
1 |
index.html |
Browser akan membuka website secara lokal.
Alamat yang muncul kemungkinan berbentuk seperti:
|
1 |
file:///C:/Users/Nama/website-profile/index.html |
Ini normal karena website masih dibuka langsung dari komputer dan belum berada di server.
Periksa beberapa bagian berikut:
- navigasi dapat digunakan;
- tombol menuju section yang tepat;
- layout tidak berantakan;
- teks sudah sesuai;
- email pada tombol kontak sudah benar;
- tampilan mobile tetap nyaman digunakan.
Jika melakukan perubahan pada kode, simpan file kemudian refresh browser untuk melihat hasil terbaru.
🚀
Website Sudah Siap Dipublikasikan?
Untuk satu website profile freelance seperti tutorial ini, kamu dapat menggunakan Hosting Nimbus One sebagai tempat menyimpan file website, lalu melanjutkan proses upload melalui cPanel.
Upload Website Profile ke Hosting
Website yang hanya berada di komputer belum dapat diakses oleh calon klien melalui internet.
Agar bisa dibuka menggunakan domain seperti:
|
1 |
https://namakamu.com |
file HTML dan CSS perlu disimpan pada hosting.
5. Siapkan File Website
Pastikan struktur folder masih seperti berikut:
|
1 2 3 4 |
website-profile/ ├── index.html └── style.css |
Kemudian kompres kedua file menjadi ZIP, misalnya:
|
1 |
website-profile.zip |
Pastikan index.html berada langsung di dalam file ZIP dan tidak tersimpan terlalu dalam pada beberapa folder.
6. Login ke cPanel Hosting
Masuk ke akun hosting terlebih dahulu.
Jika menggunakan Web Hosting DomaiNesia, kamu dapat mengikuti panduan login ke cPanel.
Setelah berhasil login, cari bagian Files, kemudian pilih File Manager.
File Manager digunakan untuk melihat, menambahkan, menghapus, mengedit, dan mengelola file yang tersimpan di hosting.
Panduan penggunaannya juga tersedia pada cara menggunakan File Manager di cPanel.
7. Upload Website ke public_html
Setelah File Manager terbuka, masuk ke:
|
1 |
public_html |
Folder tersebut digunakan sebagai document root untuk domain utama pada konfigurasi hosting yang umum.
Selanjutnya:
- Klik Upload.
- Pilih
website-profile.zip. - Tunggu proses upload selesai.
- Kembali ke File Manager.
- Klik kanan file ZIP.
- Pilih Extract.
Setelah proses extract selesai, pastikan susunannya seperti:
|
1 2 3 4 |
public_html/ ├──</code><code class="language-text"> index.ht</code><code class="language-text">ml └──</code><code class="language-text"> style.css |
Hindari struktur seperti:
|
1 2 3 4 5 |
public_html/</code><code class="language-text"> └──</code><code class="language-text"> website-profile/ ├── index.html └── style.css |
Jika index.html berada di dalam folder website-profile, halaman utama tidak berada langsung pada document root.
Pindahkan index.html dan style.css ke public_html apabila diperlukan.
Cek Website Melalui Domain
Setelah file berhasil ditempatkan di hosting, waktunya memastikan website sudah dapat diakses secara online.
8. Buka Domain di Browser
Masukkan nama domain:
|
1 |
https://namakamu.com |
Jika seluruh konfigurasi sudah benar, website portfolio yang sebelumnya hanya bisa dilihat di komputer sekarang dapat dibuka melalui internet.
Coba juga menggunakan smartphone untuk memastikan desain responsive bekerja dengan baik.
Jika perubahan terbaru belum muncul, coba lakukan hard refresh pada browser atau buka halaman menggunakan incognito mode.
Kustomisasi Website Sesuai Profile Kamu
Website yang dibuat dalam tutorial ini masih berupa contoh.
Supaya benar-benar menjadi website personal, ubah beberapa informasi di dalamnya.
9. Ganti Identitas Freelancer
Cari bagian:
|
1 |
<h2>Domion Deneva</h2> |
Kemudian ganti dengan namamu.
Lakukan hal yang sama untuk:
- profesi;
- deskripsi diri;
- pengalaman;
- jumlah project;
- layanan;
- portfolio;
- alamat email.
Misalnya seorang freelance UI/UX designer dapat mengubah layanan menjadi UI Design, UX Research, dan Design System.
Sedangkan seorang freelance photographer dapat menggantinya dengan Product Photography, Event Documentation, dan Photo Editing.
10. Tambahkan Portfolio Terbaik
Jangan hanya memasukkan seluruh pekerjaan yang pernah dibuat.
Pilih beberapa project yang paling relevan dengan jenis klien yang ingin kamu dapatkan.
Untuk setiap portfolio, kamu dapat menjelaskan:
- nama project;
- jenis pekerjaan;
- masalah yang diselesaikan;
- hasil pekerjaan;
- teknologi atau tools yang digunakan.
Dengan begitu, website bukan sekadar memperkenalkan siapa kamu, tetapi juga membantu calon klien memahami kemampuan dan pengalaman yang kamu miliki.
Website Profile Freelance Sudah Online!
Sekarang kamu sudah mengetahui proses membuat website profile mulai dari menulis HTML, membuat desain dengan CSS, mengeceknya di komputer, hingga meng-upload file ke hosting.
Untuk website statis seperti contoh ini, kamu bahkan tidak membutuhkan CMS maupun database.
Setelah website online, kamu dapat terus mengembangkan kodenya dengan menambahkan foto profile, halaman portfolio terpisah, formulir kontak, animasi, JavaScript, atau fitur lain sesuai kebutuhan.
Yang terpenting, sekarang kamu tidak hanya memiliki file HTML di komputer, tetapi sebuah website profile yang dapat dibagikan kepada calon klien melalui domain sendiri.
Mutiara Auliya
Hi! I am Data Analyst and Technical Writer at DomaiNesia. I love Linux, Python, Server, WordPress, Data Analysis and Artificial Intelligence. I will help you making some technically being easy to understand :)
