Halo teman-teman semua Kembali lagi bersama saya Sandika Galih di channel wpu dan kali ini kita kembali akan ngobar alias ngoding bareng untuk membuat sebuah website sederhana tapi keren pengen tahu seperti apa websitenya kita langsung aja lihat ya teman-teman ya jadi websitenya ini adalah untuk sebuah kedai kopi sederhana ya Jadi ceritanya nanti kita akan membuat sebuah kedai kopi jadi buat teman-teman yang sedang ngopi atau berminat untuk membuat usaha kedai kopi atau bahkan udah punya kedai kopi website ini bisa kalian jadikan sebagai acuan ya dari kopinya kita namakan dengan kedai kopi kenangan senja atau teman-teman lihat di sini website-nya itu terdiri dari beberapa bagian yang pertama tentu saja kita punya bagianf baru di bagian atas yang di sini ada logo brand navigasi tombol search dan juga shopping card ya walaupun tombol search dan shopping card-nya ini enggak akan kita fungsikan untuk episode kali ini mungkin nanti kita coba Bikin di episode yang akan datang Nah baru ini kalau kita Scroll dia fix dan juga memiliki background yang transparan kalau kita Scroll ke bawah kita akan punya sebuah bagian atau section yang namanya saya sebut dengan Hero section jadi ini adalah bagian yang pertama kali dilihat oleh user biasanya juga disebut dengan landing section atau landing Element yang ada judul dari websitenya atau tagline dari kedai kopinya penjelasan singkat dan juga tombol cte atau call to action kalau kita Scroll ke bawah itu ada bagian tentang kami kalau kita Scroll ke bawah lagi ada menu kami ya Jadi ceritanya kedai kopi ini punya menu apa aja Ini juga masih template ya jadi semua menunya masih sama tinggal nanti teman-teman ganti sesuaikan dengan kebutuhan teman-teman masing-masing setelah itu di bawahnya tentu saja kita punya bagian kontak Ya siapa tahu customer atau calon customer ingin mengkontak kita ada bagian di sini yang pertama di sebelah kiri itu ada Google Maps ya yang akan menunjukkan lokasi dari kedai kopi kita nanti ini teman-teman juga bisa sesuaikan dengan alamat kedai kopinya masing-masing di sebelah kanan Ada forum kontaknya ya walaupun Ini juga masih tampilan belum berfungsi dan terakhir di bawah ada bagian footernya informasi ke sosial media link dan juga copyright ya jadi sederhana aja hanya ada 4-5 section tapi kita juga nantinya akan membuat tampilan responsifnya sehingga nanti kalau dibuka di display yang lebih kecil misalnya laptop tablet ataupun handphone tampilannya masih tetap Oke kita lihat contohnya seperti ini teman-teman ini ya di sebelah kiri Ini adalah tampilan normalnya ketika kita buka di versi desktop atau layar yang besar kalau kita kecilin Nanti teman-teman bisa lihat ada perubahannya Nah di sini ya Kalau dibuka di tablet minimal di tablet itu navbarnya akan hilang berganti dengan sebuah hamburger menu yang bisa kita klik seperti ini jadi navigasinya pindah ke sebelah kanan atau yang nanti kita sebut dengan sidebar ya begitu pula kalau misalnya nanti kita perkecil lagi jadi tampilan Smartphone seperti ini jadi masih tetap bagus tampilannya terlihat Oke jadi itu dia websitenya teman-teman ya mudah-mudahan teman-teman tertarik untuk membuat Website kedai kopi sederhana ini nanti bisa disesuaikan dengan studi kasus teman-teman misalnya punya UMKM misalnya toko online sederhana bisa tinggal diganti aja temanya nah sebetulnya episode ngobar kali ini bisa diikuti oleh teman-teman yang masih pemula ataupun sudah pernah membuat website sebelumnya tapi Saran saya sih teman-teman sebelum mengikuti episode Kali ini harus tahu dulu minimal mengenai html dan juga CSS jadi Silahkan nanti teman-teman kalau belum pernah mencoba html dan CSS ditonton dulu aja saya sudah punya playlist lengkap mengenai html CSS dasar dan juga CSS layoutting dan nanti di akhir videonya kita itu nggak hanya akan membuat websitenya di komputer kita aja tentu saja kita pengen website kita ini bisa dilihat oleh orang lain nanti kita akan upload website ini ke sebuah layanan yang namanya dan juga white hosting ya Jadi nanti teman-teman bisa lihat di sini kita akan simpan kode kita ke sebuah layanan yang namanya github jadi kita nanti akan sedikit pelaja mengenai gate dan juga github sehingga nanti di dalam github ini ada fitur yang namanya Git HP Jazz dan website kita bisa diupload ke situ Jadi sekarang teman-teman punya url yang bisa diakses semua orang contohnya punya saya nih Sandika gali dot github.io slash kedai kopi kenangan senja Ya jadi ini adalah web hosting gratisan yang bisa kalian gunakan untuk website yang statis nah tapi kalau misalkan teman-teman pengen lebih fleksibel lagi teman-teman bisa gunakan yang namanya web hosting kebetulan video kali ini juga disponsori oleh web hosting kesayangan kita semua yaitu niagaster ya Jadi teman-teman nanti akan saya ajak untuk menelusuri fitur-fitur apa aja yang ada di Niaga hoster ini sehingga nanti website teman-teman bisa tayang atau publish di url atau domain teman-teman masing-masing Ini contohnya Saya punya domain namanya sandikagaly.id Lalu nanti saya simpan website saya itu di slash kenangan senja nanti kita akan coba menghubungkan antara gitar dan juga web hosting secara otomatis Nanti kalian upload kodenya ke github nanti otomatis github akan mengirimkan ke web hostingnya secara otomatis jadi kalian nggak perlu lagi mengupload websitenya langsung ke web hosting secara manual lagi ini seru banget teman-teman ya Jadi mungkin itu pengantarnya cukup panjang juga pengantarnya dan kayaknya video ini bakalan cukup panjang juga jadi Silahkan siapkan minuman kesayangan teman-teman masing-masing Saya di sini sudah menyiapkan kopi kesayangan saya supaya nanti kita bisa makin semangat untuk ngoding websitenya oke ya jadi tanpa berlama-lama lagi kita langsung masuk aja ke coding-nya kita mulai dengan persiapan terlebih dahulu baik teman-teman ya jadi langsung aja kita bikin folder dulu ya seperti biasa di desktop kita kita kasih nama aja ini untuk kedai kopi kita saya namanya kopi Des kenangan Des senja Ya silahkan kalian cari nama kedai kopinya sesuai dengan keinginan teman-teman masing-masing lalu kita Buka folder kita ini di dalam kode editor kita Ya saya akan menggunakan vscode seperti biasa jadi teman-teman boleh buka aja foldernya di terminal ya lalu ketik aja kode spasi titik supaya dibuka di VSCO Oke sudah terbuka sekarang kita langsung bikin file utama kita namanya indeks titik html lalu kita bikin struktur htmlnya teman-teman boleh ketik tanda seru tab ya jangan lupa biar gampang teman-teman boleh install aja sebuah extension yang namanya preteer di vsco-nya buat yang belum Ya silahkan Klik di sini terus cari aja free tier itu supaya nanti kodenya ketika kita save itu langsung dikasih format yang rapi ya kalau sudah di install mungkin teman-teman harus coba konfigurasi dulu ya caranya teman-teman boleh ketik control koma untuk membuka konfigurasinya terus cari aja format ya ketik dessertnya format nanti di sini ada format on save jangan lupa di ceklis terus Satu lagi kalau sudah ini di ceklis teman-teman bisa ketik formatter nah ini ada default formatnya tolong pastikan agar tritier yang sudah terinstal tadi dia terpilih ya kalau sudah di close aja extensionnya di close nanti lihat teman-teman kalau misalnya nanti kodenya nggak rapi seperti ini begitu kita save control S otomatis dirapihin ya biar gampang aja berikutnya kita kasih judul dulu halamannya sesuai dengan nama kedai kopi kita kopi kenangan senja Ya Setelah itu kita nanti butuh file CSS jadi kita hubungkan halaman html kita dengan file CSS ya kita simpan nanti di folder CSS aja biar sedikit lebih rapi kita kasih nama style CSS Mari kita bikin dulu ya Buka Explorer bikin folder baru kasih nama CSS di dalamnya kita bikin folder baru namanya style CSS sip indek sudah ada CSS sudah ada berikutnya kita butuh font ya Mari kita buka dulu browser lalu kita Arahkan ke Google Fonts ya fonts.google.com oke sudah terbuka dan nanti akan menggunakan sebuah font yang namanya popins ya ini font sejuta umat cari popins klik nah ini akan kita pakai teman-teman boleh Scroll kita butuh beberapa ketebalan ya yang pertama saya butuh yang sangat tipis yang sein kita klik Tanda plus di sini terus saya juga butuh yang like yang 300 sehingga nanti kita bisa kasih font weight di CSS kita sesuai dengan angka ini ya berikutnya Saya butuh yang regular 400 dan satu lagi yang Bold ya ini kalau dibutuhin Silahkan di klik yang Bold kayaknya 700 oke lah ya Oke sip kalau sudah sekarang kita klik tanda Kotak di atas view selected Familys Nah kita copy aja bagian CSS nya kita ambil yang disimpan di dalam head aja ya di sini kita copy klik copy kembali ke coding kita di sini kita akan simpan sebelum CSS jadi di sini ya saya kasih komentar dulu kontrol slash Fonts gitu Ya siapa tahu kalian nanti butuh font yang lain Silahkan kita paste di sini save itu dia Fonts kita sudah ini kita kasih komentar juga deh ya biar rapi ini my style Oke sembunyikan sidebarnya biar luas berikutnya kita butuh Icons Icons itu saya mau menggunakan yang namanya father Icons teman-teman Googling aja feather Icons mau pakai icon yang lain Silahkan ya Ada font awesome ada bootstrap icon silahkan ya Banyak sekali font yang bisa temen-temen pakai untuk loading bareng kita kali ini saya mau coba sesuatu yang baru yaitu feather Icons Nah ini teman-teman bisa lihat nanti icon-iconnya seperti ini cukup clean dan bagus ya Menurut saya Cara pakainya itu kita harus panggil CSS dan juga javascript-nya nanti ya teman-teman buat klik aja get started tombolnya terus nanti diarahkan ke githam nanti Scroll aja ke paling bawah itu ada cara installnya kita bisa install pakai NPM atau kalau mau gampang kita bisa pakai ini aja nih cdr-nya ya Jadi teman-teman boleh copy scriptnya simpan sebelum CSS kita di copy kita simpan di sini aja ya leather Icons yang penting di bagian head sudah dan terakhir ada satu baris javascript yang harus kita tambahkan di akhir Nah di sini ini kita copy ya scriptnya untuk mengganti tag I ini agar berubah menjadi ikonnya Karena Dia memanggil svg Ya silahkan di copy scriptnya simpan di akhir dari body kita Nah di sini ya Kita kasih komentar lagi ini juga sama Fender Icon Oke berikutnya sebetulnya kita butuh gambar ya tapi nanti gambar Kita akan ambil dari unsplash.com seperti biasa tapi nanti kita akan kembali ke sini ketika kita sudah benar-benar mau cari gambarnya sekarang kita siapin dulu aja websitenya Oke boleh ini di close aja feather icon sama Google fontsnya karena udah selesai kita balik lagi ke codingnya Sekarang kita akan masuk ke inisialisasi atau setup awal dari CSS nya kita di sini akan membuat variabel untuk menyimpan warna yang akan kita pakai sebagai tema di website kita juga nanti kita akan menambahkan reset ya jadi Silahkan teman-teman buka style dot CSS kita mau kasih inisialisasi warna dulu ya Saya akan simpan di dalam root ini ya teman-teman ketik titik dua root lalu saya mau bikin sebuah variabel namanya primary ini ini untuk warna primery ya saya udah punya warna primernya ini menyerupai warna-warna kopi ya nah ini warnanya teman-teman lihat kalau pengen diganti ya silakan ya sesuaikan dengan kebutuhan dan selera teman-teman masing-masing ini warna yang akan saya pakai satu lagi adalah warna background Saya mau kasih BG aja yang warnanya ini simple aja lah ya gelap tapi nggak penuh hitam jadi 0101 ya Oke sip itu untuk perutnya kalau nanti teman-teman punya variabel untuk warna lain juga silakan ditambahin namanya bebas ya nggak perlu sama dengan saya juga boleh cuma Nanti inget-ingat pada saat manggilnya berikutnya kita akan reset simple aja pakai tanda bintang yang artinya all selector kita akan set mulai dari font family-nya ya kita langsung set aja tadi apa namanya popins ya terus follbacknya kita akan Arahkan ke samsarif jangan pakai kutip pesan Sherif begini kita kasih marginnya 0 untuk resetnya kita kasih box sliding border box agar kita nggak perlu ngatur lagi dimensi dari elemen saat kita kasih padding misalnya atau border berikutnya kita kasih outline ini berguna ketika kita mau ngasih tahu untuk form atau untuk button kasih border juga Non ya supaya nanti kita yang punya kendali atas semua bordernya terakhir mungkin kita kasih teks decoration 0 ya supaya nggak ada garis bawahnya ketika kita bikin link dan terakhir mungkin di dalam bodinya ini sebenarnya font Family bisa kita simpan di body aja ya kita pindahin dulu aja alt bawah ya biar gampang pencet alt bawah terus kita mau bikin agar si bodinya itu punya background color warna yang tadi kita udah buat kita ambil lewat variabel berarti ya jadi far kurung buka minus minus BG ya ini untuk background color terus semua tulisannya saya pengennya warnanya putih gini karena tema website kita gelap Saya pengen semuanya warna putih nanti akan ada beberapa font yang warnanya sesuai dengan Primary tapi nanti itu tinggal kita Timpa aja ya oke teman-teman ya sekarang kita lihat dulu mungkin hasilnya bisa dibuka aja di browser Klik Kanan Open in default browser kalau teman-teman nggak ada tombol ini ya silakan diinstal sebuah extension yang namanya Open [Musik] Ya silakan install supaya gampang ya nggak usah Buka folder terus klik dua kali htmlnya cukup klik kanan di sini Open in default browser atau shortcutnya alt B kita lihat sudah ada websitenya hitam aja karena kita memang belum mengisikan apa-apa Oke balik ke codingnya nih kita tutup lagi extensionnya Sekarang kita mulai dengan membuat bagian pertama yaitu navbar ya bagian paling atas dari website kita untuk menyimpan link dan juga logo dari website kita mulai dari bagian body kita Tandai dulu ya biasanya saya bikin komentar dulu di sini misalnya saya kasih Naff bar start itu terus saya duplikat alt shift bawah ini kita ganti jadi navbar n jadi semua bagian navbar saya akan simpan di dalam sini saya akan bikin dia menggunakan tag HTML5 yang namanya NAV begini ya terus saya akan kasih dia class namanya navbar itu terus dalamnya saya akan bikin jadi 3 bagian teman-teman sebelah kiri ada logo di tengah itu nanti ada linknya ya di sebelah kanan nanti ada tombol search tombol keranjang belanja dan juga saya mau nyimpan hamburger menu ya Oke jadi yang sebelah kiri dulu saya mau bikin pakai tag a ya reff-nya Kita kasih tanda pagar aja ini untuk logo kita ya Kita kasih kelas misalnya apa nih love Bar Dash logo yang isinya tulisan kenangan senja ya kasih titik supaya kata senjanya beda warna nanti saya mau kasih dia sepatu tutupnya simpan di luar nanti warna kenangannya putih senjanya warna primer ya itu yang pertama Terus yang kedua Saya punya sebuah kumpulan elemen yang namanya Naff ya untuk isi dari navigasi jadi saya tulisnya navbar Des Naff langsung jadi gifnya kita tinggal bikin aja 4 buah tag a ya Jadi kalau biar cepet saya kasih gini aja deh A * 4 gitu ya pencet tab Nah jadi tuh 4 biji yang ini mengarah ke yang pertama adalah Home atau enggak usah pakai ya karena ini balik ke bagian paling atas kita tulis home di sini kita enter yang kedua ini akan mengarah ke halaman about ya kita tulis aja tentang kami itu yang ketiga ini kita mau tulis menu kali ya menu itu jadi nanti di kedai kopi kami itu menunya apa aja ya dan yang terakhir mungkin kita bikin kontak ya simpel aja ada 4 bagian di website kita itu bagian kedua terakhir kita punya tombol-tombol pendukung ya Jadi saya mau kasih namanya gini aja deh titik ini untuk bikin gif langsung ya navbar extra gitu ini pakai tag a juga Sama ya Kita kasih tanda pagar aja karena nanti tidak mengarah kemana-mana ini punya id-nya search nah ini kita bakalan pakai Fender Icons jadi di sini Saya punya tag i ya atau kita coba buka lagi websitenya ya kita buka di sini kita buka di sini tadi udah di close ya feather Icons Saya butuh tombol search berarti namanya search dia Cara pakainya adalah kita tinggal Panggil tag i ya kita lihat di sini tuh terus data fendernya kita isi dengan nama yang ada di sini samain jadi kita copy aja ya copy kita balik ke codingnya kita paste di sini data fendernya kita ganti jadi search oke nah ini yang pertama Ya sekarang kita butuh tombol berikutnya untuk shopping card ya Jadi sama aja kita duplikat pakai alt shift bawah id-nya kita ganti jadi shopping [Musik] ini cuman tombol aja ya kita kan belum jalan kan fiturnya nah ini namanya apa kita cari dulu kita ke sini coba card ada nggak ya Nah ada nih shopping card Oke Langsung aja tulis shopping dan yang terakhir ini adalah hamburger menu ya kita ganti jadi Eh lihat dulu Ada nggak hamburger menu home kita ganti jadi menu oke sip sekarang kita save Coba kita lihat hasilnya balik ke browser kita refresh nah ini sudah ada ya walaupun warnanya semua sekarang masih ungu dan biru Ya nggak papa nanti kita akan ubah agar jadi warna putih oke htmlnya udah dulu sekarang kita masuk ke bagian CSS ya teman-teman boleh buka CSS nya kita kasih di sini kita mulai pakai komentar aja ya navbar gitu biar tahu ini bagian CSS untuk bagian mana kayak atau kita bikin dua kolom deh biar gampang lihatnya Ya ini Jadi yang pertama kita akan style dulu navbarnya Oke jadi kita butuh titik navbar yang pertama kita akan bikin agar si navbar ini displaynya flags supaya kita bisa mengatur 3 elemen ini ya kalau NAV dari Flag berarti 3 elemen ini kan jadi fleks itemnya jadi kita gampang mau ditaruh di mana Mau disejajarkan Seperti apa itu gampang banget ya jadi teman-teman harus paham selalu mengenai Flex box nih kita kasih displaynya Flex oke terus supaya nanti jarak antar elemennya itu sama kiri kanan kita punya yang namanya Justice content ini kita kasih aja Space nanti supaya sejajar secara vertikal ini kan sejajar secara horizontal ya untuk vertikalnya ada yang namanya Line items kita bikin dia center supaya semuanya sejajar berikutnya kita akan kasih padding ya Nah untuk pengaturan ukuran di website ini saya akan menggunakan semuanya satuannya rem ya relatif terhadap 16 pixel karena kita nggak bikin di rootnya font size nya berapa karena kita nggak bikin di sini font sizenya berapa maka semuanya akan relatif terhadap 16 pixel Jadi kalau misalkan saya kasih paddingnya 1,4 rem ini artinya paddingnya 1,4 kali 16 ini untuk atas bawahnya dan untuk kiri kanannya agar responsif Saya mau kasih presentase ya Kita kasih 7% aja supaya nanti kalau layarnya kita kecilin kita buka di versi yang lebih kecil yang Misalnya ini kan saya lagi buka di desktop misalnya saya buka di laptop tablet atau mobile phone itu akan selalu menyesuaikan 7% ya kita lihat dulu kita balik ke websitenya kita refresh nah ini teman-teman udah sejajar kiri kanannya sama dan nanti di kiri akan ada space sebanyak 7% sehingga kalau dikecilin spacenya akan selalu mempertahankan 7% itu sekarang akan kita kasih background color nah sebenarnya tadinya background colornya mau saya kasih BG begini tapi saya pengen ada transparansinya Jadi ini akan saya ubah jadi rgbe caranya gini teman-teman sorot kalau pakai vscode ya sorot warnanya terus pilih di atas nih ada tombol togglenya untuk mengubah yang tadinya hexadesimal Apakah mau kita ganti jadi RGB atau hsl ya red Green blue atau hiu saturation dan lightness yang kalau kita klik dia akan berubah jadi hsl bukan ini yang kita mau kita klik lagi jadi huaweb kalau saya klik lagi baru jadi RGB nah ini sudah dapat rgb-nya kalau kita ganti jadi rgbe maka kita bisa kasih satu nilai lagi untuk transparansi teman-teman Boleh kasih aja transparannya 0,8 Misalnya ini 80%. jadi enggak terlalu Solid kayaknya berikutnya Saya mau kasih border bottom supaya garisnya gitu di bawahnya gimana kalau kita kasih warnanya primary ya satu pixel Solid lalu far minus minus primary Coba kita lihat ya save dulu kita kembali ke website kita kita refresh nah ini ada Ya tapi kan terlalu terang deh sebenarnya kalau kita kita bikin dia lebih gelap lah Ya ini nggak papa kita pakai yang bawaannya aja terus kita jadiin dia lebih gelap sorot lalu kita turunin ke bawah segini cukuplah Oke sip oke berikutnya supaya nanti ketika halamannya di Scroll nah barnya tetap diam di atas kita kasih positionnya apa position fix ini jangan lupa kasih topnya nol supaya mentok ke atas left dan right nya juga nol supaya ukurannya penuh satu layar left 0 jadi dia tarik ke kiri dan tarik ke kanan right now terakhir jangan lupa kalau misalnya kita mau bikin navbar yang selalu berada di atas kita kasih z index yang sangat besar sehingga nggak ada elemen lain yang ngalahin urutan tumpukannya Oke kita refresh aman ya itu baru navbarnya sekarang kita masuk ke elemen-elemen di dalamnya kita atur logonya ya jadi navbar spasi titik NAV Bar Dash logo Oke untuk logo ini yang pertama kita mau bikin font sizenya besar ya Kita kasih 2 rem berarti dua kali 16 pixel Coba kita lihat dulu refresh nah ini udah jadi gede terus kita bikin dia Bolt kali ya Kita kasih font white tadi kita punya boldnya itu 700 ya Kita kasih 700 terlalu tebal dan terakhir saya mau bikin warnanya putih berarti kita kasih color fff Oke paling tulisan senjanya tadi kita mau bikin warnanya beda jadi kita kasih satu selector lagi navbar logo dan Span ya logo span kita kasih colornya itu ngambil dari far primer gitu ya kita refresh Oke ini kalau kita miringin Oke deh kita kasih font style nah atau kalau miringnya ini sebenarnya kita nggak punya font yang italic nya ya Kalau mau kita bawa yang miringnya coba kita buka lagi font Googlenya tadi kita nggak punya yang italic nya nih Coba kita add more style cari yang Bolt dan italic kita ke nah ini supaya italic nya itu bener-bener ngambil dari fontnya bukan dipaksa jadi miring oleh CSS nya kita pilih di sini kita copy sekali lagi ya kopi kita balik ke codingnya kita Timpa lagi ini kita ganti sekarang udah dari talinya lihat kalau kita refresh mungkin nggak terlalu kelihatan berbeda tapi sekarang font ini udah ngambil dari font Googlenya bukan font biasa dipaksa jadi miring atau kalau di CSS nyebutnya oblic Ya itu dia untuk logo sekarang kita masuk ke bagian navigasinya yang di tengah oke ini kan dia masih terlalu rapat ya kita ubah dulu sedikit-sedikit kita langsung mau target A nya ya jadi caranya kita kasih navbar navbar Pak tuh warnanya Saya pengen misalnya putih ini supaya putih dulu ya udah dapet semua putih terus supaya kita bisa atur marginnya jangan lupa ini kan A itu displaynya Inline ya nggak bisa kita kasih margin Kalau mau kita kasih margin tanpa membuat mereka Jadi turun ke bawah kita kasih displaynya Inline block oke karena kalau blog nanti dia turun ke bawah walaupun bisa dikasih margin fontnya agak kita gedein ya kita font size 1,4 rem [Musik] ya kalau ukuran-ukuran ini nggak sesuai dengan selera temen-temen silahkan diubah aja ya dan marginnya itu atas bawahnya kita kasih nol karena kita mau kasih kiri kanannya aja 16 pixel ya jadi satu rem Oke Mari kita lihat nah sip oke itu dia nggak ini zoomnya berapa zoomnya oh 100-nya segini ya Kalau teman-teman merasa kegedean silahkan dikurangi aja ya kita ganti jadi 1,3 deh terus saya pengen ketika di holder warnanya berubah jadi caranya gini kita kasih titik Naff bar NAV bar Naff a titik dua hover kita kasih color primary Oke Supaya kalau di hover berubah tuh dan sekarang sebelum kita masuk ke yang sebelah kanan saya mau kasih dulu sedikit animasi ya Jadi saya mau tambahin garis di bawah ketika kita sorot atau ketika kita hover naffnya caranya gini saya mau bikin sudo Element di tag a nya navbar lalu a titik dua titik dua after gini yang pertama jangan lupa kasih kontennya kosong dulu supaya kita bisa atur dimensinya kita kasih displaynya blog kita kasih padding bawahnya bottom aja langsung ya bottomnya misalnya setengah rem jadi 8 pixel Nah baru kita kasih border bottom ini bordernya kita bikin responsif juga deh kita kasih 0.1 rem Solid warnanya primary far primary kita refresh ada Ya nah tapi ini saya mau bikin agar munculnya ketika kita hover jadi awalnya nggak muncul dulu jadi kita kasih gini dulu aja transform kita bikin dia jadi kecil banget sampai nggak kelihatan kita scale sumbu x nya aja 0 jadi dia ngilang Nah sekarang kalau kita hover baru muncul jadi navbar navbar a ketika di hover kita kasih titik dua afternya ini caranya itu transformnya kita Munculkan lagi skill X akan kalau satu itu penuh ya satu itu penuh tapi saya mau bikin setengah aja nggak usah penuh-penuh ini jadi kalau di refresh tuh kecil aja ya okelah ya ini kalau kita kasih transisi jadi Keren ya Kita kasih Transition misalnya simple aja 0,2 detik ya kita kasih linear aja supaya nggak isinya Okelah ya lumayan itu untuk naffnya terakhir kita masuk ke bagian extra nya yang sebelah kanan kita Scroll kita kasih navbar navbar Oh sorry Naff bar extra A itu kita kasih warnanya putih juga kita kasih margin kiri kanannya ya margin 0 setengah rem aja 8 pixel 0,5 rem ya ini atas bawah ini kiri kanan kita lihat Oke sudah sip ya paling ini Paling Saya pengen Oh sama ya ketika di hover mending kita kasih warna yang beda juga ya berarti gini kita kasih ini kopi aja titik dua hober apa ini color far minus minus primary Oke jadi ketika di over dia berubah warna tapi ingat ini hamburger menu itu akan kita Munculkan hanya ketika halamannya berada di lebar layar kecil ini untuk mengganti link ini menu-menu ini Jadi kalau misalkan kita kecilin misalkan di lebar layar tablet lah di sini nah ini hilang diganti dengan hamburger menu sehingga kalau di lebar layar yang besar seperti ini dia ngilang dulu harusnya dia nggak ada gitu kali ya jadi kita butuh karena hamburger menu ini punya ID kita langsung target aja lah jadi tanda pagar hamburger menu Kenapa dikasih ID karena nanti kita butuh javascript buat menangani saat dia diklik burger menu kita kasih displaynya hilang dulu ya Non refresh oke sip Jadi awalnya nggak ada ini udah oke navbar ketika di halaman desktop selesai berikutnya apa berikutnya kita akan coba kasih style yang berbeda ketika di lebar layar yang berbeda ya atau istilahnya responsif lah kita kan bikin responsifnya manual menggunakan media Quest gitu nanti ada Beberapa elemen yang bakalan kita kasih media query tergantung kita lagi bukanya di device apa apakah di PC di laptop di tablet atau di handphone ya jadi di bawah sini aja kita nanti akan Simpannya di paling bawah kita punya css-nya media query banyak ya ada laptop terus nanti ada tablet dan terakhir ada handphone atau mobile ya jadi ada tiga jadi Style yang ada di sini itu adalah style untuk desktop Kalau lebih kecil stylenya berubah ke sini ke sini atau ke sini Kita kan punya lebar layar yang berbeda jadi kita punya beberapa media ya cara nulisnya kita kasih add media terus kita kasih maxitnya berapa kalau kita buka di media yang maksimal withnya 1366 pixel berarti itu lagi dibuka di laptop kan kalau di desktop tuh 1920 ya Saya pengen bikin agar font sizenya aja deh mengecil ya Jadi htmlnya itu semua font sizenya turun yang tadinya 100% saya mau kecilin jadi 75% misalnya gitu ya terus ini kita copy aja pada saat dibuka di tablet ponselnya mengecil lagi misalnya jadi 62,5 dan saat dibuka di mobile phone sizenya jadi 55 Nah untuk tablet jangan lupa tadi kita belum ubah lebar layarnya jadi 768 dan untuk mobile phone lebar layarnya jadi 450 atau teman-teman silahkan cari referensi mengenai responsif breakpoints Ya titik-titik lebar layar di mana ketika CSS nya akan berubah Oke sekarang kita coba ketika di refresh ini lebar layar desktop ya 1920 kita kecilin berubah tuh jadi kecil ketika kita kecilin lagi jadi kecil lagi ya itu kita udah punya responsif breakpoints tapi sekarang kita mau kembali agar navbarnya yang beda perilaku ya kita pengen bikin pada saat di lebar layar tablet jadi ini ini lebar layar desktop ini laptop kalau di laptop masih muncul deh nggak papa ya tapi begitu di tablet Nah di sini Ini udah harusnya hilang berubah jadi hamburger menu nah Gimana bikinnya berarti kita butuh di sini nih di tablet kita butuh style CSS baru yang pertama kita butuh agar si hamburger menunya muncul Dia Kembali displaynya jadi Inline blog itu supaya muncul Coba refresh dulu kecilin nah udah muncul ya tadinya nggak ada jadi muncul sekarang kita ilangin linknya Oke kita balik ke codingnya sekarang kita butuh lovebird kita butuh yang ini ya navbar nav-nya titik Naff bar Naff ini nggak akan kita hilangin sebenarnya nggak akan kita bikin dia displaynya non ya karena kalau displaynya non Dia Hilang aja nah hilang tapi sebenarnya yang saya pengen lakukan adalah mindahin posisinya tadinya di atas dia pindah ke luar layar jadi nggak kelihatan jadi ada di sini Kenapa saya pindahin ke luar supaya pada saat cek Klik hamburgernya nanti dia masuk sebagai sidebar jadi Naff barnya ada di sebelah kanan nanti gitu karena kalau dihilangin aja nggak bisa kita atur posisinya paham ya teman-teman ya Jadi sekarang bukan display non tapi kita kasih positionnya Absolute supaya kita bisa dengan mudah gerak-gerakin tanpa ngeganggu elemen di sekitarnya kita kasih topnya 100% supaya nempel ke atas kita kasih right nya minus 100 supaya keluar dari layar ya kan kalau nol itu dia ada di sebelah kanan tapi kalau minus 100 dia keluar dari layar Terus mau saya ubah agar backgroundnya sekarang warnanya putih dan dia punya lebar misalnya berapa 30 rem ya dan berikutnya adalah kita mau kasih tinggi ya supaya Nanti pada saat diklik dia keluar tingginya penuh segini Jadi kita kasih height yang ukurannya 100 V aja deh memenuhi layar di bawah dari navbar ini nah jadi sekarang harusnya si navbar itu tetep ada nggak hilang tapi dia di luar karena saya kasih right nya minus 100 Kalau saya kasih right nya 0 nih lihat teman-teman dia tuh ada sebenarnya di sini jadi kalau saya klik saya pengennya muncul Tuh ada nih nanti ini kita atur posisinya belum selesai ini ya masih ngaco nih tapi minimal sekarang kita atur sidebarnya dulu itu jadi saya pengennya Ketika nanti diklik sabarnya muncul tapi kalau Belum diklik dia ngumpet dulu umpet di kanan logikanya gimana logikanya adalah ketika saya klik hamburger menu nanti saya akan menambahkan kelas active ketika navbar ini juga dikasih kelas aktif jadi ditempel gitu ya jadi ada dua kelasnya maka saya pengen right nya 0 gini paham ya tapi nanti cara ngasih kelas aktifnya itu pakai javascript tapi kalau kita mau simulasikan kita bisa gini ini coba kita bukanya pakai inspek deh kita inspect terus kita kecilinnya di sini ini jangan lupa diganti dulu jadi device toolbar terus ganti jadi responsif ya dimension ya kita kecilin sampai hilang nah udah sekarang kita cari elemennya kita klik dulu Nah lihat nih sekarang ini navbarnya saya kasih aktif konsep pencet enter muncul Nah jadi ini adalah simulasi ketika hamburger menunya di klik saya hilangin lagi Ketika saya klik lagi hamburger menu aktifnya ilang ilang lagi sip ya Gimana caranya Nah di sini kita butuh javascript teman-teman jadi kita bakalan nambahin satu javascript setelah feather iconsnya jadi kita simpan aja di sini my JavaScript gitu ya kita butuh script yang ada atribut src nya nanti kita bikin folder namanya JS filenya namanya script.cs Oke silahkan di save kita bikin filenya sekarang di luar folder CS di dalamnya kita bikin file script kita taruh di sebelah kanan juga deh di sini ya tutup lagi cybernya nah sekarang cerita kita mau kasih toggle toggle itu kan kalau tadinya nggak ada jadi ada kalau tadinya ada Jadi nggak ada gitu ya jadi Toga kelas aktif yang pertama kita butuh ambil dulu elemen navbar NAV nya yang akan kita kasih kelas active ya Jadi kita bikin aja dulu cons love bar Naff saya bikinnya gini kita ambil dokumen query selector cari elemen yang nama kelasnya navbar Des Naff ya nah berikutnya ketika hamburger menu diklik ini kita bisa masukin ke dalam sebuah variabel kayak yang ini atau langsung aja juga bisa ya jadi kita bisa langsung ambil pakai dokumen atau kita kasih contekan dulu deh ya ketika hamburger menu di klik ya kita langsung ambil dokumen.query selector cari elemen yang nama id-nya hamburger menu lalu ketika dia di klik titik on klik ya kita pakai arrow function aja sama dengan jalankan fungsi berikut ini ya Kita kasih titik koma dulu fungsinya adalah navbar NAV kelas listnya kita toggle Jadi kalau sebelumnya nggak ada kelasnya tambahin kalau Sebelumnya udah ada kelasnya ilangin apa yang mau kita kasih kelas aktif ini ya jadi nanti navbar ini akan muncul kelas aktif atau kalau udah ada hilang kelas aktif ketika hamburger menunya diklik Oke silahkan di save langsung kita Cobain aja kita ke sini kita Refresh dulu kita klik Nah lihat tuh [Musik] sip ya jadi kelasnya lihat tadinya ada jadi hilang tadinya hilang jadi ada sekarang supaya lebih keren gimana kalau kita kasih transisi di CSS nya kita kasih di sini aja transisi berapa kita kasih 300 ml second ya 0,3 second Coba ya kita refresh kita kecilin hilang ketika diklik sip ya sudah nongol kita buka di handphone misalnya dah sip mantap tinggal sekarang kita benerin ini nih Ini masih ngaco nih Oke kita balik lagi ke codingnya sekarang kita benerin menu-menunya menunya itu yang ini ya yang ini berarti navbar pertama warnanya kita ganti jadi gelap Dulu color minus minus BG terus displaynya kita kasih block marginnya kita kasih 1,5 rem display block itu akan membuat elemennya Turun ke bawah ya terus marginnya di sekitarnya 1,5 rem yang artinya 24 pixel Ini ya paddingnya Kita kasih setengahnya jadi 8 Pixel dan font sizenya agak gede deh kita kasih 2 rem ya kita lihat lagi kita refresh Nah sekarang ada ini tuh tapi sekarang bawahnya jadi ngaco ini harus kita benerin juga nih berarti kita harus geser dia ke kiri ya garisnya cara gesernya berarti kita butuh ini kan di tengah kan harusnya ya transform originnya kita geser ke kiri jadi caranya gini kita kasih Pak titik dua titik dua after kita kasih transform Origin 0,0 ya sumbu x-nya 0 sumbu y-nya 0 jadi sebelah kiri dia Coba kita lihat dulu klik sip ya tapi ini terlalu panjang ya kita kecilin aja kita kecilin caranya ini kita copy aja deh kita copy ini dikasih hover ya jangan lupa titik dua hover ketika di hover afternya transform scale X kan tadinya 0,5 ya kita bikin lebih kecil ya 0,2 Coba kita refresh kita klik cukuplah ya oke mantap mantap itu dia paling ini terakhirnya sebelum kita menyelesaikan bagian navbar ini Paling ini terakhir pada saat kita klik hamburger menu udah muncul pada saat kita klik lagi itu udah hilang tapi kadang-kadang kita pengennya gini pada saat kita klik hamburger menu buat ngilangin ya saya tuh pengen Klik di tempat lain supaya hilang juga nggak harus klik ini gitu gimana caranya kita butuh javascript sedikit lagi jadi kita akan Klik di luar side bar untuk ngilangin sidebarnya lagi Oke kita butuh javascript sedikit kita simpan di bawah kita kasih contekannya dulu ya klik di luar sidebar untuk menghilangkan Maaf ya pertama kita butuh ngambil hamburger menunya ya kita Panggil cons hamburger gitu misalnya Tolong carikan saya elemen yang nama selectornya adalah tanda pagar hamburger menu ya yang id-nya hamburger menu terus habis itu ketika diklik berarti kita butuh event Click jadi saya akan mendengarkan atau ngasih event lisner pada saat kita ngeklik Mouse nya tapi nanti kita akan tangkap ketika Mouse nya di klik di luar sidebar Jadi saya mau ambil gini ketika dokumennya jadi Ketik ketika diklik dimanapun di halaman klik nah ini kita pakai function aja lah ya supaya kita bisa ambil eventnya atau kita gedein deh ya kita simpan di sini kita gedein supaya kelihatan lebih luas Nah gini jadi ketika diklik kita jalankan fungsi ambil eventnya terus kurung kurawal kalau ini nggak pakai arrow function ya kalau ini eropation jika kita kasih jika kita ngekliknya di luar hamburger menu dan di luar navbar Jadi saya nulisnya gini tanda seru hamburger titik konten jadi di luar hamburger menu karena kalau kalau saat kita klik hamburger menu yang harus jalan tuh yang ini jangan nih pak jadi kita batasi supaya pada saat diklik hamburger menunya nggak bingung dia kontennya apa E target jadi yang diklik sama Mouse kita saat itu dan bukan navbar kontens eh target gitu jadi selama yang diklik bukan navbar dan bukan hamburger ini kan selama ini klik bukan navbar dan bukan hamburger Berarti mau klik dimanapun di luar sini kita ilangin lagi aktif ya Oke navbar NAV kelas list kalau sekarang bukan togel tapi remove gitu Jadi kita hanya pengen ngilangin aja apa yang diri move kelas aktif titik koma oke Harusnya sekarang ini bisa ya kita balik ke sini kita refresh klik muncul klik ngilang tapi sekarang saya mau kliknya di sini hilang tapi sekarang saya mau kliknya di sini ya sekarang kalau saya kliknya di sini Nggak ngaruh tapi begitu di luar hilang Oke sip ya Mantap teman-teman itu dia bagian navbarnya bagian pertama sudah selesai oke teman-teman ya berikutnya kita masuk ke bagian kedua dari website kita yaitu bagian yang saya sebut dengan Hero section ya atau Ini bisa juga disebut dengan landing Element jadi elemen utama yang berada di paling atas website kita ya setelah navbar nanti ini kita akan simpan sebuah gambar yang sangat besar memenuhi layar dan nanti di sini kita akan menyimpan judul dari website kita atau tagline dari website kita dan beberapa kata penjelasannya nanti di bawahnya kita akan simpan satu CPE atau call to action berupa tombol ya ini teman-teman boleh ubah sesuai dengan kebutuhan teman-teman masing-masing ya bisa diarahkan ke pembelian produk bisa diarahkan ke follow sosial media atau diarahkan ke tulisan di blog silakan aja ya sekarang kita kembali dulu ke codingnya kita Scroll ke bawah setelah navbar and kita bikin satu elemen yaitu Hero section kita mulai pakai start kita duplikat alt shift bawah kita ganti jadi n ya mulainya dan akhirnya kita akan bikin pake elemen section ya di HTML 5 punya elemen section yang kita kasih kelasnya Hero untuk ditarget pakai CSS dan juga id-nya home supaya nanti ketika user klik menu di navbar atau nanti diputer ke bagian home maka dia akan mengarah ke sini Nah makanya sebetulnya tadi ini bisa kita ganti aja jadi home ya Oke jadi nanti Saat user klik dia akan langsung mengarah ke bagian paling atas dari Hero section Oke berikutnya di dalamnya kita akan bikin satu elemen lagi yang namanya Main dimana Nanti tersimpan semua elemen-elemen utama dari bagian section ini kenapa saya simpan lagi ke dalam main karena nanti sectionnya itu akan kita bikin agar ukurannya penuh satu layar dan punya background image sedangkan main itu untuk menyimpan elemen-elemen isinya ya Kita kasih aja kelasnya ini konten terus di dalamnya Saya mau bikin Beberapa elemen yang pertama ada H1 sebagai judul dari halamannya misalnya kita kasih tulisan Mari nikmati Secangkir Kopi ya nanti kopinya Mau saya ganti warnanya jadi saya bungkus dengan teks span di sini ya Oke tutupnya kita simpan di bagian luar Oke berikutnya Saya punya paragraf ya bikin aja tag p yang tulisannya nggak usah terlalu banyak ya Kita kasih lorem 10 kata aja supaya dibuatkan 10 kata random ya atau nanti kalau terlalu sedikit kita tambahin ya dan terakhir kita butuh sebuah Link yang nanti bentuknya seperti tombol kita kasih tanda pagar lalu kita kasih kelasnya aja ya call to action misalnya saya tulis di sini beli sekarang cerita nanti akan diarahkan ke halaman produk ya walaupun halaman produk ini nggak akan kita buat kali ini Oke kayaknya cukup ya ini untuk bagian htmlnya sekarang kita lihat dulu hasilnya Ya ada di sini kalau kita refresh masih ngumpet di belakangnya ya nanti kita benerin sekarang yang kita butuhin adalah gambar dulu teman-teman bisa buka lagi aja websitenya unsplash silahkan dicari aja foto atau gambar yang sesuai keinginan teman-teman ya yang ada hubungannya sama coffee tentu saja ya teman-teman tulis aja copy atau expresso atau Silahkan aja ya nah Kebetulan saya sudah cari gambar yang sesuai gambarnya di sini teman-teman kalau mau sama boleh mau beda juga boleh ya nggak ada ya ini saya udah cari linknya di sini ya di unsplash dengan link ini teman-teman bisa cek aja Link yang ada di deskripsi video terus nanti didownload aja ya pilih jangan yang terlalu besar pilih yang medium aja setelah saya download teman-teman bisa copykan aja ke dalam folder dari websitenya kita butuh folder IMG dulu ya silakan dibikin aja folder IMG baru kita simpan ini Saya udah simpan dan saya rename filenya jadi header desk bg.jpeg Ini hasilnya dan ini kalau teman-teman lihat agak berbeda Kenapa agak berbeda karena saya flip ya kopinya ada di sebelah kiri saya butuh kopinya ada di sebelah kanan Kenapa karena area kosong ini mau saya simpan tulisan nah tulisan yang saya pengen Simpannya di sebelah kiri di sini ya jadi gambarnya yang tadinya di kiri saya flip jadi di sebelah kanan begini Jadi sekali lagi kalau mau sama temen-temen boleh pakai jangan lupa di flip tapi kalau mau cari yang lain Silahkan Cari aja di sini yang sesuai nah ini ya ketemu ya oke gambar sudah ada html sudah selesai tinggal kita bikin CSS nya ya silahkan dibuka lagi filenya tadi kayaknya ke close kita simpan di sebelah kanannya lagi seperti biasa saya ganti jadi CSS dulu ya Kebetulan saya punya sniped buat post CSS tapi karena saya pengen pakai CSS temen-temen ganti aja kalau teman-teman di sininya udah CSS aman ya Scroll ini di bagian atas bukan di media query-nya Nah di sini di akhir kita butuh Hero section ya Hero section oke yang pertama kita akan bikin untuk tag heronya dulu ya ini kita close dulu kita pindahin ke html ya kita butuh buat tank heronya buat nyimpen gambarnya Saya pengen minimal haidnya itu penuh satu layar jadi kita kasih aja 100 viewport hate ya buat teman-teman yang masih bingung mengenai satuan VH atau view ini saya sudah pernah buatkan videonya Ya silakan teman-teman boleh cek aja satuan-satuan apa yang biasa dipakai agar halaman kita responsif ada view VH ada rem Em Oke berikutnya supaya nanti main konten ini berada persis di tengah-tengah heronya secara vertikal ya berarti kita butuh kasih dia display-nya fleks Dan kita kasih ingat kalau secara vertikal itu Line items ya kalau secara horizontal itu Justice content kita bikin dia disenter terus kita Panggil background image-nya background image url Arahkan ke imglass Apa tadi namanya header Dash BG titik JPG ya oke kasih no repeat dulu background repeat no repeat kita lihat dulu balik sini kita refresh Gambarnya belum ada ya kita lihat oh karena dia ada di dalam folder CSS berarti Jangan lupa kita Keluarin dulu pakai titik titik slash ya karena kita lagi ada di file ini kan keluar dulu masuk ke image baru pilih header Dash BG ya balik sini kita refresh Nah sekarang sudah ada sekarang kita kasih background size-nya cover supaya penuh satu layar ya background size cover begini supaya ukurannya maksimal terus kita kasih background position di tengah-tengah ya Oke save dulu Kita lihat nah supaya di atas Jadi pas gitu ya kopinya ada di tengah-tengah tulisannya juga ada di tengah-tengah tinggal nanti kita benerin Oke Berikutnya sebelum kita kasih style untuk tulisannya Saya pengen bikin agar di bagian bawah dari gambar ini ada gradasi hitam supaya Nanti pada saat halaman ini kita Scroll masuk ke elemen-elemen yang lain di bawahnya itu ngeblend nyambung gitu ya karena sekarang kalau ini kita Scroll pasti kelihatan enggak nyambungnya supaya kita kasih dulu seolah-olah panjang halamannya ya Kita kasih body-nya ini jangan lupa nanti kita hapus ya Kita kasih head-nya atau main head-nya ya main head-nya misalnya kita kasih 2000 pixel supaya halamannya bisa di Scroll tapi fresh ini bisa di Scroll Nah lihat jadi ini kan kelihatan banget bedanya Ya saya mau bikin ada gradasi hitam supaya nanti nyambung ke warna hitam di bawah Nah itu caranya adalah saya akan bikin elemen sudo ya di sini untuk heronya jadi saya akan punya titik Hero titik dua titik dua after yang berisi gradasinya Oke kita kasih konten dulu seperti biasa kosong aja supaya bisa dikasih style displaynya kita kasih block nah ini posisinya mau saya kasih Absolute biar nempel ke bawah tapi ingat kalau di sini kita kasih position Absolute maka elemen utamanya atau elemen pembungkusnya ini harus kita kasih position yang non Static juga kita kasih aja relatif ya biar nggak mengganggu posisi aslinya Yang penting dia udah maju satu dimensi sip ya jadi jangan lupa heronya kasih position relatif baru kita kasih withnya 100% headnya juga sama 100% terus jangan lupa kita kasih background linear gradient ya Kita kasih background yang dia linear grade kita mulai kita kasih kita kasih aturannya gini mulai dari 0 derajat terus warnanya awalnya itu rgba 113 ini warnanya hitam sesuai dengan background kita ya mau dikasih nol nol juga sebetulnya boleh itu hitam banget tapi supaya nyambung dengan warna background kita akan background kita ini heksanya 0101 ya 0101 itu rgb-nya ini 1 1 3 awalnya Solid dulu jadi item banget sampai ukurannya 3% ya dari bawah ya terus kita ubah dia jadi warna putih tapi transparan sebenarnya enggak masalah ya mau transisi ke warna apapun ya Kita kasih rgba 255 255255 0 saat di 25% Oke Coba kita lihat dulu kita refresh Oh nggak berubah Kayaknya ada typo ya Oh ini dia sorry teman-teman ini harusnya rgbe ya red Green blue kebalik tadi dari fresh nah sip sekarang jadi ngeblend tuh ya di sini ada gradasi jadi enggak kelihatan bahwa dia patah gitu oke ya Mantap ya itu dia caranya kalau kita mau bikin gradasi ya Sekali lagi kita udah enggak butuh head di dalam body-nya Boleh dihapus saja kita ke body ini hapus dulu atau kita kasih komentar dulu lah siapa tahu nanti ya Oke balik lagi ke bagian Hero selanjutnya kita fokus di bagian konten ya Sekarang kita ke titik Hero spasi titik konten pertama kita mau kasih padding kiri kanan Kita samain dengan bagian navbar kita ya jadi atas bawahnya kita kasih 1,4 rem kiri kanannya 7% baru kita kasih Max withnya itu 60 rem agar tidak terlalu mepet ya Coba kita save kita lihat nah sekarang Jadi geser lebarnya jadi nggak terlalu panjang ya berikutnya kita atur H1 nya jadi kita Hero titik konten H1 kita kasih ukuran font yang sangat besar kita kasih 5 am aja warnanya putih kita kasih color fff lalu kita kasih bayangan ya tag Shadow sedikit aja satu pixel 1 pixel 3 pixel lalu rgbe warnanya samain ya satu satu tiga ini transparansinya 0,5 ya 50% Coba kita lihat save dulu Kita lihat nah ini sudah ya ada bayangannya terus ukurannya besar atau mungkin kita Kecilin sedikit lain haidnya ya Kita kasih Line Height 1 terlalu mepet nggak Kayaknya 1,2 nah cukup ya tinggal kopinya kita ganti warnanya jadi caranya kita kasih Hero konten H1 span ya Kita kasih color far minus minus apa nih primary ya primary Nah itu dia berikutnya paragraf di bawahnya kita kasih Hero konten p kita kasih supaya ukurannya cukup besar kita kasih font size 1,6 rem ya cukup ya Kita kasih margin top dulu dikit margin top supaya nggak terlalu mepet kita kasih berapa setengah rem begini atau satu rem terlalu besar cukup lah ya kita kasih 1,2 juga Oh terlalu mepet 1,4 aja Oke paling kita tipisin fontnya ya Kita kasih font 100 supaya tipis nah jangan lupa kita kasih teks Shadow juga ya Kita samain aja sama H1 nya kasih teks Shadow boleh di copy aja Oke terakhir adalah tombol cte sekarang kita kasih di sini Hero content kasih margin top juga supaya nggak terlalu mepet kita kasih satu rem aja kita kasih displaynya Inline block biar bisa kita kasih margin dan padding ya kita kasih padding 1 rem 3 rem atas bawahnya satu rem kiri kanannya kita kasih agak gede 1,4 rem warnanya putih warna tulisannya warnanya putih tapi warna backgroundnya primary Oke Coba kita lihat dulu hasilnya dari fresh nah sip ya udah oke kayaknya tinggal kita kasih border radius ya Kita kasih border radius sama shadow border radiusnya setengah rem aja ya 8 pixel dan Shadow box Shadow 1 pixel 1 pixel 3 pixel lalu rgbe13 Oke sip ya udah jadi tombol tuh kalau kita sorot lu sebentar ini kenapa tidak ada tanda pointernya ya Ini karena kita punya elemen after yang memenuhi layar jadi ini nggak bisa diklik teman-teman nih karena ada lapisan yang menghalangi gimana supaya gradasinya kita bikin jangan penuh satu layar tapi cukup dibawah buttonnya ini tadi kita agak salah ya kita benerin dulu elemen afternya coba Scroll ke atas ke bagian after nah ini ini tingginya enggak usah 100% kita bikin dia 30% aja supaya nggak terlalu tinggi tapi sekarang lihat nih gradasinya pindah ke sini kita pengennya di bawah atau 40% lah ya 40% [Musik] segini cukup nanti dia kita tempelin ke bawah Caranya teman-teman tinggal kita kasih bottom nol supaya turun ke bawah Oh masih tetap nggak bisa diklik ya masih terlalu tinggi kita kasih 30%. Nah sekarang udah oke tapi sekarang gradasinya terlalu kecil gimana kalau kita naikin jadi misalnya berapa 8% Nah gini ya 8% cukup deh paling ininya kita kasih 50% ya transisinya supaya naik tuh ya oke sekarang kembali seperti semula gradasinya tapi sekarang ini bisa diklik jadi hanya sedikit gradasinya Sip itu dia untuk Hero section tapi masih ada satu hal yang belum kita coba yaitu responsifnya sebenarnya ini nggak perlu kita kasih media query karena responsifnya udah ditangani oleh persentase ukuran font yang udah ada sebelumnya tapi ada satu hal yang perlu kita perbaiki Coba kita kecilin dulu Nah ini Lihat ya ketika kita kecilin udah mengecil udah aman ya tapi ada problem ketika kita kecilin terus sampai ukuran tablet Nah lihat nih font ini tidak terlihat Jadi kalau dibuka di handphone nggak tahu Tuh Tulisannya apa Nah ini ada cara kerennya temen-temen ya kita bisa kasih yang namanya mix Blend mode untuk paragrafnya jadi kita bisa cari mana paragrafnya mix Blend mode ini untuk ngasih blending option Yang kalau teman-teman yang pernah pakai Photoshop pasti mengenal yang namanya blending option untuk mencampurkan dua warna ketika mereka saling overlap ya kita mau kasih di sini mix Blend mode yang namanya difference supaya ketika ketemu warna yang beda kita kasih warnanya otomatis berubah sesuai perbedaannya jadi kontras lihat ya ketika kita refresh tuh jadi ketika warna putih ketemu putih dia berubah jadi difference yang perbedaannya yaitu item nah bagus banget ya Jadi kalian gak perlu khawatir ketika warna backgroundnya sama dengan warna foregroundnya yaitu dia bagian Hero section selesai Sekarang kita masuk ke elemen berikutnya yaitu about section atau bagian tentang kami ya ini tentang kami kita akan simpan persis di bawah Hero sectionnya Mari kita buka codingannya lagi kita ke html-nya dulu ya sebelah kiri kita kasih di sini komentar dulu about section start kita duplikat yang ini about section and Oke untuk obat section itu nanti kita punya sebuah section lagi sama seperti Hero section yang nama id-nya about dan nama kelasnya about teman-teman bisa nulisnya gini ya sehingga kalau kita pencet tab langsung jadi ID dan kelas di dalamnya itu akan saya bikin menjadi dua bagian baris yang pertama itu judul dari sectionnya nanti di baris kedua baru ada tulisan tentang kaminya ya kita tulis yang judulnya dulu ya di sini kita punya H2 yang tulisannya tentang kami gitu ya Sekarang gantian tentangnya mau warnanya beda jadi saya bisa kasih span di sini kaminya warna putih tentangnya warna coklat oke kita kasih paragraf jangan ya nggak usah lah ya karena nanti about itu bentuknya udah paragraf ini dulu aja supaya bisa kita kasih CSC dulu teman-teman Arahkan ke sebelah kanan kita kasih about section kita tulis about sama seperti yang Hero ya Dan navbar kita kasih padding Tapi kalau ini agak beda kan kalau sebelumnya atas bawahnya 1,4 rem ya mana Coba kita lihat yang Hero oh bukan di konten nah ini 1,4 atas bawah nah sekarang Saya pengen bikin atasnya tuh lebih tinggi supaya nanti ketika kita klik linknya itu nggak ngumpet di belakang navbar Maksudnya gimana Coba kita lihat ya kalau saya tulis 1,4 rem terus 7% ini kan artinya atas bawah 1,4 kiri kanan 7% ya Coba kita lihat dulu kalau kita refresh nanti di sini ada tulisan tentang kami kita kasih lagi bodynya tingginya 2000 lagi ya ini untuk percobaan aja Scroll ke atas cari bagian body kita Nyalakan lagi main headnya sekarang kita refresh oke nah sekarang ini kan jarak antar bagian tentang ke atas 1,4 rem ke bawah 1,4 rem lihat ketika saya klik home dia akan tampil bagian Hero tapi ketika klik tentang kami Dia akan loncat ke elemen yang id-nya about lihat di bawah tuh ada indeks html tanda pagar about kalau saya klik dia loncatnya ke sini bautnya mana bautnya ngumpet di sini tuh di balik tulisan kenangan senja Saya pengen Ketika saya klik tentang kami tulisan tentang kaminya muncul tapi nanti di tengah sini ya yang pasti kelihatan dulu jangan ngumpet di balik sini nah caranya gimana cara ngakalinnya kasih aja padding di atasnya yang cukup besar jangan margin tapi pending ya kita lihat kalau kita ganti jadi gini ini ya 10 rem atasnya bawahnya baru 1,4 ya akan jadi nulisnya gini ya atasnya 10 rem kiri kanan 7% bawah 1,4 kita lihat refresh kita ke home sekarang ke tentang kami Nah ada tuh nanti kita pengennya di tengah sini sip ya oke berikutnya kita atur h2nya titik about H2 kita bikin supaya di tengah kita kasih teks lain center gedein sedikit ukurannya ya kita font size 2,6 rem lalu kita kasih margin bottom 3 kita lihat dulu Nah sekarang di tengah home tentang kami Sip kalau terlalu tinggi ya kurangin aja ya Bisa misalnya jadi 8 rem kayaknya cukup 8 ya Oke 8 aja deh 8 terus kita kasih about H2 span ya ini kita kasih colornya far minus minus primary kita lihat lagi ini fresh oke sekarang tentangnya yang warna coklat nah berikutnya kita mau kasih tulisan di bawah sini tapi nanti tulisannya itu di sebelah kanan di sebelah kirinya Saya pengen ada gambarnya nanti kita cari lagi nih gambarnya balik ke codingnya dulu kita tambahin elemen di bawah sini kita mau bikin pakai sebuah Deep yang nanti saya kasih kelas yang namanya row gitu untuk ngatur baris baru yang ada dua elemen yang pertama ada gambar di sebelah kiri saya mau bikin di dalam sebuah Deep yang namanya about IMG ini ya yang nantinya ini adalah elemen gambar yang tulisannya tentang kami gitu ya tentang kami tapi kita harus cari dulu gambarnya temen-temen boleh cari lagi gambarnya di unsplash silahkan dicari saya akan pakai gambar ini teman-teman boleh dicari juga di boleh gunakan Link yang ada di deskripsi kalau mau sama silahkan nanti ini di save ya saya simpan ke dalam folder IMG seri name jadi tentang DS kami.jpg ini ukurannya saya ambil yang kecil aja karena ada pilihannya pada saat di download saya pilih yang small nggak usah gede-gede Oke sip Gambarnya udah punya balik lagi ke html berarti kita Panggil imglass tentang kami ya berikutnya elemennya adalah kontennya jadi saya punya Deep yang nama kelas yang konten juga yang di dalamnya ada dua elemen Ada Judul dari tentang kaminya pakai H3 ya Misalnya saya tulis ini kenapa memilih kopi kami misalnya gitu terus baru di bawahnya kita kasih paragraf soalnya ini pakai paragraf kita kasih lorem aja 15 kata ada dua paragraf ya Kita kasih lorem lagi 20 kata misalnya gitu Udah ya kita lihat dulu hasilnya kita refresh nah ini Jadi ada gambar tulisannya Saya pengen ada di sebelah kanan balik lagi ke codingnya itu htmlnya udah selesai silakan sesuaikan dengan kebutuhan teman-teman masing-masing ya Mari kita atur dulu silahkan ke sebelah kanan kita atur mulai dari row nya dulu ya ini jadi saya tulis titik about titik row yang pertama saya pengen displaynya Flex supaya ngaturnya gampang ya Sekali lagi nggak bosan-bosan saya bilang pemahaman mengenai Flex box itu penting banget buat kalian seorang Web Designer atau front and web developer kita mulai dari yang about image dulu ini kita kasih Flex supaya dia sebelah-sebelahan dulu ya tuh 11 bulan baru kita atur about row about pmg ya Nah ini saya pengen ukuran flexnya kita atur fleks grow dan flek seringnya jadi saya tulisnya gini fleks satu-satu jadi grownya satu seringnya satu ukurannya 45 rem ini untuk ukurannya sekarang untuk gambarnya kita kasih about row about IMG IMG gitu kita kasih withnya 100% supaya memenuhi satu bagian flexnya berikutnya baru kita atur yang kontennya jadi saya tulis about row content kita kasih juga Flex satu-satu agar lebih kecil 35 rem kasih paddingnya atas bawahnya nol kiri kanannya satu rem ya kita lihat dulu kita ke sini kita refresh Nah jadi yang gambar sedikit lebih gede yang tulisan lebih kecil sedikit sip tinggal kita kasih untuk H3 dan paragrafnya tulis saja about row content H3 kita kasih ukuran font size 1,8 rem dan padding terus kita kasih aja margin bottom satu rem terakhir adalah paragraf row content P kita kasih margin bottomnya 0,8 rem font size nya 1,4 frame font nya kita bikin tipis sajalah ya 100 ketipisan nanti kita lihat kita kasih Line heightnya 1,6 save dulu kita refresh Nah ini dia hasilnya seperti ini ya Kalau dibuka di desktop Oke sekali lagi kalau misalkan kalian gak suka dengan atau kurang cocok dengan stylenya silahkan diubah sesuai keinginan misalnya fontnya kegedean nih yang paragraf kita kurangin aja 1,3 nah dia kecil seperti ini Nah sekarang gimana kalau kita bukanya di lebar layar yang kecil Kalau di handphone begini terlalu kecil kita benerin di tablet begini kalau di laptop nggak masalah lah ya ini kan di desktop ini di laptop Ini tablet dan ini di handphone kita harus benerin yang di handphone dan di tablet jadi kita akan masuk ke media query yang tablet teman-teman Scroll ke bawah Cari tablet terakhir setelah NAV bar ya di sini kita akan atur agar si aboutnya baru kita kasih Flex supaya turun ke bawah Oke tadinya kan nggak rap ya nggak turun ke bawah tapi kalau kita kecilin nah Turun ke bawah kayak gitu begitu di tablet turun oke terus gambarnya saya mau bikin agar nggak terlalu tinggi ini gambarnya ketinggian Saya mau bikin ya 3/4 nya lah jadi kita kasih di sini about row about IMG IMG kita kasih heatnya misalnya 24 rem supaya nggak tinggi-tinggi amat ya Oh kita geser Oh tapi jadi ketarik nih Ya tarik supaya nggak ketarik kita harus kasih dia objek Fit cover Nah gini Okelah ya objek Fit cover sama supaya di tengah-tengah ini nggak terlalu bawah kopinya kita kasih objek position kita kasih senter aja supaya fokusnya kita di copy nah gitu Okelah ya tinggal ini paddingnya mau saya ilangin nih jadi kita bisa kasih di sini about row content weddingnya 0 supaya penuh supaya sejajar sama gambarnya sama mungkin ini dibikin jangan terlalu mepet ya Jadi kita kasih about row content H3 margin Top 1 rem aja font size nya agak gede dikit lah 2 rem Nah begini udah oke nggak berubah karena ini font size harusnya Sorry teman-teman size kegedean Berarti tadi bener 1,6 aja kali Oke sip cukup ya Ini dia halaman tentang kaminya sepertinya sudah cukup oke berikutnya kita masuk ke bagian menu nah ini kita mau nambahin beberapa gambar yang jadi menu di kedai kopi kita mari kita buka lagi htmlnya teman-teman kita Scroll Sekarang kita ke bawah tutup dari about section kita bikin lagi menu section start ya kita ganti menu section and Langsung aja kita bikin section lagi sama seperti yang tadi ya kita bikin section ID nya menu kelasnya menu Oke Kita samain bikin H2 Eh tadi H2 ya atau kita copy ajalah kita copy ya biar cepat kita ganti jadi menu kami ya Menu kami nah ini sebenarnya judulnya juga sama kita lihat nah ini ya Saya pengen persis kayak gini jadi lebih baik kita gunakan style yang udah ada aja ya Scroll ke atas cari bagian about nah ini ya kita tinggal kasih di sini koma titik menu H2 gitu aja tuh sama kan sama Oh paddingnya ya paddingnya juga berarti kita butuh yang ini nih kita kasih koma titik menu Nah begini sudah Ini sudah mau spannya ini juga sama jadi titik menu H2 span Oke sip ini tapi kenapa nggak bisa di Scroll bodynya Kurang panjang ya kita lihat lagi ke atas ke body udah ya Kita kasih 3000 apa 3000 supaya nambah panjang ya kita coba dulu home tentang menu Oke sip jangan lupa nanti ini dihapus ya balik lagi ke bagian menu Mana dia Ini ya Kita kasih dulu menu section oke sekarang apa yang belum kita kasih style oh kita belum kasih elemennya bahkan Ya gimana kalau kita tambahin paragraf dulu deh di sini ya Kita kasih paragraf kita kasih lorem 15 kata aja deh supaya ada tulisan di bawah sini nih Oke kita kasih dulu berarti ini apa titik menu titik aja ya kasih teks online senter supaya di tengah terus kita kasih maxsuit kali ya supaya nggak terlalu lebar rem bentar mana dia nah jadi supaya gak terlalu lebar karena kalau nggak dikasih maksud dia satu layar penuh tuh saya pengennya dikit aja kita kecilin tapi jadi di sebelah kiri ya Gimana kalau kita kasih margin auto biar ke tengah dia oke tapi dia jadi jauh jaraknya kita atur dulu deh font size-nya 1,2 rem kok kegedean ya Udah kayaknya cukup satu rem ya cukup paling fun weightnya font weight nya kali hasil lain Hei 1,6 nah ini kita harus pepetin karena apa Karena tadi H2 nya kita ngikut H2 yang di atas kita Timpa deh menu H2 margin bottomnya dikit aja 2 rem coba cukuplah ya setengah rem media berubah nggak sih Oh nggak usah pakai margin ya atau nggak papa deh satu rem aja nah gini aja deh cukup ya jadi klik menu tentang kami oke tinggal kita kasih tulisan ini kepanjangan Kita hapus aja segini oke sekarang di bawah sini nanti saya pengennya ada gambar ada nama menunya terus ada harganya Oke kita butuh gambarnya sekali lagi teman-teman bisa cari aja gambarnya dulu di sini cari lagi gambarnya misalkan Saya mau cari gambar expresso ya karena menu kita misalnya Espresso atau latte misalnya nah ini latte silahkan cari aja ya dan Kebetulan saya juga udah punya Gambarnya udah saya cariin mau sama boleh ini Espresso Ya silahkan dipilih tapi saya pengen gambar yang tampil di sini biar gampang itu bujur sangkar ini kan persegi panjang ya Jadi saya udah download terus udah saya crop jadi bujur sangka ini saya udah pas di sini jadi saya punya satu folder yang namanya menu yang isinya tuh cuman satu ya Nih udah kotak begini kecil aja ukurannya itu kita lihat aja ukurannya kalau nggak salah 300 kali 300 ya Nah ya 300 kali 300 pixel bikin aja bujur sangkar biar nanti ketika kita bikin dia jadi bulat pakai border radius itu udah bulat sempurna series jadi satu supaya nanti kalau teman-teman punya 5 menu nggak usah mikir lagi 1 2 3 45 gitu Oke kembali ke codingnya sekarang di bagian sectionnya di bawah paragraf kita bikin row lagi ya jadi saya punya Deep yang nama kelasnya row yang dalamnya ada satu Dev lagi seolah-olah saya mau bikin card gitu kalau di bootstrap itu namanya card kita bikin sekarang secara manual namanya menu card begini yang ada image-nya kita ambil dari folder image + menu slash 1 kita bikin satu dulu aja saya namanya S presso bener sih nulis Espresso tuh s-nya 2 apa 1 S pressue ini terus dibawa gambar ada H3 kita udah pakai H3 belum belum ya H1 H2 sekarang H3 yang tulisannya gini saya pakai minus sebenarnya gak perlu pakai minus juga nggak papa ya cuman biar ada bedanya dengan tulisan lain gitu kelas kita kasih apa nih menu card title karena ini menukar ini menukar image ini harusnya ya Kita kasih kelas juga deh kelas menukar image dan terakhir kita bikin pakai paragraf aja Ini harga misalnya harganya IDR berapa sih Espresso Rp15.000 15k masih kelas menukar ini apa price ya sip gini dulu aja satu dulu nanti kalau butuh banyak tinggal kita duplikat nggak masalah mari kita bikin stylenya save dulu jangan lupa kita lihat dulu hasilnya Ya ini refresh nah ini masih ke pengaruh sama style yang lain nanti kita Timpa ini ekspresornya udah atau kayaknya ini Ketebelan Ya nggak papa lah cukup-cukup kita ke CSS di bawah menu P di sini kita bikin menu row nya dulu ya row kita bikin dia displaynya Flex supaya ngaturnya Gampang sekali lagi kita kasih Flex nah ini langsung aja supaya dia kalau kebanyakan Langsung Turun ke bawah supaya kita nggak perlu ngatur responsifnya lagi di media query ngasih margin top supaya nggak terlalu nempel ke atas 5 rem ya kita lihat dulu Nah gini ya Jadi ini udah supaya di tengah mulai dari tengah kita kasih Justice content Center Jadi kalau satu di tengah kalau dua juga di tengah kiri kanan mepet gitu Paling tinggal kita kasih nanti gap atau Nantilah gapnya belakangan setelah kita duplikat kartunya nanti kita kasih menukar supaya semua teks lainnya dibikin Center oke aman ya berikutnya imagenya kita ke menu atau kita tulis semuanya ya biar spesifiknya cukup gitu kita kasih ini menu ini row gitu ya ini juga sama kita copy aja menu row menu card IMG nggak pakai titik berarti Im kayak gini ya kita kasih border radius 50% biar bulet terus kita kasih with nya 80% supaya nggak gede-gede Amat nah gitu ya sip berikutnya adalah judul jadi ini bisa di copy aja kita kasih menu card title kasih margin top budaya itu title berikutnya apa price ya Jadi kita kasih menu row menukar menu kar price kita kasih margin top ya margin top atau ini gini aja deh margin semua ketinggian Ya ini nggak usah deh ini nggak usah ini atas bawahnya 15 kiri kanannya auto bawahnya satu rem gini aja atau setengah rem [Musik] nah Cukup ya atau atasnya juga ketinggian ini satu rem aja deh sip ini kalau satu Ya sudah Oke gimana kalau kita duplikat jadi beberapa caranya teman-teman bisa tutup dulu Div menukarnya Arahkan ke sini sampai ketemu tanda panah ke bawah supaya tetap baru kita blok biar gampang ngeblok nya baru alt shift bawah 3 kali 1 2 3 jadi duplikat sampai ada 4 menu nah gitu ya nanti tinggal ganti aja menu-menunya sesuai dengan menu yang ada di kedai kopi kita anggap aja sekarang semuanya Espresso dulu ya kalau 4 rapi kalau kita tambahin satu lagi harusnya turun nah gitu oh terlalu mepet ya Kita kasih berarti bener tadi kita kasih menu card atau kita kasihnya di pendingnya deh kita ke menu card di sini kita kasih padding bottom bottomnya satu rem masih terlalu mepet juga kayaknya ya kita tambahin satu menu lagi deh supaya kelihatan alt shift bawah sini cukup nggak kita tambahin 4 remnya Nah gini cukup kayaknya Oke ini kalau 6 ya Sekarang gimana kalau kita kecilin ini harusnya udah cukup responsif sih kita kecilin jadi turun kita kecilin Jadi dua kita kecilin jadi satu udah aman ini kalau kita buka di handphone ya Oh Tapi ini kekecilan ya tulisan paragrafnya Kalau di handphone nah Berarti mau nggak mau kita harus benerin ini teman-teman kita cari paragraf berarti yang mana dia ada di menu P ya ini ya Menu P Oke kita copy dulu kita masuk ke bagian tablet kalau di tablet gimana ini tablet kurang gede juga ya kita ke tablet aja deh kita cari di bagian sini menu paragraf kita kasih font size nya 1,6 rem kita lihat Oh kegedean 1,2 nah ini cukup ya kita kecilin sip cukup ya 1,2 aja cukup ini juga cukup oke aman itu untuk bagian menu ya sekarang kita masuk ke bagian berikutnya yaitu bagian kontak nanti di bawah sini saya mau bikin ada Bagaimana cara mengontak kedai kopi kita saya akan tambahkan yang pertama ada Google Maps ya tempat di mana kedai kopinya Terus yang kedua ada form sedikit aja misalnya nanti customer bisa mengirimkan pesan gitu walaupun ini baru tampilannya aja Oke kita kembali ke codingnya kita ke bawah bagian menu kita bikin kontak section start ya duplikat kontak section and sama kayak tadi kita bikin section yang id-nya kontak kelasnya kontak di dalamnya kita duplikat lagi bagian menu ya nah ini dia kita duplikat sini kita tulis kontak kami [Musik] ini supaya beda kita generate lagi aja lorem 10 kita lihat ada di sini seperti biasa kita copy stylenya dulu kita Scroll ke atas kita ke bagian apa tadi about ya kita ke bagian about nah ini Jadi about menu kontak nambah lagi satu titik kontak ini juga sama titik kontak H2 kita tambah lagi koma kontak H2 span kita lihat Nah sudah tinggal paragrafnya ya kalau paragraf Dia adanya di menu nah ini kayaknya mesti kita tambahin di sini aja ya kontak p nah ini juga sama kita kasih kontak H2 supaya nggak terlalu jauh menu tentang home contact kontak karena udah abis ya 3000 pikselnya tadi maksud 3000 jadi dia mentok di sini tapi nanti nggak usah khawatir ketika nambah elemennya dia pasti ke atas lagi Oke sip ya itu dia berikutnya adalah elemennya elemennya Sekarang saya mau bikin di bawah paragraf ini kita bikin throw lagi sama seperti menu tadi di dalam row-nya ada dua ada Google Maps dan ada form nah yang pertama saya mau ambil Google mapsnya dulu jadi cara gampangnya gini aja teman-teman buka browser kita Arahkan ke Maps dot google.com cari aja ceritanya tempat dari kedai kopi teman-teman ada di mana anggap aja saya ada di Bandung sekarang ya kita klik Bandung aja nanti dia akan diarahkan ke kota Bandung atau kalau mau detail temen-temen Langsung tulis aja Alamatnya ada di mana nanti dapat tuh koordinatnya tinggal kita klik share ada tombol share di sini terus pilih yang embed e map nanti kita dapat iframe-nya di sini copy aja htmlnya ya lalu kita simpan di coding kita kita simpan di sini kita paste di sini oke sudah muncul semuanya paling ada beberapa atribut yang nggak kita butuhin yaitu with dan stylenya ini nggak perlu jadi Boleh dihapus aja dan Style Ini nggak perlu sisanya Biarin aja supaya nanti ada mapsnya langsung di bawah sini ya di ukurannya kita benerin supaya sesuai dengan keinginan kita itu yang pertama Ya yang kedua itu di sebelah kanannya mirip dengan about kita ada tulisan Jadi kita butuh form ya Tapi sebelum kita ke form kita style dulu aja deh ya kita simpan di sini aja di bagian bawah ini apa kontak section [Musik] kita atur untuk yang row dan mapnya ya atau kita kasih kelas dulu deh mapnya kita kasih kelas gini jadi iframenya teman-teman tambahin kelas map jadi kita bisa atur di sini pertama kita ambil dulu kontak row itu displaynya Flex ya supaya nanti ngatur iframe sama formnya gampang si margin topnya supaya nggak nempel 2 rem kita kasih background colornya nah ini saya mau bikin warnanya beda dengan warna background sedikit lebih mudah saya kasih aja pagar 222 gitu ya nanti warnanya beda tuh kayak gini atau kita kasih lagi deh tingginya ya supaya enak lihatnya kita kasih 5000 Nah biar bisa di Scroll ke sini ya udah balik lagi ke kontak Terus kita kasih flags wrap supaya nanti bisa turun ke bawah jadi tadinya kan map sama form kiri kanan tapi kalau lebar layarnya nggak cukup dibuka di tablet atau di mobile dia jadi atas bawah petanya di atas formnya di bawah baru kita atur mapnya berikutnya kita kasih di sini kontak ini sama kayak about kita jadi kita punya flags seringnya satu grownya satu basisnya atau ukurannya itu 45 rem lagi kita kasih withnya 100% supaya petanya penuh dan objek Fit nya cover ya jadi dia penuh gitu berikutnya kita butuh form nah ini kita tambahin di bawah sini langsung aja form yang di dalamnya Saya mau simpan Beberapa elemen ada nama email sama nomor handphone lah ya untuk mendata calon customer kita mau dikasih pesan boleh mau nggak juga boleh Saya simpel aja nggak akan pakai pesan ya saya mau bikin sebuah gift yang nama kelasnya input group karena di dalamnya akan ada dua elemen icon dan juga inputnya jadi saya butuh iconnya ikonnya itu pakai tag e aja terus kita kasih data feather ini buat user icon ya Coba kita balik lagi ke sini user nah ini saya mau ngambil yang ini nih jadi langsung aja user Oke Terus di bawahnya ada input yang tipenya teks nggak kasih placeholdernya lama gitu ya masukin nama dah terus berikutnya sama ini boleh dikopi aja lah ya blok alt shift bawah berikutnya adalah email kayaknya kalau email ada dia email kita butuh Mail jadi ini male input tipe text placeholdernya itu play soldernya email dan yang terakhir adalah nomor hpnya ya duplikat lagi kalau ini apa ini kita pakai font ya berarti ini pohon play soldernya nomor HP gitu aja Dan Terakhir Tentu aja kita butuh button kita bisa kasih button yang tulisannya kirim pesan tipenya submit yang kelasnya kita kasih BTN aja dah cukup ya ini elemennya yang kalau kita lihat hasilnya Nah kayak gini ya masih belum kita atur Oke Mari kita atur satu persatu mulai dari formnya dulu jadi kita punya kontak Terus row ya kontak row baru form jadi kita punya row form ya Kita kasih Flag lagi 11 sekarang Kita samain aja deh 45 rem Terus ngasih padding atas bawahnya 5 rem supaya agak gede si inputnya kiri kanannya dua rem supaya di tengah tulisannya kita kasih teks [Musik] center Coba kita lihat dulu ya Nah ini kayak gini ini masih atas bawah belum kita atur supaya nanti kiri kanan ya nanti kita lihat sekarang kita akan atur tiap-tiap input grupnya jadi kita punya kontak kita kasih displaynya Flex kasih a line item center kita kasih margin top 2 rem nggak kasih background color warnanya gelap kita berarti butuh BG ya far minus minus BG baru kita kasih border border 1 pixel Solid ini warnanya nyaris putih Tinggal kita kasih padding left Oke kita lihat dulu kita refresh Bentar ini harusnya dia di sebelah kanan ya kayaknya fleknya nanti kita Simpannya saat di responsif aja lah ya ini coba kita hapus dulu Nah ini maksud saya jadi dia sebelah-sebelahan ya Pantesan nanti fleknya ketika kita kecilin Karena sekarang kalau dikecilin dia akan terus-terusan 11 belahan Tuh jadinya jelek nih ketika dilebar tablet Nah di sini turun dia harusnya ke bawah salah tadi ya Sorry teman-teman fleknya harusnya diresponsifnya Oke lanjut ini masih belum bagus nih sekarang kita atur setiap inputannya jadi kita punya di sini kontak row form input group input withnya 100% kita kasih paddingnya 2 rem kita kasih font sizenya 1,7 rem dan background nya kosongin Nah begini Oke kontak ya Sip lah ya kontak cukup ya tadi saya zoomnya ternyata 125 ya harusnya 110 lah cukup sip ini udah kelihatan semua tinggal kita kasih color ya color Coba kasih FF supaya tulisannya nah supaya tulisannya kelihatan Oke terakhir apa terakhir button kali ya jadi kita kasih kontak row form input Group button kok nggak langsung button aja form button ya kan form dia button Oke sip masih margin top nya 3 rem kita kasih displaynya Inline block Bekasi font size 1,7 rem kita kasih warna putih warna tulisannya warna backgroundnya itu coklat ya Jadi kita kasih far primery lagi lalu kita lihat dulu kita refresh Nah ini dia tinggal kita kasih kursor pointer ya kursor Oke sip ini dia untuk formnya ini kalau kita kecilin Nah kita benerin pada saat di tablet ya jadi di sini oke kita berarti ke media query cari bagian tablet nah ini dia di akhir menu kita kasih kontak terseru kita kasih Flex Nah di sini harusnya rap gitu sekarang kalau saya refresh turun Oh tapi petanya Kurang tinggi jadinya ya kita tinggiin petanya jadi kita tulis di sini kontak row map kita kasih heatnya terlihat cukup tapi ini jadinya terlalu kosong ya terlalu jaraknya terlalu jauh kita kecilin kita kasih kontak jangan pakai padding topnya padding Nah begini ya Jadi kalau dibuka di handphone Lumayan lah ya Oke kalau dibuka di laptop nih Kok buka di desktop mantap baik teman-teman sekarang kita bakalan masuk ke bagian terakhir dari website kita yaitu bagian footer ya karena ini semua udah nanti kita mau tambahin bagian footer silahkan kalau misalnya teman-teman pengen nambahin bagian lain mau ngejalanin fitur search atau shopping card itu boleh banget ya Mari kita balik lagi ke codingnya dulu kita bakalan nambahin elemen footer setelah kontak section ini ya Kita kasih foto aja start gini kita duplikat ini footer and untuk footer ini punya elemen htmlnya sendiri jadi nggak perlu pakai section kita butuh footer aja kayak gini ya nanti di dalamnya Saya pengen ada dua bagian atau tiga bagian lah ya yang pertama ada link ke sosial media yang kedua ada link ke section yang sama seperti yang ada di navbar dan yang ketiga mungkin ada copyright lah ya Jadi kita bakalan punya tiga yang pertama kita punya Deep yang nama kelasnya sosial ini ya nanti di dalamnya ada a yang akan mengarah ke sosial media kita nah ini akan kita ambil dari tombol yang kita kasih icon jadi saya punya I yang ada data fendernya itu sesuai dengan Social medianya misalnya yang pertama saya pengen mengarah ke Instagram ceritanya kita punya kedai Kopinya punya Instagram kita cari dia ada nggak Instagram ada ya berarti tinggal kasih aja Instagram dan duplikat misalnya kedua Oh ini Instagramnya yang kedua Twitter Twitter kita duplikat lagi yang ketiga misalnya apa Facebook ya kalau Facebook pasti ada Facebook Coba kita lihat dulu hasilnya kita refresh ada ya Kita kasih Tik Tok Tik Tok ada ya nggak perlu berarti tiktok Kita hapus aja itu untuk link ke sosial medianya berikutnya di bawah di sosial kita mau punya links ya jadi saya punya links atau ini juga sosial deh ada esnya ya social dan links kalau ini mengarah ke semua link di atas yang pertama itu ke home ini ini duplikat 4 kali yang kedua itu apa tadi about ini tentang kami yang ketiga itu menu ini mengarah ke menu dan yang terakhir ke kontak ya kontak mengarah ke kontak sip kita lihat lagi ada di bawahnya dan terakhir itu bagian kredit gini kredit yang isinya hanya paragraf aja kali ya paragraf yang tulisannya created by misalnya kita kasih span Sandika Galih atau kita Arahkan pakai a deh jangan pakai spam kita pakai a gitu ini simpan di akhir di sini ya spannya hapus aja spasi kita kasih copyright tambahin tanda pipe kita kasih dan copy dan copy 2023 itu ya Coba kita lihat dulu refresh nah ini ada created by Santika Galih ada titiknya sengaja baru copyright 2023 oke itu dia html ya berikutnya kita kasih style ke atas dulu ini bukan di bagian media query ya nah ini dia di sini Dihapus dulu kita kasih apa ini footer ya kita tulis footer pertama kita kasih background dulu ya background colornya Saya pengen sama dengan far primer ya kita balik warnanya kita kasih teks lain center untuk semua tulisannya masih pending atas bawahnya satu rem kiri kanannya tak kasih margin topnya supaya nggak terlalu nempel 3 rem Oke berikutnya kita style bagian sosialnya jadi footer socials kita kasih padding aja satu rem atas bawahnya kiri kanannya 0 juga kita lihat dulu deh ini udah nih semua di tengah ada tulisannya dan ini masih gara-gara bodynya terlalu tinggi ya Jangan lupa dihapus Scroll ke atas body ini hapus Sudah saatnya dihapus Nah jadi nempel sekarang di bawah mantap balik lagi ke codingnya Scroll lagi lanjutin sekarang saya pengen semua iconnya jadi kita ke footer sosial a warnanya putih color fff kita kasih marginnya satu rem supaya ada jarak kiri kanannya nih lihat nih dari fresh Nah begini sudah terus saya pengen ketika di hover warnanya berubah jadi hitam jadi warna background lah Oke berarti kita bisa kasih gini puter sosial a hover itu color far BG ya kita lihat lagi Oke udah ya sip sekarang bagian menu ya kita ke footer links kita kasih juga colornya putih ya color fff Coba kita lihat dulu begini ya cuman kurang renggang nih sebenarnya kalau kita kasih padding ya padding atas bawahnya 0,7 rem kiri kanannya satu rem [Musik] Oke sip paling kita kasih margin bottom untuk linksnya jadi di atas sini aja kita kasih footer links pakai titik kita kasih margin bottom 2 rem ketinggiannya 1,4 Oke cukup Oh sama kita kasih hover juga jadi kita copy aja ini kasih koma ganti jadi links Oke sip terakhir bagian kreditnya kita kasih di sini footer kredit font saja kecil aja lah ya 0,8 rem kita kecilin sudah paling kita kasih Oh putarnya kita kasih padding deh puternya kasih padding bottomnya kasih berapa 3M supaya agak panjang nah gini cukup tinggal kita kasih footer kredit nah ini mau saya kasih warna hitam jadi color far minus minus BG hitam Bolt ya Kita kasih font white atau berapa kita punya Bolt kita lihat di sini 400 ya Kita kasih 400 gimana Oh 700 oke sip Jadi ini adalah footernya teman-teman Coba kita lihat responsifnya apakah sudah oke aman ya Jadi ini untuk responsifnya kayaknya cukup ya teman-teman ya ini bisa kita klik menu oke udah mantap kita coba cek lagi dari awal ya bagian home tentang kami menu kontak diputar juga bisa kita ke home bisa ya kita ke tentang kami sudah kita coba lagi ke kontak Sudah Ya nah tapi ini semuanya masih instan pindahnya sama ketika kita Klik di sini juga masih instan pindahnya tuh Nah kalau scrollnya pengen smooth kita tinggal tambahkan satu baris di CSS kita kita tambahkan di bagian html kita punya html belum belum ya kita tambahin html di sini kita kasih Scroll dengan menambahkan ini maka Scroll kita sekarang harusnya jadi nah tuh jadi gampang banget ya sama ketika kita klik dari sini oke itu dia website kedai kopi sederhana kita Oke teman-teman ya Jadi sekarang setelah kita sudah selesai membuat websitenya Ya tentu saja langkah berikutnya adalah kita pengen agar website kita bisa dilihat oleh orang lain kita akan lakukan beberapa cara ya Cara yang pertama adalah kita akan Simpan dulu kode kita ke sebuah repository digital terus nanti kita akan coba Bikin tahap kita itu menjadi gift supaya kita bisa langsung akses website kita Nah setelah itu baru kita akan coba simpan website kita ke sebuah web hosting nah ini tapi agak berbeda saya akan coba menggunakan otomasi dari gitar action ini jadi pasti keren banget nih teman-teman ya kita langsung coba aja Cara yang pertama jadi Tolong teman-teman disiapkan dulu account githubnya buat yang belum punya silakan buka github.com ya kita buka di sini buat yang belum punya accountnya silahkan Dibikin dulu ya Kebetulan saya sudah punya sebuah playlist yang menjelaskan tentang bagaimana cara menggunakan gate dan github Nah kalau udah punya teman-teman silahkan bikin repository baru ya caranya boleh dengan Klik tombol new di sebelah kiri ini atau kalau mau gampang teman-teman klik aja tanda tambah di atas kanan lalu kita pilih new repository jadi codingan kita nanti akan disimpan ke sebuah layanan yang namanya githup silahkan dipilih ownernya kalau misalkan teman-teman belum punya organization biasanya ownernya langsung username teman-teman masing-masing Setelah itu kita tulis nama repository kita ya Kita sesuaikan aja dengan nama website kita ya jadi Kedai Kopi apa tadi kenangan senja Ya silahkan teman-teman cari nama lain yang lebih bagus deskripsinya boleh diisi boleh nggak ya ini kode untuk Website Kedai Kopi ini optional ya dan untuk visibilitynya teman-teman boleh bikin kodenya itu public atau private kalau public itu bisa dilihat oleh orang lain tapi kalau private hanya bisa dilihat oleh account temen-temen dan orang-orang yang kita kasih akses saja Nah sekarang kita akan coba agar kode kita itu bentuknya private jadi nggak bisa dilihat oleh orang lain Nah dengan ini nanti akan membuat proses otomasi githup action kita itu semakin aman Ya jadi kasih private terus kayaknya setup di bawahnya itu enggak perlu kita lakukan jadi teman-teman Bisa langsung pilih aja create repository-nya klik Nah setelah ini berarti kita sudah punya tempat digit hub untuk menyimpan kode kita Nah sekarang langkah berikutnya adalah tinggal menghubungkan tempat ini dengan kode kita yang ada di komputer kita ya langkah-langkahnya sebetulnya udah ada di sini teman-teman bisa ikuti aja jadi kita harus punya dulu kodenya ya langkah ini bisa kita skip karena kita udah punya satu website lengkap bahkan ya bukan hanya satu file aja kita akan mulai dari sini lalu semua filenya Jadi bukan Redmi tapi kita bisa kasih titik nanti lalu kita komit kita buat branch baru kita hubungkan remotenya lalu kita push Oke Mari kita lakukan teman-teman silahkan dibuka kembali kode editornya kalau sudah dibuka Pastikan semuanya sudah di save terus pastikan juga sudah oke semuanya ya di sini Jadi udah aman cek dulu ya kalau sudah siap baru kita kembali ke sini save semuanya kita buka terminalnya teman-teman boleh ke view lalu Terminal atau ini shortcutnya control back tick ya yang seperti kutip di sebelah kiri angka 1 di keyboardnya atau boleh ke Terminal new terminal ya sama aja Saya biasanya pakai yang Terminal Nah di sini kita tinggal ketikkan perintah gatenya tadi yang pertama adalah gate ini atau kalau mau di copy paste juga boleh ya teman-teman Ya ketik ini terlalu pencet enter ini akan melakukan inisialisasi repositorigit di komputer kita terus berikutnya kita lakukan add ya kita lihat ke sini aja jadi add commit lalu branch Oke sekarang kita ketik Git at spasi lalu titik enter lalu kita tulis gate commit minus m spasi kutip kita tulis aja membuat website kedai kopi kenangan senja atau ada yang suka nulisnya inisial commit atau komit awal Silahkan aja ya kalau sudah pencet enter berikutnya adalah kita buat branch baru defaultnya branchnya namanya Master Sekarang kita akan ganti jadi main ya ini boleh teman-teman clear dulu supaya kita ketiknya bersih lagi sekarang kita ketik get branch minus m besar spasi Main Ya silahkan enter lalu berikutnya adalah menambahkan remote ke gigit kita nah ini boleh diketik ulang atau biar nggak salah kita copy aja ya blok terus Klik Kanan copy Klik Kanan ya kalau sudah enter terakhir kita tinggal ketik get push Min u Origin ya Jadi kita upload kode kita ke remote kita yang namanya Origin dengan branch-nya adalah man cara enter Nah sudah selesai Sekarang Harusnya kalau kita kembali ke github kode kita sudah ada di sini tuh kode kita sudah ada sekarang gimana caranya agar kode kita ini bisa diakses oleh orang lain nah sebenarnya kita bisa membuat yang namanya githup membuat codingan kita asal codingan kita adalah website statis Ya itu bisa diakses oleh orang lain nanti kita akan membuatkan sebuah url public-nya nah caranya adalah teman-teman bisa ke bagian settings di atas klik aja settings terus Scroll ke bawah sebelah kiri ada yang namanya PJS ya boleh diklik aja Nah di sini kita pilih build and diploymentnya kita bisa pilih di play from ebranch terus kita pilih brand saya mau yang mana kita pilih branch Kita yang main nah ini lalu kita tekan tombol save aja Nah kalau Anda kita bisa lihat itu website kita sekarang jadi bisa diakses ya dengan cara mengetikkan username di Tab kita titik github.io slash nama repository kita jadi repository kita itu kedai Des copy Des Kenangan dessenjata harusnya sudah bisa diakses teman-teman ini kita zoom in dulu nah ini Jadi websitenya teman-teman sudah bisa akses ini urlnya sip ya Jadi sekarang kita udah tahu gimana caranya bikin website kita live bisa diakses orang lain tapi dengan menggunakan gitar pages ini ada beberapa keterbatasan ya keterbatasannya itu kalau misalkan teman-teman mau nambahin database ke depannya misalnya databasenya MySQL Nah itu nggak bisa langsung begitu aja terus juga kalau misalkan teman-teman mau nambahin bahasa pemrograman seperti PHP gitu ya misalnya itu juga nggak bisa disimpan ke dalam kitab wedges nah kalau mau melakukan itu teman-teman butuh yang namanya web hosting yang tentu saja mendukung fitur-fitur tadi dan kali ini kita akan menggunakan layanan dari sponsor kita di video kali ini yaitu Niaga hoster teman-teman ya Jadi buat teman-teman yang belum tahu ya ini agak oster Itu adalah sebuah layanan penyedia jasa hosting terbaik di Indonesia yang memiliki fitur yang sangat banyak ya teman-teman di sini bisa beli unlimited hosting Claude hosting WordPress hosting sampai dengan email penting tapi selain itu juga teman-teman bisa beli vps domain dan juga layanan website ya tapi untuk Project kita kali ini rasanya cukup jika kita itu menggunakan layanan unlimited hosting ya kalau teman-teman Klik nanti teman-teman bisa lihat di sini fitur-fitur yang ditawarkan oleh Niaga hoster ya paket hosting apa saja ada paket hosting yang namanya bayi pelajar personal dan juga bisnis teman-teman bisa lihat di bawah sini fitur lengkapnya Ada apa saja ya silakan dibandingkan tapi kalau menurut saya itu paket yang paling cocok buat kita adalah paket personal ya Selain fiturnya lengkap diskonnya juga sangat besar ya saat ini ada diskon sampai dengan 79% Nah kalau teman-teman beli paketnya langsung selama 3 tahun ya tapi rasanya kalaupun teman-teman memilih yang satu tahun itu sudah cukup dan harganya juga sudah cukup oke Ya ini kalau 3 tahun teman-teman yang harusnya bayar tiga setengah juta itu teman-teman cukup bayar 750 ribuan aja kalau misalnya satu tahun Coba kita ubah nih kalau satu tahun kita yang harusnya bayar rp1,3 hanya cukup bayar 400ribuan aja Jadi sebenarnya beda 300.000 tapi teman-teman dapatnya 3 tahun ya Nah Tapi nggak papa kalau mau yang satu tahun ya teman-teman bisa lihat di sini kita dapat apa aja ya yang pertama kita dapat domain ya gratis domain tapi domainnya juga ada syaratnya biasanya domain yang gratis itu.com atau.co.id ya kalau misalkan teman-teman pengen domain yang lain misalnya.id Nah itu tetep harus membayar harga domainnya tapi kalau misalkan.com sekali lagi itu udah masuk ke dalam paketnya jadi nanti silakan dimasukkan saja Nama domainnya misalnya tadi kedai kopi atau langsung aja ya kenangan senja.com Nah pertama kita cek dulu apakah Nama domainnya itu ada apa enggak Kalau misalnya belum ada yang pakai nah kita langsung bisa pakai nih harusnya bayar 119.000 sekarang bayarnya nol alias gratis ya tinggal klik tambahkan ke card Nanti kalau sudah kita masuk ke sini kalau misalkan teman-teman mau pakai WordPress langsung aja klik auto install kalau teman-teman mau langsung nambahin SSL supaya dapat https ini juga langsung tambahin aja tapi kalau enggak teman-teman bisa langsung klik lanjutkan aja nah habis ini masuk ke bagian metode pembayaran Tapi sebelum check out nah ini teman-teman kalau mau dapetin diskon lagi sebesar 10% di sini kita bisa masukin kode kuponnya WP Unpas jadi yang tadinya kita udah dapat diskon 68% dengan total bayar 464 kalau kita klik gunakan Maka nanti akan dapat lagi diskon jadi teman-teman cukup bayar 420 ribuan lah Ya lumayan banget gitu Jadi silakan digunakan kode kuponnya WP Unpas kalau mau dapetin diskon Habis itu teman-teman tinggal langsung klik tombol check out-nya dan pilih metode pembayaran yang sangat banyak ini tuh jadi itu caranya kalau teman-teman mau dapetin web hosting menggunakan niagaster Nah kalau teman-teman udah punya web hostingnya di Niaga nanti teman-teman bisa login jadi Punya menu ke member area Nah di sini kita akan coba upload website kita ya klik aja tombol member areanya Nanti diarahkan ke bagian dashboard nah kebetulan Sekarang saya sudah punya website unlimited hostingnya paket personal selama 1 tahun tapi tadi Bedanya saya nggak pakai domain yang gratis saya beli domain Sandika gali.id ya Ini juga murah sekitar 100 ribuan ya untuk langsung ditambahkan ke website saya jadi saya enggak mau pakai.com tapi saya maunya pakai.id Nah dari sini kalau kita mau cek website-nya itu pertama-tama itu kita akan dikasih halaman awal ya Nanti kalau teman-teman datang tampilannya gini default-nya Selamat datang di website Anda ini belum ada isinya nanti halaman ini kita ganti nah cara gantinya itu kita bisa Klik aja tombol kelola hosting di sini kalau udah masuk ke dalam dashboardnya nanti kita akan diarahkan ke sebuah dashboard yang namanya si panel nah ini si panel di sini kita bisa melakukan banyak hal kalau teman-teman mau nambahin account email ya Jadi ada emailnya sendiri tuh sesuai dengan Nama domainnya kalau teman-teman mau mengelola WordPress mengelola database subdomain dan masih banyak lagi ya bahkan kalau misalnya kita mau dari fitur-fitur yang sering digunakan ini kita bisa cek lagi all features ini kita akan benar-benar dibawa ke dashboard si panelnya kalau tadi dashboard-nya terintegrasi dengan Niaga hoster kalau ini kita langsung benar-benar diarahkan ke si panel ini semua fitur bisa kita akses tapi yang penting di sini adalah bagian file managernya saja Nah di sinilah kalau di klik ya kita akan diarahkan ke file manager tempat kita bisa menyimpan website nah sebenarnya cara gampang untuk mengupload website kita lewat si panel itu kita tinggal masuk aja ke folder public html teman-teman klik dua kali tadi folder public html itu kita akan dikasih beberapa file dan folder Nah inilah file dan folder yang bertanggung jawab menampilkan halaman ini jadi kalau kita mau ganti halaman ini teman-teman tinggal ganti aja file di sini nih contohnya ya kalau misalnya saya bikin sebuah folder misalnya di sini atau saya pindahkan D3 buah folder ini saya pindahkan dulu ke folder TMP saya keluarin ya caranya tinggal select all aja terus temen-temen klik move di sini kita pindahin ke root-nya slash TMP supaya pindah Nah sekarang kosong folder public htmlnya isinya masuk ke sini tuh ada ya kita Biarkan saja di situ sekarang Coba kita bikin file baru ya kita bikin filenya manual aja dengan cara ngeklik menu file di atas kiri ya terus kita bikin aja file namanya index titik html kita bisa pakai html kita bisa pakai PHP karena servernya support bahasa PHP nah terus kalau sudah jadi file-nya sekarang kita buka dengan cara Klik Kanan lalu kita pilih edit atau html edit ya kalau kita klik edit nanti kita akan diarahkan di sini misalnya saya mau bikin tulisan hello world gini ya Terus kita klik aja save Nanti kalau sudah di save ya ini boleh di close aja sekarang kalau kita kembali ke website kita terus kita refresh Ya refreshnya sambil ngebersihin case-nya teman-teman bisa Klik aja control shift R Nah lihat sekarang kita udah punya website kita ada tulisan Hello worldnya gitu ya itu kalau bikinnya manual teman-teman bisa upload coding-an yang udah dibikin di komputernya biasanya caranya di zip dulu terus di upload nah tapi cara ini tidak akan kita lakukan sekali lagi kita akan melakukan yang namanya automation kita udah punya kode digit hub kita udah punya web hosting nah gimana caranya agar otomatis setiap kita selesai melakukan coding di komputer kita lalu kita melakukan push kode kita ke github maka otomatis hosting kita juga ter-update kan enak ya jadi nggak perlu melakukan update secara manual menggunakan File Manager seperti ini Oke gimana caranya Mari kita coba ini boleh kita close dulu kita kembali ke si panelnya jadi cara pertama adalah kita harus punya account FTP dulu di dalam web hostingnya Oke sehingga nanti di tahap kita akan berkomunikasi dengan web hosting menggunakan FTP file transfer protokol Ya teman-teman cari dashboardnya itu di bawah di bagian tools ada files Lalu ada FTP accounts kalau di dashboard yang terintegrasi itu Kebetulan nggak ada jadi memang kita harus masuk dulu ke all features masuk ke dashboard lalu cari aja FTP account atau kalau mau gampang kita bisa search di sini pencet aja tombol flash supaya mengaktifkan search-nya ketik aja FTP nah ini ada FTP account sama aja ya kalau kita Klik nanti diarahkan masuk ke menu ftp-nya di sini kita tinggal bikin data ftp-nya yang pertama kita mau bikin username-nya dulu ya username untuk loginnya misalnya saya mau kasih nama username-nya sesuai dengan nama Kedai Kita ya kenangan senja silakan aja kalian tulis username-nya bebas mau nama kalian boleh atau mau username Kalian juga boleh terus isi passwordnya ya simpan passwordnya nanti baik-baik supaya enggak ribet gimana kalau saya generate aja ya Saya klik password generator saya pilih password saya generate aja saya pilih password yang kira-kira Oke ini udah ketemu ya jangan lupa di copy biasanya saya buka dulu Notepad terus saya simpan di Notepad ya saya simpan di sini silahkan kalian simpan juga nah tapi nanti ini accountnya Akan saya hapus jadi temen-temen juga nggak bisa coba login pakai account FTP saya simpan passwordnya jangan lupa juga simpan username nya ya biar enggak lupa di sini kenangan senja @sandika galih.id Nama domainnya ya ada di sini ini jangan lupa kita klik I have copy Terus see you password ya Ini username-nya tadi Passwordnya udah sip Nah ini hati-hati direktorinya itu kita nggak akan simpan di folder ini kita akan Simpannya langsung di nama usernya jadi ini enggak perlu teman-teman boleh hapus aja public html slash nama dari usernya atau nama websitenya silahkan pindahkan kalau sudah langsung aja create FTP ini juga jangan lupa di copy-in ya biar enggak lupa taruh sini aja simpan baik-baik kalau sudah klik create FTP account itu yang pertama harus dilakukan kita siapin di web hostingnya dulu account FTP berikutnya kita akan pindah ke github ya supaya githup bisa tahu konfigurasi dari web hosting yang baru saja kita lakukan Silahkan teman-teman buka githupnya masuk ke repositorynya ya ini kan tadi kita lagi ada di bagian settings anggap aja teman-teman udah masuk ke repositorynya ke sini yang harus kita lakukan sekarang adalah kita harus set up yang namanya Secret di dalam settingnya Nah nanti secretnya akan berisi konfigurasi web hosting kita ya Jadi teman-teman silakan ke menu settings lagi lalu di sebelah kiri Scroll kita ke bagian Secret tuh ada ya klik Secret di situ terus kita pilih actions Nah di sini kita akan pilih new repository Secret kita akan kasih tahu Secret baru yang berisi konfigurasi web hostingnya ya Ada tiga yang harus kita setup yang pertama itu kita kasih aja namanya ftp_server nah ini untuk ngasih tahu server FTP mana yang akan kita hubungkan secretnya itu teman-teman boleh tulis FTP Nama domainnya Ya saya punya tadi Sandika gali.id sesuaikan dengan Nama domainnya masing-masing lalu klik add Secret itu yang pertama ya berikutnya kita bikin baru new repository Secret lagi berikutnya adalah username FTP underscore username username nya adalah tadi ya kenangan senja @sandika galih.id oke klik add Secret dan terakhir adalah password ya FTP underscore password nah Secret ini tidak bisa dilihat oleh orang lain Meskipun orang lain dapetin kode kita ya password itu diisi dengan password yang udah kita copy tadi ya ini silahkan di copy aja masukin ke sini terus klik add Secret Oke kita udah punya tiga berikutnya apa nih berikutnya adalah kita harus setup action ya teman-teman boleh klik aja menu action di atas actions ini digunakan untuk melakukan otomasi otomasi pada repository kita ya kalau teman-teman masuk lihat Scroll ke bawah ini banyak konfigurasi otomasi untuk teknologi-teknologi yang kita gunakan tapi kayaknya kita nggak akan pakai teknologi yang ada di sini ya kita akan set up Award flow yourself ya kita akan mulai setup dari awal ya teman-teman bisa Klik aja nanti di sini akan diarahkan ke pembuatan file yml file untuk konfigurasi ya Nah ini file ini kita akan isi Dengan apa kita akan gunakan sebuah template yang udah ada disediakan oleh seorang user lengkap ya Nah caranya itu bisa dengan mencari di Tab search di atas ini teman-teman ya Atau teman-teman bisa Klik aja di bagian marketplace yang ada di sebelah kanan ya nama scriptnya itu adalah FTP diploy action nah ini yang dibuat oleh user githup yang namanya samker Clan ya Kalau cari di sini juga bisa FTV diploy action nanti muncul Ya nah tapi kalau kita Carinya di sini begitu kita Klik nanti kita bisa lihat langsung scriptnya Walaupun memang script yang ini juga bukan script yang kita butuhin karena ini hanya snipednya aja kita butuh script yang lebih lengkap nah script yang lebih lengkap ini kalian bisa ini kita bisa Klik aja view full marketplace listingnya ya kalau kita Klik nanti kita akan dibukakan halaman official dokumentasinya kalau kita Scroll ke bawah nah ini dia contoh dari script untuk githup actionnya jadi ini work flow agar kita bisa langsung otomatis melakukan diploy dari github ke web hosting kita selama kita sudah set ftp-nya dan juga set secretnya karena di sini nanti kita butuh Secret untuk password username dan juga server ya kalau sudah terbuka teman-teman boleh klik aja tombol copy di sini lalu kita simpan ke dalam script kita Oke sekarang Yang perlu kita lakukan adalah kita isi ketiga nilai di sini ya teman-teman boleh copy aja Caranya dengan mengambil variabel Secret itu kayak gini ya dollar burung kurawal kurung kurawal sikris titik Lalu nama secretnya nah ini untuk server namanya itu ftp_server seperti yang kita buat persis ya yang pertama yang kedua ini kita page lagi ya di sini ini adalah FTP username dan yang terakhir ini password karena kita bikinnya tadi variabelnya huruf besar ini kita ganti aja huruf besarnya FTP password kalau sudah ini kita harus lakukan komit ke dalam repositori kita ya teman-teman boleh klik aja tombol Start commit yang ada di atas kanan sini lalu Klik tombol komit new file ya pesan komitnya kita Biarkan di fold aja Nah sekarang file konfigurasinya sudah ada di dalam githup kita nah tapi ingat kode kita yang ada di lokal di komputer kita itu belum tahu kalau ada perubahan ini jadi kita harus tarik dulu kita harus full dulu kodenya dari kitab ke komputer kita ya caranya gampang aja teman-teman silakan kembali Buka kode editornya buka kodenya lagi buka terminalnya Sudah lalu kita ketikkan get full ini akan menarik kode konfigurasinya Nah itu ya Jadi sekarang kita udah punya konfigurasinya setelah ini gimana setelah ini sebenarnya udah selesai jadi saat kita lakukan push berikutnya itu akan melakukan dua hal sekarang githamnya akan melakukan diploy ke gift kita yang sudah kita buat tadi digital Terus yang kedua akan secara otomatis ngepush ke web hosting kita lewat FTP jadi ini keren banget nih ya kita langsung coba aja kalau sekarang kita lakukan push itu nggak akan ada perubahan ya karena codingan kita nggak berubah sama dengan yang ada di github supaya ada perubahan gimana kalau kita ganti aja judulnya lah ya yang tadinya kopi kenangan senja jadi kedai kopi kenangan senja ya Kita kasih perubahan dulu terus di terminalnya kita clear dulu kita lakukan gitar spasi titik Lalu get commit minus m m nya itu message pesan kometnya apa misalnya mengubah judul website ya ini pesannya karena kita baru saja mengubah copy kenangan senja jadi kedai kopi kenangan senja Kalau sudah tinggal kita Git push ya lalu enter aja nanti kodenya akan dipus ke github lalu secara otomatis tahapnya melakukan deploy kedua tempat Mari kita lihat sekarang kita kembali ke githubnya teman-teman masuk ke bagian actions Nah lihat nih ada dua hal yang sedang dikerjakan ya in progress yang pertama page build and diployment ke git HP Jazz Terus yang kedua ini yang kita buat tadi mengupload ke web hosting kita ya Jadi kalau sudah selesai kita akan lihat bahwa di kita ya kalau kita kasih flash kenangan senja sekarang sudah ada website kita dan lihat judulnya kedai kopi kenangan senja sekarang kalau kita lihat digit HP Jazz nya ini masih kopi kenangan senja belum saya refresh sekarang kita Refresh dulu sekarang sudah kedai kopi kenangan senja Ya jadi keren banget satu kali push kita bisa menyimpan kedua server sekaligus ya kalau kita lakukan perubahan misalnya kita balikin lagi deh ya judulnya teman-teman bisa lakukan perubahan apapun ya kita save terus kita lakukan hal yang tadi ya kita clear dulu kita get add titik get commit - m pesannya adalah mengembalikan judul website gitu ya enter lalu kita ketik lagi Git push oke Sudah dipus ya kita akan lihat sekali lagi biar yakin kita refresh halaman actionnya Nah lihat tuh ada dua hal lagi yang dikerjakan silahkan ini ditunggu aja sampai proses perubahan ke web hostingnya sudah selesai Oke teman-teman jadi itu tadi ya akhir dari pembuatan website kedai kopi sederhana kita Ya silahkan teman-teman boleh modifikasi sesuai keinginan supaya jadi lebih keren lagi jangan lupa pamerin hasilnya lewat sosial media teman-teman boleh tag ke saya boleh di Instagram boleh di tiktok atau boleh kirimkan di discord kita ya supaya saya dan teman-teman yang lain juga bisa lihat hasil karya dari teman-teman semua silahkan juga ditambahkan fitur-fitur lain supaya lebih keren lagi ya Boleh silahkan dijalanin tuh fitur searchingnya fitur shopping card-nya boleh tambahin back and supaya bisa nambahin menu kopinya jalanin juga fitur forum kontaknya supaya orang lain bisa langsung mengirimkan pesan ke kedai kopinya oke teman-teman ya Tapi sebelum saya akhiri kembali saya ucapin Terima kasih lagi kepada niagahoster yang udah sponsorin video kali ini Jadi kalau misalkan teman-teman saat ini lagi butuh web hosting untuk menyimpan website teman-teman Ya baik itu website sederhana seperti yang kita buat kali ini ataupun website yang kompleks ya punya background punya front and punya database dibikin pakai bahasa PHP no CS misalnya jangan ragu untuk menggunakan layanan Niaga hoster sebagai penyedia hosting kalian ya karena saat ini Niaga user lagi ada diskon yang cukup besar untuk setiap pembelian mempostingnya dan Ingat kalian juga bisa masukkan kode kuponnya WP Unpas saat kalian checkout supaya kalian dapetin Diskon tambahan lagi sebesar 10%. Jadi silakan dimanfaatkan teman-teman oke ya Jadi mungkin itu aja episode mobar kita kali ini yang cukup panjang menurut saya mudah-mudahan teman-teman masih betah nontonnya sampai akhir ini kita bakalan ketemu lagi di ngoding bareng episode berikutnya yang pasti lebih seru lagi mudah-mudahan videonya bermanfaat saya Santika kali pamit dan seperti biasa teman-teman jangan lupa titik koma [Musik]