Zaenal Arifin

  Tema disini adalah tampilan gambar yang berwarna, ada yang soft, powerfull dan masih banyak lagi. Di segmen kal ini kita akan membahasa tentang tema-tema yang bagus di Vscode. 5 Rekomendasi Tema Vscode  1. One Dark Pro One Dark Pro adalah salah satu tema yang sangat banyak digunakan di Vscode ada sekitar 6M lebih user yang mendownload tema ini. Di tema ini menyediakan set color diantaranya one Dark Pro, one dark pro dakter, one dark pro flat dan mix. 2. Dracula Official Dracula Official ini adalah salah satu tema yang mempunyai warna yang soft dan nyaman untuk digunakan, dan tidak banyak warna pada teks editor anda. Cocok untuk anda yang menyukai warna yang soft dan tidak terlalu terang. Tema ini juga tak kalah populer, ada sekitar 4M user yang mendownload tema ini. Dracula Official juga menyediakan 2 set color, yaitu dracula dan dracula soft. 3. SynthWave '84 SynthWave '84 ini adalah tema yang sangat powerfull dan sangat mencolok tema ini menurut saya cocok untuk anda ketik...

Extension adalah alat bantu tambahan yang ada di visual studio code. Extension ini gunakan untuk mempermudah user untuk melakukan sesuatu. Contohnya untuk melihat hasil codingan yang sudah di lakukan.  Di segmen kali ini saya akan memberikan rekomendasi Extension VSCODE untuk web development. Apa saja? Baca selanjutnya 1. Live server Extension ini adalah Extension yang berguna untuk melihat codingan yang sudah kita buat, dengan cara klik kanan lalu pilih live server. Keunggulan extension ini adalah ketika kita menjalan kan suatu file maka hasil yang di tampilkan tidak usah di refresh lagi, akan otomatis ngerefresh dengan sendirinya. 2. Vscode-icons Extension ini adalah Extension yang berfungsi untuk memperindah tampilan folder yang kita punya. Tidak hanya itu, semisal kita membuat file html, icon html tersebut akan muncul di sebelah nama file yang kita buat. 3. Auto Rename Tag Extension ini adalah Extension yang berfungsi untuk mengganti tag dan tag yang sama akan di ubah secara ot...

  Button adalah tombol yang tampak pada layar, pada sebuah program yang jika diklik akan terkait dengan perintah tertentu. Di segmen kalininkita akan mencoba untuk membuat button 3D. Menggunakan HTML dan CSS. Bagaimana cara membuat nya? Ikuti saya lesgooo.... Langkah pengerjaan 1. Buka teks editor kalian 2. Buatlah sebuah file index.html 3. Buat kerangka html 4. Kita buat tag <div> yang mempunyai class container. Dan di dalam tag <div> buat tag <button>, seperti Gambar di bawah  5. Kita beri style tag <button> ini dengan mengetikan sintak di bawah ini  6. Buat juga Hover dari tag <button> ketikan sintak di bawah ini  7. Agar tag <button> ketengah, beri style pada tag <div>. Ketikan sintak di bawah ini  8. Jalankan file index.html, maka hasil dari code yang kita coba akan seperti gambar di bawah Ya, begitulah teman" cara membuat Button 3D dari HTML dan SCC, yah sekian dari saya kurang lebih nya saya minta maaf. ~Zenprojec...

Dikutif dari Wikipedia Animasi  adalah  film  yang merupakan karya tangan ( gambar ) yang bergerak. Pada awal penemuannya, animasi dibuat dari berlembar-lembar kertas gambar yang kemudian di-"putar" sehingga muncul efek gambar bergerak. Dengan bantuan  komputer  dan  grafika komputer , pembuatan film animasi menjadi sangat mudah dan cepat. Bahkan akhir-akhir ini lebih banyak bermunculan animasi  3D  daripada animasi  2D . Nah, sekarang saya akan memberikan "5 Akun Animasi Lucu di TikTok" siapa saja? 1. Vernalta Di   akun ini teman" akan disuguhkan animasi yang sangat kocak, dan banyak tokoh-tokoh yang banyak diantara nya tutu, Martin, kucing oyen, dan masih banyak lagi. Animasi ini menceritakan para tokoh yang barbar. Hati-hati jika kalian menonton animasi ini di dekat orang tua. Lebih lengkapnya klik link ini untuk menonton.  Vernalta 2. DhotDign Di akun ini teman" akan animasi yang di peran kan oleh 5 sekawan yang sering disebut g...

Effect Zoom Img On-Hiver adalah dimana ada suatu gambar jika kursor tidak mendekati gambar, maka gambar tidak akan berubah, sedangkan jika kursor masuk ke daerah gambar, gambar akan merespon zoom secara otomatis.   Bagaimana cara membuat Effect Zoom Img On-Hiver tersebut? Mari kita coba membuat Effect Zoom tersebut disini, ikuti cara yang saya salkukan. Lesgoo... Langkah pengerjaan 1. Siapkan Img/gambar yang kan di buat untuk bahan konten  2. Pindahkan gambar yang sudah dipilih ke teks editor teman" (harus satu folder dengan file html yang dibuat seperti pada gambar di bawah) 3. Buka teks editor teman" lalu buat file index.html seperti gambar diatas 4. Buat struktur html, lalu ketikkan sintak di bawah  5. Buat file style.css, pada folder yang sama. Lalu sambungkan file html dan CSS dengan menggukan sintak dibawah. 6. Ketikan sintak dibawah di file style.css 7. Dan untuk Hover nya ketikan sintak di bawah 8. Jalankan file html. Output yang dihasilkan seperti vidio diba...

Website merupakan k umpulan halaman yang berisi informasi tertentu dan dapat diakses dengan mudah oleh siapapun, kapanpun, dan di manapun melalui internet. Nah jika pada segmen kemarin kita membahas channel YouTube yang membahas sekitar dunia teknik informatika, sekarang kita akan membahas tentang website untuk belajar coding gratis. 1. W3school  Di Website ini teman-teman bisa belajar banyak berbagai bahasa pemrograman, diantaranya python, c++, React, nodejs, dan masih banyak lagi. Di web ini juga kalian bisa langsung peraktek mengenai bahasa pemrograman yang teman-teman sedang pelajari. Dan di website ini juga teman teman akan di beri sertivikat jika sudah mempelajari semua bahasa yang tersedia. Langsung aja cek website nya di sini  W3school 2. Free Code Camp Di Website ini teman-teman bisa belajar banyak berbagai bahasa pemrograman, diantaranya JavaScript, sql, python dan tidak hanya bahasa pemrograman, website ini juga menyediakan materi seperti responsiv web design, datab...

Kalian ingin belajar bahasa pemrograman/coding? Tapi takut mahal? Mahal itu jika kalian mengikuti pelatihan pelatihan/workshop. Disini saya akan membagikan 7 Channel YouTube untuk belajar coding. Siapa saja ikuti saya! 1. Web Programming UNPAS Di Channel YouTube ini kalian bisa belajar bahasa pemrograman dengan sangat lengkap. Web Programming UNPAS banyak menyediakan Vidio-Vidio untuk belajar bahasa pemrograman mengenai Front End  dan BackEnd. Front End contohnya Html dasar, CSS dasar, JavaScript, dan masih banyak lagi. Sedangkan BackEnd ada bahasa PHP, JavaScript lanjutan, laravel dan banyak lagi yang lain nya. Jika ingin lengkap kunjungi saja Channel YouTube  Web Programming UNPAS 2. Dea Afrizal Di Channel YouTube ini kita bisa banyak belajar mengenai dunia programmer itu bagaimana saja. Tak hanya itu Dea Afrizal juga sering memberikan pembelajaran-pembelajaran mengenai bahasa pemrograman yang sering digunakan di dunia programmer. Seperti React Js, Nodejs, Express Js, Api da...

  Loading merupakan sebuah istilah yang digunakan untuk penunjuk bahwa sedang dalam proses muat/refresh. Loading juga banyak jenis nya seperti gambar di atas.  Mari kita mencoba membuat animasi loading, menggunakan CSS. Bagaimana cara nya ikuti saya. Langkah pengerjaan 1. Siapkan teks editor kalian 2. Buatlah sebuah file loading.html 3. Buat struktur html 4. Ketikan sintak berikut didalam tag <body>       Html 5. Buat file baru style.scc 6. Sambungkan file CSS dengan html yang sudah dibuat, dengan mengetikan sintak dibawah ini dalam file html di dalam tag <head> 7. Masukan sintak dibawah ini kedalam file CSS Css 8. Masukan juga animasi dengan mengetikan code ini Animation 9. Run file html, dan yang akan di hasilkan dari kedua file tersebut adalah sebagai berikut: Hasil Ya, begitulah cara membuat animasi loading dengan menggunakan CSS. Sekian dari saya terimakasih ~Zenprojek~  

  Kali ini kita akan membuat logo Apple dengan menggunkan bantuan font awesome. Bagaimana cara membuatnya? Ikuti saya  Langkah pengerjaan 1. Kalian buka teks editor kalian 2. Buat file logo.html 3. Buat struktur html 4. Masukan link di bawah ini ke dalam tag <head>.   Atau jika ingin lebih gampang pergi ke google lalu ketikan font awesome cdn. Salin URL seperti gambar di bawah. Lebih gampang lagi klik Link  ini. 5. Ketikan sintak dibawah ini ke dalam tag <body> 6. Buat tag <style> di dalam tag <body> lalu ketikan code di bawah ini 7. Tambah kan juga animasi pada tag <style>, ketik sintak di bawah ini 8. Jalan kan file logo.html, maka output yang dihasilkan seperti di bawah Keterangan Jika ingin mengganti logo/icon. Cari saja di google font awesome, lalu cari icon yang kalian inginkan copy tag yang sudah di siapkan. Jika ingin lebih mudah klik ini Ya, sekian dari saya. Selamat mencoba ~Zenprojek