MUDAH! BUAT WEBSITE TRAVEL DENGAN HEADER VIDEO // Membuat Website Dengan HTML CSS dan Javascript

[@zakiulumudin2887]

Semangat semuanya,untuk eror² di masalah responsif di benerin sendiri aja, anggep aja itu tantangan itung² belajar mandiri, soalnya g semua layar sama Untuk Abangnya thx Uda ngasih ilmu free🙏🙏

[@mirnaher6350]

Bner bnget. Di laptop gua, bagian tombol menu garisnya kdang bisa di klik kadang enggak😢 pdhal udh sesuai yg di video

[@dirumahrafif]

Bisa simak timeline nya ya, biar bisa maju mundur sesukanya... 😀 ============================== 00:00:54 Tahap Persiapan 00:02:17 Download Asset Gambar & Video 00:04:34 Mulai Membuat File index.html 00:07:05 Membuat Navigasi 00:21:35 Membuat Lokasi Header 00:29:02 Menambahkan Tulisan Di Atas Header 00:34:28 Memberikan Overlay Di Atas Video 00:36:59 Mengatur CSS Agar Memiliki Tampilan Responsive 00:39:03 Memberikan Tanda Garis-garis di Responsive Menu 00:42:13 Menambahkan Javascript & Jquery 00:44:27 Membuat Fungsi Javascript Untuk Membuat Tampilan Responsive 00:49:28 Memberikan Pengaturan Tampilan Menu Responsive 00:54:49 Membuat Section About Us 01:02:06 Mengganti Warna Background Nav Saat Scroll 01:05:48 Mengganti Warna Menu Responsive dan Logo Saat Scroll 01:10:48 Memberi Efek Smooth Saat Scroll 01:11:33 Mengatur Warna Menu Saat Tampilan Maksimal 01:12:19 Membuat Section Support 01:19:45 Membuat Section Gallery 01:24:15 Membuat Section Quote / Testimoni 01:28:42 Membuat Section Team 01:34:30 Membuat Section Blog 01:45:49 Membuat Bagian Footer dan Section Contact 01:53:13 Melakukan Pengaturan Tambahan Di Tampilan Responsive

[@asrulmuamirul940]

bagian gallery belum responsive om, tolong panduannya

[@siapaya7776]

gw ikutin video lu bang dari awal sampai akhir biar gw lebih paham sekalian gw praktekin ke vs code di laptop gw, ini si bermanfaat banget bang buat gw thanks banget bang

[@FluffyChise]

Trimakasih Banyak Atas Ilmu nya Bang" semoga Sukses Selalu Agar bisa Memberi Banyak manffaat Dan Ilmu Yang berguna bagi bangsa

[@IrvanMaulana_-vo4re]

makasih bang rafif tutorialnya mudah dipahami dan begginner friendly sehingga yang pemula tidak kesusahan untuk mengikut videonya, mungkin bang rafif kelupaan pada bagian support itu gak ada headingnya tapi it's ok, disini saya ikutin sampe akhir dan saya tambahakan beberapa efek animasi menggunakan library animation on scroll biar lebih interaktif lagi hehe

[@elinyulyana5791]

makasih bang berkat video ini, saya gapusing lagi. otak selalu berfikir ribet bgt sekolah IT, tapi nyata gampang setelah liat video ini. terimakasih banyak

[@MSIsyaiful]

Mantap bang keren tutorialnya sangat bermanfaat, suskses terus bang dalam berbagi ilmu.

[@zoygaming7345]

Saya sebagai pemula sangat terbantu sekali dengan adanya video ini, terimakasih banyak

[@dirumahrafif]

Semoga membantu ya

[@Vibe_stef]

uhhhh meskipun tutor nya 2 jam , sedangkan yang saya ngikut 6 jam tapi hasilnya memuaskan terimakasih bang, sehat selalu

[@aouxswantoro5432]

Ini channel keren ke-dua yang aku temukan di youtube. Bagus.

[@antonsugiharto2795]

keren bang..mantab bangt..mudah mudahan sehat selalu bang.jangan bosen2 bang share ilmunya..terimakasih banyak..

[@agrif9109]

Makasih bang , jdi tau jquery mempermudah bgt ternyata buat njalani javascript... lagi mendalami jquery nih... sangat bermanfaat. apalagi bila digabung sama bootstrap makin joss ...

[@dirumahrafif]

sama sama Bang...semoga bermanfaat

[@Marterdian]

sangat mudah dipahami. terima kasih ilmunya sangat bermanfaat sekali.

[@purnamadewi5697]

Makasi bwang🙏 tutornya,saya sangat terbantu dengan ini,semoga makin jaya udara,darat,laut🤝

[@Bay-jy2sw]

Terimakasih bang sangat bermanfaat ilmu nya. .

[@yosefaditya9901]

pak terima kasih banyak untuk ilmunya, sangat membantu bagi saya untuk belajar

[@dirumahrafif]

Semoga bermanfaat Bang

[@delianaadel2847]

Kakakk aku mau bilang makasih banyak gapelit ilmuu, alhamdulillah berkat video ini di chanel kakaaa kerja praktek informatika aku beresss🥵🥺 makasih banyak loh kaa, smpe bingung harus gimana lgi ngebuktiin makasih nyaa.. makasih bgt🥺

[@Caisar13]

terimakasih pak atas tutornya sangat membantu saya dalam membuat web

[@dirumahrafif]

alhamdulillah, semoga bermanfaat Bang

[@mikhaelvanwellman28]

makasih banyak kak , aku kelar ikutin nya , dan sudah sedikit paham , makasih sudah turut mengamal kan uud45 untuk mencerdaskan kehidupan bangsa , salut

[@gugungunawanti2080]

Mantaps,, terimakasih atas ilmu nya , tetap semangat🙏🙏

[@hahahihi526]

Terimakasih, sangat bermanfaat ilmunya 🙏

[@mansurmursalim9055]

Terimakasih ilmunya bang..semoga berkah🙏

[@dirumahrafif]

Semoga bermanfaat

[@Tim5Strby]

Terimakasih tutornya

[@akromkencana1537]

Terimakasih bang atas ilmunya semoga sukses dan bermanfaat.

[@dirumahrafif]

amiin

[@dwiifata5629]

Bang kenapa navigasi yang garis saya ketika diminimize tidak bisa ya ? (tidak keluar menunya) padahal udh ngikutin tutorial dan sama persis dan saya cek tidak ada yang error mohon bantuannya :)

[@SpongeBob-q5i]

Terima Kasih Banyak Bang 😊

[@L4FCLIP]

terimakasih banyak ilmunya bang

[@aouxswantoro5432]

Tutorial keren... Makasih banyak, Bang

[@badrunlaiha8767]

Salam sehat dan sukses selalu bang ,,

[@apriyanaprasetioputra4254]

terima kasih bang. sukses terus bang dan lancar rezekinya amin

[@bhavananove8673]

Mantap bang bermanfaat banget ini ilmu nya🙏🙏

[@bhavananove8673]

Tutor lagi dong bang cara bikin carousel pake js,

[@adminpontrenparamaan6376]

Bang ijin request bikin website pondok pesantren bang, yg responsif dan simple menarik. Terimakasih bang .... Semoga cepat dapat notif video yg saya request 🙏🏻🙏🏻🙏🏻

[@dirumahrafif]

semoga ada rezeki waktu dan ilmu, untuk membuat hal yg serupa .. amiin

[@adminpontrenparamaan6376]

@@dirumahrafif aamiin ya rabbal alaamiin , terimakasih

[@agungbluy7230]

Auto subscribe lu bang,

[@subadrunrr2292]

Assalamualaikum bang mau tanya, kan saya dah buat code program sesuai yg diintruksikan, tapi di webnya (video) masih ada jeda/space di sebelah kanan , trs aku hps CSS dan co-past link yg dideskripsi masih ada jeda itu gimana, ya? Sampek mnt 27:06(CSS Sampek header) mau tunjuk foto(troublenya ) tapi gak, bisa mohon bantuannya bang

[@dirumahrafif]

header { position: relative; height: 100vh; width: 100%; overflow: hidden; z-index: 2; } header video { position: absolute; top: 0; left: 0; object-fit: cover; z-index: -2; } penulisan pada bagian ini mungkin Bang...

[@rikijunizar5499]

Perbanyak konten kayak gini bang, makasih

[@internetpolyglotmastery]

Keren bingitssss

[@asyraf.sinclair]

Bang gw sebenrnya jelas apa yg lu maksud tapi ada yg kurang sama penjelasan detail nya, kaya itu nav.putih kenapa berbeda gk di spasi, sama bedanya width sama max width nya

[@breadcoconut]

Kyaknya ada yg kelewat bang,wkt di minimaze gallery 8 foto ada yg nggak muat fotonya..mgkn dibikin effect slide cocok.

[@muslikhinmustofa65]

Bagaimana cara menampilkan 3 taq meta dalam snipad html, krn tampilan di laptop saya cuma ada 2 taq meta aja. Thanks

[@ramadhanrazendra6457]

Terimakasih🙏

[@sangaji_sape1584]

makasi tutornya

[@kimsunkho1619]

menit 15 : 18 ini nav spaci logo ya. bukan nav titik logo. yang jelasnya harus pake titik supaya running

[@revaanggita4669]

Kak buat website surat perjalanan dinas dri html, css, php, mysql, javascript ding tolong tugas kuliah ini bantu aku

[@user-mf2rs1oq6l]

Makasih banyak ilmu nya bang, mau nanya kalau kita dah selesai di hmtl , css, java scriptny cara nyambung ke hosting sama domainnya gmna? Kira² di video edukasi abg udah ada belum penjelasannya? Makasih banyak bang

[@ahmadhanifhasanrosydi3609]

bikin tutor jquery yang bisa buat universal kek misal pake hp nanti tampilannya gini, window seperti ini, ios sperti ini dsb makasih semangat terus bang

[@Abdillah004]

Bang, tulisan visit Indonesia dan more infonya kok tetep gak keliatan. Dia tetep di belakang video pdhl aku udah turut persis kodingnya.. Mohon masukannya bang 🙏 🙏 🙏

[@rurumochi]

Ikut nyimak, gabisa jg soalnya

[@Rania-ci6fb]

Bang ak kan ngikutin videonya juga beserta syntax nya udah sama Persis kaya yg abang buat tp kenapa pas ditampilin di browsernya malah hasilnya berbeda ? Contoh di abang logo travelnya di Kiri tp di saya malah ditengah ...knapa bisa gitu ya bang ? Padahal sintaxnya udah sama persis ngikutin yg ad di video 🥺🥺

[@prassyah]

iya bang udh cape" buat pdhl😢

[@prassyah]

ada jawaban nya ga knp?

[@MSIsyaiful]

Izin bang kalo bisa lanjut dibuatin cms nya juga bang.

[@relaxtwice7431]

Bang saya sudah ikut langkahnya step by step, tapi saya ada kendala di js. Alert di JavaScriptnya masih bisa jalan di menit 45:55 tapi setelah saya ketik seperti kode berikut, tidak bisa lagi. //menu var tombolMenu = $(".tombol-menu"); var menu = $("nav .menu ul"); function klikMenu() { tombolMenu.click(function() { menu.toggle(); }); menu.click(function() { menu.toggle(); }); } $(document).reaady(function() { var width = $(window).width(); if (width < 990) { klikMenu(); } }) nama kelas sama

[@dirumahrafif]

coba diklik kanan kemudian inspect elemen...ada error gak Bang?

[@relaxtwice7431]

@@dirumahrafif Sudah bang tidak ada yg error. masih belum bisa responsive ketika browsernya dibuka pake HP.

[@siapaya7776]

@@dirumahrafif sama bang gw juga begitu kyknya kesamaan dari nav .menu ul{} deh bang

[@arifmtsm3399]

@@dirumahrafif sama padahal terminal udah include node.js dan extension😅😅

[@robertusardian4570]

cek JS nya coba, bagian klikMenu udah bener penulisannya?

[@rutnaomiestersitompul3444]

mau tanya bang, kalau misalnya kita gak pake framework sama sekali gimana? hanya js apakah tetap berjalan dengan baik? ada tugas tapi dilarang pake framework apapun. solusinya gimana ya? Mohon dijawab🙏

[@dirumahrafif]

toko online seperti ini Bang, gak pake plugin kzbin.info/www/bejne/oXyVZIKOiK-Mh9ksi=jS53mWg5_1ygQ1WP

[@ayihusain]

Thanks bang. Sangat membantu

[@aryoahmad3824]

Bro, ane bener bener pemula, mau nanya apa saja bahan yg musti disiapin untuk bikin website, selain laptop. Dan penginstalannya sebelum mulai. Mohon penjelasannya. thx Bro

[@dirumahrafif]

kalau di tutorial ini, paling butuh text editor visual studio code Bang, browser, dan ekstensi live server dari visual studio code

[@gosport4739]

Apakah tutorial2 seperti ini tetap work seiring berjalannya waktu? Baru belajar dunia coding

[@dirumahrafif]

masih Bang, HTML CSS Javascript masih banyak digunakan

[@mahmudaminudinhafiz]

Ko punya gua navigasi ga berfungi. " cannot get support" menu yg lain juga gabisa. Solusinya bang?

[@muhammadoktosaputra2023]

Bang kok kalo punya saya vidio nya nggak ada di web ya padahal udah saya ikutin cara² nya

[@assidqi09]

ka tulisan travel saya kenapa gabisa bergeser ya kak masih tetap berada di pojok kiri ga bisa aga ke tengah seperti di vid tutor kk?makasih ka

[@toploaditya6051]

Ilmunya sangat bermanfaat bang, terimakasih, gimana cara tambahkan wa bang?

[@afifadisantosa469]

bang untuk menu garis saya ga muncul knpa ya? untuk codingan udh sama smua

[@JunkerInside]

Udah ikutin java script nya untuk nav yg berubah jd putih tp tetep gk mau putih😢

[@zikridamo7220]

Bang ini layoutnya udah pake flexbox ngak?mohon di jawab bang

[@dirumahrafif]

blm bang

[@angelialeamcie988]

knp saya error di nomor 58-61 mulu ya, padahal dari awal udh ngiktin sama persis 😢

[@fahmioktavian4907]

Terimakasih banyak ilmunya mas, sangat membantu banget nih mas mau tanya juga mas, kalau di bagian gallery itu biar gambarnya bisa digeser kayak slide gimana ya mas, ketika dibuka di mobile

[@dirumahrafif]

bisa tambah dengan carousel jquery Bang...

[@restu_widodo]

reques website sokolah kak,

[@titinpasaribu5727]

Jika ingin membagikan link nya bagaimana ya bang? Agar bisa di akses oleh babyak orang

[@setopriambodo243]

Izin bertanya mas kok ini di bagian video nya enggak full sampe ke atas ya mas cuman setengah doang padahal saya ikutin sama persis

[@kimutaysabila8469]

mau tanya bg,saya udh 2 hari ga nemu eror nya dmna bagia input link nya ke html,tpi di crome saya ga ada gambar nya,cuma ada dokumen kecil di atas kiri

[@prassyah]

coba jgn pake asset

[@nukava_12]

Di menit 11:23 kok saya ga bisa bikin logonya ya bang, yg abis div class logo lalu bagian img src nya

[@gustiandralesmana9696]

Keren

[@dirumahrafif]

makasih Bang..semoga bermanfaat

[@aouxswantoro5432]

Auto subscribed

[@enggareka2810]

Bang maaf mau tanya, kenapa tidak bisa di akses lewat ponsel website nya, mohon penjelesannya bang..

[@dirumahrafif]

perlu diupload di hosting dulu Bang, supaya bisa diakses...atau pake github bisa jg Bang..

[@sandidarmansya5673]

Bang di bagian @media screen and (max-width:991.98px) ketika di kontrol+S tdk berfungsi bang. Apa ada solusinya ya?

[@ArifRahman17]

mantaaap banget nanti gw coba ini . broo ada ga tutor . Setelah user/admin login masuk ke halaman yg sama namun hak aksesnya beda. dan gimana cara daftarin user/adminnya . Saat si user daftar tanpa pilih role nya gitu. Lagi butuh banget buat skripsii

[@dirumahrafif]

belum ada Bang, alurnya sih bisa dibuat.. 1. ada satu tabel di db yg mengurusi tentang relasi antara id user dengan hak akses 2. kemudian di aplikasi dibuat menu yg berbeda tergantung dari hak akses yg dimiliki seorang user

[@yusronhapizin6640]

Kok punya a saya tulisan menu sama logonya gk nampak setelah vidinya dimasukkan

[@berlianawahyunurlita5430]

Bang izin kalau web ini ditambah php gimana ya bang caranya 🙏

[@miftahularifin2532]

kok diwebsite sy videonya tetap tidak bisa full layar ya kak

[@gizzaauralia8404]

Bang ko menu yang di garis tiganya ga muncul ya?

[@inrasepriadisaragih3138]

TY MASS

[@moffers7256]

Makasi bang Minta jQuery yg ofline gimna ya cara downloadnya Sukses terus Abang 🙏🙏

[@bukiromst8836]

thank you

[@GDNEWS71]

Bang, cara buat chrome normal lagi gimana, gw udah ikutin smuanya tapi malah video backgroundnya setengah wkwk

[@cringechanel5663]

Knp logonya tidak mau mengecil bg?

[@capturingmoments20s]

Bang kalok video nya itu diganti img src bisa gak?

[@Satria_prayoga.]

Kak mau nanya kenapa ya teks aku berada di tengah padahal udh sesuai setting sama, gk mau ke pinggir 🙏

[@prassyah]

udh ada jawabannya blm kak kenapa??

[@achmadasyari3959]

bang seandainya desain webnya di kasih CRUD bisa lah bang?

[@bukiromst8836]

thank

[@dirumahrafif]

sama sama Pak...semoga bermanfaat

[@moffers7256]

Makasi bang Minta tolong jQuery yg ofline dong 🙏🙏 Soalnya aku sdh ikut step by step tpi baground vidoenya cmn setengah ga seluruh halaman sampai ke tim kami dan kontak Mohon bantuan nya

[@asyraf.sinclair]

Di 100% ka height sama width nya klo mau seluruh halaman

[@suryantodapi3624]

bang ssat memberikan opacity pada overlay, layarnya tetap hitam, mohon pencerahan

[@dirumahrafif]

script css nya ditulis kayak gimana Bang?

[@suryantodapi3624]

@@dirumahrafif sdh bisa bang😀

[@suryantodapi3624]

apa kah ada cara bang untuk background videonya,, klo di perkecil layarnya, videonya juga mengecil???

[@alifurunusaina4001]

Auto subscribe

[@dirumahrafif]

makasih ya...semoga bermanfaat

[@ArifRahman17]

Gasss

[@musicclassic883]

Bang ko kadang di tampilan tombol navigasi kadang bisa kadang nggak bisa. Itu kenapa ya? Terimakasih

[@dirumahrafif]

Tidak bisanya seperti apa Bang?

[@syaddadraihanputra]

Bang tutor bikin website yang seperti ini tapi pakai php dong 🙏

[@randzcode]

Up

[@muhammadhidayad9302]

up

[@sadqidasqo7602]

EN VISUAL STUDIO CODE NI PERCUMA KE TOOL TOOL DIDALAM NYA JUGA PERCUMA KE

[@putuaryadharmakesuma2774]

42:25 menu

[@netwalker487]

kok layar saya gk fulll ya videonya ada yng tau gk gimana cara benerinnya

[@RyuuZoldyck_]

Script html nya kita bikin sendiri?

[@mokilll8085]

bang ini yang di nav .logo imgnya gamau ngecil sesuai ukurannya bang

[@dirumahrafif]

di cssnya blm pas brarti Bang, atau class nya ada yg kurang

[@ree.antika]

Bang Link Video dan Gambar tidak tersedia

[@alazery48]

yang penting semangat bang

[@dirumahrafif]

harus tu...

[@gembelberkelana7990]

Bang buatin turorial membuat script untuk add friend fb by uid bang

[@tarahaert8475]

Bang gimana cara mengisi file di dalam ketika seseorang menekan more infonya

[@dirumahrafif]

bisa buat file html baru Bang, kemudian diarahkan di tombol tersebut ke file html atau file yang lainnya tadi

[@atharafiramadhana7022]

bang mau tanya itu pas nav putih yang discroll jadi warna putih punya aku gabisa bang gimana tu

[@dirumahrafif]

di javascript nya sudah ditambahkan untuk berganti warna di nav nya Kak?