Membuat WEBSITE Kedai Kopi RESPONSIVE dengan HTML & CSS dari 0 + Autodeploy ke WEB HOSTING
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- 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
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!
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🙏
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 :)
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 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
Panutan Web Programmer Se-Indonesia👌🙏
ril no fek
selalu daging, bergizi, multivitamin 🔥
BETULLLL
hahaha
@@itsegiginanjar9131 asli bang gokil sih bukan kaleng kaleng 🔥
Tutorial yang sangat mudah dipahami & jelas. Langsung bikin candu jadi pengen belajar lebih dalem lagi untuk cooding, thanks bang 🙏
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.
Alhamdulillah.. terima kasih bang utk tutorialnya, sangat sangat bermanfaat jika dilakukan dgn praktik langsung begini..
1 video ini menjawab semua kesulitan yang beberapa kali saya alami/temui sebagai pemula dalam pembuatan website. komprehensif
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.
Sama bang gua juga gitu,pas html kyk mudah,css bosen pas javascript bingung
sama baru belajar lagi dari nol
mau saling sharing-sharing ga bang? kebetulan saya juga baru mulai baru-baru ini @@fahrezafaisal6004
Terimakasih cukup dimengerti pak, mantep banget buat yang baru belajar tentang dunia programmer 🔥🙏🏼👍
Wahh terimakasih pak detail bangett cara jelasinnya mudah di mengerti semenjak nonton playlist playlist dari bapak saya jadi paham sangat membantu sekali🤗🙏🏻🙏🏻
Makasih pak dika, selalu berkarya terus dan semakin menginspirasi kami ke depannya.
Terimakasih banyak pak dik. Ilmu njenengan tidak bisa di bayar oleh apapun selain memanfaatkannya untuk mendukung dunia Digitalisasi
terimakasi Pak. semangat pak tetap strong dalam pemberian materinya yang sangat jelas dan bermanfaat
MasyAllah kontennya sangat bermanfaat, selama in belajar di yutube Alhamdulilah hanya di Chanel ini baru saya paham..
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..
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");
}
});
@@rendimustasah579 sama
@@silentvoid_7 trus gimana solusinya
@@rendimustasah579 cek penulisannya ada typo apa tidak
@@silentvoid_7 maksudnya typo apa itu bang
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
😅😅😅
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.
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 :)
Semangat bang. Saya juga sama-sama masih awam. Saya jurusan Pertanian tapi pengen bisa bikin program dan Web.
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?
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?
😊😊
Dosen web programmer se Indonesia 🔥
ini real channel pendidikan sampe sesi sponsornya pun kasih tutorial hosting
Mantaaap..suhu web programmer,maturnuwon pak dikha atas ilmunya..🙏🙏🙏
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🤙
ditunggu playlist react js nya pak dhika 😇🙌🏻
Hatur nuhun pa dosen atas ilmunya semoga senantiasa diberikan kesehatan dan rezeki yg berkah 🙏
mantap memang bang sandhika galih penjelasannya untuk developer pemula no kaleng kaleng😎
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..🙏😊
Ditunggu kelanjutan nya Pa dosen,🙏🙏🙏
Aaaaaaaa
Aaaaaaaapp
Pp
😊
ditunggu playlist react js nya pak dhika ... hehehe
Mantap bang Andhika. Smoga smakin berkah ilmunya.
Penjelasannya mudah dipahami bahkan untuk yang awam seperti saya. Terimakasih kak
Terima kasih ilmunya pak dika 🙏🏻 next bisa dilanjutkan fitur2 dan databasenya yg blm bisa digunakan pak 🙏🏻
klo buat fitur kaya form kontak, keranjang, pelajari aja tentang crud php
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..
sama, akupun selesain video buat website 2 jam ini selama 2 harian😂
terimakasih pak ilmunya. semoga ilmunya semakin berkah dan dimudahkan rezekinya amin
Thanks pak dika, udh ngasih ilmu yg sngat bermanfaat👍
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
di menu sidebar gamuncul putih bang waktu diklik, itu kenapa ya? pas bagian javascript
iya bang waktu apa ada yg salah waktu ngikuti di javascript nya? baru pemula soalnya
Up bang masalahmu sama kaya saya
samaa, tanda kutip 1 nya berubah menjadi kutip 2
@Merlin_Hermes.Udah bisa belum lu bang gua juga sama gak muncul nih
Sama kasusnya
terimakasih pak atas ilmunya, sedikit" saya ikutin yaa lumayan ngeh walaupun belum 100% 😁🙏🏻
terima kasih pak dosen membantu bgt buat ngelatih skill saya kebetulan saya masih pemula bgt buat ngoding
pak rekomendasi mouse nya apa ya pak?
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
iyaa cuy samaa
@@karnadidisa3556ga masalah itu titik 2 atau satu , mungkin ada codingnya yg salah
Udah bisa belum bang?
@@aryadani8891 belum
masss kalo udah bisaa gimana caranyaaaaaa
keren bngt pak dosen. ilmu yg sangat bermanfaat
Keren bet websitenya, dari warnanya pun bagus, Thanks pak Dhika 😊
bang mau nanya kok aku ngestuck di toggle navbar nya ya dia gamau keluar
Iya sama
Smaa
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.
@@ronaldoadhie1356 Kalau dari navbar menit 20:22 aja udah gak jalan, salah dimana bang kira kira?
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
saya gak ada dasar ngoding, tapi suka dengan coding,gara2 channel ini jadi tau apa itu coding teimakasih padika semoga sehat selalu
Mantap pak Sandhika! Sehat sll buat buat bpk Sandhika Galih...
Dilanjutin Pak untuk episode berikutnya
Terimakasih ilmunya Pak👏
sangat sangat bermanfat, menambah motivasi saya untuk bisa jadi fullstack full time 🙏
Guru terbaik sepanjang masa. terima kasih banyak guru
Dosen onlinee terbaik, sering sering buat konten ginian pak, buat latihan"
Makasih mas, ilmu mahalnya, sehat, berkah, bahagia, berlimpah dan berlipat ganda selalu 😊
semoga rejekinya lancar terus pak dhika
mantap bang, cara penyampaiannya detail dan mudah dimengerti👍👍👍👍👍👍👍kereenn.....
Terimakasih pak dika,
Gk tau kenapa kalau lihat tutorial pak dika malah lebih paham ,
bagus pak, bikin lagi materi seperti ini, mengulang materi yang bapak pernah ajar...
Mantap,. Pa Galih..., terus berkarya.. 👍
Terima kasih banget pak, kebetulan banget saya mau buat website porfolio.
banyak ilmu yang saya dapt dari video ini. 👌🙏
Suka banget klau banyak video kyak gini pak heheh
Keren pak Dika, ditunggu playlist laravel 10 yg sbntr lgi rilis👏💥
Mksh penjelasan yg baik ini. Lanjut abangkhu saya akan membuat website saya.
terima kasih banyak atas ilmunya pak dikaa.. semoga sehat selalu
Sumpah udh kyk dosen sama kakak ini mudah di mengerti sumpah
Makasih pa Dosen ilmunya. semoga selalu sehat pa dosen
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😁
Mantab Pak Dosen, terima kasih tutorial NgoBarnya...
mantap...meski ga saya coba, ini pasti sangat berguna suatu saat 😁👍
Benar benar gampang di pahami walaupun saya pemula html
terima kasih pak dika sering2 pak bikin tutor gini buat latihan
Bapak Pemrograman Web Indonesia🙌🙌🙌🙌
keren kali pak dika,
semangat terus pak dika bagi ilmunya
ilmu mahal ny pak dosen, makasih banget!!, ditunggu penjelasan dari video berikutnya pak dosen, sudah disubscribe
Terima kasih pa buat meterinya, semoga rejekinya berlipat ganda. Amin
Keereen pa Dhika, terimakasih banyak
Geloo terimakasih pak sandhika, penjelasan yang sangat mudah dipahami ❤❤
keren banget sih bang, bener-bener mudah buat dipahami. sukses selalu ya bang
Sehat dan suksel selalu Panutankuuuu...
Makasih pak, sangat membantu buat referensi tugas besar saya
trimakasih pak sandhika sangat membantu sekali videonya . keren
makasih banyak pak atas ilmunya, tetap berkarya😀
Sangat menjadi panutan pak dosen Sandika galih
terimakasih banyak pak atas ilmu nya. semoga sehat selalu..
thank you bg gw suka bgt lu, bikkn konten begini terus bg
mantap om. izin download videonya ya. JS agak rumit tapi lumayan lah
Terimakasih saya sangat membantu mengikuti cara buat program ini
Assalamu'alaikum pak terimakasih banyak atas ilmunya udah saya subscribe semoga sukses terus dan berkah selalu 🙏🙏
lanjut part 2 nya pak biar tombol, search, keranjang nya bisa berfungsi, yang setuju like ya
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
Bang makasih banget, akun abang bermanfaat banget buat yang masi belajar coding
Mantap pak, next bikinin playlist ttg tutorial webflow dong pak pliss 🙏
terimakasih pak sangat mudah dipahami semua materi2 nya, kalau ada waktu boleh dong pak dibuatin tutorial navbar yang ada menu dropdoennya
terimakasih pak, sangat membantu untuk tugas dari bu puri Multimedia
love love
terus berkarya kang terima kasih atas informasi dan ilmunya
terima kasih pak dika. sudah saya coba dan berhasil
Pakk request dong buat next episode lanjutannya coba tambhin kayak Carousel 3D gtu pak sama kasih langkah² buat aktifin search nya pak