Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini di buat oleh Diki Alfarabi Hadi, Founder dari www.malasngoding.com. yang aktif menulis tutorial pemrograman di www.malasngoding.com. ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana. materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
DOWNLOAD
TUTORIAL FRAMEWORK BOOTSTRAP BAHASA INDONESIA Assalamualaikum wr wb. . Alhamdulillah akhirnya bisa berbagi sedikit pengetahuan, puji sukur kehadirat alloh SWT yg telah memberikan kesehatan dan ilmu yang begitu banyak yg tidak bisa kita pungkiri. Ebook ini saya persembahkan untuk ibu saya yang selalu sabar dan tak pernah letih mengurus dan mendorong saya untuk menjadi orang yang sukses [ meskipun sekarang belum sukses :p ]. Semoga ebook ini berguna bagi para newbi yang sedang ingin belajar framework bootstrap [ kalau master ga usah baca yah hehe ]. Sebagai sesama front end developer, saya akui bahwa framework seperti bootstrap ini sangat di butuhkan untuk masa masa sekarang ini, sebagai bukti akhir2 ini banyak loker front end developer dengan syarat salah satunya harus bisa framework. Kenapa harus memakai framework ?? ahhh pasti kalian sudah tau betapa bergunanya framework ketika sedang mendesain website.
UNTUK SIAPA EBOOK INI Ebook ini tentu untuk web desainer lebih tepatnya front end developer, [ masa ia untuk arsitek ] sudah ahh jangan becanda mulu. LISENSI EBOOK INI Silahkan jika bermanfaat di sebarluaskan dengan catatan “ tidak mengubah isi dari sebagian ataupun keseluruhan di ebook ini” mohon jangan menjadi plagiat copyright :D. Silahkan share dengan menyertakan link atau tidak mengubah isi sama sekali termasuk tentang penulis.
Selamat belajar 1
Ebook bootstrap bahasa indonesia | www.bungloon.com
TENTANG PENULIS Oia. . . sebelum belajar ada baiknya kalau kita kenalan yuck . .
Nama saya ABD HANNAN biasa di panggil justin bieber ehh salah maksudnya HANNAN, saya tinggal nya di wilayah jawa timur, tepatnya di kecamatan tambelangan kabupaten sampang madura. Kerjaan saya pengangguran hehe. . saya kerja freelance sebagai front end developer dan juga membuka jasa pembuatan website, oia. . saya juga bersedia loh kerja remote full time ataupun freelance sebagai front end developer, jadi jika saya di butuhkan untuk menyelesaikan proyek anda silahkan kontak saya yah. . [ promosi :p ]. Ebook ini sangat jauh dari kata sempurna, saya sangat terbuka jika ada KRITIK, SARAN ataupun pertanyaan mengenai ebook ini yang kurang di mengerti ataupun ada kesalahan. Silahkan feel free kontak saya melalui kontak di bawah ini. Email: [email protected] Facebook: www.facebook.com/hfatir1
TERIMA KASIH ATAS PERHATIANNYA DAN SELAMAT MENIKMATI
2
Ebook bootstrap bahasa indonesia | www.bungloon.com
1. Persiapan Langkah pertama untuk memulai adalah men download file framework bootstrap, download dimana di situs resminya di www.getbootstrap.com . dan langkah kedua adalah download jquery, download di situs resminya di www.jquery.com . yang sudah melakukan ini sebelumnya silahkan step ini di skipp aja. Langkah selanjutnya ialah menaruh file bootstrap dan jquery tadi di dalam folder. Jadi silahkan buat folder di [ saya disini mengunakan xampp ] silahkan disesuaikan saja ya dengan yang anda pakai. Buat folder baru di c:/xampp/htdocs/ dan kasih nama “belajar” . jadi urutannya jadi c:/xampp/htdocs/belajar Pada defaultnya susunan file bootstrap seperti ini .
Silahkan kalian pindah pindah / copy semua file ini kedalam folder “ belajar “ yang sudah di buat tadi. Dan untuk file jquery yang sudah di download tadi silahkan pindah juga kedalam folder “ js “ bawaan bootstrap tersebut dan rename menjadi “ jquery.js “ agar memudahkan pemanggilan nantinya, pada defaultnya nama jquery masih ada embel embel di belakangnya sesuai dengan versi yang anda download, jadi lebih baik rename aja menjadi “ jquery.js “ taruh di dalam folder /belajar/js/jquery.js .
3
Ebook bootstrap bahasa indonesia | www.bungloon.com
2. Memulai Silahkan buat file baru dengan editor kesayangan kalian [ disini saya menggunakan sublimetext2 free version ] simpan di folder c:/xampp/htdocs/belajar beri nama index.html jadi c:/xampp/htdocs/belajar/index.html
Oia . . di ebook ini saya tidak akan mejelaskan layaknya guru, saya hanya akan memberi tau contoh cara membuat ini itu nya dan dengan sedikit penjelasan, jadi silahkan di oprek oprek sendiri yah sesuai kebutuhan. Langkah pertama ialah membuat code awalan seperti biasa, silahkan ketikan kode di bawah ini.
belajar bootstrapPenjelasan : jadi standard dokumen pertama adalah seperti code di atas, please jangan buka karna tidak akan ada apa apa nya melainkan hanya ada title. Perhatikan code ini
code di atas adalah code agar desain kita responsive. Dan perlu di perhatikan pemanggilan bootstrap.js harus sesudah pemanggilan jquery.js , jadi jangan 4
Ebook bootstrap bahasa indonesia | www.bungloon.com
sekali kali memanggil file bootstrap.js terlebih dahulu sebelum jquery.js kalau javascript bootstrap ingin berjalan.
3. Container Container di bootstrap ada dua class, pertama .container container ini lebarnya tidak full kedua .container-fluid . container ini lebar nya full langsung ke code nya aja yah biar faham, saya juga bingung jelasinnya :p. Bootstrap Example
halaman pertama belajar bootstrap
hallo. . ini adalah halaman pertamaku menggunakan bootstrap
Coba code di atas modifikasi, yaitu class="container"> ubah mejadi class="container-fluid"> .
Sudah tau bedanya ?
5
Ebook bootstrap bahasa indonesia | www.bungloon.com
4. Column bootstrap Ini adalah hal penting dan hal yang sangat berguna dari framwork bootsrap itu sendiri. Bootstrap menggunakan sampai dengan 12 column . yaitu column 3 , column 4 , column 6 , column 8 , column 12 . Itu sih sudah standard lebar lebar yang biasanya kita gunakan saat desain website. Sebenarnya bisa saja kita gunakan column 1 , column 2 dst jika di butuhkan. Contoh lengkapnya seperti ini: span 1
span 1
span 1
span 1
span 1
span 4
span 1
span 1
span 1
span 1
span 1
span 4
span 4
span 1
span 4 span 8
span 6
span 6 span 12
Jadi bisa kita simpulkan, jika di dalam web kita menginginkan ada konten dan sidebar, kita bisa gunakan column 8 untuk konten, dan column 4 untuk sidebar. Bisa di pahami kan ? gunakan sesuai kebutuhan aja, struktur Kodenya seperti ini.
Ebook bootstrap bahasa indonesia | www.bungloon.com
span 1
Class row memungkinkan kita menyusun column menjadi rowspan / kebawah, Column di bootstrap itu sendiri ada beberapa , ada extra small, small, medium dan large. Implementasinya seperti ini.
class=”col-xs-4”> class=”col-sm-4”> class=”col-md-4”> class=”col-lg-4”>
column column column column
extra small