Ya kita mulai aja sekarang masuk ke playlist semester 1 di channel gue Jadi di semester 1 ini ya anggap aja lu kuliah online di CUY University ya ceritanya Jadi biasanya kalau di kampus-kampus semester 1 nya itu kita belajar bikin website Ya Den ya? Website apa? Semester berapa kamu?
Semester 2 Nah kalau di gue sih ya kita belajar websitenya semester 1 Nanti di semester 1,5 atau semester 2 itu agak-agak Naik gitu levelnya kurang lebih Website masih tapi lebih ke dalamnya lagi Jadi sekarang luarannya dulu oke Gue tekankan lagi disini Ini ya mungkin kayak format full course gitu Gue gak akan edit videonya Dan gue lagi agak pilak sedikit Jadi sorry kalau nanti ada suara-suara gangguan dari sini Atau dari gue pribadi Gue gak akan edit videonya Kita belajar bareng aja dari nol Dan gue tekankan lagi bahwa Semua orang bisa mengikuti ini Termasuk lu yang non-IT pun Bisa mengikuti tutorial ini Tanpa mesti install apa-apa dulu Karena Untuk membuat sebuah website itu sederhana Dengan spesifikasi komputer Yang biasa pun itu bisa bikin Dan bisa belajar untuk noding Jadi intinya dari video ini Semoga orang-orang yang di luar Area programmer Atau non-IT itu bisa mengikuti Apa ya Perkembangan teknologi di dunia programmingnya itu sendiri mulai dari noding website yang sangat mudah dulu jadi disini kita bakal coba pake 2 hal yang pertama HTML dan CSS kita akan mempelajari HTML dan CSS luarannya dulu so buat kalian yang udah kenal gue yang subscriber lama gitu yang udah biasa nonton React.js lah, Javascript dan kawan-kawan yang gitu-gitu mohon maaf ini videonya sepertinya bukan untuk kalian dulu ya mungkin ya jadi ini lebih untuk yang baru kenal gue atau yang mau belajar banget dari nol kurang lebih kayak gitu ada satu hal sih yang mesti di install sebenernya yaitu text editor jadi buat yang belum tau kalau coding itu butuh yang namanya text editor ini gue zoom in dulu text editor text editor itu apa? text editor itu untuk kita melakukan coding mengcoding gitu ya bro untuk coding mengcoding terus yang kedua kita butuh koneksi internet takutnya kita butuh panduan ataupun apa ya sebutnya Kayak semacam library kalau di dunia kita gitu untuk kebutuhan kita mengkoding Jadi internet dipastikan ada aja Ataupun kalau nggak ada juga ya bisa-bisa aja Tapi saran dari gue sih internet ini opsi ya Opsi untuk kalian gimana ya menjalankan koding-koding supaya lancar pakai internet Yang ketiga spek komputer atau spek PC atau spek laptop itu Untuk web dasar belajar ngoding bebas apa aja Ini gue sambil merokong nggak apa-apa ya Bebas apa aja, yang penting sih kalau menurut gue ya minimal RAM-nya 2GB Udah gitu doang, yang penting ada RAM-nya Ya masa komputer atau laptop gak ada RAM-nya? Gak bisa nyala ya pak ya? Jadi minimal ada RAM-nya atau komputernya nyala lah normal gitu Nge-lag sih gak apa-apa, kalau nge-lag ikutinnya pelan-pelan Udah, tiga ini doang Yang akan kita pelajari adalah HTML HTML dasar banget plus CSS Jadi kurang lebih kayak gini, HTML itu adalah dokumennya untuk kita bisa bikin sebuah website CSS itu adalah stylingnya.
Jadi kalau kalian buka website kayak Tokopedia lah, atau Google lah, atau apapun itu, Instagram.com, tampilannya bagus ya kan? Kenapa? Karena ada CSS-nya, atau Cascading Style Sheet, kurang lebih kayak gitu singkatannya. CSS ini fungsinya untuk memodifikasi apa yang kita lihat gitu.
Kalau dokumen HTML, HTML-nya itu sendiri formatnya itu dokumen untuk menampilkan list-list media yang kita punya. Contohnya, gambar, terus... Terus teks, terus apa yang gitu-gitulah media ya Teks, gambar, suara, video itu bisa di HTML CSS memodifikasi format si HTML-nya Supaya bentuknya sesuai harapan, sesuai apa yang kita inginkan Website yang canggih, yang bagus tampilannya itu berarti kreativitas dan imajinasi si developer-nya Untuk masalah CSS-nya berarti dia sangat-sangat pro gitu kurang lebih Atau punya referensi yang bagus Nah di video ini kalian akan belajar kedua hal ini HTML dan CSS Sekaligus kita langsung To the project juga gitu Jadi bikin Sesuatu hal Pake HTML CSS Plus kita belajar Inti sarinya apa aja sih Kurang lebih untuk bisa bikin Website kayak gitu Bentar ya Sebab dulu Ya kalo udah kayak gini Kalian download dulu Visual Studio Code nya Download VS Code Ketik aja di Google Download VS Code Ya bro ya gue gak akan Nunjukin cara install VS Code nya Tapi gue harap sih Lu udah pada bisa Hai instalasinya tuh kayak gimana lu bisa lah mungkin ya karena udah zaman 2022 masa nggak bisa install software gitu kan klik ini terus nanti kan diarahin nih Nah kalau diarahin kayak gini lu sesuaikan lu pakai yang mana kayaknya sih kalau gua tebak kalau enggak lu Windows ya lu Mac aja Linux juga tapi kalau Windows sistem operasi komputernya download yang ini ya Windows 8 10 11 atau Windows 7 lu mesti ngedownload ke arah ke arah mana ya nah ini getpreviews version kali atau yang mana atau ya nggak tahulah pokoknya lu klik aja download cari di Google download Visual Studio Code sesuai sistem operasi lu kalau misalnya Windows 7 lu ketik di Google Visual Studio Code download Windows 7 kayak gitu, ntar muncul tuh si QIHA atau si Giga Purbalinga Atau si Bagas atau si siapa lagi Yang gitu-gitu ya Gue sarankan sih downloadnya di ini aja, website resminya ya bro Ya kalau udah download kita mulai coding Untuk mulai codingnya juga sederhana Kita buka desktop aja Simple ya, desktop sini Kalian klik kanan, terus new folder Ini klik ya, new foldernya di klik Terus kasih nama aja Website strip pertama, gini boleh website pertama terus kalian buka kayak gini ya, kosong kan ini yang gak ada apa-apanya betul?
gue selalu mention di setiap course gue gue selalu menyuruh kalian untuk mencet view ini terus kalian buka ini nih ini centang nih, file name extension ini centang, supaya kalian bisa tau setiap file yang ada di dalam komputer kalian itu extensionnya apa, apakah Titik HTML, apakah titik XC, apakah titik apa Kita contohkan Kalau ini gak ada Gue new text document disini Maka seperti ini Oke Kalau gue disini centang Terus gue klik kanan New text document Ada di ujungnya jadi.txt kayak gitu Kalau gue disini ketik index Titik txt nya diganti jadi HTML Gue enter Terus muncul seperti ini kita yes Maka akan berubah menjadi browser Betul sama Kalau kalian double click ini Tidak akan terjadi apa-apa kosong Kenapa? Karena belum kita coding Kita sudah menciptakan satu file index.html Yang ini by the way dihapus aja ya Delete aja delete Delete gak penting gak kepake Yah jangan lupa ini centang ya bro Biar enak Ini kalau kita klik kanan Open with Visual Studio Code, kalau kalian udah download Tapi kalau belum download, download dulu Atau pakai apapun itu boleh Kalau lu ngerti text editornya yang bagus apa aja Terserah lu, tapi kalau gue pakai Visual Studio Code Kalau lu gak muncul yang ginian Gue kasih opsi yang lain, yang paling mudah Kalau udah install VS Code, kalian ketik Ketik lagi apa? Klik Windows di keyboard kalian Terus ketik VS Code Muncul seperti ini kan Atau buka VS Code yang udah kalian install Klik aja, nanti kan akan muncul Blank seperti ini ya, bener? Get started sini, Visual Studio Code, Editing, Envolve, dan segala macam New file, open file Yang perlu kalian lakukan adalah Close ini, buka yang sini Oke, kelihatan gak? Kelihatan ya?
Buka Muncul seperti ini Tarik folder ini yang ada di desktop ke dalam VS Code Ini kita minimize dulu semua Foldernya ada di sini Kalian tarik, masukin ke sini Nah, sampai kayak gini Bread, oke? Hasilnya seperti ini, terus kalian ini tutup lagi, kalian buka yang gede, track, pencet index.html sini 2 kali, muncul kosong, kalian zoom in, ctrl plus plus di keyboardnya, ctrl plus. Jadi akan terzoom in seperti ini. Gimana, udah sampai sini belum? Kalau udah sampai seperti ini, kita bisa format HTML dokumennya pakai VS Code dengan cara...
Otomatik seperti ini Kalian ketik tanda seru Muncul tanda seru Terus pencet control space Seperti ini Akan muncul yang kayak gitu ya Apa namanya tuh Obeng gitu ya Lu klik obengnya Maka akan muncul seperti ini langsung Ini format dokumen bawaan HTML Terus ini di facecode bisa digeser-geser juga ya Kayak gini Kalau lu kagok gitu loh Lu bisa geser-geser ini Oke Ini format standar HTML nya Untuk kita bisa ngoding Kalau kita disini Ini masukin sesuatu kata-kata misalnya disini hello brai kayak gini ya, di dalam body ini ya Terus lo save Ctrl S Pencet save nya Ctrl plus S ya Atau file Save Atau auto save ini centang Boleh Dicentang supaya automatic save Jadi kalau ada perubahan Apa namanya Codingan disini Akan otomatis save Pas kalian buka browser lagi yang tadi Ini kan masih yang tadi nih Ini kosong Kalau lo refresh Maka akan muncul disini Hello Bri Kayak gitu Itu tahapan awal Untuk bisa bikin dokumen HTML Nah ini tuh Ini tuh sebenernya udah website Tapi kan masa iya website kayak gini Bener Ini udah bisa dimasukin ke server juga Ke hostingan lah Atau ke apa Untuk lu Share ke temen-temen lu Promoin dan segala macemnya Aduh ini mata gua agak perih Jadi agak-agak pilok Sorry ya Agak perih tadi abis dari jalan bro Yuk lanjut lagi lah Kita akan memodifikasi ini Dengan belajar dari 0 ya Format HTML nya Jadi kita gak akan pake shortcut-shortcut seperti tadi Ini kita hapus Diblok aja gini Tarik mouse lu Terus lu delete Kayak gini Kita mulai dari Eee Dari sini pelajarannya Untuk bikin website Ini standar banget Untuk pemula banget lah pokoknya Ketik tutup seperti ini Yang artinya Kalau kalian ngoding-mengkoding web Tutup seperti ini adalah blok pertama Blok pertama dari sebuah website Dari sebuah kodingan lo lah gitu kurang lebih Ketik HTML Walaupun muncul ini biarin aja Lo tutup seperti ini Nah akan muncul lagi tutupan yang baru Tapi kalau nggak muncul lo mesti ketik manual Gitu nah kebetulan VS Code gue itu udah pake extension beberapa extension yang gue pake untuk mempermudah gue ngoding apakah kalian mau pake extension yang kayak gue atau mending ngoding dulu? mending ngoding dulu ya biar gak pusing ya takutnya kepusingan juga gitu jadi beneran manual aja ngodingnya gue matiin dulu extension gue ini lu cuekin aja gak perlu lu ikutin gue ini ya yang disini lu gak perlu ikutin oke, udah ini ulangi lagi minus, eh bukan minus apa? kurang dari HTML tutup lah kebuka lagi ya udahlah pokoknya begini ya ini kalau udah lu tutup itu padahal extensinya udah gua tuh udah gua disable anjir apa mesti reload dulu ya nggak usah sepertinya ya udahlah gini ya kalau ini udah lu tutup lu mesti nutup manual seperti ini sret slash HTML gitu loh diketik lagi nah tanda ini adalah tanda penutupan blok elemen HTML nya Jadi HTML ini adalah luaran dari format dokumen kita, dokumen HTML.
Jadi lo enter kayak gini. Ini kita belum bisa mulai ngoding nih, karena ini baru satu blok luarannya doang. Sedangkan kita untuk ngoding HTML itu syaratnya di dalam elemen body gitu ya. Terus elemen kedua yang mesti kita pakai disini adalah head.
Ketik head, sama aja tahapannya, tutup. Terus diketik lagi kayak gini, tutup lagi. Jadi slice ini tuh penutup awalan ini. Ini kodingan awalan.
Ini codingan penutup Ini codingan awalan Ini codingan penutup Nah si HTML adalah parent dari segala codingan kita Atau dia tuh orang tuanya gitu Parent ya bro Atau komponen yang terluar gitu Untuk membungkus isi dari codingan kita Supaya nanti di browser bisa tampil codingan kitanya Karena kita formatnya HTML Seperti ini Ini kenapa ada merah-merah bang? Biarin Karena ada syarat yang mesti kita masukin lagi Tapi itu opsional Alias boleh iya boleh enggak Jadi biarin aja itu merah Nah untuk head sendiri Ini Itu nanti kita isi, tapi kita ketik lagi disini Satu hal yang perlu kita ketik adalah body Tutup dan keluar kayak gini Slash, seperti biasa ya Jadi kurang lebih ada 1, 2, 3, 4 baris Yang mesti kalian coding pertama kali untuk bisa bikin website Dari nol belajar coding Dari yang non-IT pun, dari yang bukan programmer pun bisa ya Kayak gini dulu Codingan kita ada dimana nanti untuk bisa tampil ke browser Ada di dalam body sini Jadi di lembo disini lo enter sebanyak 1 kali dulu aja. Terus kalian ketik lagi disini.
La la la ye ye ye. Misalnya kayak gini. Lo save.
Control S jangan lupa. Atau file. Save.
Gitu. Buka lagi browsernya. Tadi masih Hello Bride sekarang refresh. La la la ye ye ye. Udah sama ya kayak gini ya.
Ini gue zoom in by the way. Browsernya sebanyak 200%. Jadi kalau gede kayak gini karena gue zoom ya. Biar kalian bisa lihat hasilnya.
Kalau udah kayak gini, kita pakai beberapa elemen HTML yang biasa dipakai sama manusia. Contoh pertama, misalnya kita mau bikin tabel. Ketik aja kayak gini, tabel. Terus tutup tabelnya. Tutup kayak gini.
Tutup tabelnya seperti ini. Mainannya blok-blokan. HTML bloknya di sini. Body ini tutup bloknya ada di bawah sini. Benar?
Kayak gitu ya. Tabel tutup bloknya ada di sebelah sini. Kalau tampilannya agak sedikit beda VS Code-nya, nggak usah lu pikirin. Yang penting codingannya sama.
Tampilan VS Code-nya beda, gambarnya beda, apanya beda, cuekin aja. Yang penting codingannya sama, maka hasilnya pun akan sama. Kalau udah kayak gini, lu enter tabel. Coba di sini ketikin lagi TR.
Sret kayak gini ya. Oke, TR. Jadi tabelnya di-enter dulu, TR.
Terus ini taruhlah judul. Terus lu enter lagi ke bawahnya. Hai tr tutup lagi isi coba kalau udah kayak gini lu save Lihat lagi ke browser, ini untuk pemanasan aja ya dulu ya Refresh Maka akan tercipta seperti ini Bener? Judulisi langsung gitu Padahal kita udah masukin format tabel kesini Kenapa bisa kayak gitu? Sekarang kita cobain dulu Disini T-Body atau T-Head dulu T-Head atau tabel head itu disebutnya Tabel head, enter Coba lagi kesini Tabel body Hai enter Oke tabel head ada TD di dalamnya kayak gini kasih judul Oke kayak gini dulu terus tabel body di dalamnya ada TD isi misalnya kayak gitu boleh yang tadi kita hapus dulu codingan ini seharusnya bisa membuat browsernya menampilkan sebuah tabel sesuai seperti penggoda King Mulai dari blok tabel paling luar, kepala tabelnya, isi tabelnya.
TD adalah nilai dalemnya gitu kurang lebih ya. Kalau di save kita cek lagi ke browser. Refresh. Maka sekarang udah berubah ya, gak kayak tadi. Jadi ada yang di atas, jadi ada yang di bawah.
Bener? Sama ya? Karena judul di THead dan isi di Tbody.
Sekarang kita cobain. Di dalam sini kita kasih TR. kayak gini, eh sorry di dalam sini ini enter dulu tr, tutup kita kasih judul sama aja kayak tadi, cuman kita bungkus di dalam tr yang ini juga sama kita bungkus di dalam tr hapus isinya enter, di dalam td ini kita bikin tr tr, tutup nah kita kasih isi save Atau kebalik ya, TRTD Biasanya TRTD, tapi gak apa-apa Kita coba dulu ya Buka, refresh Kayak gini lagi, maka kita balikin Sorry, gue lupa ya Yang ini jadi TR Ini ketik aja yang ini jadi TR Oke, yang ini tutupnya TR Yang ini jadi TD Ini TD Nah, yang ini juga sama TR Ini TR Yang ini jadi TD TD Save Coba balik lagi Refresh Nah ini baru bener Sekarang ini buat apa bang kayak beginian Ini tuh ceritanya tabel Karena kita belum masukin sesuatu kesini Jadi tabelnya gak keliatan apa-apa Coba kalau gue disini ketik border seperti ini Ya lo masukin angka 1 aja Coba dulu ya Save Sebalik lagi ke browser Nah kelihatan judul isi ada ya udah berubah seperti itu ya tabelnya udah mulai kelihatan Nah jadi kalian ketik disini border sama dengan 1 yang artinya border itu garis luar dari isi yang ada disini Kalau di dalam t-headnya kita kasih border, eh gak ada gak bisa bro Bordernya itu di dalam table, di t-head dan lain-lainnya itu kita modifikasi pakai CSS kita sendiri aja Sekarang kita coba perbanyak lagi Hai ini ada judul terus disini kita kopas atau ya lu boleh kopas ini kebawah kontrol c ya di blok dulu kontrol c sini terus tempel paste ini rapihin lagi nah pencet tab aja ya rapihin lagi ada judul ada apalagi biasanya ya kalau udah judul durasi misalnya kayak gitu satu lagi kita kopas copy tempel sini paste tap tap tap tap tap tap kayak gitu Terus disininya misalnya Apa ya Judul durasi kategori misalnya gitu Kategori Oke Dalam 1 TR ada 3 TD Ya kayak gini Terus yang ini pun sama Kita masukin yang lain-lain Ini kita copy lagi Ctrl C Enter Past T Kalau kayak gini lu format aja biar enak gitu Nah kayak gini ya Past T lagi disini Hai pencet tab dulu terus begini rapihin Jadi kalau modding itu mainannya blok-blok kan bro ya blok-blok kan ini blog dalam sini ini dalam sini dalam sini jadi semakin ke dalam itu adalah cilnya atau cil apa apa caranya yaitulah anaknya pokoknya pakai gitu nah ini ada tiga TD nya maka isi dari T-Body T-D-nya pun 3 juga biar bisa sinkron ke yang atas gitu kurang lebih kita cobain disini ya judulnya misalnya Fast Furious Fast Furious aduh anjing susah nulisnya Harvest Moon aja deh Harvest Moon terus durasinya misalnya 4 jam 30 menit terus isinya yang kategorinya kategori game anak misalnya gitu lah Boleh lah ya Terus lo ctrl S atau save atau auto save Udah nyala mah yaudah Tinggal kita buka lagi browser Cuekin merah-merah ini kita lihat Sini nih gue zoom out dulu 200% ya Nah ini gue zoom out 200% Zoom in sih 200% Refresh Maka akan seperti ini Judul durasi kategori Harvest Moon 4 jam 30 menit game anak Semuanya sudah sesuai ya Jadi judul tuh judulnya Harvest Moon Durasi 4 jam kategori game anak Nah kenapa kita pelajarin tabel-tabel seperti ini? Karena nanti, kalau udah jadi programmer beneran ya yang di dunia kerja gitu Bermain data, banyak data, ya banyak data itu data tuh biasanya ditampung di dalam tabel gitu Kalau untuk kebutuhan hal-hal tertentu lah biasanya bermain tabel Dan tabel itu sedikit cukup memusingkan Jadi kita pelajarin itu dulu, konsep awalnya si tabel itu seperti apa Nah pokoknya kalau disini TD yang pertamanya judul Terus disini TD yang di dalam T-Body-nya apa isinya maka dia akan masuk ke judul kalau yang kedua maka akan masuk ke yang kedua sini dari T-body yang ketiga akan masuk ke T-head yang ketiga gitu kalau misalkan disini kita tambah satu lagi apa yang terjadi bang?
kita coba aja copas gini ya tambahan kita save jadi gak usah takut untuk mencoba ya bro buka lagi browsernya refresh atasnya kosong kagak ada apa-apa gitu loh supaya ada apa-apa di atasnya ya udah lu masukin lagi sesuatu ke atasnya sini ini copi copi copi tempel disini pas tekan ctrl V ya tambahan lu ganti tambahannya jadi misalnya beli kaset VCD nya VCD kayak gini misalnya save terus lu balik lagi ke browser refresh tuh kayak gitu gimana segini udah pusing atau belum harusnya nggak pusing ya codingnya cuman segini doang Sebelum kita lanjut ke yang berikutnya gitu. Jadi inti sarinya adalah. Kedalam-dalam kayak gitu ya. Nested.
Biasanya disebutnya nested. Gak terdengaran atau enggak nih. Nested. Kayak gitu. Oke lanjut lagi ya.
Sekarang. Yang berikutnya adalah. Kalau lu udah bikin hal-hal seperti ini. Tugas kita adalah.
menghapus semuanya menghapus semua ini karena kita gak akan pake tabel-tabel lah ini sebagai contoh pertama kalo lu bikin HTML tuh yang paling efek apa tanpa harus styling tanpa harus pake CSS yang paling efek kurang lebih ini gitu loh ya, atau satu hal lagi kita coba ya, biar kalian agak sedikit tertarik dengan sebuah website gitu, ini hapus dari tabel sini lu blok sampe sini, lu hapus coba ketik kayak gini, input Supaya user bisa ngetik nih Input tuh supaya user bisa mengetik User tuh pengguna yang ngebuka website dulu Ketik kayak gini Slash tutup Nah jadi ada dua nih Ada yang kayak tadi Ada yang kayak gini ya Ada yang kayak body gini doang Langsung panah-langsung panah kayak gini Ada juga yang kayak gini Input langsung ditutup Kalau body kan kayak gini Ditutupnya di sebelah sini di body yang lain Kalau ini tuh sama dengan halnya seperti ini input slash input nah sama dengan seperti ini tapi rekomendasi dari sononya itu kita jangan mengetik seperti ini tapi mengetiklah seperti ini gitu ya kenapa? karena nilai-nilai dari input ada di dalam satu blok ini doang gak perlu lagi kita ke dalam-dalamnya lagi cukup di dalam satu ini aja udah bisa menampung segala kebutuhan kita jadi ini kita hapus di dalam sini lo ketik aja coba type sama dengan Gue mention lagi bahwa titik, koma, spasi, curek, semuanya itu berpengaruh di dalam codingannya Jadi pasti bakal ngefek ke dalam apa yang lo buat Mungkin nanti ada yang error atau kayak gimana Gak muncul bang dan segala macemnya Coba diperiksa lagi Kata-katanya huruf gede kecil pun berpengaruh Spasi pun berpengaruh Kalau lo kayak gini pun ini bakal error gitu ya Jadi mesti bener-bener sama dan fokus lah intinya mah kayak gitu Coba type disini kita kasih type nya color coba ketik type color lo save, kalau udah lo buka lagi browsernya Refresh Apa yang muncul? Gimana udah coba? Ini kalian bisa klik Dan akan muncul seperti ini Betul?
Gila jago ngoding lu Belum ngapa-ngapain satu baris udah bisa kayak gini lu Bagus ya Nah ini Tidak akan berfungsi apa-apa Sebelum kita menambahkan yang namanya javascript Kedalam codingan kita Karena codingan kita cuma html doang Tidak akan bisa berinteraksi dengan usernya, kurang lebih kayak gitu. Tidak akan ada data, tidak akan ada logik. Jadi pure hanya format dokumen saja.
Makanya HTML banyak yang bilang bukan bahasa pemograman karena kita hanya memformat data, memformat sesuatu, memformat web kayak gitu. Nggak ada logik di dalamnya. Jadi cuma benar-benar lu tahu yaudah lu coding, lu jadi kayak gini gitu. Tapi yang logik-logiknya itu biasanya ada di JavaScript atau di bahasa pemograman yang lainnya.
Javascript adalah scripting language gitu ya Bahasa script Yang fungsinya untuk nanti kita bisa berinteraksi dengan Apa-apa yang ada di dalam browser gitu Kurang lebih kayak gitu tuh Kalau Javascript Tapi kita nggak sampai situ dulu Mungkin Javascript nanti di semester 1.5 Atau semester ya 1.5 boleh lah Udah ada playlistnya lu bisa cek gitu loh Cuman Javascriptnya belum dimulai gitu HTML dulu aja Kalau udah kayak gini Ini browser by the way boleh ya Lu mau pake browser apapun Adge Firefox, Chrome, bebas Gue sih pake Microsoft Edge Bawaannya si Windows Oke, terus Hal berikutnya, ya inilah Lu bisa tau RGB-nya berapa Lu kemana, terus lu gini, nah kalo pake JavaScript Intinya ketika lu udah milih Warna mana, set taruh lah kayak gini Lu bisa atur browsernya Background disininya tuh bisa lu ubah sesuai Warna yang ada disini, gitu Mau dicontohin jangan, gak usah ya, tutorial aja ya Tutorial aja lanjutin ya, gak usah ke situ dulu Fundamentalnya aja dulu ya Nanti pusing langsung masuk ke javascript Oke ini ada input type color Terus kalian bisa eksperimen banyak hal dengan input Jadi input itu untuk user bisa berinteraksi Tapi datanya nanti diolahnya bukan sama TML pastinya Oke Lu bisa juga coba date kayak gini Ketik ya, type sama dengan date Save lagi, lihat ke browser, refresh Akan muncul kalender seperti ini Gimana menarik bukan? Terus lu juga bisa ganti-ganti lagi jadi misalnya email atau bukan email deh file untuk upload file lu save lagi terus lu buka lagi sini refresh choose file langsung kayak gini kan dari sononya lu bisa milih-milih sesuatu bisa masukin gambar ke sini atau apa video kayak gitu-gitu diaturnya itu nanti di di bahasa pemograman gitu mau tipenya PDF lah uploadnya atau gambar berapa size maksimalnya atau minimalnya itu bisa diatur sama kita gitu Terus ya seputar input seperti itu aja sekarang kita mending bikin projectnya langsung ya untuk bikin satu buah website Di dalam website itu biasanya ada beberapa komponen yang paling atas adalah navigation bar biasanya Disini ada navbar singkatannya navbar yang atas tuh yang biasanya ada home, about, tentang, kayak gitu-gitu Sama login, register yang gitu-gitu Terus ada komponen konten yang isinya ya Terus ada juga footer, minimal ada 3 biji inilah ada navbar, ada content, ada footer gitu loh nah kita akan coba bikin ketiga ini versi kita aja untuk pembelajaran doang ya bro jadi diperisapin aja, ini kalau di save pun kesana akan ditampil jelek ya sekarang kita bikin navigation bar nya dulu, oke? nah biasanya, kalau gue waktu belajar dulu biasa kita kasih ciri-ciri kita mau ngapain dulu, nah cara ngasih ciri-ciri disini kita kasih komentar komentar itu bukan kayak lu ngeposting di instagram ngomen kayak gitu bukan ya tapi komen itu supaya kodenya tidak tereksekusi contoh di baris keempat gue pengen apa-apa yang gue ketik disini jangan muncul ke browser karena kalau kayak gini kan bakal muncul ke browser tuh gue gak mau karena gue mau ngasih tau disinilah tempat gue ngoding navbar caranya lu block ini atau lu diem aja disini kursornya terus lu pencet ctrl slash gitu ctrl slash maka akan terjadi seperti ini dan kalau kita save ya ini dari sononya ya kalau kita mencet ctrl slash di keyboard maka akan seperti ini dan websitenya pun tidak akan nampil apa-apa karena codingan kita di komentar gitu kurang lebih nah ini tuh di komentar kalau di dunia kita sebutnya di komentar bukan kita ngeposting ke facebook komen bukan ya oke supaya lebih rapi ini gue awasin dulu kita pencet lagi ctrl slash di dalam sini kita ketik navigation bar terus enter dua kali kalau gue dulu pas belajar gini biasanya ctrl slash Navigation Bar selesai. Gini aja. Yang artinya apa?
Dengan codingan seperti ini, itu tuh memberi tau kita supaya kita ngodingnya ada dimana Navigation Bar-nya. Navigation Bar kita bakal ngoding sebelah sini. Oke, kalau ini di-save maka yang muncul cuma ini doang, yang atas dan ini gak akan. Baris 4, baris 6 gak akan muncul. Yang muncul baris 5. Hai lihat oke betul ya ya gitu jadi kita akan ngoding navigation bar dalam komen ini jadi satu blog komen segini terus kita boleh bikin lagi di bawahnya enter dua kali nah kayak gini biar enak kontrol slash lagi disini konten satu boleh enter enter kontrol slash konten 2e konten satu and sorry enter enter footer enter enter control slash footer end nah jadi udah jelas ya semuanya ini kalau ada spesifikasi gini kita hapus biar pas gitu kita nge-loading navigation disini baris 5 nge-loading content baris 9 nge-loading footer baris 13 aduh gua kenyang Banyak yang ngopi.
Oke, kita mulai dari navigation bar. Biasanya, kalau gue pribadi nih, untuk bikin web itu mulai dari div dulu. Div.
Nah, tutup lagi sama div. Gitu. Ini untuk komponen navigation bar kita.
Kita enter. Jadi, seluruh navigation bar itu ada di dalam div ini. Right?
Kurang lebih kayak gitu ya. Sama halnya dengan yang lainnya juga. Yang lainnya juga sama. Di dalam sini, kita masukin div.
Tutup div, enter Div, uter juga sama Div, tutup div, enter Nah, udah makin jelas ini Kasih disini navbar Di dalam divnya ya Div itu bungkusan ya bro, tidak akan mengefek apa-apa ke browser Tapi dia tuh ngebungkus sesuatu biar kita tau pembedanya nanti Dan bisa kita modifikasi lewat CSS yang nanti bakal kita bikin Terus disini kasih, eh sorry Content Satu di sini dalam div yang ini kasih footer 1 eh footer doang save balik lagi ke browser maka ke bawah semuanya ya navbar content 1 footer kalau nggak di dalam div nggak kebawah kan ke kanan ya tadi sekarang jadi pada kebawah Oke kita mulai dari navbarnya dulu nah tahu dari mana bang ini elemen-elemennya lu bisa cek namanya elemen ya di Google aja sih lu bisa elemen-elemen HTML begini enter ntar yang paling atas pasti ada w3 school Lo klik Terus di dalam sini Ada banyak nih ngali Eh nih ngali lagi Ada banyak nih liat nih bro Ada H1 Ini penjelasannya ada My first heading atau apa Ditutup dengan ini Kayak gitu-gitu ya BR tidak usah ditutup Kayak gitu-gitu Jadi bahasa Inggrisnya agak kepake Untuk baca dokumentasi ya bro ya Nih formatnya tuh HTML body H1P Nih HTML body H1P Body tutup HTML tutup Ya kan Nah ini yang belum kita masukin dok Type tadi, tapi gak apa-apa Kayak gini pun bisa, untuk belajar sama aman Lo bisa cek-cek elemennya ada disini Banyak pokoknya, list-list elemen lo bisa Tahu ada disini semuanya Kemana lagi ya Elemen disini, mana ya List-list elemen tuh HTML tag list Nah ini nih ya, ada banyak Dan disini artinya juga sangat lengkap Kalau label untuk ini Terus IMG untuk ini, untuk itu, kayak gitu-gitu Ini kok agak nge-lag mouse gue ya, curiga gue nih OBS gue masih jalan, masih aman Agak-agak mengerikan juga nih Masih setengah jam, aman lah Nggak seru kalau korus cuman setengah jam ya Lanjut lagi Untuk navbar, kita bikin disini UL UL itu singkatannya apa ya? Pokoknya L-nya list, U-nya itu U-under atau apa ya? UL, UL ya Pokoknya tadi cek aja di W3 School, gue lupa Tapi gue terbiasa seperti ini enter, li, enter kayak gini home kayak gini biasanya ya terus lo kopas lagi ke bawah ini untuk navigation bar yang paling atas nih terus yang kedua itu misalnya about about me terus yang ketiga kopas lagi kopas contact me paling standar seperti ini save cek lagi ke browser now Berubah jadi seperti ini udah sama bro? Ayo gue tungguin Sama ya Udah sama Kalau udah sama Ini nanti kita styling oke Sebelum kita memasukkan CSS nya Konten satu kita rapihin dulu Ini bakal kita awasin Terus kita disini masukin aja Gambar boleh ya Ketik IMG slash tutup nih kalau AMG kayak gini merah bang? gak apa-apa biarin dulu sekarang cari gambar terserah gambar apapun yang ada di komputer lu gue bakal cari juga ya gambar itu gue di picture gue boleh pake gambar ini?
boleh gak sih? jelek ya? gue pake gambar ini aja deh nah ini sepertinya gambar youtube aja deh atau tiktok ya? tiktok aja Masukin sini langsung Nah tarik langsung aja Foldernya buka tarik masukin sini Youtube.png Sekarang supaya gambar youtubenya bisa masuk ke HTML kita Disini disebutnya attribute Jadi sebelahnya elemen Ini kan tag nih tag HTML Tag atau elemen lah Tag atau elemen itu ini Ini Ini, ini Nah kalau di dalamnya element atau di dalamnya T kita ketikin sesuatu Itu namanya atribut Contoh SRC SRC itu atributnya si IMG IMG element, SRC arti atribut Di dalam SRC itu kita kasih sama dengan Kayak yang border tadi di tabel loh kayak gitu ya SRC yang artinya dimanakah sumber gambar berada Yang mau ditampilkan ke konten 1 nah kayak gitu ya si gambarnya ada disini di paling luar nah ini tuh directory kita di website pertama ya kan nama foldernya ini di dalamnya mengandung 2 file index.html dan youtube.png supaya image-nya bisa masuk youtube.png di src sini kita panggil youtube youtube.png harus sama percis kata-katanya nama file ini tuh ya src tuh nama file kalau lu save Balik lagi ke browser, lihat, eh ini bukan browser, ini browser, refresh, maka akan menjadi seperti ini.
Kenapa kayak gitu bang, jelek banget? Iya, karena belum di styling, gak apa-apa. Jadi, kalau gak di format styling, maka yang muncul ke browser akan sesuai seperti size gambarnya.
Karena size gambar si Youtube gue itu gedebet, maka di browsernya pun akan besar seperti ini. Supaya bisa kecil, kita bisa inject stylingnya di dalam atribut langsung dari bawaan IMG-nya. IMG punya banyak atribut, yang bisa lo cek sendiri di W3 School tadi, atributnya apa aja. Ada SRC, ada juga Wid, ada juga Heg, untuk mengatur lebar dan tinggi dari gambarnya. Kalau kita langsung masukin di sini, Wid, Wid The Heg, alias lebar, sama dengan...
Taruhlah widthnya 200 Sama dengan lagi disini nih Height sama dengan 200 juga Maka kita mengeset gambar dari sumber youtube.png yang ada disini Dengan lebar 200 dan heightnya 200 Maka kalau kita save harusnya Harusnya ya Si gambarnya jadi 200x200 200px, 200px ukurannya Kalau di reload maka dia akan kecil seperti ini Tapi penyok Betul? Sama Kalau gambarnya Sesuai ukuran lah pokoknya Karena ukuran gambarnya itu Lebih lebar tadinya Ini gambarnya full HD Taruh aja full HD itu 1920x1080 gitu kan Lebar 1920px Tinggi 1080px Taruh lah kayak gitu Terus kita format Di dalam kodingan kita gambarnya Di format jadi 200px 200px Alias jadi kotak Berarti Rasionya udah berubah yang tadinya misalnya 16 banding 9 sekarang rasionya jadi 1 banding 1 ya udah pasti jadi gepeng gitu supaya enggak gepeng kita bisa akalin biar dia jadi kecil nah sini ada logik-logik sedikit lah akal-akalannya gitu loh caranya kita masukin di sini persen kita menaruh kita akan menaruh di sini widnya selebar yang lebarnya itu 50% dari size aslinya Oke jadi ketik aja 50% seperti ini Heg nya juga sama, 50% dari aslinya yang mana kalau aslinya 1920, nih misalnya aslinya 1920, 50% nya itu berapa terus heg nya itu misalnya 1080, 50% nya itu berapa gitu berapa, sini berapa maka akan masuk nilai ending pixel nya kesini ini tinggal hapus lagi ya, ini cuma contoh doang sekarang kita save dulu nggak tau sih pengaruh atau nggak, kalau pengaruh itu kayaknya mesti di dalam CSS Di dalam stylenya Tapi semoga aja bisa Kita cek lagi ke browser Terus kita refresh Nah ini udah bener nih 50-50 Apakah masih agak gepeng atau enggak Kita coba zoom out Ini gue zoom outnya Zoom innya 100 Nah ini 100% Seperti ini ya Sepertinya udah pas nih 50-50 Kalau dikasih 100-100% itu bakal Size awalnya Kalau disini gue taruh 10% Ini 10% Maka 10% dari size awalnya Kurang lebih kayak gitu Kita Refresh lagi browsernya Tuh kayak gitu ya Oke mau berapa persen nih Taruh lah di 30 aja ya 30, 30 Udah kayak gini Jadi untuk bagian konten 1 sudah ada gambar Biarkan dulu seperti itu Kita refresh lagi Segede gini Terus bagian terakhir adalah footer Untuk footer itu sendiri biasanya Sederhana sih kalau footer ya Taruh aja lah disini H1 gini H1 itu artinya paragraph Bukan paragraph Heading Heading 1 Jadi ada H1 ada H2 ya H2 ada H3 nah semakin tinggi angka sebelah H nya semakin kecil huruf nya kita taruh aja disini hello disini hello H2 disini hello H3 ini hello H1 ya disini lu save lagi cek lagi ke browser refresh Halo H1, besar banget Halo H2, sedang Halo H3, kecil Itu heading Bedanya heading sama P alias paragraph yang seperti disini ya Ini kurang lebih kayak P gitu ya Bedanya dia lebih tebal tuh Fontnya tuh lebih tebal, itemnya lebih dalam gitu loh kurang lebih Nah kayak gitu Oke, kurang lebih kita punya 3 komponen dulu Navigation Bar Terus konten 1 sama footer Sekarang kita mulai CSS Untuk memodifikasi apa-apa yang ada disini Supaya lebih jos gandos gitu ya Kurang lebih di semester 1 kita belajar itu dulu aja simple Di bagian head ini dulu kita isi dulu ya Kita enter headnya di dalam head ini Enter Masukin Kalau kalian lihat di bagian browser Di atas sini Tahu ini tuh apa namanya Title dari si tab browsernya itu index.html Jelek banget kan Tidak kita bisa ganti ini jadi apa-apa yang berdasarkan kita mau kita ketik aja di dalam sini title title jangan lupa tutup buka seperti biasa tutup title lu isi titelnya terserah lu mau apa teroloh disini web saya kayak gini boleh save balik lagi ke browser refresh Berubah dari judul yang ada di atas jadi website ya Bener udah sama kayak gitu Oke Lanjut hal berikutnya kita tambahkan styling CSSnya Ini yang ditunggu-tunggu ya seru karena Supaya kita bisa merubah tampilannya gitu loh Disini kita klik plus ini ya Plus ya yang baru disini Klik plus Ketik aja apa ya namanya Boleh style deh Style. Ini penamaan bebas Mau apapun terserah lu Yang penting ujungnya Titik ini Titik ya Titik CSS S Enter Langsung tercipta seperti ini Kosong bener Style CSS kosong Index HTML seperti ini Sekarang kita panggil style CSSnya Supaya bisa integrasi ke dalam HTML Supaya HTML itu tau File CSS mana nih Yang akan merubah dokumen yang kita punya di dalam si codingan ini Maka di dalam head kita masukin Karena head itu untuk kebutuhan Di luar dari yang tampil di dalam browsernya Gimana tuh jelasinnya Jadi apa-apa yang di dalam body ini akan muncul di browser sini, di dalam sini.
Tapi kalau head itu akan ada di luar sini. Makanya ini tuh namanya body, head itu kepala. Ada di luar mana-mana. Untuk kebutuhan apa? Untuk kebutuhan search engine optimization bisa.
Untuk kebutuhan luaran seperti metadata dan kawan-kawan dan yang kayak gini-gini. Atau instalasi library dan kawan-kawannya gitu ya kurang lebih. Jadi head itu tidak akan muncul di bagian browser yang biasa user lihat.
Tapi lebih ke... Utilitas lah kurang lebih kayak gitu Nah kita udah punya satu file style.css Kita panggil disini Cara panggilnya kayak gini Kita mesti nge-link Nge-link si stylenya ke dalam index.html Caranya ketik link kayak gini Rel sama dengan dalam kurung Eh apa nih namanya? String atau apa ya? Bahasa manusianya Curak atau kutip gitu Kutip 2, kutip 1 Bebas terserah lu ya Mau kutip 2, kutip 1 Bebas Yang penting antara itu aja Kutip 2, kutip 1 Ataupun curag seperti ini itu sama saja Tapi saran dari gue ya kutip 2 aja Biar normal dulu aja Kalau masih belajar ya Rail sama dengan kutip 2 Di dalam sini kasih style sheet Yang artinya Nanti gue jelasin Belum ditutup Terus kita masukin ref Sama dengan dalam kurung Kosongin dulu aja Spasi disini Slash tutup Nah di dalam title Udah kayak gini Di dalam link kayak gini Kenapa link gak ditutup? Pisah link lagi disininya bang?
Bisa kayak gitu? Bisa pun enggak Karena tidak ada isi dari link Link itu udah mainnya di attribute Jadi kayak gitu ya Kalau bisa mainnya di attribute ya sudah Di attribute aja Jadi langsung tutup Tapi kalau mainnya gak bisa di attribute Kayak title gini misalnya Mesti di dalam sini Contoh kasusnya kayak gitu Yaudah mesti ditutup terpisah Tapi kalau kayak link Ada attribute-nya seperti ini Dari bawaan sono-nya Lu cek dokumentasi yang tadi dari W3 school atau dari mana-mana di Google itu udah bisa di dalam attribute jadi kita langsung tutup di dalam sih linknya itu sendiri Nah untuk rev nya itu tuh arahannya kemana gitu sama kayak gambar tadi kalau gambarkan src ya sumber sehari ini short shortnya mana Nah kalau si link rel style sheet kita tuh mau nge-link style sheet ya relation mungkin rel itu gue juga nggak tahu apa sih rel itu relationship ya bener tuh relationship style sheet dari mana? ref itu referensi lah mungkin kayak gitu supaya gampang aja ref itu referensinya dari mana?
referensinya itu dari style.css maka sekarang kita masukin aja style .css dari file yang ada disini kalau udah lu save kalau udah di save pun tidak akan terjadi apa-apa di browsernya sayang sekali ya udah ngoding satu baris itu tapi tidak mengefek apa-apa refresh gak ngefek apa-apa tapi tapi tapi tapi aduh mulut gua kering gua belum minum dulu ya bentar ya sambil lu ngikutin dulu kodingannya tapi tapi tapi ha ha tadi kan sampe tapi Kalau kita memodifikasi di bagian style.css ini Terhadap apa-apa yang ada di dalam index.tml ini Maka semuanya akan berubah total bro Total berubah Akan jos gandos mergodos Contoh kita akan merubah bagian bodinya Bodi itu kan canvas kosongnya Yang putih ini tuh bagian bodi ya Background putih segamblong itu tuh bodi Coba kita ubah warna bodi ini menjadi warna yang kita mau Caranya kita masukin bodi ini ke dalam sini Ketik aja body Formatnya seperti ini ya Karena kita mau merubah body Elemen body yang ada di HTML Terus kita kasih kurung kurawal Tutup kurung kurawalnya ya bro Buka dan tutup ya Kurung kurawal buka dan tutup Di tengah-tengahnya lu enter Bukan pulau Jawa di tengah-tengahnya Bahaya kalau pulau Jawa Kayak gini Kasih background Background Strip Color Titik 2 Mau warna apa Terserah kalian Ini biasanya kalau udah titik kayak gini atau udah apa gitu biasanya gue spasi biasanya Tapi kalau pun enggak juga gak kenapa-napa ya Itu cuma preferensi kerapihan codingan masing-masing aja gitu Background color gue pengen background colornya misalnya warna tomat Kita ketik tomato Di ending dengan titik koma Kayak gitu ya Loose save Cek lagi ke browser Jadi format untuk memodifikasi elemen yang ada di HTML sini Seperti yang gue bilang tadi bahwa elemen HTML itu bisa dimodifikasi Kurang lebih seperti ini Kalau kita mau modif body Yaudah panggil bodinya disini Nah kalau udah dipanggil ya kan Kita mau modifikasi body Karena stylenya sudah di inject di HTMLnya Udah dimasukin Bukan inject sorry Udah dimasukin udah di connectin Maka body ini dipanggil lagi di style Terus di declare seperti ini Atau di deklarasi bodinya Dan di dalam deklarasinya Kita mengukuhkan bahwa background color dari si body itu sendiri Diubah menjadi tomat warnanya gitu Kalau udah di save Lo cek lagi browser, lo refresh Udah sama, menarik gak ngoding bro? Buat yang belum pernah ngoding nih khususnya, menarik gak? Nah, kurang lebih jadi Apapun yang lo bayangkan Terhadap sebuah website Ya lo bisa bikin itu selama lo tau sintaksnya Nah apakah sintaks yang tadi Gue beberkan, gue liatkan Itu mesti dihafalkan? Tidak Nah terus gue hafal dari mana?
Karena kebiasaan Lama kelamaan pun akan Tau sendiri apa yang mesti lo ketik Jadi udah kayak otomatik gitu loh Kayak lo ngetik pesan ke pacar Nge WA pacar udah otomatis kan Kayak apaan sih lo WAI? WAI? CWD-an gak bener? Misalnya kayak gitu-gitu ya Ya sama kayak gitu Sama kayak keseharian lo Nah karena keseharian gue ngoding Jadinya udah tau gitu Tapi kalo lo gak tau Pas proses belajar itu bisa Seperti biasa googling gak apa-apa Elemen HTML untuk apa kayak gimana gitu Cara memodifikasi apa Elemen ini Cara supaya background menjadi berubah warna Cara supaya Apa namanya teks menjadi besar kayak gitu-gitu itu browsing aja ya bro jangan ragu untuk browsing karena gue dulu belajar full dari google only tanpa sekolah jadi otodidak gitu ya semuanya dari google doang gitu dan coba-coba gitu kurang lebih ya ini untuk yang body ada satu rules yang penting ketika kita bermain CSS kalau kalian agak pusing tolong disiapin dulu copy-nya dan juga cemilan-cemilannya ini kenapa kita bisa masukin seperti ini karena ada body di dalam sini lalu bagaimana kalau kita mau modifikasi yang div ini?
ya tinggal panggil lagi divnya sama taruh aja sini div, kayak gini jangan lupa, formatnya seperti biasa kurung, kurawal, di tengahnya enter, bukan pulau jawa terus kasih background lagi background color, ya udah ada ituannya tuh, sugestinya background strip color, tapi gue akan coba usahakan mengetik manual aja background color disini misalnya blue gitu loh nah gitu ya, untuk warna sendiri bisa banyak pilihannya, bisa pake kayak gini warna bahasa inggris gitu, atau pake hex color di dunia coding, dengan format pager duluan Pager terus diikuti angka 6 digit atau 3 digit Itu akan menjadi warna Contoh disini gue kasih 7B1 Kalau gue save Maka div ini akan menjadi warna ini Hijau gitu Kalau kalian gak muncul yang warna-warna sebelah sini Cuekin aja pokoknya codingannya samain Kalau gak ada ikon seperti ini biarin aja Pokoknya yang penting codingannya Oke kita coba save lagi Lihat ke browser Refresh Tidak muncul apa-apa Kenapa? Karena Sebentar Div, apa cenah? background, oh ini kurang G tipe itu kan, tipe sedikit gak ngefek ini udah dikasih divnya warna hijau karena tipe background harusnya pake G kita save lagi, jadi gak berfungsi padahal cuman tipe satu huruf bukan tipe, lupa satu huruf refresh, maka semua divnya akan berubah menjadi hijau sangat-sangat jelek sekali udah hijau hulek, belakangnya tomat lagi aduh, udah macam apa kayak gitu ya nah, gimana caranya kalau kita mau memodif div yang atas doang, div yang navbar doang, div yang konten satu doang ini konten satu ya kan, ini navbar konten lagi ya ini navbar, ini konten satu, ini footer ya kan semuanya sudah dikasih ciri berwarna tapi kalau gue pengen ngasih masing-masing styling terhadap elemen yang ada di HTMLnya itu kayak gimana?
kita pakai yang namanya kelas ya bro jadi ada kelas di dalam index.html ini yang bisa kita masukkan untuk apa? untuk kebutuhan mengetahui yang mana yang mau di styling contoh Navigation bar ini gue mau styling Dengan Sorry spasi disini Ya ini atribut ya Kelas itu atribut dari semua elemen yang ada di HTML itu bisa dikasih kelas Kelas seperti ini Sama dengan Kasih namanya apa Kasih aja ID Eh ID Kasih aja div Kelasnya itu Kelasnya itu navigation bar berarti Nav bar Kayak gini dulu aja Nav bar bungkusan Bungkusan nav bar gitu ya Atau biasa kalau di dunia coding itu kita sebut ini container Jadi kalian bisa ketik seperti ini Container navbar atau navbar container Seperti ini boleh Ataupun container strip navbar Gini boleh Atau apapun terserah Save Ini gue kasih namanya container strip navbar container Kenapa container? Karena container itu kayak kotak ya kan Kayak kotak dan membungkus sesuatu Sama kayak yang kita punya disini Ini kan kotak nih Membungkus sesuatu Apa yang dibungkus?
Home about contact me Apa home about contact me? Ueli Yang ada disini Jadi ueli ini dibungkus Makanya dikasih nama container Strip navbar Tapi kan ini masih belum ada efek apa-apa Kalau kita refresh Caranya kita panggil kelasnya Kita jangan panggil lagi div Di dalam si stylingnya Karena kita mau nge-style si navigation bar nya doang Maka kita Panggil aja udah kelasnya disana Cara memanggil kelasnya Itu sederhana Ingat-ingat container strip navbar Di style sini Untuk yang div kita hapus Kita mustiling yang mana? navbar Maka apa? Kelas untuk memanggil kelas yang ada di index.ml Itu pakai titik disini Titik nama kelasnya apa? Nama kelasnya itu adalah Container strip navbar Sisanya sama kayak yang atas, pakai kurung lagi.
Di tengah-tengahnya bukan pulau Jawa, alias di-enter. Seperti itu. Titik ini merepresentasikan kita, ngarahin kita ke mana, terhadap elemen apa yang mau kita ubah.
Titik, kelas. Ingat-ingat titik, kelas. Kalau nggak pakai titik, itu langsung ke elemennya. Semua elemen, kalau nggak pakai titik, semua elemen bodi, yang kebetulan bodi cuma ada satu, akan diubah. Kalau kayak tadi, div doang kayak gini Semua elemen div yang ada di dalam indeks HTML Itu akan berubah Sayang, sayang ya bro ya Itu bisa dipakai untuk kebutuhan tertentu nanti Tergantung kasusnya Tapi untuk kasus ini, kita kan mau modif masing-masing divnya Masing-masing bungkusannya Gue gak mau div ini terkontaminasi dengan div ini Gak mau terkontaminasi dengan div ini Jadi kita pisah Makanya cara pemanggilannya, kita pakai kelas Jadi di index.html nya sudah punya kelas Untuk yang navigation bar Div class container navbar Dipanggil kelasnya dengan cara titik Container strip navbar Semoga tidak terlalu pusing Di dalam kurung Eh di dalam kurawal Itu bukan pulau jawa Tapi apa?
Enter Di dalam sini kita coba kasih background lagi Background color Terserah lu mau masukin apa sekarang Warna black misalnya Atau mau pakai hex color lagi Taruh aja hex color ya Gue biasanya kalau background color taruh untuk navbar misalnya 444 Atau 222, 333 boleh Untuk agak sedikit black Jadi kalau black itu 0 ya 0, 0, 0 itu hitam-hitam gak jeblak gitu bro Kalau 0, 0, 0 Kalau 9, 9, 9 Semakin deket ke 10 itu semakin putih 9, 9, 9, 9 Semakin putih Kalau putih pure itu F, F, F Oke F, F, F sampai 6 kali juga bisa Sama aja Kita pakai 3 kali aja 3, 3, 3 Supaya gak terlalu gelap, gak terlalu cerah kalau sudah di save, yeay, saya kehapus sorry save, cek lagi ke browser, lalu refresh sekarang yang berubah adalah yang navigation atasnya doang, oke kita akan fokus merubah dulu si navigation bar yang ada di atas ini nih, kita ubah dulu biar dia jadi sejajar ke sana, biar aman dan ini kita hilangin ya, apa namanya tuh buledan itu, kenapa ini buledan tercipta? karena ada apa disebutnya, list gitu ya, list ya namanya juga list jadi kayak strip-strip sesuatu gitu kan yang mana codingnya itu di dalam ul sini list pertama list kedua list ketiga kayak gitu loh kurang lebih Nah untuk supaya bisa menghilangkan itu kita kasih kelas ke setiap yang ada di sini gitu kurang lebih bisa kayak gitu atau bisa kita langsung tembus ke ul nya tapi supaya nanti takutnya di dalam sini ada ul lagi ntar keubah semuanya sama lagi jadi kita pasti kasih aja kelas di sini ya kelas sini Ayo kita kasih itu kan yang atas kontainer navbar ini kita kasih ulnavbar boleh ulnavbar yang Li kita kasih kelas uh sorry li navbar ini boleh Nah karena ini semuanya sama Li maka kita kasih aja semuanya sama ini copy masukin sini masukin sini kayak gitu ini Sorry kalau mata gua kayak terlihat ngantuk dan lelah sebenarnya tidak karena gua lagi bahasa Indonesia apa ya kalau berusaha nyokap rempenan tadi keliling Kelilipan, itu lagi kelilipan jadi jadi pilek gitu loh Kalo mata gua Iya kemasukan debu jadi pilek-pilek gitu Bentar, kopi dulu capek Ya mata gua tuh terlihat sayu memang dari sononya Makanya gua pake kecamata ini tuh Buat menutupi bro, biar menutupi Mata gua yang sayu Karena banyak orang bilang gua tuh kayak Kayak pemales gitu, padahal enggak Aduh koreknya lupa Padahal gak pemales gitu, jadinya gue beli kacamata ini tuh kacamata anti radiasi supaya gue bisa tahan lama ngoding dan aman dari monitor ditambah monitornya jauh kayak gini gitu loh, kurang lebih kayak gitu. Bahkan kalau pake kacamata gak terlalu keliatan sayu ya, nah itu belum gue mention tadi di awal takutnya lupa dan nyangka, oke males banget lu ngajar bang, enggak gak males memang kayak gini orangnya bro, matanya memang seperti itu.
Oke kita lanjut lagi ya, jadi lupa tadi sampai mana ya. Jadi sampai mana bro? Navigation Bar udah nambahin kelas ya Jadi DIV udah ada, UL udah ada kelasnya, LI udah ada kelasnya Semuanya sudah ada kelasnya di bagian Navigation Bar Nah, kelasnya itu cuman di dalam blok pertama yang belum tutup ya Kalo yang tutup tuh kosongin, jangan sampe lu kocak gitu masukin disini Gak akan ada sepertinya yang masukin kelas disitu Aduh jangan ya pokoknya Kelas itu di dalam ini, jangan sampe ada di dalam sini Aduh jangan ya Jangan coba-coba seperti itu. Jadi yang normal-normal aja hidupnya ya. Situ aja udah.
Kalau udah di-save. Jangan lupa pokoknya di-save. Selalu always di-save. Supaya aman. Kita modif yang ul navbarnya dulu.
Atau li navbarnya dulu ya. Keduanya lah langsung lah. Masuk ke style.css.
Ingat-ingat ul strip navbar dan li strip navbar. Oke. Masuk sini. Enter di bawah sini.
Titik ul strip apa tadi? Navbar. Seperti biasa, kurung-kurawal di tengahnya apa? Bukan Pulau Jawa.
Enter. Satu lagi di sini di bawahnya. Titik U, eh bukan UL. Apa ya tadi? Li, strip, nav, bar, kurung.
Bukan kurung, sekedar kurung. Enter. UL, nav, bar, kita kasih background dulu supaya lu tahu ada apa sebenarnya di dalam situ. Gitu kalau gue belajar ngoding tuh troubleshootingnya mulai dari luarannya dulu. Sebenarnya tuh apa sih?
Ada kayak gimana sih? Nah supaya tahu. itu gue kasih warna biasanya biar gue tahu tag atau elemen HTML itu ngefeknya kemana dan apa dan dimana gitu biar tahu posisinya kurang lebih lu bisa pakai background sini background-color taruh aja harus beda sama yang atas supaya kelihatan gitu green ini boleh terus yang ini juga sama background atau border deh bosen ya background mulu border titik 2 misalnya taruh 5 pixel ya bordernya setebal 5px, solid warnanya, formatnya solid, texturnya solid, warnanya misalnya red kalau udah di save kita cek lagi, ul itu ada dimana, li itu ada dimana kalau kontainer nabar udah tau kan, tapi kita ga tau ul itu sebelah mana sih, li itu sebelah mana maka seperti itu kan kayak gini, dan kalau udah di save, cek lagi ke browser, lo bakal tau dia tuh ada dimana, spread, tuh Gimana?
Pusing kan bikin website? Kelihatan seperti itu. Hai tadi yang merah itu apa nggak kelihatan kan yang red itu karena disini tomato jadi nggak terlalu kelihatan jadi kita ganti ini jadi black aja deh kali ya black safe refresh lagi nah Aduh 5px sepertinya ketebalan bro sorry satu px aja ya refresh Nah kelihatan gak?
Border itu yang garis strip ini Hijau itu berarti yang ul Li itu berarti yang border ini Si li itu punya buledan ini Maka kita ilangin dulu buledannya Ilangin di dalam sini berarti kita kasih List style type non Kalau gak salah List style type List style type Ini tuh tipe dari listnya Non So supaya tidak muncul, kalau sudah di save refresh lagi, hilang kok bisa begitu bang, dari sono nya begitu bro, dari sintaks nya kalau ini bukan non, misalnya non itu kan di enggak ada misalnya apa gitu, disini ada circle, decimal georgian misalnya, lower alpha, non, square simbol, misalnya square ini taruh, bakal kotak Hai refresh tuh jadi kotak kayak gitu kalau Georgian maka dia akan seperti tuh kayak gitu ya kan ngapain ya udah kita bikin ini jadi non aja ya udah jadi non seperti ini tapi kan si jelek ya Ayo kita coba format lagi Bro supaya supaya eh apanya ya ini hijau ini di sini kita kasih with dan heganya dulu oke di bagian ul sini supaya kita bisa nge-set si hijaunya ini berapa panjang gininya dan berapa ke bawahnya gitu lebar dan tingginya kalau di sini gua taruh Wid sama dengan 500 pixel dan hey sama dengan 100 pixel maka apa yang terjadi kita save dulu Ayo kita refresh lagi nah terlihat menjadi seperti ini yang ijo nya ini abu-abu dari mana Bang abu-abu itu dari sini container navbar ya jadikan tahu kontainer baru ada di mana well sudah dimana ini tuh ada di mana Nah, container navbar itu berarti ada di segini, dari sini sampai ke sini. Ya, full gitu loh. Nah, yang hijau itu tuh si ul. Ul-nya 500px, setengahnya dari si container. Setengahnya dari container navbar Oke Kalau misalnya disini gue kasih widthnya seperti teori yang tadi Pakai persen Taruh disini 20% Kita save lagi Maka 20% dari Container yang ada Karena apa?
Karena ul dibungkus sama div Dibungkus sama div Eh sorry tadi bukan ul dibungkus sama div Ul dibungkus sama Iya bener Ul dibungkus sama div Divnya itu sih container navbar Gitu 20% dari div yang ada disini Div yang ada disini Ada disini berapa Panjangnya, lebarnya, ya kita bisa tentukan Bisa enggak, kalau enggak dia harusnya 100% Gitu Kalau kita tentukan disini 700 Atau 600 pixel Save, maka UL nya 20% dari 600px Kita save lagi, lihat Refresh, nah kayak gitu Oke Hai Nah sekarang kita mau ngapain ya gue juga bingung kita coba ketengahin dulu ya ketengahin si ininya dan kita reset lagi nih kita taruh aja ini 100% with dari si div container navbar itu 100% 100% yang artinya full ya ke kanan terus ul navbarnya itu taruh aja di 50% Hai kayaknya biarin 100 dulu save terus kita reload lagi Jadi seperti ini Sekarang gue pengen si ul nya itu ke tengah Misalnya Atau li nya yang jadi pada ke tengah Kita boleh coba Supaya li nya ke tengah Terpaksa kita sambil main flexbox Buat yang baru ngoding Akan sedikit pusing Tapi kayaknya mesti kayak gitu Mesti flexbox Tapi sebelum flexbox sih kita coba padding margin dulu ya Ya mati loko lagi Udah lah biarin lanjut Di Lee sini kita coba kasih padding 20px Yang artinya supaya Lee nya itu bisa menjorok ke dalam Save dulu Kita lihat lagi Padding tuh ya artinya tuh Ini kan di luar sini nih Agak di ujung pojok gitu ya Kalau kita refresh Maka dia akan jadi seperti ini kok bisa kayak gitu Bang Iya karena pilihnya gede banget gitu harusnya jangan terlalu besar pilihnya taruh aja di 10px save refresh spread nah segini terus kita kasih Di dalam ul itu kita mesti kasih flexbox Kita ketik disini display Ketik 2 flex yang artinya flex itu untuk menentukan urutan kotak-kotaknya Kalau pusing ikutin 2 aja ntar lu ngerti sendiri Display flex Kalau udah kita save Lihat lagi ke browser Refresh Maka dia akan mengurut sesuai seperti seharusnya gitu kan home about kontak me nah supaya ini bisa lebih elegan lagi maka ini ul-nya kita 100% ini lagi aja atau jangan dikasih widthnya ya hapus widthnya supaya widthnya mengikut ke atas ke container navbar terus background juga sudah tidak perlu untuk di ul hapus jadi kita cuman punya height dan juga display flex save terus refresh lagi motornya seret jadi seperti ini Terus untuk Heg nya Karena gue kelihatan disininya tuh kayak gak enak gitu ya Maka kita atur Heg nya dari si kontainer nabar aja Karena sayang disini udah Wid tapi Heg nya gak ada Maka Heg ini kita naikin ke atas Cut ya, Ctrl X Taruh di bawah sini, Ctrl V Jadi Div nya itu yang menentukan Berapa lebar dan panjang dari anak-anaknya Itu kurang lebih Bentar ya ini udah berapa jam ya? wih hampir sejam, gak apa-apa lah lanjut, lanjut, lanjut ini kita rapiin lagi, nah kayak gini kalau udah di save, terus kita lihat lagi reload ke browser, shred nah, udah enak kan? sekarang udah seperti ini nah ini dia ada pada di atas gitu, tapi textnya pun gak ini ya, kita sesuaikan textnya supaya warna putih, caranya li nya kita kasih disini color white Alias teks yang ada di dalam li itu harus berwarna putih Kalau udah di save Lihat lagi disini Nah udah putih kan Betul Kita kasih gap diantara kotak-kotak ini Caranya kita kasih margin Margin itu untuk gap margin taruhlah 5px ya taruh kayak gitu boleh save terus refresh lagi nah udah keliatan sekarang baru gedein paddingnya paddingnya 20 save, balik lagi browser refresh, spread nah, indah bukan? indah, sekarang kita lanjut lagi, supaya si ini bisa setidaknya ada di tengah-tengah, kita coba masukin di bagian sini yang navbar, buat dia ke tengah pakai center justify content justify content titik 2 center, biar dia ke tengah, save refresh browsernya kita lihat dulu fungsinya kayak gimana Nah ada di tengah sini ya kurang ke tengah bawah sini tambahin item eh sorry align items pakai s.2 Center save cek lagi sini ke websitenya refresh yo kita mesti kasih dulu di sini hey sepertinya Sorry kalau di sini akhirnya gua taruh 100px gua save, kita lihat lagi refresh, spread nah, gitu ya jadi dia ada di tengah semua ini gitu loh kenapa ini align item itu untuk ngeformat si kotak ini bisa ke tengah gitu ke tengahnya ke tengah mana karena kita tadi gak masukin hignya jadi dia tuh gak tau tengahnya tuh dari antara tinggi berapa, tinggi ini gak ke bawah gitu, karena kita si display flex nya mulai dari nav bar nya kurang lebih kayak gitu jadi mesti kita set pula disini 100px kalau sudah di set maka akan seperti ini nah sekarang bordernya itu kita bisa apa ya modifikasi lagi gitu supaya lebih bagus ya kita coba bordernya modif jadi warna putih white sini yang li ini terus kita kasih background nya background color white juga jangan white dong apa ya black gitu coba dulu ya pengen lihat jelek sih nggak apa-apa yang penting buat belajar saya punya border punya ini refresh akan jadi seperti ini Hai jelek Bang Gapapalah untuk belajar mati ya kayak gini nah terus kalau udah kayak gini kita eh yang belakang ini kita bikin full nih full full Wid dia kan enggak sampai ke pojok tuh gue pengennya sampai ke pojok gitu loh si inaf barangnya Kenapa padahal ini udah gua set 100% sekarang Mari kita coba di bagian atas bodi sini kita enter lagi kita format html nya Oke, kayak gini HTML mana bang? HTML itu yang ini Yang luaran sini Di format padding marginnya dikasih default 0 Margin 0 Padding 0 Supaya apa?
Supaya tidak ada gap diantara elemen yang kita punya Kenapa? Karena setiap kita membuat dokumen HTML Kalau HTMLnya tidak di set seperti ini Dia punya default value Default value dari margin dan paddingnya itu Kalau tidak salah 2px atau berapa px gitu Jadi kita mesti set dulu 0 Supaya kita bisa mainan enak gitu Di elemen-elemen kemen lain udah di save cek lagi ke browser kita refresh kalau enggak ngaruh lu mesti tambahin lagi bintang sepertinya kita coba sini kita kasih bintang koma atau ML yang artinya keseluruhan dari yang ada di HTML dikasih margin 0 padding 0 save lagi refresh nah gimana udah cakep sekarang gitu ya nih codingnya nih kalian contek dulu hai hai Hai gue sambil ngopi ini malam dingin bro jadi agak pilot juga ditambah mata kelipan aduh Oke sudah seperti itu sekarang kita apain ya backgroundnya kita kasih warnanya jelek backgroundnya gua pengennya sih yang ini yang body itu enggak usah warna itulah ya Hai yang bodi ini kita hapus aja Awas ini ini buat diawasin seperti ini save lagi kita refresh lagi nah biar agak relate gitu loh terus untuk bagian ini juga enggak bagus ya kita mesti format ulas Untuk konten Si gambar youtube ini kita boleh ketengahin Kita coba ketengahin dulu Untuk yang youtube Ini biarin dulu nafbar seperti ini nanti kita modifikasi lagi Untuk yang image ini Ini kita kasih div dulu di bagian sini Div kelas seperti biasa Ini di konten 1 ya Apa namanya? Container udah pasti ya Container Konten Untuk yang image nya kita kasih kelas juga Nah karena kita bisa styling with Heg nya itu disana di CSS Maka ini kita hapus Kita hapus Ini kita kasih kelas Namanya adalah Tadi apa ya ULnavbar Linavbar Berarti ini IMG Content Nah Kayak gitu Save Jadi kita punya 2 kelas baru Di dalam konten 1 Kelas container Konten Dan IMG content Kalau udah di save Cek ke style.css Kita bikin Ininya Pemanggilannya Di dalam Kita dibawah ajakan Ini bagian navbar Ini segini Konten konten itu kan disini, titik ya untuk kelas itu seperti biasa, titik, container, apa tadi namanya, konten, kurawal, di tengah-tengahnya apa, bukan pulau jawa, enter, terus disininya background aja dulu biar kita tahu, background color titik 2 kita kasih background colornya black, oke, udah, enter lagi, titik, img strip content, kurawa enter ini yang tadi kita ketik diindex.html ya yang ada di sini ya oke ini container-content sama img-content udah sama ini enter untuk img-content tadi kan kita udah set with heightnya juga jadi kita disini set juga with tadi berapa 30% karena akan dihapus yang di HTML nya hey 30% save dan disini dihapus Bro jadi kita mesti declare di sono sini udah kita save Terus kita cek lagi kesini Refresh Boom Tuh kan Jadi background belakang si div content itu hitam Sekarang kita ketengahin si youtubenya Ketengahin youtubenya dengan cara yang sama seperti ini Pake ginian juga Di bagian containernya Maka lo bisa kopas atau ketik ulang lah Ketik ulang sini Display .2 flex justify content center item align item align items center save, cek lagi ke browser ready, cek refresh, di tengah Gimana? Udah sama?
Oke, nice Hal berikutnya untuk footer Yang penting jadi satu Ini dulu, satu Komponen yang jadi dulu, yang pasti dulu Untuk yang footer kita kasih Kelas juga, kelas Container, footer H1, H2, H3 Kita hapus, sisain Cuma H1 doang ya, ini H2, H3 Hapus Halo H1 ini kita ganti Jadi Terima kasih Atau website ini dibuat Sepenuh hati Ya kayak gini Tiring Nah boleh lah kayak gini lah H1 nya kasih kelas Sama dengan Food sorry Tadi tuh biasanya IMG atau footer strip Food Hai hasil strip footer gitu ya kayak gini bebas namanya sebenarnya yang penting lu ingat aja gitu kurang lebih sekarang kita save balik lagi ke sini ya kalau kita save dan kita lihat reload ini belum berubah ya baru hati-hatinya dong seperti ini kita pengen ini ke tengah-tengah juga jadi kita mesti lakukan hal yang sama caranya gimana lakuin hal yang sama hai hai titik untuk pemanggilan container si footer kurawal di tengah-tengahnya bukan pulau Jawa sini satu lagi titik H1 strip footer ya kan tadi kurawal tengah-tengahnya bukan pulau Jawa untuk container kita kasih seperti biasa tadi backgroundnya apa ya warnanya taruh lah untuk yang bagian footer itu backgroundnya warnanya gue pengen yang crimson, oh enggak crimson buat nabar nanti ya udah nggak apa-apa deh crimson terus display titik 2 flex jadi ini sudah terbiasa kalau main flexbox seperti ini ya Nah format flexbox itu seperti ini tiga biji ini yang bisa bikin kontennya ke tengah kalau urutan elemen HTMLnya bener lebih gitu ini tuh berarti kalian udah bermain CSS flexbox kalau kalian baca-baca di forum-forum di artikel CSS flexbox itu susah untuk dipelajari dan dihafalkan ataupun di diimplementasikan itu susah agak lama untuk mereka bisa belajar biasanya kayak gitu flexbox gitu ya di sini kita ke mana tadi Sorry ini ya di sini display flex justify content center terus disini item line item ya Sorry aduh lupa mulu line items center untuk ksatuputernya kita kasih font size supaya ukuran fontnya itu bisa kita atur lagi font strip size alias ukurannya ya taruh aja 100px misalnya atau jangan deh gede banget ya 40px gitu lu save cek lagi ke web tapi ehem gua mau bersihin dulu sorry Aduh bener-bener ini banyak debu di gue Tambah lagi gue ngerokok lagi, sorry banget ya Hah, hah Tapi jadi ini loh, jadi apa disebutnya Kalau bahasa Sunda jadi cenghar Save lagi ya, ini udah Save terus cek lagi ke browser, refresh, boom Maka akan menjadi Website ini dibuat sepenuh hati Bro, mantap sekali Lalu bagaimana caranya supaya Ini semua bisa Selayar penuh biar enak Kita main di bagian body Di sini, atas Hai taruh aja di sini yang body tadi kita ketik lagi ya body kurawal kita kasih panjang bodinya itu berapa 100 viha 100 viha yang artinya 100 vertical heg yang fungsinya untuk supaya panjangnya itu berdasarkan panjang dari device pengguna yang punya misalnya lu buka di iPad maka si bisa itu tuh bakal ngikutin panjang iPad nya kalau gua buka di Android maka akan mengikuti android nya, misalnya Samsung Galaxy Y2 misalnya atau di Xperia Mini atau misalnya di Samsung Samsung Samsung apalah yang gitu-gitulah ya bakal mengikuti, tapi kalau kita disini taruh 100px maka semuanya akan sama dapat 100px tapi kalau 100vh maka dia akan 100% seutuhnya gitu sepanjang layar device kalau di save kita lihat lagi websitenya tadinya kayak gini kalau di refresh jadi loh loh loh tidak berfungsi kenapa? Maka kita coba cek dulu di bagian Sorry tidak berfungsi Oke oke oke Body tidak mau maka kita mesti bikin bungkusan disini Hah Yaitulah ya Disini kita tutup div seperti ini ya bro Kita enter div yang ini kita cut, red taruh di paling bawah di atas body jadi div ini adalah utama atau apa disebutnya bungkusan utama dari semua item yang kita punya, item yang kita punya navigation, content dan juga footer ini tadi udah gue cut ya, ini kan tadi kayak gini nih ini kosong ya, tadi kayak gini kita tulis disini div, tutup Nah, tutup divnya jangan disini Kita pindahin, thread Cut aja, ctrl x Taruh ke bawah Di atas, slash body disini Thread kayak gini Jadi ini div yang paling luar diantara div yang ada Kasih kelas Namain aja Container doang Karena inilah container utama kita kalau udah lu save aja terus kita ke style lagi ya jadi kayak gini style lagi ini body kita ganti jadi dot container save hmm mestinya sih aman harusnya kalau gak aman kita mesti modif si bagian udah sih harusnya aman ya kalau selogikanya gue gitu ya tapi kalau gak aman ya bodoh lagi gue berarti ya refresh refresh Oh tidak aman pak berarti kita mesti Aduh kenapa tidak aman Coba kalau gue kasih winnya dulu With 100 px Nah itu ngaruh X100 viha kenapa tidak berpengaruh pak Sorry sorry sorry Gue agak lupa nih bodoh gue nih ya Hai 100 viha diantara seluruhnya am bentar ya biar gua troubleshooting dulu Hai 100 viha diantara semuanya ini 100px navbar Hai ini hmm oke oke oke oke sepertinya sepertinya Hei gini mesti gua taruh ke dalam konten deh ya ya ya sepertinya Hei gini mesti gua taruh ke dalam konten dulu supaya buat tau dia berfungsi atau enggak ini kita cut kontainer ini biar kosongkan saja seperti ini masukin ke dalam konten konten kontainer sini kalau gua tes di sini 100vh Apakah dia akan 100% layar Kita refresh Nah betul sekali Itu dia ya Kenapa yang tadi tidak berfungsi Wah gue mesti belajar lagi Berarti nanti tidak apa-apa lah Yang penting gue pengen ini 100% layar seperti ini, nah itu footernya kayak gimana bang, kenapa di bawah banget kita atur-atur lagi coba, footer itu tadi berapa pixel, kita hitung ya footer itu tadi containernya kita belum set heightnya kalau kita set heightnya disini taruhlah 200px save shred refresh Hai dia sebesar ini Oke kalau misalkan pihaknya atau ya pihaknya kita taruh 80 mana tadi konten nah heknya 80 pihak ya dari layar kalian 80% dari layar kalian terus hege yang ini 20% dari layar kalian viha Yang footer kita save Kita lihat lagi Refresh Nah akan seperti ini Kurang masih ada scrollnya Yang ini kita mesti kasih juga Coba ya Kasih manual aja dulu lah gak apa-apa Navbar kita kasih hangnya pake viha juga Nah bar 10 viha Nah berarti di total harus ada 100 viha biar 1 layar Kalau nah bar 10 viha Terus konten tadi 80 viha Berarti sisa 10 viha So hangnya 10 viha aja Jadi total 80 plus 10 plus 10 Itu akan menghasilkan 100 viha Jadi kalau kita refresh Kursornya hilang dan ini sudah jadi 1 layar Maka kalau gue buka di iPad ceritanya atau di Hai iPhone Nadia udah 100 layar iPhone kayak gini gitu kurang lebih tapi masih jelek ya karena bukan kita belum mempelajari responsif web itu hal yang berbeda lagi nanti ke dalam-dalam ini masih bikin website dulu tapi seenggaknya website standar yang belum responsif alias responsif itu bisa dibuka di berbagai macam device dengan sesuai seutuhnya gitu kalau ini masih belum gitu oke setidaknya ini udah enggak ada scrollnya lagi kalau dibuka di browser Hai gua jumin Jumat dia pun akan ngikut tuh kayak gini ya gua jumin 125 kayak gini-gini sekarang kita modif bagian navbarnya kita cek ke bagian navbar nah ini yang container gimana bang? yang container itu biarin aja buat kita bisa atur-atur nanti body atau background atau apalah gitu ya biarin aja dulu lah yang container yang disini juga biarin dulu aja kita modif yang navbarnya dulu navbarnya itu biasanya tidak seperti ini bro tidak pakai background-backgroundan kayak gitu dan nggak pakai juga Hai border gitu jadi disini kita style-nya hilangin Oke mana nah sini background colornya kita hapus terus listatnya biar bordernya juga kita hapus font-sizenya kita set di sini boleh font size Hai Emsa 30px save cek lagi ke browsernya maka fontnya akan jadi gede dan tidak ada background tidak border nah kan bisa kayak gini website ya tapi kan jelek banget ya nggak papa lah jelek banget nggak papa nih Bro santai aja ini sudah seperti ini tapi belum bisa diklik maka kalau lu pengen ini bisa diklik kita pakai tambahin a gitu loh tambahin a di dalam siliknya Ayo kita masuk ke indeks HTML supaya bisa diklik Nah kalau ke home maka dia diem di sini gitu ya kan kalau buat maka dia ke bot Oke kita kasih di sebelah sini di sebelah li nah di dalam sini ya ini kita mesti bungkus di dalam a nih Jadi kalau boleh ini gue hapus dulu buat minyak kita enter ya jadi kayak gini terus ini masukin a tutup slash a di dalam itu punya atribut namanya rev sama kayak yang CSS tadi tuh di sini kita kasih lagi tadi apa about me terus lesnya kemana nih selesnya ke about.html gitu Jadi kalau diklik about nih akan mengarahkan kita ke file about.html file-file kita enggak punya kita bikin dulu disini about.html enter kosong kita bikin formatnya dulu seperti tadi ya HTML tutup terus head tutup Hai enter kita kasih title-title nya about me terus disini kita kasih body tutup sini kita kasih hasil dulu untuk testing doang Hello ini about saya gini save dulu aja ya kayak gini dulu aja oke standar format ya standar format belum diapa-apain belum pakai CSS juga kalau udah kita close ini ini kita save juga jangan lupa cek lagi ke browser refresh Maka about me akan berubah warnanya menjadi biru Yang artinya ini sudah menjadi sebuah link Pengarahan gitu loh kurang lebih Mau apa yang terjadi ketika kita klik Kalau mau selalu geser disini Maka dia sudah jadi tangan seperti ini ya kan Karena dia sudah jadi link Kalau kita klik dia akan ke Halo ini about saya Seperti itu ya Back lagi klik hello ini about saya Itu jadi kita punya dua Ini dua page kurang lebih untuk website ini Website di folder website pertama kita nah ini gimana caranya supaya bisa dimodifikasi tenang aja nanti kita cssin kita tambahin dulu aja semuanya ahref ini bisa kalian kopas lagi atau kalian ketik supaya lebih jago lagi ya nantinya biar terbiasa untuk home ini kita kayak giniin hapus dulu enter masukin a nya tutup slash a disini home terus a itu punya atribut, atributnya apa? ref, nah untuk yang home karena home itu adalah rumah kita yang mana Rumahnya ada di index.tml Maka disini kita kasih pager aja Eh sorry disini Pager yang artinya tidak akan diarahkan kemana-mana Tapi dia link Nah buat apa bang? Kalau kayak gitu yaudah gak usah dikasih pager Bisa kayak gitu Kayak tadi juga bisa aja Tapi takutnya nanti kita mau membuat ini fungsi jadi apaan gitu Jadi biarkan aja semuanya satu format Terus kalau udah yang kontak.me juga sama Ini hapus dulu Lo enter A Tutup Slash A Terus kita kasih Kontakt Kontakt.me Ya Terus disini ref Refnya kemana?
Ke file Kontakt.html Tapi kita belum punya kontak.htmlnya Maka kita bikin disini satu lagi Kontakt.html Enter Bikin hal yang serupa Hai supaya cepet about ini kita copas copy ini kontrol ce copy masukin ke kontak Klik kanan paste Hello ini about sayanya ganti dan ininya pun titelnya ganti jadi kontak nih Hello ini silahkan ganti aja silahkan kontak saya di nomor WA berikut XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Kalau kita back ke kontak nih Maka dia akan silahkan kontak saya di nomor WA berikut Back lagi sini Kita modifikasi supaya dia warnanya kelihatan A itu kita kasih kelas juga Biar kita bisa modifikasi Sebenarnya banyak cara untuk memodifikasinya Tapi gue ajarin yang paling gampang aja pake kelas ya Sebenarnya kita bisa pake nested-nested lagi ke dalam Apa disebutnya ya Aduh bahasa teorinya gue lupa Tapi intinya kita bisa modifikasi A nya langsung lewat si Li nya Kurang lebih kayak gitu Gak usah lah itu nanti aja Yang penting kita ngerti kelas-kelasan dulu lah Kita kasih ini A strip navbar Copy copy copy Tempel kesini Pasti Tempel kesini Pasti Dipastikan si kelas itu berada di akhiran sebelum Ini nih apa namanya Gitu ya Di akhiran Supaya gak pusing Biar kita tau ciri-cirinya semua Sama Kita punya A strip navbar Maka di styling sini kita bikin navbar itu tadi terakhir dimana ini kontainer navbar, ini ul navbar, ini linavbar belum ada a navbar maka disini titik a strip navbar ukur awal di tengah-tengahnya bukan pulau jawa maka enter terus disini kita kasih color titik 2 white gitu kita save dulu lihat berubah gak warnanya refresh berubah ya, kayak gitu terus supaya gak ada underline nya kayak gimana ya kalau gak ada underline nya kita kasih disini text decoration none save lihat lagi browsernya nah kalau pengen lebih bagus lagi ketika mouse nya digeser kesini kita kasih background atau kasih ciri-ciri sesuatu ya sedikit aja tambahan, hayuk kita coba Berarti di bagian Li. Ketika kita mouse-nya geser ke sana itu di bagian Li. So, supaya tahu mouse-nya itu sedang ke sana, itu disebutnya hover.
Maka, kalau di sini titik Li strip nav bar titik hover. Atau titik hover. Ini sorry, titiknya satu kali aja.
Titik dua ya. Terus kurawal, enter. Enter. Enter, nah kayak gitu Apa yang terjadi ketika LiNavBar ini digeser mouse-nya ke situ gitu Atau kayak gini, aduh susah bilangnya Apa yang terjadi ketika mouse pengguna itu digeser ke kelas-kelas yang area kelasnya itu area kelas LiNavBar Nah itu arti dari codingan ini ya Ketika user menggeser mouse-nya ke area LiNavBar Maka gue akan melakukan perubahan warna dari Li-nya, background color Hai titik dua jadi white dan ono jangan white jadi tomato misalnya nggak papa kayak gini Oke kita save dulu kita lihat fungsi atau enggak jangan jauh-jauh gitu ya gitu dulu aja simpel ke browser kita refresh lagi kalau mau sebuah gini ini mau sebuah gua geser ke home dah nah Disini da Da da da da Kayak gitu Tapi kurang smooth ya Pengen ada transition maka kita masukin sedikit disini Transition Titik 2S Isi In strip out Titik 2S artinya 0,2 detik Atau lo bisa ketik 0,2 juga bisa atau berapa bisa atau titik 5s setengah detik dalam setengah detik akan bertransisi isiin out nama transisinya kurang lebih gitu terus kita kasih delay sedikit di transition delay Transition delay titik 2 titik delay nya 3s misalnya save maka mouse datang di delay dulu supaya bisa mendapatkan transisi ini Oke kita coba save dan refresh browsernya Mouse datang Delay terlihat Mouse datang Delay Mouse datang Delay Delay Delay Sekarang gue pengen pas mouse datang kotaknya biar jadi agak sedikit ngebulet Maka kita kasih border strip radius Titik 2 Taruh lah 8 pixel Maka kalau mouse nya digeser Sekarang ya refresh lagi Nah kotaknya jadi agak lebih bagus ya About me Contact me Untuk nabar segini dulu aja Ini berdasarkan preferensi lu Mau berapa detik Dan apapun yang Lu mau di dalam Di dalam si kelas ini Terserah lu, lu bisa cek di google juga Tugas kita berikutnya adalah Supaya ketika di klik youtube nya Logo youtube ini bakal mengarahkan ke youtube Kurang lebih ya Sekarang kita buka IMG.
Mana IMG-nya tadi? Nah, ini kan ya. Kita mesti masukin Ahref ke sini. Supaya bisa nge-click gambarnya.
A di dalam sini. Tutup dulu. Enter.
Masukin IMG ini ke dalam A. Ini kita cut. Tempel disini, paste Supaya rapih ini biar gak menjerok kayak gini Lu ketik aja Klik aja atau ketik ya Tekan Alt Shift F Nah dia akan ngeformat seperti ini Kalo gak bisa ya lu pecat tab-tab aja manual gitu ya bro Kayak gini Terus di dalam A nya kan ada attribute ref seperti biasa Mau kemana kita diarahkan gitu ketika ngeklik Yang ada di dalam A Ketika Apa yang di dalam A itu kan ada IMG ya Ketika IMG itu di klik Di klik Kemana tujuannya?
Tujuannya adalah ke youtube, youtube gue gitu https ketik aja disini youtube.com slash dea friza save, dan kalau kita lihat lagi websitenya, refresh maka formatnya akan berubah win sama hangnya gitu, hilang lagi ya gak, tapi kalau kita klik dia bakal ke youtube gue, right nah kayak gitu tapi kita format dulu, coba gambarnya bisa atau gak gue lupa lagi sih kita coba ya maka kelas img content udah biarin ahref nya ahref nya dicuriga nih kita kasih kelas coba disini a content save ya ya gua kasih nama mana tadi ini nih kelas a content kenapa nih merah Hai link Mas diskret teks elemen has not title Oh nggak papa lah biarin aja kayak gini ya kita coba akun tenya kita styling dulu di bagian konten-konten tuh sini sini sini nasi ini boleh sini dot a content kayak gini kita kita set dulu with agenya Hai kalau nggak bisa ntar gua pakai cara kedua ya winnya 100 atau 500px, heightnya 500px, save dulu, terus lu lihat lagi ke browser, refresh, nah ini jadi ada disini nih oke, kita kasih background biar kita tahu dimana si A itu berada, background, color, kita kasih warna white save, reload lagi oh segini perhatikan ya segini ya maka supaya gambar ini sama kayak gini, oke atau kita bikin width-height nya jadi 16 banding 1 720p 480p so kalau kayak gini kita save lagi kita refresh Nah gambarnya udah gak penyok lagi Tapi kita pengen gambar ini di tengah sini Ya bener ya Di tengah sini caranya Kita atur lagi disini coba Display Black seperti tadi Justify content center Align item center Coba kalo gak bisa kita mesti bungkus itu pake div Jadi akal-akalan aja bro Kalo mainan kayak ginian mah Untuk awalan sambil belajar melatih logika juga ya Gimana caranya pokoknya gak tau Pengen ini ada disini Terserah lu pokoknya gimana caranya Yang penting bisa dulu gitu Refresh Udah ke tengah lagi Dan sekarang Kalo lu ngeklik area sini Maka akan mengarahkan ke youtube gitu Area ini nih Ya Dan sekarang kalo kita kasih lagi elemen di bawah Sini di dalam di bawah image sini nih, gue taruh disini P yang artinya paragraph mampir ke youtube view gitu loh save kita lihat browser di bawah image ya, ini ya di bawah image nih tuh sini, jadi di dalam A ini gak best practice alias gak bagus tapi untuk belajar oke gak bagus untuk dipake di dunia kerja tuh gak akan ada yang kayak gitu ya Refresh Mampir ke youtube dulu Tuh kan kayak gitu Mampir ke youtube dulu pengen ke bawah bang Gimana caranya misalnya Kita kasih disini DA content kita kasih Bagian sini Flex direction Column Save Cek lagi ke browser Refresh Kalau pengen ada margin paddingnya Gimana Nah ya udah kalau gitu kita kasih justify kontennya itu atau lan itemnya atau ini between deh kasih between space between ya Coba kita lihat dulu ke browser tuh jadi akan jauh-jauhan kalau space evenly maka dia akan sedikit berdekatan Hai hampir ke YouTube you kalau kayaknya kita ubah jadi disini background white terus ini colornya jadi black ya color black biar terus teks decoration non jadi kalau akan kayak gitu tadi kan kalau itu bakal jadi biru dan segala segala macemnya lihat lagi ke browser refresh jadi seperti ini kalau kita pengen gede font size-nya font size 30px gitu save lagi cek ke browser mampir ke YouTube yuk kalau diklik ini maka akan terjadi sesuatu kalau ini kita kasih border radius border radius misalnya taruh aja 80 Hai px jadi bulet nih pret nah ini kan udah cukup lumayan oke lah kurang lebih nah ini yang belakang backgroundnya kok putih ya jelek banget katanya gitu jadi kita ganti background yang putih tadi kan ada dari kontainer konten kita ganti aja jadi biar enggak terlalu putih 5555 gitu boleh save cek lagi sini refresh nah kayak gini bisa atau mau jadi warna yang agak keputihan eh keputihan jadi f7 F7 F7 kebanyakan seperti ini lihat lagi nah ini putihnya nih ada nih terus yang putih kita kasih background color tenang-tenang kalian contoh kodingannya pause aja videonya kita kasih disini Shadow Shadow box Shadow sini ya supaya bisa ngasih box Shadow kita buka dulu browser ketik box Shadow generator Hai nah biar nggak usah ngoding jadi tahu aja gitu langsung sesuai kebutuhan kita mau seperti ini tinggal kita copy masukin ke sini ini hapus tempel tuh keliatan gak? gak keliatan nih tuh keliatan ya sok di copy dulu nih seperti ini kalau di refresh maka akan jadi seperti ini lihat browsernya nih awas awas kan udah sangat lumayan indah bener gak? tinggal yang footer nih websitenya di bawah sepenuh hati biar jadi putih so kalian ikutin dulu codingnya biar jadi seperti ini ikutin codingnya untuk yang A contentnya dulu ya gue copy dulu aduh anjir ada semut pula eh Hai hai Hai gimana ini untuk a-content kalian udah pause videonya ini untuk yang kontainer konten seperti ini tuh so biar gua sambil bisa sebat dulu udah nggak sempet dengan aman nggak papa biar agak pedes ah aduh Oke, sudah?
Kita review lagi dari atas codingannya HTML bintang untuk kebutuhan wrapping semua elemen yang ada Margin 0, padding 0 di set Container ini belum terpakai, biarkan untuk kebutuhan nanti Terus container navbar, untuk si navbarnya dikasih backgroundnya ini kita lihat lagi di websitenya ini backgroundnya gak jelek kita kasih warna lagi tomato misalnya jangan pakai pager save terlihat ke browser kayak gini atau crimson seperti yang dibawah kita kasih crimson biar jadi joss lihat lagi nah kan keren ya seperti ini terus untuk di bagian mana ya ini ul-ul nafbarnya ini terus ini linafbarnya ya kalian udah tahu mungkin fungsinya masing-masing terus ini hover ketika mouse nya digeser terus enough bar color nya white, text nya decoration nya ini kita tambahin satu lagi font font-weight nya supaya ketebalan font nya tebal banget 800 gitu kita lihat lagi refresh nah jadi seperti ini ya biar lebih joss, kita scroll lagi ke bawah container content seperti ini, a content seperti ini Hai ini IMG konten bisa kita naikin lagi jadi 5050 save terlihat lagi di browser jadi seperti ini lebih oke kita balik lagi kodingan kontainer footer seperti ini tinggal tambahin color sepertinya karena dia berwarna tadi item color white biar sama kayak nafbar untuk khas satu footer Oh sorry color white nya di hasil footer ini dikat aja Bro kontrol X di sini kontrol V ini hapus perapi nah kayak gini, kayak gitu doang bro, codingnya simple kalo lu refresh, spread, jadi terjadi seperti ini kalo ke about me jadi gini kalo ke kontak jadi gini kalo ke youtube jadi gini gitu tuh ya sekarang tinggal about me dan kontak me, caranya tinggal kita kopas seutuhnya codingan index.html yang ada disini tapi nanti kita ganti isinya doang, konten satunya doang ya masuk, ini kopas di ctrl c ke about.html ctrl A biar keblok semuanya backspace hapus ctrl V nah ganti nih isian kontennya kan kontennya ini A ini nih ini kita ganti jangan pakai gambar YouTube karena kita kan enggak enggak sana enggak YouTube yang apa yang about kita hapus ininya misalnya gambarnya Instagram nih taruh Instagram gambarnya misal contoh-contoh aja kayak gitu kita hapus aja Hai gambarnya taruh lalu punya gambar Instagram jadi SRC nya tinggal ganti ya SRC jadi Instagram gitu itu buat PR lu aja jangan gue kan udah tahu dasarnya gimana itu ini hapus gua cuman mau gantiin nya doang ganti jadi ini tentang saya tentang saya bisa kalian baca di sini udah ini footer biarin terus di bagian, nah ini penting nih supaya kita bisa balik lagi ke home maka di bot html khusus yang di baris ke 12 yang ref nya ini jangan pager lagi tapi ke index.html lagi jadi nanti kita bisa bulat balik terus kita ctrl A ctrl C untuk copy di copy, ctrl A untuk block semua atau lu copy biasa kayak gini ctrl A, ctrl C masuk ke kontak disini ctrl A ctrl alias backspace dulu ctrl V tentang saya ini kita ganti jadi hubungi saya sekarang ini misalnya ke instagram instagram.com safe Sisanya Udah ini udah gak perlu diubah-ubah lagi Titlenya yang mesti diubah nih Web saya ini ganti jadi Ini kontak saya Contact me Terus yang about HTML juga sama Titlenya tadi belum diganti Jadi diganti jadi About HTML Yeay kok about HTML About me Save Maka sekarang kalau sudah semuanya selesai seperti ini Karena semuanya sudah punya link real style sheetnya juga ya Sudah terkoneksi jadi 1 CSS 3 file HTML Semuanya pakai styling yang sama Jadi benar-benar ini tuh enak kita bisa pakai gitu ya Pakai lagi lagi lagi lagi dan disesuaikan aja nanti Kalau lo pengen style up baru lagi ya bikin lagi kayak gitu lagi gitu gitu aja bro Simple sebenarnya Yang penting sering dan sering latihan dan tau gitu nanti tuh mesti ngapain aja Oke kalau ini udah refresh aja disini Refresh lagi, terus kita coba-coba Mulai dari klik youtube nya, klik kanan, open new link tab, maka akan kebuka, aman Terus kita coba klik about me Ini hover nya kan warna oranye, lu ganti jadi hitam misalnya pas di hover gitu loh Biar ada kerjaan gitu ya, biar gak cuma ikutin tutorialnya, biar ada PR ya Buat lu nih PR, kalau di hover warnanya jadi hitam ya, bukan warna oranye Apa tuh oranye? Itu, jadi hitam PR1, terus PR2 klik about me Udah, tuh tentang saya bisa kalian baca disini Kalau di klik maka akan ke Youtube lagi Nah, ganti nih Kalau tentang saya bisa kalian baca disini Lu disini bikin sesuatu hal yang baru di konten satunya Terserah lu, itu tugas lu ya Terus di kontak me Kita klik lagi Ini kalau balik lagi ke home udah bisa Tuh, ke about me, ke home Ke about me, ke kontak me Bisa tuh semuanya ya Dengan cara yang sangat mudah Buat lu yang belum pernah modding sekalipun Pun gitu kan bisa ikutin gitu Itulah ya semester 1 Ya cuy university bro jangan lupa Makanya aduh sampai ngebudah Oke jadi tugasnya nanti buat kalian Berikutnya adalah memodifikasi bagian About me ini supaya sesuai Seperti apa yang kalian udah pelajari Masing-masing tapi gue membuka Gerbang aja bahwa modding itu gak Horror sehoror-horor kayak gimana harus butuh Webse, eh butuh apa namanya komputer yang Mahal 12 juta gitu Gak perlu ya ini karena cuman Buka VSCode doang, yang penting lo bisa buka VSCode Atau bisa pake text editor yang ringan-ringan Banyak lah lo bisa cari di google Text editor untuk ngoding HTML Misalnya gitu-gitu Ini cuma 3 file HTML 1 CSS lo udah bisa bikin kayak gini Dan ini bisa dimasukin ke server gitu kurang lebih Oke kurang lebih kayak gini doang Terus Sekarang gue coba ini gue upload ke Hostingan gratis supaya bisa kalian Cek juga jadinya seperti kayak gimana Ya Oke kita coba pakai replit Jadi kalian kalau udah bikin ini lu bisa ikutin hal yang sama kayak gue gini pakai replit kalau udah buka replit nya kita tinggal bikin nih disini create baru terus tungguin kayak gini HTML CSS kasih nama misalnya apa ya to University University sesi satu web-web gitu create travel kalau udah seperti ini folder ini gua bakal masukin sono gitu kurang lebih ya tungguin aja dulu close, ini gua masukin thread, place, dan sekarang kalian bisa ngecek sendiri websitenya itu seperti apa kalau ini gua run, kita udah bisa, kita udah punya linknya dan ini yang tadi terbuka kalau linknya kita buka disini, enter website kita sudah jadi ke browser, dan kalian bisa share website linknya ini ke teman-teman kalian, bahwa kalian sudah pernah bikin website kayak gitu bro, sungguh sangat simple about me nya sudah ada, kontak me nya sudah ada gimana? masih bisa bilang susah bikin website? Sebenarnya kalau niat dan ada usaha bisa Tapi kan minimal ada persyaratan beberapa tadi Punya text editor, punya internet, punya spek komputer Ada kurang lebih RAMnya 2GB Cuma bisa HTML CSS Dan kalian pun bahkan yang nonton video ini Dan sudah mencoba sampai saat ini berhasil seperti ini Apakah lama belajar HTML CSSnya?
Enggak kan? Bisa langsung ikut-ikutan Tapi yang masih dipelajarinya masih banyak Itu tuh cuma Berdasarkan studi kasus Nah kalau belajarnya tidak berdasarkan studi kasus Akan lama Tapi kalau belajarnya langsung studi kasus Tidak tahu elemen-elemen yang lainnya Karena lu belum belajar yang gitu-gitu Jadi bagusnya adalah Kalau punya waktu 24 jam sehari 12 jamnya buat baca-baca dokumentasi 12 jamnya buat implementasi ngoding Jadi lu gak tidur Kurang lebih kayak gitu aja ya Ini linknya gue bakal masukin ke deskripsi Lu bisa cek juga untuk referensi Dan source code-nya nanti bakal gue masukin juga di deskripsi Buat lu ngecek-ngecek itu kurang lebih ya Semoga bermanfaat untuk di playlist semester 1 ini Sampai jumpa di semester 1,5 Bertemu lagi sama gue nanti disana Kalau kalian udah bisa berhasil yang kayak ginian Berarti udah bisa lulus kelas Cuy University semester 1, nanti naik kelas ke Cuy University semester 1-5 Semester 1, ya 1.5, terus semester 2, 2.5 Nanti semakin dalam semakin bisa jadi programmer yang industrial gitu kurang lebih Karena kan gue bukan anak teori juga Jadi sorry kalau banyak teori yang miss Karena gue jarang baca orangnya Gue lebih sering praktek ya Lebih seru ngulik-ngulik kayak gitu Jadi kurang lebih kayak gitu aja Semoga bermanfaat karena udah durasinya udah mau 2 jam juga seru banget bisa bikin playlist oke kita cek dulu ya bikin playlist semester-semesteran gue tuh lagi merancang juga playlistnya supaya lebih bagus lagi, jadi di Cuy University semester 1 itu buat yang beneran pemula awam banget ke dunia coding kalian bisa ikutin dan bisa jadi sesuatu berdasarkan studi kasus plus belajar juga dari nol ada sprint web link 3, jadi kalian kalau udah ngikutin yang ini Hai sprint web ya ini web-web personal pribadi dari nol buat pemula bisa yang sprint web link 3 atau yang ini HTML CSS bootstrap bisa diikuti in the series ini ya si full play Jadi lu mesti cek playlist lah kalau di Guaima, kalau nggak acak-acakan soalnya videonya. Terus cari tau Cuy ini cuma sebagai referensi-referensi aja. Terus nanti kalau ini udah semua, lu bisa move ke yang Cuy University 1.5, yang mana dalamnya itu ada konsep book yang kurang lebih mata pembelajarannya adalah kayak semacam konsep-konsep yang ada di dunia programming yang belum diketahui banyak orang misalnya. Apalagi yang di luar industri, itu gua berbagi apa-apa yang ada di industri.
Industri itu maksudnya... Dunia pekerjaan real programming profesionalnya kurang lebih kayak gitu Dasar-dasarnya gue taruh disini gitu Terus ada react.js from 0 Yang mana ini bagian dari library-library Framework-framework Terus print web film Ya lo bisa masuk ke semester 1.5 Nanti akan ada semester 2 ngapain Semester 3, 4 Doain aja semoga bisa terus menerus seperti ini Dengan dukungan kalian juga Yang udah subscribe juga Jadi lebih semangat lagi bikin Cuy University-nya berkembang Sampai ke semester ending Dan menghasilkan lulusan-lulusan yang Industrial dalam kutip Programmer-programmer indie, otodidak Dan bisa bekerja secara profesional Lewat playlist ini doang Doain aja, ini masih permulaan Jadi semoga kalian pun Bisa mendapatkan berkah dari Video-video gue dan thank you banget Udah subscribe gue, apalagi yang udah jadi Member disini, ada beberapa member Banyak banget ya, buat yang mau jadi member Tinggal klik aja tombol joinnya disini Ada tombol join dan kalian pilih mau aktivis Coders ataupun mania coders Kalau Octavius Coders nanti mendapatkan beberapa benefit seperti ini. Dan Mania Coders bisa mendapatkan benefit yang lebih dari itu termasuk juga yang ini. Jadi Mania Coders yang full akses. Juga video pembelajaran course gue yang durasinya kurang lebih bisa sampai 5 jam.
Seperti yang bisa kalian lihat di Cine Members Only Video. Ada 1 jam setengah, 2 jam, 3 apa yang dipelajari adalah sesuai industri biasanya kayak gitu kurang lebih Oke, semoga berhasil membuat website yang seperti ini sampai jumpa di konten berikutnya jangan lupa di share videonya juga Thank you, bye bye