Selamat Datang

Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery

Tutorial ini akan menjelaskan bagaimana cara membuat website portfolio sederhana dengan menggunakan HTML5, CSS3, Jquery. Dalam kasus ini kita coba untuk membuat desain web portfolio untuk seorang kartunis, ilustrator, atau seniman. Jika sebelumnya kita pernah membuat website one page bergaya flat design sekarang kita kembali akan membuat website one page bahkan bisa disebut hanya landing page.

Web Portfolio tidak perlu terlalu ribet, yang dibutuhkan adalah keterangan tentang siapa pemilik portfolio, contoh hasil karya, dan kontak yang bisa dihubungi, jadi tidak terlalu rumit sebenarnya membuat website portfolio.

Web Portfolio tidak perlu terlalu wah, cukup sederhana saja namun isi portfolionya tidak boleh sederhana ~ TWD

Tips sederhana untuk membuat portfolio anda semakin ramai dikunjungi salah satunya adalah dengan membuat sebuah blog yang di kaitkan dengan portfolio tersebut, jadi blog sebagai penarik pengunjung. Hm..kita tidak akan membahas secara detail masalah marketing disini :) , kembali fokus ke tutorial.

Sebelum memulai sebaiknya kita mengetahui terlebih dahulu apa yang akan kita buat. Berikut ini adalah contoh portfolio yang akan kita buat – DEMO

Ingredients

Seperti layaknya memasak, membuat website juga perlu bahan-bahan, berikut ini bahan yang kita perlukan, karena disini penulis hanya membuat contoh, maka contoh-contoh portfolionya pun diambil dari beberapa website, bukan buatan pribadi.

Struktur Files

Berikut struktur file yang telah disiapkan, file css ditaruh di folder css, gambar ditaruh di img, gambar untuk gallery ditaruh di folder images, sedangkan plugin popup ada di folder popup.

Struktur Files

Struktur Files

Struktur HTML

Selanjutnya kita langsung membuat struktur HTML yang digunakan. Struktur HTML dari template yang dibuat ini sudah valid berdasarkan W3 Validator.

Membuat header

	<div id="banner">
		<header id="logo">
			<img src="img/logo2x.png" alt="">
			<h1>Bos Tut Web</h1>
			<span id="jobdesc">
				An Indonesian Illustrator
			</span>
		</header>
		<div id="overlay"></div>
	</div>
Membuat Header

Membuat Konten Website, disini kita belajar menggunakan fungsi css display: table , table-row, dan table-cell untuk membuat kolom yang tingginya rata di bagian class .box, hampir mirip fungsinya dengan tag table yang biasa kita lihat

	<section>
		<span>How I Work</span>
		<div class="section">
			<div class="content">
				<div class="box">
					<img src="img/box1.jpg" alt="">
					<h3>Step 1: Sketch.</h3>
					<p>Pencils Graphite (H) on 17x14" Strathmore Windpower Bristol</p>
				</div>
				<div class="box">
					<img src="img/box2.jpg" alt="">
					<h3>Step 2: Inking.</h3>
					<p>Inks Windsor Newton Series 7s (0-2), Copic Technical Pens, White Out. Scanned at 1200DPI (Bitmap)</p>
				</div>
				<div class="box">
					<img src="img/box3.jpg" alt="">
					<h3>Step 3: Coloring.</h3>
					<p>Finish Treatment: Photoshop Gradiant layers, hue/adjustment layers. Diffusion achieved using solid fill layer based on colour channel, blurred and reducied to 20% Opacity.</p>
				</div>
			</div>
		</div>
	</section>
Kode Diatas Untuk Bagian How I Work

Membuat Bagian Gallary, bagian gallery ini disesuaikan dengan aturan-aturan dari plugin Magnific Popup

	<div class="gallery">
		<div class="box"><a href="images/1.jpg" title="Gambar 1" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/1.jpg" alt=""></a></div>
		<div class="box"><a href="images/2.jpg" title="Gambar 2" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/2.jpg" alt=""></a></div>
		<div class="box"><a href="images/3.jpg" title="Gambar 3" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/3.jpg" alt=""></a></div>
		<div class="box"><a href="images/4.jpg" title="Gambar 4" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/4.jpg" alt=""></a></div>
		<div class="box"><a href="images/5.jpg" title="Gambar 5" desc="Lorem ipsum dolor sit amet, consectetur adipisicing."><img src="images/5.jpg" alt=""></a></div>
	</div>

Membuat Bagian Testimonial

	<aside class="testimonial">
		<span>Testimonial from <strong>'Steve Jobs</strong></span>
		<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, voluptates, neque. Nesciunt, iste, soluta</h3>
	</aside>
Kode Diatas Untuk Bagian Testimonial

Membuat Bagian Footer

	<footer>
		<div class="content">
			<div class="box">&copy; All Right Reserved</div>
			<div class="box"><strong>Find me on: </strong><a href="http://www.twitter.com/tut_web">Twitter</a> / <a href="http://www.facebook.com/bos.tutweb">Facebook</a> / <a href="#">Dribbble</a> / <a href="#">Instagram</a><br><br><strong>Phone:</strong> +62210000000; <strong>Email:</strong> tut.webdesign@gmail.com</div>
		</div>
	</footer>
Kode diatas untuk bagian Footer

Telah selesai dengan HTML selanjutnya kita percantik struktur website tersebut dengan CSS

Struktur CSS

Styling bagian Header


/* --- Banner ------------------------- */
#banner{
	width: 100%;
	height: 70%;
	background: url(img/banner.jpg) 0 0 repeat;
	background-attachment: fixed;
	position: relative;
}

	#banner #overlay{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: url(img/overlay.png) 0 100% repeat-x;
	}

	#logo{
		width: 100%;
		position: absolute;
		bottom: 10%;
		z-index: 5;
		text-align: center;
	}
	#logo img {
		cursor: pointer;
		display: inline-block;
		width: 128px;
		height: 128px;
		border: 3px solid rgba(255,255,255,.5);
		border-radius: 50%;
	}
		#logo img:hover{
			border: 3px solid rgba(255,255,255,.7);
		}
	#logo h1{
		margin: 0 auto;
		text-align: center;
		font-family: 'Montez', cursive;
		font-size: 100px;
		color: #eee;
		text-shadow: 1px 1px 1px #000, 1px 2px 3px #555;
	}

	#logo #jobdesc{
		display: block;
		width: 100%;
		text-align: center;
		margin: 5px auto;
		color: #eee;
		font-size: 20px;
		text-shadow: 1px 1px 1px #000;
	}
Kode diatas untuk mempercantik bagian Header/Banner

Styling Bagian Konten


/* --- Section ------------------------- */

section{
	width: 900px;
	max-width: 900px;
	margin: 40px auto;
}

	section span{
		background: #C09A7F;
		padding: 4px;
		border-radius: 0 5px 0 0;
		color: #eee;
		font-size: 12px;
	}

	.section{
		display: table;
		width: 100%;
	}

		.section .content{
			display: table-row;
			width: 100%;
		}
		.section .box{
			display: table-cell;
			padding: 10px;
			width:31.3333%;
		}
			.section .box:nth-child(1){
				background: #eee;
				border: 5px solid #C09A7F;
			}
			.section .box:nth-child(3){
				border-radius: 0 0 10px 0;
			}
			.section .box:hover{
				background: #ddd;
			}
			.section .box h3{
				padding: 10px;
				font-size: 18px;
				font-weight: bold;
			}
			.section .box p{
				padding: 10px;
				line-height: 1.5em;
			}
			.section .box img{
				width:100%;
				max-width: 100%;
				height: auto;
				border-radius: 10px;
			}
Kode diatas untuk mempercantik bagian How I Work

Styling Bagian Gallery

/* --- Gallery ------------------------- */

.gallery{
	display: table;
	width: 900px;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.gallery .box{
	display: table-cell;
	vertical-align: top;
	padding: 5px;
}

.gallery .box img{
	width:100%;
	height: auto;
	border-radius: 5px;
	border: 2px solid #eee;
}
.gallery .box img:hover{
	opacity: .8;
}
Kode diatas untuk mempercantik bagian Gallery

Styling Bagian Testimonial

.testimonial{
	position: relative;
	width: 900px;
	max-width: 900px;
	text-align: center;
	margin: 20px auto;
	background: #C09A7F;
	color: #fff;
}
	.testimonial span{
		position: absolute;
		right: 0;
		bottom:0;
		padding: 5px;
		background: rgba(0, 38, 51, .5);
		font-size: 11px;
	}
	.testimonial h3{
		margin: 50px;
		padding: 50px;
		display: block;
		line-height: 2em;
	}

		.testimonial h3:before{
			content: " \201C ";
		}
		.testimonial h3:after{
			content: " \201D ";
		}
Kode diatas untuk mempercantik bagian Testimonial

Styling Bagian Footer

footer{
	border-top: 3px solid #ddd;
	padding: 30px auto;
	display: table;
	width: 900px;
	max-width: 900px;
	margin: 40px auto;
	font-size: 12px;
}
	footer a{
		text-decoration: none;
		color: #666;
		padding: 2px;
		border-bottom: 1px solid #ddd;
	}
		footer a:hover{
			background: #ddd;
		}

	footer .content{
		width: 100%;
		display: table-row;
		vertical-align: center;
	}
		footer .box{
			display: table-cell;
			padding: 10px;
			width: 50%;
		}

			footer .box:nth-child(2){
				text-align: right;
			}
Kode diatas untuk mempercantik bagian Footer

Membuat Menjadi Responsive

@media (max-width: 860px){

	section,
	.gallery,
	.testimonial,
	footer{
		width: 90%;
	}
	.gallery{
		padding: 0;
	}
	.section .box:nth-child(1){
		border-radius: 0;
	}

	footer{
		text-align: center;
	}
	footer .box{
		display: block;
		width: 90%;
	}

}
@media (max-width: 640px){
	#banner{
		height: 101%;
		min-height: 350px;
	}
	#logo h1{
		font-size: 75px;
	}

	.gallery .box{
		/*display: block;*/
	}

	.section .box{
		margin:auto;
		display: block;
		width: 80%;
		padding: 5%;
		border-radius: 0;
	}
	footer .box:nth-child(2){
		text-align: center;
		width: 90%;
	}
	footer .box strong{
		display: block;
	}
}
Kode diatas untuk membuat layout menjadi Responsive

Setelah tampilan oke, kita tambahkan animasi pada header agar headernya bisa bergerak perlahan, disini kita menggunakan jQuery

(function(window, $) {

	window.requestAnimFrame = (function(){
	  return  window.requestAnimationFrame       ||
	          window.webkitRequestAnimationFrame ||
	          window.mozRequestAnimationFrame    ||
	          function( callback ){
	            window.setTimeout(callback, 1000 / 60);
	          };
	})();

	var y = 0,
		f = 0.45;

	function move() {
		y -= f;
		$('#banner').css('background-position', 'center ' + y + 'px');
	  requestAnimationFrame(move);
	}
	move();

})(window, jQuery);
Kode diatas untuk membuat header bisa bergerak

Sedangkan untuk gallery agar bisa muncul popup kita tambahkan script seperti berikut, script itu didapat didokumentasi dari plugin nya.

$(document).ready(function() {
  $('.gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
	enabled: true,
	navigateByImgClick: true,
	tPrev: 'Previous (Left arrow key)', // title for left button
	tNext: 'Next (Right arrow key)', // title for right button
	tCounter: '%curr% of %total%', // markup of counter
	preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>' + item.el.attr('desc') +'</small>';
      }
    }

  });
});
Kode diatas untuk membuat popup berfungsi dengan baik

Selesai..

Demo (on desktop & mobile) | Download Code

Sekian tutorial kali ini, semoga bermanfaat untuk anda semua, jika ada yang ingin ditanyakan silahkan tuliskan pada bagian komentar.

salam web design indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

49 thoughts on “Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery

  1. febriyant_ says:

    Wah perlu dicoba nih
    sekalian trial untuk bikin web responsive ..
    padahal saya udah lama main di web programing tapi ragu untuk coba bikin web responsive

  2. Aswin says:

    kang utk download jQuery nya tuh yg mana yg d pilih ?

  3. Radit says:

    salam kenal mas, bang, admin.. :) saya senang bisa berkunjung ke web ini.. sangat bermanfaat.. :D saya mohon ijin untuk mendownload, memakai, dan mempublikasikan hasil download dari web ini boleh yaa..??
    hehe…

    Terima kasih banyak admin.. :)
    salam kenal dari Malang, Jatim.

  4. Mushlihin says:

    Kalau pesan theme sama agan berpa biayaynya yah?. bisa mojok YM id “hilyaku” :)

  5. gerald says:

    om bos kalau header nya nya kan bwah ke atas, kalau dari kiri ke kanan, bisa ga ya om ?

  6. Paryakun Vion says:

    Hello, klo buatnya lewat dreamweaver gmana?

  7. Deni Agriadi says:

    Semoga penulis mendapat pahala yg tak henti2,,
    ilmunya bermanfaat :)

  8. emangjos says:

    Artikel yang sangat menarik, Web anda benar-benar bermanfaat buat pengunjung

  9. suka website says:

    pak ini ga ada halaman admins toh ? biar bisa update . ga cnguprek lagi klo update

  10. Firman Kusnandi says:

    terimakasih sekali web ini telah membantu dalam tugas besar pemrograman web saya :)

  11. Min CSS nya letakin dimana? DIbawah HTML code kah? Pas dicoba CSS nya gak jalan. Sori masih nyubi soalnya~

  12. hendhend says:

    master.. udah sy coba bikin sama persis ky tutornya.. tp untuk memunculkan popup knp egk berhasil ya..??

  13. Youke says:

    Nice tutorial gan. Keren :)

  14. Karimunjawa says:

    keren banget nih tutornya gan :D
    bahkan orang awam seperti saya bisa faham

  15. […] Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery […]

  16. su jarwo says:

    Gan saya mau cari orang yang bisa atur atur blog agar bagus seperti ini harus cari orang seperti apa ya trim

  17. raden papang says:

    om,, tolong donk,, bagi ilmu tutorial membuat template css html5/template responsive yang bisa untuk dijual ke website yang khusus menjual template2 premium gt,, itu aja saran, mksh utk ilmunya

    • Kan ini tutorialnya sudah, kalau untuk bisa di jual silahkan di kembangkan sendiri dan tempat jualnya biasanya menetapkan standar tersendiri, harus mereka seleksi. Silahkan lihat-lihat template yang sudah masuk disana seperti apa, lalu coba buat sendiri.

  18. […] otomatis bisa sesuai dengan ukuran layar dan fungsi pada perangkat apapun. Berikut ini contoh cara Membuat Website Portfolio Responsive dengan CSS3 dan Jquery yang bisa anda […]

  19. […] beberapa tema wordpress gratis yang bisa anda unduh untuk keperluan profil perusahaan anda, portfolio anda dan bisa juga digunakan untuk website […]

  20. […] Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery […]

  21. christantio says:

    Mas request tutorial yang bikin seperti ini mas , kalau boleh hehe
    http://www.nart-furni.co/index.html
    Terimakasih banyak Mas

  22. Hanz says:

    Mau nanya gan, ane mau edit template blogger, cara biar homenya snippetnya dikit gimana ya ? Dan biar gambarnya di seblah kiri ?. Dan kalo mau widget ( iklan ) muncul di mobile gimana ?

  23. […] 2.0 dimana muncul berbagai website yang semakin dinamis dimana semua orang bisa membuat website dan halaman profil tertentu hanya dari satu website seperti Blogspot, WordPress, MySpace, Tumblr dan tidak lupa ada […]

  24. Afi says:

    itu udh termasuk keresponsiveannya (Mobile Friendly ) apa enggak gan

  25. wahh baru liat code nya sdh pusing kepala saya pak

  26. […] 2.0 dimana muncul berbagai website yang semakin dinamis dimana semua orang bisa membuat website dan halaman profil tertentu hanya dari satu website seperti Blogspot, WordPress, MySpace, Tumblr dan tidak lupa ada […]

  27. aku belum bisa nguasai jquery gan ,

  28. Andika says:

    Makasi Gan. Sangat Membantu !!! Salam

  29. fauziahesice says:

    Terimakasih info tutorialnya. Kebetulan saya lagi dapat project membuat web portfolio. Semoga ilmunya bermanfaat

  30. Nuhum says:

    JEMPOL BUAT ANDA

  31. bagus ni artikelnya, jadi buat penambah ilmu untuk mendesain web saya
    thanks ya….

  32. terima kasih mantap ni.izin download code ny

  33. kubil says:

    ijin download yah master :)

  34. Putri Siallagan says:

    I LOVE YOU, really love youuuuuu

  35. belum nguasai html5 gan

  36. izin Download lagi gan… hehehe

  37. mister D says:

    bang/mas/gan hehe
    izin download yaa :)
    dan juga saya izin untuk di oprek hasil karyanya, dan pasti untuk di jadikan web portofolio saya :)
    izin yaa :)

  38. yulianahtb says:

    mau nanya, aku kan buat tampilan loginpage dengan layout header,right bar,left bar,sama footer. terus di leftbar aku buat gambar slideshow gitu. aku udah masukkin skrip responsive template sama skrip responsive slidernya. pas aku tes responsive, hasilnya. slidernya dia ngeresponsive cuma menu form login sama footernya ketimpa sama slider. terus headernya juga keliatan setengah gitu, hasilnya gak bagus. tapi kalo gak diresponsive dia bagus. gimana yaa?plis komeeeen:v

  39. T says:

    Mas, bisa dijadiin link demo gitu gimana caranya mas?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development