Frontendfejlesztés az alapoktól — 4 hónapos gyakorlatorientált képzés | robot_dreams
Jelentkezem!
Jelentkezem!
Kezdj új válság álló karrier be!

Frontend-
fejlesztés az alapoktól

HTML, CSS és JavaScript
https://robot-site-static.fra1.digitaloceanspaces.com/hu/ckeditor/88-frontendfejlesztes-az-alapoktol/min/1st-block-gif-min.gif
Tanuld meg 4 hónap alatt, hogyan építhetsz izgalmas és részletgazdag weboldalakat a nulláról, HTML-, JavaScript- és CSS-ismeretekkel. A kurzus során lehetőséged lesz elkészíteni egy saját témájút és egy vállalati weboldalt házi feladatként.
  • Indulás: június 13.
  • 28 alkalom során a elsajátítod azt a HTML-, CSS- és JavaScript-alaptudást, ami egy junior frontend developer pozícióhoz elvárt.
  • A házi projektek elkészítésével pedig a gyakorlatban fogod megépíteni első weboldalad teljesen a nulláról, amit később portfólióként is fel fogsz tudni használni.
  • Az oktató megosztja veled a legfrissebb szakmai trendeket, és útmutatást nyújt a sikeres fejlesztői karrierhez.
Jelentkezem!
Kinek ajánljuk a kurzust?
Backend- és mobilapplikáció-fejlesztőknek Mélységeiben megismered a frontend gyakorlatát és korlátait, hogy megoldást nyújthass az IT-csapat időigényes fejlesztési problémáira. Véglegesíteni tudsz majd egy-egy módosítást, architekturális döntéseket hozhatsz, és jobban átlátod majd a cross-platform megoldásokat is.
Graphic designereknek és UI/UX designereknek A web nyújtotta lehetőségek tudatában jobban meg tudod tervezni a képernyőn megjelenő elemeket, interakciókat, animációkat. A közös nyelv a frontenddel négyzetre emelheti az együttműködés sikerességét, a tudást pedig egy új, jobban fizető területen is alkalmazhatod.
Karrierváltóknak Ha szeretnéd mielőbb beindítani a karriered a szoftverfejlesztés leglátványosabb területén, akkor alapos gyakorlati tudásra van szükséged. A kurzuson a webfejlesztési ismeretek mellett felkészítünk az aktuális interjúhelyzetekre, és a projektek során fellépő valós problémákra.
A képzés végére átfogó képet nyersz a frontendfejlesztés minden lépéséről, és az előtted álló karrierlehetőségekről.
Az előadó🔥
Széll Csaba Senior Frontend Developer, Tech Leader @ Starschema Nézd meg az előadó weboldalát
  • 25 éves frontendfejlesztői tapasztalattal rendelkezik a legváltozatosabb webes technológiák területén, karrierje során már 18 különböző programozási nyelvvel dolgozott.
  • Dolgozott Magyarország legnagyobb autógyárának, az Audinak, a legnagyobb hazai telekommunikációs cégnek, a Telekomnak, a BKK közlekedési vállalatnak, a Kravtex autóbuszgyárnak és az RWE Innogy energiaszolgáltatónak.
  • Jelenleg a legnagyobb magyar big data cég, a Starschema Kft. Senior Frontend Developer és Tech Leader pozíciójában dolgozik.
  • Fejlesztette és vezette fejlesztését annak a frontendalkalmazásnak, amely az USA legnagyobb tengeri teherkikötőjének (Port of Los Angeles) forgalmát követte – ez körülbelül 10 millió szállítókonténert jelent évente.
  • Szakértelemmel rendelkezik rendszermérnök, adatbázis-üzemeltető, adatmérnök és full-stack fejlesztő munkakörökben is.
A KURZUSRÓL: 4 hónap alatt felépítesz a nulláról egy saját témájú és egy vállalati weboldalt, a legmodernebb webfejlesztői követelmények alapján.
Frontendfejlesztés-alapok Az első lépésektől kezdve vezetünk be a frontendfejlesztés gyakorlatába. A HTML-, CSS- és JavaScript-alapoktól indulva eljutsz odáig, hogy a kurzus végére egy Figma prototípus alapján létre tudsz hozni az aktuális piaci elvárásoknak megfelelő weboldalakat.
Gyakorlat A képzésen a gyakorlatban teszed próbára a kreativitásodat, és elkészíted a saját projektjeidet, amelyek a frontendfejlesztői portfóliód alapját képezhetik majd. Ezentúl rá fogsz látni a webfejlesztő mindennapi rutinjára és a leggyakoribb, élesben fellépő hibákra.
Egyedülálló skillek A webfejlesztésben egyre nagyobb hangsúlyt nyer az akadálymentesítés, a SEO-ismeret és a biztonság.
A képzésen megtanulod, hogyan építheted be ezeket a funkciókat a frontendfejlesztés folyamataiba, hogy a kész weboldal megfeleljen a legmodernebb elvárásoknak.
Karrierfejlesztés Ismerni fogod az aktuális webfejlesztői interjúkérdéseket, és tudni fogod, hogy mi a legfontosabb a techcégek számára egy jelöltben. Útmutatást kapsz ahhoz, hogyan működj együtt sikeresen az IT-csapattal egy új pozícióban, és át fogod látni a specializációs lehetőségeket is.
Jelentkezem!
kurzus program
kurzus program
#1 alkalom
június 13.
Bevezetés a frontendkurzusba: célkitűzés, elhelyezés, technológiák

Az óra eredménye: A résztvevők látják a webes frontend fejlesztés kontextusát, hol van a helye a világban, milyen interakciók képzelhetők el más területekkel, hova vezethet ez az egész.

  • Miért jó a frontenddel kezdeni? Stabil alapok és széles látókör
  • Mi a frontend szerepe, és honnan ered a frontend
  • Mi a különbség a frontend, backend és a UX design között
  • Tesztelés
  • Milyen frontend specializációk vannak?
  • Főbb technológiák: HTML, CSS, JS
  • Másodlagos technológiák: TS, frameworkök, webserver
  • A webes frontend fejlesztés alapjai (internet/intranet, http, böngésző)
#2 alkalom
június 18.
HTML-alapok: struktúra, szintaktika, felépítés és a fontosabb feature-ök

Az óra eredménye: A résztvevők megismerik a HTML szerepét és alapképességet a weboldalak építésének viszonyában. Tudni fogják, hogy milyen interakciókra képes, milyen egyéb szerepei vannak.

  • Mi a különbség a HTML-fájl és egy weboldal között?
  • A fejlesztői környezet telepítése
  • Fejlesztői eszközök Google Chrome-ban és Firefoxban
  • A HTML-szabvány, hibatűrés, ACID-teszt
  • A HTML szintaktikája és struktúrája
  • Gyakran használt elemek
  • Attribútumok szerepe
  • Mi az a szemantikus HTML? Miért fontos?
  • Táblázatok, formok
  • Navigáció: oldalon belül és kívül
#3 alkalom
június 20.
Verziókövetés, git, GitHub, GitLab

Az óra eredménye: a résztvevők megismerik a verziókezelés fontosságát a szoftverfejlesztésben, betekintést nyernek egy fejlesztőcsapat feladataiba, lesz egy github fiókjuk egy repoval.

  • Mi az a git, és mire jó?
  • Git szolgáltatók: Github, Gitlab
  • Alapparancsok
  • PR, code review, mint napi rutin
  • Git commit
#4 alkalom
június 25.
CSS-alapok: osztályok, propertyk, selectorok, box model.

Az óra eredménye: A résztvevők megismerik a HTML és CSS közötti választóvonalat, a CSS formázási tulajdonságát, fontosabb alapfunkciókat.

  • Miért a class a legfontosabb?
  • CSS-szintaktika
  • Internal / external css
  • A HTML és a CSS szétválasztásának fontossága
  • Box model
  • A legfontosabb CSS-tulajdonságok
  • Mérési egységek: px, em, stb
  • CSS selectorok
#5 alkalom
június 27.
Szövegstrukturálás és formázási lehetőségek

Az óra eredménye: A résztvevők megismerik az alap szövegmegjelenítő HTML tageket és azok szerepét, fontosabb natív funkciókat fejlettebb megjelenítésre.

  • Különféle szöveges blokkok, támogató tagek: h1-h6, p
  • Listák: ol, ul
  • Accordion: details, summary
  • Színek, vastagság, sormagasság, stílusok, letter-spacing
  • Árnyékolás, egyéb effektek
  • Egyedi betűtípusok használata
  • Linkek formázása: text-decoration
#6 alkalom
július 2.
Formok, azaz űrlapok: formázás, validálás, küldés.

Az óra eredménye: a résztvevők végigkövetik, ahogy egy űrlap megszületik, milyen fontosabb elemei vannak egy működő alap formnak.

  • Beviteli lehetőségek
  • Labelek használata
  • Form formázása CSS-sel
  • Beviteli mezők átformázása
  • Űrlapok elküldése a backendnek
  • Rejtett mezők és szerepük
  • Validálás és korlátok
#7 alkalom
július 4.
Beágyazott tartalmak, képek, videók és más

Az óra eredménye: a résztvevők átlátják, hogy milyen egyéb formátumú médiát lehet beágyazni egy weboldalba, mik annak a korlátai és jellegzetességei. Mikor milyen eszközt érdemes használni.

  • Képek méretezése, elrendezése
  • Kép shadow
  • Az SVG lehetősgei és korlátai
  • Grafikonok
  • Canvas, 3D
  • Videó, audió
  • Iframe – oldal az oldalban
  • PDF
#8 alkalom
július 16.
Navigációs lehetőségek

Az óra eredménye: a résztvevők megismerik az oldalon belüli és oldalak közötti navigációs lehetőségeket. A navigáció korlátai formok esetén (elveszik, direkt törlődik). Tipikus navigációs megoldások.

  • „nav” tag
  • „a” tag
  • Belső navigáció
  • Külső navigáció / új tabon
  • History
  • Formázás, speciális szelektorok: hover, focus, visited
  • Gombok használata navigálásra, ikon-gombok
  • Dropdown menük, footer menük
#9 alkalom
július 18.
Reszponzív design, tablet, mobil, watch, nyomtató

Az óra eredménye: a résztvevők megismerik a reszponzív design szerepét és fontosságát, különféle megközelítések döntési alapját (üzletileg / statisztikailag). Megismerik, hogy milyen eszközök állnak rendelkezésére.

  • A reszponzív design fontossága
  • Pixelek, dpi, ppi
  • Viewport meta tag
  • Responsive vs. adaptive vs. mobile-first vs. desktop-first
  • Fizikai méret vs. felbontás
  • Tablet, telefon és desktop közötti különbségek
  • Media selector reszponzivitás kezeléséhez
  • Egyéb media selectorok (dark mode, print, motion, landscape)
#10 alkalom
július 23.
Flexbox és grid

Az óra eredménye: a résztvevők áttekintést kapnak a mai modern layout építő megközelítések történetéről, kialakulásuk fontosságáról. Megismerik a flexbox és gridalapú elrendezés alapjait, a tipikus layoutok építését.

  • Browser wars, caniuse.com
  • A frametől a flex/grid-ig
  • Flexbox CSS propertyk
  • Grid CSS propertyk
#11 alkalom
július 25.
CSS frameworkök, preprocesszorok

Az óra eredménye: a résztvevők képet kapnak a CSS-kezelés különböző módszereiről, megközelítéseiről azok előnyeiről és hátrányairól. Betekintést kapnak a CSS-preprocesszorok létjogosultságáról, korlátairól.

  • CSS-módszertanok: BEM, OOCSS
  • Bootstrap, materialize, bulma, foundation, tailwind, stb
  • CSS preprocesszorok: sass, less
#12 alkalom
július 30.
Haladó CSS-használat: animáció, változók, számítások és függvények

Az óra eredménye: a résztvevők megismerik a nem tipikus CSS-paramétereket, mit és mire tudunk használni. Megtanulnak változókat definiálni, mi a hasznuk, hogyan lehet velük számolni.

  • Z-index, position, display
  • Animációk, keyframes, delay
  • Tranzíciók és változók
  • Kalkuláció és egyéb függvények
  • Mit nem lehet kihozni a CSS-ből?
#13 alkalom
augusztus 1.
Javascript bevezető

Az óra eredménye: a résztvevők megismerik a javascript szerepét a szoftverfejlesztésben (nem csak frontend), relevanciáját és erősségét manapság.

  • Javascript mint programozási nyelv
  • Mikor és miért jött létre?
  • Javascript környezetek: node.js, browser
  • Internal és external JS
  • A frontend backendje
  • Weboldal vs. webalkalmazás
#14 alkalom
augusztus 6.
Javascript alapok

Az óra eredménye: a résztvevők megismerik a javascript alap nyelvi elemeit, definíciókon és példákon keresztül.

  • Szintaxis
  • Fenntartott szavak
  • Változók
  • Ciklusok
  • Feltételek
  • Függvények / lambdák / arrow functions
#15 alkalom
augusztus 8.
Lehetőségek komplex adattípusokkal

Az óra eredménye: a résztvevők megismerkednek a komplex adattípusok által nyújtott többletfunkcionalitással, az azokon végezhető műveletekkel.

  • Tömbök és tömbműveletek
  • Objektumok és objektumműveltetők
  • Beépített függvények, Math, Intl
#16 alkalom
augusztus 13.
Átjárhatóság a HTML és a JS között

Az óra eredménye: a résztvevők megtudják, hogyan lehet javascriptből hatással lenni a HTML-re és CSS-re. Megismerik, hogyan lehet javascriptben figyelni bizonyos események megtörténtére (pl. gombra kattintás, képernyő-elforgatás).

  • document.querySelector
  • addEventListener
  • Mi az a HTML "NODE"?
  • DOM manipuláció
#17 alkalom
augusztus 15.
A JS és a párhuzamos működés

Az óra eredménye: a résztvevők megismerik a javascript futási környezet speciális aspektusait. Hogyan lehet elérni azt, hogy a felhasználói felület reagál, miközben JS-kód fut a háttérben.

  • Aszinkron működés
  • „Non-blocking”
  • Event loop, event queue
  • Egyedi események
  • Settimeout, setinterval alapok
#18 alkalom
augusztus 27.
Javascript haladó

Az óra eredménye: a résztvevők megismerkednek a JS komplexebb rétegeivel, buktatóival, ezáltal figyelemmel lehetnek azok hatásaira, és használhatják az előnyeit.

  • OOP
  • Backtick
  • This
  • Global, local, window
  • Closure
  • Modulok
  • Event delegation, Event bubbling és Event propagation
  • npm
  • WAT
#19 alkalom
augusztus 29.
JS extrák, adattárolás, szerver oldal, trükkök

Az óra eredménye: a résztvevők képet kapnak a JS extra képességeiről és quirkjeiről, kitekintés a böngésző keretei közül, alapozás a frameworkökhöz.

  • AJAX – a web2 sarokköve, relevanciája manapság
  • Hol és milyen adatot tudunk tárolni?
  • Userkövetés
  • Szerver oldal: node.js
  • Dialektusok: TypeScript, CoffeeScript
#20 alkalom
szeptember 3.
Hosting

Az óra eredménye: a résztvevők képet szereznek arról, hogy hogyan fog az általuk fejlesztett weboldal vagy alkalmazás kikerülni az internetre, hogy a világ bármely pontjáról hozzáférjenek. Megismerik a klasszikus hosting megoldások és a cloudszolgáltatók közötti különbségeket.

  • Domain regisztráció
  • Tárhelyszolgáltatók
  • FTP
  • Cpanel
  • Cloud szolgáltatók
  • CI/CD
#21 alkalom
szeptember 5.
SEO és analitika: keresőoptimalizálás és aktivitásmérés

Az óra eredménye: a résztvevők megismerik a keresőoptimalizálás aspektusait, felhasználását, eszközeit. Átlátják a meghatározó paramétereket, hogyan lehetnek azokra befolyással, milyen forrásokból meríthetnek még példákat.

  • Mi az a SEO, miért fontos
  • Pagerank, Alexa
  • Alapszabályok, status quo, etikus és etikátlan használat
  • Támogató eszközök (domain, url, sebesség, id, szemantikus html)
  • Aktivitáskövetés: Google Analytics, Hotjar és mások
  • A/B tesztek
  • 404 oldalak
  • Robots.txt
  • Sitemap.xml
  • Meta tagek, open graph, twitter card
  • Google search console
  • Google lighthouse
#22 alkalom
szeptember 10.
Web performance: milyen hatása van, hogyan lehet mérni és javítani

Az óra eredménye: a résztvevők tisztában lesznek a performancia fontosságával, mire kell figyelni a fejlesztéskor és hogyan lehet tetten érni a rosszul teljesítő alkalmazásokat, milyen módszerekkel lehet megtalálni a gyenge pontokat.

  • Interjúkérdések
  • Webhint, lighthouse, webpagetest
  • console.timer
  • Dev tools perf
  • Web performance API, monitor, budget, testing optimization és monitoring
  • Dev tools network emulation
#23 alkalom
szeptember 12.
UX/UI alapok és akadálymentesítés

Az óra eredménye: a résztvevők megismerik az akadálymentesség fontosságát, hatását, célközönségét. Megismerkednek a főbb csapásirányokkal, azokat kontextusba helyezik.

  • Mi az UX/UI-tervezés
  • Felhasználóközpontú tervezés
  • Tervezési folyamat
  • Felhasználói kutatás
  • Használhatóság
  • Az akadálymentesítés fontossága
  • ARIA, WCAG
  • img alt, Billentyűzet-navigáció
  • Tesztelés
#24 alkalom
szeptember 17.
Tesztelés, minőségbiztosítás, clean code

Az óra eredménye: a résztvevők megismerkednek a szoftverfejlesztésben szükséges minőségbiztosítási követelményekkel és eszközökkel, azok fontosságával és a technológiai eszközök használatával.

  • Unit testing, code coverage, TDD
  • E2E testing, automated testing
  • Perfectpixel
  • Linting
  • Formatting
  • Code review
  • Refactoring
  • Advanced debug, breakpoints
#25 alkalom
szeptember 19.
Biztonság

Az óra eredménye: a résztvevők megismerkednek a webes biztonság világítótornyaival, milyen kulcsszavakra kell figyelni, milyen lehetőségek állnak rendelkezésre frontenden.

  • Mit tehetünk frontenden?
  • OWASP top 10
  • XSS
  • CSRF
  • CORS
  • SQL injection
  • Függőségek
  • Https
#26 alkalom
szeptember 24.
Frontend frameworkök és a Typescript

Az óra eredménye: a résztvevők megismerik azokat a keretrendszereket, amik JS segítségével lehetőséget nyújtanak weboldal vagy webalkalmazás készítéséhez.

  • Typescript
  • Angular
  • Next (React)
  • Vue
  • Egyéb alternatívák (htmx, qwik)
#27 alkalom
szeptember 26.
Frontend koncepciók és interaktív Q&A

Az óra eredménye: a résztvevők megismerik a különféle weboldal-készítési koncepciókat, előnyeiket és hátrányaikat, valamint technológiai lehetőségeket mindegyikre.

  • Összefoglaló az eddig elhangzottakról
  • Házi projekt értékelése
  • Koncepciók (MPA, SPA, PWA, SSR, SSG)
#28 alkalom
október 1.
Amit jó lett volna tudnom a pályám elején, egy frontend-fejlesztő napi rutinja
  • Tippek és trükkök
  • Karrierlehetőségek és interjú tippek
A kurzussal, a részvételi díjjal és a részletfizetési lehetőséggel kapcsolatos további részletekért jelentkezz most!