Cara Membuat Web Portofolio dengan HTML dan CSS

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...
Next Post Previous Post
6 Comments
  • Unknown
    Unknown 16 January, 2021 20:16

    kak, cara ubah background color ke image nya gimana ya?

    • Ahmad Ansori
      Ahmad Ansori 16 January, 2021 21:32

      background-image:url(namafile.jpg);

  • Epril budiman
    Epril budiman 07 February, 2021 12:22

    Cara memasukkan script html nya + file css nya di blogspot gimana Kk?? 😊🙏

    • Ahmad Ansori
      Ahmad Ansori 08 February, 2021 07:48

      hallo kak, tinggal jadikan di 1 file, kemudian copy ke htmlnya

    • Unknown
      Unknown 30 January, 2022 13:41

      pakai apk wpa ka?

  • Unknown
    Unknown 30 January, 2022 13:41

    pakai apk apa kak?

Add Comment
comment url