Berdasarkan banyaknya request dari teman yang ingin mengetahui bagaimana membuat website yang personal yang saya miliki ( bagi kalian yang belum tahu bisa cek websitenya dilink berikut https://archieananda.github.io/myweb/ ). maka sekarang akan saya jelaskan bagaimana membuatnya, agar kalian dapat bereksperimen nantinya dan membuat website personal sendiri yang lebih baik.
Persiapan.
1. text editor ( saya menggunakan notepad++ )
2. Bootstrap ( download )
3. font awesome ( download )
5. Photoshop ( cari sendiri )
6. image / foto yang digunakan untuk background nantinya
Persiapan selesai mari kita mulai :
terdapat beberapa tahapan dalam membuat website
1. Membuat folder
pertama kita buat folder untuk menampung file kita nantinya. buat folder dengan nama sesuka kalian, saya menamakan folder ini " Personal website "
Lalu buat folder css, files, font, images, js didalam folder tersebut.
lalu letakan file yang telah di download ( bootstrap, fontawesome ) tadi ke masing - masing folder.
2. Menentukan warna website
Salah satu komponen penting dalam design sebuah website adalah warna, kita tidak dapat memilih warna sembarangan dalam mendesign website tentukan warna yang akan kalian gunakan pada website kalian. normalnya selain warna netral ( hitam, putih ) sebuah website tidak boleh lebih dari 4 warna. banyak website yang dapat memudahkan kalian untuk memilih warna yang sesuai dengan keinginan kalian contohnya :
https://designschool.canva.com/blog/website-color-schemes/
https://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
3. Mengedit foto menjadi seperti poster
Salah satu komponen yang penting lainnya dari website yang akan kita buat adalah sebuah gambar / image background yang memasang foto diri kita yang berguna untuk memasarkan. untuk cara mengedit ini telah dijelaskan caranya dengan 3 langkah mudah pada artikel berikut :
http://archieananda.blogspot.co.id/2017/07/membuat-efek-poster-menggunakan.html
4. Membuat index.html
Buatlah sebuah file dengan nama index.html didalam folder "personal website" lalu ketikan kode berikut.
1: <!DOCTYPE html> 2: <html lang="en"> 3: <head> 4: <meta charset="utf-8"> 5: <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6: <meta name="viewport" content="width=device-width, initial-scale=1"> 7: <meta name="description" content=""> 8: <meta name="author" content=""> 9: <title>Lorem Ipsum</title> 10: <!-- Bootstrap --> 11: <link href="css/bootstrap.css" rel="stylesheet"> 12: <link href="css/style.css" rel="stylesheet"> 13: <link rel="stylesheet" href="css/font-awesome.min.css"> 14: <link rel="stylesheet" href="css/rssfeed.css"> <!-- bisa dilewati --> 15: <script src="js/bootstrap.js"></script> <!-- script untuk smooth scrooling --> 16: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17: <script> 18: $(document).ready(function(){ 19: // Add smooth scrolling to all links 20: $("a").on('click', function(event) { 21: // Make sure this.hash has a value before overriding default behavior 22: if (this.hash !== "") { 23: // Prevent default anchor click behavior 24: event.preventDefault(); 25: // Store hash 26: var hash = this.hash; 27: // Using jQuery's animate() method to add smooth page scroll 28: // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 29: $('html, body').animate({ 30: scrollTop: $(hash).offset().top 31: }, 800, function(){ 32: // Add hash (#) to URL when done scrolling (default click behavior) 33: window.location.hash = hash; 34: }); 35: } // End if 36: }); 37: }); 38: </script> 39: </head> 40: <body role="document"> 41: <div class="main"> 42: <br><br> 43: <div class="container"> 44: <div class="panel panel-primary"> 45: <div class="panel-heading">Note.</div> 46: <div class="panel-body"> 47: This personal web is still in progress, for detailed information please visit my 48: <a href="-- Link ke halaman linkdn anda --" target="_blank">linkedin profile</a> or 49: download my <a href="-- link ke file resume anda --" target="_blank"> résumé</a> 50: </div> 51: </div> 52: </div> 53: <section id="top" class="section"> 54: <div class="jumbotron"> 55: <div class="container"> 56: <div class="row"> 57: <div class="col-md-6 overlay"> <h1>Nama Anda</h1> 58: <hr> 59: <p> I was born in Jakarta.</p> 60: <p>I graduated from <a href="-- link ke website kampus / pendidikan terakhir anda --" target="_blank">mercubuana university </a> on 2015</p> 61: <p>I have a beautiful wife, and an amazing son</p> 62: <p>I am a full stack developer</p> 63: <p>I love motivate people through <a href="#blog" >blogging</a></p> 64: <p>I Have put some of my <a href="#previousworks">previous works</a> if you'd like to see</p> 65: <p>I love to improve my <a href="#">skills</a></p> 66: <p>I have many ways to get in <a href="#contact">touch</a></p> 67: <p>I have a more detailed <a href="-- link ke file resume anda --" target="_blank">résumé</a> if you're into that sort of thing.</p> 68: </div> 69: <div class="col-md-6"> </div> 70: </div> 71: </div> 72: </div> 73: </section> 74: <div class="none" style="clear:both"></div> 75: <section id="previousworks" class="section"> 76: <div class="section-header"> 77: <h2 class="section-title wow fadeIn" >Previous <span>Works</span></h2> 78: <p class="section-subtitle ">Here's some of my work</p> 79: <hr class="lines"> 80: </div> 81: <div class="container"> 82: <div class="row"> 83: <div class="col-xs-6 col-md-3 thumbnail"> 84: <a href="#top"> 85: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 86: Audi Charles Lieke 87: </a> 88: <p> Website anggota legislatif Sulawesi Selatan</p> 89: </div> 90: <div class="col-xs-6 col-md-3 thumbnail"> 91: <a href="#"> 92: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 93: Indikasi 94: </a> 95: <p> Website berita dengan input excel</p> 96: </div> 97: <div class="col-xs-6 col-md-3 thumbnail"> 98: <a href="#"> 99: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 100: CNTV 101: </a> 102: <p>Website stasiun TV</p> 103: </div> 104: <div class="col-xs-6 col-md-3 thumbnail"> 105: <a href="#"> 106: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 107: Inventory 108: </a> 109: <p> Aplikasi inventory </p> 110: </div> 111: <div class="col-xs-6 col-md-3 thumbnail"> 112: <a href="#"> 113: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 114: William Mobil 115: </a> 116: <p> Website jual beli mobil</p> 117: </div> 118: <div class="col-xs-6 col-md-3 thumbnail"> 119: <a href="#"> 120: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 121: Wartabuana 122: </a> 123: <p> Website berita online </p> 124: </div> 125: <div class="col-xs-6 col-md-3 thumbnail"> 126: <a href="#"> 127: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 128: Plasadana 129: </a> 130: <p> Website berita online </p> 131: </div> 132: <div class="col-xs-6 col-md-3 thumbnail"> 133: <a href="#"> 134: <img src="images/- nama imgae anda -" alt="audycharleslieke"> 135: Mobillaku 136: </a> 137: <p> Website jual beli mobil</p> 138: </div> 139: </div> 140: </div> 141: </section> 142: <section id="blog" class="section"> 143: <div class="section-header"> 144: <h2 class="section-title hitam" id="hitam" > Blog <span>Posts</span></h2> 145: <p class="section-subtitle ">Here's what i do besides code</p> 146: <hr class="lines"> 147: </div> 148: <div class="container"> 149: <div class="row"> 150: <div class="col-xs-12 col-md-12"> 151: <div id="blogpost"> 152: <script language="JavaScript" src="https://feed2js.org//feed2js.php?src=http%3A%2F%2Farchieananda.blogspot.com%2Ffeeds%2Fposts%2Fdefault&chan=y&num=10&desc=200&date=y&targ=y&utf=y&html=p" charset="UTF-8" type="text/javascript"></script> 153: </div> 154: </div> 155: </div> 156: </div> 157: </section> 158: <section id="contact" class="section"> 159: <div class="section-header"> 160: <h2 class="section-title wow fadeIn" >Get in <span>touch</span></h2> 161: <p class="section-subtitle ">Chill , i don't bite ! </p> 162: <hr class="lines"> 163: </div> 164: <div class="container"> 165: <div class="row"> 166: <div class="col-xs-6 col-md-2 thumbnail2"> 167: <a href="- link facebook anda -" target="_blank"> 168: <i class="fa fa-facebook-square fa-5x" aria-hidden="true"></i> 169: </a> 170: <p>Facebook</p> 171: </div> 172: <div class="col-xs-6 col-md-2 thumbnail2"> 173: <a href="" target="_blank"> 174: <i class="fa fa-twitter-square fa-5x" aria-hidden="true"></i> 175: </a> 176: <p>Twitter</p> 177: </div> 178: <div class="col-xs-6 col-md-2 thumbnail2"> 179: <a href="- link twitter anda -" target="_blank"> 180: <i class="fa fa-linkedin-square fa-5x" aria-hidden="true"></i> 181: </a> 182: <p>Linkedin</p> 183: </div> 184: <div class="col-xs-6 col-md-2 thumbnail2"> 185: <a href="- link linkedin anda -" target="_blank"> 186: <i class="fa fa-github fa-5x" aria-hidden="true"></i> 187: </a> 188: <p>Github</p> 189: </div> 190: <div class="col-xs-6 col-md-2 thumbnail2"> 191: <a href="mailto:- link github anda -?Subject=- Judul Email -" target="_blank"> 192: <i class="fa fa-envelope-square fa-5x" aria-hidden="true"></i> 193: </a> 194: <p>Email</p> 195: </div> 196: <div class="col-xs-6 col-md-2 thumbnail2"> 197: <a href="- alamat email anda -- alamat google+ anda -" target="_blank"> 198: <i class="fa fa-google-plus-square fa-5x" aria-hidden="true"></i> 199: </a> 200: <p>Google +</p> 201: </div> 202: </div> 203: </div> 204: </section> 205: </div> 206: 207: <script src="js/jquery.min.js"></script> 208: 209: <script src="js/bootstrap.min.js"></script> 210: </body> 211: </html>
Penjelasan tentang kegunaan script telah ditulis pada script index.html, silakan anda lakukan modifikasi disesuaikan dengan keinginan anda.