OmniDev
  • Semua Tutorial
  • Paket Belajar
  • Troubleshooting & Error
  • Playground Sandbox

Roadmap Tutorial

Lihat roadmap per bab
Pengenalan Web: Cara Kerja Browser dan ServerHTML Pertama: Struktur DokumenTag, Elemen, dan AtributKomentar dan Best PracticeEntity dan Karakter SpesialLayouting Dasar: div, span, class, idHeading h1 sampai h6Hierarki Heading dan SEOParagraf dan Format TeksFormat Teks Lanjutan: sub, sup, mark, codeBlock vs InlineList: ul, ol, liDescription List: dl, dt, ddList BersarangLink Dasar: a hrefLink Lanjutan: Email, Telepon, AnchorLink Anchor dan Navigasi Satu HalamanLink pada Gambar dan TombolGambar Dasar: img, src, altGambar Lanjutan: figure, srcsetMemilih Format Gambar: JPG, PNG, SVG, WebPAlt Text MendalamAudio: Memutar SuaraVideo: Menyematkan VideoSubtitle Video dengan trackiframe dan EmbedFavicon: Ikon Tab BrowserTabel Dasar: table, tr, tdTabel: thead, tbody, tfoot, thTabel: colspan dan rowspanTabel Aksesibel: scope dan captionCaption dan Deskripsi Tabelcolgroup dan colTabel Responsif di HPForm Dasar: form, action, methodGET vs POST MendalamInput Teks: text, email, password, numberInput Email MendalamInput Password MendalamInput Number dan RangeInput Tel, URL, dan SearchInput Tanggal dan WaktuCheckbox dan RadioInput File: Upload BerkasInput Tersembunyi dan TombolSelect: Dropdown PilihanSelect Lanjutan: optgroup dan multipleTextarea: Input MultibarisLabel, Fieldset, LegendValidasi Form Bawaan BrowserValidasi: requiredValidasi: pattern dengan RegexValidasi: Panjang dan Rentang AngkaSemantic HTML Dasararticle, section, asideSemantic: header dan footerSemantic: navSemantic: article MendalamSemantic: section MendalamSemantic: asideAksesibilitas Dasar WebARIA: Atribut Aksesibilitas LanjutanMeta: charset dan viewportMeta Tag dan SEO DasarOpen Graph: Tampil Cantik Saat DibagikanProyek: Halaman BiodataProyek: Formulir PendaftaranProyek: Galeri FotoProyek Mini: Jadwal MingguanProyek Mini: Halaman Artikel
Lihat roadmap per bab
Pengenalan CSS dan Cara PakaiSintaks Aturan CSSSelektor Dasar: Elemen, Class, IDSelektor KombinasiSelektor AtributSpesifisitas: Siapa yang MenangCascade dan InheritanceSatuan CSS: px, em, rem, %Warna di CSSBox ModelMargin: Jarak LuarPadding: Jarak DalamBorderBorder Radius: Sudut MembulatOutlineBox ShadowBackgroundStyling Teks DasarFont FamilyUkuran dan Ketebalan FontLine Height dan SpasiFont KustomText ShadowWhite Space dan Text OverflowDisplay: Block, Inline, Inline-BlockMenyembunyikan ElemenPosition: Static dan RelativePosition: Absolute, Fixed, StickyZ-Index dan StackingFloat dan ClearOverflowFlex ContainerJustify dan AlignFlex WrapProperti Flex ItemGap di FlexboxStudi Kasus: NavbarStudi Kasus: Kartu ProdukStudi Kasus: Centering SempurnaGrid ContainerGap di GridPenempatan Grid ItemGrid Template AreasGrid Auto: Fill, Fit, DenseGrid vs FlexboxStudi Kasus: Galeri FotoStudi Kasus: Layout HalamanMedia QueryMobile FirstStrategi BreakpointGambar ResponsifTipografi ResponsifContainer QueriesStudi Kasus: Landing ResponsifTransisi CSSTransform 2DKeyframes DasarProperti AnimationStudi Kasus: Animasi LoadingPseudo-ClassPseudo-ElementVariabel CSSCalc, Clamp, Min, MaxFilter CSSBackdrop FilterObject Fit dan Object PositionProyek: Kartu ProfilProyek: Landing PageProyek: Dashboard AdminCheat Sheet CSS
Lihat roadmap per bab
Pengenalan JavaScript: Bahasa yang Menghidupkan WebCara Menjalankan JavaScriptVariabel: let dan constTipe Data PrimitifTipe Data Referensi: Array & ObjectKonversi Tipe DataOperator AritmatikaOperator Perbandingan & LogikaPercabangan if-elseKondisi Bertingkat & Early ReturnSwitch: Percabangan Banyak PilihanTernary Operator: if Satu BarisLoop for: Pengulangan Klasikfor...in vs for...ofLoop while & do-whilebreak & continueFungsi: DasarParameter & ArgumenReturn Value: Mengembalikan NilaiArrow FunctionFunction Expression vs DeclarationDefault & Rest ParameterScope: Wilayah VariabelHoisting: Kode DiangkatClosure: Fungsi yang MengingatArray: DasarArray: Tambah & Hapus ElemenArray.map: TransformasiArray.filter: MenyaringArray.find & findIndexArray.reduce: AgregasiArray.sort & reverseforEach, some, every, includesArray MultidimensiProyek Mini: Olah Data ArrayObject: DasarMethod & thisObject: Manipulasi PropertiDestructuringSpread & Rest (...)Nested Object & Optional ChainingCopy Object: Shallow vs DeepJSON: Format Data UniversalDate: DasarTemplate Literal MendalamMath: Fungsi MatematikaNumber: Method & PresisiString: Method PentingRegex: DasarDate: Format & ManipulasiSet & Map: Struktur Data yang Sering DiremehkanSymbol & BigInt: Tipe Data yang Jarang DibahasFitur Modern JavaScript: .at(), hasOwn, dan Assignment PintarDOM: Seleksi ElemenDOM: Membuat & Menambah ElemenDOM: Class & StyleDOM: innerHTML vs textContentDOM: Event ListenerDOM: Event DelegationDOM: Menangani FormDOM: Navigasi (Traversal)Keyboard Event: keydown, keyup, dan ShortcutMouse Event: Klik, Gerakan, dan KoordinatCustom Event: Komunikasi Antar Komponen Tanpa CouplingBOM & window: Browser di Luar Halaman WebTimer di JavaScript: setTimeout & setIntervallocalStorage & sessionStoragesessionStorage & Cookie: Menyimpan Data di BrowserGeolocation API: Menemukan Posisi UserClipboard API: Menyalin Teks dengan JavaScriptNotification API: Mengirim Notifikasi BrowserIntersection Observer: Deteksi Elemen Terlihat Tanpa Scroll ListenerProyek Mini: Todo ListCallback: Fondasi Kode AsinkronPromise: Janji yang Ditepati (atau Tidak)Promise Chaining: Merangkai .then() BerantaiPromise.all, allSettled, dan race: Banyak Janji SekaligusMenangani Error di Promise: .catch() dan .finally()async/await: Menulis Kode Asinkron Seperti Kode BiasaError Handling di async/await: try...catch yang BenarAwait Berurutan vs Paralel dengan Promise.allFetch API: Mengambil Data dari InternetFetch: POST, PUT, dan DELETEError Handling: try-catchCustom Error: Membuat Jenis Error SendiriModul ES6: export dan importDynamic import(): Muat Kode Saat DibutuhkanClass dan OOP: Cetakan untuk Banyak ObjectInheritance: extends dan superPrivate, Static, Getter dan SetterIterator dan Generator: function* dan yieldRekursi: Fungsi yang Memanggil Dirinya SendiriKomposisi Fungsi: Merakit Fungsi KecilDebounce dan Throttle: Menjinakkan EventCanvas Dasar: Menggambar dengan KodeWeb Worker: Komputasi Tanpa Bikin FreezeProxy: Mengintip dan Mengatur Akses ObjectStrict Mode: Biarkan JavaScript Marah Lebih AwalTesting Dasar: Percaya Tapi VerifikasiProyek Mini: Aplikasi Kuis Interaktif
Lihat roadmap per bab
Pengenalan TypeScriptTypeScript vs JavaScriptSetup TypeScripttsconfig DasarPath Alias di tsconfigTipe PrimitifAnotasi vs Inferensiany, unknown, dan neverArray di TypeScriptTupleTipe ObjectInterface DasarInterface ExtendsType AliasUnion TypeIntersection TypeLiteral TypeTemplate Literal TypesEnumParameter dan Return FunctionFunction OverloadParameter Opsional dan Defaultvoid dan never pada FungsiGeneric pada FungsiGeneric pada InterfaceGeneric pada ClassConstraint pada GenericDefault Type ParameterPartial dan RequiredPick dan OmitRecord: Kamus Type-SafeExclude dan ExtractReturnType, Parameters, dan AwaitedConditional TypesProyek: Generic UtilsOperator keyofMapped Typestypeof sebagai Type QueryNarrowing dengan typeofNarrowing dengan in dan instanceofDiscriminated UnionType PredicateAssertion FunctionType Assertion dengan asAssertion vs Type GuardModule Import ExportDeclaration Files (.d.ts)Class Dasar di TypeScriptimplementsAccess ModifierreadonlyAbstract ClassPengenalan DecoratorDecorator FactoryStrict ModeTyping Props di ReactTyping Hooks di ReactTypeScript untuk Next.jsDebugging Type ErrorProyek: Type-Safe API Client
Lihat roadmap per bab
Pengenalan Next.jsNext.js vs React PolosInstalasi Project Next.jsSetup Manual Tanpa create-next-appStruktur Folder ProjectKonvensi File App RouterDev Server & Hot ReloadUpdate & Upgrade Next.jsFile-System RoutingNested RoutingDynamic RouteCatch-all & Optional RouteRoute GroupPrivate Folder (_folder)Navigasi dengan LinkNavigasi ProgrammaticLayout DasarTemplate vs LayoutLoading UIError UIHalaman 404 (not-found)Global Error HandlerStreaming dengan SuspenseServer vs Client ComponentServer Component MendalamClient Component MendalamPola Komposisi Server-ClientBatasan & Aturan Server-ClientClient Component untuk Library Pihak KetigaContext di Era Server ComponentsFetch di Server ComponentFetch ParalelFetch dengan Params & SearchParamsCaching di Next.jsRevalidasi: ISR & On-DemandFetch di Client ComponentRequest MemoizationPola Fetch LanjutanServer Actions DasarValidasi di Server ActionsForm dengan Server ActionsuseActionStateOptimistic UpdaterevalidatePath & redirectProyek: Todo App FullMetadata Dasar & SEOgenerateMetadata DinamisOptimasi Gambar (next/image)Optimasi Font (next/font)Styling di Next.jsSitemap & robots.txtProyek: Galeri TeroptimasiRoute Handlers (API Routes)Route Handlers LanjutanMiddleware DasarMiddleware MatcherEnvironment VariablePengenalan AutentikasiProteksi Route dengan AuthProyek: Blog + API
Lihat roadmap per bab
Pengenalan PHPInstalasi XAMPPSintaks Dasar PHPVariabelTipe Data SkalarType JugglingOperator Aritmatika & AssignmentOperator Perbandingan & LogikaPercabangan if-elseswitch dan matchLoop for dan foreachLoop while dan do-whileFungsi DasarFungsi LanjutanArray DasarFungsi Array DasarSorting ArrayMencari & Filter ArrayTransformasi Array dengan array_mapFilter Fleksibel dengan array_filterMelebur Array dengan array_reduceFungsi String DasarFormat StringManipulasi String LanjutanTanggal & Waktu dengan DateTimeJSON Encode & DecodeRegex Dasar dengan preg_matchForm dengan GETForm dengan POSTInput Ganda: Checkbox & SelectKeamanan Form DasarValidasi Form DasarValidasi LanjutanMencegah CSRF dengan TokenMencegah XSSMencegah SQL InjectionHash Password yang BenarSession DasarSession untuk LoginMengamankan SessionCookieUpload File DasarUpload File yang AmanMembaca & Menulis FileClass & Object DasarProperty, Method & VisibilityConstructor & DestructorStatic Property & MethodInheritanceInterface & Abstract ClassTraitNamespace di PHPMagic Method PHPEnum di PHP 8.1Composer DasarAutoload PSR-4Error Handling DasarException & try-catchProyek: Buku TamuProyek: Login Sederhana
Lihat roadmap per bab
Pengenalan Laravel: Kenapa Framework Ini PopulerLaravel vs PHP Murni: Kapan Pakai FrameworkInstalasi Laravel dengan ComposerStruktur Folder Project Laravel 11Artisan: Perintah Wajib Hafal.env dan Konfigurasi: Rahasia ProjectRouting Dasar: Menghubungkan URL ke KodeRoute Parameter: URL DinamisRoute Model Binding: Otomatis Ambil DataRoute Group: Prefix dan Middleware SekaligusNamed Route dan Route CacheController: Memisahkan Logika dari RouteResource Controller: 7 Aksi CRUD SekaligusBlade Dasar: Template Engine LaravelEcho dan Escaping: {{ }} vs {!! !!}Directive If dan Loop di BladeBlade Component: Komponen ReusableSlot dan Named SlotLayout dengan @extends dan @section@include: Pecah View Jadi Bagian KecilMigration: Version Control untuk DatabaseMengubah Tabel: Tambah, Ubah, Hapus KolomSeeder: Isi Database dengan Data DummyFactory: Data Dummy Massal yang RealistisEloquent: ORM yang ManusiawiKonvensi Model: Nama Tabel dan KeyEloquent Create: Menyimpan Data BaruEloquent Read: Query yang EkspresifEloquent Update dan DeleteQuery Builder: SQL Tanpa Tulis SQLAgregasi: Count, Sum, Avg, dan GroupingMass Assignment: $fillable dan $guardedSoft Delete: Hapus Tanpa MenghapusHasMany dan BelongsTo: Relasi Satu-ke-BanyakQuery Lewat Relasi: whereHas dan withCountBelongsToMany: Relasi Banyak-ke-BanyakData Tambahan di Pivot: withPivotRelasi Bertingkat: hasManyThroughEager Loading: Muat Relasi SekaligusMasalah N+1: Musuh Performa TersembunyiValidasi Input: Jangan Percaya UserForm Request: Validasi yang Rapi dan ReusableAutentikasi dengan Breeze: Login Siap PakaiSession Auth Manual: Auth::attemptMiddleware Bawaan: auth, guest, throttleMiddleware Custom: Cek Role SendiriGate dan Policy: Otorisasi per AksiAPI Resource: Transformasi Response JSONREST Controller untuk APIREST CRUD Lengkap: Store, Update, Destroy via APIPagination: Data Besar per HalamanSanctum: Token Auth untuk SPA dan MobileUpload File: Validasi dan Simpan AmanStorage Disk: Local, Public, dan CloudMail: Kirim Email dengan MailableNotification: Multi-Channel SekaligusQueue: Kerja Berat di BackgroundJob Class: Bungkus Tugas BackgroundCache: Hindari Query BerulangTesting: Feature Test untuk RouteService Provider: Tempat BootstrappingService Container & Dependency InjectionEvent dan Listener: Kode yang Loosely CoupledProyek: REST API Todo LengkapProyek Akhir: Blog Full-Stack Lengkap
Lihat roadmap per bab
Pengenalan DartInstalasi Dart & DartPadSintaks Dasar & Fungsi main()Variabel, final, dan constTipe Data DasarOperatorString & InterpolasiMethod String EsensialPercabangan: if-elseSwitch & CasePerulangan forWhile & do-whilebreak & continueFungsi DasarFungsi RekursifParameter Named & OptionalArrow Function & Fungsi AnonimHigher-Order FunctionClosure di DartList DasarMethod List PentingTransformasi List: map & whereSpread & Collection-if/forAgregasi List: fold, reduce, everySetOperasi Himpunan SetMapManipulasi Map LanjutanClass & Object DasarConstructor DasarNamed & Factory ConstructorInheritance (Pewarisan)Interface & ImplementsAbstract ClassMixinExtension MethodEnum: Pilihan TerbatasEnkapsulasi, Getter & SetterCascade Notation (..)Override toString & EqualityNull Safety DasarOperator Nullable: ?., ??, ??=Operator ??= MendalamOperator Null Assertion (!)Keyword lateFuture Dasarasync & awaitFuture Chaining & KombinasiError Handling di AsyncStream DasarManipulasi StreamAsync Generator: async* & yieldAwait For MendalamException HandlingCustom ExceptionPackage & pub.devImport & Membuat LibraryJSON dengan dart:convertProyek: Kalkulator CLIProyek: Todo CLI
Lihat roadmap per bab
Pengenalan FlutterInstalasi Flutter & EmulatorProject Pertama & Struktur FolderKonsep WidgetStatelessWidgetStatefulWidget & setStateMaterialApp & ScaffoldText & Styling TeksJenis-Jenis ButtonImage dari Asset & NetworkIcon WidgetContainer: Kotak SerbagunaPadding, Margin & SizedBoxCard & ListTileAppBar & TabBarRow & ColumnMainAxis & CrossAxis AlignmentExpanded & FlexibleStack & PositionedListView.builderListView.separatedListView HorizontalGridView.builderSliverGridDelegateNavigator.pushPop & Mengirim Data BalikNamed RoutePassing Data antar HalamanBottomNavigationBarPengenalan go_routersetState Lebih DalamWidget LifecycleinitState & disposeWidget KeysInheritedWidgetValueNotifier & ValueListenableBuilderBuildContext & mountedTextField & TextEditingControllerInputDecorationForm & ValidasiCheckbox & SwitchRadio & SegmentedButtonSlider & DatePickerAlertDialogSnackBar & BottomSheetFuture & async/awaitFutureBuilderStreamBuilderParsing JSON DasarModel Class: fromJson/toJsonHTTP GET dengan package httpHTTP POST & Mengirim DataPola UI Async: Refresh & LoadingRiverpod: Provider DasarRiverpod: StateProviderRiverpod: FutureProviderRiverpod: Notifier (State Kompleks)Riverpod: ref.watch vs ref.read vs ref.listenBLoC: Konsep Event-StateBLoC: Cubit (Versi Simpel)BLoC di UI: Builder, Listener, ConsumerThemeData & Material 3Dark Mode ToggleAnimasi ImplisitAnimationController & TweenHero AnimationCustomPaint DasarResponsive LayoutSharedPreferencessqflite: CRUD Dasarsqflite + Model ClassBuild APK ReleaseProyek Mini: Kasir SederhanaProyek Mini: Aplikasi CatatanProyek Mini: Todo + SharedPreferences
Lihat roadmap per bab
Pengenalan Git: Mesin Waktu untuk KodeInstalasi dan Konfigurasi Awal GitGit vs GitHub: Jangan Tertukar Lagigit init vs git clone: Dua Cara Memulai RepoTiga Area Kerja Git: Working, Staging, Repositorygit add dan git commit: Menyimpan dengan Rapigit status: Membaca Kondisi Repogit log: Menjelajah Riwayat CommitMembaca Riwayat dengan Cepat: log --oneline --graphMelacak Satu File: git log --followgit diff: Melihat Perubahan Baris per BarisTiga Area Git: diff vs --staged vs HEADMembandingkan Branch dengan git diffgit show, blame, dan bisect: Detektif KodeStatistik Kontribusi: shortlog dan diffstatBisect Otomatis dengan git bisect run.gitignore: Mengabaikan File dengan PolaBranch: Jalur Paralel yang Amanswitch, restore & checkout: Pindah dan PulihkanMerge Fast-Forward: Penggabungan TermudahMerge No-FF: Menjaga Jejak FiturCherry-Pick: Memetik Satu CommitStrategi Merge: Recursive, Ours, OctopusResolusi Konflik: Saat Git MenyerahKonflik Hapus vs Ubah: UD dan DUMergetool dengan VS CodeRebase: Menata Ulang RiwayatRebase Interaktif: Merapikan RiwayatWorktree: Kerja Dua Branch SekaligusRemote & Origin: Menghubungkan ke Dunia Luargit push & Upstream Trackingfetch vs pull: Ambil Dulu atau Langsung Gabung?Membersihkan Branch Remote: fetch --prunegit stash: Laci Penyimpanan SementaraStash Lanjutan: -u, Pop Konflik, dan BranchSubmodule: Repo di Dalam Repogit reset: Soft, Mixed, Hardgit revert: Membatalkan dengan AmanGit Hooks: Otomatisasi di Sisi KlienGitHub Actions: CI PertamamuGitHub Codespaces: VS Code di BrowserGitHub Projects dan DiscussionsKeamanan Repo: Dependabot dan Secret ScanningGit LFS: Mengelola File BesarSinkronisasi Fork dengan UpstreamRilis GitHub: Draft, Notes, dan BinaryTemplate PR dan CODEOWNERSreflog: Penyelamat Saat PanikTag & GitHub Releases: Menandai VersiCommit Bertanda Tangan: GPG SigningPull Request: Membuat Usulan PerubahanDraft PR: Minta Feedback Lebih AwalReview PR: Diskusi & Approve KodeMerge PR: Merge, Squash, RebaseFork, Kontribusi OSS & GitHub Pages
Lihat roadmap per bab
Pengenalan HTTP: Bahasa Percakapan Browser dan ServerHTTP vs HTTPS: Kenapa Huruf S Itu PentingEvolusi HTTP: dari 1.1 ke HTTP/2 dan HTTP/3Anatomi URL: Membaca Alamat Web Bagian per BagianGET dan POST: Dua Method yang Paling Sering DipakaiPUT, PATCH, DELETE: Mengubah dan Menghapus DataHEAD, OPTIONS, dan Method LainnyaStatus 2xx: Semua yang Berarti SuksesStatus 304: Konten Tidak Berubah, Pakai Cache SajaStatus 3xx: Redirect dan CacheStatus 400: Bedah Validasi Input API401 vs 403: Bedah Tuntas Dua Error AuthStrategi 404: Bukan Sekadar Halaman Not FoundStatus 4xx: Kesalahan di Pihak Client500 vs 502 vs 503: Bedah Error ServerStatus 5xx: Kesalahan di Pihak ServerHeader Request: Informasi yang Dikirim ClientHeader Content-Type: Label Wajib Setiap BodyHeader Cache-Control: Atur Kapan Cache Boleh DipakaiETag dan Conditional Request: Sidik Jari FileContent Negotiation: Tawar-menawar Format DataStrategi Caching: Kapan Ambil dari Cache, Kapan ke ServerHeader Response & CORS: Aturan Main Beda DomainKonfigurasi CORS di Server: Express dan LaravelJSON: Format Data yang Dipakai Hampir Semua APIPrinsip REST: Cara Mendesain API yang RapiAPI Versioning: Mengubah API Tanpa Merusak Klien LamaQuery Parameter Praktis: Filter, Sort, dan PaginationCursor Pagination: Pagination untuk Data yang Terus BerubahPostman: Mencoba API Tanpa Nulis KodeDokumentasi API: Menulis yang Bikin Orang PahamOpenAPI dan Swagger: Dokumentasi yang Bisa DieksekusiGraphQL: Gambaran Alternatif RESTWebhook: Saat Server yang MenghubungimuFetch GET: Mengambil Data dari APIFetch POST: Mengirim Data ke APIUpload File dengan fetch dan FormDataFetch Lanjutan: Header, Timeout, dan AbortPola Interceptor: Auth dan Logging TerpusatError Handling API: Gagal dengan AnggunRate Limit: Memahami Batasan Kuota APIIdempotency Key: Aman dari Klik GandaBedah Header Authorization: Bearer, Basic, ApiKeyBasic Auth: Cara Login Paling SederhanaAPI Key: Kunci Sederhana untuk Integrasi ServerBearer Token & JWT: Standar Login API ModernCookie: Stempel Tangan di KonserAtribut Cookie: HttpOnly, Secure, SameSiteCookie vs Token: Kapan Pakai yang ManaGambaran OAuth: Login dengan Google & co.gRPC: Gambaran Komunikasi Super Cepat antar ServerWebSocket: Telepon Dua Arah untuk WebServer-Sent Events: Radio Satu Arah dari ServerAPI Gateway: Resepsionis untuk MicroserviceProyek Mini: API Client Lengkap
Lihat roadmap per bab
Pengenalan AI dan LLMCara Kerja LLMToken dan Context WindowParameter Sampling: Temperature dan Top-PPrompting DasarZero-Shot PromptingFew-Shot Prompting MendalamRole PromptingPrompt ChainingPrompting LanjutanChain-of-Thought MendalamStructured Output: JSON Mode dan Function CallingEvaluasi PromptMenyimpan dan Memversikan PromptContext EngineeringRAG: Retrieval-Augmented GenerationEmbeddings dan Vector DatabaseFine-Tuning: GambaranPengenalan Vibe CodingWorkflow Vibe CodingPair Programming dengan AIAI Multimodal untuk CodingPengenalan AI AgentOpenCode: AI Coding Agent Open SourceWorkflow OpenCode LanjutanClaude CodeSlash Commands di Claude CodeCursor & Windsurf: AI di Dalam IDECursor RulesAgent Skills & CLAUDE.mdSystem Prompt untuk AgentOpenRouter: Satu API untuk Banyak ModelNous Hermes: Model Open-WeightsSelf-Hosting Model dengan OllamavLLM: Menjalankan Model BesarBudgeting Token dan Biaya AIPengenalan MCPLangChain: GambaranCrewAI: GambaranAI untuk DebuggingAI untuk TestingAI untuk DokumentasiAI Code CompletionAI untuk GitAI untuk SQLAI untuk RefactoringAI untuk Migrasi FrameworkReview Kode dengan AIReview PR Otomatis dengan AIKeamanan AI CodingPrompt Injection: Panduan BertahanBatasan & Halusinasi AIEtika AI CodingWorkflow AI ProfesionalProyek Mini: Setup AI Agent Sendiri
Lihat roadmap per bab
Pengenalan Python: Bahasa Favorit Data AnalystInstalasi Python dan Persiapan KerjaSintaks Dasar PythonVariabel dan Tipe DataOperator dan PercabanganBoolean dan Logika di PythonMengolah Teks dengan StringPerulangan dan FungsiWhile Loop di PythonFor Loop Lanjutan di PythonFungsi Lanjutan Python: *args, **kwargs, LambdaList Comprehension: Dari Loop ke One-LinerDict & Set Comprehension untuk DataError Handling: try/except/else/finallyList, Tuple, dan DictionaryTuple dan Set di PythonDict Lanjutan di PythonDatetime di PythonRegex di PythonMembaca dan Menulis FileModul, Package, dan Import di PythonJSON di PythonOOP Dasar di Pythonpip dan Virtual EnvironmentDari Excel ke Pandas: read_excelNumPy: Fondasi Komputasi DataNumPy Lanjutan: Indexing 2D & Broadcastingpandas: DataFrame PertamaTipe Data Pandas: dtypes & astype()Filter, Sort, dan GroupByMembersihkan Data: Menangani Nilai KosongMembersihkan Data: Menangani DuplikatMembersihkan Data: Mendeteksi OutlierString Methods Pandas: .str AccessorMenggabungkan Tabel dengan merge()Mengubah Bentuk Data: pivot dan meltapply() dan lambda di pandasDatetime di Pandas: to_datetime & .dtStatistik Deskriptif dengan PythonDistribusi, Variansi, dan KorelasiVisualisasi Data dengan MatplotlibBar Chart dan Line Chart dengan MatplotlibScatter Plot dan Histogram dengan MatplotlibBoxplot dan Heatmap KorelasiSeaborn: Visualisasi Statistik Hemat KodeSQL Dasar: SELECT sampai WHERESQL: Filter dan Urutkan dengan WHERE dan ORDER BYJOIN dan AgregasiGROUP BY dan HAVING di SQLSubquery dan CTE di SQLWindow Function di SQLDari API ke DataFrameProyek Mini: Analisis Data PenjualanProyek Analisis Data End-to-EndCheat Sheet Python & Data
Lihat roadmap per bab
Setup Proyek Web: Struktur Folder yang RapiMembangun Navbar SederhanaNavbar Responsif dengan Menu HamburgerHero Section yang MemukauSidebar DashboardForm Login yang RapiValidasi Form dengan JavaScriptPesan Error Form yang RamahDropdown MenuTabs InteraktifAccordion FAQKartu Produk E-CommerceGrid Galeri FotoTombol dengan Animasi KerenModal PopupToast NotificationTabel yang Bisa Di-sortirDark Mode ToggleScroll Progress BarTombol Back to TopAnimasi Scroll RevealCounter Angka AnimasiSlider Carousel GambarGaleri dengan LightboxAplikasi Todo List DasarTodo App dengan Penyimpanan PermanenKalkulator SederhanaJam Digital Real-TimeStopwatch dengan LapKuis Interaktif dengan SkorGame Tebak AngkaGame Batu Gunting KertasFilter Produk Berdasarkan KategoriPencarian Real-TimePagination BernomorMengambil Data dengan Fetch APILoading SkeletonDaftar Sortable dengan Drag & DropGrafik Sederhana dengan CanvasProyek Akhir: Portofolio MiniTabel Harga (Pricing Table)Slider TestimoniForm Multi-Langkah (Wizard)Keranjang Belanja MiniWidget CuacaUI Music PlayerPapan Kanban Drag & DropUI Chat SederhanaTimeline VertikalSticky Notes (Catatan Tempel)Color Picker KustomGenerator Kata SandiUI Generator QR CodeInfinite ScrollAutocomplete / Saran PencarianTabs VertikalMega MenuFooter ModernHalaman 404 KreatifPreloader / Loading Screen

Troubleshooting

CORS IssuePenanganan CORS Origin antara Laravel API dan Next.jsBuild ErrorMengatasi Version Mismatch pada Dart SDK FlutterHydrationMemperbaiki Text Content Did Not Match Server di Next.jsTypeErrorMengatasi Cannot read properties of undefined di JavaScriptType ErrorMemahami Type 'X' is not assignable to type 'Y' di TypeScriptStylingCSS Tidak Berpengaruh: Specificity, Urutan, dan CacheWarningMengatasi Undefined array key di PHP 8HTTP 419Memperbaiki 419 Page Expired di LaravelDatabaseMengatasi SQLSTATE Connection Refused di LaravelGitMenyelesaikan Merge Conflict di GitGitMengatasi failed to push: updates were rejectedFetch/APIMengatasi Unexpected token '<' is not valid JSONImport ErrorMengatasi ModuleNotFoundError di PythonRuntime ErrorMengatasi Null check operator used on null value di DartBuild ErrorMengatasi Module not found: Can't resolve di Next.jsAPI ErrorMengatasi 401 dan 429 pada API AI (API key dan kuota)

Paket Belajar

Pilih jalur belajarmu.

Setiap paket menyusun roadmap custom dari ratusan modul: urutan belajar yang paling masuk akal untuk tujuanmu. Progress tersimpan otomatis di browser.

๐ŸŒฑ

Paket Pemula Web

Mulai dari nol: bikin halaman web pertamamu dengan HTML, CSS, dan JavaScript dasar.

Nol pengalamanLihat roadmap
๐ŸŽจ

Frontend Developer

Paket lengkap jadi frontend developer: dari HTML sampai Next.js modern.

Pemula - MenengahLihat roadmap
โš™๏ธ

Backend Laravel

Jadi backend developer dengan PHP dan Laravel: API, database, autentikasi.

Pemula - MahirLihat roadmap
๐ŸŒ

Fullstack Next.js

Kuasai frontend dan backend dalam satu framework: Next.js + TypeScript.

MenengahLihat roadmap
๐Ÿญ

Fullstack Laravel

Web developer komplit: frontend dasar + backend Laravel yang solid.

Pemula - MahirLihat roadmap
๐Ÿค–

AI & Vibe Coding

Belajar AI, prompting, AI agent (OpenCode, dsb), dan vibe coding seperti pro.

Semua levelLihat roadmap
๐Ÿ“Š

Data Analyst

Olah data dengan Python, pandas, SQL, dan visualisasi.

Pemula - MenengahLihat roadmap

OmniDev Learn

learn.omnidevv.biz.id, dibuat dengan Next.js, TypeScript & Tailwind CSS

Semua TutorialTroubleshootingPlaygroundGitHubPortofolio