Description

Paket kursus Web Design (Front End) seharga Rp 5.500.000 dan cuma dengan membeli paket kursus ini anda cukup membeli dengan harga Rp 3.000.000

Kami Baba Studio telah berdiri selama 17 tahun dengan 130 Ribu murid dan alumni. Beberapa Pencapaian Baba Studio adalah:
1. Peraih Ratusan Penghargaan
2. Termasuk 5 ICT Award dari Menkominfo

Hasil yang didapat dari kursus ini

Detail materi yang akan anda pelajari : 

- Men-design layout atau tampilan website (HTML & CSS)

- Membuat tampilan website yang responsive (Bootstrap)

- Cara menambahkan animasi di website (Jquery Plugin)

- Men-design logo, banner, edit foto, mengolah gambar dll (Photoshop)

- Membuat website yg interaktif (Javascript)

- React Js



Curriculum

    • Introduction
    • Detail
      • Introduction
      • 04:11
      • Instalasi Wordpress
      • 15:36
      • Install WooCommerce
      • 20:08
      • Install dan Edit Tema
      • 16:52
    • Menambahkan Produk di WooCommerce
    • Detail
      • Menambahkan Produk Pertama
      • 26:29
      • Menambahkan Menu dan Footer
      • 12:45
      • Menduplikat Produk dari Produk yang Pertama
      • 17:34
      • Menduplikat Produk Dengan Berbeda Deskripsi
      • 09:47
    • Pengaturan WooCommerce
    • Detail
      • General Setting
      • 06:29
      • Product Setting
      • 02:03
      • Shipping Setting
      • 02:55
      • Payments Setting
      • 08:39
      • Acoount & Privacy Setting
      • 01:43
      • Email Setting
      • 03:11
      • Integration dan Advance Setting
      • 02:15
    • Checkout Product
    • Detail
      • Belanja Tahap Pertama
      • 10:21
      • Melihat Detail Orderan
      • 07:09
      • Menambahkan Kupon
      • 16:00
      • Menambahkan Kategori
      • 12:29
      • Membuat Page Halaman Utama
      • 08:53
      • Menambahkan Halaman Utama ke Menu
      • 04:17
      • Berbelanja Mengguanakan Search dan Pakai Metode COD
      • 17:34
      • Memberi Review dan Melihatnya di Dashboard
      • 09:08
      • Membuat Halaman Welcome
      • 11:07
    • Plugin WooCommerce
    • Detail
      • Pengenalan Plugin Mailchimp
      • 23:42
      • Pengenalan Plugin Facebook
      • 05:06
      • Pengenalan Plugin Jetpack
      • 06:33
      • Penutup Dengan Melihat Statistik WooCommerce
      • 08:25
    • Introduction
    • Detail
      • Pengenalan Javascript
      • 03:26
      • Menampilkan Alert pada HTML
      • 03:17
      • Menampilkan Link dengan Alert
      • 04:08
      • Menampilkan Console Log pada Web Browser
      • 04:59
      • Membuat Fungsi If dan Else
      • 05:08
      • Membuat Variable pada Javascript
      • 07:32
      • Tipe Data pada Javascript
      • 07:32
      • Tipe Data Boolean
      • 14:26
      • Konversi String menjadi Number
      • 06:14
      • Function
      • 06:08
      • Membuat Function dengan Parameter
      • 08:02
      • Membuat Form Input dengan Notifikasi Javascript
      • 07:16
      • Membuat Form Validation dengan Javascript
      • 20:23
      • Membuat For dengan Validasi Captcha Javascript
      • 11:41
      • Menampilkan Captcha pada Form Registrasi dengan Javascript
      • 18:32
      • Show dan Hidden Password pada Form Login
      • 13:35
    • DOM
    • Detail
      • Apa Itu DOM
      • 05:36
      • Form Tambah Item Tugas
      • 10:40
      • Action Insert Data With DOM in Javascript
      • 18:10
      • Remove Data With Javascript
      • 08:20
      • Filter Data dengan Javascript
      • 07:26
      • Simpan Data ke Penyimpannan Local
      • 10:31
      • Hapus Data dari Penyimpanan Local
      • 09:21
      • Membuat Form Kalkulator Pinjaman
      • 14:32
      • Menampilkan Data Kalkulator Pinjaman (2)
      • 17:42
    • OOP
    • Detail
      • Pengenalan OOP
      • 08:22
      • Pengenalan Method
      • 08:35
      • Project OOP Form Insert Data Paket Kursus
      • 08:35
      • Insert Data Paket Kursus with OOP Javascript
      • 17:41
      • Membuat Notifikasi Input
      • 03:40
      • Tampilkan Data Paket Kursus di Penyimpanan Local dengan OOP
      • 13:56
      • Delete Data Menggunakan Metode OOP
      • 10:18
    • CRUD Data dengan Menggunakan Javascript
    • Detail
      • Membuat Form Insert Data Paket
      • 21:53
      • Menampilkan Data dari Javascript
      • 19:56
      • Insert Data Tahap Pertama with Console
      • 20:44
      • Insert Data Tahap Dua
      • 13:00
      • Membuat Jumlah Harga Kursus
      • 06:50
      • Update Data Tahap Satu
      • 23:33
      • Update Data Paket Tahap Dua
      • 18:28
      • Clear Data Paket
      • 21:57
      • Simpan Data ke Local Storage
      • 12:20
      • Delete & Update Data From Local Storage
      • 11:28
    • E-Commerce Project
    • Detail
      • Ecommerce Javascript
      • 24:48
      • Membuat Ecommerce Javascript Part 2
      • 10:11
      • Javascript Ecommerce Part 3
      • 12:59
      • Addtocart Data with Javascript
      • 16:32
      • Delete Cart
      • 15:25
      • Update Cart
      • 16:21
      • Simpan Pesanan
      • 06:13
    • Introduction
    • Detail
      • Road Map Web Developer
      • 14:58
      • Introduction
      • 02:30
      • Hardware & Software
      • 02:35
      • Basic HTML Part 1
      • 18:24
      • Basic HTML Part 2
      • 16:22
      • Basic HTML Part 3
      • 27:18
      • Elemen Pada HTML Part 1
      • 19:27
      • Elemen Pada HTML Part 2 Symbol Entities
      • 03:35
      • Elemen Pada HTML Part 3
      • 19:25
      • Elemen Pada HTML Part 4
      • 06:03
      • Elemen Pada HTML Part 5
      • 09:17
      • Elemen Pada HTML Part 6 Audio
      • 06:33
      • Upload Website Ke Server Hosting
      • 14:51
      • Adobe Dreamweaver
      • 04:28
      • Comment On HTML
      • 03:36
    • Mengenal CSS Pada HTML
    • Detail
      • CSS Introductions
      • 02:57
      • CSS Implementation
      • 12:08
      • CSS Selector
      • 19:41
      • Div Element Part 1
      • 16:09
      • 2.4 Div Element Part 2 Overflow
      • 07:39
      • Simple Layout Part 1 Web Structure
      • 01:57
      • Simple Layout Part 2
      • 18:06
      • Simple Layout Part 3
      • 06:38
      • Simple Layout Part 4
      • 18:19
      • 2.5 Simple Layout Part 5 Content & Footer
      • 17:47
      • Layout Two Columns Part 1
      • 01:42
      • Layout Two Columns Part 2
      • 16:54
      • Layout Two Columns Part 3
      • 16:51
      • 2.6 Layout Two ColumnsPart 4
      • 15:12
      • 2.6 Layout Two Columns Part 5
      • 24:27
      • 2.6 Layout Two Columns Part 6
      • 08:29
    • Corporate Website
    • Detail
      • 3.1 Basic Structure
      • 21:24
      • 3.2 Header
      • 29:24
      • 3.3 Content
      • 22:22
      • 3.4 Content Bottom Footer
      • 14:02
    • Form Pada HTML
    • Detail
      • 4.1 Form Part 1
      • 19:48
      • 4.2 Form Part 2
      • 26:50
      • 4.3 CSS For Input Element
      • 06:58
      • 4.4 Another Input Element
      • 07:18
    • Mengenal Plugin Pada HTML
    • Detail
      • 5.1 Plugin Introductions
      • 01:35
      • 5.2 Plugin Image Slider
      • 14:25
      • 5.3 Plugin Lightbox
      • 11:22
      • 5.4 Plugin Google Map
      • 05:32
      • 5.5 Plugin Youtube
      • 03:38
    • Effect Pada JQuery
    • Detail
      • Effect FadeIn & FadeOut jQuery
      • 00:08:11
      • Effect FadeToggle jQuery
      • 00:08:09
      • Effect Slide jQuery
      • 00:06:39
      • Animate Effect
      • 00:16:37
      • Add Class & Remove Class
      • 00:08:24
    • Penggunaan Event Pada JQuery
    • Detail
      • Pengenalan Event
      • 00:02:33
      • Event Pada Tombol & Forms
      • 00:21:22
      • Event Pada Mouse
      • 00:07:44
      • Event Object
      • 00:16:42
      • Event Pada Keyboard
      • 00:07:17
    • Bonus
    • Detail
      • Show/Hide Password
      • 15:28
      • Race Car Game
      • 40:28
    • Pengenalan Bootstrap Grid
    • Detail
      • Pengenalan Bootstrap CSS
      • 10:21
      • Sistem Grid Bootstrap Part 1
      • 09:55
      • Sistem Grid Bootstrap Part 2
      • 08:26
      • Sistem Grid Bootstrap Part 3
      • 08:49
      • Membuat System Grid Sederhana
      • 06:06
      • Membuat Layout Dinamis
      • 05:24
      • Membuat Form Sederhana Part 1
      • 05:28
      • Membuat Form Sederhana Part 2
      • 09:21
    • Bootstrap Component
    • Detail
      • Pengenalan Bootstrap Component
      • 05:25
      • Navigasi
      • 06:56
      • Jumbotron Dan Page Header
      • 06:07
      • Panel
      • 06:45
      • Media Object
      • 07:49
      • Thumbnail
      • 07:11
      • List Group
      • 05:21
    • Bootstrap Project
    • Detail
      • Persiapan Project
      • 06:24
      • Index.html Part 1
      • 09:17
      • Index.html Part 2
      • 06:47
      • Index.html Part 3
      • 08:28
      • Artikel.html
      • 05:06
      • Kontak.html
      • 07:48
      • Finishing
      • 07:47
    • Wireframing Low Fidelity
    • Detail
      • Perkenalan dan Install Adobe XD
      • 10:14
      • Pembuatan Desain Sederhana
      • 06:14
      • Bekerja dengan Tipe pada Wireframe XD
      • 07:13
      • Bagaimana cara membuat Tombol dan Form Checkbox pada Adobe XD
      • 10:25
      • Website icon Gratis untuk Project UI dan UX
      • 16:53
      • Menggunakan Prototyping untuk Menambahkan Aksi pada Rancangan
      • 13:00
      • Rancangan Video yang dapat Dilihat Oleh Murid
      • 04:54
      • Cara Memanfaatkam Simbol di Adobe XD
      • 07:50
      • Menggunakan Repead Grid pada Adobe XD
      • 09:32
      • Membuat Aplikasi Onboard di Adobe XD
      • 12:13
      • Pembuatan Dashboard Pendaftaran Video Produksi
      • 14:10
      • Berbagi Wireframes untuk komentar di Adobe XD
      • 08:19
    • High Fidelity UI Design
    • Detail
      • Cara membuat Kolom Grid pada Adobe XD
      • 05:51
      • Bekerja menggunakan Pewarnaan di dalam XD
      • 05:53
      • Menggunakan Font yang Baik untuk Rancangan Adobe XD
      • 07:17
      • Menggunakan Character Style pada Adobe XD
      • 04:41
      • Membuat Realistic Button
      • 05:02
      • Bagaimana Cara membuat Icon Sendiri?
      • 07:54
      • Membuat Gradient pada Adobe XD
      • 03:39
      • Pro dan Kontra dalam Menambahkan Gambar pada Adobe XD
      • 05:40
      • Merancang menggunakan Photoshop Illustrator pada Adobe XD
      • 08:17
      • Bagaimana Cara membuat Mask pada Adobe XD
      • 10:44
      • Menambahkan Teks Field pada Adobe XD
      • 08:57
      • Membuat Model Pop Up pada Adobe XD
      • 04:47
      • Membuat Repead Grid Baru
      • 26:19
    • Modul 3
    • Detail
      • 3.1 Banner 1 Web Hosting
      • 17:50
      • 3.2 Banner 2 Web Fonts
      • 20:05
    • Modul 4
    • Detail
      • 4.1 Banner 3 With Brush
      • 18:07
      • 4.2 Banner Circle "Seal Of Gurantee"
      • 15:43
    • Modul 6
    • Detail
      • 6.1 Masking Introduction
      • 10:22
      • 6.2 Masking Photo Montaging
      • 21:58
    • Modul 7
    • Detail
      • 7.1 Web Slicing Part 1
      • 24:49
      • 7.2 Web Slicing Part 2
      • 25:17
      • 7.3. Web Slicing Part 3
      • 17:42
      • 7.4. Web Slicing Part 4
      • 17:25
    • Front End E-Commerce
    • Detail
      • Adding Style
      • 08:55
      • React Fragment
      • 19:15
      • Styled Component
      • 10:33
      • ProductList (Context)
      • 17:29
      • Product Style
      • 22:43
      • Detail Product
      • 21:28
      • Detail Product Part 2
      • 14:43
      • Creating Modal
      • 11:28
      • Cart
      • 15:46
      • Cart Part 2
      • 20:11
      • Cart Part 3 (Clear Cart And Remove Item)
      • 12:07
      • Cart Part 4 (Decrease Increase Qty) And Default Page
      • 09:57
      • Git And Netlify
      • 08:45
    • CRUD Pada React JS
    • Detail
      • Pengenalan Web
      • 05:45
      • Instalasi React Js
      • 12:43
      • Pengenalan Statefull dan Stateplus Componen
      • 10:45
      • Pengenalan Props pada React Js
      • 18:31
      • Pengenalan Fitur Props di React Js
      • 15:29
      • Membuat Tampilan Product dan Input Cart
      • 16:31
      • Styling Product di React Js
      • 15:47
      • Membuat Update Keranjang Belanja
      • 11:05
      • Membuat Tampilan Blogs
      • 16:45
      • Mengampil API dari JSONplaceholder
      • 10:46
      • Menampilkan Data dari API Json Placeholder
      • 16:25
      • Delete Data Part Satu
      • 15:51
      • Delete Data Part Dua
      • 06:42
      • Membuat Form Tambah Data di React Js
      • 13:26
      • Membuat Action Input Blogs Part Satu
      • 15:01
      • Membuat Action Input Data Ke db.json Part Dua
      • 17:09
      • Membuat Update Data Blog Part Satu
      • 10:29
      • Update Data pada React Js Part Dua
      • 14:42
      • Instalasi React Router Pada React Js
      • 05:57
      • Implementasi React Router pada React Js
      • 16:42
    • Redux
    • Detail
      • Instalasi Local Storage
      • 00:14:04
      • implementasi Local storage in react js part 1
      • 00:13:39
      • implementasi Local Storage in react js part 2
      • 00:14:35
      • implementasi Local Storage in react js part 3
      • 00:06:41
      • implementasi Local storage form input data buku
      • 00:10:50
      • implementasi local storage insert data
      • 00:11:18
      • implementasi reducer with local storage
      • 00:13:32
      • implementasi localstorage bagian akhir
      • 00:05:44

Atau Tambahkan Ke

Termasuk :
  • Materi Up to Date
  • Sertifikat Resmi
  • Instruktur selalu Online
  • Tersedia tampilan mobile

Metode Pembayaran bisa dilakukan dengan cara :

  1. Transfer ATM
  2. Mobile Banking
  3. Internet Banking
  4. SMS Banking