Membuat WEBSITE Kedai Kopi RESPONSIVE dengan HTML & CSS dari 0 + Autodeploy ke WEB HOSTING
Siap2 gaes, kita bakalan bikin website dari 0 sampai jadi dan bisa diakses semua orang, hanya menggunakan HTML, CSS dan sedikit JS saja tanpa library dan framework apapun. Tapi sebelumnya, mari ngopi dulu ~
---
🔥 Promo Unlimited Hosting Niagahoster : diskon up to 75% + gratis domain + SSL 🔥
👍🏼 Gunakan kode kupon “WPUNPAS” untuk tambahan diskon 10%
👉🏼 bit.ly/3CTaMl4
---
Aset Gambar:
unsplash.com/photos/tNALoIZhqVM
unsplash.com/photos/ZLqxSzvVr7I
unsplash.com/photos/dAYJfrtVjh0
Link Penting:
feathericons.com/
github.com/SamKirkland/FTP-De...
Playlist Lengkap Website Kedai Kopi Kenangan Senja:
• Membuat Website Kedai ...
---
Chapters:
00:00 Intro
00:14 Hasil Akhir Website
05:39 Persiapan
15:25 Navbar
33:18 Menyiapkan Media Queries
35:42 Menu Sidebar
49:29 Hero Section
1:07:58 About Section
1:20:41 Menu Section
1:33:59 Contact Section
1:47:45 Footer
1:57:45 Github Pages
2:04:20 Web Hosting
2:11:43 Autodeploy (Github Actions)
2:23:24 Closing
---
🔥 SUPPORT WPU 🔥
👕 Beli Hoodie & T-Shirt di WPU Official Store 👕
shopee.co.id/wpustore.id
👾 Gabung Server Discord WPU 👾
/ discord
- Donasi Channel WPU (OVO / GoPay / Dana / LinkAja)
saweria.co/sandhikagalih
karyakarsa.com/sandhikagalih
---
📢 FOLLOW SOCIAL MEDIA 📢
- / sandhikagalih
- tiktok.com/@sandhika.galih
- / sandhikagalih
- github.com/sandhikagalih
terimakasih dan #janganlupatitikkoma!
@sandhikagalih
Пікірлер: 1 000
Saya pernah denger salah satu dosen pernah berkata. Orang pinter itu bukan hanya bisa semuanya saja, tapi mampu menjelaskan semuanya dengan sederhana. Mampu menjelaskan semuanya ke awam, dan pak san punya itu semua. sehat terus pak
saya percaya dengan kebaikan akan berbuah baik, termasuk membagikan ilmu adalah sesuatu yang membuat penyebarnya mendapatkan ilmu lebih banyak lagi. dan itupula yang saya lihat dari pak Dhika, terimakasih atas ilmunya!
terima kasih pak atas konten codingnya, semenjak pulang dari pondok saya pengen belajar coding, saya akan berusaha keras untuk mengasah skill saya dibidang ini, sekalian biar ada kegiatan juga dirumah, ntah kenapa saat saya minta ulang temen saya yg jago ngoding dia jawabnya cuman"ini bisa begini soalnya ininya diginiin" sebagai orang awam mana saya paham, semenjak ketemu kontennya pak dhika saya jadi semangat untuk belajar dan juga semakin tertarik biar ilmunya gampang masuk, biar sekalian ada kegiatan juga dirumah :)
@rizkyhnkw
3 ай бұрын
kamu nino ya bang
Sukses selalu Pak Dhika. Alhamdulillah makin banyak pengikutnya untuk upgrade skills yang tadi nya belum paham sampai jadi paham.
Terimakasih pak atas pelajarannya, saya awalnya iseng² ngikutin tutorial bapak, iseng-iseng buat web, sampe sekarang saya jadikan Tugas akhir saya pak dengan judul "perancangan sistem informasi peramalan penjualan" , web nya pake PHP backend nya saya menggunakan python pak pake flask. Terimakasih ilmunya🙏
Terimakasih pak guru semoga ilmunya semakin berkah, rezekinya lancar dan bisa terus berbagi
pak dika selain smart juga saya suka dengerin suara beliau lemah lembut sekali dan tidak henti henti nya memberikan ilmu yg bermanfaat semoga allah selalu memberi kan kesehatan dan keberkahan kepada pak dika dan di tambah ilmu nya amiiinnnn trimakasih atas ke murahan hati untuk berbagi ilmu nya pak 👍👍👍
Mantap pak dika, smngt trs jadi dosen online. Sngt membantu sekali bagi mereka yg mempunyai ke inginan belajar tpi tidak bisa kuliah. Terutama saya. Salam dri jakarta pakdika
Tadinya saya bersemangat untuk belajar bagaimana membuat website. Setelah nonton video ini, menjadi berubah pikiran. Mau cari orang atau lembaga yang bisa buatkan saya website dan apa yang perlu saya persiapkan. Capai juga belajar secara otodidak.
Tutorial yang sangat mudah dipahami & jelas. Langsung bikin candu jadi pengen belajar lebih dalem lagi untuk cooding, thanks bang 🙏
Sebelumnya saya menyimak seri html sampai hatam tapi merasa tak ada seninya, kemudian belajar css tidak hatam karena merasa bosan, mencoba belajar javascript malah tamba bingung. Tapi hasrat untuk bisa selalu ada. Dengan penjelasan ini saya sebagai orang yang akan belajar baru faham hubungan html, css, dan javascript. saya juga mencoba buat apa yang dijelaskan dan alhamdulillah berjalan dengan sempurna sampai upload di website. Terima kasih Pak Dika, sehat selalu.
@giru423
11 ай бұрын
Sama bang gua juga gitu,pas html kyk mudah,css bosen pas javascript bingung
@fahrezafaisal6004
9 ай бұрын
sama baru belajar lagi dari nol
@kikywest767
9 ай бұрын
mau saling sharing-sharing ga bang? kebetulan saya juga baru mulai baru-baru ini @@fahrezafaisal6004
Wahh terimakasih pak detail bangett cara jelasinnya mudah di mengerti semenjak nonton playlist playlist dari bapak saya jadi paham sangat membantu sekali🤗🙏🏻🙏🏻
Terimakasih cukup dimengerti pak, mantep banget buat yang baru belajar tentang dunia programmer 🔥🙏🏼👍
Terimakasih banyak pak dik. Ilmu njenengan tidak bisa di bayar oleh apapun selain memanfaatkannya untuk mendukung dunia Digitalisasi
Alhamdulillah.. terima kasih bang utk tutorialnya, sangat sangat bermanfaat jika dilakukan dgn praktik langsung begini..
MasyAllah kontennya sangat bermanfaat, selama in belajar di yutube Alhamdulilah hanya di Chanel ini baru saya paham..
1 video ini menjawab semua kesulitan yang beberapa kali saya alami/temui sebagai pemula dalam pembuatan website. komprehensif
Makasih pak dika, selalu berkarya terus dan semakin menginspirasi kami ke depannya.
Mantaaap..suhu web programmer,maturnuwon pak dikha atas ilmunya..🙏🙏🙏
terimakasi Pak. semangat pak tetap strong dalam pemberian materinya yang sangat jelas dan bermanfaat
Terimakasih pak atas playlist playlist yang bapak berikan. Awal awal saya belajar pemrograman jika disuruh buat seperti itu saya pasti sangat kesusahan. Namun tidak dengan sekarang yang malah melihat ini sudah mudah. Terimakasih atas 5 bulan terakhir untuk perubahan diriku pak..
@rendimustasah579
Жыл бұрын
pak dika kenapa js saya gak berpungsi code ini //klick di luar sidebar untuk menghilangkan nav const hamburger = document.querySelector("#hamburger-menu"); document.addEventListener("click", function (e) { if (!hamburger.contains(e.target) && !navbarNav.contains(e.target)) { navbarNav.classList.remove("active"); } });
@silentvoid_7
Жыл бұрын
@@rendimustasah579 sama
@rendimustasah579
Жыл бұрын
@@silentvoid_7 trus gimana solusinya
@silentvoid_7
Жыл бұрын
@@rendimustasah579 cek penulisannya ada typo apa tidak
@rendimustasah579
Жыл бұрын
@@silentvoid_7 maksudnya typo apa itu bang
terimakasih pak, kontennya sangat membantu saya yang tidak punya uang untuk kursus bisa belajar buat website juga. untuk konten pertama yang portofolio memang saya cuma ikut-ikutan saja, tetapi di konten kedua ini saya mulai mengerti tag html dan properti css yang dipakai dibanding yang pertama. Teruntuk image dan background image saya masih kesulitan mengatur ukuran lebar dan tinggi, serta memilih dan mengolah gambar agar responsive (mungkin kekurangan referensi layout, editing,serta memilih warna karena saya sangat awam dengan komputer) tetapi saya akan terus berusaha :)
@programmingotodidak4240
Жыл бұрын
Semangat bang. Saya juga sama-sama masih awam. Saya jurusan Pertanian tapi pengen bisa bikin program dan Web.
@sierranyakak2847
Жыл бұрын
Bang saya sdh punya domain tp belum hosting karna keterbatasan kemampuan, karna dulu belajrnya hukum bukan it, 😂bisa g kami d bantu pembuatan webnya smpai publish?
@sierranyakak2847
Жыл бұрын
Bang saya sdh punya domain tp belum hosting karna keterbatasan kemampuan, karna dulu belajrnya hukum bukan it, 😂bisa g kami d bantu pembuatan webnya smpai publish?
@_IA_IndahTriAstuti
7 ай бұрын
😊😊
pak Sandhika, terima kasih sudah berbagi ilmu per-coding-an nya hehe jujur aja saya belajar web lebih mudah mengerti dengan melihat video Bapak ketimbang penjelasan dosen saya wkwk setiap langkah dijelasin biar tau fungsinya, keren banget! semoga ilmunya bermanfaat untuk Bapak selaku pengajar dan kita semua selaku pelajar online...aamiin🙏🏻
terima kasih banyak pak ilmunya. anda adalah dosen sejuta umat IT.
terima kasih banyak pak Dhika, konten2 pelajarannya sangat bermanfaat sekali dan cara pengajarannya juga saya suka banget. andaikan dulu dosen2 saya mengajarnya spt pak Dhika pasti nilai dan skill saya jauh lebih baik daripada sekarang.. but it's all water under the bridge, saya akan berusaha untuk lebih rajin ngikutin materi kuliah dari pak Dhika mulai sekarang. tolong doakan saya supaya bisa tetap rajin ya hehehe
@BudiAgung-vn5ub
Жыл бұрын
😅😅😅
Panutan Web Programmer Se-Indonesia👌🙏
@gunzxx1723
Жыл бұрын
ril no fek
@itsegiginanjar9131
Жыл бұрын
selalu daging, bergizi, multivitamin 🔥
@IrmaWati-sf8vm
Жыл бұрын
BETULLLL
@tomplojenius9819
Жыл бұрын
hahaha
@rendhiali43
Жыл бұрын
@@itsegiginanjar9131 asli bang gokil sih bukan kaleng kaleng 🔥
terimakasih pak ilmunya. semoga ilmunya semakin berkah dan dimudahkan rezekinya amin
Hatur nuhun pa dosen atas ilmunya semoga senantiasa diberikan kesehatan dan rezeki yg berkah 🙏
Dari pemaparan yang bapak berikan mudah dipahami pak🙏terimakasi atas ilmu yang bapak berikan sangat bermanfaat bagi programer pemula/mahasiswa seperti saya..well pokonamah pak🤙
Entah kenapa ketika guru sekolah saya yg menerangkan semuanya sulit dimengerti,tapi anehnya setelah menonton video padika semua penjelasannya sangat mudah dipahami..terimakasih untuk padika karena membuat saya mengerti dan paham tentang pemrograman..🙏😊
@she579
Жыл бұрын
Ditunggu kelanjutan nya Pa dosen,🙏🙏🙏
@jayper2133
Жыл бұрын
Aaaaaaaa
@jayper2133
Жыл бұрын
Aaaaaaaapp
@jayper2133
Жыл бұрын
Pp
@jayper2133
Жыл бұрын
😊
ini real channel pendidikan sampe sesi sponsornya pun kasih tutorial hosting
terimakasih pak atas ilmunya, sedikit" saya ikutin yaa lumayan ngeh walaupun belum 100% 😁🙏🏻
Kalo menurut video ini 2 jam aja sih bisa menghasilkan website responsive. Tapi itu berarti bisa 20 jam atau bahkan 2 hari bagi seorang noob programer seperti saya ini.. Wkwk.. Terimakasih pak Sandi, panutan umat programing Indonesia and maybe bisa se-Asia-an.. Sehat & sukses terus pak..
@andinipratisya4138
Ай бұрын
sama, akupun selesain video buat website 2 jam ini selama 2 harian😂
Terima kasih ilmunya pak dika 🙏🏻 next bisa dilanjutkan fitur2 dan databasenya yg blm bisa digunakan pak 🙏🏻
@programmerid3396
Жыл бұрын
klo buat fitur kaya form kontak, keranjang, pelajari aja tentang crud php
terima kasih pak dosen membantu bgt buat ngelatih skill saya kebetulan saya masih pemula bgt buat ngoding
Penjelasannya mudah dipahami bahkan untuk yang awam seperti saya. Terimakasih kak
ditunggu playlist react js nya pak dhika 😇🙌🏻
Dosen web programmer se Indonesia 🔥
mantap memang bang sandhika galih penjelasannya untuk developer pemula no kaleng kaleng😎
saya gak ada dasar ngoding, tapi suka dengan coding,gara2 channel ini jadi tau apa itu coding teimakasih padika semoga sehat selalu
ditunggu playlist react js nya pak dhika ... hehehe
Permisi pak mau tanya ini kenapa ya saya pas coba pakai github pages yang mucul HTMLnya doang tapi CSS dan Javascriptnya tidak ter load ke dalam webnya ?? mohon bantuanya pak 🙏🙏 dan juga buat temen - temen yang tau mohon bantuanya
Mantap bang Andhika. Smoga smakin berkah ilmunya.
Alhamdulillah saya bisa mengikuti walaupun orang Awam. Semoga Alloh selalu memberi perlindungan dan keselamatan untuk Pak Sandika Galih dan keluarga. Aaamiiin
pak itu saya ngikutin yang di bagian js ('active'), akan tetapi setelah di save berubah menjadi ("active"), jadi ketika saya klik menunya menu sidebarnya tidak mau muncul, itu gimana ya pak?
@ngland26
Ай бұрын
sama saya juga begitu, jadi ga jalan program js nya, ada yang bisa kasih solusi?
@MuhammadFajar-os1fq
11 күн бұрын
@@ngland26 ada kesalahan typo nya kadang bang, mungkin ada ketinggalan huruf kapitalnya, yang harus nya kapital tapi nggak, contohnya classList tertulis classlist
pak rekomendasi mouse nya apa ya pak?
Thanks pak dika, udh ngasih ilmu yg sngat bermanfaat👍
bagus pak, bikin lagi materi seperti ini, mengulang materi yang bapak pernah ajar...
di menu sidebar gamuncul putih bang waktu diklik, itu kenapa ya? pas bagian javascript
@novara_pranesia
Жыл бұрын
iya bang waktu apa ada yg salah waktu ngikuti di javascript nya? baru pemula soalnya
@YourInside
Жыл бұрын
Up bang masalahmu sama kaya saya
@hexanogen1193
Жыл бұрын
samaa, tanda kutip 1 nya berubah menjadi kutip 2
@zxyho9
4 ай бұрын
@Merlin_Hermes.Udah bisa belum lu bang gua juga sama gak muncul nih
@Geryapril
4 ай бұрын
Sama kasusnya
pak itu saya ngikutin yang di bagian js ('active'), akan tetapi setelah di save berubah menjadi ("active"), jadi ketika saya klik menunya menu sidebarnya tidak mau muncul, itu gimana ya pak? terimakasih
@karnadidisa3556
9 ай бұрын
iyaa cuy samaa
@Swayz33
8 ай бұрын
@@karnadidisa3556ga masalah itu titik 2 atau satu , mungkin ada codingnya yg salah
@aryadani8891
2 ай бұрын
Udah bisa belum bang?
@rafliakasarp
2 ай бұрын
@@aryadani8891 belum
@FirmanDanny-it3gy
2 ай бұрын
masss kalo udah bisaa gimana caranyaaaaaa
Keren bet websitenya, dari warnanya pun bagus, Thanks pak Dhika 😊
Benar benar gampang di pahami walaupun saya pemula html
bang mau nanya kok aku ngestuck di toggle navbar nya ya dia gamau keluar
@user-ep6qx6tg1d
Ай бұрын
Iya sama
@user-rr7vs2iq4m
Ай бұрын
Smaa
@ronaldoadhie1356
Ай бұрын
coba di cek lagi bro, script javascriptnya yg di html. siapa tau ada salah ketik. contoh src jadi scr. makanya javascript togglenya ga mau jalan.
@NhEa12wai11
Ай бұрын
@@ronaldoadhie1356 Kalau dari navbar menit 20:22 aja udah gak jalan, salah dimana bang kira kira?
@ronaldoadhie1356
Ай бұрын
nah, itu musti coba cek lagi ketikannya bang, salah ketik dikit, terus beda nama di tag htmlnya, kurang titik koma. pasti ga bakal jalan bang
Dosen onlinee terbaik, sering sering buat konten ginian pak, buat latihan"
Makasih mas, ilmu mahalnya, sehat, berkah, bahagia, berlimpah dan berlipat ganda selalu 😊
Terimakasih pak dika, Gk tau kenapa kalau lihat tutorial pak dika malah lebih paham ,
Dilanjutin Pak untuk episode berikutnya Terimakasih ilmunya Pak👏
keren bngt pak dosen. ilmu yg sangat bermanfaat
sangat sangat bermanfat, menambah motivasi saya untuk bisa jadi fullstack full time 🙏
Guru terbaik sepanjang masa. terima kasih banyak guru
ilmu mahal ny pak dosen, makasih banget!!, ditunggu penjelasan dari video berikutnya pak dosen, sudah disubscribe
mantap bang, cara penyampaiannya detail dan mudah dimengerti👍👍👍👍👍👍👍kereenn.....
Sumpah udh kyk dosen sama kakak ini mudah di mengerti sumpah
halllo bang terimakasi sudah buat vidio ini yang sangat membantu saya yang baru belajar dan baru buat project dari sekolah dengan kata dan penjelasan yang sangat mudah dimengerti oleh pemula seperti saya terimakasi bangku😁
Terima kasih banget pak, kebetulan banget saya mau buat website porfolio.
Mantap pak Sandhika! Sehat sll buat buat bpk Sandhika Galih...
terima kasih pak dika sering2 pak bikin tutor gini buat latihan
Assalamu'alaikum pak terimakasih banyak atas ilmunya udah saya subscribe semoga sukses terus dan berkah selalu 🙏🙏
Sy dulu belajar php lumayan bisa, trs html dan css gak bisa, alhamdulillah dg penjelasan dari pak Andhika yg jelas jadi semangat lagi belajar html dan css
@andikadika519
4 ай бұрын
Sama" bang😂
Suka banget klau banyak video kyak gini pak heheh
semoga rejekinya lancar terus pak dhika
terimakasih pak sangat mudah dipahami semua materi2 nya, kalau ada waktu boleh dong pak dibuatin tutorial navbar yang ada menu dropdoennya
Mksh penjelasan yg baik ini. Lanjut abangkhu saya akan membuat website saya.
keren bgt pak videonya, dijelaskan satu2 lagi property css nya walaupun saya blom selesai nonton playlist tapi udah lumayan paham wkwkwk
@riojuniar9670
Жыл бұрын
Mantap pak dika, sukses terus
Pakk request dong buat next episode lanjutannya coba tambhin kayak Carousel 3D gtu pak sama kasih langkah² buat aktifin search nya pak
Makasih pa Dosen ilmunya. semoga selalu sehat pa dosen
Bang makasih banget, akun abang bermanfaat banget buat yang masi belajar coding
terima kasih banyak atas ilmunya pak dikaa.. semoga sehat selalu
Terima kasih pa buat meterinya, semoga rejekinya berlipat ganda. Amin
Keren pak Dika, ditunggu playlist laravel 10 yg sbntr lgi rilis👏💥
mantap...meski ga saya coba, ini pasti sangat berguna suatu saat 😁👍
banyak ilmu yang saya dapt dari video ini. 👌🙏
trimakasih pak sandhika sangat membantu sekali videonya . keren
keren kali pak dika, semangat terus pak dika bagi ilmunya
Terimakasih saya sangat membantu mengikuti cara buat program ini
Lanjut part 4 bang pLiisss, sampai fiture"nya bisa diakses / digunakan, gara" nonton video ini saya jadi punya motivasi baru, pLiisss dilanjut part 4 bang
Geloo terimakasih pak sandhika, penjelasan yang sangat mudah dipahami ❤❤
Mantap pak, next bikinin playlist ttg tutorial webflow dong pak pliss 🙏
keren banget sih bang, bener-bener mudah buat dipahami. sukses selalu ya bang
Mantab Pak Dosen, terima kasih tutorial NgoBarnya...
terimakasih pak, bermula dara sampeyan saya mulai bisa memahami tentang WEBSITE
@satrio1292
2 ай бұрын
Gmna bang, udh bisa bikin kah skrng?😊
Makasih pak, sangat membantu buat referensi tugas besar saya
terimakasih banyak pak atas ilmu nya. semoga sehat selalu..
pak dhika, izin bertanya.. ketika sudah saya kasih JS dibagian navbar, kenapa item hovernya hilang dari navbar??, jadi harus di klik baru muncul item after & hovernya??
ini yang dibutuhkan, deploy repo private, request, jika ada database, dan file koneksi tidak berubah ketika push, karena di lokal, file koneksi.php berbeda. salam dari Blitar
pak dhika buat part untuk buat database dong biar bisa nambahin, ngurangin menu kopinya sama isi stoknya, aku pemula soalnya
terus berkarya kang terima kasih atas informasi dan ilmunya
Mantap,. Pa Galih..., terus berkarya.. 👍
mantap om. izin download videonya ya. JS agak rumit tapi lumayan lah
terima kasih cukup di mengerti detailnya pak...mantap bangaett buat yang baru belajar...👍👍👍 mau tanya.klau mendapatkan elementor pro nya bagaimna pak?