KOLEKSI VIDEO
-
PlayList u Javascript
MENU NAVIGATION STARWARS - LIGHTSABER USING PURE JAVASCRIPT, HTML and CSS | Mahir Ngoding Playlist
Dibuat: ddQiaChannel | Posting : 17 Jul 2019
Ngoding animasi menu ini terinspirasi dari salah satu film favorit kami yaitu Star Wars Series. Film terbarunya akan tayang pada bulan Desember 2019. Saya sisipkan juga cuplikan trailer dari film terbarunya di video tutorial ini.
Senjata andalan para Jedi ini dikenal dengan nama Lightsaber, pedang laser berkekuatan super ini bisa menghancurkan apa saja termasuk menu navigasi di video tutorial ini.
Menu dengan efek Lightsaber ini dibuat menggunakan bahasa HTML, CSS dan Javascript tanpa mempergunakan framework atau lebih di kenal dengan nama Vanilla Javascript.
Bagi yang ingin mendapatkan kode ini secara gratis, bisa kunjungi GitHub atau ke website ini untuk mengunduhnya.
Download files:
Klik untuk mengunduh
Link GitHub:
Klik ke laman Unduhan
Video Sebelumnya:
AUTOMATICALLY CENTER POSITION!!! HTML CSS 100% JAVASCRIPT | Mahir Ngoding Playlist
Klik lihat Video
PERHATIAN!!! CARA SEBELUM NGODING | LANGKAH AWAL yang harus diperhatikan! | MAHIR NGODING
Klik lihat Video
Kode ini gratis, bisa dimodifikasi sesuai keinginan. Jika ada pertanyaan, silahkan komentar di dibawah ini.
Dukung terus channel ini dengan cara menekan tombol subscribe, like dan share.
Terima kasih telah menyaksikan.
-
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 TOUCH SLIDER USING ANIMATION BACKGROUND | Javascript, HTML & CSS | Mahir Ngoding Playlist
Dibuat: ddQia Channel | Posting : 14 Aug 2019
Ngoding responsive slider kali ini dilengkapi tombol navigasi dan mode geser (swipe mode) pada setiap gambar/foto slider serta diujicoba melalui browser chrome yang dijalankan menggunakan komputer dan handphone
Ukuran file ini tidak lebih dari 15kb, jika menggunakan framework akan membengkak hingga ukurannya diatas 100kb. Sehingga ngoding tanpa framework jauh lebih hemat.
Video di edisi kali ini merupakan revisi dari semua konten video yang membahas #ngoding slider. Diantara video terdahulunya bisa dibuka di link Responsive Animation Slider dan Responsive Slider
Penulisan kode ini murni mempergunakan bahasa javascript atau dikenal dengan sebutan vanillaJS yang selalu membaur dengan HTML dan CSS.
Tak ketinggalan, dibahas pula beberapa perangkat yang dicoba untuk menguji hasil pengodingan ini. Diantaranya PC jadul dual core, hp Oppo A37 dan hp Realme 3 Pro. Manakah yang paling bagus performanya? Untuk tau jawabannya, saksikan video ini sampai akhir.
Software editing menggunakan ATOM, browser dites lewat Mozilla dan Chrome. Editing video dan perekaman layar masih tetap setia menggunakan aplikasi Android VideoShow dan Active Presenter.
Pengolahan animasi di dalam video ini sebagian besar menggunakan HTML dan CSS. Insya Allah, dalam kesempatan lain akan dibuat efek-efek video tutorialnya secara terpisah.
Semua hasil ngoding didokumentasikan ke dalam video ini. Mulai dari kode HTML sampai Javascript, jadi tonton sampai selesai yaa.
Bagi yang ingin kode (source code) yang sudah jadi dalam bentuk file, bisa tulis permintaan atau request di kolom komentar di bawah sampai dengan minggu depan, jadi buruan request dan komentar di bawah ini!
Kodingan ini GRATIS dan boleh dimodif sesuka hati. Indahnya berbagi untuk para peminat ngoding. .
Terima kasih telah menyaksikan video ini. Dukung terus channel ini. Jangan lupa tekan tombol subscribe bagi yang belum bergabung di channel ini.
Like dan bagikan video ini. Komentar, request dan saran bisa ditulis di bawah. -
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 Javascript
AutoFOKUS Animation EFFECT: My Baby Boy | Pure JS, HTML & CSS | Mahir Ngoding playlist
Dibuat: ddQia Channel | Posting : 10 Aug 2019
Bagaimana cara membuat visual efek yang semula gambar backgroundnya gelap dan buram menjadi cerah dan jelas.
Video ini dibuat menggunakan bahasa web programming HTML, CSS dan Javascript (murni) tanpa framework.
Bagi yang ingin kode ini secara gratis, silahkan klik tombol subscribe dan request/komen di kolom komentar dibawah ini. Gratis tidak perlu bayar.
Fungsi CSS mempergunakan clip-path dan filter blur.
Fungsi Javascript menggunakan addEventListener input, mousemove dan fungsi keyCode.
Bagi yang baru bergabung, silahkan tonton video sebelumnya di ddQia Channel.
TAHAP AWAL SEBELUM NGODING
Lihat Video
MEREKAM LAYAR KOMPUTER GRATIS
Lihat Video
PERANGKAT MINIM TAPI BISA BIKIN VIDEO JADI VIRAL
Lihat Video
Terimakasih telah menyaksikan, dukung terus channel ini dengan cara menekan tombol subscribe, like, share dan jangan lupa komentar. -
PlayList u HTML & CSS doang
CREATIVE!! Cara Mudah Bikin Sendiri Icon untuk Website | HTML, CSS, SVG
Dibuat: ddQia Channel | Posting : 05 Aug 2019
Bagaimana cara membuat icon layaknya font awesome dan bagaimana cara membuat icon menggunakan vector berbasis SVG. Tonton video ini sampai akhir agar tau cara-caranya.
Inkscape salah satu software gratis yang bisa mengolah gambar berekstensi SVG.
Hasil beberapa olahan svg ini dapat dijadikan font dengan mempergunakan bantuan Glyphter.com, salah satu mesin website yang merubah setiap file svg menjadi kumpulan simbol/icon berbentuk font.
Simbol atau icon ini pasti akan membuat tampilan laman website semakin menarik.
Video sederhana ini semoga bisa memberikan informasi khususnya bagi para peminat web desain dan programing.
Terima kasih telah menyaksikan konten video ini. Dukung terus channel ini dengan cara klik tombol subscribe. Selain itu, ditunggu komentar atau pertanyaan yang berhubungan dengan video ini.
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.