Ngoding Mastery
Ngoding Mastery
  • Видео 31
  • Просмотров 205 165
Cara Membuat Fungsi Toggle dengan onClick di ReactJs
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery...
Cara Membuat Fungsi Toggle dengan onClick di ReactJs
Pada video kali ini, kita akan membuat sebuah fungsi toggle untuk menambahkan dan menghapus sebuah class pada element, dengan menggunakan react hook yang bernama onclick.
- Yang akan kita Pelajari -
1. Belajar React Hook Dasar yaitu onClick.
2. Membuat Fungsi Toggle dengan onClick.
3. Menambahkan dan Menghapus Class pada Element dengan Fungsi Toggle yang sudah dibuat.
4. Mengaplikasikan Fungsi Toggle pada Project Sederhana yang sudah dibuat.
- Extension Front End (install yang diperlukan saja) -
1. HTML CSS Support
2. Color Highlight
3. Color Info
4. Auto Close Tag
5. Auto Rename Tag
6. Bet...
Просмотров: 177

Видео

Membuat Website Responsive dengan ReactJs dan TailwindCSS dari Nol untuk Pemula
Просмотров 3,8 тыс.3 месяца назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada video kali ini, kita akan membuat website responsive dengan reactjs dan tailwindcss, yang dimana kita akan membuat websitenya dari nol, dengan menggunakan sebuah alat pengembang yaitu vite, kemudian frameworknya reactjs dan tailwindcss sebagai stylenya. - Yang akan kita Pelajari - 1. Belajar Membuat Website dengan Vite, ReactJs, ...
Tutorial Membuat WEBSITE RESPONSIVE dengan Bootstrap 5 (2024)🚀+ Deploy ke GITHUB PAGES
Просмотров 1,9 тыс.4 месяца назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada video kali ini, di Tutorial Membuat WEBSITE RESPONSIVE dengan BOOTSTRAP 5 (2024), kita akan membuat sebuah website responsive dari nol step by step untuk pemula, dan juga kita akan menambahkan sedikit bumbu yaitu Animate Style dan AOS. - Yang akan kita Pelajari - 1. Membuat Website Responsive dengan Bootstrap 5 untuk Pemula dari ...
Tutorial Membuat WEBSITE RESPONSIVE dengan HTML CSS JS (2024)🚀- ditambah AOS SWIPER!!!
Просмотров 1,9 тыс.5 месяцев назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada video kali ini, kita akan Belajar Membuat Website Responsive dengan HTML CSS JS, dan ditambah dengan beberapa komponen atau libary dari Javascript seperti AOS, SWIPER, Fungsi Load More dan juga sebagainya, Lengkap step by step. - Yang akan kita Pelajari - 1. Membuat Project Website Responsive dengan HTML CSS JS Beginner Friendly ...
Membuat CRUD dengan NodeJs, Express, ReactJs, MongoDB - Tutorial MERN Stack #1
Просмотров 1,3 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Tutorial MERN Stack yang Pertama ini, kita akan membuat CRUD dengan NodeJs, Express, ReactJs, MongoDB, serta Tools yang lainnya. - Yang akan kita Pelajari - 1. MERN Stack (Beginner Friendly) 2. Belajar membuat CRUD API dengan NodeJs, Express, Mongoose (MongoDB), Joi (Validation dan lainnya. 3. Belajar membuat CRUD dengan ViteJs, ...
Ternyata MUDAH! Cara Publish Website REACT dengan NETLIFY
Просмотров 687Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Video kali ini, kita akan belajar Cara Publish Website REACT dengan NETLIFY, jadi Netlify adalah salah satu Platform atau Layanan Gratis yang biasa digunakan untuk Deployment Website Statis selain Github Pages. - chapter - 00:00 - Intro 01:31 - Sign Up 02:30 - 2 Cara Deploy 02:50 - Cara Pertama (Deploy Manual) 05:16 - Cara Kedua ...
Tutorial React Website - Membuat Website Responsive dengan ReactJs Vite Bootstrap Swiper ...
Просмотров 45 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Tutorial React Website kali ini, kita akan Membuat Website Responsive dengan ReactJs, Vite, Bootstrap/React-Bootstrap, React-Router, Swiper, Animate Style, Animate On Scroll, Accordion, dan komponen - komponen lainntya - Benefit yang akan didapatkan - 1. Belajar Menggunakan React Js dengan VITE (Beginner Friendly). 2. Belajar Mem...
Tutorial REACT ROUTER 6 untuk PEMULA! - React Router Tutorial For Beginners
Просмотров 532Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Tutorial React Router 6 untuk Pemula ini, Kita akan mempelajari sebuah library yang biasa digunakan pada ReactJs untuk membuat sebuah Route yang bernama React Router Versi 6 . - Yang akan kita Pelajari - 1. React Router v6.9 For Beginner (Basic) 2. Cara install React Router 6. 3. Komponen Utama React Router 6. 4. Cara menggunakan...
Membuat Website WISATA Menggunakan HTML CSS JS - Landing Page Projects #4
Просмотров 4,2 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Landing Page yang ke Empat ini, kita akan Membuat Website WISATA Menggunakan HTML CSS JS, serta pada video kali ini kita akan menambahkan beberapa komponen pihak ketiga, seperti SWIPER JS, ANIMATE STYLE, ANIMATE ON SCROLL dan komponen yang lainnya. - Yang akan kita Pelajari - 1. Belajar HTML CSS JS dengan membuat Real Projects. 2...
PORTFOLIO WEBSITE Menggunakan HTML CSS JAVASCRIPT + Deploy GITHUB PAGES | NGODING PROJECTS #3
Просмотров 3,5 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada video kali ini kita akan membuat PORTFOLIO WEBSITE Menggunakan HTML CSS JAVASCRIPT, kemudian kita akan Men-Deploy Website yang sudah kita buat kedalam GITHUB, dan kita akan menjalankan GITHUB PAGES nya agar Website yang kita buat dapat diakses oleh orang lain. - Yang akan kita pelajari - 1. Membuat Website dengan HTML CSS JS (Begin...
Tutorial membuat Website Responsive Lengkap dari Nol (TAILWIND CSS)
Просмотров 6 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada Tutorial video kali ini kita akan membuat website responsive lengkap dari nol dengan menggunakan Tailwind CSS serta membuka sesi baru pada Channel Ngoding Mastery yaitu Tailwind CSS Website - Highlight pada video kali ini - 1. Membuat website responsive dengan tailwind css versi 3. 2. Tips penggunakan Tailwind CSS 3 untuk membuat W...
Website COMPANY PROFILE Responsive dengan HTML CSS JS - Landing Page Projects #3
Просмотров 3,5 тыс.Год назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada segmen Landing Page #3 video kali ini kita akan membuat sebuah Website COMPANY PROFILE Responsive dengan HTML CSS JS. Dan yang lainnya. - Highlight pada video kali ini - 1. Membuat Website Landing Page dengan HTML CSS JS Step by Step. 2. Best Practice menggunakan HTML CSS JS. 3. Tips and Trick menggunakan FLEX dan GRID. 4. Tips and...
Membuat Website REAL ESTATE dengan BOOTSTRAP 5 - Landing Page Projects #2
Просмотров 8 тыс.2 года назад
Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery... Pada Landing Page Projects yang kedua ini, kita akan Membuat Website REAL ESTATE dengan BOOTSTRAP 5, serta menambahkan beberapa komponen pihak ketiga seperti Animate Style dan Animate On Scroll. - Highlight pada video kali ini - 1. Bootstrap 5 Projects untuk Pemula yaitu Landing Page. 2. Best Practice menggunakan Bootstrap 5. 3. Tips ...
Tutorial Membuat Website dengan React Js & Bootstrap 5 untuk Pemula dari NOL
Просмотров 14 тыс.2 года назад
*Use Headphone / Earphone for Recommendation Hallo Semuanya, Selamat Datang di Channel Ngoding Mastery, pada Tutorial Membuat Website dengan React Js & Bootstrap 5 untuk Pemula kali ini kita akan membuat sebuah Website Landing Page Responsive Sederhana dengan menggunakan sebuah Library React JS, dan juga Framework CSS Bootstrap 5. - Highlight Video Kali ini - 1. Membuat Website Landing Page Sed...
Tutorial Menambahkan DARK MODE pada Website dengan HTML CSS JS
Просмотров 1,5 тыс.2 года назад
Tutorial Menambahkan DARK MODE pada Website dengan HTML CSS JS
Cara Menambahkan ANIMASI ketika Scroll pada Website dengan AOS Cocok untuk Pemula (2022)
Просмотров 17 тыс.2 года назад
Cara Menambahkan ANIMASI ketika Scroll pada Website dengan AOS Cocok untuk Pemula (2022)
ANIMASI Ketika Website di REFRESH Sangat Mudah dengan ANIMATE CSS
Просмотров 4,1 тыс.2 года назад
ANIMASI Ketika Website di REFRESH Sangat Mudah dengan ANIMATE CSS
Landing Page Projects #1 - Tutorial Membuat Website LANDING PAGE dengan HTML CSS JAVASCRIPT (2022)
Просмотров 18 тыс.2 года назад
Landing Page Projects #1 - Tutorial Membuat Website LANDING PAGE dengan HTML CSS JAVASCRIPT (2022)
Membuat Website PORTFOLIO Responsive dengan BOOTSTRAP 5 + AOS | LOADER | ANIMATE STYLE ...
Просмотров 3,3 тыс.2 года назад
Membuat Website PORTFOLIO Responsive dengan BOOTSTRAP 5 AOS | LOADER | ANIMATE STYLE ...
Tutorial Membuat REAL ESTATE Website dengan HTML CSS JS - NGODING PROJECTS #1
Просмотров 3,4 тыс.2 года назад
Tutorial Membuat REAL ESTATE Website dengan HTML CSS JS - NGODING PROJECTS #1
Tutorial CSS FLEXBOX hanya 30 MENIT Lengkap untuk PEMULA
Просмотров 9032 года назад
Tutorial CSS FLEXBOX hanya 30 MENIT Lengkap untuk PEMULA
Tutorial Membuat RESTFUL API (Node Js, Express Js, MongoDB, Joi Validation,....)
Просмотров 1,1 тыс.2 года назад
Tutorial Membuat RESTFUL API (Node Js, Express Js, MongoDB, Joi Validation,....)
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Full Lengkap SWIPER & LIGHTBOX
Просмотров 8 тыс.2 года назад
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Full Lengkap SWIPER & LIGHTBOX
Membuat Menu Drop Down Responsive + Sidebar dengan HTML CSS JS step by step
Просмотров 1,2 тыс.2 года назад
Membuat Menu Drop Down Responsive Sidebar dengan HTML CSS JS step by step
Tutorial GITHUB dan GITHUB PAGES untuk Pemula dari Nol sampai PUBLISH
Просмотров 6772 года назад
Tutorial GITHUB dan GITHUB PAGES untuk Pemula dari Nol sampai PUBLISH
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 3
Просмотров 3,5 тыс.2 года назад
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 3
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 2
Просмотров 7 тыс.2 года назад
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 2
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 1
Просмотров 33 тыс.2 года назад
Tutorial Membuat Website Landing Page Responsive dengan HTML CSS JS Lengkap untuk Pemula | PART 1
Tutorial Membuat Website Responsive Sederhana dengan HTML & CSS (CSS Flexbox) untuk Pemula | PART 2
Просмотров 1,1 тыс.2 года назад
Tutorial Membuat Website Responsive Sederhana dengan HTML & CSS (CSS Flexbox) untuk Pemula | PART 2
Tutorial Membuat Website Responsive Sederhana dengan HTML & CSS (CSS Flexbox) untuk Pemula | PART 1
Просмотров 3,3 тыс.2 года назад
Tutorial Membuat Website Responsive Sederhana dengan HTML & CSS (CSS Flexbox) untuk Pemula | PART 1

Комментарии

  • @apaajayangbikinsayasenang2425
    @apaajayangbikinsayasenang2425 2 дня назад

    Kalau tak jago jago amat javacript tapi paham dasar nya bisa ikut ga bang?

  • @danynaufal2079
    @danynaufal2079 20 дней назад

    tutor paling jelas,tq

  • @restysetya9318
    @restysetya9318 26 дней назад

    izin bertanya, ini saya sampai pada penambahan button pada menit ke 43 dan mengalami kendala button tidak muncul kira-kira kenapa ya kak? saya sudah masukkan file hamburgers.css dan mengikuti tutorialnya sesuai yang di video🙏🏻

  • @mcgungtominay
    @mcgungtominay Месяц назад

    amal barokah buat masnya

  • @fahmipros7126
    @fahmipros7126 Месяц назад

    Thanks bg sangat bermanfaat

  • @b__yag
    @b__yag Месяц назад

    gimana kalau toggle ny di click juga berubah menjadi tanda silang yang ada transisi animation nya bang

  • @SystemEror-t9i
    @SystemEror-t9i Месяц назад

    amazing

  • @denidwijatmiko4658
    @denidwijatmiko4658 Месяц назад

    bang cara resize gambar bagian project gimana bang?

  • @wilsongurning895
    @wilsongurning895 Месяц назад

    Bagi kode nya pak 🙏 saya masih pemula

  • @RyuSan-k1m
    @RyuSan-k1m Месяц назад

    Bg kalau VSC bisa gk bg?

  • @b__yag
    @b__yag Месяц назад

    gokil bang, lu adalah developer angel

  • @iyaajadah8703
    @iyaajadah8703 Месяц назад

    berasa diajarin rhoma irama njirla

  • @vivoichsan1208
    @vivoichsan1208 Месяц назад

    lagi bang yang lain untuk proyek boostrap nya ... kapan rencananya

  • @ahmeddaniel-o8o
    @ahmeddaniel-o8o Месяц назад

    bang bagi file main.css

    • @ahmeddaniel-o8o
      @ahmeddaniel-o8o Месяц назад

      punyaku pas nambahin css untuk yang kelas malah gepeng pas layanya dibesarin kalau pas layarnya kecil normal

  • @cloudytutorial4622
    @cloudytutorial4622 2 месяца назад

    bagiaman cara membuka file yang kita simpan bang? saya coba buka html ga keliatan semua yang udah di edit, atau pas buka localhost can't be reach

  • @rizkyrodo6368
    @rizkyrodo6368 2 месяца назад

    done bang ikutin dari awal sampe akhir , auto subscribe , seharusnya lu layak 100k subs bang

  • @muhammadWidodo
    @muhammadWidodo 2 месяца назад

    mas mau tanya, itu di component homepage kan div paling luar dikasih className='homepage', class `homepage` itu bawaan tailwind atau buat sendiri ya?

  • @orangerb7033
    @orangerb7033 2 месяца назад

    Could not resolve "./dist/css/main.css" from "src/main.jsx" ini error apa ya ? saya coba deploy tapi ngak biisa

  • @bahrisamsul8821
    @bahrisamsul8821 2 месяца назад

    aman buat nge project ga ini om? atau harus ada lisensinya?

  • @Luthfihadi666
    @Luthfihadi666 2 месяца назад

    terimakasih om ini baru pertama kali nyoba react. sebelum nya pake vue

  • @nandarizkiadira4667
    @nandarizkiadira4667 2 месяца назад

    Makasih bang

  • @Putramadhann
    @Putramadhann 3 месяца назад

    bang untuk link nya kok ga scroll ya langsung aja gitu gaada scroll smooth nya

  • @noviantoekobudiman7633
    @noviantoekobudiman7633 3 месяца назад

    Terima kasih banyak untuk tutorialnya bang, sangat bermanfaat

  • @vivoichsan1208
    @vivoichsan1208 3 месяца назад

    buatin yang lain bang materi HTML CSS JS nya

  • @andikaaryaputra8092
    @andikaaryaputra8092 3 месяца назад

    Bang saya kok jalanin talwind perintah tidak ditemukan ya bantu jawab nang pemula bangat saya

  • @WorldOfNightcore17
    @WorldOfNightcore17 3 месяца назад

    Bang bikin project weather app dong bang pake reactJS

  • @vivoichsan1208
    @vivoichsan1208 3 месяца назад

    bang .. buatin card dan modal dong tapi masih pake JS dan CSS jadi nanti isi modal adalah barang barang yang dipilih dari card yang dibuat menggunakan CSS

  • @Dio-eh5sj
    @Dio-eh5sj 3 месяца назад

    Perbanyak video yang seperti ini bang

  • @alcode_04
    @alcode_04 3 месяца назад

    First🎉

  • @muhammadibrahim-rk9mn
    @muhammadibrahim-rk9mn 3 месяца назад

    request carousel bang

    • @freudian.
      @freudian. 2 месяца назад

      bener buatin carousel bang pake react

  • @rohman23908
    @rohman23908 3 месяца назад

    Lu udah kerja bang?

  • @Dio-eh5sj
    @Dio-eh5sj 3 месяца назад

    beuh mantap react tailwind🔥, saran bang bikin konten video pendeknya juga😁

  • @mamang9641
    @mamang9641 3 месяца назад

    Request project MERN sederhana bang😁

    • @NgodingMastery
      @NgodingMastery 3 месяца назад

      aman.. udah masuk list😁

    • @japanesequizdojo
      @japanesequizdojo 3 месяца назад

      @@NgodingMastery iya bang, project mern dong 🤘🤘 auto paling depan

    • @denisetiabudi9581
      @denisetiabudi9581 Месяц назад

      @@NgodingMastery ditunggu bang MERN sederhana nya hahaha

  • @japanesequizdojo
    @japanesequizdojo 3 месяца назад

    kebetulan banget bang gw lagi belajar tailwind

    • @NgodingMastery
      @NgodingMastery 3 месяца назад

      siap.. moga bermanfaat, kalau ada yang bingung bisa ditanyakan dikolom komentar😁

  • @NgodingMastery
    @NgodingMastery 3 месяца назад

    Tampilan Final Website => nm-react-tailwindcss.netlify.app/

  • @mutiaraichsan5061
    @mutiaraichsan5061 3 месяца назад

    bang.. ajarin tutorial GITHUB dong .. mulai dari nambah .. update dan delete .. saya enggak bisa bisa ni

    • @NgodingMastery
      @NgodingMastery 3 месяца назад

      @@mutiaraichsan5061 paling untuk github, saya saranin salah satunya di channel Pa Dhika (WPU), ada video git/github tersendiri, atau bisa juga yang video Kuliah Bareng Padika yang Git Workflow Untuk beberapa konten kedepan kalau di NM, belum masukin github ke list pembuatan konten😁

  • @mutiaraichsan5061
    @mutiaraichsan5061 3 месяца назад

    bang.saya lagi belajar boostrap... buatin tampilan yang lain dong praktek nya .. misalnya website rentang wisata daerah.. atau misalnya pameran lukisan ...

    • @NgodingMastery
      @NgodingMastery 3 месяца назад

      @@mutiaraichsan5061 untuk konten membuat website pakai bootstrap, sebenernya udah masuk list pembuatan konten, cuman ngga dibulan sekarang😁

  • @KrisnaKukuhWijaya
    @KrisnaKukuhWijaya 3 месяца назад

    terima kasih mas

  • @muhammaddava3686
    @muhammaddava3686 3 месяца назад

    Bang, font punyaku kok masih serif ya? Padahal udah mengikuti dari awal

  • @zakiulumudin2887
    @zakiulumudin2887 4 месяца назад

    Thx bang

  • @mohammadfaiznurochman593
    @mohammadfaiznurochman593 4 месяца назад

    Hampir setiap videonya menyertakan assetnya,terima kasih pak

  • @MrGunkbram
    @MrGunkbram 4 месяца назад

    Keren bang, buat e comerce pakai react jd bang

    • @NgodingMastery
      @NgodingMastery 4 месяца назад

      e comerce yaah🙂, kalau buatnya sih bisa, tapi nanti ngejelasinnya yang susah😅

  • @fadilahmardotilah3029
    @fadilahmardotilah3029 4 месяца назад

    Makasih banyak bang bermanfaat 👍👍🙏

  • @teguhaditya9379
    @teguhaditya9379 4 месяца назад

    Bang kok gak bisa download font di gogle font bang

    • @NgodingMastery
      @NgodingMastery 4 месяца назад

      @@teguhaditya9379 bisa, tapi tampilan website font.google.com nya udah beda sama yang sekarang

  • @MrGunkbram
    @MrGunkbram 4 месяца назад

    Kaka keren, buatin tutorial react js yang crud database dong

  • @hendryan1829
    @hendryan1829 4 месяца назад

    bang itu di hosting apa engga?

    • @NgodingMastery
      @NgodingMastery 4 месяца назад

      Di hosting pakai layanan Github Pages dari Github

  • @rivaldyrandiarachman3807
    @rivaldyrandiarachman3807 4 месяца назад

    gua nyaman dengan video video panjang yg kayak gini daripada yg per episode bang. udah gini aja berjam jam tapi langsung jadi.

  • @MultipurposeAkun
    @MultipurposeAkun 4 месяца назад

    Bang biasanya lu download asset gambar ² nya seperti itu di situs apa

  • @FreedyYikwa
    @FreedyYikwa 4 месяца назад

    smoga sukses selalu bang suka dengan coding yang abang buat ini terlalu mudah dan mudah di mengerti bang terimakasih atas tutorialnya bang, smoga lancar selalu bang thank you😘🤎

    • @NgodingMastery
      @NgodingMastery 4 месяца назад

      Aamiin.. moga bermanfaat juga ilmunya😁

  • @ahmadmanarulbaehaqi5033
    @ahmadmanarulbaehaqi5033 4 месяца назад

    keren mas