Cara Membuat Web Portofolio dengan HTML dan CSS
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...Selengkapnya
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.
Baca Juga: Cara Membuat Web Sekolah dengan HTML dan CSS
Baca Juga: Cara Membuat Web Sekolah dengan HTML dan CSS
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 tugas yang diberikan oleh guru anda.
Apabila ada pertanyaan baik saran dan kritik anda bisa berkomentar dibawah ini.
Selamat membaca dan mencoba...
kak, cara ubah background color ke image nya gimana ya?
background-image:url(namafile.jpg);
Cara memasukkan script html nya + file css nya di blogspot gimana Kk?? 😊🙏
hallo kak, tinggal jadikan di 1 file, kemudian copy ke htmlnya
pakai apk wpa ka?
pakai apk apa kak?