JavaScript Indonesia Channel

Membuat Side bar menu yang bersifat sticky dan ukurannya dinamis dengan HTML dan CSS

https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/

---

Membuat form input HTML dengan benar dan UX yang memudahkan bagi penggunanya

https://austingil.com/build-html-forms-right-user-experience/

---

Pemahaman antara beda Shadow DOM dengan Virtual DOM

https://dev.to/duomly/shadow-dom-vs-virtual-dom-differences-881

---

#stickybar #sticky #menu #html #css #vdom #shadowdom #forms #input #ux

CSS-Tricks

A Dynamically-Sized Sticky Sidebar with HTML and CSS | CSS-Tricks

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a

1.1K viewsRian YW, 01:44

JavaScript Indonesia Channel

Tips migrasi dari WordPress ke layanan Netlify Headless CMS dan Nuxt JS dengan teknik JAMStack

https://dev.to/lukeocodes/migration-from-wordpress-to-jamstack-nuxt-edition-59ak

---

Latihan panjang dan berseri membuat aplikasi web daftar menu pesanan makanan dengan Vue Nuxt JS, Node JS Apostrophe CMS, dan Docker. Tautan artikel selanjutnya ada di dalam blog berikut.

https://apostrophecms.com/blog/building-an-online-menu-using-apostrophe-headless-nuxt-nginx-part-1

https://apostrophecms.com/blog/apostrophe-headless-nuxt-nginx-part-2

—

Apostrophe CMS hadir untuk melengkapi trend Headless CMS yang mulai banyak digunakan setelah post-WordPress era, dimana pengembangan aplikasi web berbasis CMS semakin modular dengan Node JS Stack

https://apostrophecms.com/blog/the-jamstack

---

Latihan panjang sekali membuat aplikasi web Medium tiruan atau clone dengan Vue JS

https://kriss.io/building-medium-clone-with-vue-3/

---

Latihan membuat Chart JS component di Vue JS

https://blog.logrocket.com/creating-chart-components-in-vue-with-chart-js/

---

Latihan sederhana melakukan migrasi dari Vuex ke Vue Composition API

https://dev.to/lukasborawski/rewriting-vuex-module-to-composition-api-1ee3

---

Latihan dasar membuat Unit Testing di Vue JS dengan Jest

https://reactgo.com/unit-testing-vue/

---

Menggunakan Vue JS sebagai templating atau static site generator dengan Node JS

http://thecodebarbarian.com/using-vue-as-a-node-js-static-site-generator.html

---

Panduan lengkap tentang penggunaan Nuxt JS

https://levelup.gitconnected.com/the-complete-nuxt-guide-940751e1a6a5

#vue #nuxt #guide #aposthrope #cms #menu #chartjs #mediumClone #composition #nodejs #nowordpress

DEV Community

Migration From WordPress to Jamstack (Nuxt edition)

The Great Migration: Months of planning, tons of research, 3 proof of concepts. This is the result.

2.1K viewsRian YW, 01:33

JavaScript Indonesia Channel

Latihan dari Junior Developer Central membuat menu navigation yang letaknya ada di luar atau offscreen menu

https://youtu.be/PKv0Q29Ltqc

---

Latihan membuat pop up banner yang ada di bagian atas halaman aplikasi web, dari channel Dcode

https://youtu.be/x-LVUk2IxDU

---

Latihan dari Online Tutorials membuat efek paralax yang cantik dengan CSS dan HTML

https://youtu.be/0a7TeYL_Cs0

---

Latihan membuat tampilan kartu kredit yang transparan dengan CSS dan animasi flip

https://youtu.be/XeX1vsaufF0

---

Penjelasan beberapa attribute event handler di HTML

https://thecodeangle.com/a-detailed-breakdown-of-html-form-event-attributes/

---

Latihan sederhana membuat logo Facebook dengan CSS

https://dev.to/dasshounak/creating-pure-css-icons-5a55

#css #offscreen #menu #paralax #card #event #html #icon

YouTube

- YouTube

648 viewsRian YW, 00:34

JavaScript Indonesia Channel

Latihan penting dari Junior Developer Central tentang membuat offscreen navigation menu yang bersifat responsive ketika dibuka di layar smartphone

https://youtu.be/ZS3w5K0QtAA

---

Latihan ini merupakan kelanjutan dari latihan sebelumnya yaitu membuat Drop down menu yang bersifat responsive mobile

https://youtu.be/Wloh_n6M91Q

---

Latihan dari Online Tutorials membuat efek paralax yang mengikuti pergerakan kursor Mouse

https://youtu.be/-BexUIbuRp8

---

Latihan membuat efek Hamburger Menu dengan menggunakan CSS

https://dev.to/uzomezu/just-css-css-only-hamburger-nav-animation-h0a

---

#css #html #navigation #offscreen #dropdown #paralax #hamburger #menu

YouTube

Front-end Project: Creating an off-screen navigation menu

In this tutorial, we’ll be creating an off-screen menu using some simple HTML and CSS techniques.Get the code for the tutorial here: https://github.com/codeb...

1.1K viewsRian YW, 23:21

JavaScript Indonesia Channel

Membuat kustomisasi menu klik kanan dengan menggunakan JavaScript

https://itnext.io/how-to-create-a-custom-right-click-menu-with-javascript-9c368bb58724

---

Pengenalan fungsi Promise dan Async Await di JavaScript

https://dev.to/this-is-learning/a-promise-of-asynchronous-javascript-4all

---

Pengenalan lengkap tentang fungsi Iterator dan Generator di JavaScript

https://blog.logrocket.com/javascript-iterators-and-generators-a-complete-guide/

---

Menggunakan LocalStorage di dalam JavaScript

https://medium.com/swlh/using-local-storage-with-javascript-cb3713ca56c4

#rightClick #menu #async #await #promise #iterator #generator

Medium

How to Create a Custom Right-Click Menu With JavaScript

Here is how you can create a custom context (right-click) menu for your web application

750 viewsRian YW, 01:30

JavaScript Indonesia Channel

Latihan panjang dari Reed Badger dan Freecodecamp tentang pengenalan React JS dari dasar

https://www.freecodecamp.org/news/react-context-for-beginners/

---

Latihan dasar dan berseri membuat aplikasi fullstack JavaScript dengan MERN Stack

https://dev.to/mritunjaysaha/mern-stack-todo-application-backend-282a

---

Contekan tentang jenis jenis page rendering di React Next JS

https://dev.to/guydumais/next-js-the-ultimate-cheat-sheet-to-page-rendering-55eb

---

Latihan membuat context menu dengan React JS

https://blog.logrocket.com/how-to-create-a-context-menu-in-react/

---

Melakukan perubahan meta tags secara dinamis tanpa perlu fungsi SSR di React JS

https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/

---

#react #context #course #menu #meta #nodejs #mern #cheatsheet #nextjs

freeCodeCamp.org

React Context for Beginners – The Complete Guide (2021)

React context is an essential tool for every React developer to know. It lets you easily share state in your applications. In this comprehensive guide, we will cover what React context is, how to use it, when and when not to use context, and lots mor...

516 viewsRian YW, 00:02

JavaScript Indonesia Channel

Latihan dari Dcode membuat Hamburger Menu dan dibuka dengan efek sliding ke samping, dengan HTML CSS dan JavaScript

https://youtu.be/b6uLtL8M5nc

---

Pengenalan tentang CSS Module yang dapat dipakai langsung secara native JavaScript

https://css-tricks.com/css-modules-the-native-ones/

---

Latihan lain tentang membuat component Hamburger menu

https://dev.to/anjalijha22/creating-a-hamburger-menu-36lc

#css #dcode #hamburger #menu #module

YouTube

How to Create a Push Navigation Menu - HTML, CSS Web Design Tutorial

In today's video I'll be showing you how to create a push-style navigation menu. This technique means your navigation menu will appear off the screen (to the left), and then we use CSS3 transform to push the content to the right when the user opens the navigation…

643 viewsRian YW, 23:37

JavaScript Indonesia Channel

Cara menghubungkan CSS ke HTML dengan link stylesheet

https://www.freecodecamp.org/news/external-css-stylesheets-how-to-link-css-to-html-and-import-into-head/

---

Pengenalan tentang HTML dan contoh nya

https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/

—-

Cara sederhana membuat Hamburger menu dengan CSS

https://levelup.gitconnected.com/pure-css-hamburger-menu-c5eafc8d941d

#html #css #hamburger #menu

freeCodeCamp.org

External CSS Stylesheets – How to Link CSS to HTML and Import into Head

It is considered a best practice to have your CSS stylesheets in an external file. So how can you link that CSS to your HTML file? Linking to an external CSS file is an important part of any HTML page boilerplate. And in this article, we'll learn how...

629 views23:14

JavaScript Indonesia Channel

Membuat efek tetesan air pada menu bar dengan CSS dan JavaScript

https://dev.to/romaopedro199/tap-bar-with-liquid-animation-using-css-and-javascript-2l99

---

Membuat image slider sederhana dengan HTML, CSS dan JavaScript

https://dev.to/shantanu_jana/how-to-create-an-image-slider-using-html-css-and-javascript-mo0

#animation #slider #menu #bar

DEV Community

Tap bar with liquid animation using CSS and JavaScript

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look...

1.0K views01:36

JavaScript Indonesia Channel

Latihan penting bersama Online Tutorials membuat menu Dropdown select dengan HTML, CSS, dan JavaScript

https://youtu.be/uFIl4BvYne0

---

Latihan membuat Ribbon label dari suatu card element dengan HTML dan CSS

https://youtu.be/znBmUqBZ4Jg

---

Latihan keren bersama Online Tutorials membuat Circular Navigation Menu dengan HTML, CSS, dan JavaScript

https://youtu.be/ShPPkZEeLPo

---

Membuat Button Toggle Menu dengan HTML, CSS, dan JavaScript

https://youtu.be/TD-MFXs2M5E

---

#onlinetutorials #css #html #dropdown #label #circular #menu #button #ribbon

YouTube

Custom Select Menu Dropdown using Html CSS & Vanilla Javascript | Dropdown Menu @OnlineTutorialsYT

Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exp…

1.6K views23:22

JavaScript Indonesia Channel

Membuat Navigation menu dengan navigation indicator yang unik bersama channel Online Tutorials

https://youtu.be/a3rofqqrTBE

#navbar #navigation #menu

YouTube

Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects 02

811 views01:20

JavaScript Indonesia Channel