Tutorial membuat website yang responsive di semua ukuran ! || Media Queries - Responsive Breakpoints
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- #ResponsiveWebDesign #Niagahoster #Upgradesekarang
NIAGAHOSTER sedang ada promo web hosting
DISKON up to 75% gratis domain + SSL,
dan spesial untuk subscriber dan viewrs creative academy indonesia aku kasih tambahan
+ DISKON 10%
caranya cukup dengan menambahkan
kode voucher : CREATIVEACADEMY sebelum check out,
so langsung saja, kapan lagi ada diskon plus plus gini,
manfaatkan kesempatan emas ini. yuk Upgrade Sekarang !!
klik disini Niagahoster : bit.ly/3W48hDv
‐--------------‐-------------------‐-------------------‐-------------------‐-------------------‐-----
Responsive Web design adalah suatu metode yang digunakan oleh developer untuk membuat tampilan website yang responsive, dimana websitenya akan mampu beradaptasi, menyesuaikan atau dapat di respon dengan baik di berbagai macam ukuran layar yang berbeda, dari smarphone hingga dekstop.
Design Source :
drive.google.com/drive/folder...
Source Code Layout Web Grid :
drive.google.com/file/d/1rcUW...
drive.google.com/file/d/1yNCB...
Gabung Group Discord : / discord
Ikuti playlist Bootstrap 5 ini sampai selesai
Playlist Framework Bootstrap5
• Belajar Framework Boot...
Playlist UI UX Design
• UI dan UX Design Playlist
Belajar Teori Dasar Desain Grafis
• Belajar Desain Grafis ...
Jangan Lupa follow Akun instagram aku di
My Instagram : aguscreative.id...
Creative Product : creativestore.i... Pre-Order Custom Wall Decor || Gift etc.
Jangan Lupa Suport Kami disini : / @creativeacademyid
Time Stamp
00:00 Intro
00:53 Niagahoster
02:38 Apa itu Responaive Web
06:26 Review Design
08:31 Bagaimana membuat Responsive
08:58 Media Queries
10:20 CSS Units
11:08 Let's Code with Media Queries
17:20 Responsive Breakpoints
20:03 Let's Code Breakpoints
33:53 Final
34:56 Outro
Stay Class.
Thankyou.
Alhamdulillah bisa sampe di episode ini ...
Kak menit ini
30:32 kalau menurut saya tida perlu ditambahkan class order karena sebetulnya text nya itu tidak pindah posisi. Itu kelihatan pindah posisi karena alignmenntga berubah. Pas saya coba eksplor dan tambahin tanda di lorem ipsumnya 1 sama 2 ternyata urutannya sudah benar di ukuran sm. Yang jadi masalah tinggal kita ikutin desain dari xd nya saya pun kasih text-sm-start buat yang lorem pertama biar rata kiri, dan text-md-start text-end buat lorem 2 suapaya rata kanan. Terimakasih udah bikin list video bootstrap ya, kak. Penjelasannya mudah dipahami dan asik juga. Membantu banget buat pemula.
Hello World Wild Web
1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro non ad animi. Illum praesentium labore, fugit harum sint aperiam ratione id nisi totam quis vitae, a saepe quaerat perferendis. Quisquam.z
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro non ad animi. Illum praesentium labore, fugit harum sint aperiam ratione id nisi totam quis vitae, a saepe quaerat perferendis. Quisquam.z
Mantap Bre 🤙 🔥🔥
Alhamdulillah ketemu lagi channel bermanfaat.. sangat membantu. Terima kasih bang, jazakallahu khairon .
Banyak ilmu gratis dari channel ini, subscribe ini mah :)
nuhun gus dari playlist boostrap penjelasan anda mudah di pahami, semoga makin rame chanel na sing sarukses
Suka banget dengan cara penyampaiannya...
semoga tetap konsisten videonya bermanfaat banget,,,,,,,
kadang org kalau subcribernya udh banyak, nggak sebagus video pas subscribernya dikit,,,,,,
semoga konsisten bg semangat terus
Terimakasih banyak. Semua ilmu ini sangat membantu perkembangan saya yang kesulitan dalam membuat responsive web
Bagus kak. Teruslah berbagi !
Saya sangat sukaaa...
Smoga sehat dan sukses slalu ya kak...
sumpah editannya keren banget
Makasih banyak kak, berkat video ini problem sy solved 🙏
terima kasih ilmunya kak🙏🙏 sangat bermanfaat sekali bagi para web developer pemula haha
Mantab, Sharing sesama pemula 😀
Lanjut, Gass ka
🔥🔥🔥
nice gan sangat membantu
sangat bermanfaat bro, thank yu so much
mantaapp bangggg. makasih😁
Nton tutorial di channel ini mudah dimengerti, editan n soundnya jg gokil banget...
Bang next tolong bahas "nesting grid" plz
Sebenarnya nesting grid itu simpel banget kalo udah paham grid system,
Tinggal buat row & Col didalam row lagi udah itu aja 😅
@@CreativeAcademyId jadi dilm row-col nya buat row col col baru ya bang?
@@IkbalGunawan iya betul..
@@CreativeAcademyId untuk ukuran col didalam mengikuti col pembungkusnya???
Terimakasih mas 👍🏻
ini yg aku butuhkannnnnn, tapi dari dulu ga tau gimana cara nyari kontennya krna gatau hahahah
mantap bang, keren ni channel
🤩
untuk perubahan size text brarti tetep pakai media queries ya bang ? meskipun udah pakek breakpoint bootstraps
Alhamdulilah,akhirnya nemu😁
keren
bang di 32:11 itu kan kita make css inline, kalo kita bekerja secara profesional cara gitu tetep dipake bang?
apa lebih baik kita masuk ke dalam bootstrapnya dengan kita impor tuh isi bootstrap ke file kita trus kita configure make saas/scss gitu?
trus itu saya sering coba di css external kalo kita pake bootstrap sering gabisa cssnya, apa solusinya juga css inline?
Gila sih di break sampe detail banget.
SARAN BANG, Bahas lebih dalam masalah responsive font / text dong
di Bootstrap 5 namanya RSF
Ditampung 😀
gila si ini bermanfaat banget
aanjay udah ada endos. nya.
Hadir
mas, bahas ttg image couresel dunk mas
Kalau untuk resposif menu bagaimana yah?🙏🏻
Keren parah
🙌
Mau nanya bang klau untuk membuat suatu website atau seluruh bagian website responsive gimana yah bang?
contoh nya seperti website A mau dibuat responsive sekaligus dri atas smpai bawah, itu gimana bang?
Bisa tolong dijelaskan
Terima Kasih...
untuk aplikasi editornya pake apa gan?
bang mau nanya kalo lebar layar HP yg portrait berapa px ya?
bang mau tanya
kalo kita mau input img di dlm kolom,tp pas di input img nya di dlm kolom tsb msh ada space di dlm kolom antara img dan colom, itu bagai mana agar img kita bisa full sesuai dengan kolom tanpa ada space dlm kolomnya ?
Coba kasih class di kolomnya p-0 atau m-0, atau coba kasik class img-fluid di img.
@@CreativeAcademyId terimakasih banyak bang informasi dan bantuanya, sangat membatu, semoga semakin sukses dan terus berinovasi buat kontenya
bang sudah set ukuran XS di col nya tapi di ukuran mobile layar potrait tetap ngga ngaruh. mohon petunjuk bang
makasih mas, ini saya mau nanya, ko di drive ga ada file html nya ya mas?
Cakep banget, mudah dimengerti..
Tapi saran bang, ngomongnya jangan cepet-cepet
👌
bikin tutorial web desin lagi mas model kaya gini.. dengan desain web berbeda
Oke,
Mari join server discord discord.gg/nfTG3wA3
bang mau tanya, kenapa ya pas buka di desktop udah responsive bisa berubah tampilannya tapi pas dibuka di hp ga ngaruh dan tetep berantakan?
Pas di coba di hp kok gk bisa di scroll ya? Padahal Pas di inspect elemen mode smarhphone masih bisa di scroll
bang apakah bisa dibuat id itu yang di css media screen? jadi kita bisa mendeteksi perangkat apa yang digunain, trus datanya kita masukin ke list javascript
Kasih id gimana bre, Gua kurang paham pertanyaannya hehe 😅
@@CreativeAcademyId hehe maksudnya dibikin bisa getdocumdntby id di JavaScript nya bang, jadi ane bisa ngasih keterangan gitu.. Misal ada text PC detected
Bang klok buat web mke bootstrap kok d pinggir kiri-kanan viewportnya ada space dikit ya ?
Pdhl widthnya sdh 100%, ato mke container-fluid
Ada 2 jenis class container, Container biasa bakalan ada space/margin kanan kiri,
Kalo pengen full pake container-fluid
@@CreativeAcademyId ok sya cbk mkasi ya bang 🙏
bang buatin aje dong langsung htmlnya jadi biar gambarnya aje yang gue edit jadi kan gampang
Gimana untuk versi layar hp oppo A57 om??? Request buatin dong
Kenapa ya baris kode diatas jika dijalankan di responsive design mode firefox gak bekerja, tapi kalau windows browser nya di perkecil baru berjalan kode nya
-edit, ternyata kalau mau pakai firefox harus pakai yang versi develover jangan yang biasa dikarenakan yang versi develover lebih dikhusukan untuk pengembang web
Mantap 🔥
Cara bedakan firefox developer sama engga apa bg ??
@@afrianaksa9576 paling mudah dilihat icon di desktop, kalau firefox dev version warnanya biru dan juga inspect halaman warnanya default hitam, kalau yang biasa inspect halaman warnanya default putih
bang buat tutorial untuk objek motion grafik agar wesbite memiliki exsperience yang baik, bisa ga ya kira kira>..BTW sy udh nonton + mengikuti
+ Sub, thanks
Mungkin seperti animation di CSS..,
Atau pake javascript..
mungkin maksudnya pake adobe effect atau davinci resolve ya... ide bagus juga nih bro... lebih profesional, dan pastinya keren dah.
Hallo bang ,, adakah abg buka kelas belajar ??
bang klo saya buat 2 kolom kiri dan kanan ketika di ganti jd layar smartphone maka kolom kiri akan naik dan kolom kanan akan kebawah
saya mau buat kolom kanan menjadi di atas gimana ya?
Pake order & Responsive Breakpoints,
Study casenya di video mengenai slicing website portofolio
@@CreativeAcademyId thank bang saya coba cek dulu
bang discord ya gak bisa ya bang ?
bang mau nanya dong,klo device hp 500px yg sm itu gamasuk ya berarti?
Biasanya 500 untuk hp landscape/ tab
26:23 maksud dari 6 kolom kanan dan 6 kolom kiri itu apa y kak
buat desain nya pakai software apa?
Adobe XD
Mas saya buatkan web nya saja, kira2 biaya berapa ?
Tergantung spec, DM Ig
Mas yang paling sering digunakan dalam kerjaan itu biasanya kodingan yang apa ya?
Maksudnya gimana nih,
Kalo frontend ya, Css, HTML, JS Framework React, Vue, Bootstrap dll.
@@CreativeAcademyId ngga mas, maksudnya di video itu. Biasanya kalo di kerjaan make max width atau min width seringnya?
Dua duanya di pake,
Tergantung kondisinya.
Keren bang,, ada nmr WA nya ga?
DM ig aguscreative.id
kok ada aktivate window bang ?
Emang kenapa bro
22:02 bang mo nanya cara biar barengan gitu gimana?
Alt + Click(seleksi)
Ithu ethu bhaasha
Kalau ada nomor hp nya bang.. Saya mau perbagus tampilan website
Email agus.sugandi95@gmail.com
Atau DM ig aguscreative.id
Judul lagunya apa si bang yg tetetetrtt
Coba nyanyiin lagi bang belum jelas 😅
6:26
8:39
8:56
9:56 10:02
10:09 10:34
13:30 16:24
Huaaa web ku hancur T_T
Try Again 😂
windows kenapa, sebelah kanan pojok wkwk
License..? 😬
source codenya dimana ya
In video description.
@@CreativeAcademyId the type of the file is xd? Should i export it first?
drive.google.com/file/d/1yNCBLchsGJqvF_V0o30oU-GEBo2NXCAx/view?usp=drivesdk
Udah saya update dibatas..
@@CreativeAcademyId okee makasihh kak