Frontend dla uczniów i studentów
Praktyczne szkolenie z HTML, CSS, JavaScript i React. Od podstaw do własnego projektu, z mentorem, code review i naciskiem na realne umiejętności, a nie teorię.
- HTML, CSS, JavaScript i React
- praktyczne projekty zamiast suchej teorii
- mentor, feedback i code review
<article class="card"> <h3>Portfolio w React</h3> <p>Projekt praktyk</p> <a href="/demo">zobacz</a> </article>.card { padding: 16px; border-radius: 14px; background: #fffdf9; box-shadow: 0 8px 24px #0a2f4933; }const btn = document.querySelector(".cta"); let n = 0; btn.addEventListener("click", () => { btn.textContent = `klik × ${++n}`; });function Card() { const [likes, set] = useState(0); return <button onClick={() => set(likes+1)}> ♥ {likes} </button>; }
Czego nauczysz się w praktyce
Technologie realnie używane w pracy frontend developera — dotknij zakładki, aby zobaczyć interaktywny przykład.
HTML i struktura strony
Budujesz poprawną strukturę dokumentu i uczysz się, do czego służą poszczególne sekcje semantyczne strony.
- znaczniki semantyczne i ich rola w dostępności
- układ nagłówka, treści, sekcji i stopki
- czytelna struktura pod SEO i screen readery
Dotknij znacznika, aby podświetlić sekcję na podglądzie.
CSS i responsywność
Stylujesz strony, układasz elementy w Flexbox/Grid i sprawdzasz, jak layout dostosowuje się do różnych ekranów.
- kolory, typografia, odstępy i hierarchia
- Flexbox i Grid w realnych układach
- zachowanie strony na telefonie, tablecie i desktopie
Przeciągnij suwak, aby zmienić szerokość okna podglądu.
Dodaj pierwsze zadanie, aby zobaczyć jak JavaScript zmienia DOM.
JavaScript i logika
Dodajesz interaktywność: obsługujesz kliknięcia, zmieniasz treść strony i operujesz na danych zadań.
- obsługa zdarzeń (click, input, submit)
- praca z DOM: dodawanie, edycja, usuwanie elementów
- pierwsze listy zadań i mini-aplikacje w przeglądarce
Dodaj zadanie, oznacz jako zrobione lub usuń jednym dotknięciem.
ProjektCard.tsx
Każdy dotyk aktualizuje useState i odświeża widok.
- likes0
- views0
React i komponenty
Składasz interfejs z komponentów ze stanem. Widzisz, jak reakcja użytkownika natychmiast aktualizuje widok.
- komponent, props i stan (useState)
- aktualizacja widoku po akcji użytkownika
- myślenie kartami / komponentami w portfolio
Dotknij serca lub przycisków, aby zaktualizować stan komponentu.
Repo zainicjowane (1 commit na main).
Git i praca zespołowa
Pracujesz jak w realnym zespole i od razu widzisz, jak działa Git: tworzysz commity, gałęzie, merge, rebase oraz synchronizujesz lokalne repo z remote w workflow znanym z GitHuba.
- symulator Git i nauka Gita: commit, branch, checkout, usuwanie gałęzi
- merge, rebase i historia projektu jako dowód postępu
- push / pull / fetch, GitHub i przygotowanie pod code review
Utwórz gałąź, dodaj commity i sprawdź local vs remote: nauka Gita krok po kroku, od brancha po push.
Projekt do portfolio
Łączysz wszystkie umiejętności w jednym projekcie, który zostaje w Twoim portfolio i na GitHubie.
- realny projekt od pomysłu do publikacji
- kod na GitHubie do pokazania pracodawcy
- punkt wyjścia do rozmowy o stażu lub pracy
Dotknij karty projektu, aby zobaczyć użyte technologie.
Frontend: prosty wybór wariantu
Dwa proste warianty: praktyki grupowe oraz praktyki premium w formule 1:1 lub w kameralnej grupie do 3 osób. Niestandardowy zakres wyceniamy po rozmowie.
Praktyki grupowe Frontend
HTML, CSS, JavaScript i wstęp do React. Wariant rozszerzony z 18h spotkań grupowych i 3h 1:1 z mentorem.
- wspólne tempo
- projekt frontend do portfolio
- możliwość rat
Praktyki premium Frontend
Praktyki premium odbywają się w formule 1:1 lub w kameralnej grupie do 3 osób. Każda dodatkowa osoba zwiększa cenę o 500 zł.
- 1:1 lub do 3 osób
- projekt dopasowany do celu
- elastyczne terminy
Inny zakres szkolenia
Np. 320 godzin, kilka miesięcy pracy, krótsze praktyki IT, większa aplikacja frontendowa albo wymagania szkoły.
- wycena po rozmowie
- dopasowanie godzin
- możliwy plan dla szkoły
Na rozmowie wstępnej dopasowujemy poziom, temat projektu i harmonogram. Płatność można rozłożyć na raty.
Dla kogo ten temat ma największy sens
Frontend to dobry start w IT, nawet jeśli nie masz doświadczenia z programowaniem.
Uczeń i licealista
Dla osób, które chcą zacząć tworzyć strony internetowe od zera i zbudować pierwsze portfolio projektów.
Student
Dla studentów szukających praktycznego uzupełnienia wiedzy z uczelni i realnych umiejętności przydatnych na rynku pracy.
Osoba zmieniająca kierunek
Dla osób, które chcą wejść do branży IT przez frontend, zaczynając od solidnych podstaw HTML, CSS i JavaScript.
Co możesz z tego wynieść
Własny projekt, kod na GitHubie i realne umiejętności — to zostaje po szkoleniu.
Strona wizytówka
Responsywna strona od podstaw: poprawna struktura HTML i nowoczesny CSS.
Interaktywna aplikacja
Projekt w JavaScript z obsługą zdarzeń, formularzami i logiką po stronie przeglądarki.
Projekt w React
Aplikacja React z komponentami, stanem, routingiem i komunikacją z API — gotowa do portfolio.
Co przygotować przed szkoleniem
Nie wymagamy doświadczenia z programowaniem, ale przyda się podstawowa konfiguracja techniczna.
- komunikator Discord i mikrofon do spotkań głosowych
- komputer z systemem Windows i stałym dostępem do internetu
- konto na GitHub
- zainstalowane oprogramowanie: Visual Studio Code, Notepad++, Sourcetree
- zalecana przeglądarka Google Chrome
Regulamin i zakres szkolenia
Przed rozpoczęciem szkolenia warto zapoznać się z dokumentami opisującymi cel, zakres i obowiązki uczestnika.
Najczęstsze pytania o szkolenie frontend
To pytania, które pojawiają się przed pierwszą rozmową o tej ścieżce.
Czy szkolenie frontend jest dla zupełnie początkujących?
Tak. Program zaczyna od podstaw HTML i CSS, nie trzeba mieć żadnego wcześniejszego doświadczenia z programowaniem.
Czym różni się wariant grupowy od premium?
W wariancie grupowym pracujesz w małym zespole do 12 osób i wspólnie realizujecie zadania. Praktyki premium odbywają się w formule 1:1 lub w kameralnej grupie do 3 osób — to pełne dopasowanie tempa, programu i projektu. Każda dodatkowa osoba (max 2) zwiększa cenę o 500 zł.
Czy po szkoleniu będę mieć coś do portfolio?
Tak. W każdym wariancie celem jest zbudowanie realnego projektu, który można umieścić na GitHubie i pokazać jako dowód umiejętności.
Czy mogę rozłożyć płatność na raty?
Tak. Możliwość rozłożenia płatności na raty jest dostępna po wcześniejszym ustaleniu z mentorem.
Jak wygląda harmonogram spotkań?
Spotkania odbywają się 2–3 razy w tygodniu, każde po 90 minut. Dni i godziny ustalane są wspólnie z grupą lub indywidualnie. Terminy obejmują popołudnia w dni robocze i sobotnie poranki.
Chcesz sprawdzić, czy frontend jest dobrym kierunkiem dla Ciebie?
Krótka rozmowa wystarczy, żeby ocenić, czy lepsza będzie mała grupa, praktyki premium (1:1 lub do 3 osób) czy inny temat.