Membuat GALERI FOTO + LIGHTBOX dengan HTML & CSS3 (Bagian 1)
Untuk melatih pemahaman kita mengenai CSS3, di video ini kita akan belajar membuat sebuah galeri foto dengan menambahkan fitur lightbox.
—
link:
– CSS Reset
http://meyerweb.com/eric/tools/css/reset/
– Lightbox
http://lokeshdhakar.com/projects/lightbox2/
– Font
https://www.fontsquirrel.com/fonts/bebas-neue
—
– HTML Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIVuONHysfOK0ZtiqUWvrx4F
– CSS Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIUBrbm6Gdh6k7ZUvPIAZm7p
– Tutorial Sublime Text
https://www.youtube.com/playlist?list=PLFIM0718LjIWE-Ot9V9qcALx5OMAZY67c
– CSS Layouting
https://www.youtube.com/playlist?list=PLFIM0718LjIUu4Ju9GUL5zpLcuq08TKYr
– CSS3
https://www.youtube.com/playlist?list=PLFIM0718LjIVCmrSWbZPKCccCkfFw-Naa
—
follow juga akun media sosial kita yang lain :
– https://www.facebook.com/WebProgrammingUNPAS
– http://codepen.io/webprogrammingunpas
– https://github.com/webprogrammingunpas
– http://pw.if-unpas.org
– http://www.unpas.ac.id
terimakasih dan selamat #ngoding!
@sandhikagalih
Membuat GALERI FOTO + LIGHTBOX dengan HTML & CSS3 (Bagian 1)
Membuat GALERI FOTO + LIGHTBOX dengan HTML & CSS3 (Bagian 1)
penjelasannya enak bener mas dika, jadi mudah mempelajarinya
bang ditungggu next tutor
ditunggu part 2 nya.. 🙂
bang ada dika, boleh minta ajarkan membuat website degn menggunakan cms ndk? kami ada tugas ne
makasih bang.
saya dah banyak download video abng ne cuman cms yang belum ada
Oh Ya Ka Dika,Untuk ALT Pada Image.Fungsinya Buat Apa ya..???
di tunggu javascriptnya bangggggg
Keren a, izin sedot ilmunya ya 🙂
assalamualaikum pak,, terima kasih tutorial yang sangat membantu dan luar biasa.. step by stepnya bner2 detail…
ada beberapa yg masih saya ingin tanyakan pak,, kira2 bisa lewat mana yah pak..
ka ini harus download css3 nya dulu ya, kalo bikinnya di notepad++ ga bisa?
Bang sandhi.. perbedaan sintaks float dan display: inline-block apa ya? kan hasilnya sama tpi perbedaannya pada float, maka parentnya akan collapse, sedangkan inline-block gak, rekomendasinya lebih bagus gunakan yang mana bang?
mas fungsi dari reset.css itu apa ?
Mas andi link buat download fon nya ko ga ada ya?? bisa di cantumin mas.. Tks
Mas sandi mau tanya, saya kan mau menampilkan banyak gambar di gallerinya, cara memisahkan jarak antar gambar baris 1 dan baris 2 gimana ya, ini rapet banget. Trims
mantap bang 👍, buat tutor tentang ecomerce dong bng dika 🙏
makasih banyak, sukses saya buat ini :))
mau tanya, cara membuat komentar itu gimana ? komentar kayak foto terus dikomen gitu
Tq banget buat mas sandikha tutornya sangat membantu. Saya mau nanya nih mas, penjelasan clear itu apa ya? fungsi dan penggunaannya untuk apa aja.
pak sandhi,saya mau bertanya,gunanya container itu untuk apa ya?
om laptopnya pakai OS apa itu ? terimakasih
videonya durasinya lama tapi sangat berbobot dan semuanya penting (y)
The Best Tutorial ever i seen!!Wish All The Best For You Mr.Galih,I was download all yours hhhe
what the name of site for icons that free license??
please reply me!
Mas dhika, saya mau tanya. Saya lihat menu navigasi di situs ptpn3.co.id semula sekitar 20px dibawah logo perusahaan. Ketika di scroll kebawah, menu tersebut berhenti paling atas. Untuk menempatkan menu navigasi agar tidak bergerak, saya tau pakai position fixed. Tapi jika dari bawah, lalu berhenti, seperti situs ptpn3.co.id bagaimana mas. ?
hallo mas Dhika, saya coba menerapkan tutorial ini ke file tutorial portfolio dengan bootstrap (NGOBAR) namun setelah link reset CSS dimasukan ke html smua font jadi berubah pak dan pading marginnya juga berantakan? apa untuk membuat Lightbox itu diperlukan reset CSS ya?
kalo caranya buat galeri diatas sebuah section hero gimana mas? tq
terima kasih bang.
videonya sangat membantu saya…..
Mantap, bisa minta coding ya, untuk belajar
tutorial grid responsive dong pa dika :'v tanpa framework. Di channel lain bahasa inggris semua ey…
kak tolong buatin video cara menambahkan jumpbrake seperti baca selengkapnya atau yang lainya menggunakan css
pak dika tolong file bebasneue.woff nya diupload.
kalau css4 sama aja kan pak?
Saya jadi semangat mempelajari tentang web desain setelah tau channel ini terimakasih banyak pak dhika.
sukses selalu buat channel Web Programming UNPAS.
pa bahas tentang java script nya juga dong
Bang, kenapa ya 'li'nya harus difloat? Kan bisa di inline-block?
Assalamulaikum.
kang minta tolong gimana buat slideshow secara vertikal? minta tolong kang…
terimkasih sebelumnya….
Klu membuat galeri video + lightbox dgn html n css3 bsa gak ?
Terima kasih Mas Sandy….atas panduannya.saya tunggu video selanjutnya…..
Ijin save video videonya
Ga keberatan kalo vid nya +1 H bang :v kontennya full penjelasan tanpa celah :v
Pak, kenapa ya pas di Refresh ada ikut berkedip si bayangan dan tulisannya?
Mantapp banget ngejelasinnya .. sukses terus mas
itu cari ilangin titiknya gmna, kok di video gambar auto pindah ke kiri???
mantap bang 🤗
Kok pas ngasih hover di .gallery li a:hover span di kasih opacity 1, di browser ga terjadi apa2. pas gallery li span di kasih transition : 1s hovernya muncul pas di klik lalu hilang lagi. Kira2 knp ya padahal css saya pastiin mirip bgt.
(Menit 33.08)
Ada yg bisa bantu kah?
kang Sandhi, mau nanya dong…kenapa gak ngerubah <li> nya jadi inline-block aja daripada diganti positionnya ? makasih sebelumnya….btw video2nya amat sangat membantu, matur suwun kaang 🙂