Halo teman-teman semua apa kabar Selamat datang kembali di channel wpu bersama saya Sandika Galih dan kali ini kita kembali akan ngobar alias ngoding bareng untuk membuat sebuah website yang sebetulnya udah lama banget pengen saya bikin tapi baru kesampaian sekarang karena saya diingatkan kembali karena beberapa waktu yang lalu saya dikirimin oleh beberapa mahasiswa saya sebuah undangan pernikahan online ya jadi saat ini memang sedang ramai tuh ya undangan pernikahan dalam bentuk digital yang dikirimkan berupa website yang bisa dilihat lewat komputer atau lewat handphone sebetulnya dulu waktu saya menikah pun saya pernah punya website undangan pernikahan seperti ini tapi sayang sekali website-nya udah enggak ada sudah enggak bisa diakses dan saya enggak punya backupnya jadi di video kali ini kita akan coba untuk membuat ulang lah ya istilahnya website undangan pernikahan yang teman-teman juga bisa gunakan misalnya untuk undangan pernikahan teman-teman sendiri atau teman-teman mau membuatkan untuk orang lain ya Dan nanti pembuatannya kita akan bagi menjadi beberapa tahap kita pecah menjadi beberapa video supaya teman-teman enggak terlalu panjang dan bosen nontonnya ya Tapi sebelum kita masuk ke videonya Saya mau ucapin Terima kasih dulu kepada sponsor kita untuk video kali ini yaitu niagahoster ya Jadi buat teman-teman yang belum tahu Niaga monster Ini adalah sebuah perusahaan penyedia layanan hosting terbaik di Indonesia yang sudah saya gunakan selama bertahun-tahun ya saya udah percaya dengan Niaga washer ini karena selain cepat aman dan Fiturnya banyak customer support-nya juga sangat membantu saya ketika saya kesulitan dan saat ini Kebetulan ya gangster Lagi ngasih kita diskon yang sangat besar sampai dengan 75% untuk pembelian web hosting pertama kita ya nanti detailnya akan kita bahas belakangan ya tapi yang paling penting kalau misalkan teman-teman tertarik untuk menggunakan layanan ya gangster Nanti pada saat teman-teman beli layanan ya gangster Jangan lupa untuk masukkan kode kuponnya WP Unpas supaya teman-teman dapat tambahan diskon sebesar 10%. Jadi silakan dimanfaatkan oke itu aja pengantarnya dan kita enggak usah berlama-lama langsung aja kita masuk ke pembuatan websitenya Oke teman-teman Mari kita langsung aja mulai ke bagian yang pertama yaitu kita akan melakukan persiapannya dulu ya Mulai dari kita akan membuat folder dari Project kita dulu ya kita bikin aja foldernya di desktop kita biar gampang kita bikin nama websitenya adalah Dino does wedding tuh kenapa namanya Dino Pak jadi ini adalah singkatan dari nama Saya dan istri saya jadi seringkali saya lihat kalau misalkan website wedding itu namanya gabungan dari kedua calon mempelainya Ya silakan kalian kasih nama yang berbeda sesuai dengan website wedding kalian masing-masing misalnya ya jadi Dino Ini Dika dan Nova ya kita masuk dulu ke dalamnya lalu kita buka di terminal agar kita bisa membuka Visual Studio code-nya lewat terminal ya silakan ketik kode spasi titik seperti ini di dalamnya kita akan bikin satu buah file kita kasih nama indeks titik html dan nanti di dalam folder Project kita kita bakalan punya satu buah folder untuk menyimpan gambar kita yang kita kasih nama dengan IMG ya gambarnya kita cari belakangan aja oke satu file ini dulu indeks Dota TML Nanti kalau kita butuh CSS kita bikin kalau kita butuh javascript kita bikin ya Nah sekarang saya mau menggunakan bantuan dari Framework bootstrap ya karena nanti saya butuh beberapa bantuan terutama untuk reset ya atau normalisasi CSS dan juga untuk beberapa hal diresponsifnya tapi nanti akan banyak juga yang akan kita buat dari awal ya dari nol dan sudah lama juga kita enggak pakai bootstrap Jadi silakan teman-teman buka dulu dokumentasinya Oke kita akan masuk ke website-nya cat bootstrap.com dari sini kita akan masuk ke bagian dox untuk mendownload starter template-nya ya kita tinggal Scroll ke bawah di bagian quick start di introduction-nya kita cari template yang sudah menginclotkan CSS dan juga javascript-nya ini tolong teman-teman dicek lagi saat ini kalau teman-teman nonton video ini bootstrap-nya lagi di versi 5.3 ya tolong disesuaikan kalau sekarang teman-teman nonton ini udah lebih baru dan ada beberapa jalan misalnya mungkin bisa diturunkan aja menjadi versi yang sesuai oke tinggal klik tombol Copy to Clipboard ya kita kembali kita paste di sini lalu kita save oke saya Kecilin sedikit lah ya segini cukup rasanya kita lihat dulu hasilnya teman-teman boleh Klik Kanan lalu pilih Open in default browser nah pada saat teman-teman Klik Kanan Pak saya enggak ada Open in default braver-nya nih Nah berarti kalian harus install dulu sebuah extension di Visual Studio code-nya di sini ya ada yang disebut dengan open in browser Ya silakan di install dulu buat yang belum install di klik lalu install supaya nanti kita dapat dengan mudah melihat hasil dari website kita wah kenapa enggak bukanya di live server karena saya ingin melihat perubahannya secara manual Ketika nanti saya pencet tombol refresh gitu ya supaya tahu bedanya Seperti apa Ketika nanti saya all tab ya Klik Kanan Open in default browser sip Boots rap-nya sudah terpanggil Ya sudah aman silahkan kembali ke coding-nya kita mulai ganti dari title-nya ya kita ganti ini sesuaikan dengan judul dari website wedding kalian saya tulisnya gini dan Nova wedding misalnya ya terus Scroll ke bawah nanti kita bakalan butuh beberapa hal di sini ya Kita akan ambil Fonts icon dan juga ada satu komponen Countdown yang akan kita gunakan ya tapi itu belakangnya Oke Scroll lagi sekarang di bagian bodynya kita hapus H1 nya ya kita nggak butuh kita mau bikin fitur pertama kita yaitu membuat halaman yang saya sebut dengan heronya jadi pada saat user masuk website kita yang dilihat pertama kali itu yang itu gitu ya ini kita anggap sebagai informasi yang ada di amplop undangannya kalau misalnya kita menerima undangan fisik gitu ya ini silahkan ditutup dulu selain barnya control B supaya kita punya area kerja yang cukup luas kita akan bikin heronya ini menggunakan sebuah section ya elemen HTML 5 section yang kita kasih nama id-nya adalah hero oke terus di dalamnya kita nanti mau bikin ada satu dive atau kita bikin pakai tank main aja ya ini elemen utamanya Kenapa kita bikin dua ya karena nanti kita mau bikin dia sebagai Flex box yang ada di tengah halaman Oke mau bikin pakai Deep boleh mau bikin pakai main juga boleh ya Di dalamnya kita mau bikin tulisan undangannya jadi di atasnya Saya mau tulis gini pakai H4 misalnya kepada Bapak slash Ibu slash saudara slash i ya saudara-saudari koma harusnya nanti di bawah sini kita tulis nama dari undangannya tapi itu belakangan lah ya kita langsung tulis nama calon mempelainya aja kita pakai H1 kita tulis Sandika dan Novan terus kita tulis pakai paragraf di bawahnya gini akan melangsungkan resepsi pernikahan dalam titik dua Nah nanti di bawah ini saya mau panggil sebuah library Countdown jadi ada hitung mundurnya Jadi kalau orang buka websitenya kelihatan Oh tinggal sekian hari lagi sekian jam lagi gitu ya tapi kita manggilnya belakangan di bawahnya baru kita akan bikin sebuah tombol kita pakai teks a aja yang nanti akan mengarah ke bagian undangannya di bawah jadi misalkan saya kasih hastag undangan gitu ya tulisannya lihat undangan oke ya kita save dulu Kita lihat kembali ke browser kita boleh refresh nah ini ya ini kita bikin satu section dulu aja dan kayaknya di video kali ini kita nggak akan bikin banyak-banyak sectionnya supaya Nanti kalian gak bosen ya nontonnya Nah sekarang saya akan bikin agar elemen ini memenuhi satu layar nggak peduli dia lagi dibuka di mana misalnya di handphone di tablet atau di laptop atau di desktop dan tulisan ini akan ada di tengah-tengah terus nanti akan ada si countdown-nya kita kasih style di bootstrap-nya dulu ya baru nanti kalau misalnya ada yang kurang kita tambahin Starlight secara manual kita mulai dari section-nya Oke kita kasih kelas jadi nanti section-nya ini akan kita Panggil di CSS juga dengan nama Hero ya Kita kasih namanya Hero juga terus saya pengen dia lebarnya 100% tingginya 100% ya sekarang di bus strap kita bisa kasih W Des 100 dan H Des 100 nanti kita kasih padding di setiap Sisinya kita kasih ukurannya 3 aja ini kalau teman-teman mau nambah atau mau kurang silakan ya supaya ada di tengah kita kasih margin nya auto margin di sumbu x auto lalu tulisannya Saya pengen semuanya di tengah jadi kita kasih teks center ya kita lihat dulu Sudah di tengah semua sip display-nya flags sebenarnya kalau enggak pakai ini pun enggak apa-apa ya cuma Nanti kalau kita mau mengatur lebar dari mainnya supaya dia enggak mepet ke kiri ya Kita kasih Justice content center dan satu lagi line item center eh bener nggak Coba kita cek lagi aja jangan-jangan saya salah lagi kita ke Flex di bootstrapnya ya Justice content oh betul ya Justice content center sama line item center ya Oke Betul terus nanti saya pengen bikin tulisannya warna putih jadi kita bisa kasih teks deskripsi karena saya nanti mau bikin background dari section ini warnanya gelap Gitu coba di save dulu kita lihat hasilnya kita refresh udah ya paling ini nanti kita ubahnya pakai CSS aja Atau kita bikin dia jadi button dulu deh kita ke sini kita kasih kelas BTN terus tombolnya gede BTN LG ya kita lihat dulu balik ke sini refresh oke Sudah ya nanti kita style menggunakan CSS itu dia elemen pertama sudah jadi berikutnya kita akan ubah CSS nya jadi nanti kita akan punya gini teman-teman sebelum tutup headnya kita akan bikin Link yang mengarah ke file style CSS ini ya kita Coba bikin dulu buka explorernya bikin file baru mau kita kasih style titik CSS Oke ini jangan lupa diganti dulu ya jadi CSS karena defaultnya saya tuh post CSS Oke sebelum kita isi CSS nya Saya mau mencari font dulu ya silakan kembali ke browser teman-teman kita ke Fonts Google ya Fonts google.com Oke jadi ada dua font yang akan saya cari yang pertama font kursive atau yang tulis tangannya ya font tulis tangan Biasanya kan kalau undangan tuh ada font tulis tangannya namanya sacramento ini keren nah itu ya Ini kalau teman-teman pengen pakai yang lain sih silahkan ya cara nyarinya sebenarnya gampang cara nyarinya kita ganti kategorinya jadi handwriting kita matikan semua ada semua turis tangan tuh kalau sakramento menurut teman-teman nggak cocok ya Silahkan aja saya pengennya pakai yang ini jadi diklik sakramentonya kita lihat ya dia punya Oh nggak punya ketebalan yang dia cuman satu ya nggak papa lah ya kita pakai satu aja teman-teman Klik di atas karena view selected Familys Oh kenapa ada robot tuh robotnya kita hilangkan dulu ya dari move on aja nah jadi kita udah punya sakramento 1 close dulu Sekarang saya mau cari lagi ke Google Voice lagi kita ke nyalain dulu semua saya mau cari font yang namanya work Suns nah ini ya ini selera Jadi silakan teman-teman pilih font sesuai keinginan ya kalau ini dia punya banyak tuh jadi saya akan pilih beberapa nanti saya mau pilih yang paling tipis Terus Yang reguler ya reguler Terus yang semi full sama yang Bold aja dah sip kita klik selected family sudah ya jadi sakramento dan worksan kita udah dapet nih tag htmlnya jadi di kanan bawah teman-teman bisa Klik tombol copy tinggal nanti kita Panggil nih font family-nya apa Oke kembali ke coding kita kita simpan sebelum style kita di sini setelah bootstrap Silahkan di Face sudah aman silahkan ditutup dulu karena kita masuk ke bagian styler save dulu indeksnya masuk ke style Nah kita akan mulai siapkan style kita yang pertama saya pengen punya skema warna ya kita bikin dulu untuk menyimpan variabel kita kasih titik dua root di sini terus kita kasih nama variabelnya yang pertama saya mau nanti warnanya ada nuansa pinknya kita kasih nama pink saya udah punya heksadesimalnya ini juga teman-teman selera aja f14 e95 kita lihat warna pinknya seperti ini ya terus nanti saya punya warna untuk background bagi aja lah ya Kita kasih nol nol terus nanti kita ubah dikit ya ini kita ubah naikin dikit lah sini ya jadi oa oa oa sip dan ada juga saya mau punya aturan untuk bikin bayangan ya Kita kasih Shadow aja ini aturannya x offsetnya 0 y offsetnya 2 pixel blurnya 2 pixel warnanya bisa RGB atau rgbe Ini saya baru tahu ya kalau kita bisa pakai RGB terus kita bisa ngasih nilai Alpha biasanya kan saya kasihnya gini nih misalkan Saya mau ngasih bayangan transparan warna hitam transparan kan gini nol nol koma 0,5 nah ini kalau kalian Nulisnya pakai rgbe merahnya enggak ada hijaunya enggak ada birunya nggak ada alphanya 0,5 nah dulu tuh kalau kita pakai RGB enggak bisa karena RGB hanya 3 nilai 00 aja Nah sekarang kita bisa kasih nilai Alfa dengan ngasih slash di sini gitu ya Jadi kalian bisa pakai RGB tapi pakai slash buat ngasih nilai alpha atau kasih koma tapi rgbe Sip itu yang harus kita siapin Nanti kalau kita butuh ada variabel baru tinggal tambahin di root-nya aja supaya kita bisa pakai di bawah berikutnya kita siapin di bodynya yang pertama kita mau kasih ukuran font defaultnya itu 1,2 Rem jadi sedikit lebih besar dari default semuanya ya kalau kita ngasih 1,2 rem artinya semua font itu default-nya 1,2 kali 16 pixel nah saya suka banget ngasih rem untuk semua font supaya nanti gampang banget ketika kita Mau ngatur ukuran font secara responsif untuk halaman kita dan font default-nya itu kita ambil si work tadi ya kita ambil dari sini aja nih works ya kita copy aja kopi ke sini font Family work Chance koma Sun series ini follback-nya jadi kalau ini nggak ada atau enggak ke load pilihkan font yang tipenya Sun series oke itu dulu ya berikutnya kita masuk ke bagian heronya ya Kita kasih style untuk Hero nah ini saya mau bikin agar memenuhi tinggi dari layar jadi kita bisa kasih Max hate 100 VH ya view port terus coba kita kasih background color dulu far minus minus BG Coba sekarang kita lihat kembali ke sini nah sudah tapi kenapa dia nggak full ya oh salah harusnya mean head ya teman-teman sorry Min haid ini minimal tingginya satu layar jadi ini kalau misalkan kita kasih dulu bodynya untuk sementara ya biar kita bisa nge Scroll halamannya kita kasih misalnya main Head juga 2000 pixel lah ya supaya kita bisa nge Scroll balik sini refresh Scroll jadi ketika kita buka pertama kali pasti lebarnya penuh satu layar kalau di Scroll baru kelihatan kalau kita bukanya di browser yang lebih kecil ya kita kecilin misalnya nih kita refresh pasti full satu layar ketika kita Scroll dikit aja keluar jadi berapapun layarnya mau pendek banget kayak gini lihat nih kalau kita refresh kita Scroll dikit aja udah putih jadi 100 view port head itu kayak gitu ya akan memenuhi layarnya berapapun dimensi dari devicenya oke itu untuk heronya tapi nanti kita pikirin ya Apakah mau warnanya hitam atau kita kasih gambar ya kayaknya kalau dikasih gambar yang full juga bagus nih Kita coba ganti style dari tulisannya dulu kita bikin Si h1-nya tulisannya sakramento ya Hero H1 kita kasih font Family sakramento tadi apa di sini tuh kursif ya Oh ya betul kursif itu tulisan yang kayak tulis tangan gitu ya Hapus dulu Sip save lihat lagi hasilnya nah udah tinggal kurang gede kayaknya kita bikin font size 3M Oh kecil ya oh 6 deh ya Kita kasih 6 deh nah kayaknya kalau segini cukuplah sudah terus paling paragrafnya ya perlu kita gedein nggak Kayaknya perlu kita gedein ya H4 dan paragraf kita kasih paragraf dulu deh titik Hero kita bikin kalau 2 rem kegedean nggak font size 2 rem Oh gedean ya 1,4 1,4 paling kita gedein yang H4 nya H4 jadi Hero H4 font size 1,6 rem ya sip tinggal tombol kita kasih warna backgroundnya di sini aja jadi Hero a colornya kita kasih warna pink tadi far minus minus [Musik] warnanya putih Nah tinggal kita kasih turun ini kalau di hover Oh ada hovernya kita kasih Hero a over Sekarang kita balik warna backgroundnya pink far pink warna tulisannya putih color white ini lihat nah mantap tapi kurang bawah ya Kita kasih di mana Di sini aja lah ya margin top sebenarnya bisa dikasih di buttonnya langsung di sini MT4 nah gitu jadi ceritanya gini pada saat nanti saya klik lihat undangan Dia nge Scroll ke bawah mulai ngelihat undangannya itu di sini gitu ya jadi nih tampilan utamanya tinggal kita kasih Countdown di bawah sini ya Nah ini saya menemukan ada sebuah library Countdown yang gampang banget dipakai ya kalian bisa Googling aja namanya simply Countdown dia bentuknya javascript silahkan dikunjungi nih websitenya ada di Vincent loi.com.io nah ini ke sini nanti bentuknya ada contohnya Nah gini bentuknya kayak gini ada berapa hari jam menit detik jadi dia akan berkurang kita tinggal modifikasi nanti stylenya Seperti apa terus konfigurasinya juga enak banget ya nanti ada di mana saya bisa lihat nih ya nih css-nya bisa kita atur terus javascriptnya juga bisa kita atur mau diganti pakai bahasa Indonesia hari jam menit detiknya juga bisa Mari kita pakai cara paling gampang adalah kita download dulu pertama ya kita download source-nya Klik tombol download sourcess terus ini udah masuk ke folder download kita lihat isinya yang kita butuhin hanya yang ada di folder disk aja nih masuk kita ambil javascriptnya coba buka lagi folder kita ya saya buka di explorer yang berbeda Coba kita bikin folder baru deh kita bikin folder baru kita kasih nama Countdown itu yang kita simpan semua file yang kita butuhin di sini javascriptnya pertama kita copy Terus kita juga butuh css-nya css-nya itu ada tiga ya tadi kan ada tiga pilihan Kalian mau pakai yang mana nih mau yang default mau yang custom kita pakai yang default aja tinggal nanti kita kasih warna background terus kita bikin dia bulat gitu Jadi dia yang default ya ini ada simply count team default ya di copy aja kembali lagi ke website kita simpan di sini sudah kembali ke codingnya sekarang yang pertama kita lakukan adalah kita hubungkan dulu website kita dengan si countdownnya kita kasih komentar di sini kontrol slash atau garis miring SIM klik count nah ini Tinggal kita copy Kalau di websitenya itu ada contohnya Nah ini nih ya di copy aja tinggal kita ganti nanti url-nya nah ini ganti jadi Countdown gitu ini ke CSS sekarang yang ini kita ganti juga jadi kau tahu ini ke javascript Nah sekarang tinggal kita Panggil cara panggilnya gampang banget teman-teman kita tinggal bikin sebuah elemen yang mau kita jadikan sebagai countdown-nya misalnya saya mau taruh di sini kita tinggal bikin elemennya misalnya kita kasih nama Div gitu ya terus kita kasih kelas namanya juga bebas misalnya saya mau kasih dia namanya Countdown gitu Terus tinggal kita Panggil di javascript Nah jadi sekarang teman-teman boleh bikin javascript di bawah sini sebelum tutup body ini yang isinya cukup Panggil simply Countdown ini yang parameternya ada dua yang pertama elemen apa yang tadi kita kasih Boleh ID boleh kelas kalau id pakai tanda kres atau hastag kalau kelas langsung titik aja ya jadi parameter pertama elemennya mana gitu elemennya Yang mana parameter kedua kita kasih koma ini adalah konfigurasinya bentuknya objek Jadi kalian tinggal kasih kurung kurawal buka tutup kalau nggak dikasih apapun isinya ini konfigurasinya default Coba kita save dulu deh kita refresh nah keluar tuh 0 Day 0 our 0 menit 0 second ini belum kita setting sekarang kita setting gimana settingnya ada tadi di konfigurasinya di sini nih tuh ya kita nanti tinggal pakai yang kita butuhin aja Kopi semua dulu deh Kopi semua kita masuk ke dalamnya di sini enter control v kita lihat mana yang kita butuhin yang required berarti harus diisi kalian tinggal ganti kapan waktunya misalnya 2023 bulan 11 misalnya ya tanggal 7 jamnya kosongin aja atau kalau misalnya kalian kira-kira jamnya itu kalian mau simpan pada saat resepsi atau pada saat akad ya tulis aja Biasanya angkat tuh jam 8 pagi tulis 8 menitnya kosongin second-nya kosongin jadi Boleh dihapus ya kontrol shift second-nya kosong nah ini wordsnya kalian pengen tulisan they our menit second-nya Jadi apa ya kan bahasa Inggris kalau kita mau ganti jadi hari Ya udah ini singularnya ini perlu rulesnya karena di dalam bahasa Indonesia enggak ada singular dan plural Ya udah isinya dengan tulisan yang sama aja hari jam menit detik begitu pula yang pluralnya dikopi aja kopi ke sini kopi ke sini kopi ke sini kopi ke sini Coba kita lihat dulu refresh saya ada berikutnya apa nih Apakah kita butuh telur kayaknya nggak butuh ya sebenarnya karena sama nggak masalah tapi kalau di bahasanya nggak ada pluralnya ini Boleh dihapus hapus Inline false kalian pengen harinya sejajar atau turun ke bawah saya nanti pengennya Turunnya ke bawah tapi nanti tergantung stylenya ini juga enggak butuh lah ya kalian boleh hapus ini tidak butuh Inline class juga nggak butuh enable UTC false aja ini enggak butuh refresh Biarkan aja lah ya ini berubah setiap 1 detik dah sisanya hapus aja kayaknya enggak butuh semua cukup ini aja sesuaikan tanggalnya Sudah kita lihat lagi aman ya tinggal benerin stylenya Nah untuk ngebenerin stylenya kita buka CSS dari simply -nya masuk ke Countdown buka CSS nya tutup lagi ini kalau kalian pakai vscode dan udah install prettyr begitu kita save ya lihat ya Otomatis Turun ke bawah kita ubah dulu jadi CSS nah ini dia stylenya Oh nama kelasnya ini kayaknya pantesan ini harusnya udah jadi kotak-kotak nih warna putih harusnya tadi nama dari Dev nya itu simply sesuai dengan nama kelas di CSS nya berarti yang di bawah sini juga sama teman-teman ganti jadi simply Jalan normal cuman nama kelas CSS nya nih yang nggak kena Nah ini dia tapi kok dia hilang ya tidak apa-apa nanti kita tinggal style aja gampang yang penting udah tampil dulu tadi kita salah kasih nama style Oke nggak papa Ya sekarang kita kasih style dulu yang pertama saya pengen tulisannya atau kotak-kotaknya ada persis di tengah ya ini teman-teman bisa kasih aja di sini margin auto ini yang tengah Tinggal warna putihnya Ini kita ganti jadi pink ya ada di bawah sini background kita ganti jadi far minus minus pink sip terus kita bikin dia bulat Tinggal Kasih aja di bawah sini apa border radius 50% Oke sip kayaknya jaraknya terlalu jauh ya kita kecilin marginnya kita bikin 10 pixel aja terus kayaknya kurang gede ya teman-teman ya kita bikin paddingnya 80 deh Nah jadi awalnya gede nanti kalau misalkan kita kecilin halamannya berubah jadi kecil udah tinggal tulisannya ya Saya pengen tulisannya lebih gede coba balik ke coding kita tulisannya itu simply amount atau di sini aja lah kita kasih font size 2 rem Coba lihat Waduh 1,4 rem nah cukuplah atau Saya pengen angkanya aja yang besar word yang enggak berarti kita keluarin jadi [Musik] hapus komanya font sizenya pindahin ya save nah gitu jadi tulisannya kita gedein lagi sedikit 1,6 [Musik] nah gitu Sip sudah ya teman-teman ya itu untuk bagian heronya paling Saya mau ganti jadi gambar deh backgroundnya ya biar lebih mantap silahkan teman-teman cari gambar yang sesuai ini Kebetulan saya sudah cari ada di dalam folder IMG saya gambarnya seperti ini Ya silahkan teman-teman cari gambar yang sesuai misalkan foto prewednya dari calon offlinenya usahakan gambarnya tidak terlalu besar ini punya saya ukurannya kalau kita lihat 920 kali 1280 ya supaya nanti nggak terlalu berat untuk di load-nya sudah tinggal kita Panggil lewat CSS balik dulu ke CSS nya Nah ini saya mau bikin agar dia ada di belakang tulisannya supaya nanti kalau teman-teman mau kasih filter buat gambarnya gampang ya nanti saya mau Bikinnya di sini titik Hero titik dua titik dua before Ya bisa aja ditaruh di Hero Tapi nanti kalau misalnya saya mau mengubah gambarnya atau filternya semua yang ada di dalam Hero ikut ke bawah perubahannya nanti kita lihat ya maksudnya gimana ya kalau kita bikin studi elemen before atau after harus kita kasih konten supaya bisa kita atur ukurannya walaupun isinya kosong seperti ini ya jadi kontennya nggak ada apa-apa dia positionnya Absolute layarnya titik koma sini kita kasih position yang Absolute top livenya 0 terus with headnya 100% 100% heightnya 100% Nah baru kita kasih background image background image url kita ambil yang tadi image slash BG prewed ya Coba kita lihat dulu Ada nggak Nah ada tapi kan dia di depan nih karena kita belum kasih z index tapi jangan lupa elemen heronya harus kita kasih position relatif dulu baru kita kasih z index -1 ya supaya di belakang nah ini udah ada di belakang sebenarnya Tapi kehalang sama background hitamnya jadi kita harus hapus dulu nih background hitamnya hapus balik sini refresh Nah ya sudah ada sekarang ini kalau misalkan tadi saya bilang kalian mau kasih filter sekarang kalian bisa kasih di sini Misalkan filter misalnya apa nih Saya mau kasih blur bisa kita kasih brightness atau Sephia misalnya ya kita kasih Sephia jadi kayak gitu kalau kalian mau bikin dia jadi hitam putih kita kasih gracell jadi hitam putih ya silakan aja Atau kita bikin Hitam Putih deh nah tapi sekarang kalau teman-teman lihat ini flat ya jadi flat tulisannya nih kita butuh kasih bayangan ya Kita kasih bayangannya tadi kita udah punya Shadow di atas ingat sini kita punya Shadow tinggal kita kasih untuk semua elemen di dalam Hero ya H4 H1 kita tulis di mana di bawah sini aja atau sebelumnya deh sini ya Hero H1 Hero H4 Hero udah cuman 3 1 2 3 Ya tulisannya cuman 31 23 kita kasih Shadow teks Shadow variabel shadow Oke Mari kita lihat koma Sorry teman-teman kalau RGB nggak pakai koma kita lihat nah tuh ya Jadi sekarang ada bayangannya dia nggak terlalu flat ke gambar ya oke mantap itu dia bagian pertama dari website kita ya tapi Sebelum kita akhiri bagian pertama ini gimana kalau kita benerin dulu responsifnya ya ini kak karena kalau saya kecilkan ini jadi jelek tuh ya ngaco nih Saya mau bikin ketika di lebar layar tertentu font ya jadi kecil terus bulatannya jadi kecil supaya tetap rapih gitu ya kan Ini jelek nih yuk mari kita benerin dulu balik ke stylenya kita siapin aja di bawah sini di akhir buat responsifnya kita kasih media query ya kita bikin untuk 3 jenis media query aja yang pertama untuk laptop ke atas yang kedua itu tablet ya teman-teman bisa bikin komentar pakai control flash tablet dan yang terakhir itu mobile phone ya jadi ada tiga kita kasih media querynya untuk laptop itu kita bikinnya gini add media Max sweetnya itu 992 ya ini saya ngambil dari breakpoints punya bootstrap supaya nanti bisa sama gitu responsifnya yang pertama kita copy aja untuk tablet itu di 768 dan untuk mobile phone itu di 576 pixel Oke kita akan ubah dulu font sizenya jadi untuk setiap lebar layar font sizenya mengecil pertama di laptop dulu kita kasih html semua berarti ya font size-nya kita bikin 75% nanti kalau kekecilan tinggal digedein aja jadi nanti 75% dari remnya nah ini enak nih udah otomatis nanti ngecilin semuanya untuk tablet Kita bikin supaya 62,5 62,5 dan untuk mobile phone kita bikin di coba di 55 dulu deh kecilan enggak atau ini di 65 deh 65 ini di 60 aja kita lihat dulu ya kembali ke webnya kita Refresh dulu sekarang kita kecilin tuh sekarang dia udah kelihatannya sedikit lebih rapi ya gedein ya udah jadi kecil-kecil jadi Kalau dibuka di handphone enggak Turun ke bawah nama motor lainnya ya sip tinggal kita benerin yang countdownnya balik lagi ke codingnya kita mau ubah padding dan marginnya yang ini nih planning dan margin jadi kita ambil aja ini simply Countdown simply section kita taruh di sini tutup Eh ini lebar apa nih Ini tablet ya kita ke laptop dulu copy dulu ke laptop untuk laptop kita mau kasih paddingnya 70 pixel kan tadinya 80 ya kita kurangin Terus tadi marginnya berapa marginnya 10 udah aman kalau margin udah aman jadi ini cukup di tablet itu kita kurangin lagi jadi 60 ridingnya 60 pixel marginnya tadinya kan 10 kita bikin 5 dan terakhir di mobile phone kita bikin paddingnya lebih kecil lagi jadi 45 marginnya 3 gitu ya Coba kita save kita ke sini kita refresh tuh jadi sekarang satu baris Terus yang ngegedein di tablet di laptop Ya udah ini tinggal kita kasih Shadow deh buat tombolnya ini dia flat juga nggak ada shadow-nya kita kasih di sini berarti apa Hero a ya Nah ini dia kita kasih kalau ini box Shadow bukan teks Shadow box Shadow far minus minus Shadow nah tuh ya sip oke itu dulu untuk bagian pertama membuat Hero section untuk Website undangan pernikahan kita Oke teman-teman jadi itu tadi bagian pertama dari website kita dan berikutnya kita akan coba nih masukin website yang udah kita buat ini ke dalam hosting kita supaya bisa dilihat oleh orang lain ya Meskipun belum selesai sepenuhnya tapi nanti setiap progresnya akan langsung kita upload atau kita masukkan ke hosting supaya nanti teman-teman juga tahu caranya seperti apa ya dan untuk ini kita akan membutuhkan bantuan dari web hosting kesayangan kita yaitu niagaster oke teman-teman ya Jadi buat yang belum tahu ya agak hoster Ini adalah sebuah penyedia layanan hosting terbaik di Indonesia yang punya banyak sekali layanan untuk kita gunakan ya Mulai dari unlimited hosting Cloud hosting WordPress hosting lalu juga ada GPS dan juga domain Nah kalau misalkan teman-teman butuh layanan webposting menurut saya paling tepat untuk kita yang masih pemula Itu adalah unlimited hosting ya kalau teman-teman lihat di sini unlimited hostingnya Itu pilihannya banyak banget ada paket bayi pelajar personal dan bisnis tapi yang menurut saya yang paling oke penawarannya adalah paket personal ya karena kalau teman-teman lihat di sini Fiturnya banyak ya dia support banyak bahasa moga-man bisa PHP no CS python dan banyak fitur-fitur lainnya ya kalau teman-teman tertarik langsung aja pilih paketnya ya di sini ya enggak usah lagi ngadain diskon yang cukup besar sampai dengan 75% untuk paket personal Kalau teman-teman belinya langsung selama 3 tahun ya dan Kalau teman-teman belinya minimal 1 tahun aja ya enggak usah 3 tahun itu udah otomatis dapat nama domain gratis jadi ini saya kasih contoh kalau misalnya teman-teman belinya yang paket 3 tahun langsung ya Kalau belinya 3 tahun itu diskonnya paling gede 75%. jadi teman-teman yang tadinya harus membayar sebesar 3,6 jutaan sekarang cukup membayar sebesar 995.000-an aja ya dan sekali lagi ini udah termasuk nama domain gratis pilihan kita sendiri ya cara ngeceknya tinggal masukin aja Nama domainnya di sini misalnya kita kasih namanya di kanova wedding misalnya ya kita cek Apakah udah ada apa belum Nah belum ada lihat nih harusnya bayar 119.000 ini nol ya yang artinya ini bisa kita pilih secara gratis ya tinggal langsung aja klik tambahkan ke card Nanti kalau sudah dengan memilih paket ini kita berhasil berhemat sebesar 2,8 juta ya gede banget nih kita klik lanjutkan nah berikutnya kalian tinggal pilih metode pembayaran ya banyak banget yang bisa dipilih tapi ingat sebelum kalian cek out kalian bisa dapetin Diskon tambahan lagi nih teman-teman dengan cara masukin kode kupon di sini kode kuponnya WP Unpas ya dengan masukkan kode kupon ini kalian akan dapat Diskon tambahan sebesar 10%. ya Jadi yang tadinya bayarnya 995 kalian dapat diskon Rp100.000 ya lumayan jadi 895 ya kalian dapat diskon dan saya juga dapat komisi jadi itu artinya kalian sama aja dengan support channel wpu ini ya kalau sudah langsung aja klik masuk untuk check out dan lanjutkan pembayarannya Nah nanti kalau misalkan teman-teman udah dapet layanan web hostingnya teman-teman akan dikasih login ke member area nah ini cara untuk mengupload websitenya nanti tinggal klik aja member area nanti kita akan diarahkan ke dashboard dari niagahasternya di sini nanti kita tinggal pilih layanan kita misalnya saya udah punya nih layanan untuk hosting dengan domain Sandika gali.id ya caranya tinggal kita klik aja kelola layanan di sebelah kanan nanti kita akan diarahkan ke dashboard-nya lalu kita tinggal klik aja kelola hosting di sini atau kalau teman-teman Scroll ke bawah ada beberapa pilihan menu-menu atau fitur-fitur yang paling sering digunakan Nah nanti kita akan menyimpan website wedding kita ke dalam sub domain jadi nanti website-nya enggak akan ada di Sandi ke galeri.id tapi saya mau bikin subdomain di depannya misalnya saya mau bikin namanya the wedding of titik Sandika gali.id supaya nanti bacanya lebih enak ya Nah caranya kita tinggal pilih ke bagian subdomain ya teman-teman klik aja di sini sub domain atau teman-teman juga bisa masuk aja ke lihat semua fitur si panel sama aja nanti ya diarahkan ke bagian si panelnya Nah dari sini kita akan cari bagian domain atau subdomain nah ini ada ya di bagian domain ada domains Silahkan di klik Nah di sini kita akan bikin create a new Dome Silahkan di klik aja nanti kita tinggal tulis di sini Misalkan The Wedding off titik Sandika Galih [Musik] ya Nah kalau sudah nanti teman-teman lihat nih kita akan dikasih satu folder tambahan di dalam folder utama kita namanya boleh diganti atau kalau teman-teman mau namanya disesuaikan dengan nama subdomainnya itu defaultnya biarin aja ya jadi Silahkan boleh langsung klik submit aja Tunggu agar kita dibuatkan foldernya Nah sekarang kalau sudah kita tinggal masuk ke dalam foldernya caranya teman-teman boleh klik aja di bagian dokumen root-nya Nah nanti masuk ke sini ke bagian file managernya kita sekarang udah ada di public html di sini ya terus The Wedding off Andhika gali.id Nah di sinilah tempat kita menyimpan folder dan file kita yang tadi kita buat di dalam desktop ya Jadi sekarang caranya gini aja kita Klik tombol upload di sini Nah di sini Nanti kalian bisa upload semua file-nya tapi nanti satu-satu ya agak ribet ya jadi lebih baik gini lebih baik kita lakukan zip dulu terhadap isi dari folder web kita Nah jadi ini isi dari web kita yang tadi kita simpan di desktop ya sekarang caranya kita blok aja semua lalu kita Klik Kanan lalu kita kompres to zip file Oke kita tulis aja tadi Dino this wedding gitu ya atau sesuaikan dengan nama folder teman-teman masing-masing sudah Nah kalau sudah ini tinggal kita tarik aja ke sini kita tarik ya nanti langsung diupload Nah kalau udah selesai 100% kita tinggal klik go back Supaya kembali ke file managernya ada filenya lalu kita ekstrak ya tinggal di klik boleh Klik Kanan terus pilih ekstrak atau Klik di atas juga ada ekstrak nih ya Sama aja klik ekstrak simpan di folder yang sesuai ya kita simpan di folder kita ekstrak files close Harusnya sekarang sudah ada ya kalau nggak muncul kita reload aja Nah sekarang udah ada Oke zip nya Boleh dihapus klik aja terus kita delete Ya kita delete secara permanen aja Conform sudah selesai Nah sekarang tinggal kita coba buka ya teman-teman boleh buka tab baru kita tulis The Wedding off Sandika galih.id Nah sudah ada ya jadi website kita sekarang sudah tersimpan ke dalam web hosting kita dan bisa diakses oleh semua orang keren banget Oke teman-teman jadi itu tadi pembuatan satu bagian sederhana dari website undangan pernikahan online kita nanti di video berikutnya kita akan coba tambahkan bagian-bagian lain yang mengenai tempatnya cerita tentang calon mempelainya galerinya dan masih banyak fitur lainnya jadi tungguin terus episode-episode berikutnya dari ngoding bareng kita kali ini ya dan sebelum saya akhiri videonya Kembali saya mau ucapin terima kasih kepada Niaga user yang udah sponsorin video ini jadi buat kalian yang lagi cari-cari web hosting untuk menyimpan website atau web app kalian jangan ragu untuk gunakan Niaga hoster sebagai penyedia layanan hosting kalian dan jangan lupa juga kalian bisa masukkan kode kuponnya WP Unpas saat kalian check out untuk pembelian web hosting pertama kalian Agar kalian dapetin lagi Diskon tambahan sebesar 10%. ya Jadi silakan dimanfaatkan teman-teman Oke jadi sekali lagi itu aja untuk episode ngobar kita kali ini mudah-mudahan bermanfaat Terima kasih teman-teman sudah menyaksikan kita ketemu lagi di episode Berikutnya saya sampai gali pamit dan seperti biasa jangan lupa titik koma [Musik]