Membuat GALERI FOTO + LIGHTBOX dengan HTML & CSS3 (Bagian 1)

Поділитися
Вставка
  • Опубліковано 29 січ 2025

КОМЕНТАРІ •

  • @allgameplay4188
    @allgameplay4188 2 роки тому +4

    Terima Kasih Pak Dhika karena sudah membagikan ilmu ini secara gratis

  • @hafiedzmada
    @hafiedzmada 4 роки тому +8

    Semoga Pak Sandhika selalu diberikan kesehatan dan tidak berhenti untuk sharing ilmu-ilmunya:D

  • @ahmad.sports
    @ahmad.sports 4 роки тому +1

    Yang tadinya saya awan dan gak Thu yg namanya Html & Css dll semenjak sering nonton dan sering saya peraktek kan Alhamdulillah sekarang Sudah sedikit paham baru satu Minggu nonton terima kasih mas

  • @jufriyadi8706
    @jufriyadi8706 Рік тому

    makasih banyak ilmunya pak.... semoga bapak selalu dalam lindungan Allah dan berkumpul di akhirat kelak bersama nabi dan kekasih-Nya

  • @aldytamara3789
    @aldytamara3789 7 років тому +47

    videonya durasinya lama tapi sangat berbobot dan semuanya penting (y)

  • @muhammadzadid1220
    @muhammadzadid1220 11 місяців тому

    Terima kasih Pak Dhika karena sudah sharing ilmunya secara gratis

  • @kosongempat8663
    @kosongempat8663 5 років тому +7

    Mantapp banget ngejelasinnya .. sukses terus mas

  • @yuartantomanbatam8453
    @yuartantomanbatam8453 4 роки тому

    inspiratif.....keren... bener bener berkah..ilmunya... cocok kalau punya buku mas andre pratama..trs liat penjelasan dari pak dika.. dah klop banget..

  • @wisanggeni2925
    @wisanggeni2925 4 роки тому +1

    Alhamdulillah bisa nemu chanel bermanfaat . . . .

  • @calonhafidz8257
    @calonhafidz8257 4 роки тому +1

    Mengerikannn,, sangat jelass pemaparan nya 🙏🙏

  • @yudistiraanggana3578
    @yudistiraanggana3578 6 років тому

    Saya jadi semangat mempelajari tentang web desain setelah tau channel ini terimakasih banyak pak dhika.
    sukses selalu buat channel Web Programming UNPAS.

  • @tegarsuryakarya8812
    @tegarsuryakarya8812 3 роки тому +1

    Terimakasih banyak pak awal2 memang sulit dipahami, setelah mengulang2 dan mencoba berkali2 baru paham.

  • @AnakinSkywalker-fz5zq
    @AnakinSkywalker-fz5zq Рік тому +1

    terima kasih atas Prakteknya pak Semoga makin Semangat Bikin videonya

  • @amandusferrymaan3615
    @amandusferrymaan3615 2 роки тому

    Thank you mas....pembelajaran yg luar biasa..

  • @sekolahandroid
    @sekolahandroid 8 років тому +2

    penjelasannya enak bener mas dika, jadi mudah mempelajarinya

  • @ayyraxx3257
    @ayyraxx3257 4 роки тому +1

    Alhamdulillah, mantap pak 👍

  • @freelance.maniak
    @freelance.maniak 8 років тому +6

    Lumayan panjang videonya pak..
    izin save untuk ditonton nanti malam, mumpung di kantor ada jaringan Wifi... :D

  • @rullypramudita6240
    @rullypramudita6240 8 років тому +12

    Keren a, izin sedot ilmunya ya :)

  • @maulanayusup3915
    @maulanayusup3915 7 років тому +5

    makasih banyak, sukses saya buat ini :))

  • @farizrahmansyah17
    @farizrahmansyah17 3 роки тому +1

    Makasih banyak Pak ilmunya, benar-benar bermanfaat. Sukses terus Pak

  • @zulinvation
    @zulinvation 8 років тому +4

    ditunggu part 2 nya.. :)

  • @haiku738
    @haiku738 5 років тому +5

    mantap bang 🤗

  • @raniejayyer389
    @raniejayyer389 6 років тому

    Terima kasih Mas Sandy....atas panduannya.saya tunggu video selanjutnya.....

  • @aguswardhiana
    @aguswardhiana 8 років тому +3

    videonya panjang tapi membantu sekali lihat sampai habis dan jangan lupa di like

  • @budi-dev8814
    @budi-dev8814 3 роки тому +1

    Mantap pak, izin download yakk

  • @googleaccount3349
    @googleaccount3349 3 роки тому

    wuihhhh 2021 masih seru nontonnya:) thanks kak

  • @rizsurya2661
    @rizsurya2661 2 роки тому +4

    Maaf izin tanya pak di menit 26:10 utk membuat li sejajar knapa tidak menggunakan display: inline-block; ,knapa bpk lebih memilih menggunakan float: left; mohon penjelasannya pak ?

  • @vikyreza6941
    @vikyreza6941 7 років тому +2

    mantap bang 👍, buat tutor tentang ecomerce dong bng dika 🙏

  • @muktibbs
    @muktibbs 8 років тому +10

    Mas ada rencana mau buat tutorial untuk javascript? :D
    Sejauh yang saya coba, tutorial mas shandika yang lebih paling lengkap dan mudah dimengerti.

    • @sandhikagalihWPU
      @sandhikagalihWPU  8 років тому +6

      Terimakasih Ahmad.. insyaallah javascript akan dibuat.. ditunggu aja ya.. :)

    • @syakilahmadginanjar4480
      @syakilahmadginanjar4480 6 років тому +3

      @@sandhikagalihWPU yang sesi codingnya pak

  • @freelance.maniak
    @freelance.maniak 8 років тому +3

    kereeeeeeen...
    langsung d terapin nih di blog saya.. :D
    ditunggu untuk yg light box nya pak yaa...
    trimakasih pak..

    • @sandhikagalihWPU
      @sandhikagalihWPU  8 років тому

      sama2 Azwansyah..
      mana dong blognya, saya pengen liat.. :)

    • @freelance.maniak
      @freelance.maniak 8 років тому

      Web Programming UNPAS hehe.. template download kok pak, cuma saya modif lagi..
      azwansyahlubis.blogspot.co.id

  • @zacktheripperzPratama
    @zacktheripperzPratama Рік тому

    Makasih banyak pak Dika

  • @Kelvin_Falah
    @Kelvin_Falah Рік тому

    Sehat selalu pak

  • @sebastiaopereira8365
    @sebastiaopereira8365 6 років тому

    terima kasih bang.
    videonya sangat membantu saya.....

  • @OmPuter
    @OmPuter 2 роки тому

    wadaw mantap kali view nya sampai ratusan ribu

  • @budineonadv_banjarmasin
    @budineonadv_banjarmasin 2 роки тому

    Amazing advice wow

  • @radioxology
    @radioxology 2 роки тому +3

    Saya suka kontennya pak sandhi, mudah dipahami. Tetap semangat terus pak ngajarnya! :)

  • @dedesports1304
    @dedesports1304 2 роки тому +1

    The truth is that the unknown scares all of us, but we just have to practice so we can get well with the software.

  • @binntinox
    @binntinox Рік тому +2

    26:23 make kayak gini gpp kan bang
    width: 50px;
    height:50px;
    border-radius: 50%;
    overflow: hidden;
    margin-top:-10px;
    margin-left: -20;
    border: 1px solid black;
    display: inline-block;

    • @nabiliojr
      @nabiliojr Рік тому

      mantep kubu inline-block

  • @DwiSatriaKurniawan
    @DwiSatriaKurniawan 4 роки тому +2

    kak, buatin tutorial lightbox untuk bootstrap dong

  • @ilhamrahmadramadhan4155
    @ilhamrahmadramadhan4155 Рік тому +1

    bismillah semoga bisa

  • @nafikito5505
    @nafikito5505 2 роки тому

    32:18 yang textnya 2 baris tambah property display : flex sama align-item: center di spannya :D

    • @KelvinPhin
      @KelvinPhin 2 роки тому

      thankyou

    • @holy2001
      @holy2001 2 роки тому

      Kenapa flex? display kan ada 3 value: inline, inline-block, sama block. Apa itu beda? Apa gimana (nanya)

    • @aanesiyaa
      @aanesiyaa 2 роки тому

      bro benerin punya gue bisa?

    • @agmerguna8002
      @agmerguna8002 2 роки тому

      @@holy2001 display flex itu, ada materi baru lagi. Sebenernya display gak cmn 3 setau gw, ada beberapa tambahan lagi kayak :
      Display : flex
      Display : grid

    • @nafikito5505
      @nafikito5505 2 роки тому

      @@aanesiyaa bisa aj sih

  • @theodora3774
    @theodora3774 3 роки тому

    terimakasih paaakk:))

  • @zhashirama9577
    @zhashirama9577 6 років тому +1

    tutorial grid responsive dong pa dika :'v tanpa framework. Di channel lain bahasa inggris semua ey...

  • @zebat4059
    @zebat4059 2 роки тому +1

    23:03 wed, 20, apr. udah malem aja

  • @anamalyk
    @anamalyk 8 років тому +2

    bang ditungggu next tutor

  • @irfanibrahim5411
    @irfanibrahim5411 3 роки тому

    26:42 bisa juga pakai teknik micro clearfix

  • @farsikogama6114
    @farsikogama6114 4 роки тому

    Keren

  • @wakandagaming5763
    @wakandagaming5763 3 роки тому

    Yang error' coba file cssnya satu aja terus kasih reset css nya di bagian atas style css kalian
    contoh
    (Taruh resetnya di sini)
    /*Style*/
    Style kalian

  • @aldimhr6695
    @aldimhr6695 4 роки тому

    pak, itu kenapa (29:14) cssnya .gallery li span ? kan li di dalam ul, bukan harusnya .gallery ul li span? bedanya apa pak? kapan harus dimasukkan kapan tidak? sedangkan, .gallery span? kan bisa juga pak?

  • @satriamaulana6031
    @satriamaulana6031 4 роки тому +1

    mau tanya,. Kok pas saya ngasih border, gambar yg ada didalam div tiba2 ada ruang sisa tidak seperti punya pak sandika yg langsung ke cover tanpa ruang sisa? sudah saya coba pakai text-align, margin dsb tetep gak bisa.. terima kasih

  • @yanuar1484
    @yanuar1484 2 роки тому

    sore pak dika.. tutorial database nya donk pak, MySQL hehe

  • @BACK-TO-BACK-YT
    @BACK-TO-BACK-YT Рік тому

    I love you pak

  • @muheka20
    @muheka20 4 роки тому +2

    Selamat malam Pak Dika dan temen-temen lainnya. Saya Mau bertanya, saya ada kasus teks dalam nya tidak muncul semua atau hanya sebagian. Bagaimana supaya bisa muncul semua ya padahal font-sizenya sudah diperkecil? terima kasih

  • @arifrahmansetiawan
    @arifrahmansetiawan 4 роки тому +2

    maaf bang, saya sudah mencoba untuk mengganti fontnya. tetapi dengan format ttf. itu supaya bisa tampil gimana ya? makasih sebelumnya. sukses selalu

  • @bimaprawangsaputra2005
    @bimaprawangsaputra2005 Рік тому

    Bismillah saya start css 25/01/2024, Tunggu saya bulan/tahun depan!

  • @danielniels22
    @danielniels22 3 роки тому

    WKAOAWKOKWAO MANTAPP

  • @Fahmiomio
    @Fahmiomio 7 років тому +1

    Tq banget buat mas sandikha tutornya sangat membantu. Saya mau nanya nih mas, penjelasan clear itu apa ya? fungsi dan penggunaannya untuk apa aja.

    • @sandhikagalihWPU
      @sandhikagalihWPU  7 років тому

      clear itu untuk menghentikan efek dari properti float.. coba kamu cek deh video saya yang ini : ua-cam.com/users/edit?o=U&video_id=6gZ9WFwxRNY

  • @sanoestore5627
    @sanoestore5627 8 років тому +2

    di tunggu javascriptnya bangggggg

  • @rullxz1318
    @rullxz1318 2 роки тому

    nice

  • @riofebriansyah5599
    @riofebriansyah5599 11 місяців тому

    Ini bisa pake flexbox ga om,di vidio pake float

  • @alifnurrohman9940
    @alifnurrohman9940 4 роки тому

    Wauw mantaps banget pa dhika, btw disini belum make flexbox ya?

  • @aansatuhati2532
    @aansatuhati2532 8 років тому +1

    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

  • @krismayantosihotang4012
    @krismayantosihotang4012 3 роки тому

    selamat malam pak sandika izin bertanya kenapa thumbs nya lebih besar dari pada bulatannya? padahal ukuran 120px

  • @patlivianuswantito4478
    @patlivianuswantito4478 5 років тому +4

    kang Sandhi, mau nanya dong...kenapa gak ngerubah nya jadi inline-block aja daripada diganti positionnya ? makasih sebelumnya....btw video2nya amat sangat membantu, matur suwun kaang :)

    • @alanphoa
      @alanphoa 5 років тому +1

      nah pertanyaannya sama. thanks

    • @cendy3232
      @cendy3232 4 роки тому +1

      Gak ush terikat, setiap orang punya solusi penyelesaian masalahnya masing2.

  • @amritaaa.n
    @amritaaa.n Рік тому

    Pak, mau tanya itu bisa nggak di tambahkan dengan koneksi database?

  • @andreryadiwardana3591
    @andreryadiwardana3591 6 років тому

    pa bahas tentang java script nya juga dong

  • @prasetyodenys9254
    @prasetyodenys9254 5 місяців тому

    pak kalo .gallery li,
    .gallery li img,
    .gallery li span {
    border-radius: 50%;
    }
    di jadikan satu jika ditampilan yang full akan menjadi bulat juga trus gmina pak??

  • @ariantasariedimunthe4734
    @ariantasariedimunthe4734 4 роки тому +1

    Kak, membuat album musik dengan oop php udah ada ?

  • @babytwinazkaazki2515
    @babytwinazkaazki2515 4 роки тому

    mantap tutorialnya mas,, mas mau nanya kalau tulisannya 2 baris supay bisa ditengah2 bagaimana caranya ya

  • @umardhowi7107
    @umardhowi7107 6 років тому

    kak tolong buatin video cara menambahkan jumpbrake seperti baca selengkapnya atau yang lainya menggunakan css

  • @moffers7256
    @moffers7256 6 років тому

    Mantap, bisa minta coding ya, untuk belajar

  • @aldikaprimaputra393
    @aldikaprimaputra393 3 роки тому

    pak saya pakai clear fix di gallery tetapi kok setting untuk thumbnailnya kembali ke asal lagi?

  • @26_paundrapujodarmawan_xim97
    @26_paundrapujodarmawan_xim97 2 роки тому

    pak, disaat saya menambahkan gambar, itu ga pas ditengah dan ada space diantara border sama gambarnya gimana pak? sudah saya akalin pake width sama kayak gallery nya??

  • @thisMyJourney
    @thisMyJourney 7 років тому +1

    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?

    • @sandhikagalihWPU
      @sandhikagalihWPU  7 років тому +1

      Tidak usah direset lagi, karena bootstrap sudah melakukan reset..

    • @thisMyJourney
      @thisMyJourney 7 років тому

      Oya mas benar, setelah saya cek dokumentasi bootstrap ada bagian normalize nya :)

  • @Antoooreal
    @Antoooreal 3 роки тому +3

    selamat malam pak, adakah refrensi situs untuk mengecek codingan kita apa sudah benar secara struktur? atau dalam membuat hal seperti ini kita bisa bebas explorasi tanpa memikirkan strukturnya? Terimakasih

    • @hafidhnfn
      @hafidhnfn 2 роки тому +1

      sudah tau belum mas? kalo sudah boleh lahh bagii infonyaa kwkw

    • @Antoooreal
      @Antoooreal 2 роки тому

      @@hafidhnfn blm tau saya

    • @ariessahara9164
      @ariessahara9164 2 роки тому

      @@Antoooreal sekarang sudah tau mas?

  • @novadwisapta3615
    @novadwisapta3615 8 років тому +1

    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?

  • @rizairsyad5775
    @rizairsyad5775 2 роки тому

    permisi pak dika mau tanya. itu kan di pak dika dijelaskan harus memakai clear.. menurut bapak optimal menggunakan clear atau untuk posisinya di container menggunakan absolute?

    • @sandhikagalihWPU
      @sandhikagalihWPU  2 роки тому +1

      jika menggunakan float, sebaiknya menggunakan clear untuk merapihkan posisinya kembali

  • @MNS_Computer
    @MNS_Computer 6 років тому +1

    Klu membuat galeri video + lightbox dgn html n css3 bsa gak ?

  • @MuhammadRizki-yh7fr
    @MuhammadRizki-yh7fr 4 роки тому

    pak dika mau nanya kok saya pas tulis rgba udah ngikutin dari awal tutorial kok ilang ya tulisa rgba nya di code editor tapi hasil di browser sama ? apa ada yg salah di code editor atau gimana ya pak

  • @neta7732
    @neta7732 4 роки тому

    Pak shandika kok di saya ukuran gambar dengan ukuran span nya gak sesuai pak.. malah ukuran span nya lebih ke kiri di bandingkan dengan image nya.. mohon penjelasan nya🙏
    Trimakasih pak

  • @adytiaputraramadhany4440
    @adytiaputraramadhany4440 4 роки тому

    pak sandi, kok saya gk bisa 2 slash di img src,? cmn bisa 1 slash.

  • @dhandyjoenathan8149
    @dhandyjoenathan8149 5 років тому

    bang sandi , ak mau tanyaa.. itu ketika saya refresh kok transisi nya auto berjalam yaa ?? gimana solusinyaa

  • @muhammadraflifebriyanto5508
    @muhammadraflifebriyanto5508 3 роки тому

    kenapa pas saya target overlay nya gambar yg fullnya jd ikut bulat ya bkn kotak ?

  • @finadwiyuliana754
    @finadwiyuliana754 8 років тому +1

    ka ini harus download css3 nya dulu ya, kalo bikinnya di notepad++ ga bisa?

    • @sandhikagalihWPU
      @sandhikagalihWPU  8 років тому

      gak perlu ada yang didownload Fin, selama browsernya pake browser baru harusnya ga ada masalah mau pake notepad biasa pun.. :)

  • @gabutid6632
    @gabutid6632 Рік тому

    Di saya . File note found setelah overlay. Dan file yg d panggil overlay. Malah kecil ke ikut style dari LI... Pening aku

  • @Rifars
    @Rifars 5 років тому

    Ijin save video videonya

  • @kyousukehasegawa6886
    @kyousukehasegawa6886 5 років тому +1

    udah ngikutin sampai selesai video ini, hasilnya ko titik list( bullet list ) ga hilang seperti yg dibuat pak sandhika ya???
    solusi yg saya temukan dengan menggunakan ( list-style: none; ) di ( .galeri li )
    yg saya ingin tanyakan bagaimana caranya bisa hilang list( bullet list ) seperti yg dibuat pa sandhika di video ini tanpa menggunakan ( list-style: none; ) di ( .galeri li )?
    terima kasih.

    • @zeronext4122
      @zeronext4122 5 років тому

      sama bro gua juga sama gambar pas di klik malah lonjong bukanya persegi

    • @kyousukehasegawa6886
      @kyousukehasegawa6886 5 років тому

      @@zeronext4122 hahaha pakai cara saya aja, meskipun intinya berhasil

    • @mametadilaraaf4543
      @mametadilaraaf4543 5 років тому

      udah dihubungkan dengan file reset.css belum?

  • @therosdianto
    @therosdianto 5 років тому

    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?

  • @rigiyoga3574
    @rigiyoga3574 Рік тому

    pak maaf, ini kenapa font saya tidak bisa diberi style ya pak seperti font-size

  • @saefulamin5538
    @saefulamin5538 8 років тому +1

    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

  • @SogongWoi
    @SogongWoi Рік тому

    Pak saya pas mau hubungkan html ke CSS kalo linknya dua kok ga mau terhubung ya ga kebaca gitu kalo satu bisa

  • @thoriqulfalahi2180
    @thoriqulfalahi2180 4 роки тому

    kenapa ndak pake inline-block tapi malah float ya pak?.

  • @adikapribiantoro6137
    @adikapribiantoro6137 7 років тому

    mau tanya, cara membuat komentar itu gimana ? komentar kayak foto terus dikomen gitu

  • @rezakurniawan_
    @rezakurniawan_ 7 років тому

    kalo caranya buat galeri diatas sebuah section hero gimana mas? tq

  • @mediareka
    @mediareka 3 роки тому

    Pak ko yang aku si gambarnya ga ikut bulet ?

  • @anakhebatahe914
    @anakhebatahe914 7 років тому +1

    om laptopnya pakai OS apa itu ? terimakasih

  • @ibnuabuumair
    @ibnuabuumair 8 років тому +1

    Oh Ya Ka Dika,Untuk ALT Pada Image.Fungsinya Buat Apa ya..???

    • @sandhikagalihWPU
      @sandhikagalihWPU  8 років тому +1

      bisa cek disini penjelasan dan cara pakainya :
      ua-cam.com/video/yb_emYhY3Pc/v-deo.html

  • @agungwidyatmoko6822
    @agungwidyatmoko6822 4 роки тому

    pak dhika. Selain pake photoshop untuk me-resize ukuran photo, pake aplikasi apalagi ya pak? soalnya, photoshop berbayar sekarang

  • @MediaAplikasi
    @MediaAplikasi 7 років тому

    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. ?

    • @sandhikagalihWPU
      @sandhikagalihWPU  7 років тому

      itu bisa menggunakan javascript / jquery.. untuk menentukan ketinggian halaman, di ketinggian tertentu nanti sebuah elemen kita kasih kelas tertentu.. contoh tutorialnya mirip dengan NGOBAR#3

    • @MediaAplikasi
      @MediaAplikasi 7 років тому

      Terima kasih ilmunya pak dhika.

  • @iamZOU
    @iamZOU 7 років тому

    pak sandhi,saya mau bertanya,gunanya container itu untuk apa ya?