Panduan Membuat Website CV

Halo teman-teman semuanya, di video kali ini saya ingin menjelaskan tentang bagaimana membuat website untuk CV. Ini adalah website yang sederhana yang dibangun dengan HTML dan CSS saja. Kalau teman-teman belum pernah lihat, pernah belajar tentang HTML dan CSS saya merekomendasikan teman-teman untuk belajar dulu dasar-dasar tentang HTML dan CSS dan teman-teman bisa temukan tutorialnya di channel belajar coding di video-video sebelumnya Website yang akan kita buat itu seperti ini ya teman-teman. Ini contoh CV saya buat untuk Cristiano Ronaldo. Jadi di sebelah kiri ada gambarnya dan ada button untuk kirim email, untuk kontak WhatsApp. Lalu di sebelah kiri ada gambarnya dan ada button untuk kirim email, untuk kontak WhatsApp. kanan ini bisa di scroll dan ada section-sectionnya ada about nanti langsung ke bagian tentang about resume ini langsung ke bagian experience dan achievement lalu ada juga Link untuk kontek Ke kontek detailnya Seperti itu teman-teman cukup Sederhana dan ini di Host di github.io Sederhana tapi terlihat Bagus untuk CV Desainnya minimalis dan ya bagus Oke sebelum itu Saya ingin menjelaskan dulu tentang Langkah-langkah dalam membuat Website jadi secara general Ada 4 langkah ya teman-teman Dalam membuat sebuah website Yang pertama yang harus dilakukan adalah adalah mendesain wireframe nya ini adalah contoh wireframe yang bisa teman-teman lihat jadi wireframe itu seperti desain untuk websitenya layoutnya mau seperti apa dimana kita menempatkan gambarnya atau video atau link dan posisi teksnya di sebelah mana layoutnya seperti apa teman-teman juga bisa menentukan warnanya mau warna apa seperti itu ini dilakukan di dalam mendesain wireframe setelah itu langkah kedua adalah mempersiapkan asetnya, asetnya itu bisa berupa teks tulisannya mau apa saja teksnya, kontennya lalu image-nya gambar-gambarnya kalau ada video teman-teman harus persiapkan juga videonya lalu link-nya dan lain sebagainya semua aset-aset yang diperlukan untuk website-nya teman-teman terima kasih Setelah asetnya siap, desainnya siap, asetnya siap, lalu teman-teman bisa mulai menulis codenya. Codenya itu bisa front-end code seperti HTML, CSS, JS. Atau kalau website-nya ada interaksi ke back-end, ada API seperti itu, teman-teman bisa menulis juga back-endnya. Untuk contoh ini, kita hanya menggunakan front-end karena ini website yang sederhana. Langkah yang terakhir adalah hosting. Hosting ini supaya website kita bisa diakses lewat internet. Jadi semua orang bisa buka website yang sudah kita buat. Nah, hosting ini sendiri secara garis besar ada dua jenis, yaitu manage hosting. Yaitu orang lain Atau perusahaan lain yang Memanage Servernya Dan kita gak perlu manage servernya Kita tinggal bayar biaya hostingnya Itu manage hosting Option yang kedua kedua yaitu self hosting, yaitu kita bangun sendiri servernya dan kita manage sendiri servernya nah yang akan saya contohkan ke teman-teman ini termasuk ke manage hosting, yaitu kita host di github.io dan github.io ini gratis ya teman-teman, dan cukup simple, nanti saya akan jelaskan di bagian terakhir oke, untuk contoh di video ini sebelumnya saya sudah mendesain website saya yang ini bisanya akan seperti ini, jadi langkah yang pertama ini sudah selesai di video ini ya teman-teman, lalu mempersiapkan aset, asetnya juga sudah saya persiapkan ini icon kalau teman-teman lihat ya disini ada icon icon buku, ini diambil dari icon ini favicon.ico jadi gambar ini sudah saya persiapkan nah dapat icon ini dari mana teman-teman bisa buka website nya favicon.cc Ini untuk mengenerate icon yang akan ditampilkan di sebelah kiri atas ini ya teman-teman. Dan icon ini teman-teman perlu siapkan dulu image-nya. Contohkan biar teman-teman bisa mengikuti juga nanti ya. Oke. Contohnya seperti ini ya. Teman-teman import image-nya. Dari file.png. Lalu setelah itu upload. Oke. Saya coba sekali lagi ini choose filenya. .png lalu upload. Setelah itu teman-teman download iconnya. Nah seperti itu ya teman-teman cara untuk mendapatkan icon file yang nanti akan kita pakai untuk ditampilkan di Windows tab-nya teman-teman. Ada gambar kecil icon di sini. Nah aset-aset itu harus dipersiapkan dulu sebelumnya. Jadi ini sudah saya persiapkan, lalu fotonya untuk foto di sini saya sudah persiapkan juga. Resolusinya ini 400x400 ya teman-teman. Lalu kita lihat detailnya ini 400x400 pixel. Jadi langkah yang kedua ini sudah selesai juga ya teman-teman. Jadi saya sudah persiapkan, nanti teksnya kita bisa copy dari contohnya. Nah, kita masuk ke step yang ketiga, menulis code. Jadi saya akan jelaskan kepada teman-teman, dan kita tulis codenya dari 0. Oke, mari kita buat codenya. Saya akan buat file baru di sini. Saya akan buat index.html Jadi teman-teman harus Menulis Filenya dengan nama index.html Ya teman-teman karena Di github itu mereka Mendeteksi Sebagai homepage itu index .html oke, lalu kita buka code editor kita lalu kita buka file index.html tadi ya teman-teman di code editor kita oke pertama-tama seperti biasa kita harus buat dulu template html atau boilerplate dengan mengetik html lalu tekan tab titlenya cv .html Cristiano Ronaldo Coba kalau kita save Lalu kita buka File index.html ini Nah sekarang Tab nya udah ada ya teman-teman Ini masih kosong Ini contoh yang mau kita buat lalu sekarang kita mau ganti nih iconnya oke cara untuk mengganti icon itu dengan memasukkan tag link ya teman-teman mirip seperti CSS ini secara default kalau kita ketik link lalu tekan tab ini jadi untuk CSS tapi kita enggak mau masukin CSS mau masukin icon kita harus ganti relnya jadi type nya jadi icon baut type ini kita bisa hapus tidak terlalu perlu lalu source file nya file nya itu ini ya teman-teman nama file nya favicon.ico ini ada di folder yang sama jadi kita bisa langsung tulis nama filenya seperti itu favicon.aiko kita save coba kita lihat lagi karena kalau kita refresh nah iconnya udah muncul di sini ya teman-teman jadi dari nama tabnya dan iconnya ini Udah sama. Oke, sekarang kalau kita lihat contoh website ini. Ini ada dua bagian besar ya teman-teman. Container di sebelah kiri. Dan ini pasti pakai div. Kalau kita membagi section-section atau division. di dalam HTML itu menggunakan div jadi dua section ini yang sebelah kiri yang warnanya abu-abu ini ini satu div, satu div besar lalu yang sebelah kanan ini satu div besar lagi sebelah kanan ini bisa di scroll tapi yang sebelah kiri ini fix ya teman-teman posisinya nah jadi kita harus buat dulu dua bagian besar jadi div yang pertama kita bisa kasih class left container lalu div yang kedua bagian besar yang kedua to write container nah ini kalau kita reverse di html nya belum jadi apa-apa ya, karena belum ada isinya, belum kita layout juga untuk css nya kita akan menggunakan external css karena ini css nya pasti lumayan panjang jadi kita buat juga teman-teman, saya buat css nya di sini ya link lalu tekan tab nama CSS nya kita bisa kasih nama style.css lalu save oke lalu kita buat CSS filenya disini style.css kita buka juga ini di code editor kita Oke ini CSS file kita lalu kita mau kasih left container ini warna ya teman-teman ini left container nya yang ada foto dan button kita mau kasih width dan height dan kasih warna Nah, karena saya sudah mendesain ini sebelumnya, jadi saya tahu lebarnya left container ini adalah 400px ya teman-teman. Dan kalau kita scroll, ini nggak pindah-pindah ya teman-teman. Artinya, position yang left container ini, positionnya... Fix, teman-teman bisa lihat juga di video pembahasan tentang CSS, saya pernah membahas sebelumnya tentang position. Kalau ini tidak berpindah, kalau di scroll, itu artinya positionnya fix yang sebelah kiri. Jadi di CSSnya, kita panggil kelas left container ini, dan memanggil. kelas itu adalah dengan tanda titik ya teman-teman lalu nama kelasnya lalu buka kurung seperti ini kita kasih position fix Lalu width-nya, karena saya sudah desain website ini sebelumnya, jadi saya tahu itu width-nya 400px. Nah, kalau teman-teman membuat website-nya dari awal, dari scratch, mungkin teman-teman harus coba-coba dulu. Kira-kira lebar ini itu berapa? Karena saya yang mendesain sebelumnya, saya sudah tahu ini 400px lebarnya untuk yang area berwarna abu ini ya, teman-teman. Oke, untuk height-nya. Cara untuk bisa dapat keseluruhan height dari screen itu caranya adalah dengan menulis 100 VH. Jadi seperti ini 100% dari viewport height. Ya teman-teman. Nah, kalau kita save di sini ya, teman-teman, ini belum ada apa-apa. Karena kita belum kasih warna. Sebetulnya ini sudah ada dual division. Division ini sudah jadi. Tapi karena warna defaultnya putih, jadi belum kelihatan. Oleh karena itu, kita harus kasih background color. Nah, background color-nya ini kita bisa ambil dari contoh website-nya. Kita bisa inspect di sini. Klik kanan, lalu inspect. Lalu kita ambil nih, hex code-nya dari contoh. Oke, kita paste di sini. Save dulu. Kalau kita refresh, nah sekarang ada live container-nya kelihatan. Oke, live contentnya sudah jadi. Tapi kalau teman-teman perhatikan, ini ada seperti marginnya ya teman-teman. Ini adalah margin default dari body. Saya sudah membahas ini juga waktu membahas DCSS tentang margin dan padding. Untuk menghilangkan default margin ini, kita harus... buat kita bisa panggil body nya disini untuk elemen body jadi kita buat default margin nya jadi nol, padding nya juga jadi nol kita save lalu kita refresh nah sekarang default margin dan padding nya itu hilang jadi langsung div nya ini aja oke live container nya udah jadi temen-temen Nah kalau kita lihat website atau kita mendesain website, kita harus berpikir juga tentang division-division dari website tersebut ya. Nah contohnya seperti ini, ini ada gambar, image, ada tulisan contact me, dan ada dua button. Ini pasti ada divisionnya sendiri ya teman-teman untuk kita mengaplikasikan CSS style dan CSS property-nya. Dan Kalau kita bisa saja bikin gambarnya jadi satu division, atau lalu button-nya division yang lain, tapi kita bisa juga sebetulnya satukan kalau memang bisa disatukan. Jadi CSS property-nya bisa disatukan untuk keseluruhan elemennya. Nah, untuk gambar tulisan contact me dan button ini, kita perlu membuat satu division lain. di dalam left container ya mungkin kita bisa kasih nama divisionnya ini kita kasih class mungkin foto dan kontek seperti itu foto kontek karena disini ada foto dan ini untuk kontek detailnya jadi foto kontek Lalu untuk image-nya, kita bisa buat elemen image. Nah, source-nya ke foto yang sudah kita persiapkan. Ini nama filenya foto.jpg. Jadi kita tulis source-nya foto.jpg. Kalau kita save. dan kita refresh disini nah image nya udah masuk ya teman-teman gambarnya udah masuk tapi ini gambarnya masih terlalu besar jadi kita bisa atur juga width nya gambar ini mengikuti juga dengan parent nya ya teman-teman Ini saya sudah persiapkan sebelumnya ke image ini Pixelnya 400x400 dan width dari left container ini juga 400 Dan disini contohnya ini tuh setengah dari width parentnya Jadi 200 pixel Nah kalau kita atur Misalnya untuk foto kontek ini ya teman-teman kita bisa kasih kelas juga ini teman-teman ya kita kasih kelas foto misalnya lalu kita panggil kelas fotonya kita kasih widthnya 50% supaya besarnya jadi setengahnya kalau kita refresh nah jadi segini ya jadi kecil setengahnya tapi ini kalau kita lihat contoh ini agak ke bawah ya teman-teman fotonya dan semua konteksnya ini agak ke bawah ini masih di atas yang bisa kita lakukan karena tadi kita memasukkan image ini ke division ke division photo contact, kita bisa panggil juga kelas photo contact ini kita panggil kelas photo contact ini lalu kita kasih position absolute dan dari atas kita kasih 100px supaya dipindahin posisinya 100px ke bawah jadi di atasnya itu ada jarak 100px kalau kita save lalu kita refresh nah jadi seperti ini ya teman-teman posisinya udah ke bawah begitu teman-teman disini fotonya rounded bulet ya teman-teman sedangkan foto kita masih kotak cara untuk membuat jadi bulet itu kita bisa tambahkan property ini di fotonya jadi kita panggil kelas fotonya kita bisa kasih property border radius ya teman-teman border radius 50% itu akan membuat yang kotak jadi bulat kalau kita save lalu kita refresh nah sekarang jadi bulat ya teman-teman terus ini masih di sebelah kiri kalau kita mau pindahin ke sebelah kanan dan nanti yang dibawah-bawahnya kontak juga ada di tengah ya teman-teman maksud saya di tengah ya bukan di kanan ini di sebelah kiri kita mau pindahin ke tengah kita bisa pindahin seluruh division foto dan kontak ini ke sebelah, ke center nah itu caranya adalah dengan property jadi kita kasih disini di photo kontak text align, jadi text align ini gak hanya untuk text sebetulnya, bisa untuk image, bisa untuk button juga kita tulis center text align center, kalau kita save lalu kita refresh disini, nah ini jadi ke sebelah, lebih ke kanan jadi ke tengah ya teman-teman seperti itu teman-teman fotonya sudah jadi dan kalau teman-teman notice tadi ya, saya kasih text align ini di division foto konteks, supaya nanti ketika kita masukin button kesini Kedalam foto kontek Button nya juga akan jadi ke tengah Oke Di bawah Foto ini ada tulisan kontek me Kita bisa pakai Elemen H1 untuk ini Kita buat H1 disini kita masukkan contact me kalau kita lihat sekarang ada tulisan contact me nya lalu di bawahnya ada 2 button kita buat button ya teman-teman yang pertama email dan yang kedua whatsapp Oke, kita save. Nah, jadi seperti ini ya teman-teman. Ini masih default button. Di sini button-nya besar. Lalu kalau di hover, kalau disorot, warnanya ganti ya teman-teman. Jadi ada animasinya. Lalu widthnya dari button ini juga sama dengan fotonya. Kita bisa kasih button ini widthnya 50% juga sama seperti image-nya. Jadi ngikut 50% dari parent-nya. Parent-nya itu 400px ya teman-teman. Parent div-nya yang tadi, left container. Oke, sekarang kita mau... Buat dulu sebelumnya email ini kita kasih kelas juga ya teman-teman Button seperti itu Toe ya class button, jangan bingung ini nama kelas ini bisa apa aja kalau contact button atau contact btn gitu juga bisa ya nama kelas itu terserah kita oke kita kasih kelas supaya kita bisa edit button ini ya teman-teman nah kita panggil button nya contact dan kita kasih width dulu 50% supaya dia jadi lebar kalau kita refresh, nah jadi seperti ini ya teman-teman ini ada di center dan jadi lebar background colornya ini putih kita bisa tambahin juga property background color white kita refresh, nah sekarang jadi putih terus ini ada melengkung ya melengkung bordernya, kita bisa tambahin juga border radius kita bisa kira-kira ini 12px misalnya nah jadi melengkung buttonnya lalu jarak ada jarak antara button 1 dan button lainnya itu kita bisa pakai margin margin button misalnya 12px juga oke sekarang ada jarak lalu disini buttonnya lebih tinggi ya temen-temen dan fontnya juga lebih besar kita bisa naikin font size nya Font size. Kita bisa buat. Kita bisa buat juga font size itu relatif ya. Kita bisa tulis dengan REM. Jadi kalau kita tulis REM misalnya ya teman-teman. Ini akan lebih besar kalinya. 120 persennya. Seperti itu. Terus di sini. Ini kayaknya lebih besar. Mungkin kita bisa buat satu seperti itu kita save refresh kurang lebih sudah sama besarnya tapi disini fontnya bold ya teman-teman untuk bold kita bisa kasih font wake bold oke lalu Hai disini lebih tinggi buttonnya itu bisa kita tambahkan padding ya temen-temen jadi padding kita bisa tulis 10px misalnya dan ini 10px ini akan diaplikasikan ke atas bawah kanan kiri sebenarnya kita hanya perlu yang atas bawah tapi enggak apa-apa kanan kiri juga nah seperti itu setelah kita tambah padding jadi ada jarak antara border dengan tulisannya seperti itu nah ini lebih rounded ya temen-temen lebih rounded kita bisa tambahin border radiusnya mungkin jadi 14 pixel supaya lebih rounded seperti itu oke nah kalau kita hover yang disini kalau kita sorot ini jadi warna hitam lalu fontnya asalnya hitam jadi putih ya teman-teman caranya seperti ini caranya gimana dua ini masih ada gap sedikit margin button nya kita bisa tambahin jadi 14px juga oke ya kurang lebih ada gap nya temen-temen bisa atur-atur sesuka temen-temen ya nah untuk di hover terus ganti warna itu kita bisa buat seperti ini ya temen-temen kelasnya contact button lalu tambahkan efek hover jadi kalau button nya disorot oleh mouse font color nya jadi berubah font color itu propertinya color color nya jadi black ya teman teman Sorry, color-nya jadi black. Background color-nya jadi black. Tapi font-nya, color ini untuk font. Tapi font-nya jadi white. Nah, coba kita lihat ya. Kalau kita refresh, sekarang jadi seperti ini teman-teman. Jadi color, color itu untuk font-nya jadi white. Tapi background color-nya jadi black. Begitu teman-teman. Nah, ada sedikit perbedaan kalau teman-teman lihat. Disini lebih halus ya teman-teman kalau kita sorot. Sedangkan ini kayak langsung, perubahan warnanya langsung. Nah perubahan warna yang ada transisi ini, itu bisa dibuat dengan cara... Transition Transition Lalu kita bisa tulis Durasi transition nya Misalnya 1 second Kalau kita refresh Nah sekarang jadi halus ya teman-teman Perpindahannya Oke Nah disini kalau di klik whatsappnya atau emailnya ini akan buka email dan akan buka whatsapp. Sedangkan disini button kita belum mengerjakan apa-apa. Kalau di klik belum terjadi apa-apa. Nah kita bisa buat ini dengan cara menambahkan elemen link ya teman-teman. Jadi kita gabungkan antara link. a tag, tag a dengan button ini jadi kalau button yang email ini di klik kita akan buka mail to mail to itu untuk membuka email misalnya nama emailnya cr7 at gmail.com nah kita bisa tulis seperti ini jadi kalau email buttonnya di klik, dia akan membuka email kita bisa gabungkan dengan A tag begitu juga dengan whatsapp ya teman-teman kita bisa gabungkan juga dengan A tag penutup tag A nya disini saya kasih indentation supaya lebih mudah dibaca klipnya oke jadi yang pertama ini foto ya teman-teman foto lalu tulisan contact me lalu ada dua button nah untuk whatsapp kita bisa googling generate whatsapp link lalu teman-teman bisa klik generate whatsapp link bisa masukkan nomor teleponnya disini lalu generate my wa link nah ini wa linknya teman-teman bisa copy lalu lalu masukkan disini jadi kalau WhatsApp buttonnya diklik dia akan membuka link ini kita coba ya teman-teman ini udah saya close saya refresh sekarang kalau saya klik ini nah ngebuka WhatsApp tapi masalahnya page kita tadi jadi ketimpa di ini masih di window yang sama kalau kita mau Klik ini lalu buka window yang baru Kita bisa sedikit kasih Javascript disini Saya belum membahas javascript Di channel saya Setelah video ini saya akan mulai membahas javascript Tapi ini Eee pembahasan sedikit menggunakan javascript yaitu disebutnya ini efek on click ya teman teman jadi on click kalau di klik dia akan kalau kita mau buka di window yang baru itu window.open lalu kita masukkan linknya lalu javascript itu perlu titik koma di akhir oke kalau kita save Kita refresh disini. Kalau kita klik, sekarang ngebuka di window yang baru. Begitu teman-teman. Ini adalah javascript ya teman-teman. On click function. Nanti saya bahas lebih lanjut di seri selanjutnya. Tentang javascript. Oke, nah teman-teman. Ini udah jadi. Bagian sebelah kirinya. Sekarang tinggal bagian sebelah kanannya ya teman-teman. Tadi kita udah buat. write container write container ini kita harus tambahkan position nya ya teman teman karena text ini dimulai dari sebelah kanan di sebelah kanan Oke, ini CV, About, dan Resume, dan Contact. Ini tuh link ya teman-teman, kalau kita hover lalu ada tanda kayak tangannya ya teman-teman. Ini artinya ini link ya teman-teman, dan kita bisa klik juga. Link itu berarti A-Tag ya teman-teman. A tag Misalkan kalau saya tulis Curriculum vitae Kalau saya tulis seperti ini Lalu saya refresh Gak keliatan ya teman-teman Curriculum vitae nya Sebetulnya ada tapi ketutup Oleh division yang Warna abu-abu ini teman-teman Oleh karena itu Rai container ini kita perlu posisikan posisi absolute lalu left-nya selebar yang left container 400px kalau kita save, kita refresh, nah sekarang kelihatan karena tadi sebelumnya curriculum VT ini ada di sebelah kiri disini teman-teman karena ketutup sama kotak ini jadi nggak kelihatan tapi setelah kita dorong Muka kanan, right container ini, leftnya dikasih 400px, jaraknya sama dengan jarak box ini. Lalu kurikulum vitae ini tulisannya kelihatan. Begitu teman-teman. Oke. Lalu untuk contoh website-nya, kalau kita melihat website, kita perlu membayangkan juga bagian-bagiannya. Ini bisa kita buat satu division. Top bar ini ya teman-teman, menu-menu di atas ini. Lalu ini juga satu division karena ada jarak dengan elemen-elemen lainnya. Ini satu division, ini semua bisa satu division. Ini achievement, 1 division, mungkin buat temen-temen Kalau buat CV, ini bisa work experience temen-temen Ini bisa skill, atau certification, atau achievement juga Ya temen-temen bisa tambah-tambahkan sendiri Ketika temen-temen buat CV-nya temen-temen ya Nah Saya akan buat satu division untuk ini, Curriculum VT About Resume dan Kontak. karena kita juga akan kasih padding nih ada jaraknya tadi kalau kita tulis langsung ini enggak ada jaraknya atas dan kirinya jadi kita harus buat satu division kita kasih class dan kita kasih padding ya teman-teman oke pertama saya akan buat dulu division untuk top bar saya akan kasih class top bar dan saya akan masukkan Link-linknya ke dalam top bar ini ya teman-teman. Saya kasih indentation. Nah, tadi ada 4 link ya teman-teman di top bar itu. Ini pertama, title-nya. Yang kedua, about. Yang ketiga. resume dan yang terakhir kontek Nah kalau teman-teman perhatikan tadi ya contoh ini kalau kita klik about langsung ke section about nya resume ini ke experience dan kontek ini ke kontek itu caranya adalah untuk memanggil ID ya teman-teman Caranya kita nanti harus buat ID untuk division about. Nama ID-nya about. Tadi resume itu pergi ke experience. Jadi nanti saya akan buat ID-nya experience. Dan yang terakhir contact. Nah, kalau kita lihat juga ini layout-nya. Jadi ini top bar, ini satu division. ini nama dan title nya kita bisa buat juga satu division untuk itu dengan nama ID profile ya teman teman akan kasih nama profile ini untuk nama dan title nya lalu saya buat juga ID untuk about Lalu experience. Sebetulnya yang top bar ini pun kalau mau pakai ID boleh juga ya teman-teman. Tapi saya biasanya menggunakan ID untuk anchor link. Anchor link seperti ini. Jadi untuk memanggil ID. Untuk link di dalam HTML-nya. Atau untuk dipanggil oleh JavaScript. Tapi ini tergantung selera juga ya teman-teman. Oke setelah about ini experience. Setelah experience achievement Dan yang selanjutnya contact Masih ada satu lagi setelah itu yang terakhir ini footer ya teman-teman, ini satu div sendiri jadi kita buka dulu, kita buat dulu semua divnya ini footer, nah jadi contohnya yang about ini ya ini memanggil id-nya oke untuk profile kalau kita refresh disini sekarang udah jadi seperti ini nah yang profile ini kalau kita lihat ini ada nama dan titelnya kita bisa buat H1 untuk namanya saya copy aja dari sini lalu ini lebih kecil mungkin ini H2 kita copy juga kita buat H2 disini oke kalau kita refresh ini udah ada ID profile nya lalu yang about Yang about ini Ini H2 juga Dan ini paragraph ya teman-teman Saya mau tunjukkan dulu Untuk Pemanggilan ID nya Ini H2 About lalu ada paragraph Ini saya copy juga Nah Kalau saya Refresh disini Kalau kita klik about itu dia akan Pergi kesini, tapi disini belum Keliatan ya, karena kita belum kasih Padding dan marginnya Oke jadi nanti kita perlu tambahkan juga mudding dan marginnya oke yang ini untuk link 3 di atas ini kita perlu panggil kita perlu buat satu division yang baru ya teman-teman karena ini semua harus ada di sebelah kanan jadi kita bisa buat satu div yang baru Saya kasih indentation. Kita bisa kasih kelas misalnya list menu. Nah list menu itu isinya 3 menu ini. Oke sebelumnya yang top bar ini kita perlu kasih padding juga ke atas dan ke kirinya. Saya panggil dulu ini kelas top bar nya. Pading topnya itu 50px. Dan padding leftnya itu 100px. Kalau kita refresh. Nah jadi seperti ini ya teman-teman. Dan ini yang list menu ini. Kita harus buat ini jadi float. Right, karena ketiga menu yang lainnya itu ada di sebelah kanan. Jadi kita perlu kasih float right. Oke, kalau kita refresh. Nah, jadi seperti ini. Tapi ini terlalu ke kanan ya. Jadi kita perlu kasih juga list menu ini padding right. Oke, ini itu 50px. Oke, nah jadi seperti ini ya teman-teman. Yang lainnya, ini profile lalu about. Kita perlu kasih padding juga. Kita bisa panggil dengan nama id-nya. Id profile, cara memanggil id. Itu dengan hash. Profile. kita bisa kasih padding top untuk jarak dengan yang diatasnya itu 100px lalu padding leftnya 100px juga kita refresh, nah seperti ini ya teman-teman dengan bagian yang bawahnya yang bawahnya itu bagian about Kita bisa copy ya teman-teman. Padding top dan leftnya dari sini. Kurang lebih 100. Kalau kita refresh. Nah, udah terlihat lebih bagus ya teman-teman. Seperti ini teman-teman. Oke. Nah, di sini link kita ini masih ada underscore-nya. Dan warnanya masih biru. Sedangkan di sini contohnya ini warnanya hitam. Nah, ini kita perlu edit. A tag nya Kita bisa Panggil ini A tag nya di bawah sini ya Teman-teman Di bawah list menu sebelum profile Sebetulnya dimanapun boleh ya Di bawah obat pun boleh Cuman ini biar rapih Saya akan panggil elemen A nya disini Nah untuk menghilangkan Underline ini ya teman-teman Karena secara default, a tag itu ada underline-nya. Kita bisa gunakan text decoration. Decoration-nya none. Nah, kalau kita panggil semua link A atau elemen A ini, text decoration-nya none, itu akan menghilangkan underline-nya. Lalu, color-nya secara default itu biru. Kita ganti jadi black. Nah, jadi seperti ini, teman-teman. Di sini kurikulum VT-nya lebih besar. Jadi kita perlu edit juga kurikulum VT-nya. Kita bisa kasih kelas juga di sini. Mungkin kelas title. Oke, ini yang di bawah top bar ya, teman-teman. Kita kasih kelas title. font style misalnya itu italic miring ya teman-teman terus lebih besar juga saiznya font saiznya misalnya saya buat rem jadi 120% lebih besar kalau kita refresh nah ini masih lebih besar kita bisa buat mungkin ya teman-teman lalu kita refresh, nah sekarang besarnya ini udah sama teman-teman yang ini ada jarak ya teman-teman kalau di contohnya dan kelihatannya juga fontnya lebih besar nah untuk memberikan jarak ini kita perlu kasih kelas juga untuk setiap menu-menunya ini kita bisa buat kelas menu misalnya Semuanya ini adalah list menu. Untuk setiap menu-menunya ini kita kasih kelas baru, kelas menu. Oke. Lalu, menu-nya ini, kelas menu-nya kita panggil. Menu ya, teman-teman. Kita besarin dulu font-nya. Font size-nya mungkin kali lebih besar dari sebelumnya. Kita refresh. Nah sekarang udah lebih besar. Ini terlalu besar mungkin. Oke. Area M itu relatif ya teman-teman dari besar font sebelumnya. Lalu untuk memberikan jarak kita bisa kasih padding. Padding. Kalau kita tulis 2 value, 0 ini untuk atas bawah, atas bawahnya nggak perlu padding. Tapi untuk kanan kirinya, kita mau kasih padding. Jadi untuk setiap menu di sini. Setiap menu ini about resume contact. Dikasih kelas menu. Kelas menu ini ngasih padding 15px untuk kanan kirinya. Kalau kita save ya. Dan kita refresh. Nah jadi sama seperti ini. Oke teman-teman. Dan ini kalau kita klik. About. ini belum keklik kalau ini kita klik kita bisa dapat pergi ke sini kita lihat apa yang salah nih about kita panggil id about nya sudah benar ya teman-teman harusnya coba kita save dulu mungkin belum ke save Oh, karena bagian bawahnya ini belum ada ya teman-teman. Jadi ini belum kemana-mana. Belum ada bagian di bawahnya. Sedangkan di sini ada bagian di bawahnya. Jadi belum pindah. Kalau ini di klik, ini pindah ke sini, langsung ke tengah. Karena di bawahnya ini ada experience, ada yang lainnya. Oke, kita tambahkan dulu yang lainnya. Sekarang kita tambahkan experience-nya. experience ini ini sama harusnya H2 experience lalu ada ini mungkin H3 ya teman-teman ini juga H3 Saya bisa copy. Lalu ini gak di bold. Mungkin ini paragraph ya teman-teman. Oke, saya save dulu. Coba kita lihat hasilnya. Oke, nah ini masih belum kita kasih padding, masih di sebelah sini, belum ada jarak juga dengan atasnya. Coba kita klik, nah udah kelihatan tergeser ya, karena udah ada bagian di bawahnya. Jadi link ini udah berhasil sebetulnya. Oke, jadi untuk setiap ID kita perlu juga kasih padding ya teman-teman. Jadi kita panggil ID ini, ID experience ini. kita bisa copy dari sini top dan leftnya coba kalau kita refresh nah jadi seperti ini ya teman-teman tapi kalau di contoh ini jarak antara about dan experience ini lebih jauh ya teman-teman jadi kita bisa tambahin padding topnya Ini 250px, lebih jauh antara about dan experience nya. Nah kalau kita refresh, jadi lebih jauh top dari padding top dari experience ini. Kurang lebih sama. Oke, kita lanjutkan nih untuk kasih data-datanya untuk experience. Oke, kalau teman-teman lihat ini juga ada jarak antara experience dengan tahunnya. Jarak itu, kalau di sini belum ada jarak ya. Jarak itu bisa kita buat dengan break line, br. Kita save, kita refresh, nah sekarang ada jarak. Oke, selanjutnya kita kasih jarak juga dengan experience yang lainnya. Ini saya bisa copy. Selanjutnya itu 2018 sampai 2021 main di Juventus. Ini video ini dibuat ketika Ronaldo baru pindah ke, balik lagi ke MU ya teman-teman. Oke, selanjutnya kita kasih break line lagi untuk 2009. Sampai 2018, main di Real Madrid sebagai forward. Oke, break line lagi. Lalu yang terakhir nih, yang ditulis di CV ini, waktu main di MU. 2003-2009 Main di Manchester United Sebagai right winger Oke, kalau saya save Kita lihat dulu hasilnya Oke, nah semuanya Udah kepopulate ya teman-teman Tadi Kalau kita klik about disini, nah sekarang udah pindah ke tengah karena bagian bawahnya udah keisi. Oke, udah lumayan mirip sampai sini. Oke, ini hasil, ini aslinya. Dan ini contohnya. Ini contoh dan ini hasil yang kita buat. Oke, selanjutnya kita lanjutkan ke bagian achievement. Kita panggil juga ID achievement ini ya teman-teman. Untuk kita kasih padding juga top dan leftnya. Lalu achievement ini Ini list ya teman-teman Ini list Jadi Kita buat disini list ya teman-teman Li Elemen li Lalu kita copy ini Ini yang kedua achievementnya. Saya copy ini. Ada dua lagi. Ini yang ketiga. Dan ini yang terakhir, yang keempat. Oke. Kalau kita save dan refresh. Oke, sekarang udah kelihatan. Achievement ini belum ada title-nya ya teman-teman. Jadi kita kasih title. Achievement. Oke, bagian achievement-nya udah jadi. Kita terusin dulu ya teman-teman ke kontek. di kontek ini juga perlu kita panggil disini Sorry ini terklik. Oke kita copy padding top dan leftnya. Lalu ini bisa kita buat sebagai paragraph ya teman-teman. judulnya H2 kontak judul ini lalu disini ada phone nah phone ini bolt teman-teman bisa bikin kelas lagi lalu panggil lalu panggil kelasnya kalau mau cepat bisa juga seperti ini ya teman-teman pakai tag B jadi font ini kita masukin ke dalam tag B begitu untuk menjadi bold sorry copy selanjutnya email dan yang terakhir Address. Oke. Kita save. Coba kita lihat dulu hasilnya. Nah, sekarang achievement-nya udah ada. Contact-nya udah ada. Lalu yang terakhir. Footer. Ya. Kita... Nah, yang footer ini... ID footer ini kita perlu jarak dengan yang atasnya tentu perlu padding top 250px footernya ini mungkin ini kita bisa buat H4 ya teman-teman ini sebesar paragraf tapi bold itu kita bisa pakai H4 tapi footer ini letaknya di tengah ya teman-teman kalau kita lihat dulu hasilnya nih sekarang ada di sebelah kiri kita mau footer ini di tengah jadi kita enggak perlu kasih padding left Tapi kita bisa kasih text align center. Kalau kita refresh. Nah, sekarang seperti ini ya, teman-teman. Ada di tengah. Apa yang masih beda ya, teman-teman? Nah, masih ada beberapa yang berbeda. Ini contohnya tadi. Disini spasinya untuk about dan untuk achievement ini. Kalau di contohnya jarak antara satu line dengan line-nya itu ada lebih tinggi jaraknya. Sedangkan disini ini mepet. Ini satu spasi sedangkan yang disini dua spasi. Begitu teman-teman. Untuk paragraph dan untuk list-nya. Lalu disini juga yang about ini text-nya belum ada. padding di sebelah kanannya kalau kita lihat contohnya disini ada padding di sebelah kanannya jadi untuk about ini kita bisa kasih padding right padding right 100px gitu teman-teman kita refresh kelihatan ada paddingnya di sebelah kanan sekarang untuk Section about ini. Lalu untuk memberikan double spasi. Kita bisa panggil seperti ini. Ini yang satu space ini adalah elemen P ya teman-teman. Dan ini elemen Li. Jadi kita bisa panggil elemen P dan elemen Li. Kita panggil sekaligus. Untuk mengatur. Spasi antara satu lain dengan lainnya itu menggunakan property line height. Kita bisa kasih 200%. Nah, coba kita lihat. Kita save, lalu kita refresh. Nah, sekarang sudah ada jarak dari satu lain dan lain-lainnya. Dan kelihatan lebih bagus ya, teman-teman. Jadi linknya pun udah jalan. Klik about. Klik resume. Klik contact ya. Nah udah sama. Udah jadi ya teman-teman website kita. Udah sama seperti contohnya. Nah. Selanjutnya adalah untuk menghosting website ini ya teman-teman. Kita mau host di github.io seperti ini. Ini gratis ya teman-teman, nggak perlu bayar dan bisa diakses lewat internet. Pertama-tama teman-teman harus buat dulu github account-nya. Saya sudah punya account di sini. Dan kalau teman-teman baru register, teman-teman akan lihat screen seperti ini juga. Teman-teman bisa sign up dulu, bikin account-nya di GitHub. Lalu selanjutnya, create repository. Nah, teman-teman kasih nama repository namenya, misalnya CV. Terus ini as public. Teman-teman harus klik ini juga ya, add a readme file. Ini untuk membuat GitHub page. Ini perlu ditik. Lalu create repository-nya. Setelah repository-nya jadi, teman-teman bisa drag semua asetnya. HTML file, CSS file, foto, dan icon-nya. Teman-teman bisa drag. Yang PNG ini nggak perlu ya, karena ini cuma dipakai untuk generate icon file sebelumnya. Tadi saya sempat contohkan juga ke teman-teman. Kita drag. kita upload semuanya oke lalu commit changes teman-teman bisa juga upload lewat sini ya add file, upload files oke udah ke upload semuanya lalu selanjutnya teman-teman perlu klik setting klik setting lalu cari github pages ini ada di agak ke bawah github pages setting github pages lalu check it out here klik ini teman-teman perlu select branchnya main select branch main lalu save nah Sekarang site kita udah jadi linknya ini. Tapi kadang-kadang ini nggak langsung muncul. Kadang-kadang setelah klik ini ada waktu sedikit. Sampai kita bisa lihat pagenya. Coba kita refresh. Kita perlu tunggu sebentar ya teman-teman. Mungkin saya akan pause dulu videonya. Nanti saya akan tunjukin teman-teman setelah ini bisa kelihatan. Setelah sekitar 2 menit Ini keluar Pagenya Dan udah jadi ya teman-teman Ini bisa diakses lewat internet Teman-teman bisa share Ke teman-teman yang lain kegebetan atau kalau teman-teman ngelamar kerja ini bisa kasih juga linknya jadi kelihatan profesional gitu teman-teman oke teman-teman selamat mencoba jangan hanya sekedar nonton video ini ya teman-teman tapi teman-teman harus coba juga ikutin dan saya yakin teman-teman bisa kalau ada pertanyaan boleh tulis di kolom komentar Semoga ini bisa membantu teman-teman. Kalau teman-teman terbantu, teman-teman boleh like videonya, boleh subscribe juga channel ini, dan share ke teman-teman yang lainnya. Terima kasih teman-teman sudah menonton video ini. God bless you.

Ini contoh CV saya buat untuk Cristiano Ronaldo. Jadi di sebelah kiri ada gambarnya dan ada button untuk kirim email, untuk kontak WhatsApp. Lalu di sebelah kiri ada gambarnya dan ada button untuk kirim email, untuk kontak WhatsApp.

kanan ini bisa di scroll dan ada section-sectionnya ada about nanti langsung ke bagian tentang about resume ini langsung ke bagian experience dan achievement lalu ada juga Link untuk kontek Ke kontek detailnya Seperti itu teman-teman cukup Sederhana dan ini di Host di github.io Sederhana tapi terlihat Bagus untuk CV Desainnya minimalis dan ya bagus Oke sebelum itu Saya ingin menjelaskan dulu tentang Langkah-langkah dalam membuat Website jadi secara general Ada 4 langkah ya teman-teman Dalam membuat sebuah website Yang pertama yang harus dilakukan adalah adalah mendesain wireframe nya ini adalah contoh wireframe yang bisa teman-teman lihat jadi wireframe itu seperti desain untuk websitenya layoutnya mau seperti apa dimana kita menempatkan gambarnya atau video atau link dan posisi teksnya di sebelah mana layoutnya seperti apa teman-teman juga bisa menentukan warnanya mau warna apa seperti itu ini dilakukan di dalam mendesain wireframe setelah itu langkah kedua adalah mempersiapkan asetnya, asetnya itu bisa berupa teks tulisannya mau apa saja teksnya, kontennya lalu image-nya gambar-gambarnya kalau ada video teman-teman harus persiapkan juga videonya lalu link-nya dan lain sebagainya semua aset-aset yang diperlukan untuk website-nya teman-teman terima kasih Setelah asetnya siap, desainnya siap, asetnya siap, lalu teman-teman bisa mulai menulis codenya. Codenya itu bisa front-end code seperti HTML, CSS, JS. Atau kalau website-nya ada interaksi ke back-end, ada API seperti itu, teman-teman bisa menulis juga back-endnya. Untuk contoh ini, kita hanya menggunakan front-end karena ini website yang sederhana. Langkah yang terakhir adalah hosting.

Hosting ini supaya website kita bisa diakses lewat internet. Jadi semua orang bisa buka website yang sudah kita buat. Nah, hosting ini sendiri secara garis besar ada dua jenis, yaitu manage hosting. Yaitu orang lain Atau perusahaan lain yang Memanage Servernya Dan kita gak perlu manage servernya Kita tinggal bayar biaya hostingnya Itu manage hosting Option yang kedua kedua yaitu self hosting, yaitu kita bangun sendiri servernya dan kita manage sendiri servernya nah yang akan saya contohkan ke teman-teman ini termasuk ke manage hosting, yaitu kita host di github.io dan github.io ini gratis ya teman-teman, dan cukup simple, nanti saya akan jelaskan di bagian terakhir oke, untuk contoh di video ini sebelumnya saya sudah mendesain website saya yang ini bisanya akan seperti ini, jadi langkah yang pertama ini sudah selesai di video ini ya teman-teman, lalu mempersiapkan aset, asetnya juga sudah saya persiapkan ini icon kalau teman-teman lihat ya disini ada icon icon buku, ini diambil dari icon ini favicon.ico jadi gambar ini sudah saya persiapkan nah dapat icon ini dari mana teman-teman bisa buka website nya favicon.cc Ini untuk mengenerate icon yang akan ditampilkan di sebelah kiri atas ini ya teman-teman. Dan icon ini teman-teman perlu siapkan dulu image-nya.

Contohkan biar teman-teman bisa mengikuti juga nanti ya. Oke. Contohnya seperti ini ya.

Teman-teman import image-nya. Dari file.png. Lalu setelah itu upload. Oke. Saya coba sekali lagi ini choose filenya.

.png lalu upload. Setelah itu teman-teman download iconnya. Nah seperti itu ya teman-teman cara untuk mendapatkan icon file yang nanti akan kita pakai untuk ditampilkan di Windows tab-nya teman-teman. Ada gambar kecil icon di sini.

Nah aset-aset itu harus dipersiapkan dulu sebelumnya. Jadi ini sudah saya persiapkan, lalu fotonya untuk foto di sini saya sudah persiapkan juga. Resolusinya ini 400x400 ya teman-teman.

Lalu kita lihat detailnya ini 400x400 pixel. Jadi langkah yang kedua ini sudah selesai juga ya teman-teman. Jadi saya sudah persiapkan, nanti teksnya kita bisa copy dari contohnya.

Nah, kita masuk ke step yang ketiga, menulis code. Jadi saya akan jelaskan kepada teman-teman, dan kita tulis codenya dari 0. Oke, mari kita buat codenya. Saya akan buat file baru di sini.

Saya akan buat index.html Jadi teman-teman harus Menulis Filenya dengan nama index.html Ya teman-teman karena Di github itu mereka Mendeteksi Sebagai homepage itu index .html oke, lalu kita buka code editor kita lalu kita buka file index.html tadi ya teman-teman di code editor kita oke pertama-tama seperti biasa kita harus buat dulu template html atau boilerplate dengan mengetik html lalu tekan tab titlenya cv .html Cristiano Ronaldo Coba kalau kita save Lalu kita buka File index.html ini Nah sekarang Tab nya udah ada ya teman-teman Ini masih kosong Ini contoh yang mau kita buat lalu sekarang kita mau ganti nih iconnya oke cara untuk mengganti icon itu dengan memasukkan tag link ya teman-teman mirip seperti CSS ini secara default kalau kita ketik link lalu tekan tab ini jadi untuk CSS tapi kita enggak mau masukin CSS mau masukin icon kita harus ganti relnya jadi type nya jadi icon baut type ini kita bisa hapus tidak terlalu perlu lalu source file nya file nya itu ini ya teman-teman nama file nya favicon.ico ini ada di folder yang sama jadi kita bisa langsung tulis nama filenya seperti itu favicon.aiko kita save coba kita lihat lagi karena kalau kita refresh nah iconnya udah muncul di sini ya teman-teman jadi dari nama tabnya dan iconnya ini Udah sama. Oke, sekarang kalau kita lihat contoh website ini. Ini ada dua bagian besar ya teman-teman.

Container di sebelah kiri. Dan ini pasti pakai div. Kalau kita membagi section-section atau division. di dalam HTML itu menggunakan div jadi dua section ini yang sebelah kiri yang warnanya abu-abu ini ini satu div, satu div besar lalu yang sebelah kanan ini satu div besar lagi sebelah kanan ini bisa di scroll tapi yang sebelah kiri ini fix ya teman-teman posisinya nah jadi kita harus buat dulu dua bagian besar jadi div yang pertama kita bisa kasih class left container lalu div yang kedua bagian besar yang kedua to write container nah ini kalau kita reverse di html nya belum jadi apa-apa ya, karena belum ada isinya, belum kita layout juga untuk css nya kita akan menggunakan external css karena ini css nya pasti lumayan panjang jadi kita buat juga teman-teman, saya buat css nya di sini ya link lalu tekan tab nama CSS nya kita bisa kasih nama style.css lalu save oke lalu kita buat CSS filenya disini style.css kita buka juga ini di code editor kita Oke ini CSS file kita lalu kita mau kasih left container ini warna ya teman-teman ini left container nya yang ada foto dan button kita mau kasih width dan height dan kasih warna Nah, karena saya sudah mendesain ini sebelumnya, jadi saya tahu lebarnya left container ini adalah 400px ya teman-teman.

Dan kalau kita scroll, ini nggak pindah-pindah ya teman-teman. Artinya, position yang left container ini, positionnya... Fix, teman-teman bisa lihat juga di video pembahasan tentang CSS, saya pernah membahas sebelumnya tentang position.

Kalau ini tidak berpindah, kalau di scroll, itu artinya positionnya fix yang sebelah kiri. Jadi di CSSnya, kita panggil kelas left container ini, dan memanggil. kelas itu adalah dengan tanda titik ya teman-teman lalu nama kelasnya lalu buka kurung seperti ini kita kasih position fix Lalu width-nya, karena saya sudah desain website ini sebelumnya, jadi saya tahu itu width-nya 400px. Nah, kalau teman-teman membuat website-nya dari awal, dari scratch, mungkin teman-teman harus coba-coba dulu. Kira-kira lebar ini itu berapa?

Karena saya yang mendesain sebelumnya, saya sudah tahu ini 400px lebarnya untuk yang area berwarna abu ini ya, teman-teman. Oke, untuk height-nya. Cara untuk bisa dapat keseluruhan height dari screen itu caranya adalah dengan menulis 100 VH. Jadi seperti ini 100% dari viewport height. Ya teman-teman.

Nah, kalau kita save di sini ya, teman-teman, ini belum ada apa-apa. Karena kita belum kasih warna. Sebetulnya ini sudah ada dual division. Division ini sudah jadi.

Tapi karena warna defaultnya putih, jadi belum kelihatan. Oleh karena itu, kita harus kasih background color. Nah, background color-nya ini kita bisa ambil dari contoh website-nya. Kita bisa inspect di sini. Klik kanan, lalu inspect.

Lalu kita ambil nih, hex code-nya dari contoh. Oke, kita paste di sini. Save dulu. Kalau kita refresh, nah sekarang ada live container-nya kelihatan.

Oke, live contentnya sudah jadi. Tapi kalau teman-teman perhatikan, ini ada seperti marginnya ya teman-teman. Ini adalah margin default dari body.

Saya sudah membahas ini juga waktu membahas DCSS tentang margin dan padding. Untuk menghilangkan default margin ini, kita harus... buat kita bisa panggil body nya disini untuk elemen body jadi kita buat default margin nya jadi nol, padding nya juga jadi nol kita save lalu kita refresh nah sekarang default margin dan padding nya itu hilang jadi langsung div nya ini aja oke live container nya udah jadi temen-temen Nah kalau kita lihat website atau kita mendesain website, kita harus berpikir juga tentang division-division dari website tersebut ya.

Nah contohnya seperti ini, ini ada gambar, image, ada tulisan contact me, dan ada dua button. Ini pasti ada divisionnya sendiri ya teman-teman untuk kita mengaplikasikan CSS style dan CSS property-nya. Dan Kalau kita bisa saja bikin gambarnya jadi satu division, atau lalu button-nya division yang lain, tapi kita bisa juga sebetulnya satukan kalau memang bisa disatukan. Jadi CSS property-nya bisa disatukan untuk keseluruhan elemennya. Nah, untuk gambar tulisan contact me dan button ini, kita perlu membuat satu division lain.

di dalam left container ya mungkin kita bisa kasih nama divisionnya ini kita kasih class mungkin foto dan kontek seperti itu foto kontek karena disini ada foto dan ini untuk kontek detailnya jadi foto kontek Lalu untuk image-nya, kita bisa buat elemen image. Nah, source-nya ke foto yang sudah kita persiapkan. Ini nama filenya foto.jpg.

Jadi kita tulis source-nya foto.jpg. Kalau kita save. dan kita refresh disini nah image nya udah masuk ya teman-teman gambarnya udah masuk tapi ini gambarnya masih terlalu besar jadi kita bisa atur juga width nya gambar ini mengikuti juga dengan parent nya ya teman-teman Ini saya sudah persiapkan sebelumnya ke image ini Pixelnya 400x400 dan width dari left container ini juga 400 Dan disini contohnya ini tuh setengah dari width parentnya Jadi 200 pixel Nah kalau kita atur Misalnya untuk foto kontek ini ya teman-teman kita bisa kasih kelas juga ini teman-teman ya kita kasih kelas foto misalnya lalu kita panggil kelas fotonya kita kasih widthnya 50% supaya besarnya jadi setengahnya kalau kita refresh nah jadi segini ya jadi kecil setengahnya tapi ini kalau kita lihat contoh ini agak ke bawah ya teman-teman fotonya dan semua konteksnya ini agak ke bawah ini masih di atas yang bisa kita lakukan karena tadi kita memasukkan image ini ke division ke division photo contact, kita bisa panggil juga kelas photo contact ini kita panggil kelas photo contact ini lalu kita kasih position absolute dan dari atas kita kasih 100px supaya dipindahin posisinya 100px ke bawah jadi di atasnya itu ada jarak 100px kalau kita save lalu kita refresh nah jadi seperti ini ya teman-teman posisinya udah ke bawah begitu teman-teman disini fotonya rounded bulet ya teman-teman sedangkan foto kita masih kotak cara untuk membuat jadi bulet itu kita bisa tambahkan property ini di fotonya jadi kita panggil kelas fotonya kita bisa kasih property border radius ya teman-teman border radius 50% itu akan membuat yang kotak jadi bulat kalau kita save lalu kita refresh nah sekarang jadi bulat ya teman-teman terus ini masih di sebelah kiri kalau kita mau pindahin ke sebelah kanan dan nanti yang dibawah-bawahnya kontak juga ada di tengah ya teman-teman maksud saya di tengah ya bukan di kanan ini di sebelah kiri kita mau pindahin ke tengah kita bisa pindahin seluruh division foto dan kontak ini ke sebelah, ke center nah itu caranya adalah dengan property jadi kita kasih disini di photo kontak text align, jadi text align ini gak hanya untuk text sebetulnya, bisa untuk image, bisa untuk button juga kita tulis center text align center, kalau kita save lalu kita refresh disini, nah ini jadi ke sebelah, lebih ke kanan jadi ke tengah ya teman-teman seperti itu teman-teman fotonya sudah jadi dan kalau teman-teman notice tadi ya, saya kasih text align ini di division foto konteks, supaya nanti ketika kita masukin button kesini Kedalam foto kontek Button nya juga akan jadi ke tengah Oke Di bawah Foto ini ada tulisan kontek me Kita bisa pakai Elemen H1 untuk ini Kita buat H1 disini kita masukkan contact me kalau kita lihat sekarang ada tulisan contact me nya lalu di bawahnya ada 2 button kita buat button ya teman-teman yang pertama email dan yang kedua whatsapp Oke, kita save.

Nah, jadi seperti ini ya teman-teman. Ini masih default button. Di sini button-nya besar. Lalu kalau di hover, kalau disorot, warnanya ganti ya teman-teman.

Jadi ada animasinya. Lalu widthnya dari button ini juga sama dengan fotonya. Kita bisa kasih button ini widthnya 50% juga sama seperti image-nya.

Jadi ngikut 50% dari parent-nya. Parent-nya itu 400px ya teman-teman. Parent div-nya yang tadi, left container. Oke, sekarang kita mau...

Buat dulu sebelumnya email ini kita kasih kelas juga ya teman-teman Button seperti itu Toe ya class button, jangan bingung ini nama kelas ini bisa apa aja kalau contact button atau contact btn gitu juga bisa ya nama kelas itu terserah kita oke kita kasih kelas supaya kita bisa edit button ini ya teman-teman nah kita panggil button nya contact dan kita kasih width dulu 50% supaya dia jadi lebar kalau kita refresh, nah jadi seperti ini ya teman-teman ini ada di center dan jadi lebar background colornya ini putih kita bisa tambahin juga property background color white kita refresh, nah sekarang jadi putih terus ini ada melengkung ya melengkung bordernya, kita bisa tambahin juga border radius kita bisa kira-kira ini 12px misalnya nah jadi melengkung buttonnya lalu jarak ada jarak antara button 1 dan button lainnya itu kita bisa pakai margin margin button misalnya 12px juga oke sekarang ada jarak lalu disini buttonnya lebih tinggi ya temen-temen dan fontnya juga lebih besar kita bisa naikin font size nya Font size. Kita bisa buat. Kita bisa buat juga font size itu relatif ya. Kita bisa tulis dengan REM. Jadi kalau kita tulis REM misalnya ya teman-teman.

Ini akan lebih besar kalinya. 120 persennya. Seperti itu.

Terus di sini. Ini kayaknya lebih besar. Mungkin kita bisa buat satu seperti itu kita save refresh kurang lebih sudah sama besarnya tapi disini fontnya bold ya teman-teman untuk bold kita bisa kasih font wake bold oke lalu Hai disini lebih tinggi buttonnya itu bisa kita tambahkan padding ya temen-temen jadi padding kita bisa tulis 10px misalnya dan ini 10px ini akan diaplikasikan ke atas bawah kanan kiri sebenarnya kita hanya perlu yang atas bawah tapi enggak apa-apa kanan kiri juga nah seperti itu setelah kita tambah padding jadi ada jarak antara border dengan tulisannya seperti itu nah ini lebih rounded ya temen-temen lebih rounded kita bisa tambahin border radiusnya mungkin jadi 14 pixel supaya lebih rounded seperti itu oke nah kalau kita hover yang disini kalau kita sorot ini jadi warna hitam lalu fontnya asalnya hitam jadi putih ya teman-teman caranya seperti ini caranya gimana dua ini masih ada gap sedikit margin button nya kita bisa tambahin jadi 14px juga oke ya kurang lebih ada gap nya temen-temen bisa atur-atur sesuka temen-temen ya nah untuk di hover terus ganti warna itu kita bisa buat seperti ini ya temen-temen kelasnya contact button lalu tambahkan efek hover jadi kalau button nya disorot oleh mouse font color nya jadi berubah font color itu propertinya color color nya jadi black ya teman teman Sorry, color-nya jadi black.

Background color-nya jadi black. Tapi font-nya, color ini untuk font. Tapi font-nya jadi white. Nah, coba kita lihat ya.

Kalau kita refresh, sekarang jadi seperti ini teman-teman. Jadi color, color itu untuk font-nya jadi white. Tapi background color-nya jadi black.

Begitu teman-teman. Nah, ada sedikit perbedaan kalau teman-teman lihat. Disini lebih halus ya teman-teman kalau kita sorot. Sedangkan ini kayak langsung, perubahan warnanya langsung. Nah perubahan warna yang ada transisi ini, itu bisa dibuat dengan cara...

Transition Transition Lalu kita bisa tulis Durasi transition nya Misalnya 1 second Kalau kita refresh Nah sekarang jadi halus ya teman-teman Perpindahannya Oke Nah disini kalau di klik whatsappnya atau emailnya ini akan buka email dan akan buka whatsapp. Sedangkan disini button kita belum mengerjakan apa-apa. Kalau di klik belum terjadi apa-apa. Nah kita bisa buat ini dengan cara menambahkan elemen link ya teman-teman.

Jadi kita gabungkan antara link. a tag, tag a dengan button ini jadi kalau button yang email ini di klik kita akan buka mail to mail to itu untuk membuka email misalnya nama emailnya cr7 at gmail.com nah kita bisa tulis seperti ini jadi kalau email buttonnya di klik, dia akan membuka email kita bisa gabungkan dengan A tag begitu juga dengan whatsapp ya teman-teman kita bisa gabungkan juga dengan A tag penutup tag A nya disini saya kasih indentation supaya lebih mudah dibaca klipnya oke jadi yang pertama ini foto ya teman-teman foto lalu tulisan contact me lalu ada dua button nah untuk whatsapp kita bisa googling generate whatsapp link lalu teman-teman bisa klik generate whatsapp link bisa masukkan nomor teleponnya disini lalu generate my wa link nah ini wa linknya teman-teman bisa copy lalu lalu masukkan disini jadi kalau WhatsApp buttonnya diklik dia akan membuka link ini kita coba ya teman-teman ini udah saya close saya refresh sekarang kalau saya klik ini nah ngebuka WhatsApp tapi masalahnya page kita tadi jadi ketimpa di ini masih di window yang sama kalau kita mau Klik ini lalu buka window yang baru Kita bisa sedikit kasih Javascript disini Saya belum membahas javascript Di channel saya Setelah video ini saya akan mulai membahas javascript Tapi ini Eee pembahasan sedikit menggunakan javascript yaitu disebutnya ini efek on click ya teman teman jadi on click kalau di klik dia akan kalau kita mau buka di window yang baru itu window.open lalu kita masukkan linknya lalu javascript itu perlu titik koma di akhir oke kalau kita save Kita refresh disini. Kalau kita klik, sekarang ngebuka di window yang baru. Begitu teman-teman.

Ini adalah javascript ya teman-teman. On click function. Nanti saya bahas lebih lanjut di seri selanjutnya.

Tentang javascript. Oke, nah teman-teman. Ini udah jadi.

Bagian sebelah kirinya. Sekarang tinggal bagian sebelah kanannya ya teman-teman. Tadi kita udah buat. write container write container ini kita harus tambahkan position nya ya teman teman karena text ini dimulai dari sebelah kanan di sebelah kanan Oke, ini CV, About, dan Resume, dan Contact. Ini tuh link ya teman-teman, kalau kita hover lalu ada tanda kayak tangannya ya teman-teman.

Ini artinya ini link ya teman-teman, dan kita bisa klik juga. Link itu berarti A-Tag ya teman-teman. A tag Misalkan kalau saya tulis Curriculum vitae Kalau saya tulis seperti ini Lalu saya refresh Gak keliatan ya teman-teman Curriculum vitae nya Sebetulnya ada tapi ketutup Oleh division yang Warna abu-abu ini teman-teman Oleh karena itu Rai container ini kita perlu posisikan posisi absolute lalu left-nya selebar yang left container 400px kalau kita save, kita refresh, nah sekarang kelihatan karena tadi sebelumnya curriculum VT ini ada di sebelah kiri disini teman-teman karena ketutup sama kotak ini jadi nggak kelihatan tapi setelah kita dorong Muka kanan, right container ini, leftnya dikasih 400px, jaraknya sama dengan jarak box ini.

Lalu kurikulum vitae ini tulisannya kelihatan. Begitu teman-teman. Oke.

Lalu untuk contoh website-nya, kalau kita melihat website, kita perlu membayangkan juga bagian-bagiannya. Ini bisa kita buat satu division. Top bar ini ya teman-teman, menu-menu di atas ini.

Lalu ini juga satu division karena ada jarak dengan elemen-elemen lainnya. Ini satu division, ini semua bisa satu division. Ini achievement, 1 division, mungkin buat temen-temen Kalau buat CV, ini bisa work experience temen-temen Ini bisa skill, atau certification, atau achievement juga Ya temen-temen bisa tambah-tambahkan sendiri Ketika temen-temen buat CV-nya temen-temen ya Nah Saya akan buat satu division untuk ini, Curriculum VT About Resume dan Kontak. karena kita juga akan kasih padding nih ada jaraknya tadi kalau kita tulis langsung ini enggak ada jaraknya atas dan kirinya jadi kita harus buat satu division kita kasih class dan kita kasih padding ya teman-teman oke pertama saya akan buat dulu division untuk top bar saya akan kasih class top bar dan saya akan masukkan Link-linknya ke dalam top bar ini ya teman-teman.

Saya kasih indentation. Nah, tadi ada 4 link ya teman-teman di top bar itu. Ini pertama, title-nya.

Yang kedua, about. Yang ketiga. resume dan yang terakhir kontek Nah kalau teman-teman perhatikan tadi ya contoh ini kalau kita klik about langsung ke section about nya resume ini ke experience dan kontek ini ke kontek itu caranya adalah untuk memanggil ID ya teman-teman Caranya kita nanti harus buat ID untuk division about.

Nama ID-nya about. Tadi resume itu pergi ke experience. Jadi nanti saya akan buat ID-nya experience. Dan yang terakhir contact. Nah, kalau kita lihat juga ini layout-nya.

Jadi ini top bar, ini satu division. ini nama dan title nya kita bisa buat juga satu division untuk itu dengan nama ID profile ya teman teman akan kasih nama profile ini untuk nama dan title nya lalu saya buat juga ID untuk about Lalu experience. Sebetulnya yang top bar ini pun kalau mau pakai ID boleh juga ya teman-teman.

Tapi saya biasanya menggunakan ID untuk anchor link. Anchor link seperti ini. Jadi untuk memanggil ID.

Untuk link di dalam HTML-nya. Atau untuk dipanggil oleh JavaScript. Tapi ini tergantung selera juga ya teman-teman.

Oke setelah about ini experience. Setelah experience achievement Dan yang selanjutnya contact Masih ada satu lagi setelah itu yang terakhir ini footer ya teman-teman, ini satu div sendiri jadi kita buka dulu, kita buat dulu semua divnya ini footer, nah jadi contohnya yang about ini ya ini memanggil id-nya oke untuk profile kalau kita refresh disini sekarang udah jadi seperti ini nah yang profile ini kalau kita lihat ini ada nama dan titelnya kita bisa buat H1 untuk namanya saya copy aja dari sini lalu ini lebih kecil mungkin ini H2 kita copy juga kita buat H2 disini oke kalau kita refresh ini udah ada ID profile nya lalu yang about Yang about ini Ini H2 juga Dan ini paragraph ya teman-teman Saya mau tunjukkan dulu Untuk Pemanggilan ID nya Ini H2 About lalu ada paragraph Ini saya copy juga Nah Kalau saya Refresh disini Kalau kita klik about itu dia akan Pergi kesini, tapi disini belum Keliatan ya, karena kita belum kasih Padding dan marginnya Oke jadi nanti kita perlu tambahkan juga mudding dan marginnya oke yang ini untuk link 3 di atas ini kita perlu panggil kita perlu buat satu division yang baru ya teman-teman karena ini semua harus ada di sebelah kanan jadi kita bisa buat satu div yang baru Saya kasih indentation. Kita bisa kasih kelas misalnya list menu.

Nah list menu itu isinya 3 menu ini. Oke sebelumnya yang top bar ini kita perlu kasih padding juga ke atas dan ke kirinya. Saya panggil dulu ini kelas top bar nya. Pading topnya itu 50px.

Dan padding leftnya itu 100px. Kalau kita refresh. Nah jadi seperti ini ya teman-teman.

Dan ini yang list menu ini. Kita harus buat ini jadi float. Right, karena ketiga menu yang lainnya itu ada di sebelah kanan.

Jadi kita perlu kasih float right. Oke, kalau kita refresh. Nah, jadi seperti ini.

Tapi ini terlalu ke kanan ya. Jadi kita perlu kasih juga list menu ini padding right. Oke, ini itu 50px.

Oke, nah jadi seperti ini ya teman-teman. Yang lainnya, ini profile lalu about. Kita perlu kasih padding juga. Kita bisa panggil dengan nama id-nya. Id profile, cara memanggil id.

Itu dengan hash. Profile. kita bisa kasih padding top untuk jarak dengan yang diatasnya itu 100px lalu padding leftnya 100px juga kita refresh, nah seperti ini ya teman-teman dengan bagian yang bawahnya yang bawahnya itu bagian about Kita bisa copy ya teman-teman. Padding top dan leftnya dari sini. Kurang lebih 100. Kalau kita refresh.

Nah, udah terlihat lebih bagus ya teman-teman. Seperti ini teman-teman. Oke. Nah, di sini link kita ini masih ada underscore-nya.

Dan warnanya masih biru. Sedangkan di sini contohnya ini warnanya hitam. Nah, ini kita perlu edit.

A tag nya Kita bisa Panggil ini A tag nya di bawah sini ya Teman-teman Di bawah list menu sebelum profile Sebetulnya dimanapun boleh ya Di bawah obat pun boleh Cuman ini biar rapih Saya akan panggil elemen A nya disini Nah untuk menghilangkan Underline ini ya teman-teman Karena secara default, a tag itu ada underline-nya. Kita bisa gunakan text decoration. Decoration-nya none. Nah, kalau kita panggil semua link A atau elemen A ini, text decoration-nya none, itu akan menghilangkan underline-nya. Lalu, color-nya secara default itu biru.

Kita ganti jadi black. Nah, jadi seperti ini, teman-teman. Di sini kurikulum VT-nya lebih besar.

Jadi kita perlu edit juga kurikulum VT-nya. Kita bisa kasih kelas juga di sini. Mungkin kelas title. Oke, ini yang di bawah top bar ya, teman-teman.

Kita kasih kelas title. font style misalnya itu italic miring ya teman-teman terus lebih besar juga saiznya font saiznya misalnya saya buat rem jadi 120% lebih besar kalau kita refresh nah ini masih lebih besar kita bisa buat mungkin ya teman-teman lalu kita refresh, nah sekarang besarnya ini udah sama teman-teman yang ini ada jarak ya teman-teman kalau di contohnya dan kelihatannya juga fontnya lebih besar nah untuk memberikan jarak ini kita perlu kasih kelas juga untuk setiap menu-menunya ini kita bisa buat kelas menu misalnya Semuanya ini adalah list menu. Untuk setiap menu-menunya ini kita kasih kelas baru, kelas menu.

Oke. Lalu, menu-nya ini, kelas menu-nya kita panggil. Menu ya, teman-teman.

Kita besarin dulu font-nya. Font size-nya mungkin kali lebih besar dari sebelumnya. Kita refresh. Nah sekarang udah lebih besar.

Ini terlalu besar mungkin. Oke. Area M itu relatif ya teman-teman dari besar font sebelumnya. Lalu untuk memberikan jarak kita bisa kasih padding. Padding.

Kalau kita tulis 2 value, 0 ini untuk atas bawah, atas bawahnya nggak perlu padding. Tapi untuk kanan kirinya, kita mau kasih padding. Jadi untuk setiap menu di sini.

Setiap menu ini about resume contact. Dikasih kelas menu. Kelas menu ini ngasih padding 15px untuk kanan kirinya.

Kalau kita save ya. Dan kita refresh. Nah jadi sama seperti ini.

Oke teman-teman. Dan ini kalau kita klik. About. ini belum keklik kalau ini kita klik kita bisa dapat pergi ke sini kita lihat apa yang salah nih about kita panggil id about nya sudah benar ya teman-teman harusnya coba kita save dulu mungkin belum ke save Oh, karena bagian bawahnya ini belum ada ya teman-teman. Jadi ini belum kemana-mana.

Belum ada bagian di bawahnya. Sedangkan di sini ada bagian di bawahnya. Jadi belum pindah. Kalau ini di klik, ini pindah ke sini, langsung ke tengah.

Karena di bawahnya ini ada experience, ada yang lainnya. Oke, kita tambahkan dulu yang lainnya. Sekarang kita tambahkan experience-nya. experience ini ini sama harusnya H2 experience lalu ada ini mungkin H3 ya teman-teman ini juga H3 Saya bisa copy.

Lalu ini gak di bold. Mungkin ini paragraph ya teman-teman. Oke, saya save dulu.

Coba kita lihat hasilnya. Oke, nah ini masih belum kita kasih padding, masih di sebelah sini, belum ada jarak juga dengan atasnya. Coba kita klik, nah udah kelihatan tergeser ya, karena udah ada bagian di bawahnya. Jadi link ini udah berhasil sebetulnya.

Oke, jadi untuk setiap ID kita perlu juga kasih padding ya teman-teman. Jadi kita panggil ID ini, ID experience ini. kita bisa copy dari sini top dan leftnya coba kalau kita refresh nah jadi seperti ini ya teman-teman tapi kalau di contoh ini jarak antara about dan experience ini lebih jauh ya teman-teman jadi kita bisa tambahin padding topnya Ini 250px, lebih jauh antara about dan experience nya. Nah kalau kita refresh, jadi lebih jauh top dari padding top dari experience ini. Kurang lebih sama.

Oke, kita lanjutkan nih untuk kasih data-datanya untuk experience. Oke, kalau teman-teman lihat ini juga ada jarak antara experience dengan tahunnya. Jarak itu, kalau di sini belum ada jarak ya. Jarak itu bisa kita buat dengan break line, br. Kita save, kita refresh, nah sekarang ada jarak.

Oke, selanjutnya kita kasih jarak juga dengan experience yang lainnya. Ini saya bisa copy. Selanjutnya itu 2018 sampai 2021 main di Juventus.

Ini video ini dibuat ketika Ronaldo baru pindah ke, balik lagi ke MU ya teman-teman. Oke, selanjutnya kita kasih break line lagi untuk 2009. Sampai 2018, main di Real Madrid sebagai forward. Oke, break line lagi. Lalu yang terakhir nih, yang ditulis di CV ini, waktu main di MU. 2003-2009 Main di Manchester United Sebagai right winger Oke, kalau saya save Kita lihat dulu hasilnya Oke, nah semuanya Udah kepopulate ya teman-teman Tadi Kalau kita klik about disini, nah sekarang udah pindah ke tengah karena bagian bawahnya udah keisi.

Oke, udah lumayan mirip sampai sini. Oke, ini hasil, ini aslinya. Dan ini contohnya.

Ini contoh dan ini hasil yang kita buat. Oke, selanjutnya kita lanjutkan ke bagian achievement. Kita panggil juga ID achievement ini ya teman-teman. Untuk kita kasih padding juga top dan leftnya.

Lalu achievement ini Ini list ya teman-teman Ini list Jadi Kita buat disini list ya teman-teman Li Elemen li Lalu kita copy ini Ini yang kedua achievementnya. Saya copy ini. Ada dua lagi.

Ini yang ketiga. Dan ini yang terakhir, yang keempat. Oke.

Kalau kita save dan refresh. Oke, sekarang udah kelihatan. Achievement ini belum ada title-nya ya teman-teman.

Jadi kita kasih title. Achievement. Oke, bagian achievement-nya udah jadi. Kita terusin dulu ya teman-teman ke kontek. di kontek ini juga perlu kita panggil disini Sorry ini terklik.

Oke kita copy padding top dan leftnya. Lalu ini bisa kita buat sebagai paragraph ya teman-teman. judulnya H2 kontak judul ini lalu disini ada phone nah phone ini bolt teman-teman bisa bikin kelas lagi lalu panggil lalu panggil kelasnya kalau mau cepat bisa juga seperti ini ya teman-teman pakai tag B jadi font ini kita masukin ke dalam tag B begitu untuk menjadi bold sorry copy selanjutnya email dan yang terakhir Address. Oke.

Kita save. Coba kita lihat dulu hasilnya. Nah, sekarang achievement-nya udah ada. Contact-nya udah ada. Lalu yang terakhir.

Footer. Ya. Kita... Nah, yang footer ini...

ID footer ini kita perlu jarak dengan yang atasnya tentu perlu padding top 250px footernya ini mungkin ini kita bisa buat H4 ya teman-teman ini sebesar paragraf tapi bold itu kita bisa pakai H4 tapi footer ini letaknya di tengah ya teman-teman kalau kita lihat dulu hasilnya nih sekarang ada di sebelah kiri kita mau footer ini di tengah jadi kita enggak perlu kasih padding left Tapi kita bisa kasih text align center. Kalau kita refresh. Nah, sekarang seperti ini ya, teman-teman.

Ada di tengah. Apa yang masih beda ya, teman-teman? Nah, masih ada beberapa yang berbeda.

Ini contohnya tadi. Disini spasinya untuk about dan untuk achievement ini. Kalau di contohnya jarak antara satu line dengan line-nya itu ada lebih tinggi jaraknya.

Sedangkan disini ini mepet. Ini satu spasi sedangkan yang disini dua spasi. Begitu teman-teman. Untuk paragraph dan untuk list-nya.

Lalu disini juga yang about ini text-nya belum ada. padding di sebelah kanannya kalau kita lihat contohnya disini ada padding di sebelah kanannya jadi untuk about ini kita bisa kasih padding right padding right 100px gitu teman-teman kita refresh kelihatan ada paddingnya di sebelah kanan sekarang untuk Section about ini. Lalu untuk memberikan double spasi.

Kita bisa panggil seperti ini. Ini yang satu space ini adalah elemen P ya teman-teman. Dan ini elemen Li.

Jadi kita bisa panggil elemen P dan elemen Li. Kita panggil sekaligus. Untuk mengatur.

Spasi antara satu lain dengan lainnya itu menggunakan property line height. Kita bisa kasih 200%. Nah, coba kita lihat. Kita save, lalu kita refresh. Nah, sekarang sudah ada jarak dari satu lain dan lain-lainnya.

Dan kelihatan lebih bagus ya, teman-teman. Jadi linknya pun udah jalan. Klik about. Klik resume. Klik contact ya.

Nah udah sama. Udah jadi ya teman-teman website kita. Udah sama seperti contohnya.

Nah. Selanjutnya adalah untuk menghosting website ini ya teman-teman. Kita mau host di github.io seperti ini.

Ini gratis ya teman-teman, nggak perlu bayar dan bisa diakses lewat internet. Pertama-tama teman-teman harus buat dulu github account-nya. Saya sudah punya account di sini.

Dan kalau teman-teman baru register, teman-teman akan lihat screen seperti ini juga. Teman-teman bisa sign up dulu, bikin account-nya di GitHub. Lalu selanjutnya, create repository. Nah, teman-teman kasih nama repository namenya, misalnya CV. Terus ini as public.

Teman-teman harus klik ini juga ya, add a readme file. Ini untuk membuat GitHub page. Ini perlu ditik. Lalu create repository-nya. Setelah repository-nya jadi, teman-teman bisa drag semua asetnya.

HTML file, CSS file, foto, dan icon-nya. Teman-teman bisa drag. Yang PNG ini nggak perlu ya, karena ini cuma dipakai untuk generate icon file sebelumnya.

Tadi saya sempat contohkan juga ke teman-teman. Kita drag. kita upload semuanya oke lalu commit changes teman-teman bisa juga upload lewat sini ya add file, upload files oke udah ke upload semuanya lalu selanjutnya teman-teman perlu klik setting klik setting lalu cari github pages ini ada di agak ke bawah github pages setting github pages lalu check it out here klik ini teman-teman perlu select branchnya main select branch main lalu save nah Sekarang site kita udah jadi linknya ini. Tapi kadang-kadang ini nggak langsung muncul.

Kadang-kadang setelah klik ini ada waktu sedikit. Sampai kita bisa lihat pagenya. Coba kita refresh. Kita perlu tunggu sebentar ya teman-teman.

Mungkin saya akan pause dulu videonya. Nanti saya akan tunjukin teman-teman setelah ini bisa kelihatan. Setelah sekitar 2 menit Ini keluar Pagenya Dan udah jadi ya teman-teman Ini bisa diakses lewat internet Teman-teman bisa share Ke teman-teman yang lain kegebetan atau kalau teman-teman ngelamar kerja ini bisa kasih juga linknya jadi kelihatan profesional gitu teman-teman oke teman-teman selamat mencoba jangan hanya sekedar nonton video ini ya teman-teman tapi teman-teman harus coba juga ikutin dan saya yakin teman-teman bisa kalau ada pertanyaan boleh tulis di kolom komentar Semoga ini bisa membantu teman-teman.

Kalau teman-teman terbantu, teman-teman boleh like videonya, boleh subscribe juga channel ini, dan share ke teman-teman yang lainnya. Terima kasih teman-teman sudah menonton video ini. God bless you.

Transcript for:Panduan Membuat Website CV

Transcript for:
Panduan Membuat Website CV