Cara Membuat Website Profil Biodata (CV) Pribadi Dengan Menggunakan HTML GRATIS
4 min readNov 16, 2020
Persiapan Tools Yang Dibutuhkan
- Notepad++ ( Download https://github.com/notepad-plus-plus/notepad-plus-plus/releases/download/v7.8.8/npp.7.8.8.Installer.exe)
- Koneksi Internet Lancar
Cara Membuat Web Portfolio CV Online
Contoh Hasil Jadi Di https://isetiabhakti.glitch.me/contoh.html
- Buka Notepad++ > Tulis test > Klik menu File, Save as > namai file dengan nama “website cv.html” (pastikan formatnya html sesuai gambar di bawah!)
2. Test website dengan menekan menu run, lalu lunch in chrome
3. Jika Berhasil akan muncul sebagai berikut
4. Kita mulai dengan data diri, masukan kode ini kedalam notepad++
<!DOCTYPE html>
<html><head>
<title>Ilham Setia Bhakti</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>
.magic-resize > marquee > img {
width: 100px;
height: 100px;
padding: 16px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif
}
;
</style><link rel="icon" href="https://cdn.glitch.com/9be2272f-b4da-46fa-95e7-d94a1cad4bc8%2Ficons8-checked-48.png?v=1581404444680
" type="image/gif" sizes="16x16">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head><body class="w3-light-grey"><!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;"><!-- The Grid -->
<div class="w3-row-padding"><!-- Left Column -->
<div class="w3-third"><div class="w3-white w3-text-grey w3-card-4 w3-animate-top">
<div class="w3-display-container">
<img src="https://cdn.glitch.com/9be2272f-b4da-46fa-95e7-d94a1cad4bc8%2FSUMPLE3.jpg?v=1581480552105" style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-text-black">
<h2 style="background-color:white;padding:8px;">Ilham Setia Bhakti</h2>
</div>
</div>
<div class="w3-container">
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Web Developer | Content Creator</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>Bekasi</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>isetiabhakti@gmail.com</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>+62 899-8994-858</p>
<hr><p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
<p>Web Based Programming</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:95%">95%</div>
</div>
<p>Multimedia</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
<div class="w3-center w3-text-white">80%</div>
</div>
</div>
<p>Networking</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
</div>
<p>Blog + SEO</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
</div>
<p>Office</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
</div>
<br>
Hasilnya seperti ini
6. Lalu Tabah Kode Ini Untuk Menampilkan tab edukasi
<!-- End Left Column -->
</div><!-- Right Column -->
<div class="w3-twothird"><div class="w3-container w3-card w3-white w3-margin-bottom w3-animate-right">
<h2 class="w3-text-grey w3-padding-16"><i class="fas fa-school fas-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>SDIT Assalam, Bekasi</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2005 - 2011</h6>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>SMPN 11 Kota Bekasi, Bekasi</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2011 - 2014</h6>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>SMAN 1 Tambun Utara, Bekasi</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2014 - 2017</h6>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Universitas Bhayangkara, Bekasi</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2018 - 2022</h6>
<hr/>
</div>
</div><!-- End Right Column -->
</div><!-- End Grid -->
</div><!-- End Page Container -->
</div>
7. Terakhir Tambahkan Footer Untuk Kredit Pembuat Website
<footer class="w3-container w3-teal w3-center w3-margin-top">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a> | <a href="https://isetiabhakti.medium.com" target="_blank">iSetiabhakti</a></p>
</footer></body></html>
8. Jalankan website anda kembali
