NGOBAR #23 - Membuat RESPONSIVE NAVBAR menggunakan FLEXBOX (HTML, CSS & Javascript)
HTML-код
- Опубликовано: 21 авг 2024
- NiagaHoster : bit.ly/niagaho...
Promo Unlimited Hosting diskon up to 75% + gratis domain + SSL. Dapatkan tambahan
diskon 10% dengan menggunakan kode kupon : WPUNPAS
---
Di video kali ini kita akan membuat komponen website yaitu RESPONSIVE NAVBAR menggunakan teknik FLEXBOX murni hanya dengan HTML, CSS dan javascript tanpa menggunakan Framework
--
Video DevEd
• Responsive Navigation ...
---
Dukung Channel WebProgrammingUNPAS
- Join Kelas Premium "Full-Stack Designer"
fullstackdesign...
- Donasi
saweria.co/san...
---
Yang harus kalian pelajari sebelum ini :
- FLEXBOX
• Belajar FLEXBOX
- Dasar Pemrograman dengan JAVASCRIPT
• Dasar Pemrograman deng...
- JAVASCRIPT dan DOM (Document Object Model)
• Javascript dan DOM (Do...
- JAVASCRIPT Lanjutan
• JAVASCRIPT LANJUTAN
- HTML Dasar
• HTML Dasar
- CSS Dasar
www.youtube.co...
- CSS Lanjutan
• CSS Dasar
- CSS Layouting
• CSS Layouting
- CSS3
• CSS3
---
MEDIA SOSIAL
- / sandhikagalih
- / webprogrammingunpas
- codepen.io/webp...
- github.com/san...
- / sandhikagalih
---
UNIVERSITAS PASUNDAN BANDUNG
www.unpas.ac.id/
www.if.unpas.ac...
terimakasih dan selamat #ngoding!
@sandhikagalih
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😁😁
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
mantaps
19:11 Hamburger Menu
00:30 navbar
YaAllah, semoga danang bisa jadi dosen seperti pak sandika galih aamiin
Semangat latihan kawan
ayo danang sekarang sudah bisa apa? sudah 10 bulan. biar jadi motivasi kita2 wkwkw
Chanel bermanfaat seperti ini seharusnya bisa tembus lebih dari 1jt subscriber, terimakasih ilmunya bang, sehat selalu ✌️
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.
Channel yang memiliki manfaat untuk mencetak generasi bangsa berpikiran maju ~ Sukses terus buat pak dika , sehat selalu.
terharu pak saia nontonnya, cara bapak ngejelasin materinya bener bener gak ada tanding. saia doakan semoga bapak sehat selalu. aamiin ya rab
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
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.
Wah, menarik ini. Terima kasih pak dhika. Semoga kita semua sehat dan sukses selalu. Aamiinn.
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"
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 👍😁
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
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.
betull. Ngajarin orang memang susah, butuh skill komunikasi tersendiri. Makanya pak dhika bisa jadi dosen wkkw
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
Entah knapa selalu suka dengan cara Pak Dhika dalam menjelaskan materi, terimakasih Pak saya dapat ilmu lagi hari ini 🤩
iy setuju, easy listening gitu trus jdi mudah dipahami gitu maksudnya
Aku lagi belajar html css, disini dpt java script kaget sih! ga ngerti ajaran dari dosen tapi belajar disini ngerti! makasih pak!
*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*
Selama kuliah ga pernah nemu dosen ngajarin spt ini. Hmm kali ini lbh phm . Pst bangga mhsswany d ajarin bpk 😁
KONTEN IS THE BEST !!!
manjur ilmu nya bang terima kasih :)
Wah ini yg saya tggu2. Selama gk tau cara buat responsive navbar sendiri, selalu pake punya bootstrap 😁.
Tul
Nanya bang.. punya ente work ga itu @media 576px masuk toggle device di mode developer?
Punya ane kok ga masuk² iya 😬
@@ibnuhidayat3286 work kok.
@@ibnuhidayat3286 sama bang ane jg gak work makanya ane minta script nya pen bandingin beda nya ma script ane
mantap, akhirnya selesai juga nih nonton-nya, ga terasa sudah selesai aja saya ikutin tutorialnya , padahal durasinya 1 jam. Benar benar ok tutorialnya
Waah, terimakasih om Rian 😁🙏🏼
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.
Alhamdulillah punya saya berhasil tidak ada masalah sama sekali, Terimakasih pak dika ilmunya sangat bermanfaat.
guru terbaik dalem program otodidak saya yaitu Pak Sandhika galih
Terima kasih pak dhika, dari FlexBOX ke GRID semua belajarnya disini
semangat trus ngontent nya pak DOSEN
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 .
kalau di copas ke google, hamburger menu juga ternyata hhe
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.
alhamdulillah, terima kasih pak dhika. semoga sehat2 terus ya pak. biar bisa ngasih ilmu yang bermanfaat ke kita2 semua 😁💪
Penyampaian nya enak bgt. G memusingkan apalagi sy yang baru memulai html css dan js. Terimakasih kang. Ditunggu posting2an lainnya (khususnya yg dasar2 heee)
Your tutorials are appreciated. You explain everytNice tutorialng so simply and show the fundantals of producing. Many people and myself thank
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
Untuk media buat di mobile ga berfungsi nya.
Aseli keren banget ❤️
Cara menyampaikan jelas, lugas, dan mudah di mengerti
Semoga sehat selalu bang,-
Aamiin
Nonton videonya saya sampe tidur melek tidur melek.. ga kebayang biar bisa skillnya kaya bang dhika perjuangan belajarnya seperti apa :)
Wah....Detail banget, Terima Kasih Ilmunya Bang, Baru belajar, awalnya bingung, tapi skrg sdh agak ngerti
semoga channel wpu bisa segera nembus 1 jt an,karna sudah follow dari tahun 2016
Di video navbar ini banyak yang aku ngerti dri video" sebelum nya... Thanks Pak Shandika👍
ilmu yg bermanfaat kang, semoga berkah dan terus maju
29:54 ngerubah titik sumbu transform, keren kang, kira kira klo dibikin muter dulu 1 kali atau 2 kali jd kaya apa ya transisinya 😁
Gw jd ngebayangin bang bakal kaya gimana 😄😄 , boleh dicoba tuh
Mudah2an mas sandika tidak pernah berfikir untuk berhenti ngontent 🙏 ilmunya bermanfaat
Solusinya kalau gak pakai javascrip input checkboxnya diletakan sebelum ul. Jadi ul nya bisa di akses ketika di cheklis
Thanks
Mantapp full html,css,js ga perlu pke bootstrap 👍semangat kang 💪
Terimakasih pak tutorialnya. Semoga pak sandhika sehat selalu. Aamiin 🙏
Ini nih channel favourite aku, semangat terus bikin video pak dosen 😊
Ini nih saya suka, teknik menyusahkan diri sendiri wkwkw, mantul pak 😁 22:58
Makasih banyak bang ilmu nya.. sangat² bermanfaat buat kita yg masih pemula
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
Penjelasannya sangat bermutu, saya mendapatkan ilmu dari Channel ini.
channel ini layak diatas 2 jt subscriber!
Pak Shandika, dosen terbaik🌻😊panjang umur sehat selalu pak
makasih pak sandhika galih , sudah memberikan ilmu gratis
"sekarang, ngapain?"
Meskipun aku kurang paham tapi aku nonton sampai akhir supaya nanti klu aku belajar basic ada bayangan
alhamdulillah baik pak,
terimakasih sudah tanya kabar saya pak, ^_^
keren ya temen2? dalam hati jawab "banget pak" makasi ilmunya
Lanjutin tutorialnya Pak.
mantap pak dika, penjelasn materi kali ini, sehat selalu pak dika dan team wp unpas.
Keren mas... mudah2n cepat hafal semua coding pemograman... kasih tipsnya mas...😁 otak cepat error kalau masalah coding...🤭🤭
jangan dihafal, yang penting dipahami hhe
Sehat terus pak sandi, saya senang dg Vidio bapak sangat jelas dan gampang dipraktekkan walaupun saya bukan anak kuliahan. Makasih pak
dimanapun kuliah nya belajarnya di web programming unpas
Hadir pak , mhs jawaba barat.he semoga ilmunya jadi sodakoh jariah pak 🙏
Keren pak dika, semangat terus buat videonya, kami selalu mendukung
emang the pak dika sukses selalu , selau stay toon di channel ini
Sangat jelas. Dan langsung di contohin teory sm praktek
Gw suka sama ni channel ngajarin teori" yg menarik ga jenuh ngeliatnya:v
bener2 clear membuka mata saya tentang animation css
Terima Kasih Mas Sandhika Galih👍
Alhamdulillah . Sehat selalu Pak Dika
Ijin belajar bang...semoga barokah ilmu yg dibagikan.
Alhamdulillah, makasih pak ilmunya
Terima kasih pak dika, saya bisa terbantu menyelesaikan submission course.
Sangat menikmati ngoding nya pak dosen😃, semoga tertular dan jangan lupa titik koma😁
Yes navbar responsive
Ilmu semua klo nonton di channel ini 🤩
Terima kasih ilmunya Pak! Sangat bermanfaat, sehat selalu Bapak!
Ass.. jadi semangat belajar sambil kerja dr rumah ada aja inovasi pk Dosen ni,, terimakasih banyak pk dhikaaa,,
Gua bingung sama penggunaan flex, asli. Tapi dari channel ini tiba" paham banget sama konsep flex HAHAHA. Thx u bang sandhika (y)
thanks videonya pak Dhika. ditunggu playlist css responsive ...
Mantap,.. jadi tambah semangat untuk belajar nya
Pak belajar web gis menggunakan leaflet atau mapbox kayanya menarik pak..menampilkan informasi cuaca dari data terbuka / API nya BMKG kayanya boleh jg tuh
up
Thank You jadi inspirasi buat Toggle Slide dengan versi yang bebeda .. Suskses selalau.. Salam Developer Indonesia
Makasih, bermanfaat bagi saya, semoga selalu diberi kesehatan.
oke hatur nuhun,, salam dari angerang banten
Makasih bang web programming Unpas tutorialnya bermanfaat sekali.Boleh di coba ni.
Channel paling bermanfaat di indonesia ini
akhirnya muncul tutorialnya pak, makasih banget :D
YOU ARE A GOD... NO QUESTION ABOUT IT
semoga dimudahkan segala urusan.amin
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 .
akhirnya gk bingung lagi buat dari awal, krna pke framework gk bisa bnyk di modif wkwkwk xD
sukses terus pak sandhi, ilmunya sangat2 bermanfaat.
mau request laravel lanjutan dong pak
bang baru subscribe makasih ilmunya bang smoga tidak putus chanel ini amin
Pak sandhika gali is the best
pak mau tanya, kenapa overflow x tidak berpengaruh ketika klik inspect pada chrome? dan hanya berfungsi ketika ukuran layarnya dikecilkan
Wkwwkk kebiasaan klo coba animasi pasti seeet seet 😂 31:56
Terima kasih Pak dika, semoga sehat selalu aamiin 🙏
ini yang ditunggu tunggu, hatur nuhun pakkk!! :)
Mantap pak 👍👍
Klo boleh request bikin ngobar make framework Front end dong, seperti react atau vue, ditunggu videonya 😅😅😅
Chanel favorit :) terimakasih banyak pak atas ilmunya🙏
Terima Kasih atas ilmunya pak, semoga selalu sehat
Apa cuma saya yang bisa ngerti dari ngobar doang?
Wkwk
semoga barokah pak ilmunya