Belajar Web Development dari YouTube

Introduction

Mei 2020 adalah pertama kali saya memulai belajar web development. Awalnya, saya mengikuti Course Udemy oleh Angela Yu. Menurut saya course yang diberikan bagus, hanya saja durasi yang harus disiapkan sangat panjang yaitu sekitar 54 jam. Course ini menurut saya baik jika kamu benar" tidak tahu apa" tentang web development, karena Angela Yu menjelaskan dengan sangat lengkap.

Tetapi, dengan course itu saja menurut saya tidak cukup, karena beberapa materi sudah sedikit outdated dan styling yang diajarkan langsung menggunakan framework tanpa belajar fundamentalnya terlebih dahulu. Nah, kekurangan" itu saya dapatkan dari channel" youtube yang akan saya list dibawah ini. Channel" ini menggunakan Bahasa Inggris, kalau kamu kesulitan biasanya ada fitur subtitle dari youtube jadi kamu bisa lebih mudah mencerna kata-katanya.

HTML CSS

• Kevin Powell → Channel ini lebih sering membahas fundamental CSS, Semantic HTML. Practices yang dilakukan Kevin cukup cocok dengan saya, sangat recommended untuk belajar di awal" terutama untuk Flexbox dan Grid
• Design Course → Channel ini biasanya lebih fokus ke cara mendesign website, design pattern
• Web Dev Simplified → Sangat baik untuk pemula karena materinya cukup dasar dan lengkap
• Dev Ed → Ada beberapa video yang membahas cara membuat common layouting websites
• The Net Ninja → Ada crash course untuk HTML CSS

JavaScript

• Traversy Media → Banyak materi selain javascript juga seperti React
• Florin Pop → Cek untuk Higher Order Function (seperti map, foreach, filter), cek juga project making dengan Vanilla Javascript
• codeSTACKr → Cek series Javascript in 90 seconds, ada juga crash course dan beberapa fundamental seperti (this, async await, fetch api)

React.js

• Traversy Media → Ada course React yang baru direlease tahun 2021, pasti sangat updated. (very recommended)
• Dev Ed → Content"nya bagus untuk materi React yang sudah lumayan in-depth seperti React Context,
• The Net Ninja → Channel ini juga ada course React yang masih ongoing, jadi sangat updated.
• James Q Quick → Beberapa course Gatsby jika kamu berminat, tetapi belakangan ini James sudah pindah kiblat ke Next.js. Video" React Hooks nya juga bagus.

Next.js

• Lee Robinson → Penjelasannya bagus dan materi yang dicakup cukup mendalam, ada course React 2025 (saya juga lagi mau ambil) menggunakan Next.js, Firestore
• Ben Awad → Video"nya cukup baik, tapi beberapa stack yang dia gunakan sedikit kurang familiar seperti GraphQL, Typescript

Animation in React

• Wrong Akram → banyak materi yang menggunakan GSAP, kadang menggunakan framer motion dan beberapa animation library lainnya
• Sam Selikoff → lebih fokus ke Framer Motion dan Tailwindcss

Additional Resources

• Austin Shelby → membahas design pattern menggunakan Tailwindcss
• Jason Lengstorf → Cek streaming 90 menitan yang membahas banyak materi seperti Typescript, Next.js. Cek juga video yang membahas react-query: kurang lebih mirip seperti SWR untuk data fetching dan caching, react query punya devtools yang keren banget
• Fireship → banyak 'quick course' seperti penjelasan singkat selama 1 menit atau 10 menit supaya kamu mengerti common knowledge tech stack lain.

List Course Udemy yang Telah Saya Selesaikan

Course diurutkan berdasarkan course yang paling pertama saya selesaikan:

1. The Complete 2020 Web Development Bootcamp → durasi cukup lama, materi sangat lengkap, beberapa outdated
2. The Complete Node.js Developer → very recommended jika kamu berminat untuk belajar lebih dalam ke bidang backend, tapi cukup essential juga sebagai frontend developer untuk tahu bagaimana cara REST API bekerja
3. User Experience Design Essentials - Adobe XD UI UX Design → course untuk menggunakan Adobe XD, tapi saya lebih prefer menggunakan figma untuk web design & prototyping
4. Learn Figma - UI/UX Design Essential Training → cukup baik, banyak latihan yang bisa membuat kita semakin terbiasa untuk mendesign website. Beberapa fitur baru figma belom dicover
5. Learn UI Design Fundamentals → FREE di scrimba, yang buat adalah Gary Simon, pemilik Channel Design Course yang saya rekomendasikan di HTML CSS. Sangat baik karena mengajarkan UI Fundamentals seperti Visual Hierarchy, Typography, Whitespace
6. Complete Python Developer in 2020: Zero to Mastery → Sangat baik menurut saya, mengajarkan dari dasar, kemudian mencakup beberapa topik seperti automation menggunakan beautiful soup
7. React Front to Back → Great course oleh Brad Traversy, lebih ke hands-on project menggunakan React Context dan Redux

Summary

Belajar frontend development memang sangat banyak yang harus dicover mulai dari yang paling basic seperti HTML, CSS, JS, kemudian harus belajar Git untuk version control, frontend framework, styling framework, backend services, database. Tetapi, hal ini pastinya akan bisa kamu mengerti walaupun waktu yang harus kamu investasikan cukup panjang.

Tetapi, jika kamu suka dan berminat untuk bidang frontend development, belajar dengan menonton youtube ini serasa menonton entertainment, dimana kamu bisa belajar sesuatu yang baru setiap kali selesai menonton video. Intinya keep learning and invest yourself with knowledge. Saya juga masih punya banyak sekali backlog untuk mempelajari dan mendalami techstack yang ada. Jadi, tetap semangat dan banyak" bikin project, karena kalau hanya nonton doang pasti cepet lupa.

Goodluck! Contact me via email (check the footer) if you need some personal recommendation, I will be glad to help you!

Tips tambahan: kalo youtubernya ngomongnya lama, coba playback speednya dicepetin jadi 1.5x