Roadmap
Roadmapa nauki programowania: przejrzysty plan od HTML i CSS po React, Next.js i Pythona. Zobacz wszystkie moduły i lekcje, śledź postępy i osiągaj cele.
Twoja ścieżka: Fullstack TypeScript
Starożytny Egipt
HTML5, CSS3, Flexbox, SASS, Grid
Wprowadzenie
Pierwsze kroki na platformie, wprowadzenie do HTML, elementy HTML, struktura dokumentu HTML, rozszerzenia elementów
Droga do Heliopolis
Jak działa internet, przeglądarki, HTTPS/IP, formatowanie tekstu, linki, obrazy, historia internetu, semantyka HTML, listy, właściwości elementów, tabele, formularze, wideo, źródła wiedzy o HTML
Zagadki hieroglifów
Wprowadzenie do CSS, reguły CSS, selektory, stylowanie tekstu, box model, klasy i ID, display, pozycjonowanie, pseudo-klasy i pseudo-elementy
Tajemnice piramid
Flexbox: osie, justify-content, align-items, order, align-self, wrapping, align-content, skrócone właściwości, flex-grow/shrink/basis, grid z flexboxem, gap
Świątynne obeliski
Viewport, fluid layout, responsywne obrazy, jednostki vw/vh, media queries, mobile-first vs desktop-first
Dolina Nilu
SASS: zmienne, nesting, mixiny, mapy/listy, partials/moduły, extend/dziedziczenie, operatory, przegląd RWD, SASS vs CSS custom properties
CSS Grid
CSS Grid: rozmiary/jednostki, pozycjonowanie elementów, zaawansowane pozycjonowanie, grid+flexbox layouty, grid areas/template areas, grid vs flexbox porównanie
Komnata faraona
Nowoczesne CSS: container queries, :has(), CSS nesting, cascade layers, subgrid, clamp(), aspect-ratio, :is()/:where(), @property, scroll-snap, @supports
Sala Annubisa
Dostępność (a11y), WCAG, semantyczny HTML, ARIA, nawigacja klawiaturowa, dostępne formularze, obrazy/multimedia, kontrast kolorów, narzędzia do testowania dostępności
Bibliotheca Alexandrina
Chrome DevTools, Emmet, walidatory HTML/CSS, favicon/Open Graph, optymalizacja wydajności, web fonts, hosting (GitHub Pages/Netlify/Vercel), zaawansowane techniki workflow
Misja kosmiczna
JavaScript, React.js, Hooks, Redux, Router
Start misji
Wprowadzenie do React, porównanie frameworków, Virtual DOM, konfiguracja środowiska, Node.js/npm, tworzenie projektu Vite, struktura projektu, pierwszy komponent, JSX, DevTools
Lądowanie na Marsie
Anatomia komponentu, children/kompozycja, props, renderowanie warunkowe, renderowanie list, wzorce kompozycji, controlled vs uncontrolled components
Nowa rzeczywistość
Stan i eventy, obsługa zdarzeń, przepływ danych, propagacja eventów, wzorce aktualizacji stanu, formularze (controlled components)
Interfejs użytkownika
Context API, reducery, stan globalny, useReducer, Context+useReducer w praktyce, optymalizacja Context, wzorce zarządzania stanem
Problemy z łącznością
Cykl życia komponentu, useEffect, synchronizacja z zewnętrznymi systemami, pobieranie danych z API, czyszczenie efektów, useRef, optymalizacja useEffect, custom hooks, race conditions/debouncing, memoizacja (memo/useMemo/useCallback)
Zaawansowane systemy
React Router: konfiguracja routingu, parametry URL, zagnieżdżone trasy, nawigacja programatyczna, route guards, przekierowania, lazy loading, stan przez location, historia przeglądarki
Z innej perspektywy
Styled Components, Sass/SCSS, Tailwind CSS, UI component frameworks, design systems, React Transition Group, animacje CSS/keyframes
Podróż na Orbiter
HOC/Render Props/Compound Components, Concurrent Mode/Suspense, code splitting, wzorce Adapter/Facade, dostępność (a11y), performance profiling, deployment na Vercel
Komunikacja z bazą
React 18+ hooks: useTransition, useFormStatus/useActionState, useId, use hook, useDeferredValue, wirtualizacja list, useOptimistic
Stylizacja statku
Portale, i18n, bezpieczeństwo, Apollo Client/GraphQL, WebSockets/SSE, Web Workers, React Compiler, Streaming SSR/Edge, RSC, micro-frontendy, TanStack Query, React 19
Kontrola jakości
Axios/biblioteki HTTP, stany loading/error/empty, race conditions/AbortController, POST/PUT/DELETE, cache/SWR, zaawansowana obsługa błędów, paginacja/infinite scroll
Optymalizacja lotu
TypeScript z React: typowanie komponentów funkcyjnych, props/interfejsy, useState/useRef, eventy, komponenty generyczne, discriminated unions, typowanie Context/useReducer
Integracje zewnętrzne
Testowanie React: Jest, React Testing Library, testowanie interakcji użytkownika, testowanie komponentów async, mockowanie modułów/API, testowanie hooków, snapshot testing
Podróż w nieznane
CSS variables/dynamiczne motywy, CSS Modules, zero-runtime CSS-in-JS, styled-components theming, responsywne wzorce, Emotion/vanilla-extract, design tokens
Stacja Orbitalna Omega
Composition vs Inheritance, Container/Presentational, headless components, Inversion of Control, feature flags/A/B testing, event-driven architecture, Atomic Design, Provider/State Machines
Centrum Dowodzenia Apollo
Error Boundaries, react-error-boundary, obsługa błędów formularzy, logowanie/monitoring, Fallback UI/Skeleton Loaders, Graceful Degradation, zaawansowane wzorce obsługi błędów
Park Jurajski
JavaScript, ES6+, DOM, Async/Await, TypeScript
Brama do parku
Historia JS, środowisko uruchomieniowe, konsola, komentarze, formatowanie kodu, semicolony, zmienne (var/let/const), typy danych, konwersja typów, operatory arytmetyczne/porównania/logiczne, priorytet operatorów, instrukcje warunkowe (if/else/switch), pętle, funkcje
Laboratorium DNA
Parametry i argumenty funkcji, arrow functions, scope (globalny/funkcyjny/blokowy), hoisting, this, tablice (push/pop/slice/splice), forEach/map/filter/reduce, obiekty (literały/konstruktory), prototypy, closures, try/catch, template literals, destrukturyzacja, spread/rest
Hodowla dinozaurów
Klasy ES6, konstruktory i metody, dziedziczenie (extends), enkapsulacja i pola prywatne (#), polimorfizm, klasy abstrakcyjne, mixiny, Map/Set, WeakMap/WeakSet, Symbol, metody statyczne, gettery/settery, kompozycja vs dziedziczenie
Katalog gatunków
Model zdarzeń i Event Loop, callbacki i callback hell, Promise (then/catch/finally), Promise.all/race/allSettled, async/await, obsługa błędów try/catch, równoległe zadania asynchroniczne, Fetch API, żądania HTTP, przetwarzanie JSON, iteratory i generatory
System kontroli
Zaawansowane wzorce obiektów i tablic, chain i kompozycja metod, reduce/flatMap, iteratory, ES Modules (import/export), CommonJS (require), dynamiczne importy, debugowanie (konsola/breakpointy/profilery), zaawansowana obsługa błędów, wzorzec Builder/Observer, regex, Date, localStorage/sessionStorage, ES2024/ES2025, Web APIs
Systemy alarmowe
Czym jest TypeScript, konfiguracja tsconfig.json, kompilator tsc, typy podstawowe (string/number/boolean/any/unknown), tuple, enum, union/intersection, interfejsy, type aliases, rozszerzanie interfejsów (extends), typy parametrów i zwracanych wartości, funkcje generyczne, przeciążanie funkcji, utility types
Ewolucja kodu
Modyfikatory dostępu (public/private/protected), właściwości statyczne i abstrakcyjne, implementacja interfejsów, type narrowing i type guards, klasy generyczne, ograniczenia generyczne (constraints), conditional types, mapped types, discriminated unions, dekoratory klas/metod/właściwości, fabryki dekoratorów, namespace, declaration merging
Zaawansowana genetyka
Event listeners, obiekt Event, propagacja (bubbling), delegacja wydarzeń, wydarzenia myszy/klawiatury, formularze, usuwanie listenerów i czyszczenie pamięci, zaawansowane techniki event handling, performance i optymalizacja, Event Bus, testy jednostkowe event handlerów, Custom Events, zaawansowane DOM API
TypeScript w laboratorium
Wzorce projektowe (Module/Factory/Observer), zasady SOLID, programowanie funkcyjne, wzorce zarządzania stanem, code splitting i tree shaking, lazy loading, bundle optimization, architektura event-driven
Projekt: Odbudowa Parku
Web Workers, zarządzanie pamięcią (garbage collection/memory leaks), pliki deklaracji (.d.ts), type-safe Event System, template literal types, TypeScript z Node.js, module augmentation, Test-Driven Development (TDD), TypeScript z popularnymi frameworkami
Centrum Testów DNA
Dlaczego testowanie jest ważne, framework Jest, matchery, setup/teardown, mockowanie, testowanie kodu asynchronicznego, Test-Driven Development (TDD), testowanie TypeScript z Jest
Laboratorium Ewolucji
Czym jest programowanie funkcyjne, funkcje wyższego rzędu (map/filter/reduce), kompozycja funkcji (compose/pipe), currying i częściowa aplikacja, domknięcia, rekurencja, wzorce niemutowalności danych, funktory i monady
Cyberpunk 2150
Next.js 16, SSR, SSG, ISR, API Routes, TypeScript
Wejście do Metropolii
React/Next.js wprowadzenie, konfiguracja środowiska, inicjalizacja projektu, struktura katalogów, Client/Server Components, Hello World, narzędzia deweloperskie, strategie renderowania
Hyperloop miejski
File-based routing, dynamiczne segmenty, Link/useRouter, grupowanie tras, zagnieżdżone/catch-all routes, loading UI/layouts, 404/redirects, middleware
Kwantowe przetwarzanie
Global styles/CSS Modules, Tailwind CSS, Shadcn/UI, Image component, strategie ładowania obrazów, optymalizacja fontów, zasoby statyczne (public/), ikony/favicon/metadata
Sieci neuronowe
Opcje baz danych, Prisma ORM setup, modele danych/migracje, Server Components data fetching, Client Components hooks, Server Actions/mutations, implementacja wyszukiwania, optymalizacja zapytań/N+1
System identyfikacji
Strategie renderowania (App Router), rewalidacja danych, streaming/Suspense, loading skeletons, Partial Prerendering, strategie cache, Edge Runtime, SSR vs SSG vs ISR benchmarki
Centralny mainframe
Formularze (controlled/uncontrolled), React Hook Form, walidacja Zod, walidacja server-side, obsługa błędów formularzy, error.tsx, Server Actions errors, dostępność, formularze wielokrokowe
Interfejsy holograficzne
Podstawy autentykacji, NextAuth.js/Auth.js, strategie auth, OAuth providers, sesje/tokeny, role/uprawnienia, ochrona tras middleware, bezpieczeństwo OWASP, Clerk, auth Context Provider
Optymalizacja kwantowa
Przygotowanie do produkcji, SEO/dynamiczne metadata, Open Graph, sitemaps/robots.txt, web analytics, platformy deployment, zmienne środowiskowe, CI/CD, monitoring wydajności, PWA/Service Workers, preview deployments
Projekt: Mega City
Strapi CMS, Stripe payments, Resend/React Email, Zustand, zaawansowane Server Actions, TanStack Table, typed routes, internationalizacja (next-intl), Docker, Turborepo monorepo, forbidden()/unauthorized(), after() API, use cache
Imperium Rzymskie
NestJS, TypeORM, PostgreSQL, JWT, WebSockets, Microservices
Brama Rzymu
Architektura NestJS, moduły, Dependency Injection, kontrolery, serwisy, operacje CRUD, DTOs, konfiguracja projektu
Forum Romanum
Routing, middleware, guards, interceptory, pipes, custom dekoratory, exception filters, cykl życia żądania
Skarbiec Imperium
Entities, migracje, relacje, wzorzec Repository, Query Builder, transakcje, seedery, walidacja danych
Straż Pretoriańska
Hashowanie haseł, JWT, Passport.js, RBAC, refresh tokens, OAuth, sesje, uwierzytelnianie dwuskładnikowe (2FA)
Hierarchia Centurionów
WebSockets, real-time events, Socket.IO, broadcasting, rooms/namespaces, autentykacja socketów, obsługa połączeń, obsługa błędów
Zaawansowane Systemy
Exception filters, custom exceptions, logowanie, health checks, monitoring, debugowanie, graceful shutdown
Komunikacja Legion
Testy jednostkowe, integracyjne, E2E, mockowanie, pokrycie kodu, testy wydajnościowe, automatyzacja testów
Testy Kwalifikacyjne
Redis cache, indeksowanie DB, load balancing, zarządzanie pamięcią, rate limiting, kompresja, kolejki wiadomości, profilowanie wydajności
Podbój Imperium
Docker, SSL/TLS, CI/CD, praktyki produkcyjne, skalowanie/mikroserwisy, bezpieczeństwo, backup, blue-green deployment
Kancelaria Pretora
class-validator, ValidationPipe, class-transformer, walidacja zagnieżdżona, custom validators, grupy walidacji
Archiwum Senatu
Konfiguracja Swagger, dekoratory kontrolerów, dokumentacja DTO, dekoratory response, customizacja UI, CLI plugin, wersjonowanie API
Port w Ostii
Kubernetes, zaawansowany Docker/Compose, zarządzanie sekretami, zaawansowane CI/CD, Prometheus, OpenTelemetry, Terraform
Laboratorium Przyszłości
Vue.js 3, Vite, TypeScript, Pinia, Vue Router
Strefa Startowa
Wprowadzenie do Vue.js, Vite, Single File Components, pierwszy system Vue, struktura aplikacji, narzędzia deweloperskie
Pracownia Hologramów
Interpolacja, v-bind/v-on, bindowanie klas/stylów, v-if/v-show, v-for, template refs
Reaktor Energetyczny
Reaktywność ref(), reactive(), deep vs shallow reactivity, toRef/toRefs, debugowanie reaktywności
Centrum Obliczeń
Computed properties, computed get/set, watch, watchEffect, zatrzymywanie watcherów/cleanup
Symulator Sterowania
Obsługa zdarzeń, modyfikatory eventów, formularze z v-model, modyfikatory v-model, zaawansowane formularze
Drukarnia 3D
Wprowadzenie do komponentów, rejestracja/import, kompozycja, lifecycle hooks, scoped styles/CSS modules, composables
Stacja Komunikacji
Props basics, walidacja props, custom events, v-model na komponentach, provide/inject, fallthrough attrs, zaawansowane wzorce komunikacji
Magazyn Modułów
Podstawy slotów, named slots, scoped slots, dynamiczne komponenty, KeepAlive/Teleport, async components/Suspense, zaawansowane sloty
Laboratorium Naukowe
Zaawansowane composables, reaktywne wzorce projektowe, VueUse, testowanie composables, wydajność/optymalizacja, composables w produkcji
Centrum Nawigacji
Vue Router basics, dynamiczne trasy/parametry, zagnieżdżone trasy/named views, navigation guards, nawigacja programatyczna, zaawansowany routing
Baza Danych Misji
Pinia basics, state, getters, actions, Composition API stores, kompozycja store'ów, plugins/persistence
Platforma Startowa
Testowanie komponentów, testowanie composables/store'ów, testy integracyjne/E2E, budowanie na produkcję, deployment
Komora Holograficzna
Komponent Transition, named transitions/modes, JS Animation Hooks, TransitionGroup, integracja z bibliotekami animacji, tranzycje tras, zaawansowane wzorce animacji
Moduł Rozszerzeń
Custom directives (hooks/args/modifiers), zaawansowane dyrektywy, system pluginów, przydatne pluginy, renderless/functional components, ekosystem pluginów
Centrum Kontroli Startowej
TypeScript z Vue, typowanie props/emits, typowanie ref/reactive/computed, template refs/provide-inject typing, SSR/Nuxt concepts, Nuxt 3 basics