Skip to main content
Pelajar Koding

follow us

Rahasia Menjadi Web Developer Yang Sukses Dan Kaya !


Semakin lama, perkembangan web ketika ini sudah sangat pesat ! Tak cuman web yang bertambah banyak, namun juga web developer kali ini sudah sangat aneka macam ditemukan. Anda tinggal tulis di google "jasa pembuatan web" maka akan muncul sangat aneka macam jasa yang memperlihatkan pembuatan web.

Nah apakah Anda juga termasuk dalam web developer ? Tentu Anda harus memperhatikan banyak hal yang akan membuat Anda akan kalah dengan orang lain. Anda juga harus mempunyai trik-trik tertentu biar menjadi yang terbaik dari orang lain ! Seperti apa triknya ? Yuk eksklusif saja :

1. Perhatikan Desain !

Desain yaitu hal yang sangat-sangat penting dalam pembuatan web. Karena apa yang pertama kali dilihat client yaitu desain. Maka dari itu saya menyarankan Anda untuk berguru desain web yang baik biar orang lain juga bisa menilai bahwa desain Anda yaitu desain yang menarik ! Nah kemudian bagaimana caranya untuk membuat desain web yang menarik ? Ini ia :

- Pertama, sebelum Anda menjadi desainer web yang hebat, awali dengan berguru desain MINIMALIS pada website. Seperti apa desain minimalis itu ? Ini ia tutorialnya

1.1 Mendesain Minimalis Pada Website

Sebelum kita mulai, pastikan kita sudah mempunyai PHOTOSHOP. Jika belum, sebaiknya Anda d0wnl0ad dulu di internet. Jika sudah, langkah selanjutnya yaitu Anda mend0wnl0ad file-file berikut sebagai pendukung dalam pembuatan web desain minimalis.
File pendukung photoshop :  (wajib d0wnl0ad)
http://www.mediafire.com/file/zk7jjcss6u2p7w3/simpel-web-design-resource.zip

Install Action

Pertama-tama kita akan menginstall 2 buah file, satu untuk 960.gs dan pattern dari subtlepattern. Setelah anda d0wnl0ad file resource, didalamnya terdapat 2 file yang bersangkutan, buka file tersebut dengan photoshop untuk menginstallnya (atau drag and drop ke jendela Photoshop).
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Mempersiapkan Canvas Grid

Kita akan memakai sistem grid dari 960.gs sebagai pola dalam proses pendesaian web yang akan kita kerjakan. Untuk itu dalam jendela action photoshop, Anda akan menemukan folder 960_GRIDS, klik pada action 12-Column-Grid kemudian klik icon “play” untuk menjalankan action.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Action ini akan membuat grid sistem 12 kolom lengkap dengan garis guides. Canvas yang dibentuk tidak cukup tinggi untuk desain web yang akan kita buat, jadi Klik sajian image > image size. Kita akan menambah tinggi dari canvas yang kita buat.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Hilangkan tanda Checklist pada “Constrain Proportion” dan Ubah ukuran tinggi menjadi 1100px klik ok untuk mulai merubah ukuran canvas.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Menyiapkan background

Klik dua kali pada layer background, sebuah obrolan akan muncul mengkonfirmasi untuk mengconvert background ini menjadi layer, beri nama background dan klik ok.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Kita akan menambahkan pattern pada layer background ini, Klik icon “Add Layer Styles”, kemudian pilih “Pattern Overlay…” Pilih pattern dengan nama “Groove Paper” (akan ada di item pattern paling akhir). Klik Ok untuk menutup obrolan Style dan kini anda mempunyai background dengan pattern halus.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Membuat Logo

Selanjutnya kita akan membuat logo “Simpel”. Klik Ellipse Tool, kemudian buatlah bundar kecil menyerupai berikut (kira-kira satu grid) dengan warna #69ccca dan ubah nama layer menjadi “logo” (double click nama layer untuk merubah nama layer):
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Aktifkan “Horizontal Type Tool (T)” ubah font menjadi “Museo Sans” dengan ukuran sedikit lebih besar dari bundar yang dibentuk sebelumnya dan posisikan di tengah bundar menyerupai pada gambar.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Klik kanan layer “S” kemudian pilih Convert to shape.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Pindah ke Tab Paths kemudian klik layer yang ada (S Vector Mask), dan tekan kombinasi tombol Ctrl+C untuk mengcopy shape.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Klik layer pada “Layer Mask Thumbnail” pada layer “Logo”, kemudian tekan tombol CTRL+V untuk mem-paste shape. kemudian Klik icon “Substract from shape area”. Sekarang anda sanggup menghapus layer “S” alasannya tidak dibutuhkan lagi
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Klik pada layer logo, klik icon “Add layer style” kemudian tambahkan “Gradient Overlay”, atur optionnya menyerupai berikut :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan juga sedikit Inner shadow :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Teknik ini membuat icon yang kita buat “resizable” tanpa membuat icon pecah. Tambahkan teks “impel”(font:Museo Slab; color:#69CCCA, size:48px) dan “Web Development Team” (Font: Georgia, style: Italic, warna #69CCCA, size:12px) atur posisinya menyerupai berikut.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Copy juga layer style yang ada pada layer logo dan paste pada “impel” dan “Web Development Team”

Membuat menu

Kita tambahkan sajian utama untuk web kita, sajian ini sederhana saja, hanyalah sederet teks biasa. buat sajian memakai “Horizontal Type Tool (Tool)” atur warnanya menjadi #69CCCA, size:16px. Ketikkan “Home Blog Contact us” dan atur posisinya menyerupai berikut.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Membuat area Konten Utama

Tahap selanjutnya kita akan membuat background untuk Konten Utama. Dengan memakai “Rectangle Tool (U)” buatlah sebuah persegi panjang dengan lebar 960px (dari garis guide terawal sampai terakhir) untuk tinggi disesuaikan, Ubah nama layer menjadi “Konten Utama”.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan layer style stroke dengan warna #e0e0e0, atur optionsnya menyerupai berikut
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan juga drop shadow dengan setting menyerupai berikut:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !


Membuat pattern untuk ornamen

Untuk mempercantik area konten utama ini, kita akan mengatakan sedikit ornamen sederhana. Buat file gres (Ctrl+N) buat ukuran canvas menjadi 200px*30px.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Aktifkan “Rectangle Tool (U)” buat sebuah persegi panjang dengan ukuran 50px dan tinggi 30px. Buat 3 persegi panjang lagi dan susun secara mendatar sehingga memenuhi seluruh canvas.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Ubah warna masing-masing persegi panjang dengan warna-warna berikut : #88CD50, #F4ED47, #E7913A dan #6BCFCD.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Terakhir kita akan membuat canvas ini menjadi pattern siap pakai, pertama-tama seleksi semua persegi panjang yang kita buat (tekan CTRL dan klik pada layer lain untuk multiple selection) tekan kombinasi tombol CTRL+E untuk menggabungkan Layer.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Terakhir Klik sajian “Edit > Define Pattern”, beri nama “Colorful Stripe”.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Anda bisa menutup dokumen ini alasannya sudah tidak diharapkan lagi, atau save jikalau anda memerlukannya.

Menambahkan Ornamen/Stripe

Kembali aktifkan window desain web kita sebelumnya, Untuk menambahkan ornamen, buat persegi panjang dengan “Rectangle Tool (U)” menyerupai gambar berikut :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Pastikan layer persegi ini tepat berada di atas layer “Konten Utama”, Klik kanan pada layer tersebut kemudian pilih “Create Clipping Mask” atur posisinya menyerupai berikut :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Klik icon “Add Layer Styles” kemudian pilih “Pattern Overlay”, pilih pattern yang kita buat sebelumnya (Pattern paling akhir-biasanya).
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Menyiapkan background untuk footer

Buat persegi panjang dan atur posisinya menyerupai berikut, pastikan layer ini berada di atas layer “Konten Utama” kemudian buat clipping mask menyerupai pada langkah sebelumnya :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan “Pattern Overlay” dengan pattern “Chruch”.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Kita akan memodifikasi bab tengah dari persegi panjang. Aktifkan “Add Anchor Point Tool” tambahkan tiga buah point tepat di tengah-tengah menyerupai berikut :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Aktifkan “Direct Select Tool” kemudian tarik point yang di tengah sedikit ke bawah sehingga membentuk segi tiga. Secara default bentuk shape menjadi lengkung, untuk menghilangkan lengkungan tersebut, aktifkan “Convert Point Tool”, kemudian klik pada tiga point tersebut.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan Style Inner Shadow, atur optionsnya menyerupai berikut :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Mengisi Konten

Selanjutnya kita akan mengisi area konten ini dengan beberapa element yakni, Heading, Fitur-fitur, Slider dan Testimoni/Quote.

Heading

Tambahkan teks heading dengan font:”Museo”, warna #248886, ukuran font: 26px. Ketikkan “We are a professional web developer & web designer team, and here is what we can do for you” (atau gunakan teks sendiri), buat rata tengah dan atur posisinya menyerupai berikut:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Fitur

Kita tambahkan 3 fitur, lebar dari masing-masing fitur yaitu 4 Grid (jadi pastikan konten untuk tiap fitur tidak melebihi 4 grid). Tambahkan 3 icon yang disertakan dalam file resource, atur posisinya menyerupai berikut:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan judul fitur “Unique & Elegance Design”, “HTML5 & CSS3 Templating”, dan “WordPress Theme Development”. Atur font menjadi “Museo”, warna #248886 dan ukuran 16px.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan teks deskripsi singkat, anda sanggup memakai deskripsi anda sendiri atau deskripsi acak menyerupai : “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. atur posisinya menyerupai berikut, dan atur font-nya menjadi: “arial”, warna:#555555, ukuran:11px :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Kita tambahkan state ketika salah satu fitur berada dalam posisi hover, dengan memakai Ellipse tools buatlah bundar dengan ukurang 4 grid (tekan SHIFT ketika membuat bundar untuk membuat bundar yang proposional). Ubah warnanya menjadi #B6FAF9 dan atur posisinya di salah satu fitur sebagai background.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Membuat Bayangan Pemisah

Garis pemisah yang akan kita tambahkan berupa shadow/bayangan halus. Untuk membuatnya pertama-tama buat layer baru, beri nama “shadow-separator”. Aktifkan Brush Tool, pastikan warnanya hitam, Klik kanan pada canvas dan ubah ukuran master diameter mejadi 700px, pilih type “Soft Round 27px”.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Klik pada canvas, tepat ditengah-tengah. Aktifkan “Marque selection Tool”, buat seleksi menutup 3/4 bundar kemudian tekan tombol delete.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Dengan memakai “Move Tool (V)”, resize shadow tersebut menjadi menyerupai berikut dan ubah nilai opacity menjadi 50%.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Slider

Slider ini akan menampilkan Slideshow (bisa diisi dengan screenshot-screenshot project yang telah dikerjakan). Tambahkan Judul “Our latest projects”, atur ukuran dan warnanya sesuai dengan heading yang kita buat sebelumnya.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Buat sebuah persegi panjang dengan lebar 6 Grid dan tinggi kira-kira 200px dengan Rectangle Tool
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan beberapa style menyerupai gambar berikut:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Testimoni/Quote

Untuk Testimoni kita akan menampilkan testimoni-testimoni dari client yang telah dilayani. Judul dengan ukuran sama dengan Heading “What they say”.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan, satu buah quote atau gunakan teks acak “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies”. Ubah font menjadi :Georgia, style:italic, color #555, size:20px atur posisinya menyerupai berikut.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Footer

Untuk bab footer, kita akan menambahkan logo beserta alamat kantor, dan di sebelah kanan kita tambahkan sajian lagi. Copy layer “logo” dan teks “imple”, buang Gradient overlay (dengan cara di unchecklist atau di drag ke tong sampah di jendela layer), ubah warnanya menjadi #A7A7A7 dan perkecil ukurannya sedikit.
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan teks alamat dengan font:arial, size:11px, color:#a7a7a7 dan atur posisinya menyerupai berikut:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !
Tambahkan sajian footer dan atur posisinya di sebelah kanan :
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Mengorganisasi Layer

Jika anda tidak melaksanakan organisasi layer, mungkin hal ini tidak problem bagi anda, namun bagaimana jikalau anda bekerja dengan team dan bukan anda yang melaksanakan proses slicing? mereka akan kebingungan dengan layer yang acak-acakan. Untuk itu, selalu organisasi layer anda sesuai dengan bagian-bagian yang ada dengan memasukkannya ke dalam folder/set yang bersangkutan.
Klik icon “Create a New Set” (icon bergambar folder yang terdapat di bawah layer window) untuk membuat folder kemudian klik dan drag tiap-tiap layer yang bersangkutan pada folder yang sesuai.
Berikut ini yaitu organisasi folder yang saya lakukan:
 perkembangan web ketika ini sudah sangat pesat  RAHASIA MENJADI WEB DEVELOPER YANG SUKSES DAN KAYA !

Finising

Jika anda belum menyimpan pekerjaan anda, segera save. Lakukan penyimpanan secara terpola untuk menghindari hal-hal yang tidak diinginkan mengingat listrik di negara kita sering idup mati :D. Berikut ini link d0wnl0ad file PSD dari apa yang anda kerjakan di atas.

1.2 Contoh Mendesain Portofolio Pada Website 

 Nah, portofolio ini yaitu hal yang sangat penting. Walaupun bergotong-royong Anda tidak perlu membuat portofolio yang terlihat wah, tapi yang terpenting yaitu isi portofolio Anda itu sendiri. Ok, tapi disini saya tidak membahas mengenai bagaimana cara membuat isi portofilio yang baik, tapi disini saya akan mencoba menjelaskan bagaimana cara mendesain portofolio di website biar terlihat indah serta yummy dibaca dan responsif.

Sebelum memulai sebaiknya kita mengetahui terlebih dahulu apa yang akan kita buat. Berikut ini yaitu contoh portfolio yang akan kita buat – DEMO
Ingredients
Seperti layaknya memasak, membuat website juga perlu bahan-bahan, berikut ini materi yang kita perlukan, alasannya 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 HTML

Selanjutnya kita eksklusif membuat struktur HTML yang digunakan.
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 Konten Website, disini kita berguru memakai fungsi css display: table , table-row, dan table-cell untuk membuat kolom yang tingginya rata di bab class .box, hampir menyerupai 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 bab How I Work
Membuat Bagian Gallary, bab gallery ini diubahsuaikan 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>
 
 
 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>
 

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

Struktur CSS

Styling bab 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;  }
 
 
 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;    }
 
 
 
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; }
 
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 ";   }
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;    }
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;  } }


Setelah tampilan oke, kita tambahkan animasi pada header biar headernya bisa bergerak perlahan, disini kita memakai 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);


Sedangkan untuk gallery biar bisa muncul popup kita tambahkan script menyerupai 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>';       }     }    }); });


Selesai .

Okai, diatas yaitu salah satu contoh pembuatan halaman portofolio yang terbilang cukup baik sebagai landasan untuk sukses !

1.3 Inti dalam desain website Anda biar terlihat profesional !

Sebenarnya dalam mendesain web itu tidak terlalu sulit Anda hanya butuh waktu untuk berpikir bagaimana desain yang benar-benar yummy dilihat serta responsif. Anda bisa mengambil desain dari sana maupun dari sini, yang saya maksudkan yaitu Anda bisa mencari pandangan gres desain dari website-website lain kemudian Anda tuangkan menjadi satu desain di website Anda. Maka dari itu perlu kesabaran dan terus mencoba biar mendapat desain yang sungguh yummy dilihat. Lalu apa patokannya  ? patokannya yaitu mata Anda sendiri. Mata Anda sendiri yang menilai apakah itu sudah baik atau bukan. Sepengelaman saya sebagai admin komputer67 ya saya juga pernah mendesain2 dan hal yang paling penting hanyalah bersabar untuk mendapat desain yang sempurna. Saya sendiri pun juga bukan orang desain. Tapi yang terpenting yaitu Anda bisa membuat tampilan yang bisa dinikmati mata Anda sendiri yang secara otomatis niscaya juga bisa dinikmati oleh orang lain.


2. Belajarlah Bahasa Pemrograman Web !

 

Belajar bahasa pemrograman web itu sangat penting. Jelas dong web developer yang belum sukses aja sudah niscaya bisa pemrograman web, apalagi yang sukses dan kaya raya ? hehe,, sepakat tapi tanpa panjang lebar lagi, eksklusif saja di postingan ini Anda akan dijelaskan secara rinci bagaimana proses yang benar dalam berguru bahasa pemrograman disertai EBOOk lengkap dari HTML, JAVASCRIPT, PHP, SERTA FRAMEWORK2NYA JUGA..
Yuk eksklusif saja masuk kesini : 
aciknadzirah.blogspot.com/search?q=cara-membuat-website-profesional


3. Pikirkan Ide Menarik !

 

Nah inilah yang menjadi kunci menjadi WEB DEVELOPER YANG SUKSES DAN KAYA. Mengapa ? Coba Anda lihat menyerupai facebook, instagram, google, semua yaitu orang-orang yang mempunyai pandangan gres yang unik serta menarik ! Jika Anda ingin menjadi web developer yang sukses dan kaya ya cobalah pikirkan sejenak pandangan gres yang belum pernah ada sebelumnya ! Di dunia itu tidak ada yang sama jadi tak teruslah berpikir pandangan gres yang benar-benar membuat orang terkagum-kagum. 
CONTOH IDE MENARIK :  
1. Startup di Bidang Biologi
2. Startup di Bidang Energi
3. Kecerdasan Buatan Yang Terintergrasi Dengan Website
4.  Membuat Sebuah Website Yang Mampu Mempertemukan Pasien Dengan Dokter Secara Langsung ( Live Chat)
5. Bagaimana Caranya Agar Pengguna Website Bisa Menggunakan Matanya Untuk Memilih Menu.
6. dll

Semua ide-ide tersebut hanya didapat dari hal-hal yang mustahil dilakukan. Tapi ingatlah semuanya akan terjadi hanya JIKA ada orang yang mau berpikir keras untuk melaksanakan hal tesebut. Lalu darimana datangnya ide-ide menarik lainnya ? Bagaimana bisa kita membuat website dengan pandangan gres yang sangat menarik serta cara kerja yang profesional ? Yuk baca nomor 4


4. Bekerja Sama Dengan Bidang Lain !

 

Manusia tidak sanggup hidup sendirian. Nah dalam kasus ini, Anda hanya akan berhasil sekian persen saja bila Anda hanya mengandalkan kemampuan Anda. Mengapa ? Karena orang IT Tidak bisa bekerja sendirian. Kaprikornus intinya, Anda harus mau bekerja sama dengan orang yang bekerja di bidang lain. Contoh saja Anda ingin membuat sistem kesehatan dimana bisa mendeteksi penyakit seseorang. Lalu bagaimana caranya ? Ya terang Anda harus bekerja sama juga dengan seorang dokter ! Bila Anda ingin membuat web yag bisa mendesain bangunan, maka Anda memerlukan arsitek. Betul ? Ya itulah yang saya maksud disini.

5. Pelajari Managemen Proyek 

 


Suatu pengembangan aplikasi merupakan suatu proyek yang harus di atur, direncanakan, dan dilakukan dengan baik. Dengan mempelajari administrasi proyek maka anda sanggup melaksanakan kerja sama dengan yang lain dalam menyebarkan aplikasi. Anda juga sanggup memperoleh efektifitas dan efisiensi waktu dalam menuntaskan suatu proyek.

6. Setelah Semuanya Siap, Saatnya Promosi ! 

  6.1 Promosi di Facebook
   6.1.1 Promosi Lewat Group
Inti dari promosi di Facebook itu yaitu SHARE DI GROUP. Dengan Anda share di group2, maka gosip yang Anda berikan akan cepat meluas alasannya 1 group bisa berisi lebih dari 1000 orang. Bahkan ada kan group yang isinya 100 rb. Lalu gimana jikalau kita ngeshare sebanyak 100x, artinya sudah ratusan ribu bahkan jutaan orang melihat apa yang Anda promosikan. 
    6.1.2 Promosi Lewat Ads
Bila Anda punya uang, pakai saja ads di facebook, itu sebagai jalan pintas Anda untuk promosi di facebook selain cara di atas. Serta bila Anda memakai ads di facebook ini sebaiknya Anda memakai video. Karena Video akan lebih powerfull untuk promosi.
6.2 Promosi di Instagram
Inti dari promosi di Instagram yaitu buat GAMBAR YANG MENARIK dulu... Karena dengan gambar yang menarik maka Anda akan lebih gampang menarik orang untuk ngefollow kita. Lalu bagaimana gambar yang menarik itu ? Anda bisa cari di google "instagram grid design" atau semacamnya, Anda bisa kreasikan sendiri dan bisa dibentuk sendiri. Kalau pengalaman dari admin komputer67 sih pakai corel aja biar lebih gampang dalam crop nya. Selanjutnya bila Anda sudah mempunyai instagram yang menarik, langkah selanjutnya yaitu ngefollow orang banyak. Kalau saya ya 60 orang / jam. Lalu tunggu 2-3 hari bila orang tersebut tidak follback, eksklusif saja unfollow. 
Lalu bagaimana caranya biar kita bisa tau orang yang tidak follback ke kita ? Yaitu dengan aplikasi di android yang berjulukan "Follow Meter" Bisa Anda cari sendiri di playstore, saya malas nulisnya hehehehe....
6.3 Promosi di Twitter
Sebenarnya untuk promosi di twitter ini saya belum pernah... hahahah, tapi pada dasarnya Anda tetap harus ngtweet secara rutin ! Tekniknya sama juga menyerupai di Instagram, yaitu follow orang banyak kemudian bila orang tersebut tidak follback, eksklusif saja unfollow dia. Praktis kan ? Itu yaitu cara yang paling benar. Jangan pernah memakai auto follower atau semacamnya, alasannya itu akan merusak produk Anda sendiri. 


7. Jam Dan Hari Yang Tepat Untuk Promosi di Instagram

Langsung saja nih ya, saya tau cara ini juga barusan, tapi ini jujur KEREN banget ini.
Oke Anda penasarankan ? Yuk eksklusif saja :

1. Pertama jikalau Anda ingin melihat hari apa yang tepat untuk promosi di Instagram Anda maka cara yang paling tepat ya dengan mengecek history2 orang2 yang telah like di instagram Anda kapan mereka paling sering like, kapan mereka paling sering komen, serta jam berapa paling sering mereka like atau komen.  Jelas dong kita mustahil menghitung satu persatu, tapi untungnya kini sudah ada aplikasinya untuk menghitung OTOMATIS dan menghasilkan data yang sangat BERGUNA. Apa nama aplikasinya  ? ICONSQUARE

2. Sekarang masuk ke https://pro.iconosquare.com
3. Register menyerupai biasa kemudian masukan akun instagram Anda menyerupai biasa
4. Lalu masuk ke halaman iconsquare kemudian pilih analyze - Engagement

 5. Lalu scroll ke bawah, dan pilih tanggal serta like/komen/engagement
6. Nah contoh diatas yaitu contoh kotak yang berwarna merah agak tebal yaitu waktu yang paling tepat untuk post di Instagram !

bergotong-royong ada 1 trik lagi yaitu SEO, tapi akan kita bahas di post selanjutnya.Tetap stay di fanspage kami komputer67 !

8. Terimakasih. Semoga sukses !

sumber : http://www.tutorial-webdesign.com
http://www.ruangfreelance.com/12-langkah-jadi-web-developer/
http://www.ariona.net/

Anda akan tutup dengan quotes :
Success is a lousy teacher. It seduces smart people into thinking they can't lose.




Sumber http://komputer67.blogspot.com

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar