Introduction
Ekspektasi Membaca Buku Ini
Menjadi Fullstack Javascript developers. Dari frontend sampai backend akan menggunakan full Javascript.
Menjadi web developer yang baik dengan menguasai frontend dan backend secara mendasar dan mendalam.
Kamu bisa membuat aplikasi apapun yang kamu lihat atau bayangkan tanpa bantuan tutorial.
Setting Your Expectation
Buatlah jadwal setiap hari yang kamu akan dedikasikan sepenuh waktu untuk belajar. Mau kamu dalam kondisi tidak bersemangat atau lelah.
Tentukan berapa jam setiap hari ingin belajar. Ini terserah pada kemampuanmu dan lingkunganmu. Saya pribadi dulu 12-16 jam setiap hari. Selesai belajar dan bisa dapat kerjaan freelance pertama dalam 6 bulan. 3 bulan kemudian dpt kerja remote.
Jadilah pembelajar yang baik. Sabar ketika menghadapi lelahnya belajar. Istirahat sebentar, namun jangan berhenti sebelum sampai tujuan.
Slow == Fast
Building the basic slowly
Fall in love with the pain. Utamanya saat mengerjakan coding challenge ketika belajar Javascript.
Kalau nemu kebuntuan, plis jangan menyerah. Cari solusi dari masalah tersebut sampai ketemu. Meskipun kamu sampai harus cari di ratusan sumber berbeda!
Kamu akan belajar otodidak, tentunya hal ini adalah jalan yang sepi. Carilah teman yg bisa menyemangatimu. Kalau tidak ada kamu bisa berteman dengan saya di Twitter. Saya akan support 100% perjuanganmu. Follow here:
Good luck on your journey. From your best friend, Nayaka!
Fundamentals
Bird’s Eye View – 1 Hour
Lihat industri saat ini
Pahami apa computer science itu, apa software development, apa web development dan perbedaan keduanya
Bagaimana web bekerja, apa itu http, apa itu server, apa itu client, hubungan dari ketiganya
CS50 Harvard
Figma – 5-10 Hours
Belajar basic figma untuk membuat layout website.
Kenapa ini penting karena kebanyakan figma akan digunakan baik kamu seorang Backend Engineer maupun Frontend Engineer.
Figma jadi standar di industri untuk pembuatan website dan mobile apps.
Backend Engineer akan melihat flow bisnis secara keseluruhan di figma, bahkan bisa bikin database design, sedangkan Frontend Engineer akan slicing design pixel perfect pakai figma.
Github – 10 s/d 20 Hours
Jangan hanya disimpan hasil belajarmu dalam komputer. Gunakan github untuk menyimpannya. Kamu di masa depan akan berterima kasih karena sudah melakukan ini
Recruiter biasanya juga akan ngecek githubmu untuk mengetahui seberapa aktif kamu ngoding.
Ketika bekerja nanti kamu pasti GitHub untuk kerja sama dengan engineer lainnya.
Selain GitHub ada juga Gitlab dan Bitbucket. Konsepnya sama saja, jadi fokus pelajari GitHub.
Resource:
Pelajari list pada video berikut. Boleh semua atau cukup dari #1-#8
When to move:
Ketika kamu sudah terbiasa commit dan push dari local ke repository
Core Learning
HTML & CSS – 100 Hour
What’s HTML & CSS
Resources:
MDN Docs
HTML/CSS Books. But just use MDN Docs
Berhati-hati dengan Youtube. Crappy tutorial, crash course hindari kecuali paham apa yg kamu tonton. Kalau beginner sebaiknya jangan
Kalau ada modal untuk bayar course, lebih baik bayar daripada menghabiskan banyak waktu
How:
Learn basic HTML & CSS through MDN Docs
Go to fav website: Google, FB, Reddit, Dribble. Lihat komponen2 kecil seperti tombol, navigasi, chat, dll.
Layouts, positioning, flexbox, grid, box model, specifity.
Start building & Repeat until 100 Hours
Upload setiap project ke github
Always be building. Kalau kamu lihat tutorial bikin sesuatu, silahkan ikuti. Tapi ulangi 5x atau sampai kamu terbiasa bikin sendiri tanpa lihat tutorial lagi. Contoh: Bikin Menu Navigasi Responsive. Nonton tutorial dan tiru 100% → Perulangan 1, hanya tonton 90% → Perulangan 2, hanya tonton 80% → Perulangan 3, hanyan tonton 50% → dst sampai kamu bisa bikin menu navigasi responsive tanpa 100% lihat tutorial
Resource to waste 100 Hours by building:
frontendmentor.com
icodethis.com
More HTML & CSS:
Responsive design, fluid design, media queries
Typography, Fluid typography, responsive typographu
CSS gampang untuk mulainya, tinggal include ke dalam html aja. Tapi susah untuk dikuasai
Fullstack developers dg bertahun pengalaman tidak bisa melakukan hal simple di CSS seperti centering div
Pakai 100 Jammu. Pelajari dengan pelan. Pelajari dengan baik.
SLOW === FAST
When to move:
Sudah bikin 5-10 halaman website HTML & CSS saja
Kamu sudah terbiasa menggunakan css flexbox, positioning, grid, media queries
Habiskan 100 jam untuk belajar teori dan praktik dg membuat sesuatu hanya dg HTML & CSS. 49% Belajar. 51% Bikin projek
Javascript – 400 Hour
Resources:
MDN Documentation [Click Here. FREE]
Eloquent Javascript [Click Here. FREE]
You don’t know Javascript [Click Here. FREE]
Traversy Media [Click Here. FREE]
Web Dev Simplified [Click Here. FREE]
JavaScript Mastery [Click Here. FREE]
How to learn:
JANGAN SENTUH FRAMEWORK APAPUN. Sebelum kamu menguasai Javascript murni kamu tidak akan bisa menguasai framework. Semua javascript framework. Entah itu jQuery, React, Angular ataupun Vue. FOKUS DI JAVASCRIPT DULU
Baca tutorial dari resource. Tulisan biasanya lebih update dan terstruktur daripada video. Jadi biasakanlah suka baca karena toh nanti ketika sudah kerja juga bakal banyak baca. MDN Documentation paling rekomendasi
Rekomendasi pakai resource no 1 sebagai makanan utama. Nomor 2 & 3 vitamin untuk menyelam lebih dalam.
Selesaikan banyak challenge dari https://edabit.com/ dan set ke level beginner untuk memantapkan basic.
Setelah selesaikan challenge basic dari edabit, pergi ke codewars untuk selesaikan challenge.
Bikin projek2 kecil: Login form, sign up form, navbar, like, comment, checkout, add to cart, search, auto complete
Bikin projek2 besar tanpa backend. Full Frontend dg hanya menggunakan local storage untuk penyimpanan atau cukup dg konten yang statis:
Ecommerce seperti Tokopedia
Social media seperti Facebook/Twitter/Instagram
Crowdfunding seperti Kitabisa.com
Music player seperti spotify
Submit setiap progress apapun ke github
Resource to waste 400 Hours by exercising:
https://javascript30.com/
https://freecodecamp.com
https://frontendmentor.com
https://icodethis.com
When to move
50 Edabits challenge level beginner
50 https://codewars.com challenge
Buat 10 Project besar dengan hanya html, css & javascript
NodeJS / Express / MongoDB – 100 Hour
Resources:
MDN Documentation [Click Here. FREE]
How to learn:
Ikuti full dari 1 resource di atas dari awal sampai akhir.
Di dalam 1 sumber tutorial itu kalian akan membuat aplikasi MVC (Model View Controller).
Pahami benar-benar konsep MVC ini karena akan sangat berguna saat proses wawancara dan saat bekerja banyak sekali penggunaan framework MVC ini ketika membuat aplikasi.
Kalian akan belajar menyimpan data ke dalam database non relational menggunakan MongoDB.
Kalian akan membuat server sendiri yang bisa di-run di local komputer kalian.
Kalian sudah bisa membuat aplikasi fullstack.
Setelah paham dg MVC, skrg buat REST API yang bisa CRUD (Create, Read, Update, Delete)
Connect REST API dan pakai di aplikasi frontendmu. HTML, CSS & Javascript sudah cukup.
Submit setiap progress apapun ke github
When to move
Menyelesaikan resources 1 dari awal sampai selesai
Buat 1 lagi projek fullstack lainnya dengan menggunakan MVC. Aplikasi jual beli barang bekas misalnya.
Sudah benar paham dengan konsep MVC.
Bisa membuat REST API
ReactJS – 100 Hour
Baca dulu kenapa di sini react bukan vue, angular, atau svelte:
Lebih banyak demand, pasar dalam negeri maupun luar negeri. DONE.
Fokus dapat kerja dulu. Kamu bisa belajar framework UI javascript yg kamu rasa lebih baik setelah kamu dapat kerjaan. Jgn habiskan waktu cari yg terbaik.
Resources:
MDN Documentation [Click Here. FREE]
Reactjs Docs [Click Here. FREE]
How to learn:
Pastikan sudah khatam 400 jam belajar Javascript 🙂
Ikuti full dari resource 1 kemudian resource 2 scr berurutan.
Kenapa dari MDN Docs dulu? Karena reactjs docs official skrg menyarankan langsung pakai framework sperti NextJS, Remix atau Gatsby. Itu bagus tapi saya nggak rekomendasi kalau blm pernah merasakan pengalaman bikin dari pakai npx create-react-app
Submit setiap progress apapun ke github
When to move
Sudah paham konsep prop, state, useState, useEffect, Array.map, Array.filter
Buat 2 projek besar dengan Reactjs dan sambungkan ke API.
Linkedin clone → Cari free API dg kata kunci “job board” di sini https://rapidapi.com/hub
Jual beli rumah → Cari free API dg kata kunci “real estate” di sini https://rapidapi.com/hub
Relational Database (MySQL) – 100 Hour
Resources:
Programming with Mosh - MySQL Tutorial for Beginners
SQL Bolt
MySQL for Nodejs
How to learn:
Belajar teori terlebih dahulu di resources no 1
Kemudian latihan di resources no 2
Belajar bikin CRUD dengan Nodejs di resources no 3
Submit setiap progress ke github
When to move
Menyelesaikan secara berurutan resources 1-3
Buat 1 projek REST API dengan menggunakan NodeJS + Express + MySQL
Buat 1 projek Frontend dengan menggunakan ReactJS dan sambungkan REST API ke frontend
Auth/Authz – 100 Hour
Resources:
https://www.passportjs.org/docs/
How to learn:
Ikuti semua tutorial di passportjs
Pahami apa perbedaan authentication & authorization
When to move
Gunakan projek dari belajar Relational Database (MySQL) – 100 Hour dan implementasikan auth/authz.
Buat aplikasi yang aman sehingga setiap user berbeda bisa melakukan kegiatan CRUD.
End of Roadmap
Selamat kamu sudah menjadi seorang web developer!
Hal selanjutnya yang bisa kamu lakukan adalah mendapatkan uang dari hasil jerih payahmu.
Ini langkah yang bisa kamu ikuti:
Buat website portfoliomu, domain .com dengan namamu.
Cari kerjaan freelance. Dapat kerja freelance lebih mudah daripada dapat kerja fulltime
Cari kerja remote atau onsite.
Fokus di 1 sisi, entah itu Frontend Engineer atau Backend Engineer. Di sisi manapun baik karena kamu menguasai keduanya.
Tetap tingkatkan skill dengan belajar teknologi baru.
Tidak ada komentar:
Posting Komentar