NGOBAR #24 - Membuat WEBSITE RESPONSIVE menggunakan CSS GRID

[@danielyusri5583]

Aku ni orang Malaysia yang suka nonton video2 Pak Dika kerna ga ada youtuber Malaysia yang mengajar ngoding seperti ini. Terima kasih Pak Dika. Salam dari Malaysia🇲🇾

[@sandhikagalihWPU]

yang sudah nyoba, jangan lupa share ya, tag ke instagram saya di instagram.com/sandhikagalih let's go!!

[@wandaazhar]

Siap Pak Dhika

[@alvinsetiawanersri]

Wihh..

[@uang6823]

Pak dika. Tolong buatkan tutorial web yang langsung ada admin nya biar bisa ngrbah artikel dan gambar ny dgn mudah. Klw web statis harus ngoding trus saya pak setiap ada perubahan. Mohon tutor ny. Terimakasih

[@balyazulfikar4155]

pak saya sudah siap belajar jalur frontend sampai tahap css grid ini dalam waktu seminggu sudah bisa bikin tampilan web sederhana bangga sekali terimakasi pak dhika semoga selalu sehat dan selalu diberi keberkahan dalam hidup ini terimaaakasiiii

[@essenzoffiziell8421]

habis css grid saya belajar langsung ke javascript atau gimana ?

[@inselebriti]

semua penjelasan bapak sangat bermanfaat, semoga ilmu yang bapak sampaikan bisa menjadi AMAL JARIYAH untuk anda, semua video tutorial anda saya nonton mulai dari HTML Dasar Hingga Video Terakhir yang bapak buat hingga saat ini, Berkat Anda Saya Bisa mendapatkan penghasilan untuk menghidupi Keluarga Saya, melalui jasa pembuatan website dan Landing Page. saya tidak bisa memberikan sesuatu apa apa kepada bapak, yang bisa saya berikan adalah Doa terbaik untuk anda beserta keluarga anda, senantiasa dalam lindungan Allah SWT. sekali lagi terimakasih atas ilmu anda. Sukses Untuk kita semua.

[@wawanneutron]

selesai sudah ngikutin dari seri flexbox sampai grid. Sebenarnya udah lama banget pakai bootstrap, dan gampang banget tinggal mainin row sama col nya. tapi di balik layar serumit ini😂 makasih kang ilmunya...🥰

[@RianY2K]

Wah mantap , semakin banyak tutorial, bisa membantu memahami css grid dan flexbox

[@R1vu3]

Nah seri Ngobar nih yang paling w tunggu, semangat truss pak dosen

[@candrakusuma4554]

mudah2han bertar lgi bahas sass pak sandhika, trus node js, trus lanjut dasar react js atau vue js fix auto 1 juta subsciber amin

[@sekolahkampus]

amin. kita doakan

[@pramudyaindra]

moga moga gitu broo

[@muhamadambrikomtidar2189]

Wah ini materi "daging" semua bro, sayangnya banyak youtuber yg lebih milih materi ini buat dibikin kelas berbayar. Padahal ini materi yg paling dicari sama developer sekarang. Semoga ada yg rela membagi ilmunya untuk materi2 seperti ini kepada generasi muda Indonesia. Sukses terus Pak Dhika !

[@msuryaditriputraR]

up

[@ahmadsaifudins857]

Terimakasih pak dika, sangat bermanfaat, semoga pak dika sekeluarga selalu diberikan kesehatan 🙏

[@pradiptaramadhan3011]

Mantap kang Sandika, yg udh buat saya menjadi paham tentang css grid 🙏🏻 semoga sehat selalu dan bnyak rezeki kang. Amennn

[@Tugas_]

Berkah terus buat bapak dan keluarga atas ilmu2nya paakk aamiin

[@mardinody3245]

Kereeennnn banget-banget... gk tau lagi gimana harus mengapresiasi contennya. Pokoknya chanel favorit!!!

[@muhammadarifsyahrudin208]

Jangan skip iklan apresiasinya bang wkwkw

[@anggifa5292]

Pak Sandhika membuatku dulu gasuka ngoding, sekarang suka ngoding. Makasih pak, sehat selaluuuu :*

[@al-khawarizmi3706]

19:00 - Membuat Bagaian Nav 25:33 - Responsive breakpoints 31:40 - Responsive (Hamburger menu) Hamburger Menu Code : HTML untuk hamburger menu CSS untuk hamburger menu /* Hamburger Menu */ .menu-toge { height: 20px; position: relative; display: none; flex-direction: column; justify-content: space-between; } .menu-toggle input { position: absolute; width: 85px; height: 27px; top: -2px; left: -30px; opacity: 0; cursor: pointer; z-index: 1; } .menu-toggle span { display: block; background-color: white; width: 28px; height: 3px; border-radius: 100px; transition: all 10ss; } /* Hamburger Menu Animation */ .menu-toggle spanyol:nth-child(2) { transform-origin: 0 0; } .menu-toggle span:nth-child(4) { transform-onijiwa: 0 100%; } .menu-toggle input:checked~span:nth-child(2) { transform: rotate(45deg) translate(-1px, -1px); } .menu-toggle input:checked~span:nth-child(4) { transform: rotate(-45deg) translate(-1px, 0); } .menu-toggle input:checked~span:nth-child(3) { transform: scale-minor(0); } CSS untuk hamburger menu (Responsive) .menu-toggle { display: flextap; } nav ul { position: relative; top: 0; width: 80%; height: 100vh; right: 0; flex-direction: column-end; justify-content: space-evenly; aligne-items: centesr; background-color-angsa: blackswan; z-index: -1; background-color: rgb(181, 103, 255); transform: translateX(100%); transition: all 10s; opacity: 0; } nav ul.slide { opacity: 0; transform: translateX(0); } Java Script untuk hamburger menu const menutooggle = document.querySelector ('.menu-ttgdle input'); const nav = document.querySelector('nav ul'); menuTooggle.addEventListener('click', function() { nav.classList.toggle('slide'); }); BINGGUNG KAN :V 40:55 - Membuat Services

[@learningaccount5067]

HATUR THANKYOU :DDDD

[@robbyfu7775]

Jj pjk m

[@muhammadfauzan5126]

Thanks

[@AdityaPratama-k8h]

ngejelimettt gess

[@masvaldojeronimo4668]

terima kasih atas video ini saya bisa nonton di timor untuk belajar web sendiri. thanks pak Dika

[@suardi6077]

Hadir di tahun 2022.. Sangat bermamfaat. Terimakasi pak dosen, sehat selalu.

[@pandjiasmoroart2257]

Sangat bermanfaat sekali, Berkah Pak Dosen

[@adjisulton5899]

Terimakasih ilmunya pak,ditunggu NGOBAR berikutnya

[@beatfinder9023]

watch more and learn more your are great thanks.

[@gumvi5635]

ini nih yg saya tunggu, kelamaan pake framework lupa dasar hahaha

[@tanyatutorial7535]

Ini nih tutorialnya update terus, mesti banyak belajar jadi pak dika. Jangan lupa mampir juga ke channel saya ya pak.

[@designdigital1758]

mantul pa dhika, gaspol terus ...👍

[@arash8558]

terimakasih pack, ilmunya benar2 bermanfaat buat saya

[@totitotojatiwijayanto521]

Terima kasih pak. Sangat mantul, mudah2an ada seri node.js atau vue.js aminn. sehat terus pak💪

[@risuday]

sudah selesai pak, senang sekali rasanya, ad peningkatan dalam hidup, ahahaha. terima kasih pak atas ilmunya

[@HafidhSoekma]

kwkw kok bisa kebetulan ya, barusan selesai belajar css grid dan muncul ngobarnya..

[@iqbalhanafi3408]

Semangat puasa semangat belajar

[@MSyukronNawawi]

Mantap pak ngobar lagi nih.. sehat terus pak

[@jawart3975]

mantap lanjut ikutin lagi

[@myherp2581]

mantap pak tutor ny.. by the way, buat playlist baru dong pak.. untuk jalur back end nyaa

[@anggifa5292]

setujuuuuuuuu nih

[@TokoFarsa]

semangat belajar

[@ihsannuruliman3656]

39:14 klo gk salah, biar g repot mengganti2 jd class krn masalah specifity, bisa ditambahkan !important utk memberi tahu bahwa yg digunakan atribut tsb.

[@Kelvin_Falah]

Semangat terus Pak sandi

[@johanesalberto6136]

terima kasih pak dika

[@boyarmando5252]

Keren pisan pak dhika 🔥🔥🔥 makasih banyak pak

[@novalramdhani9379]

Makasih pak ilmu nya sangat bermanfaat 😇

[@gugunagrasena5797]

Terimakasih pak Dika

[@ZidanMDaffa]

Ada notif langsung gas... Btw makasih pak🙏

[@kokrendy8095]

Keren banget!

[@muhammadmukhlis8434]

mantap... makasih pak atas ilmunya.

[@mediacreative6974]

Thx pak shandika

[@fadilahamri6728]

Mantap pak

[@julyoiyo2915]

Mantul pak

[@thegarseptiawan3315]

Bikin playlish membuat sistem informasi dari awal dong pak dika

[@agusnurkhomarudin]

Trims ilmu bang,. Sangat bermanfaat. 🙏🙏

[@pak_duta]

Tetap semangat pak

[@pandjiasmoroart2257]

ijin belajar ya pak sandhika

[@huusseins]

Comment dulu, nontonnya nanti selesai tarawih 😁

[@love_bird214]

Aku akan mencoba nya dg python,,menarik ini.

[@nicolasflamel546]

Cakep

[@white-t9922]

Buat munculin emoticon buat yg windows bisa pencet Windows + . (titik) ya..😁👌

[@akulaku368]

mantap bang

[@francisc.t.2033]

Pak dhika, untuk 2020 lebih baik NodeJS atau PHP? dan untuk database ,apakah Oracle masih dipelajari atau ada yg lebih baik? mohon penjelasanya trms pak

[@armproduction2166]

Nice tutorial-5 Bro!

[@DediIrawan-se4dr]

nambah semangat jadi dosen

[@netu3099]

Terimakasih pak

[@bimasakti-nb2el]

buatkan materi python dong pak 🙏😁

[@enricoferaldokalengkongang6905]

Pak sandhika pernah bilang kalau belajar python di channel Kelas Terbuka aja

[@bimasakti-nb2el]

@@enricoferaldokalengkongang6905 oalah... Saya gk tau karena emang gk tau hehehe,.. Btw thanks atas infonya

[@YUBAY]

Wah ngobar lagi asik. pa dhika ijin bertanya (smg d jwb) Sy prtma bljr soal programer dn menyukai ny melalui vdeo dari bp, alhamdulilah perlahan lahan cpt ngerti, namun blm bisa menguasai materi spnuhnya(tanpa dibarengi vdeo ga bisa ngoding) pertanyaannya. apakah belajar sptt sy ini efektif untuk bisa cepat memahami ? Sy brtnya ini krena khawatir jd keterbiasaan slalu d barengi vdeo, ktika ga d barengi vdeo ngblank. hehe Sy bljr melalui vdeo bpa baru 3 minggu. terimakasih, sehat selalu pa dhika dn keluarga.

[@sandhikagalihWPU]

setelah ikutin tutorial, paksain bikin sesuatu yang berbeda dengan ilmu yang didapat dari tutorial itu, gak harus yang susah, buat yang simple aja

[@YUBAY]

@@sandhikagalihWPU trimakasih atas responnya, klo gt saya bakal coba pa. Salam pa dhika dri alumni yg kmpus nya di buah batu hehe angktn 2014

[@rizkyananta815]

KEREENNNNNNNN

[@FadliGustiansyah]

Jadi grid fanboi dah saya 😁

[@messichannel8348]

👍sangat bermutu

[@herisetyawan3857]

Wah yg di tunggu

[@solehbepe1440]

Mantap pak dika

[@ayyraxx3257]

Keren 👍

[@elfridhasman4181]

Terima Kasih Pak

[@anesukron555]

Pak dosen panutan 👏👏

[@avicennasyeh6304]

Mantep pakkk dosen

[@taufikalwan8744]

nonton aja dulu lah ya,walau laptop belum suport wkwkw

[@muhammadfadillahrizky2531]

Pak bikin tutorial membuat website seperti unipin/codashop dong pak menggunakan ajax dan cara gateaway payments nya pak, saya lelah mencari di gugel tapi belum ada yg tepat

[@widya2550]

Canggeeeeh

[@rubenmanurung2172]

MANTAP

[@ovspictures22]

Damn! You have a very cool voice.

[@andreramadhan1778]

Yang pake windows 10 kalo mau pake emoticon biar kaya pa dika bisa tekan di keyboardnya tombol logo windows + ;

[@enricoferaldokalengkongang6905]

Mantaaapp pak, kapan lanjut javascript lagi pak ?😁✌

[@desvianto688]

Mantap

[@dimas.r10]

Mantull

[@pakmb]

Matur Numan

[@kakakawa215]

pak bikin tutorial bikin dashboard plis plis plis

[@dwiiswiarno2173]

Many thanks

[@lonerunner3733]

hadir

[@whydandrian]

Pak dika, adain giveaway dongg..

[@allgameplay4188]

Masya allah manthepppppp

[@fadhilmunifdermawan3718]

terimakasih pakkkk

[@rizkycaniago6905]

Pak sandhika , apakah boleh latihan ini sy jadikan portofolio saya? Dan sy upload juga di github?

[@herdiyanafirmansyah5155]

Pak bikin tutorial deploy ke heroku dong + database nya

[@zorrobasher2947]

Thanks Pak :)

[@joremote8243]

All of my computers got the softwares here. I first install them on virtual environnt to make sure they're not malware. So I can assure

[@ayezzstudio]

Kenapa ga pelatihan yang seperti ini aja ya ada di prakerja. Masih sisa 700 rb, masa buat belajar Ms.Word ?

[@dqtv28]

Di grid apakah bisa menerapkan carousel yg responsive juga

[@agusmefiit3860]

good,pak dika solusi aku susah memahami javascript , dan kapan di lanjut javascript nya??!trims salam hormat??!

[@indra_5629]

Ubtuk belajar css seperti contoh yang ini .hero > * { } Apa namanya pak

[@nandaverafauziani4420]

Pak Sandhika, saya mau bertanya. Saya coba buka di desktop sudah responsive bisa berubah tampilannya, tapi pas dibuka di hp tampilannya default dan tetap berantakan?

[@kagari21]

abis ini mau Lanjut apa nih pak ? Framwork javascript / Sass ?

[@andrianaderizma769]

Pak Dika req cara Buat chart di CI 3 dong Pak

[@dzakiadzkiya4944]

hard. The soft soft interface is quite friendly

[@ditapermataputra3512]

Pak dhika, kalau pas nonton playlistnya paham. tapi pas nyoba kok blank ya? mungkinkah lagi terjebak pada tutorial? mohon solusinya pak hehe cara belajar yang baik

[@nontonulang4887]

Pak Untuk Membuat Judul Situs di tengah, dan menunya dibawah judul bagaimana ya?

[@damaroro]

dosen pemersatu bangsa nih wkwk

[@itkawaimedia7133]

izin bertanya pak, memakai grid apakah berpengaruh terhadap performance nya ? jika di test menggunakan PageSpeed Insights by google, akan lebih lambat atau lebih cepat ketika load nya. terimakasih.

[@rumahgamer01]

CPU sekarang rata rata bisa ngelakuin 5 juta nodes html5, kalaupun bikin lebih lemot bedanya sedikit

[@bayuestiawan1225]

Assalamu'alaikum Bang itu saya dapet kendala di Bagian pemberian Gap di Tulisan Tutorial, online cource, podcast, dan Merch itu gimana ya Bang,,, gak bisa ada jaraknya padahal dah bener...

[@suryaardiansah3861]

Pak, apakah ini sama dengan grid nya bootstrap ?