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 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">© 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..
Sekian tutorial kali ini, semoga bermanfaat untuk anda semua, jika ada yang ingin ditanyakan silahkan tuliskan pada bagian komentar.
salam web design indonesia
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
kang utk download jQuery nya tuh yg mana yg d pilih ?
1.9 boleh
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.
boleh saja dengan mencantumkan sumber
Kalau pesan theme sama agan berpa biayaynya yah?. bisa mojok YM id “hilyaku” :)
om bos kalau header nya nya kan bwah ke atas, kalau dari kiri ke kanan, bisa ga ya om ?
bisa aja, coba diotak-atik sendiri yak :)
Hello, klo buatnya lewat dreamweaver gmana?
Semoga penulis mendapat pahala yg tak henti2,,
ilmunya bermanfaat :)
aamiin….
Artikel yang sangat menarik, Web anda benar-benar bermanfaat buat pengunjung
pak ini ga ada halaman admins toh ? biar bisa update . ga cnguprek lagi klo update
Silahkan dibuat sendiri ya halaman adminnya, ini cuma tutorial desain nya saja :)
terimakasih sekali web ini telah membantu dalam tugas besar pemrograman web saya :)
Min CSS nya letakin dimana? DIbawah HTML code kah? Pas dicoba CSS nya gak jalan. Sori masih nyubi soalnya~
master.. udah sy coba bikin sama persis ky tutornya.. tp untuk memunculkan popup knp egk berhasil ya..??
Nice tutorial gan. Keren :)
keren banget nih tutornya gan :D
bahkan orang awam seperti saya bisa faham
[…] Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery […]
Gan saya mau cari orang yang bisa atur atur blog agar bagus seperti ini harus cari orang seperti apa ya trim
Seperti saya mungkin :D haha
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.
[…] 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 […]
[…] beberapa tema wordpress gratis yang bisa anda unduh untuk keperluan profil perusahaan anda, portfolio anda dan bisa juga digunakan untuk website […]
[…] Tutorial Membuat Web Portfolio Responsive Dengan HTML5, CSS3 dan Jquery […]
Mas request tutorial yang bikin seperti ini mas , kalau boleh hehe
http://www.nart-furni.co/index.html
Terimakasih banyak Mas
Yang seperti itu gimana mksdnya ya?
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 ?
Mohon maaf, tidak familiar dengan blogspot(blogger).
[…] 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 […]
itu udh termasuk keresponsiveannya (Mobile Friendly ) apa enggak gan
wahh baru liat code nya sdh pusing kepala saya pak
[…] 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 […]
aku belum bisa nguasai jquery gan ,
Makasi Gan. Sangat Membantu !!! Salam
Terimakasih info tutorialnya. Kebetulan saya lagi dapat project membuat web portfolio. Semoga ilmunya bermanfaat
JEMPOL BUAT ANDA
bagus ni artikelnya, jadi buat penambah ilmu untuk mendesain web saya
thanks ya….
terima kasih mantap ni.izin download code ny
ijin download yah master :)
I LOVE YOU, really love youuuuuu
belum nguasai html5 gan
izin Download lagi gan… hehehe
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 :)
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
Pastikan Anda menulis kode html dan css nya dengan benar. Perhatikan float dan z-index
Mas, bisa dijadiin link demo gitu gimana caranya mas?
Jika tugas seorang web desain sudah selesai dan ingin di lanjutkan oleh seorang web programer apa yang diberi seorang web desainer ke seorang web programer.
Biasanya desain dalam bentuk HTML, CSS dan JS jika memang ada.
cara bikin gambar bergerak step by step dong gan
ko gambar yang galeri nya ga responsive gan ?
untuk video tutorial nya ada ga yaa ?