Cara Membuat Web Portofolio dengan HTML dan CSS

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>

BACA JUGA:   Pengertian, Kelebihan, Jenis dan Strategi Serta Estimasi Biaya Digital Marketing

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.

BACA JUGA:   Kanada tidak boleh ketinggalan dalam menerapkan langkah-langkah keamanan untuk anak-anak saat online, kata peneliti

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

Leave a Comment