NGOBAR #23 - Membuat RESPONSIVE NAVBAR menggunakan FLEXBOX (HTML, CSS & Javascript)

Поділитися
Вставка
  • Опубліковано 8 січ 2025

КОМЕНТАРІ • 470

  • @denisrahmadi7936
    @denisrahmadi7936 3 роки тому +64

    Timestamp responsive with flexbox
    00:00 bikin navbar
    16:30 bikin 3 break point biar navbarnya responsive
    34:25 cara munculin menunya kesamping
    40:50 bikin script JS dikit aja
    kalo ada yg mau nambahin silakan

  • @shofiamrulloh8368
    @shofiamrulloh8368 4 роки тому +30

    Chanel bermanfaat seperti ini seharusnya bisa tembus lebih dari 1jt subscriber, terimakasih ilmunya bang, sehat selalu ✌️

  • @sangpembelajar3488
    @sangpembelajar3488 4 роки тому +79

    KEREN SIH CHANNEL WPU, SATU2NYA CHANNEL YG NGAJARIN NGODING DARI KONSRP DAN TEORI, ASLI KERENN BGT, JADI KALO NEMU MASALAH KAGA RIBET NYARINYA SOALNYA "MENGERTI" DAN "PAHAM" diajarin soalnya bukan cuma ngoding doang, KEREN BGT INIII😁😁

  • @zakkanativana1459
    @zakkanativana1459 4 роки тому +22

    Channel yang memiliki manfaat untuk mencetak generasi bangsa berpikiran maju ~ Sukses terus buat pak dika , sehat selalu.

  • @daydreamer5074
    @daydreamer5074 4 роки тому +29

    Wah keren ! Terimakasih untuk ilmunya Pak Dika. Saran saya, untuk nyembunyiin navbarnya atur ( right: -100% ) dan untuk munculin navbarnya lagi ( right: 0) , jadi gk usah pakai translateX supaya nanti waktu browsernya diperkecil navbarnya gk mucul2 kayak dibagian ini 40:31.

  • @dwiptarama
    @dwiptarama 2 роки тому +3

    makasih banget kang, saya yg belajar pemrograman dari nol banget bener-bener kebantu belajar di channel ini, penyampaian materinya jelas banget dan bener-bener detail. sekali lagi terima kasih banyak kang, mudah-mudahan sehat selalu dan video berbagi ilmunya ini jadi ladang pahala.. Aamiin

  • @idunowhoyouare
    @idunowhoyouare 4 роки тому +4

    terharu pak saia nontonnya, cara bapak ngejelasin materinya bener bener gak ada tanding. saia doakan semoga bapak sehat selalu. aamiin ya rab

  • @danangwahyu4825
    @danangwahyu4825 4 роки тому +53

    YaAllah, semoga danang bisa jadi dosen seperti pak sandika galih aamiin

    • @hattaafdillah1183
      @hattaafdillah1183 4 роки тому +1

      Semangat latihan kawan

    • @vebe3381
      @vebe3381 3 роки тому +2

      ayo danang sekarang sudah bisa apa? sudah 10 bulan. biar jadi motivasi kita2 wkwkw

    • @shenn.1624
      @shenn.1624 3 місяці тому

      ayo mas, sudah jadi dosen kah?? sudah 4 tahun yang lalu ini wkwkw

    • @Zaenrl
      @Zaenrl 3 місяці тому

      Sudah jadi rektor bang?

  • @MuhammadAli-co7ux
    @MuhammadAli-co7ux 3 роки тому +7

    banyak banget ilmu ilmu baru yang gw dapet di chanel ini.
    dan menurut gw, semua materi yang disampaikan jelas banget, jadi mudah dimengerti.
    semoga makin banyak dosen yang seperti pak sandhika.
    makasih pak. sehat selalu.

  • @NgodingPintar
    @NgodingPintar 4 роки тому +13

    Wah, menarik ini. Terima kasih pak dhika. Semoga kita semua sehat dan sukses selalu. Aamiinn.

  • @farizbhayuaji9937
    @farizbhayuaji9937 3 роки тому +3

    untuk yg .menu-togglespan:nth-child(4) transform-originnya bisa diganti "bottom left" dan yg .menu-toggle span:nth-child(2) bisa diganti "top left"

  • @mrfers1
    @mrfers1 Рік тому +2

    Makasih pak, akhirnya saya bisa buat navbar yang bagus dan responsive,dulu saya selalu mengalami masalah dibagian hamburger nav nya, tetapi setelah melihat vidio ini saya bisa mengetahui cara yang benar, semoga Ilmunya bermanfaat dan bapak sehat selalu 👍😁

  • @Unknown-hl1jd
    @Unknown-hl1jd 2 роки тому

    Alhamdulillah punya saya berhasil tidak ada masalah sama sekali, Terimakasih pak dika ilmunya sangat bermanfaat.

  • @ihsankihiy1182
    @ihsankihiy1182 3 роки тому

    terimakasih bang, saya tidak memiliki minat sedikitpun dalam hal per kodingan tapi saya bener2 mulai dari awal dan belajar dari abang. Terimakasih atas bantuannya bang.

  • @vickykanoju9509
    @vickykanoju9509 4 роки тому +1

    Sangat membantu yang mau belajar programming. Pak Shandika harusnya jadi staf ahli Presiden nhe. Orang pintar banyak. Tapi yang pandai mengajar dari mana dan metode yg dipakai, sangat sdikit. Semoga channel slalu sukses Pak.

    • @ibnualhakim1599
      @ibnualhakim1599 2 роки тому

      betull. Ngajarin orang memang susah, butuh skill komunikasi tersendiri. Makanya pak dhika bisa jadi dosen wkkw

  • @hujantitik
    @hujantitik 4 роки тому +1

    Selamat siang bapak. Terimakasih kasih ilmuannya. Berkat bapak saya sekarang sudah mampu membuat web sendiri. Semoga ilmu yg bapak berikan dapat berkah dan saya dapat bapak anggap sebagai murid. Terimakasih

  • @josapateleaser679
    @josapateleaser679 3 роки тому +1

    Aku lagi belajar html css, disini dpt java script kaget sih! ga ngerti ajaran dari dosen tapi belajar disini ngerti! makasih pak!

  • @BayuTutor-TI
    @BayuTutor-TI 4 роки тому

    *setiap kali saya belajar pemprogramman pasti saya selalu mampir ke channel ini, makasih ka atas ilmu nya. Bagi temen-temen yang berkenan memberikan feed back nya saya tunggu hihi*

  • @kolamhadiah6437
    @kolamhadiah6437 4 роки тому +6

    KONTEN IS THE BEST !!!
    manjur ilmu nya bang terima kasih :)

  • @a-mchannel6792
    @a-mchannel6792 4 роки тому +1

    Selama kuliah ga pernah nemu dosen ngajarin spt ini. Hmm kali ini lbh phm . Pst bangga mhsswany d ajarin bpk 😁

  • @rullyahsani4613
    @rullyahsani4613 2 роки тому

    Terima kasih pak dhika, dari FlexBOX ke GRID semua belajarnya disini
    semangat trus ngontent nya pak DOSEN

  • @harufan
    @harufan 4 роки тому

    Penyampaian nya enak bgt. G memusingkan apalagi sy yang baru memulai html css dan js. Terimakasih kang. Ditunggu posting2an lainnya (khususnya yg dasar2 heee)

  • @Arwina-qs7iw
    @Arwina-qs7iw Місяць тому

    terima kasih pak.. dari yang tidak paham html & css kini bertahap mulai paham

  • @wibowomuhmmad
    @wibowomuhmmad 4 роки тому +1

    Ini nih saya suka, teknik menyusahkan diri sendiri wkwkw, mantul pak 😁 22:58

  • @fajarkusumahputra8626
    @fajarkusumahputra8626 4 роки тому +3

    saya biasanya ngakalin menu toggle pake tabel for sama html entity yg kontennya diisi dengan ini ☰ .
    Makasih buat penjelasan flexbox nya pa, sangat bermanfaat , Sukses selalu .

    • @arifintajul4
      @arifintajul4 4 роки тому

      kalau di copas ke google, hamburger menu juga ternyata hhe

    • @lonerunner3733
      @lonerunner3733 4 роки тому

      label for kali ya? bukan table for . emang dengan label for kita ga usah resize & geser-geser checkbox-nya. karena di manapun letak checkboxnya kalo labelnya diklik checkboxnya ikut ke-klik. checkboxnya tinggal di-display none aja spy ga keliatan.

  • @RianY2K
    @RianY2K 4 роки тому +1

    mantap, akhirnya selesai juga nih nonton-nya, ga terasa sudah selesai aja saya ikutin tutorialnya , padahal durasinya 1 jam. Benar benar ok tutorialnya

  • @sumardiabdal
    @sumardiabdal Рік тому

    Wah....Detail banget, Terima Kasih Ilmunya Bang, Baru belajar, awalnya bingung, tapi skrg sdh agak ngerti

  • @hiszbulbahri6226
    @hiszbulbahri6226 4 роки тому

    Nonton videonya saya sampe tidur melek tidur melek.. ga kebayang biar bisa skillnya kaya bang dhika perjuangan belajarnya seperti apa :)

  • @khalidmahfudzABC
    @khalidmahfudzABC 4 роки тому +3

    Sebelumnya saya juga sudah liat videonya dev ed, tapi bikin action click burger menunya pake javascript, thanks pak udah pake css, jadi makin keasah ilmu "ngakalinnya" hehe

  • @sayidinaahmadalqososyi9770
    @sayidinaahmadalqososyi9770 3 роки тому

    semoga channel wpu bisa segera nembus 1 jt an,karna sudah follow dari tahun 2016

  • @kykurniawan
    @kykurniawan 4 роки тому +3

    Entah knapa selalu suka dengan cara Pak Dhika dalam menjelaskan materi, terimakasih Pak saya dapat ilmu lagi hari ini 🤩

    • @trik7419
      @trik7419 2 роки тому

      iy setuju, easy listening gitu trus jdi mudah dipahami gitu maksudnya

  • @muhamadikbal5571
    @muhamadikbal5571 2 роки тому

    Di video navbar ini banyak yang aku ngerti dri video" sebelum nya... Thanks Pak Shandika👍

  • @ElwinMusadi
    @ElwinMusadi 4 роки тому +4

    Wah ini yg saya tggu2. Selama gk tau cara buat responsive navbar sendiri, selalu pake punya bootstrap 😁.

    • @SigitWahyudi
      @SigitWahyudi 4 роки тому

      Tul

    • @ibnuhidayat3286
      @ibnuhidayat3286 4 роки тому

      Nanya bang.. punya ente work ga itu @media 576px masuk toggle device di mode developer?
      Punya ane kok ga masuk² iya 😬

    • @ElwinMusadi
      @ElwinMusadi 4 роки тому

      @@ibnuhidayat3286 work kok.

    • @alziganteng5802
      @alziganteng5802 3 роки тому

      @@ibnuhidayat3286 sama bang ane jg gak work makanya ane minta script nya pen bandingin beda nya ma script ane

  • @messichannel8348
    @messichannel8348 4 роки тому

    Penjelasannya sangat bermutu, saya mendapatkan ilmu dari Channel ini.

  • @MulaiDariNULL
    @MulaiDariNULL 4 роки тому +2

    29:54 ngerubah titik sumbu transform, keren kang, kira kira klo dibikin muter dulu 1 kali atau 2 kali jd kaya apa ya transisinya 😁

    • @zafransyatirariqo508
      @zafransyatirariqo508 4 роки тому

      Gw jd ngebayangin bang bakal kaya gimana 😄😄 , boleh dicoba tuh

  • @Bamz_SurvivaL
    @Bamz_SurvivaL 2 роки тому +1

    Your tutorials are appreciated. You explain everytNice tutorialng so simply and show the fundantals of producing. Many people and myself thank

  • @TitoOctagonal
    @TitoOctagonal 4 роки тому +1

    Aseli keren banget ❤️
    Cara menyampaikan jelas, lugas, dan mudah di mengerti
    Semoga sehat selalu bang,-
    Aamiin

  • @Programmer_noob.
    @Programmer_noob. 5 місяців тому

    Makasih banyak bang ilmu nya.. sangat² bermanfaat buat kita yg masih pemula

  • @ngasalahh8697
    @ngasalahh8697 2 роки тому +2

    alhamdulillah, terima kasih pak dhika. semoga sehat2 terus ya pak. biar bisa ngasih ilmu yang bermanfaat ke kita2 semua 😁💪

  • @belajarbarengimhas
    @belajarbarengimhas 3 роки тому

    channel ini layak diatas 2 jt subscriber!

  • @arifbudiman951
    @arifbudiman951 2 роки тому

    Terima kasih pak dika, saya bisa terbantu menyelesaikan submission course.

  • @iramoknasa5314
    @iramoknasa5314 4 роки тому +1

    ilmu yg bermanfaat kang, semoga berkah dan terus maju

  • @adhityagunawan4975
    @adhityagunawan4975 4 роки тому +1

    Ini nih channel favourite aku, semangat terus bikin video pak dosen 😊

  • @Aniiyuiy
    @Aniiyuiy 5 місяців тому

    guru terbaik dalem program otodidak saya yaitu Pak Sandhika galih

  • @zakiatunnufus5983
    @zakiatunnufus5983 4 роки тому +1

    Terimakasih pak tutorialnya. Semoga pak sandhika sehat selalu. Aamiin 🙏

  • @atqamz
    @atqamz 4 роки тому +3

    biar makin cakep boleh di tambah di css nya
    @media screen and (max-width: 576px) {
    nav ul{
    top: 50px; /*sesuai tinggi dari navbar*/
    height: calc(100vh - 50px); /*sesuai tinggi navbar*/
    justify-content: space-around; /*biar lebih rapi*/
    sekian :D

    • @ferialpiyasin
      @ferialpiyasin 4 роки тому

      Untuk media buat di mobile ga berfungsi nya.

  • @rizkyradityo6955
    @rizkyradityo6955 Рік тому +1

    Solusinya kalau gak pakai javascrip input checkboxnya diletakan sebelum ul. Jadi ul nya bisa di akses ketika di cheklis

  • @ariffiyana2814
    @ariffiyana2814 2 роки тому

    Mudah2an mas sandika tidak pernah berfikir untuk berhenti ngontent 🙏 ilmunya bermanfaat

  • @KarimAmrullah029
    @KarimAmrullah029 4 роки тому

    mantap pak dika, penjelasn materi kali ini, sehat selalu pak dika dan team wp unpas.

  • @naftaragaassestu5260
    @naftaragaassestu5260 4 роки тому

    Keren pak dika, semangat terus buat videonya, kami selalu mendukung

  • @tonohartono7957
    @tonohartono7957 3 роки тому

    Terima kasih ilmunya Pak! Sangat bermanfaat, sehat selalu Bapak!

  • @verlin971
    @verlin971 3 роки тому

    keren ya temen2? dalam hati jawab "banget pak" makasi ilmunya

  • @mutia88
    @mutia88 3 роки тому

    Pak Shandika, dosen terbaik🌻😊panjang umur sehat selalu pak

  • @FauzanAdzim
    @FauzanAdzim 4 роки тому

    Sehat terus pak sandi, saya senang dg Vidio bapak sangat jelas dan gampang dipraktekkan walaupun saya bukan anak kuliahan. Makasih pak

  • @amraninc9090
    @amraninc9090 2 роки тому

    Meskipun aku kurang paham tapi aku nonton sampai akhir supaya nanti klu aku belajar basic ada bayangan

  • @edarnimakmur
    @edarnimakmur 4 роки тому

    Makasih bang web programming Unpas tutorialnya bermanfaat sekali.Boleh di coba ni.

  • @iantech5951
    @iantech5951 3 роки тому

    Gw suka sama ni channel ngajarin teori" yg menarik ga jenuh ngeliatnya:v

  • @akhmadinhipobizz3
    @akhmadinhipobizz3 4 роки тому

    Thank You jadi inspirasi buat Toggle Slide dengan versi yang bebeda .. Suskses selalau.. Salam Developer Indonesia

  • @solehbepe1440
    @solehbepe1440 4 роки тому

    emang the pak dika sukses selalu , selau stay toon di channel ini

  • @diosatriadarma9882
    @diosatriadarma9882 3 роки тому

    Pada 40:34 ,navbar itu muncul dan hilang dikarenkan transition bapak settingnya ke All,akan lebih baik setting ke trasnform saja

  • @andyliebong2671
    @andyliebong2671 3 роки тому

    Mantap,.. jadi tambah semangat untuk belajar nya

  • @rafli_sugiarto
    @rafli_sugiarto Рік тому +1

    23:55
    Ini maskudnya gimana pak? Kenapa ngga langsung width dan heightnya 100%?

  • @iisss1489
    @iisss1489 4 роки тому

    Ass.. jadi semangat belajar sambil kerja dr rumah ada aja inovasi pk Dosen ni,, terimakasih banyak pk dhikaaa,,

  • @ibral800
    @ibral800 4 роки тому +1

    Keren mas... mudah2n cepat hafal semua coding pemograman... kasih tipsnya mas...😁 otak cepat error kalau masalah coding...🤭🤭

    • @arifintajul4
      @arifintajul4 4 роки тому

      jangan dihafal, yang penting dipahami hhe

  • @oktarioprajnawegiantoro3296
    @oktarioprajnawegiantoro3296 4 роки тому

    makasih pak sandhika galih , sudah memberikan ilmu gratis
    "sekarang, ngapain?"

  • @davidandriyan6727
    @davidandriyan6727 4 роки тому

    Ijin belajar bang...semoga barokah ilmu yg dibagikan.

  • @arianurjamal5416
    @arianurjamal5416 3 роки тому

    alhamdulillah baik pak,
    terimakasih sudah tanya kabar saya pak, ^_^

  • @AdityaRA6
    @AdityaRA6 4 роки тому

    Makasih, bermanfaat bagi saya, semoga selalu diberi kesehatan.

  • @khoirulsyarif2239
    @khoirulsyarif2239 4 роки тому +1

    Hadir pak , mhs jawaba barat.he semoga ilmunya jadi sodakoh jariah pak 🙏

  • @dwezyow9146
    @dwezyow9146 4 роки тому

    bener2 clear membuka mata saya tentang animation css

  • @ayuella4668
    @ayuella4668 3 роки тому

    pak saya mau tanya di menit 17:37 pada akan membuat ukuran tablet, ketika saya akan mengetikkan @media screen tidak bisa yah? malah membuka tab baru d vs code nya

  • @farhan_2467
    @farhan_2467 4 роки тому

    thanks videonya pak Dhika. ditunggu playlist css responsive ...

  • @yudimarga7955
    @yudimarga7955 Рік тому

    Alhamdulillah . Sehat selalu Pak Dika

  • @bonbon7251
    @bonbon7251 3 роки тому

    bang baru subscribe makasih ilmunya bang smoga tidak putus chanel ini amin

  • @dwisantosa1627
    @dwisantosa1627 4 роки тому

    Chanel favorit :) terimakasih banyak pak atas ilmunya🙏

  • @febbyferdiansyah172
    @febbyferdiansyah172 4 роки тому

    Ilmu semua klo nonton di channel ini 🤩

  • @classicimplements1106
    @classicimplements1106 4 роки тому

    Gua bingung sama penggunaan flex, asli. Tapi dari channel ini tiba" paham banget sama konsep flex HAHAHA. Thx u bang sandhika (y)

  • @gunawannurahmad8677
    @gunawannurahmad8677 4 роки тому +1

    Alhamdulillah, makasih pak ilmunya

  • @muhammadamrihidayat771
    @muhammadamrihidayat771 4 роки тому

    sukses terus pak sandhi, ilmunya sangat2 bermanfaat.
    mau request laravel lanjutan dong pak

  • @alxndrMV
    @alxndrMV 4 роки тому +1

    akhirnya muncul tutorialnya pak, makasih banget :D

  • @fadhilmunifdermawan3718
    @fadhilmunifdermawan3718 4 роки тому

    ini yang ditunggu tunggu, hatur nuhun pakkk!! :)

  • @sabineazzahra2420
    @sabineazzahra2420 Рік тому +1

    Sangat jelas. Dan langsung di contohin teory sm praktek

  • @farhanromy8334
    @farhanromy8334 Рік тому +2

    nav buat mobile nya pas diinspect dipc emg gak gk keser kanan pak(udh dikasih overflow x hidden), tp pas dihosting dicoba dihp, kok bagian kanannya ikutan keliatan yak

  • @krisnautama9283
    @krisnautama9283 4 роки тому

    Terima Kasih atas ilmunya pak, semoga selalu sehat

  • @imdeveloper6613
    @imdeveloper6613 4 роки тому

    Makasih ilmunya pak, kebetulan lagi cari

  • @nugrohosulistiyono228
    @nugrohosulistiyono228 4 роки тому +1

    Sangat menikmati ngoding nya pak dosen😃, semoga tertular dan jangan lupa titik koma😁

  • @fdrgaming3394
    @fdrgaming3394 4 роки тому

    Mantap pak 👍👍
    Klo boleh request bikin ngobar make framework Front end dong, seperti react atau vue, ditunggu videonya 😅😅😅

  • @it.consultan4132
    @it.consultan4132 11 місяців тому

    Terima Kasih Mas Sandhika Galih👍

  • @nathantjendra8824
    @nathantjendra8824 4 роки тому

    Channel paling bermanfaat di indonesia ini

  • @hooyah
    @hooyah 3 роки тому

    21:52 pa ini kan dikasih flexdirection column, kan jadi vertikal tuh, nah kenapa makenya justify ya bukan align, tp pas saya coba aligncontent gabisa, berarti walau dia udah di ubah direction nya dia bakal tetep pake horizontal(posisi awal)nya ya pa?

  • @tiantinambunan732
    @tiantinambunan732 4 роки тому

    Terima kasih Pak dika, semoga sehat selalu aamiin 🙏

  • @ega706
    @ega706 4 роки тому

    Terimakasih ilmunya pak, bermanfaat sekali :)

  • @girbalaccousticofficial5470
    @girbalaccousticofficial5470 2 роки тому

    YOU ARE A GOD... NO QUESTION ABOUT IT

  • @thoriqulfalahi2180
    @thoriqulfalahi2180 2 роки тому

    yang punya error semacam ini "Cannot read properties of null (reading 'addEventListener')", ngakalinnya bisa dengan mindah koding js-nya ke halaman index ditaruh sebelum tag akhir menggunakan tag .

  • @sahabatmuchannel4327
    @sahabatmuchannel4327 4 роки тому

    Terimakasih pak ilmunya sangat bermanfaat🙏

  • @jalaldalkhotami
    @jalaldalkhotami 2 роки тому

    dimanapun kuliah nya belajarnya di web programming unpas

  • @smpsinsankamiltangerang4075
    @smpsinsankamiltangerang4075 4 роки тому

    oke hatur nuhun,, salam dari angerang banten

  • @asrulmuamirul940
    @asrulmuamirul940 3 роки тому +1

    pak mau tanya, kenapa overflow x tidak berpengaruh ketika klik inspect pada chrome? dan hanya berfungsi ketika ukuran layarnya dikecilkan

  • @Wahyu-wc6yn
    @Wahyu-wc6yn 4 роки тому

    semoga dimudahkan segala urusan.amin

  • @ahmadhayyilanamirfaqo9923
    @ahmadhayyilanamirfaqo9923 4 роки тому

    Mohon maaf lahir batin pak
    Semoga Sehat selalu