KOLEKSI VIDEO

  • PlayList u Javascript

    LESS THAN A MINUTES | CREATE TEXT ANIMATIONS | TUTORIAL STEP BY STEPS with Source Code+Subtitle

    Dibuat: ddqia Channel | Posting : 20 Dec 2019

    Dalam video tutorial di edisi ini kita akan bareng-bareng ngoding membuat atau menciptakan halaman WEBSITE buatan sendiri yang berisi kumpulan/koleksi Teks Animasi CSS3.

    Kurang dari satu menit kita bisa membuat, merubah dan memodifikasi video intro teks animasi.

    Hasil teks animasi ini bisa digunakan untuk di tempel dalam video buatan kita, bisa buat judul untuk persentasi di sekolah/kuliah atau di pekerjaan.

    Kali ini temen-temen tidak hanya menempel cover background statis tanpa animasi. Namun kini, cover intro temen-temen bisa tampil lebih dinamis karena menggunakan teks animasi secara cepat dan mudah.

    Clip video ini merupakan hasil ngoding yang nanti akan kita buat. Hasil ngoding dijalankan lewat browser Mozilla atau Chrome, lalu direkam menggunakan aplikasi perekam layar seperti Active Presenter.

    Bagi temen-temen yang ingin langsung ngoding, source coding-nya sudah saya sisipkan di akhir video, atau info detailnya bisa lihat deskripsi di bawah.

    Video ini lumayan agak panjang, karena menjelaskan tahap demi tahap terciptanya halaman WEBSITE.

    Pokoknya banyak teknik baru penulisan, solusi dan hal-hal menarik lainnya di video ini.

    Oh yaa penulisan ini masih tetap menggunakan bahasa web programing HTML, CSS3 dan Vanilla JavaScript tanpa menggunakan framework.

    Berikut ini beberapa aplikasi yang membantu penyelesaian proses video ini.

    Penting!!! Sebelum membuat tutorial ini disarankan sebaiknya melihat dulu video sebelumnya:

    Aplikasi Ngoding:
    Klik disini

    Aplikasi Perekam Layar:
    Klik disini

    Video ini dilengkapi cuplikan lengkap source code, tetapi tidak menyertakan source code file.

    00:00 - 02:40 Intro
    02:40 - 03:32 Kode HTML
    03.32 - 05:25 Kode CSS
    05:25 - 06:12 Kode ekspresi pada Javascript
    06:12 - 11:20 Membuat fungsi kontruksi
    11:20 - 12:05 Fungsi change pada addEventListener
    12:05 - 17:25 Fungsi Motion untuk Animasi
    17:25 - 20:40 Fungsi push, findIndex() dan ekspresi array
    20:40 - 22:40 Menambahkan warna dan spasi per kata
    22:40 - 28:30 Menambah latar gambar
    28:30 - 33:40 Membuat animasi fadeOut
    33:40 - 35:45 Menghilangkan kotak select saat memulai animasi
    35:45 - 38:25 Fungsi Math.random() pada animasi
    38:25 - 41:15 Membuat posisi teks dan ukuran font
    41:15 - 44:22 Membuat ekspresi Object
    44:22 - 44:17 Menambah beberapa keyframes animasi
    44:17 - 45:50 Source Code (HTML, CSS, JavaScript)
    45:50 - 46:24 Penutup

  • PlayList u Mahir Ngoding

    PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING

    Dibuat: ddQiaChannel | Posting : 25 Feb 2019

    Dibuat pada tanggal 25 Februari 2019, video tutorial tentang tahap awal dalam pembuatan web programming.

    Tahap-tahap apa saja yang harus diperhatikan? Simak video ini hingga selesai.

    Klik untuk lihat dan Subcribe Channel Youtube

  • PlayList u Kuliner Bandung

    Kuliner Bandung | "Kerasa banget ikannya" | Ngiler Baso Tahu Lina Bandung

    Dibuat: ddQiaChannel | Posting : 02 Feb 2019

    Assalamu'alaikum.

    Lagi jalan-jalan di Alun-alun Bandung, mampir ke Baso Tahu Lina. Tadi tuh jam 11.30, banyak banget yang lagi pada makan.

    Jadi penasaran pengen nyoba... Tadi kita pesen baso tahu, siomay, pare, kol dan kentang. Baso tahu dan siomay-nya berasa banget aroma ikan tenggiri. Pare-nya gak berasa pahit banget, tapi sayang bumbu kacangnya dikit dan gak ada sambalnya. Yang suka asem, bisa tambahi jeruk mipis yang disediakan di meja.

    Secara keseluruhan, mangtaps dehh, harga relatif murah. Masing-masing dibandrol tiga ribu rupiah. Ukurannya lumayan gede.

    Minumannya cuma nyediain teh botol ama air mineral aja.

    Cukup sekian info kuliner di ddQia Channel, bagi yang seneng nyoba jajanan di Bandung gak salah deh nyobain Baso Tahu Lina. Bisa dibungkus buat oleh-oleh juga.

    Terima kasih sudah nonton video kita. Jangan lupa subscribe, share, like dan komentar yaaa.

    Wasalamu'alaikum.

    Klik untuk lihat dan Subcribe Channel Youtube

  • PlayList u Javascript

    Responsive Animation SLIDER using Vanilla Javascript, HTML & CSS

    Dibuat: ddQiaChannel | Posting : 21 Jul 2019

    Video tutorial kali ini membahas cara ngoding untuk mengolah pergantian foto atau gambar agar otomatis looping atau lazim disebut slider/karusel yang digunakan di awal laman website.

    Slider memberi kemudahan kepada pengunjung untuk mengetahui konten-konten apa saja yang dibahas di dalam sebuah website.

    Bahasa pemograman yang dipergunakan adalah bahasa HTML, CSS dan Javascript. Tidak mempergunakan framework apapun.

    Fungsi Interval menjadi pemeran utama dalam pengelolaan alur pergantian slider ini.

    Selain itu, fungsi setTimeout membantu dalam proses pengaturan animasi. Untuk pengembangan berikutnya, akan disertakan fungsi tombol navigasi, touch mobile dan fungsi klik mouse.

    Versi perbaikan mendukung tombol/button dan Touch effect:
    Lihat Video.

    Link download GitHub:
    Download kode

    Link download Official Website:
    Unduh kode

    Kode ini gratis, bisa dimodif. Jika berkenan setelah download kode ini, dukung kami dengan cara:

    Subscribe dan like Youtube Channel "ddqia Channel"

    Terima Kasih telah menyaksikan.

  • PlayList u Javascript

    ScrollLeft Navigation HTML+CSS3 (100% Javascript) Part 2

    Dibuat: ddQia Channel | Posting : 25 Jan 2019

    Akhirnya beres juga di upload setelah ada beberapa kendala... HP yang dipake buat edit video ini gak ada space-nya. Jadi terpaksa harus dipotong durasinya.

    Sekali lagi maaf, maklum peralatannya terbatas. Ngoding video ini dibuat lewat software Videoshow yang di install di OPPO A37. Capture layar HP menggunakan software Mobizen.

    Tadi siang pinjem dulu PC, buat capture layar kode-kodenya biar keliatan bagus... Pake PC dualcore T4400 yang ramnya 2gb, hdd 320gb, layar lcd 17". Software caputernya yang gratisan pake ActivePresenter.

    Semoga video part 2 ini bisa membantu teman-teman yang seneng ngulik website khususnya yang pakai bahasa javascript.

    Terima kasih sekali lagi, maaf atas kekurangan, support boleh dengan cara subscribe, like dan komentar atauu donasi boleh juga :)

    Terima kasih telah menyaksikan konten video kami.

    Klik untuk lihat dan Subcribe Channel Youtube

  • PlayList u Javascript

    ANIMATION GREENCLOUD using Pure Javascript, CSS & HTML | Mahir Ngoding Playlist

    Dibuat: ddQiaChannel | Posting : 26 Sep 2019

    Video ini tentang bagaimana membuat partikel awan yang memutari lingkaran menggunakan Javascript.

    Partikel kabut yang dibuat merupakan hasil manipulasi fungsi div HTML yang di bantu fungsi filter blur dari CSS.

    Lingkaran hitam (blackhole) dibuat menyerupai teleportasi menggunakan fungsi clip-path circle at center dari CSS.

    Sebanyak 35 partikel sinar di bawah dan kabut yang mengelilingi blackhole. Partikel keluar satu per satu yang diatur oleh fungsi setInterval kepunyaannya Javascript.

    Selain fungsi animation CSS, banyak sekali fungsi setTimeout dalam kode ini untuk menjalankan animasi seperti dalam pergantian teks.

    Komentar dan request di kolom komentar untuk mendapatkan file hasil ngoding ini. Kode ini GRATIS dan bisa dimodif.

    Dukung terus channel ini dengan cara menekan tombol SUBSCRIBE channel Youtube kami ddqiachannel.

    Terima kasih.

TENTANG

Website ini membahas informasi hiburan, kuliner, pendidikan, tutorial/cara desain, web programming, animasi, video/audio, menggambar dan menjadi Youtubers.

Website ini telah resmi menjadi bagian dalam Program Partner Youtube.

Fokus utama kami yaitu berkolaborasi membuat video e-learning & hiburan yang bisa disaksikan melalui laman website ini dan Youtube.