Halo cuy, jadi di video kali ini kita akan membuat hal yang seperti ini Pertama ada navigation bar, buat kalian yang belum pernah bikin website Gue jamin bisa banget bikin website dari nol ngikutin gue kali ini Biar bisa jadi yang kayak beginian Profile pribadi sendiri, masing-masing apa namanya nih Standar gitu ya, tapi nikmat lah intinya mah Cuman pake HTML CSS, tapi semua orang bisa melakukannya Bahkan non-IT pun, ataupun yang gak sekolah pun bisa juga Anak SD juga bisa harusnya Klik jasa itu bakal scroll ke bawah kayak gini Terus ini ada card, ini ada foto yang kayak terbang gitu, kebuka gitu ya. Syung, kayak begitu. Terus ada footer dan segala macem.
Kalau klik mari kerjasama dia akan pindah ke WhatsApp. Langsung ngechat ke nomor WhatsAppnya. Kalau kita klik follow dia langsung ke Instagram.
Instagram gue nih ya. Nah, terus kalau kita klik kontak dia bakal ngebuka email. Terus kalau kita geser mouse-nya ke sini dia akan agak gejet kayak gitu tuh.
Kayak gitu-gitu. Dan kalau kita versi mobile. Kita buka versi iPhone.
Dia tampilannya menjadi seperti ini. Kalian perhatikan. D-nya ada di sini. Ini di sini.
Kayak gini. Cukup mantap responsif dalam waktu berapa jam ini? 2 jam aja ya kalian bisa bikin website ini.
Dan perhatikan ini jasa dan kontak jadi ada di bawah. Yang mana tadinya kan dia tuh ada di atas ya. Kalau kalian lihat. Nih.
Tadinya kan di atas bro. Nah di atas ini jasa kontak Tapi pas versi mobile Dia akan pindah ke bawah sini Dan ini footernya Dan di atasnya jadi kayak gini Ini versi desktop, ini versi mobile Dalam waktu 2 jam kalian bisa bikin yang kayak beginian Kalau ngikutin dengan baik, disiplin, dan saksama bro ya Jadi kita langsung mulai aja Masuk ke videonya, tapi sebelum itu gue info juga bahwa Ini website sekaligus juga sampai di ending nanti itu Kita deploy ya, deploy itu kurang lebih Nge-publish website ini ke internet Yang mana kalian bisa share linknya Ke temen-temen kalian, dan disini gue udah punya linknya Ada 2 biji, ini hasil Tadi selama kita record ya bro Ada 2 biji gue deploy ke Replit, 1 yang paling mudah Dan gratis, dan kalian pun dibimbing nanti Sama gue di akhir video untuk bisa Nge-upload gitu ya, plus 1 lagi Ke Vercel disini, jadi Intinya Oke gas aja ke tutorialnya langsung sekarang kita cuma pake html, css, dan javascript sedikit aja plus disini tidak pake software aneh-aneh kalian semua bisa download softwarenya gratis sama cuma pake notepad plus-plus doang yang biasa dibully sama programmer-programmer lainnya gitu tapi intinya kalo belajar mah apapun yang penting gas gitu ya ini PC kentang juga bisa pake software gini-ginian mah yang penting bisa loading gas kuy kita ke tutorialnya langsung sekarang kuy hey halo berjumpa lagi dengan gue dan kali ini kalian akan membuat satu website per Pertama mungkin ya buat kalian yang belum pernah bikin website. Kalian bisa mengikuti tutorial ini dari nol banget. Pakai yang namanya HTML dan CSS doang.
Dan gue jamin lu yang bukan di ranah IT pun bakal bisa bikin website sampai jadi. Dan sampai dipublish ke internet dan bisa di-share ke temen-temen kalian. Milih kalian pribadi bro ya. Jadi sekarang siapin aja ikutin. Yang pertama mesti kita punya.
Sumber gambarnya Disini gue udah punya foto gue sendiri Ini ada 2 biji ya Ini Satu Dan satu lagi yang Ini Ya jelek banget Gak apa-apa Itu Ya di folder foto Di desktop gue Dan satu lagi icon Ini Mungkin ini bakal gue taruh di deskripsi juga Kalau kalian gak punya sumber gambar Gambar ini bakal gue simpen di deskripsi Dan kalian bisa download dulu Sampai nanti punya Yang icon dan fotonya disini Untuk kelengkapan Supaya Websitenya menarik lah Kurang lebih gitu ya Terus kita bikin folder aja disini untuk mulai nge-loading Klik kanan, new folder, kita bikin namanya misalnya web pertama gitu Boleh kali web pertama Terus kita masukin icon ini kesini, tarik Ini juga tarik Terus buka ini Ini kan kayak gini nih, foto dan ikon Kita bikin satu folder baru disini Kasih nama asset, pake S Hai hey lo enter ada tukang baso Sorry kalau kedengeran ya nggak papa ini kan gua recordnya sore-sore banyak tukang baso ini gue di dalam aset ya Bro jadi kurang lebih kan tadi kayak gini kita bikin folder aset dan foto ini ada yang tadi terus icon itu ada ada yang tadi juga tapi di dalam aset itu masih kosong maka di dalam aset kita kosongkan dan kedua ini kita blok tarik masukin ke aset sini sampai di dalam folder web pertama itu isinya cuma folder aset doang kayak gini Alright, kalau udah kayak gini, gue akan ngoding pake text editor yang tidak biasa gue pake gitu. Jadi mungkin buat yang masih pertama kali ngoding cukup bingung mengenai text editor tuh kayak gimana ada yang installnya error dan segala macem. Jadi disini gue bakal coba download text editornya biar sama-sama bareng-bareng dari nol ya.
Gue pake yang paling standar dan basic untuk ngoding ketika pertama kali belajar namanya Notepad++ ya. Tapi kalau lagi, eh sorry. udah jadi programmer, terus lo masih pake notepad plus-plus, biasanya dibully bro, tapi gapapa lah ya, yang penting kan kita kan bisa belajar gitu Itu bareng-bareng sama-sama install dari nol Ini pokoknya kayak gini dulu Sekarang kita ke browser Lo download yang namanya download notepad plus plus kayak gini For Windows, terserah Windows berapa lo Windows 7 juga bisa Windows 10, Windows berapa juga bisa Nih enter langsung gue klik yang ini Terus download aja terserah lo yang mana Gue yang paling atas deh Ini Nah ini klik downloadnya Peret kan langsung nih naik ke atas kita ngoding sini aja deh gue biasanya pakai VS Code kalau VS Code kan agak-agak bingung buat pemula gitu ya ini kalau udah di open aja terus yes ini oke ini next I agree next lagi Oke lagi Create desktop Boleh install Ini dicentang aja ya Biar ada di desktop Install Tungguin Run Finish Checklistnya biarin Kebuka kayak gini Ya Kebuka kayak ini, ini tutup Spread, simpen minimize dulu Ini close Ini close Ada disini Udah ya, tadi pun masih ada juga Ini yang bekas tadi di running Sekarang kita bikin satu file baru Disini Di Mana disini Kita bisa Where Open folder aja Open folder, klik open Pergi ke file desktop tadi ya cari aja desktop terus yang tadi tuh web pertama ini terus asset eh enggak, gak usah masuk asset ini web pertama disini aja ya gak usah di klik assetnya klik open wow bangsat memang kenapa kayak gitu ini udah open folder pak gue open ulangi lagi sepertinya bukan folder deh file open containing folder Open folder as a work page Yang mana ya? Gue gak pernah pake ini Nah ini aja ya Klik yang ini Oke Dicari yang desktop tadi Ke desktop Web pertama Klik web pertamanya Select folder Itu dia Nanti bakal ada urutan kayak begini ya Nih ada urutannya Ini bisa zoom in gak sih? kok gak bisa zoom in sih?
view, view, setting, setting preference ntar gue zoom in dulu ya zoom in, gue gak pernah pake ini bro, mohon maaf, tapi ini paling gampang katanya gitu kan kalo pas pertama kali belajar ngoding ini paling gampang Anjing settingannya di mana? Bisa di gini? Gue kok gak bisa gede ya? View Ada view-nya Setting language View Nah ini nih Folder as a workspace Word wrap Tab zoom Nah ini Control Plus 6 plus Zoom in Anjir Gak ngaruh anjir Zoom Cuk Sampai nelen ludah gue Yaudah lah, gak apa-apa gini Intinya ini ada web pertama sebelah sini Ini ada asset yang tadi kita Lalu disini kita bikin satu file baru Klik aja yang ini New Low, low, low, low, low Atau langsung gini aja deh Anjing Sorry ya ribet juga Tapi kan intinya sama ini udah kebuka Ini klik kanan aja terus lo save as Yang new ini kan tadi terbuka nih Atau kalo misalnya lo tutup Kan gak bisa tuh Ini save as aja Save as cari di folder desktop tadi Masuk ke web pertama Disini Ini kan.txt lo ganti nih Ganti jadi index.html Jangan pake spasi Jangan pake apa-apa ya bro ya Save Save Udah, masuk sini index.html Oke Kita coba bikin pertama disini Ketik aja kayak gini HTML Terus sini tutup HTML Gak bisa zoom apa ini Gue takutnya kalian gak pada liat Alah anjing ini mah mesti di zoom dulu Tunggu ya Zoom in View Hai zoom view zoom in view zoom into pencet kontrol plus 6 plus gua nggak ada namanya masalahnya Pak ya gua manual aja deh gini enggak papa shred shred sampai kelihatan gede bet shred shred cukup kali segini ya Oke HTML terus di sini ada head tutup lagi headnya Hai kayak gitu ya tulisannya di sini ada body urutannya gini per body nah apa yang ada di dalam body itu adalah kodingan kita masukin coba disini hasil testing sini tutup A1 Oke terus disini kasih di dalam head ya sini nih pencet tab ya pencet tab Hai title web pertama tutup titelnya Oke kontrol es untuk save atau file save biasa tak ini ya kontrol es udah kalau udah kita Klik Kanan buka Hai buka eh buka ke folder yang tadi ada index.tml seperti ini Klik Kanan open with browser Google Chrome atau apa terserah kalian gua pakai Microsoft Edge kalau lu pakai Chrome yang buka lewat Chrome gua pakai Edge buka muncul kayak gini testing satu udah berhasil ya maka kita langsung sketching tapi sebelumnya gua copy dulu ya hai hai Kita langsung sketching untuk membuat navigation bar-nya dulu.
Membuat navigation bar. Ini kalau buat yang udah bisa yaudah lu skip. Yang sebelah sininya lu skip aja dulu. Ntar lu pindah ke yang menit-menit berapa gitu yang udah dalemnya ya. Ini gue gak tau akan berapa jam juga videonya.
Yang pertama. Aduh gue gak biasa banget nih pake Notepad++. Gak apa-apa.
Kita bikin satu file lagi. Untuk styling si HTML-nya ini ya. Disini klik aja new file lagi. Terus lu...
Ctrl S atau klik kanan Save S Atau rename juga bisa Save S aja deh Biar aman Masih disini di web pertama aset Di luar aset ini ya Kasih nama style.css Gak pake spasi gak pake apa-apa Save Muncul site CSS index.html Ini index.html udah Maka sekarang kita koneksikan Dari HTML ke CSS atau dari CSS ke HTML Di bawah title sini Lo ketik yang namanya link rel sama dengan Pake apa tuh namanya tuh String gitu kutip gitu ya Kutip gitu tuh namanya Quads kalo gak salah bahasa inggrisnya ya lupa gue Style sheet Terus disini ref Ref itu untuk nge-linknya kemana Disini nama filenya style.css Jadi langsung ketik style.css Langsung pake slash dan tutup Ini format awalnya kayak gini Right Terus Kalau tadi kita lihat website-nya kan seperti ini ya Kalau kita refresh ini klik Masih kayak gini juga Sekarang kita coba style dulu H1-nya untuk testing stylenya fungsi atau enggak Caranya H1 Kurawa Tutup kurawal Disini kasih misalnya Color Warnanya misalnya blue Save Ini ya Bahasa Inggris aja standar Cek website Refresh Berubah jadi biru Berubah ya Berarti berfungsi, sekarang kita gas bikin navigation bar Navigation bar seperti yang Biasa ada di website Caranya di index.html Kita bikin dulu di bagian body sini Ini H1 hapus Disini kita bikin yang namanya Header Enter, tutup Slash header Kayak gini, pokoknya spasi itu Berpengaruh, terus tanda-tanda sesuatu Itu berpengaruh harus sama ya, jangan aneh-aneh Eh sorry ini header, jadi harus sama Aturan sama ini Nah ini adalah bahwa kalau modding itu kan mainannya blok-blokan ya. Ini body, ini blok, ini blok, ini header, satu blok ya. Ini header berarti isi di dalam header itu adalah sesuatunya.
Ini body tutupnya di sini berarti isi body adalah si header gitu ya. Ini head berarti isi head adalah ini dua biji karena headnya ditutup di sini. Ini HTML, isi HTML adalah ada head, ada body.
Dan di dalam body ada header, di dalam head ada title dan ada link kurang lebih kayak gitu. Blok-blokan. Tapi nggak usah dipikirin, intinya modding dulu. Nanti juga ngerti sendiri gitu bro Ya sekarang kita bikin Disini H1 baru nih disini H1 Logo kita misalnya Ketik aja logo gini Tutup H1 nya H1 tuh heading ya Gue anggap aja lu udah ngerti dan Kalo lu gak tau sintaksnya apa aja gak apa-apa ikutin lama-lama Kelamaan pun Lama-lama kelamaan Lama-kelamaan pun akan tau sendiri sintaks-sintaksnya tuh apa aja Terus disini ketik aja UL Atau NAV NAV dulu ya boleh ya untuk navigation bar, terus tutup nav di dalam nav ini kita pencet tab ada ul disini terus enter lagi ul nya tutup begitu di dalam di tengah-tengah ul ini ada yang namanya li, kita tab lagi li di dalam li sini kita tutup li sorry, begini di dalam li ini ada a ref sama dengan quads pager, tutup a nya Tutup lagi A nya disini Slash A Nah urutannya seperti ini UL LI A Jadi ini nested ya Sebutannya kalau di programmer Atau di programming itu disebutnya nested NAV UL LI A Itu aturan biasa Memain navigation bar Di sedalam dalam sebuah website, paling basic tuh biasanya kayak gini ini paling basic ya, jadi jangan kaget buat yang baru ngoding ikutin aja bro, santuy lalu ini di dalam A sini kita isi isian kontennya tuh apa?
taruh lah disini adalah about standar, biasa terus kita copy ke bawah ini dikopas aja ctrl c enter segini li nya gitu ya li itu list artinya bro terus udah about biasanya ada apa namanya profile atau skill atau Hai apa ya apa ya biasanya kelebihan atau atau pribadi atau apa sih ya udahlah gini aja dulu misalnya disini kontak about kontak satu lagi di sini misalnya kita kopas lagi ya copy kontrol ctrl V kalau enggak rapih taruh sini kursor pencet tab maka dia ketengah semuanya sama kata ini about kontak udah dan disini misalnya eh tentang tentang about kontak paling standar ya sudah kayak gini cek lagi browsernya jangan lupa di save ctrl s cek browser masih gini refresh menjadi seperti ini jelek kita tambahkan satu tombol nanti kita styling tenang saja tambahkan satu tombol di di bawah nafsi nih button gitu ya tutup slash button tutup tutup Disininya misalnya Apa ya Follow Follow saya Oke kalau udah kayak gini lu save Ctrl S terus lu reload lagi Maka ada follow saya disini Masih jelek kita styling Disinilah menariknya bro Masuk ke Ini header ini H1 ini nav ini ul Oke kita masuk ke style CSS S Hai ini hapus yang bekas tadi sekarang kita bikin header sini ketiknya gitu kurung kurawal tutup kita kasih backgroundnya nah sini udah punya panduan warna nih ada beberapa warna hex buat kalian belum tahu kalau ada pagar itu artinya hex ini artinya warna biru ini gelap purple gelap ini orange gelap dan segala macem gelap gua pengen pakai yang blue gelap ini ini di copy nanti ada deskripsi atau kalian ketik manual Tempel sini, pake titik koma Save Cek lagi ke browser, ada perubahan warna di headernya atau tidak Cek, refresh Ada ya Gak jeblak jelek ya terus di header kita kasih dia supaya pada warna putih biar kelihatan kita kasih disini color sorry disini color kasih aja pakai pagar warna basicnya eaea gitu ya aturannya hex itu 6 digit 5 Huruf, 6 huruf, atau 3 juga bisa 3 huruf, 6 huruf bisa, tapi 3 huruf itu kalau sama, eh gimana ya, kalau 3 huruf itu, ah ya sama aja sih, tapi kalau gue biasanya 6, bisa juga 3 sebenarnya gitu, tapi intinya gini aja Jadi kalau udah dibikin color dan background, background itu belakangnya, kalau color itu frontnya alias tampilan depannya, maka dia berwarna putih yang tadinya. Ini hitam kalau kita refresh. Putih. Tapi ini kenapa masih biru?
Dia karena ada di dalam li. Jadi kita mesti masuk ke dalam li-nya. Lihat lagi di codingan.
Yang masih biru itu warna ini ya. Si tentang, si about, dan si kontak karena dia ada di dalam A ini. Maka A ini mesti kita ubah menjadi warna putih dengan cara A-nya taruh di sini. Gini. Kurawa lagi.
Seperti biasa aturannya kayak gitu terus. Ubah color-nya jadi white. Atau jadi EA-EA lagi deh.
Save. Nah, segini ya. Refresh Jadi putih tapi ada underscore dan ada buletnya Kita ilangkan dulu underscorenya Di A kita ilangkan Pake strip Strip decoration Titik 2 non Koma Ini titik 2 spasi Non titik koma Kalo kalian error pokoknya perhatikan codingannya harus disiplin Dan harus bener-bener Apa disebutnya teh Teliti gitu kalo coding itu harus sangat-sangat teliti Salah dikit mampus Capek Nyarinya capek errornya Sekarang kita refresh lagi Tadinya masih ada underscore Sekarang di refresh jadi hilang Ya karena Text decoration itu masuknya tuh Yang underscore tadi itu dekorasi dari sebuah text yang ada kan Maka kita hilangkan Dan automatic ada kalau kita pakai Element HTML yang A ini Gitu bro Ya So sekarang Tugas kita berikutnya adalah Menghilangkan buledan-buledan ini Buledan ini tuh Ada di list berarti Kalau nggak salah dia tuh Nanti kita coba Buletan itu per list ini Ya kan?
Li, li, li, list, list, list, list itu bulet-bulet So kita masukin disini langsung Di atas A boleh Di sini ya Li style type Titik 2 non Kayak gini Li style type titik 2 non Cek ke browser Refresh lagi Bulatnya hilang Sekarang tugas kita adalah supaya logo terus ini bisa pindah ke ujung kanan dan di tengah dan lebih nikmat Tapi masalahnya ini ada gap nih diantara website yang kita punya nih Ini kan biru nih tapi ada gap disini nih ada gap putih-putih-putih maka kita harus disebutnya itu clearing Maka diatas sini HTML ini lu enter enter enter Sini ketik bintang koma spasi HTML koma spasi body kurawal enter enter tutup kurawal awalnya harus selalu ditutup karena founding mainannya blok-blok blok bukan goblok tapi blok-blok blok gitu bro terus disini lokasi margin titik 20 titik koma padding titik 20 titik koma dan box sizing titik 2 border strip box kayak gitu save hai hai Maka ketika kita refresh dia sudah menghilang semuanya nih yang ada di sini. Pret tuh sekarang udah nempel kan enak ya. Tugas berikutnya adalah tinggal si ini pada ketengah sini dan ke ujung sana.
Jadi caranya adalah kita kasih flex. Yang disebut flex ya. Kalau kalian masih belum mengerti seputar teknis yang kayak gituan. Kalian bisa tonton video gue yang lain. Ada namanya playlist Cuy University.
Kuliah online versi gue. Ada Cuy University semester 1. Dan ada Cuy University semester 2. Kalian cek playlistnya. ada di homepage youtube gue juga Ada disitu ikutin aja dari sesi 1 sampai ke 9 untuk semester 1 Dan untuk semester 2 baru ada 2 sesi Jadi kalian bisa mengikuti dan mempelajari lebih dalam sintaks-sintaks yang ada Nah video ini dikhususkan untuk yang pemula Jadi kalau kalian udah mulai tertarik bisa ngikutin playlist yang itu kurang lebih gitu Right lanjut lagi UL itu akan kita bikin jadi div Eh jadi div Jadi divlex Nasi UL ini Supaya ini bisa Eh sorry sorry Yang nav kita akan bikin supaya ini jadi ketengah Pakai nav ini ya Kita mau div nav ini taruh aja disini nav ketik disini display.2 flex Save. Maka dia harusnya ke kanan semua. Cek lagi.
Prat. Oh. Kok nggak ya?
Agak lain nih. Nav ul. Save kayak gini coba. Nav spasi ul yang artinya kita masuk.
Dari sini masuk ke sini. Dan styling yang di dalamnya. Lewat nav ul gitu. Oke.
Cek lagi browser. Prat. Nah.
Hai menarikannya ini udah kayak gini rolex terus kita kasih lagi sesuatu di bagian display sini eh display header sini kita kasih display flex eh save terus kasih justify strip contents titik dua space between coba space between dulu between titik koma save cek lagi ke browser apa yang terjadi refresh, nah jadi kayak gini nih, logo tentang about kontak segala macem tapi ini kan jelek jelek, maka kita perbaiki ya, kita langsung sikat aja disininya center terus lu bikin lagi align items pake s.2 center, save oke, cek lagi ke browser, refresh jadi kayak gini kita pindahkan logo ini ke paling kiri dan semua yang ini sisanya ke paling kanan dengan cara yang paling sederhana di bagian logo tadi, ini ada H1 logo kita kasih kelas disini kelas sama dengan quotes gitu, kita kasih namanya logo save atau ya logo aja gini deh ya kan ini kelas logo maka kita panggil logo ini di CSS dengan cara di bagian sini boleh ini Sini deh Titik logo Kurawal seperti biasa Kasih margin Right Titik 2 Auto Titik koma save cek lagi ke browser, refresh, boom sekarang keduanya sudah aman, logo di kiri dan ini semua di kanan betul? kenapa? karena dari codingannya kalau kita baca logo itu margin drag auto yang artinya dia akan dipentalkan dari kanan margin drag auto dia dipentalkan dari kanan yang tadinya kalau kita gak pakai ini ini gue komentari dulu ya lagi mana cara komentarnya disini ya? Aduh, gimana ya?
Gini, nah coba Nah kan tadinya gini Oke Kalau kita nyalakan codingan ini Si logo ini Ini gue buka lagi Save Maka dia akan mental dari kanan Autonya sampai mentok ke ujung kiri berarti Refresh Boom Tuh kayak gitu ya Terus kita kasih padding Supaya dia agak menjorok ke dalam Di area ul sini Kita kasih padding Taruh lah 12px Mungkin Save Save Hai cek lagi kurang sepertinya kasih 20px save refresh nah segini cukup Oke mantap ya sekarang kita ganti fontnya supaya jadi lebih joss pergi ke bagian paling atas sini enter di bawah sini font family titik 2 apa ya? helvetica.com save coba cek berubah gak h nya gede ya helvetica h nya gede tadinya bentuk font nya kayak gini kalau kita refresh nah udah berubah ya jadi kayak gini lebih oke lah setidaknya lalu ini terlalu menjorok ke kiri dan ini terlalu menjorok ke kanan maka kita kasih yang namanya gap mungkin kalau gak salah ntar gue juga lupa coba kita tambahin gap disini gap.2.10px Hai koma save lihat lagi ke browser Hai eh ngaruhnya yang di sini ya malah ya yang ini enggak ngaruh ya karena dia logo nanti kita kasih margin-left berarti oke nggak papa kasih gap 10px dan disini jadi ada gapnya nih antara ini dan ini terus untuk logo supaya dia bisa agak menjorok di sini kita kasih margin strip left 10px Titik koma Di titik logo Cek lagi browser refresh Dia sudah menjorok Dan untuk yang button juga sama Supaya ada jaraknya ke kanan Maka Kita tambahkan di area Li sini aja Kasih padding 20px Cek lagi ke browser refresh Hai ah jadi lebih jelas kayak gini tapi terlalu besar maka jangan 20px tapi 10px aja save refresh segini terus button ini kita kasih margin-right caranya klasik kelas dulu dibatangnya kelas di HTML nih ya kasih aja namanya btn strip cta ini apa fungsinya bang artinya btn to button strip cta to cta to call to action kurang lebih kayak gitu ya terserah lu namanya bebas ya bro asal dipanggil di style css nya sama masuk sini kita panggil di bawah sini saja titik btn strip cta kasih margin rig titik 2 10px titik koma cek ke browser Refresh, dia sudah berjarak Sama seperti jarak yang ada di logo Lalu kita modifikasi tombolnya biar gak buduge gitu bro Kita ganti Border.none Save, cek lagi Dia harusnya menghilang bordernya, refresh Jadi kecil, lalu kita kasih Font size nya Jadi agak gedean Jadi di 1, atau berapa pixel ya 20px Save Ukuran font nya cek lagi browser, refresh, besar terus ini supaya dia bisa agak berjarak kita kasih padding juga disini padding taro lah paddingnya misalnya ini padding atas bawah kiri kanan ya atas bawahnya misalnya paddingnya itu 10px eh enggak enggak enggak berapa ya? 6px ya boleh terus kiri kanannya 12px coba ini artinya atas bawah ini artinya kiri kanan kalau tidak salah gue pun lupa refresh, boom nah jadi kayak gini Warnanya jelek bang, kita ganti warnanya.
Kasih aja background, titik 2. Gue punya panduan warna, gue masukin orange yang ini. Semidark orange. Tempel sini, pret, titik koma, save. Cek lagi browser, refresh, boom, jadi orange.
Warna fontnya pengen warna putih, maka disini kita kasih color. Pager, ea, ea, ea, titik koma, save. Cek browser, refresh.
jadi seperti itu terlalu kaku kita buletan sedikit ya kita kasih disini border radius 8px aja maka dia akan melengkung ujung-ujungnya Bro namanya juga radius reload nah segini cukup tapi Bang mouse-nya nggak berubah nggak kayak yang disini caranya bagaimana pakai cursor pointer ketika klik sini ya masukin disini kursor titik dua pointer titik koma save refresh maka ketika disini mouse nya akan berubah jadi tangan ini juga, ini juga, ini juga logo gak berubah maka kita ubah juga cara mengubahnya gampang masuk ke logo sini sini enter berarti tadi tinggal masukin cursor.2pointer.com save refresh strength udah jadi tangan udah jadi tangan, udah jadi tangan oke Sekarang, gue pengen ketika kita mouse-nya masuk sini, dia ada bayang-bayang atau ada sesuatunya. Caranya, simple. Kita yang logo dulu.
Titik logo, titik 2, hover. Kayak gini. Buka kurung, tutup kurung-kurung awal.
Ketika di hover atau hover itu mouse datang, apa yang akan dilakukan di dalam kelas logo ini? Kita akan merubah warnanya menjadi warna oranye. Ini.
Dikopi. Color menjadi warna oranye. Save. Cek dulu apakah logo fungsi. Kalau logo fungsi kita mainkan ke semuanya.
Ya, kayak gitu ya. Ketika di hover. Ini kan masih belum nih. Tuh, masih biasa.
Refresh. Ketika mouse-nya masuk. Dia berwarna oranye.
Kayak gitu. Oke, ini udah berfungsi. dan kita pengen nambahin kayak animasi sedikit biar dia bagus gitu ya pas digeser musik ini jadi kita masukin aja di sini di logo sini Transitions Transition Transition ya Bro all artinya semua elemen diubah transisinya terus berapa detik 0,5 detik ya 0,5s atau sama artinya dengan enggak usah pakai 0,5s ya spasi easy easy itu artinya animasinya isi, terus spasi 0s, artinya delay 0 detik, jadi kalau dibaca transition seluruhnya yang ada di kelas logo, dalam waktu 0,5 detik ketika mouse datang itu nanti akan berubah warna menjadi ini dengan animasi isi, tanpa delay gitu, kalau dibaca save, cek lagi ke browser, refresh, sekarang kalau mouse nya datang, nah jadi lebih smooth ya tuh, kelihatan gak?
oke jadi lebih smooth kalau pengen bergerak kita tambahin ketika di hover dia transform transform titik 2 rotate dalam kurung 2D misalnya gitu, titik koma untuk supaya dia bisa ngicel gitu, kalau bahasa Sundanya itu ngicel atau ngaceleng gitu lah kurang lebih Oke kita save Reload lagi websitenya Tidak akan berfungsi Eh berfungsi ternyata cuma gitu doang Yaudah deh bagus syukur Tuh gitu ya jadi agak bergerak Alright Gue sambil ngopi lagi ya haus ngomong Lumayan ya udah kayak gini Tinggal implement kesini Caranya bagaimana Caranya si hover ini Ini tinggal kita copy pak isinya Isi hover tinggal kita copy Hai terus di li ini ya di li ini tinggal kita masukin ke li.2 hover kebuka kayak gini terus di sini masukin yang tadi kayak gini save udah ini kan dipastek yang tadi di atas cek lagi browser refresh coba ketika lu sini dia akan kayak gitu tuh Tapi warnanya gak berubah Maka tambahin Sebelum titik 2 hover Spasi dulu Kasih A Li A hover gitu ya Terus kalian buka lagi Refresh Maka Nah sekarang kayak gitu Tuh Ya Hai Alright nice tapi Bang kok dia nggak bergerak ya Hmm gue juga nggak tahu Bro kenapa dia tidak bergerak ketika ditransform maka sepertinya di sini kita mesti kasih display blog atau display ke inline strip blog coba kayak gini save di dalam ini ya refresh browsernya dia aman, nggak aman, berarti ini block doang, coba display block doang sini, maka kita refresh lagi nggak aman, maka kita pindahkan display block ini, kita taruh di nav ul, save, refresh nggak ngaruh juga kita coba cut kita taruh display bloknya itu nggak usah nggak jadi ah gua pusing juga udah gini aja ya gitu aja ya colornya aja biarin yang berubah maaf logo aja hehehe daripada nggak jadi website nya lama anjir nanti PR kalian aja dah ngulik ini refresh yang logo udah berubah gini yang ini kagak ya kagak ada rotet rotetan lah aneh lupa lagi caranya Bro jujur lupa lagi gua Oh ini transitionnya Oke, transitionnya belum ada di si Lee. Maka kita masukin transition yang tadi. Yang di dalam logo ini kita copy.
Tempel ke dalam Lee. Past. Save.
Cek lagi. Shred. Loh, agak lain.
Anjir. Kenapa nggak ada animasinya ya? white li oh lia Sorry bro Sorry ini cut lagi ya ini cut dan bikin satu di sini lia nah kayak gini Hai kek tempel di sini itu lia lia gitu save web browser refresh nah Hai hey coba-coba gua penasaran bentar ini nggak usah ditiru gua penasaran display blog transform rote2 dig nggak bisa anjur inline blog ah bisa tuh Dia bergerak juga Nah begitu pak caranya bener kan Gitu jadi tambahin ya Itu namanya display inline block Oke Terus disininya kasih warna kayak gini Halah halah halah ribet sekali ya Ternyata capek juga Bikin website ternyata Nah untuk yang follow ini Ketika di hover Biarin aja deh ya Sekarang kita bikin Konten disininya tapi sebelum itu kita cek dulu responsif ini ya Klik Kanan inspect sini yang paling bawah kan muncul kayak gini nih nah tadinya gini kalian klik yang ini ini tuh untuk ngecek responsif klik terus kalian geser ini sampai ke kiri tuh jadi kayak gitu shred tuh jadi kecil Oh Oh jangan itu rusak tidak responsif maka lia displaynya saya hapus saja transform hover juga saya hapus pusing-pusing dulu refresh Hai bukan itu ternyata saya tidak jadi saya balikan lagi ya kontrol Z ya untuk membalikan kontrol Z ini biarkan berarti yang bermasalah di responsif itu adalah di ham header sini display flag justify segala macem naf ulnaf display flex di sini hai hai Hai apakah nafnya itu kita coba bikin taruh widnya titik 200% save cek browser Hai jadi kayak gitu no gua nggak mau kayak gitu hapus Coba gua bukanya di Google Chrome ya Gua buka ini di Google Chrome dulu Oh, I see I see, I see, I see Ini kan tadi terakhir kayak gini Tunggu, tunggu Media query Itu mesti ya HTML header tag Nah ini buka dulu HTML tuh tunggu HTML format HTML Doctype bukan bukan bukan VS Code HTML default format tunggu ada yang namanya itu media query gua lupa media query nya kita mesti kopas aja ini mah bro anjir gua lupa Hai mana ya ah bentar-bentar gua buka di VV pojokan gue yang lain tunggu gua buka di proyekan gue yang lain untuk html nya Hai sudah dimana ya perjalanan gue ya sini gua taruh sini Open with code Hai nah kita masih nambahin ini Bro viewport ini ini ini ya Hai di sini gua copy up Oke gua tempel di punya gue mesti gua lupa soalnya sintaksnya taruh di atas hadits ini di atas paling atas ini lu enter nah kayak gitu nih kalau enggak rapih lu bisa rapihin pakai tab atau pakai view ah ya Paket apa aja dah begitu Ini fungsinya apa?
yang ini untuk membuat responsifnya name viewport content with device with initial scale 1 ini gak perlu di apalin, gue juga gak apal makanya gue copy paste untuk bagian head sini karena gak perlu di apal juga sih itu ada di google semuanya ya kan jadi kalian ikutin aja ini di head ini lo isi pertama metacharset utf-8 terus link rel icon ini untuk kebutuhan nanti di icon yang ada di tab web lo ya nanti kalau udah punya iconnya terus ini viewport untuk responsive nya jadi kalau kita save sekarang mestinya pas kita refresh browser ini terus gua bikin mode responsive lagi klik tuh sekarang jadi lebih aman tuh kayak gitu walaupun ini belum responsive gapapa ya karena memang kita belum coding untuk responsive tapi setidaknya tidak mengecil seperti tadi oke Ayo kita lanjutin lagi atau kita fix dulu ini responsifnya sedikit taruh di kodingan Anda itu dimana tadi tadi close dulu VS Code supaya responsif ini kan kalau kita lihat kayak gini di resolusi Kalau si pixelnya ya, widthnya itu 300an tuh segini jelek nih. Ntar kalau dibuka di HP pasti kayak gini juga tampilannya. Maka kita masuk ke style CSS. Di header sini, ini kan flex.
Kita mesti kasih dia flex strip direction. flexwrap.2wrap titik koma, pakai spasi seperti biasa gitu ya jadi pas lo save terus lo refresh browsernya, nah dia akan turun tuh seret kayak gitu ya, jadi pas kita kecilin, tek tek tek tek nah nanti tampilan di hp kurang lebih kayak gini gitu alright, kita lanjut lagi ke konten berikutnya adalah isi dari yang ada disini ya, isi yang ada disini ini gue bakal coba close dulu caranya Tutup aja Kita bikin satu div baru di index html Di luar header Ini kan satu blok nih Dan gue bakal bikin disini satu namanya div Terus enter enter tutup div Di dalam sini kita kasih Sorry div ini kita kasih nama kelas dulu Kasih nama aja Container boleh Container Terus disini kita kasih div lagi Tutup divnya Di dalam tengah-tengah divnya bukan pulau jawa tapi enter aja enter lagi, di dalam sini kita loading taruh disini h3 atau jangan disini p aja paragraph tutup paragraphnya Hai kayak gini terus disini juga misalnya paragraf lagi tutup paragrafnya di div ini kita kasih kelas nama kelasnya misalnya rapper atau intro deh intro ya boleh ya intro yang P ini kita kasih tulisan Hello Hello dia Afriza here lalu disini misalnya influencer teknologi teknologi influencer serah lu lah tagline lu aja ini mah teknologi influencer from from village alah anjing from village kayak gini aja di page ini kita kasih class sama dengan title disini kita kasih class sama dengan description kayak gitu oke kita punya div container, div intro div, eh sorry, pet title, description so sekarang kita masuk ke containernya disini ini kalau udah lu save terus lu cek browser dia pasti jelek, refresh, tuh dia ada disini gue pengen dia Ada di tengah dan besar. Maka kita ingat-ingat. Ada container. Intro.
Title. Description. Masuk ke style. Taruh paling bawah.
Sini. Titik container. Buka.
Tutup. Display. Flex. Oh no no no.
Jangan jangan jangan. Kita kasih width. 1200. Px. Max ya. Max width.
Max width. 1200 pixel. Jadi dia paling lebar untuk container itu.
1200 pixel. Terus taruh margin. 0 auto maka ketika kita save dia akan ke tengah seharusnya kalau dengan kayak gini doang kita cek lagi browser refresh dia ada hampir ke tengah ya hampir, gak apa-apa lalu kita punya elemen intro kita masuk sini di bawahnya.intro display.flex justify.intro content.2 center align.2 eh align strip items titik dua center set lu cek lagi ke browser refresh jadi kayak gini, udah di tengah semuanya tapi dia malah menjadi sejajar betul?
karena bawaan flex itu akan sejajar dari kiri ke kanan supaya gak sejajar, kita kasih disini flex direction Directionnya jangan ke kanan ke kiri Tapi titik 2 column alias ke bawah Save Jadi di bagian intro ini Apa-apa yang di dalam intro Itu akan menjadi ke bawah Per elemen HTML nya Gitu Refresh, boom dia ke bawah Ada title, ada description Kita modif Title dan descriptionnya kita modif ya Taruh disini Titik title Font size nya Gue pengen Agak gedean 24px Font weight nya atau ketebalan weight nya Kita bakal taruh dia di bold Terus Udah gitu dulu aja Terus yang description Di luar sini Description Titik 2 Kurawal Hati-hati Titik koma Spasi Jangan lupa selalu inget ya Font size nya gue pengen lebih gede Description nya Misalnya 28px Font width nya gue pengen lebih tebal Pake bolder Ya Terus lo save dulu Cek lagi ke browser Refresh Boom Jadi kayak gini Hello the average al here Teknologi Oh gue ada yang tipo sepertinya Font size 28px Describe Nah ini pake P ya Description Hati-hati tipo kan gak ngefek Tadinya tipo kayak gini Kalau gak tipo jadinya kayak gini Lebih oke Sekarang gue pengen dia ada jaraknya ke atas Dari navbar yang ada Maka kita kasih disini yang namanya gap.2.20px Spasi 0 Kayak gini Save Cek lagi browser Boom Waduh Kok cuma ini doang Oh ini jangan pakai 0 sorry 20px aja Refresh Container Sepertinya maaf ya di container ini biarkan Gap 20px dan di container pun kita tambah Padding 20px spasi 0 Artinya atas bawah ini Ini kiri kanan, kiri kanan tidak dikasih spasi Atas bawah kita kasih spasi sebanyak 20px Gitu, kalau di save kita refresh lagi Dia akan turun Nah Nah ini jarak terlalu besar kita kasih 10 aja gapnya 10 dari intro ini ya jadi title deskripsi itu jaraknya 10 gapnya 10px kalau kalian refresh segini cukup terus ini menurut gua kurang ke bawah jadi paddingnya gua akan taruh di 70 save aja lu cek lagi refresh Nah segini cukup Alright Terus kalo udah kayak gini Gue pake gambar disini Gue bakal masukin gambar gue disini So Kalo kalian cek disini ada asset ya Maka dibawah P nya ini Gue bakal taro kayak gini IMG src Sama dengan Slash tutup langsung ALT sama dengan Dea afriza Foto ALT itu alternatifnya Kalau gambarnya rusak Src nya langsung ketik aja ada di dalam assets Dalam assets Kalau dibuka ada di dalam foto Dan itu namanya Maka kita ikutin assets Slash foto Slash Sama Dea strip afrizal strip 1 Titik png harus sama ya Penamaannya tuh harus diikutin sama Kalo disini namanya jono lu ketik jono Tapi tergantung ini extensinya Kalo gue kan png berarti kalo jono png Jono titik png kayak gini Kalo ini jpg jono titik jpg gitu bro Kalo udah kita save Reload lagi maka akan menjadi seperti ini terlalu besar kita mesti resize ini dengan cara kasih kelas ke image nya kasih kelas ke image nya taruh aja di sebelah sini kelas sama dengan img strip foto gitu save ya tinggal panggil kelasnya di CSS bawah sini img strip oh sorry pakai titik titik img strip foto kayak gini kita set Max Width nya berapa taruhlah 500px Max Heig nya juga misalnya auto deh gitu atau Heig auto gitu dah kita coba refresh dulu jadi jadi dia lebih kecil kayak gini Oke, sekarang kita coba versi mobile-nya dulu sampai sini. Versi mobile, klik kanan, inspect. Ini diklik sampai biru nyala, terus lo geser. Lo lo lo lo.
Lo geser. Hai nah tapi gambarnya kan kayak gitu ya apa menyelengceng kayak gitu ya nanti kita akan fix gambarnya ketika versi mobilnya gampanglah ini minimal kita taruh di 400 tuh aman gitu ya nih gambar tuh agak-agak ya hmm we 500px lalu disini misalnya widnya kita ketik-ketik 280% koma save cek lagi browser hai hai Hai refresh kayak gini nah dia udah aman tuh segini ya gitu straight atau lu taruh disini 100% widnya refresh lagi ketika dikecilin aman ya jadi pakai persen supaya bisa ngikut gitu loh lalu teks ini kalau versi mobile nggak nggak di center kan sebenarnya di tengah maka kita kasih tengah untuk title hai hai Hai eh sini kita bisa masukin line dia intro ya items titik dua udah bukan intro udah udah lain item Center maka di title sini atau di sini di bawah gap teks line 2 Center titik koma save refresh dia ada tadinya di pinggir gini kalau kita refresh dia akan ke tengah seperti itu cukup ya Hai ride tinggal ini paddingnya kita kasih di area image tadi tak kasih sini padding misalnya 10px save reload Nah dia agak menjorok Oke Segini Lalu kita ke konten berikutnya Tapi sebelumnya gue ngopi dulu Gimana nih Ini nih cek dulu kodingan nyata Kurang lebih kayak gini untuk CSS nya Di bagian mana lu pusing Lu cek dah Nih gue sambil ngejebat dulu Gelap juga ternyata Gue nyalain lampu dulu ya Ntar bre, nyalain lampu dulu bre Hai nah gimana ya udah ya ini neksa TML nya seperti ini sederhana bukan bukan bukan main pokoknya nanti codingnya di-share tenang aja tapi nanti kalau ada yang request nggak ada yang request mah nggak akan gua masukin deskripsi source-nya Ikutin aja ntar juga Jadi jamin gue mah ya Pokoknya ntar udah jadi baru pelajari Oh gitu oh gitu Oke next content Kita tinggal kopas lagi Hal yang sama mirip-mirip kayak gini juga Tapi isinya beda Atau gak usah kopas deh Biasakan gak usah lah ya Disini dibawah sini kita bikin lagi div Terus lu tutup divnya Enter dulu deng Slash div Kalau gue biasanya kayak gitu Di dalam sini kita masukin div lagi Tutup div Jadi double-double Div yang ini masih sama nama kelasnya Oh enggak-enggak Kelasnya ini kita kasih aja Parallax namanya Ini andalan nih ini andalan Terus disini kita kasih Itu kan tadi intro ini konten Konten tentang ya Tentang kayak gini di sini edit class tentang lalu di dalam sini kita kasih H1 H3 aja atau PL lagi deh PL lagi ini aja kopas yang ini kopas yang ini dua biji sampai sini ketik Klik kanan copy tempel sini paste Oke ganti textnya jadi saya adalah programmer misalnya gitu Misalnya Apa lu punya tag lain apa dah Kalau gue ngoding aja dulu Koma Jagonya belakangan Titik gini aja deh Gue gak punya kata-kata lagi bro Right Kalau di save terus cek lagi ke browser Refresh maka sekarang akan jadi seperti ini Ada di bawah sini jelek banget bukan Gak apa-apa tenang aja Perlahan aja bro Kenyang Parallax kita akan Mainkan disini Titik parallax Jadi disini akan kita Sematkan gambar kita Yang tadi udah kita punya Gue punya gambar semi smile disini Gue akan panggil Ketik aja background Image Titik 2 dalam kurung URL dalam kurung kayak gini Titik koma Di dalam kurungnya lo masukin Asset Slash foto slash semismile.png ini nama filenya nama file gue kan ini semismile jadi ada di dalam folder asset photo semismile gue panggil kalau lu save maka yang terjadi adalah ini kan tadi kayak gini, lu refresh tidak terjadi apa-apa betul? karena karena karena kita belum tambahin codingan berikutnya background Attachment Titik 2 fixed Titik koma Gini coba refresh lagi Shred Eh kenapa sih Nah ada nih muka gue sini ya Tuh muka gue situ Kureng-kureng masih belum Kita kasih lagi disini Background Position Titik 2 center titik koma refresh lagi nah dia ada di tengah masih kurang kita masukin lagi background clip apa sih background clip kok disini gak ada ini nya ya background repeat titik 2 no strip repeat satu lagi background strip clip kayaknya kalau gak salah titik 2 background clip itu apa ya klip gitu refresh gua lupa tunggu background clip CSS CSS background clip ntar gua lupa eh background sip klip padding box eh attachment Hai fixed repeat no repeat fix and repeat no repeat attachment fixer repeat no repeat position Center background clip-clip background clip bukan kayaknya bukan background clip background Repeat background size auto udah aman border oke oke cukup ini nggak pake klip biarkan seperti ini saja background image cover background size titik 2 cover kalau nggak salah Hai buka lagi refresh Oke udah cukup kayak gitu Kita setting di parallax nya, height nya sepertinya 100vh, vertical height Coba refresh Nah ada muka gue ya pas di scroll Tadinya gak ada jadi, ganteng sekali anjir Gokil Gitu ya Lalu text id akan kita ketengahkan 100 VA ini artinya 100 vertical height atau bakal ngikut ke 100% layar device yang kalian buka perhatikan disini ada tentang title description tentang kita masukin sini, tentang kayak begini, kita kasih display flex kayak tadi juga sama terus flex, terus dia justify content titik 2 center line items titik 2 center gini terus kita kasih flex direction column save, cek browser refresh, boom, dia ke tengah gue pengen dia bener-bener di tengah banget sih Atau disitu cukup ya?
Cukup tapi kita coba kasih background disini Background Titik 2 Gue punya panduan warna Itu dark blue ini kita masukin lagi Titik koma save Refresh browser Kayak begitu Kita kasih warna textnya jadi putih Color Titik 2 Refresh Oke kita kasih lagi apa ya ini kan jelek ya terkasih opacity bagus-bagus aja sih sebenarnya gue mah jadi kayak seolah-olah hording gitu ya kebuka ya ke hording gitu Bro ini kalau gue awasin deh seret cara buh keren-keren aja kita kasih padding bro terkasih padding 20px titik koma Hai cek lagi browser refresh Boom segini kurang gua pengen lebih gede lagi 40px refresh Boom segini Jadi kalau kita lihat dari sini shuum Pum Oke kita taruh tombol dibawahnya sini kita bikin button tutup eh misalnya batangnya apa ya Mari kerjasama hai hai ini kita Gini terus buttonnya kasih kelas yang tadi aja kelasnya samain BTN CTA Save Maka akan otomatis ya itu enaknya CSS ya Kalau kita mainin terpisah kayak gitu Refresh Jadi seperti ini Tinggal kita kasih margin dan padding diantara keduanya Tapi biar lebih gampang di paralax ini kita masukin Eh sorry di tentang sini Tentang sini kita masukin gap.2 20px.coma Refresh.coma Hai eh tapi kalau gap semuanya jadi nggak mau gue nggak jadi kita masuk sini eh padding di button itu ya Hah menarik sekali di button itu kita mesti ah kita masih tutup sepertinya Bro sini kita bikin lagi satu div begini tutup divnya ini enter enter masukin button yang sana Hai tempel sini pencet tab biar rapi di sini kita kasih kelas taruh aja di sini eh apa ya ah ya udah deh nggak papa sebenarnya bisa sih nggak kayak gini juga tapi nggak papa biar-biar udah nanggung soalnya Mar MT mtstrip 10 misalnya gitu lah ya margin top strip 10 jadi kita bikin kelas di bawah sini titik mt-10 kayak gini margin strip top titik 2 10px save cek lagi browser nah kayak gini kurang misalnya Oke kita tambahin 20px kalau kita refresh nah segini nice ya ok lumayan cukup mantap Hai Kenapa ini muka gua kayak gini sih jelek banget anjir lalu hal berikutnya kita akan menambahkan em apa lagi ya coba gua masuk ke sini dan kita akan bikin lagi di dalam relaks ini kan div tentang nih ini di tentang ini kita kok tapi jangan deh kita bikin di baru disini tutup divnya Sorry ya ini konten gue tidak ada tidak ada materi harus kayak gimana bentukannya harus apa jadi bener-bener random banget dan apa yang ada di otak gue saat ini aja untuk bikin websitenya hai hai Yang biasa-biasa aja kayak gitu Jadi yaudah sih begitu aja gitu ya Ini kopas lagi segini Tempel sini Lalu ini kita kasih nama Kelasnya jangan tentang Tapi disini adalah Kontak sepertinya boleh Eh tadi ada apa aja Ada about ya About About About tuh kan tentang tuh about ya About tuh tentang ya Tapi gak apa-apa lah Biarin aja About kontak Aduh kok Ganti ah gak mau gak asik Seleri deh gaji Atau Hobi deh Hobi Jadi ini ganti jadi hobi Eh grup kecil aja Hobi gini Di dalam paralaks Saya Suka Nongkrong Hai lalu disininya nongkrong adalah jalan terbaik mencari ide dan inspirasi save lalu kecek lagi ke browser refresh ada di situ eh jelek ya gak apa-apa kita buat dia ke kiri dan kanan Hai atau di kiri doang ya bentar saya suka nongkrong eh oke bentar hobinya kita bikin card aja deh dari hobinya hobi kita bikin card di sini kita bikin div lagi berarti tutup divnya enter enter masukin kayaknya ke dalam div itu sini ini kita tab hai hai Hai rapihin dulu nah ini rapihin ini juga tab karena kan nested ya ini ini ini gitu kan nested kita kasih disini kelas card gitu hobi card ini pakai S ya cards lalu di dalam sini kita kasih div lagi per div enter enter masukin P nya lagi ke dalam masuk sini ini tab ini backspace hapus kalau kecepatan playback aja bro ini rapihin ini tab lagi nah sini kasih kelas card strip item gitu ini gak usah pake s lah biar gampang nah card card item ini right hmm hobby kita mau div disini bikin di bawah sini dot Hai hobi kita kasih how hobi itu mainannya kayak tar gua agak bingung gua Hai container intro Hello the Afrizal Oke oke kita kasih Max Width, Margin, Padding Oh bisa kita pakai container aja Jadi kita gak perlu hobby Kita ganti hobby ini jadi container lagi Jadi kita bisa pakai kelas yang sama Jadi kalau udah lu save, cek ke browser Dia udah di tengah Tuh udah agak di sebelah sini Enak Sekarang tinggal kita modif yang berikutnya berarti Card dan card item Jadi disini bukan hobi tapi card Kita modif Kita kasih kelas card ini Display nya flex Justify seperti biasa Justify content.2 center Mungkin line-items. center, background.eaea color.222black coba refresh, boom jadi kayak gini oke, gua gak mau ea ea ea gua pengen dia f7 f7 f7 aja cek lagi refresh Hai Boom jadi warnanya enggak terlalu enggak terlalu gelap ya ya gini kita kasih padding disini coba paddingnya 20px save cek browser refresh segede gini kita kasih kartu itemnya kita copy yang banyak eh sorry card card itemnya itu 12 ya itemnya kita copy 12 gitu tempel ya ctrl c, ctrl v sebanyak 3 kali cek lagi ke browser, refresh jadi kayak begini terus kita kasih gap jarak di antara ketiganya itu berarti jarak itu ada di card card itu kita pasangin gap.2.10 8px aja save, cek browser, refresh kok gak keliatan gapnya Oke, background dan color bukan disini sepertinya Kita masuk ke titik card strip item yang tadi kita punya Tutup, masukin background dan colornya ke situ Cut, cut ya, tempel sini Save, check, refresh, boom Nah, kayak gitu Paddingnya juga kita pisahin Padding ini kita masukin ke card item Ini hapus Save, refresh Boom jadi kayak begini Oke cuman ini kalau dalam mode mobile Dia akan rusak pak Cek ya Ini kalau gue kecilin dia akan rusak Tuh rusak Supaya gak rusak Kita bikin dia ketika mobile jadi ke bawah Yang mana disini Berarti kita mesti masukin Sini nih Flex direction Flex wrap.2 wrap titik koma di dalam card save reload lagi browsernya boom dia jadi seperti ini tuh aman ya lalu kalau versi desktopnya dia menjadi seperti mana versi desktopnya injur Oh lolololo bentar versi desktop desktopnya hilang flex direction nya flex direction justify content center gap sekian sekian sekian di sini berarti Hai mm card itu kita mesti masukin with disini sepertinya with titik 2 20% coba save coba dulu ya gue juga lupa nah kan bener with 20% atau mungkin 25% kayak segini cukup nah segini Hai padingnya kayak kurang ya 40px coba kegedean Pak 24pk aja refresh Oke terus title-title ini kegedean juga kita ganti jadi ini card strip title card strip description card strip title Hai ya tambahin cardstrip title di setiap titelnya sama card description di setiap description nya Oke jadi kalau di refresh dia lebih kecil kalau kita versi mobile pun seharusnya dia turun ke bawah enggak Oke kalau enggak turun gua mesti set di style sini card flex flex rap display flex card nya justify content center line item center with nya 25% background nya ini card item flex rap rap flex direction titik 2 row perasaan emang kayak gitu dah hai hai Hai anjir ya udah gua kasih responsif aja langsung sini ya ini awasin flexdirection gua akan kasih disini at media at media screen Max and dalam kurung Max titik 2 Max trip wid titik 2 500px dalam Hai rung terus tutup kayak gini ketik titik card buka kayak gini masukin sini display titik dua flex nya itu flex direction titik dua kolumen ini terus titik hardstrip item with titik 2100% Hai sekarang udah jamin ini kalau enggak responsif tai pesir responsif refresh ya kecilin bread dia berubah jadi sejajar kayak gini ya terus gue pengen ketika mobile dia berjalan berjarak kayak begini taruh agak atasan maka itu tuh ada di antara mana dia padding ini dah kayaknya Hai coba kalau ini pilihnya gua Awasin Hai kau bukan itu ada di dimana sih Bang kek ini gitu tentang kontainer card ah si tentang Oh iya tentang padingnya kita Awas ini berarti sini dot tentang kayak begini tutup Padingnya itu tetep 40px tapi padding bawahnya 0, 0, 0, kayak gini. Coba refresh.
Bukan sepertinya. Kalau gue taruh sini 0. Bukan, bukan tentang. Itu apa ya dia ya? Hai kolum background padding 40 image foto bentar ya Bro Hai gua cari-cari tahu dulu container margin 0 auto padding 70 container sepertinya container pilihnya 0 coba refresh Yes bener container tuh yang bikin kayak gitu tuh Hai terus IMG ini ketika mobile kita bahkan bikin full size maka IMG foto 100% max-width 100% IMG foto eh IMG foto key.com G strip foto Max with 100.2 100% so ini tadinya kayak ini harusnya dia jadi melebar full refresh belum berarti sekaligus juga dengan yang container max-width nya harus 100% sini kasih max-width.200% refresh gak usah pake max refresh yang gambar juga gak usah pake max refresh Tidak berfungsi Sebelah mana kamu?
Header, gap 10% Logo BTN CTA, nafli, container Max width, padding 0, udah, margin 0, auto Udah, intro, intro Dia intro bukan ya? Anjing, gue ngomong sendiri lah, kayak orang gila ini Ini nih Dia ada di dalam intro, iya intro Sedangkan intro disini gapnya 10 Kayaknya disitu deh Hai intro coba titik intro gap.20 tutup Hai bukan juga ini bukan ini juga bukan dia dimana ya itu ini image ini gue pengen full tolong ini awas Hai image-nya kenapa enggak full Pak hai hai di MG foto 100% max-width 500px max-width nya kita awasin dah disini refresh max-width nya kita awasin Hai tapi tetep dia nggak mau full karena ada padding IMG foto padding ternyata titik IMG strip foto titik kurawa jamin 1000% gua padding 0 jamin Aying maka longga gua push up sekarang 100 biji refresh Boom uh kan bener nah ini untuk versi mobilnya nafnya juga kita turunin dia di intro ya Hai sepertinya dot in bentar itu tuh intro kan Iya kayaknya dot intro margin top Hai 20px terlihat refresh nah dia turunkan margin top margin bottom juga 20px margin bottom 20px refresh enggak enggak terlalu pengaruh 50px enggak usah berarti udah margin top aja hai hai Hai sip kayak gini kayak gini kayak gini untuk yang card kayak gini tinggal kasih box Shadow box Shadow ah udahlah nggak usah browsing kita tebak-tebakan aja ini kita kasih box Shadow untuk kartunya ya versi desktop lagi ya ini versi desktopnya kayak begini Hai gede banget gambarnya anjir Sorry untuk yang image foto kita kasih Max lagi biar gak gede banget ternyata Max Width titik 250px ya udah biar enggak gede banget Hai nah segini bergepusing ini kita kasih box Shadow di area card item berarti nah sini box Shadow titik 22px 2px 2px 2px RGB a hmm warna putih warna hitam warna hitam tuh 000 Hai 0,rgb a-nya tuni 0,5 save cek browser refresh ada itemnya sekarang jadi ada itemnya tapi kurang sepertinya kita atur-atur aja ini angka-angkanya Bro tuh lima px di agak ke bawah gitu ininya kalau 5 Hai jadi burungnya gitu ya burungnya tuh 5 ini 5 berarti burungnya tuh coba kalau ininya satu Hai dia ngeblast ngeblast blur nya kalau sini 20 blur nya semakin ah gitu ya semakin kayak gitu Jadi kalau ini di lima pun dia akan kayak begitu ini satu cukup udah cukup kayak begini Hai terus apalagi Oh isiannya nih isiannya gua bakal pakai icon yang kita punya Hai bentar capek udah berapa jam gua satu jam huhu tak terasa yang membuat website satu jam Edun hmm Hai Alright kita move lagi ke berikutnya ini kita masukin icon berarti di dalam card item disini kita masukin img oh no no no kayak gini aja img jangan ya ya deh img aja gak apa-apa img tutup ya src sama dengan titik 2 alt sama dengan seperti biasa kayak gini aja test atau apalah icon 1 gitu ya Hai SRC nya dari aset images eh bukan ding aset slash icon icon mana yang lu ambil misalnya 24 strip horse png24 strip horse.png ya copy tempel di bawah sini terus misalnya yang ini gambar yang Hai best price hot deal Hai hot deal deh hot deal.png satu lagi copy ini misalnya setting French range deh rating rating pengen boleh icon2 ini icon3 refresh browsernya jadi kayak begini enggak papa nggak usah panik rusak, maka kita fix dengan cara kita kasih kelas di setiap gambarnya kelas icon copy kelasnya ke sini samain aja kelas icon kelas icon lalu di style nya kita bikin di bawah sini titik icon Width nya itu misalnya 50px, Height nya juga 50px, save Maka kalau lo cek dia akan jadi kecil, refresh seperti itu Cukup ya 50 atau 75 kali ya, 75 dah 75, 75, save Latiin jadi kecil gambarnya Biar dia ke tengah maka di area Hai card rap justify item Center sini kenapa dia nggak tengah pulau sini teks strip line titik 2 center cek lagi browser nah semuanya ke tengah tinggal kita adjust lagi di sini misalnya marginnya itu kita kasih 10px reload kayak gitu terus kita kasih diantara card itemnya itu ada Hai saya suka saya suka saya suka sini ada titik card title tadi kan terus ini ada card strip apa namanya card ah lupa lagi kartu itu card description card description Hai itu ya title gua pengen taruh font-sizenya di angka 18px font-weightnya titik dua Boulder description gua taruh font-sizenya 14px font-weightnya titik 2 smaller small small soft Hai Masa iya sih ya udah save dulu aja reload jadi kayak gini berarti yang ini enggak ngaruh nggak usah ada begini ya refresh terus ini kita kasih margin top atau di di image lah di icon sini kita kasih margin 10px cek lagi browser jadi kayak begitu padding berapa ya 4px right terus diantara card title dan card description kita kasih disini margin top 4px jadi kayak begitu right mantap ya Hai cek responsifnya dulu inspect geser Hai Oke tapi dia agak aneh tuh ntar Hai tuh dia agak kekanan gitu ya kartunya show card item ini enggak boleh kita pakaiin margin refresh nah jadi kayak gini Hai ke-3 dari atasnya dari atasnya refresh ini kita benerin tenang aja yang navigation kita benerin jadi kayak begini dan begini begini Hai nge-rap nya di versi mobile kita ilangin deh sepertinya card item itu gapnya sorry card card biasa ya ini gapnya kita ilangin gapno ma biar enggak refresh itu kosong nah udah enggak ada kosongnya Jadi lebih profesional lagi gitu loh Anjay Oke Hal berikutnya Yang kita Ganti-ganti text ini Text-textnya dulu biar pada bener Ini kan 24 jam Saya suka nongkrong 24 jam Hot deal itu berarti Gue ganti aja Yang kedua ini Saya programmer murah lah Saya programmer murah Hai murah bro gue tuh murah memang eh biaya jasa yang saya berikan pasti murah dan terjamin atau gini aja jasa paling murah gitu ini jangan nongkrong deh pelayanan 24 per 7 Hai pelayanan nonstop gitu aja nonstop bijasa pecah paling murah dan rating adalah disukai eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh eh apa ya? klien saya sangat senang dalam bekerja sama dengan saya oke, kita refresh lagi jadi lebih real lah pelayanan non stop nongkrong adalah jalan terbaik loh, kok nongkrong sih situ?
kita ganti lagi Hai apa ya service 24jam nonstop ketika Anda kebingungan kita Anda membutuhkan bantuan lalu jasa paling murah biasa yang paling saya berikan paling murah mereka mereka merasa senang dan bekerja sama dengan saya ada kayak gini aja refresh hai hai hai hai Hai mereka mereka senang dalam bekerja sama dengan saya nah gini biar Josh Hai service nonstop hmm Hai kek Hai nice Hai apalagi ya Hai udah satu jam setengah Alright gua pantau obes gue masih lancar Oke kita bikin footer sepertinya atau ini kita ketengahkan dulu ya ini kita ketengahkan dengan cara itu kan di karya kontainer kartu-kartunya itu mesti kita bikin card item itu kita kasih display flex justify strip konten centers line strip item strip 2 center eh no bukan disini sorry card flexwrap center content center apakah ini biar di tengah ya gua bikin satu div lagi disini dalemnya gua kosongin lalu card ini segambleng gua masukin kesana Hai cut masukin sini rapihin lagi Hai nah kayak gitu di ini kita kasih kelas proper jorokin lagi ke dalam eh salah di sini ini sini ya ini berarti nah ini berarti nah gitu kelas rapper bikin disini rapper rapper copy aja ini tempel sini save cek browser Apakah dia di tengah atau tidak ya wait ini nggak usah flexwap Ayo kita kasih ini dikarenanya hey 100 viha Oh bukan Sorry tapi kita kasih ya ya di sini 100 viha ini coba gua awasin dulu ini gimana cara awasinnya gini with 2 100% margin 30 auto hai hai Hai bukan 50 via aja hmm sepertinya cukup gini ya jadi karena tambahin hei 50 50 viha di card tambahin rapper kayak gini biar bisa ke tengah kayak gini kalau kita inspek kita cek lagi responsif mode mobile Hai hai Hai hilang anjir hilang satu busa dah nggak usah lah ngosot ditengah nggak jadi-nggak jadi nggak usah-nggak usah Napa ya Kok hilang rapper kita hapus lagi Sorry buang waktu lu apa-apa sambil belajar Oh karena karena 50% kali kalau ini gua 100 taruh-taruh-taruh pusing ya mohon maaf ya Hai kalau pusing mohon maaf Hai inspect Hai mobile version Iya bener karena itu tapi image gua kan kagak nolong Pak image gua 100 viha gua taruh 200 viha coba nah bolehlah panjang amat anjir ini 120 coba 150 Hai segini boleh merin ah jelek ah udah nggak jadi nggak jadi ini 100 balikin lagi balikin lagi nggak jadi nggak jadi Sorry waper hapus dari sini juga waper hapus ini ya nih ini hapus di ini dan itu di baris kelima-lima ini hapus baris kelima-lima hapus hapus hapus save refresh terus card-card container terus card ini enggak usah pakai 100pih hai hai Hai refresh dah Biarin aja Hai mah main-main lah usah main-main udah gini aja Hai tinggal satu lagi footer ya Bro kita tambahin footer alas ya Apa ini abis Mouse gue mau sebuah abis ayo bentar lagi bentar lagi footer kita tambahin di area sini kita bikin di bawah kontainer ini di diluar paralaks ini ya di V yang ini kita bikin footer tutup disini footer taruh disini H3 atau P-nya kita kopas yang ini aja set terus ini sip save cek lagi Fred ada di sini ya kita buat dia menjadi ke salah dengan cara footer ini kita modif hai hai Hai di sini titik food eh sorry enggak pakai titik footer kayak gini kita kasih padding dulu padding 20px cek browser kayak begini terus kita kasih di margin 0 auto titik koma terus kita kasih teks line center Hai Enggak usah pakai margin-0 auto ya Maaf langsung aja gini juga bisa refresh dia ada di tengah dan kita kasih background nya titik 2 warna kita punya orange coba titik koma cek browser ah mending biru lagi deh jelek orang mah biru lagi dah ini aja hai hai Hai taruh sini tempel titik koma Hai colornya itu ya ya ya refresh nah ganti teksnya jangan Hello dia Frizal tapi jadi follow saya atau apa ya website copyright copyright copyright to apa di sininya at copy Hai eh ncopy sorry ncopy titik koma kayak gini dia Afrizal website 2022 save refresh Nah jadi ada ceknya gini ya dia Afrizal website 2022 Hai terus ini udah animasi kita ketika klik tentang dia bakal nge-scroll ke sini Atau klik hobi Ini akan masuk sini Ini bukan hobi berarti anjir Ini bukan hobi Ini tuh jasa lah ya Jadi ganti Ini hobi jadi jasa Terus tentang itu kita ganti jadi Hapus aja gak usah ada tentang Sorry hapus aja ini Biar dua biji aja Hai nah refresh pas klik jasa kita turunkan ke sini maka kita bikin ini yang pelayanan nonstop ini kita kasih kontainernya atau cardnya kita kasih ID sama dengan jasa gini Hai idea sama dengan jasa dan disini revnya kita kasih jasa di sebelah pagar eh Jadi kalau kalian refresh sekarang terus kalian klik jasanya dia akan loncat ke sini langsung tapi enggak smooth supaya smooth itu kita masuk CSS taruh paling atas disini ketik aja Scroll behavior your smooth di koma Hai Scroll behave behavior behavior bener gitu nulisnya gini ya semoga saja benar tercoba refresh lagi bukan eh Scroll behavior CSS behavior enggak pakai urur BH Scroll behavior gini Bro refresh nah ya klik tuh jadi gitu Tengok, nah Hai Tel Alright terus ketika klik kontak dia akan pergi ke Instagram gue aja atau ke email langsung email ya maka disini mail to the email to mail to gimana ya Gue lupa lagi anjing browsing juga mail to ahrefs Hai mana formatnya mail 2.2 Hai mel 2.2 Oke mail 2.2 dia code at Gmail at iCloud.com begitu jadi pas diklik kalau kita save dan refresh ini Awasin di flash ya kontak dia akan membuka email tuh aplikasi email langsung gitu ya kalau logo dia masih diam maka kita coba pas klik logo dia biar nge refresh websitenya gitu ya coba pas di logo ini kita bakal refresh websitenya atau ya boleh lah hmm atau logo gak usah bisa di klik kali logo klik jangan ya logo-logo aku pakai gambar aja deh sini kita taruh di sini bikin baru IMG atau div disini div dulu per div sini terus masukin H1 ini ke dalam divnya lalu disebelahnya sini kita masukin IMG src alt logo slash tutup src nya dari aset slash icon slash gua punya logonya yang mana ya partner aja deh partner.png kalau lu save ini akan jelek pasti akan rusak refresh nih lihat tuh ya rusak ya jadi gede gini kita perkecil ini adalah kelas sama dengan logo strip IMG yang ini logo strip title ditambahin ya save cek lagi ke style dan di style itu ada logo yang tadi diganti jadi logo title untuk yang ini satu lagi dot logo IMG bener kan logo IMG logo IMG bener kita bikin dia widnya itu 25 atau 35px heynya 35px save cek lagi ke browser refresh jadi seperti ini hai lalu untuk margin-right auto nya kita pindahkan ke sini ya save refresh Boom wet what what Oke taruh di dalam di sini kelas logo Hai ke jadi di dalam kelas logo ada logo image dan logo title maka margin-raik auto ini kita cut ke bikin satu disini. Logo tutup kayak begini dalam sini margin-raik auto save cek lagi ke browser refresh dan sudah semula tapi disini jelek maka kita bikin dia menjadi kiri kanan dengan pakai display titik dua flex save Hai reload dia kiri-kanan kayak gitu ya yuhuu ada logo salam lumayan dan margin leftnya di sini kita kasih gap ini bisa kita hapus yang margin-left kita hapus yang di logo title title sini lu bisa pakai gap taruh aja se-20px save refresh ada jarak tuh sama aja tinggal di logo IMG di sini kasih padding titik 210px refresh esno jangan padding tapi margin-left aja margin-left titik 210px cek browser dah jadi enggak terlalu mojok ya segitu gapnya terlalu tinggi jadi gapnya kita taruh di 6px aja Hai segini cukup Hai nice ganti kata-kata logonya jadi nama lu Hai dia dea xx itu artinya pertama bikin website ceritanya dea x dan kalau mudah responsif kita cek versi iPhone kurang lebih kayak gini jasa kontak follow dan kayak begini lumayan Lalu ketika klik mari kerjasama kita arahin ke mail juga sama. Biar nge-email langsung ya. Nah ini button ini.
Ayo kita arahin pakai javascript kah hano atau pakai ya udah deh kita kasih fungsi on click lah on click ya gini terus kasih string gini ketik aja alert kayak gini terus di dalam sini pakai string Hai eh silahkan kontak nomor berikut 082110 seset save ya on click sama dengan alert dalam kurung yang begini-begini enggak apa-apa jelek dulu reload coba coba diklik Mari kerjasamanya berfungsi atau enggak muncul silakan kontak nomor berikut misalnya gitu ya biarin gini dulu aja Hai terus em pas diklik follow saya kita Arahkan ke follow saya nah ini kita akan ke alat lagi sama ajalah yang on kliknya ini kita copy masukin ke atau kita bikin javascript kali yuk bikin javascript aja deh di bawah sini tulis disini script tutup script Hai taruh di sini adalah redirect redirektur aja bikin function redirektur gitu terus gini terus disini window.location.ref sama dengan ke mana redirektur Instagram gitu ya ini taruh ke https.instagram.com slash deadit afriza gitu terus satu lagi function kontak itu tadi ke WhatsApp ya redir WhatsApp window dot location.rev wa.mi wa.mi itu apa sih Hai adotmi eh adotmi teks ter-2 browsing belum ini waduh minumernya itu berapa plus sama dengan skin skin oke wa.me slash plus 628 1 set set set set set set kayak gini misalnya oke ada redir instagram redir whatsapp ini function di dalam javascript yang kita bikin jadi tombol tadi yang kerjasama kita arahin ke redir whatsapp lalu tombol follow kita arahin ke redir instagram jadi kita alert ini kita hapus red kita bikin pemanggilan ke function yang tadi itu nama functionnya apa redir whatsapp pake gini, save yang satu lagi button cta yang follow saya on click, ketika di klik dia akan arah kemana redir instagram pake kurung kurawal kayak gini kalau udah di save, reload lagi Follow saya klik langsung kebuka Instagram Tuh Instagram gue Langsung pindah Nah langsung sini kan Terus kita back lagi Kalau ini Mari kerjasama maka akan kebuka Whatsappnya Oh HTTPSnya lupa pak Mohon maaf HTTPS Slash slash kayak gini Nah, jadi fungsi ini tereksekusi ketika on klik di tombol yang tadi kita punya. Mari kerjasama, klik dia akan open WhatsApp dan bisa nge-chat langsung ke si nomor ini yang kalian tulis gitu ya. Mantap sekali bukan? Dan di sini follow saya, itu langsung ke Instagram.
terus kontak kita arahin ke email lalu jasa kita arahin ke bawah sini dan udah kayak gitu kita urus responsifnya sedikit bro jadi ketika versi mobile itu gue pengen jasa dan kontak itu ada di bawah gak usah di atas so kita masuk lagi ke sini Hai nah disini ketika versi mobile maka li nya gua pengen dia positionnya atau naf-naf nya dulu deh nafnya itu position dia ada di bawah secara fixer eh mungkin kayak gitu fixer position fixer abs apa ya batam detik nol background kita kasih backgroundnya masih sama kayak gini set index nya kita ke titik 29 terus terus kita coba save dulu reload maka jasa kontak ada disini tapi kan jelek nih dia ngambang gak jelas gitu ya yang diatas follow nya jadi kayak gini ini kita gimanain bentar kita padding nya kasih gak terlalu gede lah 10px astagfirullahaladzim padding 0 gede amat nav ul sepertinya bukan nav ul sorry widthnya kita set dulu sorry banyak salahnya gue 100% nah tuh kayak begitu bro tapi kalau versi desktop aman dia ada di atas pas versi mobile dia pindah ke bawah dan ini kayak gini terus yang di atas ini kan begitu ya Hai ini tuh masuk ke bagian sana nggak papa lah ini udah bagus ya begini tapi footer Aing jadi nggak kelihatan bangke footer gua kagak nongol jadinya footer kita taruh sama sini fu koma footer no kita bikin lagi di bawah sini footer Ayo kita kasih margin bottom 100px Hai eh 80px 70px nah gitu ya Oke, jasa dan kontak sudah pindah sini. Dan sudah berhasil. Kontakt langsung email. Kurang lebih kayak gini permainan websitenya. Mari kita naikkan ke server cloud.
Pertama mungkin kita... Gue pakai dua opsi. Yang pertama replit seperti biasa. Kalian bisa dibuka di google. Replit.com Buka ini aja.
Terus kalian create. Daftar dulu kalau belum punya. Create. Cari aja ini tombol create sebelah sini. nah ini berdasarkan koneksi ya terus koneksi internet maksudnya harus aman jangan jelek kalau jelek kadang-kadang error ini klik HTML CSS dan kasih nama disini web tutorial web pertama anda web pertama lu dah tutorial web pertama lu klik disini klik kan muncul kayak gini Right, muncul kayak begini, tungguin lama memang HTML ini, atau buka folder lu Lu tarik semua yang ada disini Ini block, masukin sini lempar, pret Kalau tungguin sabar jangan di klik dulu apa-apa bro, nanti muncul notif dia Nah muncul notif, overwrite, yes, overwrite, klik aja yes Langsung seperti ini kan ada, codingan kita masuk Jangan lupa klik tombol run Lalu dia ada dan ini adalah linknya.
Link ini bisa kalian copy. Terus lo simpen di notepad lo sendiri. dan lu share link ini adalah link website yang lu punya itu cara paling gampang pake replit ini bisa diakses oleh siapapun dan kalo gua buka disini gua enter ini lu bisa buka juga cek aja di deskripsi linknya ya nah terus kalo dibuka di hp kurang lebih jadinya kayak gini sekaligus gua buat intro juga ya nanti tapi tunggu nah ini buka di hp nih itu kayak begitu masih ada yang belum perfect sih ini kalau di hp dia belakangnya gitu oke oke oke I understand so sedikit lagi berarti kalau dibuka di hp gua pengen warna cardnya itu transparan biar lebih joss gandos warna cardnya itu background titik dua non jadi kalau kita refresh ini Hai kayak gitu atau jangan nending opacity kali opacity 0,2 0,8 0,9 Alright sepertinya cukup mantap kayak begini pun cukup mantap lah jadi kalau versi mobile dia ada opacity nya tapi kalau desktop enggak ya kayak gitu ya haig nya kita setting juga di card item lupa gua setting haig taruh di 300px kegedean 200px max haig ini min ya minheg 200px, maxheg nya 300px refresh, aman oke, oh versi mobile tambahin lagi dikit footer z-index nya 9 juga eh, margin bottom, margin top juga kita tambahin margin top 70px nah biar kayak gitu Bro jadi jetindex hapus aja oke nice Sekaligus gua ajarin update nya, jadi kalo udah update ya kan, ini kan tidak update tuh tadi footernya masih belum kayak ini Websitenya tuh masih kayak gini ya, kalo mau update ya udah lu tinggal tarik lagi aja yang tadi bro Seluruh ini lu tampak sini, override, terus run, dan nanti akan terfix dengan sendirinya Hai Nah tuh ya reload tuh thread tadi kan ada opacity ya Nah ada opacity kan begitu mayan linknya tetap sama kok linknya tetap sama dan gua akan naikin lagi saat ke satu hal ke GitHub gua akan create new repository sini kasih nama tutorial web Hai pertama lu untuk non-it ataupun tutorial otodidak deh otodidak web pertama lu kini nih udah oke aja lalu disini gua pakai git ya atau pakai terminal Windows PowerShell disini di foldernya shift Klik Kanan Open for sale Hai sini gua git init Hai terus gua masukin ini sintaksnya gua kopas aja tempel enter Hai terus git adridmi terus git add bintang git commit min M4 YouTube tutorial git branch min M main git push min u origin main oh git remote nya lupa remote dulu enter lalu ini dan akan naik kesini gue refresh dia akan ada kode gue disini kalian bisa cek ntar linknya gue taro di deskripsi juga terus gue buka versel Hai gua akan upload ini ke versi l-e gua pakai punya gue and new project import disini namanya tutorial otodidak diapriza ini import dan isekai deploy Hai tungguin jadi nanti bakal punya dua website yah 22 link berbeda ini udah jadi kongretulasi dan kalau gua buka websitenya ini dia websitenya dan ini domainnya ya jadi gue punya domain di sini website pertama gue ini yang kedua ya website pertama saya hai hai Ada, ntar gue masukin deskripsi nih Ada dua, lu bisa pake-pake yang mana bebas Ini kalo klik jasa Oke, selesai sudah kurang lebih seperti itu saja Mari kita review dulu ya untuk di ending ini Eh, untuk di ending Biar gue masukin intro Youtubenya dulu Halo cuy, jadi di video kali ini kita akan membuat hal yang seperti ini Pertama ada navigation bar buat kalian yang Belum pernah bikin website.
Gue jamin bisa banget bikin website dari nol. Ngikutin gue kali ini. Biar bisa jadi yang kayak beginian. Profile pribadi sendiri. Masing-masing apa namanya nih.
Standar gitu ya. Tapi nikmat lah intinya mah. Cuman pake HTML CSS. Tapi semua orang bisa melakukannya. Bahkan non-IT pun.
Ataupun yang gak sekolah pun bisa juga. Anak SD juga bisa harusnya. Klik jasa itu bakal scroll ke bawah kayak gini. Terus ini ada card.
Ini ada foto yang kayak terbang gitu, kebuka gitu ya. Syung, kayak begitu. Terus ada footer dan segala macem.
Kalau klik mari kerjasama dia akan pindah ke WhatsApp. Langsung ngechat ke nomor WhatsAppnya. Kalau kita klik follow dia langsung ke Instagram.
Instagram gue nih ya. Nah, terus kalau kita klik kontak dia bakal ngebuka email. Terus kalau kita geser mouse-nya ke sini dia akan agak gejet kayak gitu tuh.
Kayak gitu-gitu. Dan kalau kita versi mobile. Kita buka versi iPhone. Dia tampilannya menjadi seperti ini.
Kalian perhatikan. Dia ada di sini, ini di sini. Kayak gini cukup mantap responsif dalam waktu berapa jam ini?
2 jam aja ya kalian bisa bikin website ini. Dan perhatikan ini jasa dan kontak jadi ada di bawah. Yang mana tadinya kan dia tuh ada di atas ya. Kalau kalian lihat.
Nih. Tadinya kan di atas bro. Nah di atas ini jasa kontak Tapi pas versi mobile Dia akan pindah ke bawah sini Dan ini footernya Dan di atasnya jadi kayak gini Ini versi desktop Ini versi mobile Dalam waktu 2 jam Kalian bisa bikin yang kayak beginian Kalau ngikutin dengan baik Disiplin dan saksama bro ya Jadi kita langsung mulai aja Masuk ke videonya, tapi sebelum itu gue info juga bahwa Ini website sekaligus juga sampai di ending nanti itu Kita deploy ya, deploy itu kurang lebih Nge-publish website ini ke internet Yang mana kalian bisa share linknya Ke temen-temen kalian, dan disini gue udah punya Linknya, ada 2 biji Ini hasil tadi selama kita record ya bro Ada 2 biji gue deploy ke Replit, satu yang paling mudah Dan gratis, dan kalian pun dibimbing nanti Sama gue di akhir video untuk bisa Nge-upload gitu ya, plus satu lagi Ke Vercel disini Jadi intinya Nge-upload Gas aja ke tutorialnya langsung sekarang, kita cuma pake HTML, CSS, dan Javascript sedikit aja Plus disini tidak pake software aneh-aneh, kalian semua bisa download softwarenya gratis Sama cuma pake Notepad++ doang yang biasa dibully sama programmer-programmer lainnya gitu Tapi intinya, kalo belajar mah apapun, yang penting gas gitu ya Ini PC kentang juga bisa pake software gini-ginian mah, yang penting bisa ngoding Gas kuy, kita ke tutorialnya langsung sekarang kuy Dah bro kayak gitu aja itu endingnya Riuh banget ya Semoga bermanfaat Jangan lupa nonton terus video gue Share juga ini linknya Semoga semua orang bisa bikin website sekarang ya Dan responsif kayak gini Jadi standar pro gamer akan naik Bye bye semuanya Thank you