Pada artikel ini saya akan membuat web portofolio menggunakan html dan css. Untuk tampilan website yang dibuat nanti cukup keren dan sederhana. Website yang dibuat nanti tergolong masuk dalam jenis Web Statis. Sebelum melanjutkan tutorial silahkan simak terlebih dahulu penjelasan dibawah ini.
Pengertian Web Statis
Web Statis adalah website dimana kita tidak bisa mengupdate konten secara langsung. Untuk mengupdate dan mengubah informasi konten didalam web tersebut, anda harus mengubah kode codingan yang ada didalamnya secara manual. Sebelum membuat web, berikut alat dan bahan yang perlu anda siapkan.
• Komputer/PC/Laptop/Android
• Aplikasi Text Editor
• Browser
• Niat yang Tulus
Tutorial Membuat Web Portofolio dengan HTML dan CSS
Berikut ini panduan untuk membuat website portofolio menggunakan HTML dan CSS, antara lain :
1. Buat Folder Baru: Portofolio
Langkah pertama adalah membuat folder baru dan beri nama “portofolio” dan kemudian silahkan ikuti step berikutnya.
2. Buat File: portofolio.html
Jika sudah anda membuat sebuah file dan beri nama “portofolio.html” dan kemudian copy script kode dibawah ini dan tempelkan.
<!DOCTYPE html>
<html>
<head>
<title>Website Portofolio – www.ansoriweb.com</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<nav id=”navbar”>
<a href=”#welcome-section”>HOME</a>
<a href=”#main”>PROJECTS</a>
<a href=”#footer”>CONTACT</a>
</nav>
<header id=”welcome-section”>
<h1>Hi, I’m Ahmad Ansori</h1>
<p>a blogger at ansoriweb.com</p>
</header>
<main id=”main”>
<section id=”projects”>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img1.jpg”></a>
<div>Project1</div>
</div>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img2.png”></a>
<div>Project2</div>
</div>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img3.png”></a>
<div>Project3</div>
</div>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img4.jpg”></a>
<div>Project4</div>
</div>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img5.jpg”></a>
<div>Project5</div>
</div>
<div class=”project-tile”>
<a href=”#” target=”_blank”><img src=”img/img6.jpg”></a>
<div>Project6</div>
</div>
</section>
<button><a href=”https://www.ansoriweb.com” target=”_blank”>More Projects >></a></button>
</main>
<footer id=”footer”>
<div>
<a id=”profile-link” href=”#” target=”_blank”><img src=”img/fb.png” width=”150px”></a>
<p>Facebook profile</p>
</div>
<div>
<a href=”#” target=”_blank”><img src=”img/ig.png” width=”150px”></a>
<p>Instagram profile</p>
</div>
<div>
<a href=”#” target=”_blank”><img src=”img/pin.png” width=”220px”></a>
<p>Pinterest profile</p>
</div>
<div>
<a href=”#” target=”_blank”><img src=”img/in.png” width=”175px”></a>
<p>LinkedIn profile</p>
</div>
</footer>
<script type=”text/javascript”>
const projectName = ‘portfolio’;
localStorage.setItem(‘example_project’, ‘Personal Portfolio’);
</script>
</body>
</html>
3. Buat File: style.css
Setelah itu silahkan buat file lagi dan beri nama “style.css” dan copy kode dibawah ini.
*{
margin:0px;
padding:0px;
}
#welcome-section{
background-color:hsl(160, 100%, 90%);
display:flex;
flex-direction:column;
height:100vh;
align-items:center;
justify-content:center;
}
nav{
background-color:#C5CAE9;
height:100px;
width:100%;
position:fixed;
display:flex;
align-items:center;
justify-content:flex-end;
color:black;
z-index:1;
}
nav a{
font-size:30px;
margin:0 5% 0 5%;
}
nav a:hover{
color:#43A047;
}
main section{
margin:20px 10% 20px 10%;
display:grid;
grid-template:repeat(2,1fr)/repeat(3,1fr);
grid-column-gap:10px;
justify-items:center;
}
.project-tile{
margin-bottom:80px;
display:flex;
flex-direction:column;
align-items:center;
}
.project-tile img{
width: 250px;
}
main{
padding-top:120px;
display:flex;
flex-direction:column;
}
main button {
text-align:center;
border-radius:5px;
border-color:#03A9F4;
cursor:pointer;
box-shadow:none;
width:auto;
align-self:center;
padding:5px 10px 5px 10px;
margin-bottom:20px;
}
main a,main a:hover,main a:active,main a:focus,main a:visited{
text-decoration:none;
color:#03A9F4;
}
main section div a:hover{
border-radius:10px;
box-shadow:
-5px 5px 20px,
5px -5px 20px,
5px 5px 20px,
-5px -5px 20px;
}
a, a:hover, a:active, a:focus, a:visited{
color:black;
text-decoration:none;
}
main section div a img{
border:solid;
border-color:#03A9F4;
border-width:2px;
border-radius:10px;
height:120px;
width:auto;
overflow:hidden;
}
footer{
background-color:#A7FFEB;
height:100vh;
display:flex;
flex-direction:row; align-items:center;
justify-content:space-evenly;
}
footer div a{
background-color:black;
border-radius:50%;
height:150px;
width:150px;
display:flex;
align-items:center;
justify-content:center;
white-space:pre-line;
overflow:hidden;
}
footer div a:hover{
border-radius:50%;
box-shadow:
-5px 5px 10px,
5px -5px 10px,
5px 5px 10px,
-5px -5px 10px;
}
footer div a img{
border-radius:50%;
}
footer div p{
text-align:center;
}
@media (max-width:800px){
nav{
background-color:#C5CAE9;
height:100px;
width:100%;
position:fixed;
display:flex;
align-items:center;
justify-content:center;
color:black;
z-index:1;
}
main section{
margin:20px 10% 20px 10%;
display:grid;
grid-template:repeat(6,1fr)/1fr;
justify-items:center;
}
footer{
background-color:#A7FFEB;
height:100vh;
display:flex;
align-items:center;
justify-content:space-evenly;
}
}
4. Buat Folder Baru: img
Selanjutnya yaitu membuat folder baru dengan nama “img” dan jika sudah silahkan download gambarnya disini.
5. Save & View
Setelah step by step selesai anda lakukan, langkah selanjutnya adalah menyimpan hasilnya. Jika sudah anda bisa menarik file “portofolio.html” ke dalam browser. Maka jika benar akan muncul tampilan seperti gambar dibawah ini.
Kesimpulan
Itulah tadi pembahasan mengenai Cara Membuat Web Portofolio dengan HTML dan CSS. Semoga bermanfaat untuk referensi.
Apabila ada pertanyaan baik saran dan kritik anda bisa berkomentar dibawah ini.
Selamat membaca dan mencoba…
————————————-
Sumber http: https://www.ansoriweb.com/2020/04/cara-membuat-web-portofolio-dengan