Jelentkezem
élő, online kurzus

Frontendfejlesztés az alapoktól

Széll Csaba

Senior Frontend Developer, Tech Leader @ Starschema

Bővebben
Időpont: HAMAROSAN

É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
IT-szakterületen dolgozol,

és szeretnéd bővíteni a szakmai repertoárodat, megoldást akarsz nyújtani a frontendproblémákra, és átfogó webfejlesztői tudással akarsz kulcsfigurájává válni az IT-csapatnak.

üzleti területen dolgozó szakember vagy,

és hatékonyabb döntéseket szeretnél hozni a webfejlesztés területén, legyen szó marketingről, adatvizualizációs kérdésekről, minőségi webes tartalmak gyártásáról vagy állásinterjú-szituációkról.

frissen végzett diplomás vagy,

és mielőbb beindítanád a karriered, ezért több gyakorlati tudásra vágysz, aktuális interjúhelyzetekre és valós frontend problémákra szeretnél felkészülni szakértői útmutatással.

Pályafutásod útiterve:
Most
Kezdő Még nincs releváns frontend tapasztalatod
3 hónap után
Hard skillek Gyakorlati és elméleti alapok, saját projekt
6 hónap után
Junior br. 800.000–1.200.000 Ft
1 év után
Medior br. 1.200.000–1.450.000 Ft
2–3 év után
Senior br. 1.450.000–2.000.000 Ft

2022. október (Forrás: Bluebird IT Salary Guide)
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
Bevezetés a frontendkurzusba: célkitűzés, elhelyezés, technológiák
  • A kurzus céljának bemutatása: elérhető képességek, stabil alapok és széles látókör
  • Karrierlehetőségek bemutatása
  • Tematika bemutatása
  • Miért jó a frontenddel kezdeni?
  • A frontend szerepe, sokfélesége
  • Frontendtörténelem: eredettörténet
  • Kapcsolódó szakmák: backend, UX/design, tesztelés, marketing, tartalommenedzsment
  • Specializációk: sitebuilder, üzleti logika/viselkedés
  • Fő (HTML, CSS, JavaScript) és másodlagos technológiák (TS, frameworkök, webserver)
  • A webes frontendfejlsztés alapjai, internet/intranet, http, böngésző
  • Mi történik, ha beírunk egy internetcímet a böngészőbe és entert nyomunk?
  • Analógiák, angol kifejezések
02
HTML-alapok: struktúra, szintaktika, felépítés és a fontosabb feature-ök
  • Fejlesztői környezet telepítése (Notepad vs. VSCode)
  • Egy új HTML-fájl létrehozása és megtekintése böngészőben
  • A Dev tools Chrome-ban és Firefoxban
  • A HTML-szabvány, hibatűrés, ACID-teszt
  • A HTML szintaktikája és struktúrája (head, body, fa-struktúra / DOM tree)
  • Gyakran használt elemek (tagek)
  • Attribútumok szerepe: bemenő, kimenő
  • Mi az a szemantikus HTML? Miért fontos?
  • Táblázatok, formok
  • Navigáció: oldalon belül és kívül
  • Legfontosabb attribútum: class
03
Verziókövetés, git, GitHub, GitLab
  • Mi az a git? Mire kell, mire jó?
  • Gitszolgáltatók: GitHub, GitLab
  • Alapparancsok
  • PR, code review mint napi rutin
  • Hozzunk létre egy GitHub-fiókot
  • Töltsük fel az elkészült HTML-t
04
CSS-alapok: osztályok, propertyk, selectorok, box model
  • Miért a legfontosabb a class?
  • Class -> CSS-osztály (.)
  • ID -> CSS-osztály (#)
  • CSS-szintaktika
  • Inline style
  • Internal/external CSS
  • HTML és CSS szétválasztásának fontossága (szobák vs. tapéta): css zen garden
  • Box model, minden egy doboz
  • Legfontosabb CSS propertyk
  • Mérési egységek: px, em stb.
  • CSS selectorok
05
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
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 (appearance felülírás)
  • Űrlapok elküldése a backendnek
  • Rejtett mezők és szerepük
  • Ellenőrzés (validálás) és korlátai
07
Beágyazott tartalmak, képek és videók stb.
  • Képek (méretezés, elrendezés, háttérkép, lazy load, felbontásérzékenység)
  • Kép shadow: box-shadow vs. filter
  • SVG (vektoros vs. pixeles kép közötti különbség, korlátok, lehetőségek)
  • Grafikonok (HTML-alapon, SVG-alapon, CSS-alapon is van, csak kissé esetlen)
  • A HTML nem rajzolni való!
  • Canvas, 3D
  • Videó, audió
  • HTML-oldalban HTML-oldalak (iframe), videó/form/térkép stb.
  • PDF
  • Speciális: glyph-fontok
08
Navigációs lehetőségek
  • „nav” tag
  • „a” tag
  • Belső navigáció
  • Külső navigáció / új tabon
  • History (back)
  • Formázás, speciális selectorok: hover, focus, visited
  • Gombok használata navigálásra, ikongombok
  • Form is navigál
  • Dropdownmenük, footermenük (accessibility)
09
Reszponzív dizájn, tablet, mobil, watch, nyomtató stb.
  • A reszponzív design fontossága
  • Pixelek, dpi, ppi
  • Viewport meta tag
  • Responsive vs. adaptive, mobile-first vs. desktop-first
  • Hányféle felbontás létezik? Fizikai méret vs. felbontás.
  • Nagyobb választóvonalak (tablet / telefon / desktop)
  • Media selector reszponzivitás kezeléséhez
  • Egyéb media selectorok (dark mode, print, motion landscape stb.)
10
Flexbox és grid
  • Browser wars, caniuse.com
  • Történet frame -> table -> float -> flex/grid
  • Mire jók ezek?
  • Flexbox CSS propertyk
  • Grid CSS propertyk
11
CSS frameworkök, preprocesszorok
  • CSS-módszertanok, BEM, OOCSS stb.
  • Bootstrap, materialize, bulma, foundation, tailwind stb.
  • CSS-preprocesszorok: sass, less stb., előnyök/hátrányok
12
Haladó CSS-használat: animáció, változók, függvények
  • Z-index, position, display
  • Animációk, keyframes, delay
  • Tranzíciók
  • Változók
  • Kalkuláció és egyéb függvények
  • Mit ki nem lehet hozni CSS-ből? Eye-candy példák
13
JavaScript-bevezető: történet, mire lett kitalálva, ma mire használjuk
  • Ez egy programozási nyelv!
  • Mikor és miért jött létre a JavaScript?
  • Evolúció, szabvány
  • JavaScript nyelvek: JavaScript, TypeScript, CoffeeScript stb.
  • JavaScript-környezetek: node.js, browser stb.
  • Internal/external JavaScript
  • Defer, module, betöltési sorrend, futási sorrend
  • Szintaxis
  • Adattípusok
  • HTML és JavaScript közötti átjárás
  • Weboldal vs. webalkalmazás
  • Non-blocking működés
14
Programozás JavaScripttel
  • Változók
  • Tömbök, objektumok, map, set
  • Ciklusok
  • Feltételek
  • Függvények / lambdák / arrow functions
  • Beépített függvények, math
15
DOM-manipuláció JavaScripttel
  • innerHTML
  • querySelector
  • Styling, addClass
  • Események (klikk, rotate, dark mode stb.)
  • Cookie-k, localStorage, indexeddb, userkövetés
16
A JavaScript futási környezete
  • Non-blocking, aszinkron működés
  • Settimeout, setinterval alapok
  • Event loop
  • Egyedi események
  • A frontend backendje
17
Haladó JavaScript: scope, class, prototype
  • OOP
  • Backtick
  • This
  • Global, local, window
  • Closure
  • Modulok
  • Ajax
  • Event delegation
  • Event bubbling
  • Event propagation
  • npm
  • WAT
18
Hosting: amikor egy weboldal kikerül a domainre
  • Domainregisztráció
  • Tárhelyszolgáltatók
  • Ftp
  • Cpanel
  • Cloudszolgáltatók
  • CI/CD
19
SEO és analitika: keresőoptimalizálás és aktivitásmérés
  • Mi 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 stb.)
  • Aktivitáskövetés: Google Analytics, Hotjar stb.
  • A/B tesztek
  • 404 oldalak
  • Robots.txt
  • Sitemap.xml
  • Meta tagek, open graph, Twitter card
  • Google Search Console
  • Google Lighthouse
20
Webperformancia: milyen hatása van, hogyan lehet mérni, javítani
  • Interjúkérdés: lassú a weboldal, mit nyomozol?
  • SEO
  • Webhint, Lighthouse, WebPageTest stb.
  • Web performance API
  • Web performance monitor
  • Web performance budget
  • Web performance testing
  • Web performance optimization
  • Web performance monitoring
  • console.timer
  • Dev tools perf
  • Dev tools network emulation
21
UX/UI-alapok és akadálymentesítés
  • Mi a 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űzetnavigáció
  • Tesztelés
22
Tesztelés, minőségbiztosítás, clean code
  • Unit testing, code coverage, TDD
  • E2E testing, automated testing
  • Perfectpixel
  • Linting
  • Formatting
  • Code review
  • Refactoring
  • Haladó debug, breakpoints
  • Console
23
Biztonság
  • Mit tehetünk frontenden?
  • OWASP top 10
  • XSS
  • CSRF
  • CORS
  • SQL injection
  • Függőségek
  • Https
24
Frontend frameworkök és TypeScript
  • TypeScript
  • Angular
  • Next (react)
  • Vue
  • Egyéb alternatívák (htmx, qwik stb.)
25
Frontendkoncepciók áttekintése és a kurzus összefoglalása
  • Kérdések és válaszok és áttekintés az eddig elhangzottakról együttesen
  • Házi projekt értékelése
  • Koncepciók (MPA, SPA, PWA, SSR, SSG)
26
Egy frontendfejlesztő napi rutinja, karrierlehetőségek
  • Tippek és trükkök – Shortcuts
  • Karrierlehetőségek – Interjútippek
  • A kurzus lezárása
REGISZTRÁCIÓ
 
 
 
Kötelezően kitöltendő mező