Tematika

Gyakorlati, célzott lista, amit érdemes megtanulnod, ha frontend-es akarsz lenni. A lista a legfontosabb és leggyakrabban elvárt készségeket tartalmazza, sorrendben, hogy könnyebb legyen haladni:

1. Alapok

HTML5 → strukturált, szemantikus elemek, formok, táblázatok, meta tag-ek. CSS3 → layoutok (flexbox, grid), színek, tipográfia, animációk, pseudo-élések. JavaScript (ES6+) → változók, függvények, arrow function, DOM manipuláció, eventek, async/await, Promise-k.

2. Modern frontend keretrendszerek

React.js (leggyakoribb) → komponensek, state, props, lifecycle, hooks. Angular vagy Vue.js → ha hirdetés kifejezetten ezeket kéri. TypeScript → erősen ajánlott a React/Angular projekteknél, típusbiztonság.

3. Stílusok, preprocesszorok

SASS / SCSS → változók, mixin-ek, nesting. CSS modulok → lokális stíluskezelés. Responsive design → media query-k, mobilbarát elrendezés, reszponzív UI.

4. Verziókezelés és eszközök

Git → commit, branch, merge, pull, push, rebase. NPM/Yarn → csomagkezelés, dependency management. Webpack / Vite / Parcel → projekt buildelés, bundling alapok.

5. API-k és kommunikáció backenddel

REST API → fetch, axios, HTTP metódusok (GET, POST, PUT, DELETE). GraphQL → ha az állás kéri. Async programozás → Promise, async/await, error handling.

6. Tesztelés és minőségbiztosítás

Unit testing → Jest, React Testing Library. End-to-end teszt → Cypress, Playwright (előny, nem mindenhol kötelező).

7. Egyéb fontos készségek

Cross-browser kompatibilitás → Chrome, Firefox, Edge, Safari. Performance optimalizálás → lazy loading, code splitting, image optimization. Soft skillek → csapatmunka, dokumentáció, problémamegoldás. Angol nyelvtudás → dokumentáció, kommunikáció, külföldi csapatok.

8. Tapasztalat / portfólió

GitHub / GitLab → saját projektek, kódminták. Mini projektek → pl. To do app, weather app, saját portfólió oldal. Junior pozíciókhoz → 1–2 kisebb projekt is elég. Medior/Senior pozíciókhoz → 3–5 projekt, komplex UI, API integráció, esetleg csapatban végzett munka.

1–2 hónapos tanulási terv – Frontend fejlesztő

1. hét – HTML5 és CSS3 alapok

HTML5: szemantikus elemek (header, footer, article, section), formok, táblázatok, linkek, képek, meta tag-ek. CSS3: alapok (színek, fontok, box-model), display (block, inline, inline-block), pozicionálás, float, clear. Gyakorlat: készíts egy egyszerű saját portfólió oldalt, amiben van fejléc, navigáció, tartalom, lábléc.

2. hét – CSS fejlettebb technikák

Flexbox → layoutok készítése, igazítás, rugalmas elemek. CSS Grid → rács alapú elrendezések. Reszponzív design → media query-k, mobilbarát elrendezések. Gyakorlat: a portfólió oldal legyen reszponzív, különböző képernyőméretekre.

3. hét – JavaScript alapok

Alapok: változók (let, const), függvények, ciklusok, feltételek. DOM manipuláció → elemek lekérdezése, eseménykezelés (addEventListener). Async programozás → Promise, async/await, fetch API. Gyakorlat: készíts egy interaktív To do alkalmazást (hozzáadás, törlés, státusz módosítás).

4. hét – Modern JavaScript + TypeScript

ES6+: arrow function, destructuring, template string, spread/rest operator. TypeScript: alapok (típusok, interface-ek, osztályok), egyszerű JS projekt átalakítása TS-re. Gyakorlat: To do alkalmazás átalakítása TypeScript-tel.

5. hét – Frontend keretrendszer

React.js: komponensek, state, props, lifecycle, hooks (useState, useEffect). Routing → React Router alapok. Form kezelés → kontrollált és kontrollálatlan komponensek. Gyakorlat: To do app újraírása React + TS + CSS modulok segítségével.

6. hét – API integráció és verziókezelés

REST API → fetch/axios, CRUD műveletek. Git alapok → commit, branch, merge, pull, push. Projekt feltöltése GitHub-ra → portfólió link. Gyakorlat: To do app adatainak tárolása egy külső API-val.

7. hét – Tesztelés és optimalizáció

Unit teszt → Jest, React Testing Library alapok. E2E teszt → alap Cypress teszt (pl. To do app működésének ellenőrzése). Teljesítmény → képek optimalizálása, lazy loading, kód splitting. Gyakorlat: portfólió oldal betöltési idejének optimalizálása, alap tesztek írása.

8. hét – Portfólió és soft-skillek

Portfólió oldal véglegesítése → linkek, projekt bemutatók, GitHub referenciák. Soft-skillek → kommunikáció, dokumentáció írása, angol nyelvű rövid leírások a projektekhez.

Gyakorlat: minden projekt legyen dokumentálva, működő linkek, rövid leírások, screenshotok.

Ez a terv heti 10–15 óra tanulást feltételez, de akár gyorsabban is haladhatsz, ha több időd van.

Frontend fejlesztői felkészülési checklist

1. hét – HTML5 és CSS3 alapok

[ ] HTML5 szemantikus elemek (header, footer, article, section) [ ] Linkek, képek, formok, táblázatok [ ] CSS3 alapok: box-model, színek, fontok, display [ ] Saját egyszerű portfólió oldal készítése

2. hét – CSS fejlettebb technikák

[ ] Flexbox alapok, igazítás, rugalmas elemek [ ] CSS Grid alapok [ ] Reszponzív design: media query-k, mobilbarát elrendezések [ ] Portfólió oldal reszponzív kialakítása

3. hét – JavaScript alapok

[ ] Változók (let, const), függvények, ciklusok, feltételek [ ] DOM manipuláció, eseménykezelés (addEventListener) [ ] Async programozás: Promise, async/await, fetch API [ ] Interaktív To do alkalmazás készítése

4. hét – Modern JavaScript + TypeScript

[ ] ES6+ funkciók: arrow function, destructuring, template string, spread/rest [ ] TypeScript alapok: típusok, interface-ek, osztályok [ ] To do alkalmazás átalakítása TypeScript-tel

5. hét – Frontend keretrendszer

[ ] React.js alapok: komponensek, state, props, lifecycle, hooks [ ] Routing: React Router alapok [ ] Form kezelés: kontrollált és kontrollálatlan formok [ ] To do app újraírása React + TS + CSS modulok segítségével

6. hét – API integráció és verziókezelés

[ ] REST API: fetch/axios, CRUD műveletek [ ] Git alapok: commit, branch, merge, pull, push [ ] Projekt feltöltése GitHub-ra, portfólió link létrehozása [ ] To do app adatainak tárolása külső API-val

7. hét – Tesztelés és optimalizáció

[ ] Unit teszt: Jest, React Testing Library alapok [ ] E2E teszt: Cypress alap (pl. To do app működésének ellenőrzése) [ ] Teljesítmény optimalizálás: képek, lazy loading, code splitting [ ] Portfólió oldal betöltési idejének javítása, alap tesztek írása

8. hét – Portfólió és soft-skillek

[ ] Portfólió oldal véglegesítése: linkek, projekt bemutatók, GitHub referenciák [ ] Dokumentáció: rövid leírások minden projekthez, angol nyelvű verzió [ ] Soft-skillek: problémamegoldás, csapatmunka, kommunikáció