Berikut adalah materi belajar frontend menggunakan bootstrap untuk pemula selama 30 hari:
- Hari 1-2: Pengenalan tentang Frontend Development dan Bootstrap
- Apa itu Frontend Development
- Apa itu Bootstrap
- Kelebihan dan kekurangan Bootstrap
- Hari 3-5: Memasang dan Memahami Struktur HTML dan CSS dasar
- Mengenal HTML dan CSS
- Struktur HTML dan CSS
- Menambahkan CSS pada halaman HTML
- Hari 6-8: Menambahkan Bootstrap CSS dan JavaScript pada halaman HTML
- Menambahkan CSS dan JavaScript Bootstrap pada halaman HTML
- Memahami konsep Grid System Bootstrap
- Menambahkan Navbar dan Footer pada halaman HTML
- Hari 9-12: Belajar menggunakan Komponen Bootstrap
- Menambahkan Buttons, Forms, Cards, Carousel, dan Modals pada halaman HTML
- Memahami class dan atribut pada komponen Bootstrap
- Menambahkan font awesome icons pada halaman HTML
- Hari 13-15: Belajar mengubah tampilan dengan CSS
- Menambahkan custom CSS pada halaman HTML
- Menggunakan CSS untuk mengubah warna, font, dan ukuran elemen
- Menambahkan hover effect dan transition effect pada elemen HTML
- Hari 16-20: Membuat Halaman Landing Page dengan Bootstrap
- Memahami konsep landing page
- Membuat header, section, dan footer pada halaman landing page
- Menambahkan komponen bootstrap pada halaman landing page
- Hari 21-25: Belajar menambahkan JavaScript pada halaman HTML
- Menambahkan JavaScript pada halaman HTML
- Memahami konsep DOM manipulation
- Menambahkan event listener dan event handler pada elemen HTML
- Hari 26-30: Membuat Aplikasi sederhana menggunakan Bootstrap
- Membuat aplikasi to-do list atau calculator sederhana
- Menambahkan komponen bootstrap dan JavaScript pada aplikasi
- Memahami konsep responsive design pada aplikasi
Semoga materi ini bisa membantu dan memudahkan dalam belajar frontend menggunakan Bootstrap. Happy coding!
Berikut adalah PPT untuk hari 1:
Slide 1: Judul: Pengenalan Frontend Development dan Bootstrap
Slide 2: Judul: Apa itu Frontend Development Isi:
- Frontend Development adalah bagian dari pengembangan aplikasi web yang bertanggung jawab untuk membuat tampilan aplikasi web yang user-friendly dan responsive.
- Frontend developer bekerja dengan HTML, CSS, dan JavaScript untuk membuat tampilan aplikasi web yang indah dan user-friendly.
Slide 3: Judul: Apa itu Bootstrap Isi:
- Bootstrap adalah salah satu framework CSS yang populer digunakan untuk membuat tampilan aplikasi web.
- Bootstrap memudahkan pengembangan tampilan aplikasi web dengan menyediakan komponen yang sudah jadi seperti navbar, form, button, dan lain-lain.
Slide 4: Judul: Kelebihan dan Kekurangan Bootstrap Isi:
- Kelebihan:
- Menyediakan komponen yang sudah jadi dan mudah digunakan
- Memiliki grid system yang memudahkan pengembangan tampilan responsif
- Mendukung mobile-first design
- Kekurangan:
- Terlalu banyak dependensi pada JavaScript
- Tampilan yang terlalu seragam dan tidak unik
- Terkadang terlalu sulit untuk memodifikasi tampilan
Slide 5: Judul: KESIMPULAN Isi:
- Frontend Development dan Bootstrap adalah bagian penting dalam pengembangan aplikasi web.
- Bootstrap membantu mempermudah pengembangan tampilan aplikasi web dengan menyediakan komponen yang sudah jadi.
- Memahami kelebihan dan kekurangan Bootstrap akan membantu memilih framework yang tepat untuk pengembangan aplikasi web.
Berikut adalah PPT untuk hari 2:
Slide 1: Judul: Hari ke-2: Memasang dan Memahami Struktur HTML dan CSS dasar
Slide 2: Judul: Mengenal HTML Isi:
- HTML adalah singkatan dari Hyper Text Markup Language, adalah bahasa markup yang digunakan untuk membuat halaman web.
- HTML memiliki tag-tag yang digunakan untuk menentukan elemen pada halaman web seperti heading, paragraf, gambar, dan lain-lain.
Slide 3: Judul: Struktur HTML Isi:
- Struktur HTML paling minimal memiliki tag <html>, <head>, dan <body>.
- <head> berisi informasi tentang halaman web seperti judul dan meta description.
- <body> berisi konten yang akan ditampilkan pada halaman web.
Slide 4: Judul: Mengenal CSS Isi:
- CSS adalah singkatan dari Cascading Style Sheet, adalah bahasa untuk menentukan gaya dari halaman web.
- CSS memungkinkan kita untuk mengubah warna, font, dan ukuran elemen HTML.
Slide 5: Judul: Struktur CSS Isi:
- Struktur CSS terdiri dari selectors dan properties.
- Selectors digunakan untuk memilih elemen HTML yang akan diterapkan gaya.
- Properties digunakan untuk menentukan gaya dari elemen yang dipilih.
Slide 6: Judul: Menambahkan CSS pada halaman HTML Isi:
- CSS dapat diterapkan pada halaman HTML dengan 3 cara:
- Inline CSS: dengan menambahkan atribut style pada elemen HTML.
- Internal CSS: dengan membuat tag <style> pada bagian head halaman HTML.
- External CSS: dengan membuat file CSS terpisah dan menambahkan tag <link> pada bagian head halaman HTML.
Slide 7: Judul: KESIMPULAN Isi:
- HTML dan CSS adalah bahasa yang digunakan untuk membuat halaman web.
- HTML memiliki tag-tag yang digunakan untuk menentukan elemen pada halaman web.
- CSS memungkinkan kita untuk mengubah warna, font, dan ukuran elemen HTML.
- CSS dapat diterapkan pada halaman HTML dengan 3 cara: inline CSS, internal CSS, dan external CSS.
Berikut adalah PPT untuk hari 3:
Slide 1: Judul: Hari ke-3: Memahami Grid dan Komponen Bootstrap
Slide 2: Judul: Grid System Bootstrap Isi:
- Bootstrap memiliki grid system yang membantu menentukan bagaimana elemen akan disusun pada halaman web.
- Grid system terdiri dari row dan col, dimana col adalah bagian dari row.
- Ukuran col dapat disesuaikan sesuai dengan ukuran layar dengan menggunakan class prefix col-lg, col-md, col-sm, dan col-xs.
Slide 3: Judul: Contoh Grid System Bootstrap Isi:
- Tampilkan contoh grid system bootstrap dengan beberapa elemen HTML yang disusun pada row dan col.
Slide 4: Judul: Komponen Bootstrap Isi:
- Bootstrap memiliki beberapa komponen yang siap pakai seperti button, navbar, form, table, dan lain-lain.
- Komponen ini dapat dengan mudah diterapkan pada halaman web tanpa harus membuat design dari awal.
Slide 5: Judul: Contoh Komp
Slide 5 (lanjutan): Judul: Contoh Komponen Bootstrap Isi:
- Tampilkan beberapa contoh komponen bootstrap seperti button, navbar, form, table, dan lain-lain.
- Tunjukkan bagaimana menggunakan class bootstrap untuk membuat komponen tersebut.
Slide 6: Judul: Latihan Hari Ini Isi:
- Latihan untuk memahami grid system dan komponen bootstrap.
- Buat halaman web sederhana dengan menggunakan grid system dan komponen bootstrap.
Slide 7: Judul: KESIMPULAN Isi:
- Bootstrap memiliki grid system yang membantu menentukan bagaimana elemen akan disusun pada halaman web.
- Bootstrap juga memiliki beberapa komponen yang siap pakai seperti button, navbar, form, table, dan lain-lain.
- Hari ini kita telah melatih memahami grid system dan komponen bootstrap.
- Slide 8:
Judul: TUGAS Isi:
- Buat halaman web sederhana menggunakan grid system dan komponen bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 9: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang akan dibuat sebagai tugas hari ini.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web menggunakan bootstrap.
Slide 10: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-3.
- Sampai jumpa pada hari berikutnya.
- Berikut adalah PPT untuk hari 4:
Slide 1: Judul: Hari ke-4: Memahami Kustomisasi Bootstrap
Slide 2: Judul: Apa itu Kustomisasi Bootstrap? Isi:
- Kustomisasi Bootstrap adalah proses mengubah tampilan default dari Bootstrap agar sesuai dengan kebutuhan dan preferensi.
- Ini membantu menambahkan personal touch pada halaman web dan membuat halaman web terlihat lebih unik.
Slide 3: Judul: Cara Kustomisasi Bootstrap Isi:
- Tampilkan beberapa cara kustomisasi bootstrap seperti menggunakan file CSS tambahan, mengubah warna, mengubah font, dan lain-lain.
- Jelaskan bagaimana mengubah CSS Bootstrap menggunakan file CSS tambahan.
Slide 4: Judul: Latihan Hari Ini Isi:
- Latihan untuk memahami cara kustomisasi bootstrap.
- Kustomisasi halaman web yang dibuat pada hari sebelumnya.
Slide 5: Judul: KESIMPULAN Isi:
- Kustomisasi Bootstrap adalah proses mengubah tampilan default dari Bootstrap agar sesuai dengan kebutuhan dan preferensi.
- Kita telah melatih cara kustomisasi bootstrap.
Slide 6: Judul: TUGAS Isi:
- Kustomisasi halaman web yang dibuat pada hari sebelumnya.
- Submit hasil tugas pada hari berikutnya.
Slide 7: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang sudah dikustomisasi.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web menggunakan bootstrap dan cara kustomisasi bootstrap.
Slide 8: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-4.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari 5:
Slide 1: Judul: Hari ke-5: Memahami Responsive Web Design
Slide 2: Judul: Apa itu Responsive Web Design? Isi:
- Responsive Web Design adalah proses membuat halaman web yang bisa menyesuaikan dengan ukuran layar perangkat yang digunakan.
- Ini membantu memastikan halaman web dapat ditampilkan dengan baik di perangkat apa pun, seperti laptop, tablet, atau smartphone.
Slide 3: Judul: Cara Membuat Halaman Web Responsive Isi:
- Tampilkan beberapa cara membuat halaman web responsive menggunakan Bootstrap seperti memanfaatkan grid system, media query, dan lain-lain.
- Jelaskan bagaimana menggunakan media query untuk membuat halaman web responsive.
Slide 4: Judul: Latihan Hari Ini Isi:
- Latihan untuk memahami responsive web design menggunakan Bootstrap.
- Buat halaman web responsive menggunakan Bootstrap.
Slide 5: Judul: KESIMPULAN Isi:
- Responsive Web Design adalah proses membuat halaman web yang bisa menyesuaikan dengan ukuran layar perangkat yang digunakan.
- Kita telah melatih cara membuat halaman web responsive menggunakan Bootstrap.
Slide 6: Judul: TUGAS Isi:
- Buat halaman web responsive menggunakan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 7: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang sudah dibuat menjadi responsive.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web responsive menggunakan Bootstrap.
Slide 8: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-5.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari 6:
Slide 1: Judul: Hari ke-6: Memahami dan Menggunakan CSS
Slide 2: Judul: Apa itu CSS? Isi:
- CSS (Cascading Style Sheets) adalah bahasa markup yang digunakan untuk mengatur gaya tampilan halaman web.
- CSS bertanggung jawab untuk membuat halaman web tampak lebih menarik dan memiliki gaya yang sesuai dengan keinginan pembuat halaman.
Slide 3: Judul: Memahami CSS Selectors Isi:
- Jelaskan tentang jenis-jenis CSS selectors seperti element selector, class selector, id selector, dan lain-lain.
- Berikan contoh penggunaan masing-masing selector dan bagaimana mempengaruhi gaya halaman web.
Slide 4: Judul: Menggunakan CSS dengan Bootstrap Isi:
- Tampilkan bagaimana cara menggabungkan CSS dengan Bootstrap untuk membuat halaman web lebih menarik dan sesuai dengan keinginan.
- Jelaskan bagaimana menggunakan class dan id selector pada Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan menambahkan gaya pada halaman web dengan menggunakan CSS dan Bootstrap.
- Buat halaman web sesuai dengan keinginan dengan menambahkan gaya melalui CSS dan Bootstrap.
Slide 6: Judul: KESIMPULAN Isi:
- CSS (Cascading Style Sheets) adalah bahasa markup yang digunakan untuk mengatur gaya tampilan halaman web.
- Kita telah memahami dan melatih cara menggabungkan CSS dengan Bootstrap untuk membuat halaman web lebih menarik dan sesuai dengan keinginan.
Slide 7: Judul: TUGAS Isi:
- Buat halaman web dengan menambahkan gaya melalui CSS dan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang sudah dibuat dan diberikan gaya melalui CSS dan Bootstrap.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web dengan gaya yang sesuai.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-6.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-7:
Slide 1: Judul: Hari ke-7: Memahami dan Menggunakan JavaScript
Slide 2: Judul: Apa itu JavaScript? Isi:
- JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan dinamika pada halaman web.
- JavaScript memungkinkan halaman web untuk melakukan tugas-tugas tertentu secara otomatis seperti validasi form, animasi, dan lain-lain.
Slide 3: Judul: Memahami Variabel dan Tipe Data dalam JavaScript Isi:
- Jelaskan tentang variabel dan tipe data dalam JavaScript seperti string, number, boolean, dan lain-lain.
- Berikan contoh penggunaan masing-masing tipe data dalam JavaScript.
Slide 4: Judul: Menggunakan JavaScript dengan Bootstrap Isi:
- Tampilkan bagaimana cara menggabungkan JavaScript dengan Bootstrap untuk menambahkan interaksi dan dinamika pada halaman web.
- Jelaskan bagaimana menggunakan event handling dan menambahkan animasi pada halaman web dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan menambahkan interaksi dan dinamika pada halaman web dengan menggunakan JavaScript dan Bootstrap.
- Buat halaman web sesuai dengan keinginan dengan menambahkan interaksi dan dinamika melalui JavaScript dan Bootstrap.
Slide 6: Judul: KESIMPULAN Isi:
- JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan dinamika pada halaman web.
- Kita telah memahami dan melatih cara menggabungkan JavaScript dengan Bootstrap untuk menambahkan interaksi dan dinamika pada halaman web.
Slide 7: Judul: TUGAS Isi:
- Buat halaman web dengan menambahkan interaksi dan dinamika melalui JavaScript dan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang sudah dibuat dan diberikan interaksi dan dinamika melalui JavaScript dan Bootstrap.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web dengan interaksi dan dinamika yang sesuai.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-7.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-8:
Slide 1: Judul: Hari ke-8: Memahami dan Menggunakan jQuery
Slide 2: Judul: Apa itu jQuery? Isi:
- jQuery adalah library JavaScript yang mempermudah pemrograman JavaScript.
- jQuery memungkinkan kita untuk membuat aplikasi web dengan lebih cepat dan mudah.
Slide 3: Judul: Mengenal Fungsi-fungsi Dasar jQuery Isi:
- Jelaskan beberapa fungsi dasar jQuery seperti .ready(), .click(), .hide(), dan lain-lain.
- Berikan contoh penggunaan masing-masing fungsi dalam aplikasi web.
Slide 4: Judul: Menggunakan jQuery dengan Bootstrap Isi:
- Tampilkan bagaimana cara menggabungkan jQuery dengan Bootstrap untuk menambahkan interaksi dan dinamika pada halaman web.
- Jelaskan bagaimana menggunakan event handling dan menambahkan animasi pada halaman web dengan jQuery dan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan menambahkan interaksi dan dinamika pada halaman web dengan menggunakan jQuery dan Bootstrap.
- Buat halaman web sesuai dengan keinginan dengan menambahkan interaksi dan dinamika melalui jQuery dan Bootstrap.
Slide 6: Judul: KESIMPULAN Isi:
- jQuery adalah library JavaScript yang mempermudah pemrograman JavaScript.
- Kita telah memahami dan melatih cara menggabungkan jQuery dengan Bootstrap untuk menambahkan interaksi dan dinamika pada halaman web.
Slide 7: Judul: TUGAS Isi:
- Buat halaman web dengan menambahkan interaksi dan dinamika melalui jQuery dan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari halaman web yang sudah dibuat dan diberikan interaksi dan dinamika melalui jQuery dan Bootstrap.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan halaman web dengan interaksi dan dinamika yang sesuai.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-8.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-9:
Slide 1: Judul: Hari ke-9: Memahami dan Menggunakan JavaScript
Slide 2: Judul: Apa itu JavaScript? Isi:
- JavaScript adalah bahasa pemrograman yang digunakan untuk membuat aplikasi web yang interaktif dan dinamis.
- JavaScript sangat penting dalam membuat aplikasi web modern dan memiliki banyak fitur dan fungsi yang bisa digunakan.
Slide 3: Judul: Mengenal Variabel dan Tipe Data dalam JavaScript Isi:
- Jelaskan tentang variabel dan tipe data dalam JavaScript seperti string, number, dan boolean.
- Berikan contoh penggunaan variabel dan tipe data dalam aplikasi web.
Slide 4: Judul: Mengenal Fungsi dan Pemrograman Berorientasi Objek dalam JavaScript Isi:
- Jelaskan tentang fungsi dalam JavaScript dan bagaimana menuliskannya.
- Jelaskan pemrograman berorientasi objek dalam JavaScript dan bagaimana menerapkannya dalam aplikasi web.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat aplikasi web dengan menggunakan JavaScript dan memahami variabel, tipe data, fungsi, dan pemrograman berorientasi objek.
- Buat aplikasi web sesuai keinginan dengan menggunakan JavaScript.
Slide 6: Judul: KESIMPULAN Isi:
- JavaScript adalah bahasa pemrograman yang sangat penting untuk membuat aplikasi web interaktif dan dinamis.
- Kita telah memahami tentang variabel, tipe data, fungsi, dan pemrograman berorientasi objek dalam JavaScript.
Slide 7: Judul: TUGAS Isi:
- Buat aplikasi web dengan menggunakan JavaScript dan memahami variabel, tipe data, fungsi, dan pemrograman berorientasi objek.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari aplikasi web yang sudah dibuat dan diterapkan penggunaan JavaScript.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan aplikasi web dengan JavaScript.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-9.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-10:
Slide 1: Judul: Hari ke-10: Mengenal dan Menggunakan JQuery
Slide 2: Judul: Apa itu JQuery? Isi:
- JQuery adalah library JavaScript yang mempermudah pembuatan aplikasi web dengan menyediakan berbagai fungsi dan fitur yang mudah digunakan.
- JQuery mengurangi jumlah kode yang harus ditulis dan mempermudah pembuatan aplikasi web yang interaktif dan dinamis.
Slide 3: Judul: Mengenal Sintaks dan Fungsi dasar JQuery Isi:
- Jelaskan tentang sintaks dasar JQuery dan bagaimana menggunakannya.
- Berikan contoh penggunaan fungsi-fungsi dasar seperti .click(), .hide(), dan .show().
Slide 4: Judul: Mengenal Event dan Animasi dalam JQuery Isi:
- Jelaskan tentang event dalam JQuery dan bagaimana menerapkannya dalam aplikasi web.
- Berikan contoh penggunaan animasi dalam JQuery seperti .animate() dan .fadeIn().
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat aplikasi web dengan menggunakan JQuery dan memahami sintaks, fungsi dasar, event, dan animasi.
- Buat aplikasi web sesuai keinginan dengan menggunakan JQuery.
Slide 6: Judul: KESIMPULAN Isi:
- JQuery adalah library JavaScript yang mempermudah pembuatan aplikasi web interaktif dan dinamis.
- Kita telah memahami tentang sintaks, fungsi dasar, event, dan animasi dalam JQuery.
Slide 7: Judul: TUGAS Isi:
- Buat aplikasi web dengan menggunakan JQuery dan memahami sintaks, fungsi dasar, event, dan animasi.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari aplikasi web yang sudah dibuat dan diterapkan penggunaan JQuery.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan aplikasi web dengan JQuery.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-10.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-11:
Slide 1: Judul: Hari ke-11: Mengenal dan Menggunakan CSS Framework
Slide 2: Judul: Apa itu CSS Framework? Isi:
- CSS Framework adalah kumpulan beberapa style dan komponen yang sudah didefinisikan sebelumnya dan dapat digunakan untuk mempermudah dan mempercepat pembuatan aplikasi web.
- CSS Framework membantu pembuatan tampilan aplikasi web yang rapi dan profesional dengan menyediakan style dan komponen yang sudah diterapkan dan dapat dicustom sesuai keinginan.
Slide 3: Judul: Mengenal Bootstrap Isi:
- Bootstrap adalah salah satu CSS Framework yang paling populer dan banyak digunakan.
- Bootstrap menyediakan style dan komponen yang sudah diterapkan dan dapat dicustom sesuai keinginan.
- Berikan contoh tampilan aplikasi web dengan menggunakan Bootstrap.
Slide 4: Judul: Mengenal Grid System dan Komponen dalam Bootstrap Isi:
- Jelaskan tentang Grid System dalam Bootstrap dan bagaimana menggunakannya.
- Berikan contoh penggunaan komponen seperti Navbar, Button, dan Form.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat aplikasi web dengan menggunakan Bootstrap dan memahami Grid System dan komponen.
- Buat aplikasi web sesuai keinginan dengan menggunakan Bootstrap.
Slide 6: Judul: KESIMPULAN Isi:
- CSS Framework membantu pembuatan tampilan aplikasi web yang rapi dan profesional.
- Kita telah memahami tentang Bootstrap dan bagaimana menggunakan Grid System dan komponen dalam Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat aplikasi web dengan menggunakan Bootstrap dan memahami Grid System dan komponen.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari aplikasi web yang sudah dibuat dan diterapkan penggunaan Bootstrap.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan aplikasi web dengan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-11.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-12:
Slide 1: Judul: Hari ke-12: Menggunakan JavaScript dan JQuery
Slide 2: Judul: Apa itu JavaScript? Isi:
- JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaksi dan dinamika pada halaman web.
- JavaScript dapat digunakan untuk membuat aplikasi web yang lebih menarik dan memiliki fitur yang lebih banyak.
Slide 3: Judul: Mengenal JQuery Isi:
- JQuery adalah library JavaScript yang mempermudah dan mempercepat pembuatan aplikasi web.
- JQuery menyediakan fitur yang lebih mudah digunakan dan membantu pembuatan aplikasi web menjadi lebih cepat dan efisien.
Slide 4: Judul: Menggunakan JQuery Isi:
- Jelaskan bagaimana menggunakan JQuery dan memasukkannya ke dalam aplikasi web.
- Berikan contoh penggunaan JQuery seperti membuat animasi, mengubah elemen HTML, dan mengakses data dari server.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat aplikasi web dengan menggunakan JavaScript dan JQuery.
- Buat aplikasi web sesuai keinginan dengan menggunakan JavaScript dan JQuery.
Slide 6: Judul: KESIMPULAN Isi:
- JavaScript dan JQuery membantu pembuatan aplikasi web yang lebih menarik dan memiliki fitur yang lebih banyak.
- Kita telah memahami bagaimana menggunakan JavaScript dan JQuery dalam pembuatan aplikasi web.
Slide 7: Judul: TUGAS Isi:
- Buat aplikasi web dengan menggunakan JavaScript dan JQuery.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari aplikasi web yang sudah dibuat dan diterapkan penggunaan JavaScript dan JQuery.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan aplikasi web dengan JavaScript dan JQuery.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-12.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-13:
Slide 1: Judul: Hari ke-13: Membuat Responsive Design dengan Bootstrap
Slide 2: Judul: Apa itu Responsive Design? Isi:
- Responsive Design adalah desain yang memungkinkan halaman web untuk beradaptasi pada berbagai ukuran layar.
- Ini memastikan bahwa halaman web terlihat baik pada desktop, tablet, dan ponsel.
Slide 3: Judul: Menggunakan Bootstrap Isi:
- Bootstrap adalah framework CSS yang membantu dalam membuat desain responsif dan menghemat waktu pengembangan.
- Bootstrap menyediakan grid system, komponen, dan CSS classes untuk mempermudah pembuatan desain responsif.
Slide 4: Judul: Membuat Desain Responsif Isi:
- Jelaskan bagaimana membuat desain responsif menggunakan Bootstrap dengan menggunakan grid system dan CSS classes.
- Berikan beberapa contoh desain responsif yang dibuat dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat desain responsif dengan Bootstrap.
- Buat desain responsif sesuai keinginan dan aplikasikan pada aplikasi web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Bootstrap membantu dalam membuat desain responsif dengan grid system, komponen, dan CSS classes.
- Kita telah memahami bagaimana membuat desain responsif menggunakan Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat desain responsif untuk aplikasi web yang sudah dibuat sebelumnya menggunakan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari desain responsif yang sudah dibuat dan diterapkan pada aplikasi web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan desain responsif menggunakan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-13.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-14:
Slide 1: Judul: Hari ke-14: Membuat Navigasi Bar dengan Bootstrap
Slide 2: Judul: Apa itu Navigasi Bar? Isi:
- Navigasi Bar adalah bagian dari website yang mengandung tautan menuju halaman web lain.
- Ini mempermudah pengguna untuk menavigasi situs web.
Slide 3: Judul: Menggunakan Bootstrap Isi:
- Bootstrap memiliki komponen navbar yang memudahkan pembuatan Navigasi Bar.
- Komponen navbar menyediakan tampilan yang profesional dan responsif.
Slide 4: Judul: Membuat Navigasi Bar Isi:
- Jelaskan bagaimana membuat Navigasi Bar menggunakan komponen navbar dari Bootstrap.
- Berikan beberapa contoh Navigasi Bar yang dibuat dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat Navigasi Bar menggunakan komponen navbar dari Bootstrap.
- Buat Navigasi Bar untuk aplikasi web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Bootstrap memiliki komponen navbar untuk membuat Navigasi Bar yang profesional dan responsif.
- Kita telah memahami bagaimana membuat Navigasi Bar menggunakan Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat Navigasi Bar untuk aplikasi web yang sudah dibuat sebelumnya menggunakan komponen navbar dari Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari Navigasi Bar yang sudah dibuat dan diterapkan pada aplikasi web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan Navigasi Bar menggunakan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-14.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-15:
Slide 1: Judul: Hari ke-15: Membuat Grid System dengan Bootstrap
Slide 2: Judul: Apa itu Grid System? Isi:
- Grid System adalah metode pembagian area pada halaman web menjadi sejumlah kolom dan baris.
- Ini mempermudah pembuatan tata letak halaman web yang rapi dan responsif.
Slide 3: Judul: Menggunakan Bootstrap Isi:
- Bootstrap memiliki Grid System yang memudahkan pembuatan tata letak halaman web.
- Grid System Bootstrap membantu membuat tata letak responsif yang sesuai dengan ukuran layar perangkat.
Slide 4: Judul: Membuat Grid System Isi:
- Jelaskan bagaimana membuat Grid System menggunakan Bootstrap.
- Berikan beberapa contoh Grid System yang dibuat dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat Grid System menggunakan Bootstrap.
- Buat Grid System untuk halaman web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Bootstrap memiliki Grid System untuk membuat tata letak halaman web yang rapi dan responsif.
- Kita telah memahami bagaimana membuat Grid System menggunakan Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat Grid System untuk halaman web yang sudah dibuat sebelumnya menggunakan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari Grid System yang sudah dibuat dan diterapkan pada halaman web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan Grid System menggunakan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-15.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-16:
Slide 1: Judul: Hari ke-16: Membuat Form dengan Bootstrap
Slide 2: Judul: Apa itu Form? Isi:
- Form adalah bagian dari halaman web yang digunakan untuk meminta informasi dari pengguna.
- Form biasanya terdiri dari beberapa elemen seperti input, select, radio, checkbox, dll.
Slide 3: Judul: Menggunakan Bootstrap Isi:
- Bootstrap memiliki beberapa elemen form yang siap digunakan dan memiliki desain yang menarik.
- Elemen form Bootstrap juga responsif dan sesuai dengan ukuran layar perangkat.
Slide 4: Judul: Membuat Form Isi:
- Jelaskan bagaimana membuat form menggunakan Bootstrap.
- Berikan beberapa contoh form yang dibuat dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat form menggunakan Bootstrap.
- Buat form untuk halaman web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Bootstrap memiliki elemen form yang memudahkan pembuatan form pada halaman web.
- Kita telah memahami bagaimana membuat form menggunakan Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat form untuk halaman web yang sudah dibuat sebelumnya menggunakan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari form yang sudah dibuat dan diterapkan pada halaman web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan form menggunakan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-16.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-17:
Slide 1: Judul: Hari ke-17: Membuat Tabel dengan Bootstrap
Slide 2: Judul: Apa itu Tabel? Isi:
- Tabel adalah elemen HTML yang digunakan untuk menampilkan data dalam bentuk tabel.
- Tabel terdiri dari baris dan kolom, dan masing-masing baris memiliki sebuah data.
Slide 3: Judul: Menggunakan Bootstrap Isi:
- Bootstrap memiliki beberapa elemen tabel yang siap digunakan dan memiliki desain yang menarik.
- Elemen tabel Bootstrap juga responsif dan sesuai dengan ukuran layar perangkat.
Slide 4: Judul: Membuat Tabel Isi:
- Jelaskan bagaimana membuat tabel menggunakan Bootstrap.
- Berikan beberapa contoh tabel yang dibuat dengan Bootstrap.
Slide 5: Latihan Hari Ini Isi:
- Latihan membuat tabel menggunakan Bootstrap.
- Buat tabel untuk halaman web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Bootstrap memiliki elemen tabel yang memudahkan pembuatan tabel pada halaman web.
- Kita telah memahami bagaimana membuat tabel menggunakan Bootstrap.
Slide 7: Judul: TUGAS Isi:
- Buat tabel untuk halaman web yang sudah dibuat sebelumnya menggunakan Bootstrap.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari tabel yang sudah dibuat dan diterapkan pada halaman web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan tabel menggunakan Bootstrap.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-17.
- Sampai jumpa pada hari berikutnya.
Berikut adalah PPT untuk hari ke-18:
Slide 1: Judul: Hari ke-18: Menambahkan Ikon dengan Font Awesome
Slide 2: Judul: Apa itu Font Awesome? Isi:
- Font Awesome adalah font ikon gratis yang memiliki ribuan ikon yang bisa digunakan dalam pembuatan halaman web.
- Font Awesome menggunakan CSS untuk menampilkan ikon sehingga tidak memerlukan gambar dan memiliki hasil yang lebih halus.
Slide 3: Judul: Menambahkan Font Awesome Isi:
- Jelaskan bagaimana menambahkan Font Awesome pada halaman web.
- Berikan beberapa contoh bagaimana menggunakan Font Awesome pada halaman web.
Slide 4: Judul: Menambahkan Ikon Isi:
- Jelaskan bagaimana menambahkan ikon menggunakan Font Awesome.
- Berikan beberapa contoh bagaimana menambahkan ikon pada halaman web.
Slide 5: Latihan Hari Ini Isi:
- Latihan menambahkan ikon menggunakan Font Awesome.
- Buat beberapa ikon pada halaman web yang sudah dibuat sebelumnya.
Slide 6: Judul: KESIMPULAN Isi:
- Font Awesome memudahkan pembuatan ikon pada halaman web dengan menggunakan CSS.
- Kita telah memahami bagaimana menambahkan ikon menggunakan Font Awesome.
Slide 7: Judul: TUGAS Isi:
- Buat beberapa ikon pada halaman web yang sudah dibuat sebelumnya menggunakan Font Awesome.
- Submit hasil tugas pada hari berikutnya.
Slide 8: Judul: PREVIEW Isi:
- Tampilkan preview dari ikon yang sudah dibuat dan diterapkan pada halaman web.
- Berikan beberapa tips dan trik untuk mempermudah pembuatan ikon menggunakan Font Awesome.
Slide 9: Judul: SELESAI Isi:
- Terima kasih telah mengikuti materi hari ke-18.
- Sampai jumpa pada hari berikutnya.
Slide 1: Membuat Halaman Landing Page dengan Bootstrap
- Deskripsi: Konsep dan tujuan dari membuat halaman landing page menggunakan Bootstrap
- Subtopik:
- Apa itu Landing Page
- Tujuan Landing Page
- Keuntungan menggunakan Bootstrap dalam membuat Landing Page
Slide 2: Konsep dan Struktur Halaman Landing Page
- Deskripsi: Memberikan gambaran tentang konsep dan struktur dasar halaman landing page
- Subtopik:
- Struktur Halaman Landing Page
- Konsep Desain Landing Page
- Bagian-bagian yang harus ada dalam sebuah Landing Page
Slide 3: Memulai Proyek Halaman Landing Page
- Deskripsi: Memberikan tutorial cara memulai proyek halaman landing page menggunakan Bootstrap
- Subtopik:
- Persiapan
- Membuat Struktur Dasar Halaman
- Mengenal Grid System Bootstrap
Slide 4: Menambahkan Konten dalam Halaman Landing Page
- Deskripsi: Memberikan tutorial cara menambahkan konten seperti header, hero section, dan lainnya dalam halaman landing page
- Subtopik:
- Header
- Hero Section
- Call to Action
- Fitur Produk
- Testimoni
Slide 5: Menambahkan Efek dan Interaksi pada Halaman Landing Page
- Deskripsi: Memberikan tutorial cara menambahkan efek dan interaksi pada halaman landing page untuk membuat halaman lebih menarik
- Subtopik:
- Animasi
- Scrollspy
- Modal
- Carousel
Slide 6: Menambahkan Responsiveness pada Halaman Landing Page
- Deskripsi: Memberikan tutorial cara membuat halaman landing page menjadi responsive dan dapat dibuka pada berbagai perangkat
- Subtopik:
- Media Queries
- Adaptive Design
- Responsive Design
Slide 7: Latihan: Membuat Halaman Landing Page
- Deskripsi: Latihan bagi peserta untuk mempraktekkan materi yang telah dipelajari dan membuat halaman landing page sesuai dengan konsep yang telah diterapkan.
Slide 8: Refleksi dan Evaluasi
- Deskripsi: Memberikan waktu untuk peserta untuk merefleksikan materi yang telah dipelajari dan melakukan evaluasi untuk mengetahui bagian yang perlu ditingkatkan.
Slide 1: Pendahuluan
- Penjelasan singkat mengenai JavaScript
- Fungsi JavaScript pada halaman HTML
- Perbedaan antara JavaScript dan CSS/HTML
Slide 2: Memasukkan JavaScript ke halaman HTML
- Cara memasukkan JavaScript ke halaman HTML
- Cara membuat file .js dan memasukkannya ke halaman HTML
Slide 3: Variabel dan Tipe Data dalam JavaScript
- Penjelasan mengenai variabel
- Tipe data dalam JavaScript: string, number, boolean
- Cara mendeklarasikan variabel dan mengisi nilai
Slide 4: Operator dan Kondisi dalam JavaScript
- Penjelasan mengenai operator aritmatika dan logika
- Cara menggunakan operator pada kondisi if-else
- Penjelasan mengenai switch statement
Slide 5: Loop dalam JavaScript
- Penjelasan mengenai loop for dan while
- Cara menggunakan loop for dan while pada program JavaScript
Slide 6: Function dalam JavaScript
- Penjelasan mengenai function
- Cara membuat dan menggunakan function
- Penjelasan mengenai parameter dan return value pada function
Slide 7: DOM (Document Object Model)
- Penjelasan mengenai DOM
- Cara mengakses elemen HTML melalui JavaScript
- Penjelasan mengenai event dan event listener
Slide 8: Manipulasi Element HTML dengan JavaScript
- Cara mengubah style elemen HTML melalui JavaScript
- Cara mengubah konten elemen HTML melalui JavaScript
- Penjelasan mengenai innerHTML dan value property
Slide 9: Latihan
- Latihan menggabungkan HTML, CSS, dan JavaScript untuk membuat halaman yang interaktif
- Latihan menambahkan event dan event listener pada elemen HTML
Slide 10: Penutup
- Ringkasan materi hari 21-25
- Tugas untuk mempraktikkan materi yang dipelajari
- Preview materi hari 26-30.
Slide 1: Introduction
- Welcome to the last week of learning Bootstrap
- In this week, we will be creating a simple application using Bootstrap and JavaScript
- The goal is to understand how to integrate Bootstrap and JavaScript to create a functional and responsive application
Slide 2: Objectives
- Create a simple to-do list or calculator application
- Add Bootstrap components and JavaScript to the application
- Understand the concept of responsive design in the application
Slide 3: To-Do List Application
- In this section, we will create a simple to-do list application
- We will use Bootstrap classes and components such as the table, form, and button
- We will also add JavaScript to handle the to-do list functionality
Slide 4: Calculator Application
- In this section, we will create a simple calculator application
- We will use Bootstrap classes and components such as the form, input, and button
- We will also add JavaScript to handle the calculator functionality
Slide 5: Adding Bootstrap Components
- In this section, we will learn how to add Bootstrap components such as buttons, forms, and tables to the application
- We will also learn how to customize the appearance and behavior of these components using Bootstrap classes and attributes
Slide 6: Adding JavaScript
- In this section, we will learn how to add JavaScript to the application
- We will learn how to handle events such as button clicks and form submissions
- We will also learn how to manipulate the HTML and CSS of the application using JavaScript
Slide 7: Responsive Design
- In this section, we will learn about the concept of responsive design in web applications
- We will learn how to make the application look good on different screen sizes using Bootstrap classes and media queries
- We will also learn how to test the responsiveness of the application on different devices
Slide 8: Conclusion
- Congratulations! You have successfully completed the 30-day Bootstrap course
- You have learned how to create a simple application using Bootstrap and JavaScript
- You have also learned how to add components, handle events, and create a responsive design
Slide 9: Additional Resources
- Here are some additional resources to continue learning Bootstrap and JavaScript
- Bootstrap documentation: https://getbootstrap.com/docs/
- JavaScript documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- Free online courses and tutorials: https://www.w3schools.com/ and https://www.codecademy.com/learn/introduction-to-javascript
Slide 10: Thank You
- Thank you for participating in the 30-day Bootstrap course
- I hope you have enjoyed and learned a lot from this course-
- Good luck in your future web development journey!
