- Beranda
- Komunitas
- Tech
- Website, Webmaster, Webdeveloper
Cara Jadi Front-end Web Developer Modal Youtube
TS
mx667
Cara Jadi Front-end Web Developer Modal Youtube
Sebenarnya saya udah pernah bahas ini di konten Instagram saya. Cuma saya memutuskan untuk bagikan juga dalam bentuk tulisan di Kaskus dengan harapan supaya mudah ditemukan oleh teman - teman yang lagi browsing atau searching di Google tentang topik serupa. Karena kalau cuma di Instagram kan dalam bentuk gambar, SEO jelek menurut saya, jadi agak sulit ditemukan lewat Google.
Dalam tulisan kali ini saya mau bagikan daftar materi yang harus dipelajari untuk jadi seorang Front-end Web Developer. Dalam hal ini saya bagikan materi belajar untuk React JSdan Vue JS, kalau Angular harapannya setelah membaca tulisan saya berikut ini teman - teman dapat gambaran sehingga bisa cari tahu sendiri.
Sebelum lanjut, ada baiknya teman - teman mempelajari materi wajib yang kudu dipelajari sebelum masuk ke bahasa pemrograman serta framework - frameworknya. Untuk materi wajib ini sudah pernah saya tulis dan bisa dibaca di thread berikut ini: Cara Jadi Web Developer Otodidak. Di dalam materi wajib tersebut ada beberapa materi wajib yang harus dipelajari untuk jadi seorang programmer web antara lain: Git & Github, HTTPS, Basic Terminal Usage, dan masih banyak lagi. Materi wajib ini biasanya saya baca di artikel - artikel Google dan nonton beberapa video YouTube. Oke, kalau materi wajib udah selesai dipelajari, boleh lanjut.
Untuk belajar bahasa pemrograman dan framework - frameworknya, saya lebih suka belajar melalui video di YouTube secara gratis. Kita mulai dari yang dasar dulu, yaitu HTML dan CSS.
Sebenarnya untuk belajar HTML dan CSS ini kamu juga bisa pelajari lewat channel luar seperti Codevolution, The Net Ninja, dan berbagai channel berbahasa Inggris lainnya. Namun menurut saya channel WPU (Web Programming UNPAS) sudah cukup bagus. Pastikan catat poin - poin penting supaya lebih mudah diingat. Bisa dicatat di buku atau di aplikasi catatan semacam Notepad dan Google Keep.
Sekarang masuk ke bahasa pemrograman JavaScript yang diperlukan supaya tampilan website kita jadi lebih interaktif. JavaScript ini adalah bahasa pemrograman wajib yang harus dikuasai oleh seorang Front-end Web Developer. Playlist JAVASCRIPT LANJUTAN menurut saya adalah yang paling penting dan paling banyak dipakai saat kita sudah masuk ke framework JavaScript. Jadi sekali lagi saya ingatkan untuk dicatat, poin - poin yang penting.
Buat teman - teman yang mau belajar Git & Github dan REST API lewat video YouTube, di WPU juga ada playlistnya yang menurut saya bagus banget dan mudah dimengerti. Cuma sayangnya disitu ada materi tentang REST SERVERyang pakai framework PHP namanya CodeIgniter. Buat teman - teman yang gak mau fokus belajar CodeIgniter, gak masalah, bisa disimak aja videonya dan dilihat hasil akhir ketika REST SERVER itu udah jadi. Atau mungkin bisa cari pelajaran REST SERVER dari sumber lain.
Selanjutnya adalah belajar tentang framework JavaScript. Kamu bisa pilih antara React JS, Vue JS, ataupun Angular. Paling populer sih React JS, saya sendiri juga memutuskan untuk belajar React JS. Namun setelah bekerja beberapa bulan, ada clientminta project-nya digarap pakai Vue JS. Jadi kurang lebih saya tahu langkah - langkah untuk belajar React JS dan Vue JS.
Selanjutnya belajar mengenai React Hook Form untuk kelola form. Misalnya menampilkan error di form validation, dan sebagainya. Cuma untuk form ini saya jarang pakai karena biasanya saya pakai validasi sederhana yang saya bikin sendiri seperti required, number only, dan email, seterusnya biasanya mengandalkan validasi dari backend.
Sayangnya React Hook Form ini saya gak nemu playlist di YouTube untuk belajar. Jadi saya cukup mengandalkan dokumentasi di situs resminya. Menurut saya RHF (React Hook Form) adalah library untuk form validation untuk React JS yang paling bagus, paling ringan, cepat, dan tidak terlalu banyak boilerplate code. Bisa dilihat perbandingan beberapa form validation library lain di situs resminya RHF. Codevolution sendiri pernah bikin playlist tentang Formik (salah satu library untuk form validation di React JS). Sebagian orang juga ada yang pakai Formik. Tapi jika dilihat dari Github-nya Formik, menurut saya issues-nya cukup banyak.
Selanjutnya belajar mengenai Next JS untuk menangani SEO dan memudahkan banyak hal. Next JS penting untuk teman - teman yang peduli tentang SEO, atau websitenya butuh SEO. Misalnya soal routing atau perpindahan halaman, kita gak perlu setup atau install react-router lagi. Karena Next JS sudah menyiapkannya. Maksud dari "menangani SEO" adalah (koreksi jika kurang tepat): JavaScript dari React JS ini kan dijalankan setelah halaman website ter-load semuanya. Bukan ketika kita me-request HTTPS. Maka dari itu DOM yang kita manipulasi tidak dikenali mesin pencari seperti Google, Bing, dan sebagainya. Untuk itu Next JS menanamkan server Node JS internal untuk menangani server-side rendering. Kalau misalnya website kita atau aplikasi web kita mau dibuat sebagai website statis yang gak terlalu banyak perubahan (bukan website dinamis), bisa juga codingan Next JS (codingan JavaScript) di-bundle jadi beberapa halaman statis berbentuk file .html.
Waktu saya masih belajar React JS, saya belum nemu playlist Next JS yang memuaskan. Untungnya dokumentasi Next JS sangat mudah dipahami dan cukup singkat. Jadi waktu itu saya cukup belajar dari baca - baca dokumentasi Next JS di situs resminya.
Nah kalau sekarang, sudah ada playlist yang dibikin oleh Codevolution untuk belajar Next JS buat teman - teman yang baru mulai belajar React JS.
VUE 2
Untuk Vue JS saya menilai playlist dari The Net Ninja lebih bagus dari Codevolution. Saya sengaja ngasih tau yang Vue 2 karena untuk saat ini Nuxt JS (framework Vue JS mirip Next JS yang digunakan untuk handle SEO, routing, dan berbagai kemudahan lainnya)masih menggunakan Vue 2.
VUEX
Selanjutnya adalah Vuex untuk kelola state secara global, mirip Redux pada React JS.
Tidak lupa untuk menangani SEO kita gunakan Nuxt JS. Saya belajar Nuxt JS dengan membaca dokumentasi di situs resminya, tidak melalui playlist video di YouTube. Dokumentasi Nuxt JS sangat mudah dipahami, singkat dan jelas.
Nah untuk form validation di Vue JS saya belum sempat belajar mengenai library untuk form validation yang untuk Vue JS ini. Kebanyakan saya cuma melakukan validasi sederhana seperti required, only number, email, dan lain sebagainya. Sisanya, saya mengandalkan validasi form dari backend.
Selesai deh. Kalau udah belajar mengenai itu semua, sebenarnya kita udah bisa jadi Front-end Web Developer. Kini saatnya teman - teman mulai menguji skill masing - masing. Mulailah bikin - bikin website, aplikasi web, untuk kemudian ditunjukkan di portfolio untuk melamar kerja atau cari client sebagai freelancer.
Pastikan baca juga berbagai syarat lowongan kerja untuk jadi Front-end Web Developer supaya kita bisa mempersiapkan diri untuk mempelajarinya.
unsplash.com
Dalam tulisan kali ini saya mau bagikan daftar materi yang harus dipelajari untuk jadi seorang Front-end Web Developer. Dalam hal ini saya bagikan materi belajar untuk React JSdan Vue JS, kalau Angular harapannya setelah membaca tulisan saya berikut ini teman - teman dapat gambaran sehingga bisa cari tahu sendiri.
Sebelum lanjut, ada baiknya teman - teman mempelajari materi wajib yang kudu dipelajari sebelum masuk ke bahasa pemrograman serta framework - frameworknya. Untuk materi wajib ini sudah pernah saya tulis dan bisa dibaca di thread berikut ini: Cara Jadi Web Developer Otodidak. Di dalam materi wajib tersebut ada beberapa materi wajib yang harus dipelajari untuk jadi seorang programmer web antara lain: Git & Github, HTTPS, Basic Terminal Usage, dan masih banyak lagi. Materi wajib ini biasanya saya baca di artikel - artikel Google dan nonton beberapa video YouTube. Oke, kalau materi wajib udah selesai dipelajari, boleh lanjut.
Untuk belajar bahasa pemrograman dan framework - frameworknya, saya lebih suka belajar melalui video di YouTube secara gratis. Kita mulai dari yang dasar dulu, yaitu HTML dan CSS.
Sebenarnya untuk belajar HTML dan CSS ini kamu juga bisa pelajari lewat channel luar seperti Codevolution, The Net Ninja, dan berbagai channel berbahasa Inggris lainnya. Namun menurut saya channel WPU (Web Programming UNPAS) sudah cukup bagus. Pastikan catat poin - poin penting supaya lebih mudah diingat. Bisa dicatat di buku atau di aplikasi catatan semacam Notepad dan Google Keep.
Sekarang masuk ke bahasa pemrograman JavaScript yang diperlukan supaya tampilan website kita jadi lebih interaktif. JavaScript ini adalah bahasa pemrograman wajib yang harus dikuasai oleh seorang Front-end Web Developer. Playlist JAVASCRIPT LANJUTAN menurut saya adalah yang paling penting dan paling banyak dipakai saat kita sudah masuk ke framework JavaScript. Jadi sekali lagi saya ingatkan untuk dicatat, poin - poin yang penting.
Buat teman - teman yang mau belajar Git & Github dan REST API lewat video YouTube, di WPU juga ada playlistnya yang menurut saya bagus banget dan mudah dimengerti. Cuma sayangnya disitu ada materi tentang REST SERVERyang pakai framework PHP namanya CodeIgniter. Buat teman - teman yang gak mau fokus belajar CodeIgniter, gak masalah, bisa disimak aja videonya dan dilihat hasil akhir ketika REST SERVER itu udah jadi. Atau mungkin bisa cari pelajaran REST SERVER dari sumber lain.
Selanjutnya adalah belajar tentang framework JavaScript. Kamu bisa pilih antara React JS, Vue JS, ataupun Angular. Paling populer sih React JS, saya sendiri juga memutuskan untuk belajar React JS. Namun setelah bekerja beberapa bulan, ada clientminta project-nya digarap pakai Vue JS. Jadi kurang lebih saya tahu langkah - langkah untuk belajar React JS dan Vue JS.
Spoiler for Daftar Playlist Video YouTube untuk React JS:
Saya belajar React JS dari channel-nya Codevolutionyang menurut saya bagus banget dan lengkap. Dari mulai class component sampai functional component. Mungkin melihat jumlah video di playlist ini sudah cukup membuat malas bagi sebagian orang. Belum lagi belajar Redux. Kalau misalnya teman - teman menganggap bahwa tutorial playlist dari Codevolution ini terlalu panjang, mungkin bisa belajar dari channel-nya The Net Ninja.
Nah ini dia playlist dari The Net Ninja yang gak kalah bagus. Tapi saya belum pernah nonton playlist yang React Modern ini.
Redux berguna untuk mengelola statesecara global. Ini berfungsi jika state yang kita kelola dipakai juga antar component yang jaraknya jauh.
Selanjutnya belajar mengenai React Hook Form untuk kelola form. Misalnya menampilkan error di form validation, dan sebagainya. Cuma untuk form ini saya jarang pakai karena biasanya saya pakai validasi sederhana yang saya bikin sendiri seperti required, number only, dan email, seterusnya biasanya mengandalkan validasi dari backend.
Sayangnya React Hook Form ini saya gak nemu playlist di YouTube untuk belajar. Jadi saya cukup mengandalkan dokumentasi di situs resminya. Menurut saya RHF (React Hook Form) adalah library untuk form validation untuk React JS yang paling bagus, paling ringan, cepat, dan tidak terlalu banyak boilerplate code. Bisa dilihat perbandingan beberapa form validation library lain di situs resminya RHF. Codevolution sendiri pernah bikin playlist tentang Formik (salah satu library untuk form validation di React JS). Sebagian orang juga ada yang pakai Formik. Tapi jika dilihat dari Github-nya Formik, menurut saya issues-nya cukup banyak.
Selanjutnya belajar mengenai Next JS untuk menangani SEO dan memudahkan banyak hal. Next JS penting untuk teman - teman yang peduli tentang SEO, atau websitenya butuh SEO. Misalnya soal routing atau perpindahan halaman, kita gak perlu setup atau install react-router lagi. Karena Next JS sudah menyiapkannya. Maksud dari "menangani SEO" adalah (koreksi jika kurang tepat): JavaScript dari React JS ini kan dijalankan setelah halaman website ter-load semuanya. Bukan ketika kita me-request HTTPS. Maka dari itu DOM yang kita manipulasi tidak dikenali mesin pencari seperti Google, Bing, dan sebagainya. Untuk itu Next JS menanamkan server Node JS internal untuk menangani server-side rendering. Kalau misalnya website kita atau aplikasi web kita mau dibuat sebagai website statis yang gak terlalu banyak perubahan (bukan website dinamis), bisa juga codingan Next JS (codingan JavaScript) di-bundle jadi beberapa halaman statis berbentuk file .html.
Waktu saya masih belajar React JS, saya belum nemu playlist Next JS yang memuaskan. Untungnya dokumentasi Next JS sangat mudah dipahami dan cukup singkat. Jadi waktu itu saya cukup belajar dari baca - baca dokumentasi Next JS di situs resminya.
Nah kalau sekarang, sudah ada playlist yang dibikin oleh Codevolution untuk belajar Next JS buat teman - teman yang baru mulai belajar React JS.
Spoiler for Daftar Playlist Video YouTube untuk Vue JS:
VUE 2
Untuk Vue JS saya menilai playlist dari The Net Ninja lebih bagus dari Codevolution. Saya sengaja ngasih tau yang Vue 2 karena untuk saat ini Nuxt JS (framework Vue JS mirip Next JS yang digunakan untuk handle SEO, routing, dan berbagai kemudahan lainnya)masih menggunakan Vue 2.
VUEX
Selanjutnya adalah Vuex untuk kelola state secara global, mirip Redux pada React JS.
Tidak lupa untuk menangani SEO kita gunakan Nuxt JS. Saya belajar Nuxt JS dengan membaca dokumentasi di situs resminya, tidak melalui playlist video di YouTube. Dokumentasi Nuxt JS sangat mudah dipahami, singkat dan jelas.
Nah untuk form validation di Vue JS saya belum sempat belajar mengenai library untuk form validation yang untuk Vue JS ini. Kebanyakan saya cuma melakukan validasi sederhana seperti required, only number, email, dan lain sebagainya. Sisanya, saya mengandalkan validasi form dari backend.
Selesai deh. Kalau udah belajar mengenai itu semua, sebenarnya kita udah bisa jadi Front-end Web Developer. Kini saatnya teman - teman mulai menguji skill masing - masing. Mulailah bikin - bikin website, aplikasi web, untuk kemudian ditunjukkan di portfolio untuk melamar kerja atau cari client sebagai freelancer.
Contoh Portfolio Sederhana
Pastikan baca juga berbagai syarat lowongan kerja untuk jadi Front-end Web Developer supaya kita bisa mempersiapkan diri untuk mempelajarinya.
Diubah oleh mx667 01-08-2021 05:23
kroco.ri dan 16 lainnya memberi reputasi
17
12.6K
34
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Urutan
Terbaru
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Komunitas Pilihan