Frontendfejlesztés az alapoktól — élő online kurzus azoknak, akik el szeretnék sajátítani a frontend fejlesztést | robot_dreams
Jelentkezem
élő, online kurzus

Frontendfejlesztés az alapoktól

Széll Csaba

Senior Frontend Developer, Tech Leader
@ Starschema

Bővebben
Időpont: június 13. – október 1.
Menetrend:

28 alkalom

kedd és csütörtök

18:00–19:30

élő, online frontendfejlesztés-kurzus kezdőknek

Az első lépésektől kezdve vezetünk be a frontendfejlesztés gyakorlatába, ami a leglátványosabb része a teljes szoftverfejlesztési folyamatnak.

Megtudod, hogyan készíthetsz izgalmas és részletgazdag weboldalakat HTML-, JavaScript- és CSS-ismeretekkel. Részletesen foglalkozunk a szövegstrukturálással, a beágyazott tartalmakkal, a reszponzív dizájnelemekkel és az oldalnavigációval.

Olyan elengedhetetlen szakmai ismereteket szerzel, mint a SEO-használat és az akadálymentesítés. A képzés végére átfogó képet nyersz a frontendfejlesztés világáról és az előtted álló lehetséges karrierlehetőségekről.

Izgalmasnak hangzik?
Neked ajánljuk a kurzust, ha:
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.

Lépj szintet!
Nyerj átfogó frontendfejlesztői tudást

A lenyűgöző weboldalak biztos HTML-, CSS- és JavaScript-alaptudásra épülnek. A képzésen saját projekt segítségével mélyíted el az órákon tanultakat, hogy a folyamatosan bövülő webfejlesztői technológiához és aktuális trendekhez gond nélkül alkalmazkodhass a jövőben.

Szerezz a piacon egyedülálló skilleket

Egyre nagyobb hangsúlyt nyer a webfejlesztésben az akadálymentesítés, a SEO-ismeret és a biztonság. Az IT-csapat számára pótolhatatlan szerepet tölthetsz be, ha egy személyben ismered és alkalmazod a munkád során a fejlesztés mindezen funkcióit.

Készülj fel a hétköznapokra

Ahány csapat, annyi frontend framework, weboldalkészítési koncepció és webperformancia-probléma. Legyen bármilyen változatos a felhozatal, a kurzus végére nem fogod elveszettnek érezni magad, amikor egy új módszertannal állsz szemben a munkád vagy egy állásinterjú során.

A kurzusról
01
Frontendfejlesztés-alapok

Ismerd meg a szoftverfejlesztés leglátványosabb részét, ahol a teljes IT-csapat munkája testet ölt és amivel felhasználók tömegei találkoznak nap mint nap! Használd magabiztosan a webfejlesztés folyamatosan megújuló eszköztárát!

02
Gyakorlat

Tedd próbára a gyakorlatban a kreativitásodat és a tanultakat saját projektek segítségével, és láss rá a webfejlesztő mindennapi rutinjára és az élesben fellépő hibákra szakértői segítséggel!

03
Karrierfejlesztés

Kerülj képbe a legaktuálisabb webfejlesztői interjúkérdésekkel, ismerd meg, hogy mi a legfontosabb a techcégek számára egy jelöltben, és láss rá a specializációs lehetőségekre!

Előadó
Széll Csaba
LinkedIn-profil
25 éves frontendfejlesztői tapasztalattal rendelkezik a legváltozatosabb webes technológiák területén, karrierje során 18 különböző programozási nyelvvel dolgozott már.
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 fejlesztését vezette 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.
Program
01
június 13.
Bevezetés a frontendkurzusba: célkitűzés, elhelyezés, technológiák
  • 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ő)
02
június 18.
HTML-alapok: struktúra, szintaktika, felépítés és a fontosabb feature-ök
  • 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
03
június 20.
Verziókövetés, git, GitHub, GitLab
  • Mi az a git, és mire jó?
  • Git szolgáltatók: Github, Gitlab
  • Alapparancsok
  • PR, code review, mint napi rutin
  • Git commit
04
június 25.
CSS-alapok: osztályok, propertyk, selectorok, box model.
  • 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
05
június 27.
Szövegstrukturálás és formázási lehetőségek
  • 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
06
július 2.
Formok, azaz űrlapok: formázás, validálás, küldés.
  • 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
07
július 4.
Beágyazott tartalmak, képek, videók és más
  • 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
08
július 16.
Navigációs lehetőségek
  • „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
09
július 18.
Reszponzív design, tablet, mobil, watch, nyomtató
  • 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
július 23.
Flexbox és grid
  • Browser wars, caniuse.com
  • A frametől a flex/grid-ig
  • Flexbox CSS propertyk
  • Grid CSS propertyk
11
július 25.
CSS frameworkök, preprocesszorok
  • CSS-módszertanok: BEM, OOCSS
  • Bootstrap, materialize, bulma, foundation, tailwind, stb
  • CSS preprocesszorok: sass, less
12
július 30.
Haladó CSS-használat: animáció, változók, számítások és függvények
  • 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
augusztus 1.
Javascript bevezető
  • 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
augusztus 6.
Javascript alapok
  • Szintaxis
  • Fenntartott szavak
  • Változók
  • Ciklusok
  • Feltételek
  • Függvények / lambdák / arrow functions
15
augusztus 8.
Lehetőségek komplex adattípusokkal
  • Tömbök és tömbműveletek
  • Objektumok és objektumműveltetők
  • Beépített függvények, Math, Intl
16
augusztus 13.
Átjárhatóság a HTML és a JS között
  • document.querySelector
  • addEventListener
  • Mi az a HTML "NODE"?
  • DOM manipuláció
17
augusztus 15.
A JS és a párhuzamos működés
  • Aszinkron működés
  • „Non-blocking”
  • Event loop, event queue
  • Egyedi események
  • Settimeout, setinterval alapok
18
augusztus 27.
Javascript haladó
  • OOP
  • Backtick
  • This
  • Global, local, window
  • Closure
  • Modulok
  • Event delegation, Event bubbling és Event propagation
  • npm
  • WAT
19
augusztus 29.
JS extrák, adattárolás, szerver oldal, trükkök
  • 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
szeptember 3.
Hosting
  • Domain regisztráció
  • Tárhelyszolgáltatók
  • FTP
  • Cpanel
  • Cloud szolgáltatók
  • CI/CD
21
szeptember 5.
SEO és analitika: keresőoptimalizálás és aktivitásmérés
  • 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
szeptember 10.
Web performance: milyen hatása van, hogyan lehet mérni és javítani
  • 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
szeptember 12.
UX/UI alapok és akadálymentesítés
  • 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
szeptember 17.
Tesztelés, minőségbiztosítás, clean code
  • Unit testing, code coverage, TDD
  • E2E testing, automated testing
  • Perfectpixel
  • Linting
  • Formatting
  • Code review
  • Refactoring
  • Advanced debug, breakpoints
25
szeptember 19.
Biztonság
  • Mit tehetünk frontenden?
  • OWASP top 10
  • XSS
  • CSRF
  • CORS
  • SQL injection
  • Függőségek
  • Https
26
szeptember 24.
Frontend frameworkök és a Typescript
  • Typescript
  • Angular
  • Next (React)
  • Vue
  • Egyéb alternatívák (htmx, qwik)
27
szeptember 26.
Frontend koncepciók és interaktív Q&A
  • Összefoglaló az eddig elhangzottakról
  • Házi projekt értékelése
  • Koncepciók (MPA, SPA, PWA, SSR, SSG)
28
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
REGISZTRÁCIÓ
 
 
 
Kötelezően kitöltendő mező