NGOBAR #24 - Membuat WEBSITE RESPONSIVE menggunakan CSS GRID
Вставка
- Опубліковано 19 вер 2024
- 🔥 Promo Unlimited Hosting Niagahoster (saat ini Hostinger) : diskon up to 50% + gratis domain + SSL 🔥
👍🏼 Gunakan kode kupon WPUNPAS untuk tambahan diskon up to 60%
👉🏼 Klik www.hostg.xyz/...
--
Di video kali ini kita akan membuat website yang responsive menggunakan CSS GRID
--
WesBos CSS Grid
cssgrid.io/
---
Dukung Channel WebProgrammingUNPAS
- Beli Hoodie & T-Shirt #titikkoma
bit.ly/hoodiewp... (hoodie)
bit.ly/kaoswput...
- Join Kelas Premium "Full-Stack Designer"
fullstackdesign...
- Donasi
saweria.co/san...
---
Yang harus kalian pelajari sebelum ini :
- CSS GRID
• CSS GRID
- 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
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🇲🇾
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.
yang sudah nyoba, jangan lupa share ya, tag ke instagram saya di instagram.com/sandhikagalih
let's go!!
Siap Pak Dhika
Wihh..
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
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
habis css grid saya belajar langsung ke javascript atau gimana ?
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...🥰
mudah2han bertar lgi bahas sass pak sandhika, trus node js, trus lanjut dasar react js atau vue js fix auto 1 juta subsciber amin
amin. kita doakan
moga moga gitu broo
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 !
up
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
HATUR THANKYOU :DDDD
Jj pjk m
Thanks
Wah mantap , semakin banyak tutorial, bisa membantu memahami css grid dan flexbox
Nah seri Ngobar nih yang paling w tunggu, semangat truss pak dosen
Terimakasih pak dika, sangat bermanfaat, semoga pak dika sekeluarga selalu diberikan kesehatan 🙏
Mantap kang Sandika, yg udh buat saya menjadi paham tentang css grid 🙏🏻 semoga sehat selalu dan bnyak rezeki kang. Amennn
Berkah terus buat bapak dan keluarga
atas ilmu2nya paakk
aamiin
Kereeennnn banget-banget... gk tau lagi gimana harus mengapresiasi contennya. Pokoknya chanel favorit!!!
Jangan skip iklan apresiasinya bang wkwkw
Pak Sandhika membuatku dulu gasuka ngoding, sekarang suka ngoding. Makasih pak, sehat selaluuuu :*
Terima kasih pak. Sangat mantul, mudah2an ada seri node.js atau vue.js aminn. sehat terus pak💪
ini nih yg saya tunggu, kelamaan pake framework lupa dasar hahaha
terimakasih pack, ilmunya benar2 bermanfaat buat saya
Hadir di tahun 2022..
Sangat bermamfaat.
Terimakasi pak dosen, sehat selalu.
Terimakasih ilmunya pak,ditunggu NGOBAR berikutnya
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.
setelah ikutin tutorial, paksain bikin sesuatu yang berbeda dengan ilmu yang didapat dari tutorial itu, gak harus yang susah, buat yang simple aja
@@sandhikagalihWPU trimakasih atas responnya, klo gt saya bakal coba pa. Salam pa dhika dri alumni yg kmpus nya di buah batu hehe angktn 2014
watch more and learn more your are great thanks.
terima kasih atas video ini saya bisa nonton di timor untuk belajar web sendiri. thanks pak Dika
mantap pak tutor ny..
by the way, buat playlist baru dong pak.. untuk jalur back end nyaa
setujuuuuuuuu nih
Ini nih tutorialnya update terus, mesti banyak belajar jadi pak dika. Jangan lupa mampir juga ke channel saya ya pak.
Ada notif langsung gas...
Btw makasih pak🙏
Mantap pak ngobar lagi nih.. sehat terus pak
Sangat bermanfaat sekali, Berkah Pak Dosen
mantul pa dhika, gaspol terus ...👍
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.
sudah selesai pak, senang sekali rasanya, ad peningkatan dalam hidup, ahahaha. terima kasih pak atas ilmunya
kwkw kok bisa kebetulan ya, barusan selesai belajar css grid dan muncul ngobarnya..
Makasih pak ilmu nya sangat bermanfaat 😇
semangat belajar
buatkan materi python dong pak 🙏😁
Pak sandhika pernah bilang kalau belajar python di channel Kelas Terbuka aja
@@enricoferaldokalengkongang6905 oalah... Saya gk tau karena emang gk tau hehehe,.. Btw thanks atas infonya
Canggeeeeh
terima kasih pak dika
Keren pisan pak dhika 🔥🔥🔥 makasih banyak pak
Nice tutorial-5 Bro!
mantap lanjut ikutin lagi
Semangat puasa semangat belajar
Semangat terus Pak sandi
Wah yg di tunggu
Mantaaapp pak, kapan lanjut javascript lagi pak ?😁✌
Trims ilmu bang,. Sangat bermanfaat. 🙏🙏
mantap... makasih pak atas ilmunya.
Thx pak shandika
Terimakasih pak sandhika ilmunya 🙏
Cakep
Many thanks
Bikin playlish membuat sistem informasi dari awal dong pak dika
Terimakasih pak Dika
ijin belajar ya pak sandhika
Keren banget!
Buat munculin emoticon buat yg windows bisa pencet Windows + . (titik) ya..😁👌
mantap bang
Jadi grid fanboi dah saya 😁
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
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
Terima kasih pak
Pak dosen panutan 👏👏
agreed
Mantul pak
Mantap pak
Matur Numan
Tetap semangat pak
KEREENNNNNNNN
Terima Kasih Pak
Mantep pakkk dosen
Mantap pak dika
Aku akan mencoba nya dg python,,menarik ini.
Damn! You have a very cool voice.
Masya allah manthepppppp
Comment dulu, nontonnya nanti selesai tarawih 😁
Kenapa ga pelatihan yang seperti ini aja ya ada di prakerja. Masih sisa 700 rb, masa buat belajar Ms.Word ?
hard. The soft soft interface is quite friendly
nambah semangat jadi dosen
Keren 👍
MANTAP
Mantap
Pak sandhika , apakah boleh latihan ini sy jadikan portofolio saya? Dan sy upload juga di github?
Mantull
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
Pak dika, adain giveaway dongg..
Bang di bagian .header
Grid-templet-areas:
Tidak. Jalan coding nya apa yang salah ya
Mungkin Penamaan Class di html harus sesuai dengan css ,
25:50
👍sangat bermutu
Pak ukuran gambar heronya sudah saya buat 800x600 tapi pas saya refresh ga muncul ya gambarnya trs knpa ?
nonton aja dulu lah ya,walau laptop belum suport wkwkw
Thanks Pak :)
terimakasih pakkkk
Pak bikin tutorial deploy ke heroku dong + database nya
Yang pake windows 10
kalo mau pake emoticon biar kaya pa dika
bisa tekan di keyboardnya tombol logo windows + ;
First pak😀
hadir
good,pak dika solusi aku susah memahami javascript , dan kapan di lanjut javascript nya??!trims salam hormat??!
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
selesai
pak bikin tutorial bikin dashboard plis plis plis
Pak Dika req cara Buat chart di CI 3 dong Pak
pak saranin sumber buat belajar backend dong.. atau yg lain mungkin ada yg tau.
17:54