Halo teman-teman semua selamat datang kembali di channel wpu Masih bersama saya sandikagali dan di video kali ini kita akan mencoba membuat kembali video yang sudah pernah dua kali saya buat di 2 tahun sebelumnya ya Saya sudah pernah buat ini di tahun 2021 dan Tahun 2022 yang lalu videonya adalah mengenai jalur belajar untuk menjadi seorang web developer kali ini untuk persiapan kita di tahun 2024 Nah jadi cocok banget buat kalian yang saat ini lagi pengin belajar untuk berkarir sebagai seorang web Developer ataupun buat teman-teman yang pengin switch karir dari bidang lain selain programming atau web development ke bidang web development ya karena kan kita tahu sekarang itu sumber belajar sangat banyak sekali teman-teman tapi saking banyaknya biasanya membuat kesulitan atau membingungkan untuk para pemula karena materinya sangat banyak bingung tuh mulainya dari mana Terus setelah belajar yang satu berikutnya belajar ke mana ya sebetulnya di dua video saya sebelumnya itu panduannya sudah jelas tapi banyak yang nanya ke saya Pak apa Apakah video tersebut atau materi tersebut masih relevan untuk tahun sekarang atau bahkan untuk persiapan di masa depan atau tidak Nah setelah saya cek lagi ternyata ada beberapa materi yang memang sudah di-update tapi belum saya masukkan ke situ jadi kayaknya kita akan update supaya kita siap untuk menjadi seorang web developer di tahun 2024 nah tapi sebelum kita mulai membahas mengenai jalur belajarnya saya mauucapin terima kasih dulu kepada sponsor kita untuk video kali ini yaitu kelas fullstack.id ya sebuah kelas online yang cocok banget untuk kalian yang mau menjadi seorang full stack web developer ya tapi pembahasan lebih detailnya kita akan bahas belakangan Oke teman-teman sekarang kita masuk ke pembahasan mengenai jalur belajarnya seperti di dua video sebelumnya itu kita menggunakan panduan dari sebuah website yang namanya roadmap.sh itu adalah website yang keren banget menurut saya untuk menjadi panduan kita kalau mau belajar di bidang tertentu itu step by step materinya apa saja nah dan kerennya website roadmap.s ini selalu di-update oleh pembuatnya sehingga sekarang menjadi sangat lengkap dan bahkan fitur-fitur website nya jadi tambah keren teman-teman ya Mari kita kunjungi website-nya ini dia jadi nama website-nya roadmap.sh ya teman-teman bisa Klik aja nanti Link yang ada di deskripsi video ini ya sebelum kita lihat ke sini saya mau kasih tahu dulu pembuatnya itu pembuatnya Namanya Bapak kamran Ahmed ya teman-teman bisa lihat github-nya di sini kamran Ahmed se Dia adalah seorang developer yang base-nya atau berlokasinya di Dubai dan kalau saya baca mengenai profilnya dia itu adalah seorang web developer profesional yang sekarang udah full time bekerja untuk membangun website roadmap.sh gitu kalau Sebelumnya dia bekerja di perusahaan sambil ngembangin website roadmap.sh tapi sekarang dia udah full time tuh makanya website-nya jadi keren banget dan ternyata setelah saya baca-baca profil-nya dia juga adalah seorang Google developer expert ya di bidang web juga dan basisnya di Dubai Uni Emirate Arab jadi keren banget kita harus berterima kasih kepada Mas kamran atau bapak kamran ini Ya karena udah bikinin website yang saat ini kalau kita lihat statistik titicknya ya kita buka nih website-nya kita buka kita Scroll ke paling bawah lihat nih roadmap.sh adalah website keenam dengan bintang terbanyak di github coba Jadi ini ada repository di github-nya bintangnya paling banyak keenam dari seluruh repository yang ada di github ini luar biasa sih Jadi silakan teman-teman ya kunjungi github-nya terus di-follow jangan lupa follow juga sosial medianya yang lain ya Dan kalau perlu kalian bisa kasih sponsor di sini atau minimal kasih Star di repositorynya ya Oke kita balik lagi sekarang ke website-nya Jadi kalau teman-teman lihat ke paling atas dia sekarang punya banyak banget jalur belajar tadinya tuh cuman ada front end backend dan full stack terus makin lama makin banyak sekarang lihat jadi ada front end back End devops full stack Android bahkan ada postg ai Nih Baru nih Ai blockchain qa software arsitect dan masih banyak lagi tuh tadinya ada role base roadmap jadi berbasis role ya mau jadi seorang apa nih kalian gitu sekarang di bawahnya ada skill skill base roadmap jadi berbasis skill sesuai teknologinya pengen jago react nanti Klik aja nanti teman-teman tinggal ikutin aja jalur belajarnya nah dan yang paling keren menurut saya ini fitur baru ya Bahkan kayaknya belum launch secara resmi sampai video ini dibikin yaitu kita bisa bikin roadmap custom kita sendiri nanti di akhir kita lihat deh ya saya udah bikin roadmap versi saya sendiri yang nanti teman-teman juga bisa akses bahkan teman-teman juga nanti bisa bikin sendiri bisa bikin dari nol bisa bikin dengan memodifikasi roadmap yang udah ada kerenlah Pokoknya nah sekarang kita akan lihat beberapa jalur belajarnya kita ambil yang paling dasar dulu untuk seorang web developer ya web developer pasti lewatin front end dulu Kita lihat front end Nah kalau kita Scroll ke bawah Tadinya ini tuh berupa gambar teman-teman ya enggak bisa diklik dan enggak bisa diapa-apain sekarang ini semuanya interaktif bisa kita klik nih bahkan kalau teman-teman lihat di sini ya sebelum kita baca harus belajar apa aja ini ada visit the beginner version katanya tuh jadi ini yang versi pemulanya kalau kita lihat kita harus belajar apa aja nih untuk pemula yang pengin jadi web developer pertama jelas harus belajar html Ya enggak mungkin kita mau jadi front end atau mau jadi back end enggak ngerti html enggak mungkin jadi harus belajar html dulu Nah kalau kita Klik nanti teman-teman akan melihat Materi apa yang harus dipelajari dan dikuasai di sebelah kanannya ini keren banget sih menurut saya Ya terus kalau misalkan teman-teman nanti ke depannya merasa materi ini sudah dikuasai atau bahkan lagi dipelajari sama teman-teman bisa di ganti nih statusnya tuh Jadi kalian bisa lihat ini lagi dipelajari kalau udah selesai kita tinggal ganti lagi jadi done tuh atau kalau mau cepat kalian bisa Klik Kanan Klik Kanan itu untuk mencoret atau menyelesaikan materinya berikutnya ada CSS nanti dilihat ini Materi apa yang harus dipelajari gitu ya Dan Seterusnya atau kalau misalkan kita mau lihat versi yang detail kita klik lagi balik ke detail nah ini kita bisa lihat mulai dari belajar internet ada subtopiknya ini topiknya ya yang di Tengah ni topiknya di sebelah kanan tuh subtopiknya kita harus paham dulu Bagaimana internet bekerja http tuh apa sih Apa itu nama domain Apa itu hosting Apa itu DNS dan seterusnya ini juga sama bisa kita selesaikan Kalau udah ngerti Klik Kanan gitu dan ini nanti kalian login ya supaya nanti terekam yang sudah kalian lakukan di sini gu kalian bikin account bikin accountnya bisa pakai email bisa pakai github silakan dibikin ya ini saya sudah login jadinya Saya bisa melakukan ini tu jadi saya cuman mau ngasih tahu aja gimana cara pakai roadmap-nya Gimana cara mengakses roadmap-nya Nanti kalian kalau tertarik dengan roadmap yang lain silakan ya tadi html udah terus kita ke CSS belajar basic Nah ini bisa diklik juga tuh ya Ada materi belajarnya dari mana dan seterusnya html CSS javascript Ya jelas ini tiga combo ini ya paket lengkap html CSS javascript harus kita kuasai bahkan menurut saya untuk seorang front end dan back end jadi dua-duanya harus bisa dulu dulu karena menurut saya orang backend pun harus bisa bikin website sendiri minimal buat website pribadi dia gitu ya terus wajib juga belajar version control system ya di sini kita pakai Git yang dihost-nya ke github Ya silakan mau Di gitlab Boleh bit bucket boleh kalau teman-teman lihat ada warna yang berbeda ada ceklis warna ungu Ada ceklis warna abu-abu nah ini panduannya ada di sini kalau ketemu ceklis warna ungu berarti ini adalah rekomendasi personal dari si mas kamrannya jadi dia menyarankan kita harus belajar ini Kalau yang warna hijau berarti kita boleh milih gitu ya Jadi kalau tadi ketemu di sini ada warna ungu dan warna hijau berarti Mas kamamrnya merekomendasikan github tapi sebenarnya kita bisa pilih gitlab atau bitbcket gitu ya Nah kalau ada yang warna abu-abu ini artinya boleh dipelajari atau tidak jadi boleh diskip gitu ya enggak harus kalau yang lain harus dipelajari yang warna ungu tapi kalau ketemu yang warna abu-abu ini boleh diskip berikutnya setelah belajar version control system udah ngerti Git udah bisa upload ke github kalian belajar package Manager Ya bisa pakai NPM PNPM atau yarn berikutnya pilih Framework ya bisa react bisa View bisa angular bisa spelt tapi direkomendasikannya react terus menggunakan library atau Framework CSS bisa pakai tilwin radix UI sadcn dan seterusnya gitu ya Jadi teman-teman boleh ikuti seperti ini silakan dilihat sampai bawah apa aja yang harus dipelajari untuk frontend aja cukup banyak ya tuh silakan jadi ini bisa kalian lihat bisa kalian interaksikan sekali lagi diklik kalau pengin lihat materinya ada yang berupa tulisan ada yang berupa video kalau sudah selesai langsung dipilih jadi Done gitu nah ini kalau udah selesai terus kita bisa lihat nih ada tiga dari 1 2 3 yang udah selesai jadi materi yang udah kita pelajarinya bisa kelacak gitu ya ini ada baru 2% dari seluruh front end roadmap ya Dan ini bisa di-download juga teman-teman berupa PDF Jadi kalau nanti diklik kita akan bisa lihat versi pdf-nya tapi enggak ada progres kitanya Ini yang umumnya aja yang polosnya ini bisa diprint bisa dipasang di kamar di dinding Ya silakan Nah jadi gitu cara menggunakannya sama juga untuk roadmap yang lain ya kalau kita balik lagi misalkan teman-teman pengin lihat back end nah sama juga belajar apa sih Pak kalau saya pengin jadi back end developer Nah ini Lihat sama mulai dari internet nah cuma di sini disarankan untuk langsung memilih satu bahasa backend dia bisa pakai Rus goleng Java c#arp PHP javascript p atau ruby Tapi menurut saya sebetulnya kita tetap butuh html dan CSS ya kenapa Karena kan butuh UI untuk web-nya tetap aja apalagi untuk di awal kan di awal tuh kita biasanya belajar untuk membuat sesuatunya masih sendiri gitu belum bekerja dengan tim gitu makanya nanti di akhir kita akan lihat versi modifikasi saya untuk belajar Web Tuh Seperti apa ya sama kita juga bisa Klik di sini terus lihat ada sumber belajarnya silakan lanjutkan terus ke bawah sampai akhir nih ya itu untuk untuk back end begitu pula kalau kalian klik Dev Ops ataupun full stack ya jadi full stack tuh semuanya e front end back end dan juga devops ya nah ini kalau full stack html CSS javascript NPM sama kayak tadi ya ngikutin yang si front end-nya sampai nanti ketemu back end di sini mulai di sini kita belajar nodejs terus database-nya pakai postgay SQL terus belajar api Nah ini jwt belajar redis terus belajar Linux karena kita butuh belajar Dev Ops juga ya aws dan seterusnya tuh ini kalau kita mau menjadi seorang full stack web developer jadi teman-teman bisa ikuti dan pelajari materi-materinya ada di dalam sini tapi ya memang namanya juga roadmap yang dibuat oleh software developer internasional pasti semua materinya ya dalam bahasa Inggris ya ini semua materinya dari wetry school dari Code Academy dan kalaupun ada channel YouTube itu channel youtube-nya yang pasti channel YouTube berbahasa Inggris gitu Nah kalau misalkan teman-teman pengin mencari yang berbahasa Indonesia yang materinya cukup lengkap Nah teman-teman bisa kunjungi kelas online yang disediakan oleh sponsor kita yaitu kelasfulstack.id teman-teman ya jadi kelas fullstack.id ini adalah sebuah kelas online di mana kalian bisa belajar web development itu dari nol ya dari a sampai z ini cocok banget buat kalian yang pengin punya karir bagus skill yang saat ini dibutuhin industri untuk bikin web atau aplikasi buat perusahaan ataupun buat bisnisnya sendiri nah di dalam kelas online ini nanti teman-teman bisa dapatin banyak banget materi ya ada 1000 materi video pembelajaran dengan total durasinya sekitar 90 jam modulnya juga ada banyak ada 45 dan nanti teman-teman Cukup bayar satu kali untuk akses materinya seumur hidup Ya kalau penasaran contoh materinya Seperti apa nanti teman-teman Tonton aja demonya di sini nah terus yang keren ya yang saya suka adalah nanti kita itu Enggak cuman belajar dari materi yang dikasih aja tapi kita nanti di akhir akan dapat studi kasus jadi kita bikin Project yang menyerupai studi kasus di dunia nyata gitu Nah kalau ada yang tanya materinya apa aja Pak Nah ini ada di sini ya jadi namanya juga tadi full stack ya Mulai dari dasar-dasar programming front end ya front end dasar front end lanjutan backend sampai bikin studi kasus full stack jalur belajar juga ada banyak ya Jadi tadi materinya kalian enggak perlu akses dan pelajari semua tergantung yang kalian butuhinnya aja Misalkan kalian pengin jadi developer PHP ada jalurnya mulai dari belajar PHP dasar sampai nanti belajar Salah satu Framework PHP atau kalian penginnya jalurnya javascript sama juga Mulai dari javascript dasar sampai nanti belajar ke Framework javascript Nah kalau kalian tertarik langsung aja gabung ya Klik tombol gabung di atas ini terus nanti kalian akan dikasih tahu mengenai cara bergabung dan juga biayanya bukan R5 juta bukan rp850.000 kalian cukup membayar sebesar r95 udah dapat tadi semua materi plus kalau misalnya ada materi tambahan ke depannya ya dan kerennya nih kalau teman-teman klik gabung nanti silakan daftar saat ini kelas fullstack tuh lagi ngadain diskon tapi diskonnya singkat ini hanya 3 hari setelah video ini ditayangkan ya diskonnya 25% kalau teman-teman masukin kode kuponnya wpu hemat Nah nanti teman-teman akan dapat diskon dan cukup membayar sebesar r46.000-an saja tapi ingat itu hanya 3 hari jadi Cek nanti di deskripsi video batas waktunya Sampai kapan tapi di luar tanggal tersebut teman-teman masih bisa dapatin diskon sebesar 15% kalau masukin kode kuponnya member wpu ya Tuh jadi ini masukin di luar Waktu yang tadi ini kapanp kalian bisa masukkan member wpu Jadi silakan dimanfaatkan teman-teman ya Jadi kalau tertarik untuk menjadi seorang full stack web developer silakan ikutin materi kelas online dari kelasfulstack.id cek link yang ada di deskripsi untuk informasi lebih lanjut oke teman-teman ya kita balik lagi ke sini ke roadmap.sh-nya tadi kita udah lihat front end back end devops dan juga full stack Nah sekarang seperti yang saya bilang di awal tadi kita bisa bikin versi kita sendiri caranya kalau teman-teman udah login ya misalkan masuk itu ke front end nanti di bagian atas itu oh ini Kebetulan saya udah bikin versi saya ya kita cari yang saya belum bikin deh back end misalnya nih lihat kita bisa create your own version of this roadmap Jadi kalau misalkan nanti teman-teman klik kita klik ya nanti ada pilihan create and edit custom roadmap yes nih jadi kita dikasih editor yang ini menurut saya keren banget nih jadi editornya seperti kita menggunakan kalau teman-teman pernah pakai figma ya Misalnya bisa digeser bisa diedit bisa diganti bisa kita kasih materi di sebelah kanan nya bisa kita hapus bisa kita tambahkan dan lain sebagainya Jadi kalau teman-teman pengin bikin punya kalian sendiri caranya gitu tadi ya Ee Dik bisa ganti namanya jadi tinggal klik edit Tadi nanti kalau sudah teman-teman bisa save terus kita bisa Set permission-nya Siapa yang bisa lihat apakah cuman teman aja atau cuman saya aja jadi enggak bisa diakses publik atau bisa diakses publik Nah nanti kita jadi punya live view-nya nih contohnya misalkan saya edit ya backend versi wpu gitu save nanti nanti kalau klik live view nah ini backend versi saya walaupun tadi saya belum edit yang nanti url-nya bisa teman-teman sharing nah url-nya di mana tadi ada di sini ya kalau teman-teman klik sharing settings-nya nanti tinggal klik aja Update sharing settings nah ini url yang bisa di-share ke siapapun gitu ya Nah contohnya tadi yang udah saya bikin ini kalau saya close dulu editornya saya udah bikin yang secara generalnya teman-teman bisa lihat nanti cek aja Link yang ada di deskripsi tampilnya begini Ini adalah jalur belajar web untuk mula benar-benar dari no0 versi saya ya jalur belajar web untuk 2024 Jadi silakan teman-teman boleh share jalur ini ke teman-teman yang lain yang lagi belajar dan ini belum selesai ya masih akan saya lanjutkan nih teman-teman lihat nih mari kita mulai saya Tandai bahkan ya jangan lupa klik setiap TOPIK untuk mengakses video pembelajaran Klik Kanan pada topik kalau udah selesai ya nih pertama kita belajar kode editor dulu kalau versi saya jadi kita nyiapin dulu lingkungan pengembangannya kode editor ya diklik dulu dulu nih ada di sebelah kanan Link yang mengarah ke playlist video pembelajarannya Jadi teman-teman enggak usah khawatir semua materi yang ada di sini pasti ada panduan videonya kalau lagi dipelajari tinggal pilih in progress atau ada ininya ada shortcut-nya ya kalau diklik kita pilih D untuk dan tuh langsung dicoret kalau lagi dipelajari pilihnya l warnanya dia Ungu ya berarti Saya lagi belajar ini sekarang jadi kalau lagi belajar misalkan sekarang lagi belajar nginstal udah diinstal Oh udah beres klikan kanan berarti sudah beres konfigurasi udah beres Klik Kanan extension Klik Kanan sudah selesai semua ini Klik Kanan Jadi sekarang ceritanya ini udah beres semua berikutnya ke html dasar ini juga sama kalau diklik ada playlist pembelajaran html-nya Sebetulnya saya bisa tulis semua videonya di sini ya semua videonya enggak bentuknya playlist tapi nanti Terlalu banyak Ya udah saya masuk ke playlist aja Jadi kalian tinggal klik playlist belajarnya nanti langsung diarahkan ke youtube-nya wpu tinggal pelajari aja satu-satu gitu ya ya nahanti kalau sudah selesai dipelajari cek Tadi sudah belajar sampai mana Apakah tag dan atributnya udah kalian pahami kalau udah Klik Kanan Apakah table dan form Sudah dipelajari Klik Kanan ya berarti html udah beres sudah nanti lihat lagi baru 9% nih perjalanan kita masih panjang teman-teman lanjut ke html lanjutan sama caranya klik nonton ikuti CSS dasar CSS layouting ini udah saya update kalau Sebelumnya saya belum masukin flexbox dan juga Grid sekarang udah ya ada di bawah sini jadi habis CSS layouting dasar langsung ngecek dulu kemampuan kalian dengan ilmu yang udah dipelajari baru html CSS kita udah bikin website ya Baru lanjut lagi belajar css3 ya ini seru nih belajar animasi transisi kasih bayangan dan lain sebagainya kita belajar satuan pada CSS satuan yang biasanya digunakan untuk responsif ya kita belajar em rem belajar satuan-satuan yang ada hubungannya sama viewport atau lebar layar belajar fungsi kalkulasi punyanya CSS seru nih habis itu kita belajar flexbox Belajar CSS Grid dan setiap materi tuh biasanya saya kasih satu video Di mana kalian harus implementasikan ilmunya untuk bikin website jadi sampai CSS Grid tu kalian udah bikin banyak website 1 2 3 empat ya udah banyak nih website yang kalian bikin sampai sini minimal empat udah dibikin Tapi itu masih ada di komputer kalian belum bisa dilihat orang lain supaya bisa dilihat orang lain Nah di sinilah mulai kita belajar Git gitu jadi mengelola kode kalian Enggak cuman diam di laptopnya atau di komputernya sekarang simpan di kode repository supaya nanti semua orang bisa lihat belajar git-nya ada playlist-nya di sini terus belajar Framework CSS ya kita pelajari bootstrap di sini sebetulnya nih saya udah kasih tanda sebetulnya materi ini bisa diskip kalau kalian yang enggak mau belajar bootstrap enggak apa-apa ya misalkan pengin t luin Pak Nah nanti tawiin tu adanya di bagian front end tapi enggak apa-apa karena bootstrap itu menurut saya untuk mula tuh cukup mudah dipelajari jadi enggak ada salahnya teman-teman belajar di sini nanti kita bahkan akan latihan bikin tiga buah website ini Harusnya bukan website portfolio ini harus saya edit nih ini harusnya website-nya adalah eh oh belum saya tambahkan ini portfolio kalau ini harusnya kita bikin website undangan pernikahan ya Yang ini jadi kita bikin tiga website kalau sudah sampai sini selesai jangan lupa semuanya disimpan ke repository github supaya makin banyak tuh portfolio Kalian selamat sampai sini kalian udah bisa bikin website yang kompleks udah pakai html CSS bootstrap dan udah bisa dilihat sama semua orang website-nya Enggak cuman di komputer kalian aja Nah kalau sampai sini kalian merasa masih tertantang untuk bikin website yang lebih kompleks ya sekarang berikutnya kita masuk ke topik yang menurut saya cukup sulit yaitu kita akan belajar programming ya jadi hati-hati jalanan akan mulai menanjak kita harus tetap semangat belajar dasar-dasar programming dengan javascript ya sebetulnya kalau belajar dasar-dasar programming enggak perlu perlu pakai javascript pun bisa ya Bisa pakai Python bisa pakai C Cuman karena nanti kita mau bikin web ke depannya dan kita pasti bakalan pakai javascript ya makanya di sini kita belajar programming-nya pakai javascript ya Mulai dari belajar apa sih programming terus e compiler tuh apa variabel tuh apa dan seterusnya Setelah itu kita belajar dokumen object model untuk mengelola elemen pada halaman web dan terakhir kita implementasikan semua yang sudah kita pelajari tadi html CSS javascript untuk bikin website yang cukup Kompleks ya kita bikin website kedai copi pakai html CSS dan javascript Nah di sini harusnya udah selesai persiapan awal kalian untuk jadi seorang web developer sampai sini kalian akan ada di persimpangan mau ke front end atau ke back end nanti ini masih panjang sebetulnya belum saya update lagi harusnya nanti teman-teman yang lihat video ini kalau ngakses linknya udah nambah sih harusnya ya nanti front end apa aja ini masih banyak kita belajar CSS preproses kita akan belajar nojs sampai nanti kita belajar react Nah untuk back end juga nanti kita akan belajar bahasa pemrograman backend salah satunya adalah PHP ya nanti kita belajar PHP dasar object oriented PHP sampai nanti kita belajar larfel ya Jadi ini masih panjang untuk menjadi seorang web developer oke Ya jadi itu teman-teman jalur belajar kita untuk mempersiapkan diri kita sebagai seorang web developer di tahun 2024 nanti silakan diikuti mau yang versi mascamernya mau yang saya atau tadi mau ikut kelas online dari kelasfulstack.id Ya silakan bagikan linknya ke teman-teman yang lain semuanya ada di deskripsi buat kalian kunjungi sehingga teman-teman yang baru akan belajar menjadi seorang web developer itu bisa kebantu dengan informasi ini ya kalian juga boleh tulis di bawah kalau misalkan kalian sudahudah bikin roadmap versi kalian sendiri atau bahkan ada usulan atau saran untuk roadmap yang saya buat agar ditambahkan materi pembelajaran apa silakan kita diskusi di kolom komentar supaya makin banyak banyak lagi yang terbantu untuk menjadi seorang web developer Oke jadi mungkin itu aja untuk video kali ini Terima kasih teman-teman sudah nonton mudah-mudahan bermanfaat kita ketemu lagi di video berikutnya saya Sika gali pamit dan seperti biasa jangan lupa [Musik] [Tepuk tangan] [Musik] titikom [Musik]