Cara Membuat Web Portofolio dengan HTML dan CSS

Konten [Tampil]
Cara Membuat Web Portofolio dengan HTML dan CSS
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...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 JugaCara 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.
Cara Membuat Web Portofolio dengan HTML dan CSS
Cara Membuat Web Portofolio dengan HTML dan CSS
Cara Membuat Web Portofolio dengan HTML dan CSS

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...

0 Response to "Cara Membuat Web Portofolio dengan HTML dan CSS"

Post a comment

Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel