terhadap desain yang udah kita buat pada playlist UI dan UI Design. Dan nggak usah banyak bicara lagi, mari kita mulai saja ke videonya, tapi sebelum itu, seperti biasa, kita intro dulu. Halo, soal.
Jadi video kali ini adalah video pertama dari seri belajar bootstrap versi 5. Dan di video kali ini kita nggak bakalan langsung masuk terjun ke coding, nggak. Tapi di video kali ini kita akan cari tahu dulu nih, hal apa aja yang akan kita pelajari pada playlist bootstrap versi 5 ini, atau agenda kita pada playlist bootstrap versi 5 ini. Tapi sebelum teman-teman belajar bootstrap versi 5 ini, sebenarnya ada yang namanya prerequisite-nya atau prasyaratnya. Jika teman-teman nantinya pengen lancar mempelajari bootstrap versi 5 ini, apa aja itu?
Jadi syarat-syaratnya itu yang pertama teman-teman harus tahu dulu nih, internet dan juga teknologi web. dan saya rasa teman-teman yang mampir ke channel ini udah paham nih internet itu apa dan juga teknologi web nah lalu selanjutnya teman-teman minimal harus kenalan dulu atau pernah menggunakan lah yang namanya HTML jadi HTML itu adalah struktur dasar dari pembuatan suatu website nah jadi aku akan coba ulas aja sedikit mengenai HTML ini jadi HTML itu kependekan dari Hypertext Markup Language atau disingkat jadi HTML dia itu adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di perambanan internet. Nah, maksudnya kayak gimana nih?
Teman-teman masih bingung ya? Nah, tapi jika teman-teman udah menggunakan HTML sebelumnya, pasti teman-teman tau lah. Jadi, HTML ini bukanlah bahasa pemrograman.
Nah, jika teman-teman tau, dalam bahasa pemrograman itu ada yang namanya struktur data, ada variable, terus ada pengkondisian. Nah, di HTML itu nggak mempunyai hal-hal tersebut. Nah, maka dari itu HTML ini nggak bisa disebut dengan bahasa pemrograman. Tapi, HTML ini adalah...
bahasa markup. Nah, apa itu bahasa markup? Nah, jadi bahasa markup itu dia di dalamnya berisi tag-tag HTML seperti tag body, terus ada tag head, ada title, dan lain sebagainya. Selanjutnya, di dalamnya itu berisi dokumen-dokumen.
Jadi, nantinya di dalam tag ini dia akan membedakan mana informasi yang akan dibaca oleh sistem dan mana informasi yang akan ditampilkan pada halaman web browser. Nah, itu adalah bahasa markup ya, kurang lebih. Nah, seharusnya teman-teman sih udah paham mengenai HTML ini.
Selanjutnya, disini teman-teman juga harus paham mengenai CSS. Apa itu CSS? Nah CSS itu adalah kependekan dari Cascading Style Sheet. CSS ini merupakan mekanisme sederhana yang mengatur gaya atau style pada suatu halaman website. Apa aja yang diatur?
Disini CSS mengatur dari mulai warna, heading, layout, position, dan lain sebagainya. Pokoknya banyak banget lah. Nah jadi buat teman-teman yang masih bingung mengenai CSS itu apa, kita coba...
lihat di salah satu website. Di sini kita buka liputan 6.com, di mana di halaman website ini pasti dia memiliki HTML yang pertama sebagai struktur dasar pembuatan websitenya. Nah jika teman-teman lihat di website liputan 6 ini cukup lumayan rapi, terus enak dilihat, layoutnya bagus, penggunaan warnanya yang rapi, pokoknya enak lah ya.
Nah jika teman-teman lihat di sini, nah jika kita coba matikan CSS dari liputan 6.com ini, maka hasilnya akan seperti ini teman-teman. Bam! Nah, hasilnya kan struktur dasar dari HTML saja.
Dia nggak bakalan terlihat menarik dan juga interaktif gitu. Cuman struktur dasar HTML saja gitu, nggak ada yang menarik. Dibanding ketika suatu halaman website diberikan style, diberikan CSS. Maka hasil tampilannya pun akan bagus. Nah, di sini ada Facebook.
Nah, Facebook juga di sini rapi ya. Di sini terbagi ke dalam. Di sebelah kirinya ada navigasi, di sebelah kanannya ada navigasi juga. Terus di tengah-tengahnya baru kita melihat status-status dari orang lain.
Nah ini rapih seperti ini dikarenakan adanya CSS. Nah coba kita matikan CSS dari Facebook ini. Nah maka hasilnya akan seperti ini. Dia nggak interaktif, dia nggak menarik nih untuk dilihat. Dia hanya punya memiliki struktur dasar HTML saja.
Dan jika teman-teman bandingkan, website ini menggunakan style, maka hasilnya akan lebih... enak dilihat oke, nah kurang lebih itu mengenai CSS oke kita masuk lagi ke agenda kita ya nah setelah teman-teman pahami nih apa itu internet, apa itu HTML, terus apa itu CSS, CSS Layouting nah selanjutnya kita akan cari tahu dulu apa itu Framework dan apa itu Bootstrap nah Framework itu adalah serangkaian tools, library, atau standar dan juga best practice nah maksudnya kayak gimana nih teman-teman pasti bingung juga nah seperti biasa aku akan coba contohkan menggunakan suatu coding Nah disini aku udah punya index.html berisi struktur HTML sederhana dan disini juga aku udah buatkan stylenya ya. Nah dimana jika teman-teman buka di browser maka tampilannya akan seperti ini. Disini hanya dia memiliki satu tampilan tombol saja.
Nah coba teman-teman bayangkan untuk membuat tombol seperti ini saja dia membutuhkan baris kode yang banyak banget lah ya. Nah sedangkan para developer sampai saat ini dituntut untuk bekerja lebih cepat karena tuntutan teknologi yang semakin meningkat Ya tentunya para developer juga harus bisa bekerja cepat, tapi harus tetap memperhatikan kualitas dan interaktifitas dari suatu halaman website. Nah, framework itu hadir sebagai solusi bagi para frontend developer.
Nah, maksudnya gimana? Sebagai contoh nih, kita buka websitenya bootstrap, nah kita akan menggunakan framework dari CSS nih. Sebagai contoh, kita copy aja starter templatenya di sini, kita paste-kan di sini, di inek HTML-nya, kita save, lalu kita hapus nih, stylenya kita nggak pake style sama sekali. Kita hapus, ketika kita buka di browser, maka tampilannya akan seperti ini.
Nah, ini adalah template sederhana dari framework bootstrap. Nah, di sini kita akan membuat tombol yang serupa seperti kita membuat tombol menggunakan style CSS secara manual, tapi di sini kita akan menggunakan bootstrap. Kita akan cari tahu apa perbedaannya ya. Oke, di sini kita tinggal menambahkan saja button, karena kita akan membuat tombol, kita kasih tulisan di dalamnya primary, dan ketika kita menggunakan bootstrap, kita bisa menggunakan kelas btn-btn-primary. Kenapa kita bisa membuat kelas ini?
Karena kita sudah langsung terkoneksi menggunakan bootstrap versi 5 secara online. Jadi ketika kita save dan kita coba refresh, maka tombolnya akan sama persis nih teman-teman. Nah, coba teman-teman bedakan.
Tadi kita harus menulis banyak sekali baris kode, tapi ketika kita menggunakan framework, kita hanya tinggal menuliskan kelas btn-btn-primary saja. sudah bisa membuat tampilan yang sama persis seperti kita membuat style menggunakan CSS secara manual. Nah, maka dari itu, framework ini berfungsi sebagai alat bantu ya, dan juga untuk mempercepat dan juga mempermudah proses pengerjaan para front-end developer. Dan framework ini sebenarnya cukup lumayan banyak.
Ada framework untuk CSS, ada untuk PHP, terus ada untuk JavaScript. Hampir setiap bahasa pemrograman itu memiliki yang namanya framework. Dan bahkan nggak hanya satu framework saja, ada juga yang menyebutnya aset. Mungkin satu bahasa pemrograman itu memiliki banyak sekali framework. Sebagai contoh di CSS, dia memiliki framework yang namanya Materialize dan juga Bootstrap.
Dan di PHP, itu ada yang namanya Codeigniter dan juga Laravel. Dan seperti aku katakan, Bootstrap itu adalah framework dari CSS. Dan Bootstrap itu adalah kerja CSS yang sumbernya itu terbuka dan bebas untuk merancang situs web dan aplikasi web.
Nah, berarti Bootstrap ini gratis nih teman-teman. Bisa teman-teman gunakan untuk proyek teman-teman. Salam.
Cocok sekali juga untuk teman-teman gunakan untuk pembelajaran teman-teman. Nah, setelah teman-teman tahu bootstrap itu apa, framework itu apa, selanjutnya kita akan mempelajari ke dalamnya. Kita akan belajar yang namanya utilities di bootstrap.
Nah, dan utilities di bootstrap itu cukup lumayan banyak ya. Kita akan belajar yang namanya grid system, itu untuk mengatur tata letak. Terus ada text dan typography, ada positioning untuk mengatur posisi suatu elemen.
Terus ada spacing, ada sizing untuk mengatur ukuran suatu elemen. Terus disini ada flexbox, nah dan untuk flexbox ini cukup lumayan penting banget, mungkin aku akan buatkan videonya secara khusus ya. Lalu disini ada alignment untuk mengatur kesejajaran atau simetris suatu elemen, terus ada color berhubungan dengan warna, ada images, dan yang saya suka dari bootstrap ini, dia sudah support yang namanya responsive utilities. Jadi website yang dibuat dengan bootstrap ini, dia sudah bisa dibuka di berbagai macam media, contohnya di websitenya kita bisa buka di smartphone.
Kita bisa buka di tablet, di website. Nah, buat teman-teman yang masih bingung, responsif itu apa, sebagai contoh, di sini kita buka lagi Facebook ya. Ini biasa ya, ditampil di website itu kurang lebih seperti ini.
Sorry, kita buka dulu. Nah, tampilan di website itu kurang lebih seperti ini. Dan ketika Facebook ini dibuka di tablet, maka tampilannya itu akan berubah nih. Nah, akan menyesuaikan dengan layarnya. Di sini nggak ada lagi yang namanya navigasi.
Tapi di sini diganti. dengan menggunakan lainnya seperti ini ya. Ya, akan berbeda juga ketika tampilan ini dibuka di smartphone.
Nah, dia akan menyesuaikan lagi. Nah, itulah yang dinamakan dengan yang namanya responsive. Kita kembali lagi ke slide-nya, dan kita akan belajar juga yang namanya shadow, itu untuk membuat bayangan, dan juga masih banyak sekali utilitas dari bootstrap yang akan kita pelajari.
Oke, selanjutnya dari utilities bootstrap, kita akan belajar yang namanya CSS components. Komponen-komponen apa aja yang akan kita buat menggunakan chess komponen ini? Kita akan belajar membuat yang namanya button menggunakan bootstrap, kita akan membuat nav dan juga navbar untuk navigasi, terus kita juga akan belajar membuat jumbotron, ada list group dan juga badges, terus ada...
Forms dan juga input group. Selanjutnya kita akan belajar juga alerts dan juga progress untuk menafilkan suatu informasi jika ketika berhasil atau ada kesalahan. Terus juga pagination. Jika teman-teman punya halaman yang cukup lumayan panjang dan teman-teman pengen bagi itu ke dalam beberapa halaman, maka gunakanlah pagination ini.
Selanjutnya kita akan belajar juga menggunakan cards. Cards ini cukup powerful banget. Cukup fleksibel banget penggunaannya dan juga masih banyak lagi CSS komponen yang akan kita pelajari.
Oke, selanjutnya kita juga akan belajar di sini Javascript Widgets. Jadi Javascript Widgets itu adalah CSS yang sudah diberi sedikit Javascript. Jadi lebih interaktif dan juga menarik.
Kita di sini akan belajar membuat yang namanya Dropdowns, Carousel, terus ada Collapse, ada Vovovers. Kita akan belajar juga Models dan tentunya masih banyak lagi Javascript Widgets yang akan kita pelajari dan disediakan juga oleh Boostrap. Oke, dari JavaScript Widgets, kita baru mulai membuat suatu proyek website e-commerce.
Kita akan melakukan slicing design terhadap suatu desain yang sudah kita buat pada playlist UI dan UX Design. Nah, jadi di sini ketemu nih antara seorang UI UX Designer dan juga seorang front-end developer. Nah, kita akan melakukan slicing design di sini karena kita sudah belajar dasar-dasar bagaimana cara melakukan slicing.
Dan juga di sini kita akan melakukan membuat proyek website langsung lainnya menggunakan bootstrap versi 5 ini. Dan mungkin video kali ini sampai sini dulu, karena video kali ini hanyalah video pengantar saja, atau video intro saja sebelum kita benar-benar terjun belajar bootstrap versi 5. Pokoknya, like aja jika teman-teman suka video ini dan rasa video ini bermanfaat. Comment di bawah jika teman-teman punya pertanyaan. Dan jika teman-teman tertarik belajar bootstrap versi 5 ini, silakan teman-teman jangan ragu subscribe saja channel ini dan nyalakan lonceng notifikasinya supaya teman-teman nggak ketinggalan kalau ada update video terbaru di channel ini.
And I hope you like this video. Stay class. Bye-bye.
Intro