Oktató videók

Ezekkel az oktató videókkal a Prooktatás tanulói vissza tudják nézni a képzés teljes órai anyagát.

Nyilvános példa videóink

Front-end: media-query használata

Hogyan használjuk a media query-t arra, hogy a weboldalon lévő objektumok változzanak a képernyőszélesség változtatásakor? A reszponzivitás talán legfontosabb része.

Javascript 2. óra: Tömb műveletek JS

Tömbműveletek

Többdimenziós tömbök
Müveletek tömbökkel
többdimenziós tömbök
for ciklus
több dimenziós tömbök bejárása

A JavaScript tanfolyam órái

JavaScript Kurzus 1. óra


Youtube Video Link
  • A Javascript bemutatása
  • Beágyaza és müködése egy HTML dokumentumban
  • Adatípusok bemutatása
    • String, (Szöveg)
    • Number, (Szám)
    • Array, (egy dimenzios Tömb)
    • Object (statikus objektum)
  • Aritmetikai operátorok bemutatás, alapmüveletek
  • Ízelítő
    • fügvények
    • események
    • DOM manipuláció

JavaScript Kurzus 2. óra


Youtube Video Link
  • Adattípusok
    • Primitív típusok (string, number, boolean, null, undefined)
    • Tömb
    • Objektum
  • Műveletek tömbbel (egy/több dimenziós)
    • Műveletek objektumokkal
    • Példa összetett adatstruktúrára

JavaScript Kurzus 3. óra (vezérlési szerkezetek, function)


Youtube Video Link

1. Vezérlési szerkezetek:

  • Ciklusok:
    • While
    • For
    • For-of
  • If/else, elseif statement
  • Switch statement

2. Function

  • Control flow fogalma
  • Function, mint subroutine
  • Function, mint matematikai függvény
  • First class function
  • Anoním function

JavaScript Kurzus 4. óra (események a böngészőben)


Youtube Video Link

1. Kliens oldali alkalmazások felépítése

  • Action
  • State
  • Render

2. Reagálás eseményekre

  • Click, submit, hover, mousemove

3. Elementek kiválasztása a document object-ből

  • getElementById, querySelector, querySelectorAll function-ök

JavaScript Kurzus 5. óra (event object)


Youtube Video Link

1. Adatok az event object-ben

  • preventDefault function
  • event.target
  • input mezők adatainak kinyerése

2. Példa feladatok

JavaScript Kurzus 6. óra (array methodok)


Youtube Video Link

1. Higher order function fogalma

  • Map
  • Filter
  • Reduce

2. Adatok

  • leképezése,
  • szűrése,
  • aggregálása procedurális és funkcionális módszerekkel

JavaScript Kurzus 7. óra (projekt)


Youtube Video Link

1. Kliens oldali alkalmazás építése

  • Erőforrás listázása
  • Létrehozása

JavaScript Kurzus 8. óra (projekt II., HTTP)


Youtube Video Link

projekt II., HTTP

  1. Kliens oldali alkalmazás építése - Erőforrás felülírása - Törlése
  2. A HTTP protokoll - Request method, path, header, body - Response header, body, status

JavaScript Kurzus 9. óra (AJAX)


Youtube Video Link

1. JSON fájlformátum célja, szintaktikája

2. JS Engine működése:

  • Stack
  • Web api-k
  • Callback queue
  • Event loop

3. Aszinkron JavaScript fogalma

4. XMLHttpRequest

JavaScript Kurzus 10. óra (AJAX II.)


Youtube Video Link

  1. Aszinkron kérések XMLHttpRequest objecttel és callback function-nel
  2. Callback hell/pyramid of doom
  3. Aszinkron műveletek Promise-okkal
  4. Promise chain
  5. Fetch API

JavaScript Kurzus 11. óra (AJAX III.)


Youtube Video Link

Bejelentkezési adatok küldése szerver oldalra

Bejelentkezési adatok küldése szerver oldalra Erőforrás kérése szerver oldalról

  • Callback function-nel
  • Promise chain-nel
  • Async function-nel

JavaScript Kurzus 12. óra (Nyelvi eszközök)


Youtube Video Link

  • Arrow function
  • Let, const
  • Try/catch
  • Programozási paradigmák

JavaScript Kurzus 13. óra (OOP, Node.js)


Youtube Video Link

1. Objektum orientált programozás

  • Function constructor
  • Class deklaráció
  • Switch statement

2. Node.js

  • Telepítés
  • REPL
  • Szerver készítése

JavaScript Kurzus 14. óra (Node.js)


Youtube Video Link

1. Node js module wrapper function

  • A wrapper function paraméterei
  • Exportálás és importálás module-ból/module-ba

2.Full stack rendszer felépítése

  • User interface
  • State
  • API
  • Router
  • Controller
  • Adattároló réteg

3. Erőforrások kiszolgálása szerver oldalról

  • Statikus tartalom (HTML és JS content)
  • Dinamikus tartalom (Termékek listája)

JavaScript Kurzus 15. óra (Node.js)


Youtube Video Link

  • Stream
  • Filerendszer műveletek

JavaScript Kurzus 16. óra (Node.js)


Youtube Video Link

  • NPM
  • Erőforrás törlése
  • Dinamikus HTML tartalom kiszolgálása
  • Cross site scripting támadás (XSS)

JavaScript Kurzus 17. óra (Express)


Youtube Video Link

  • Postman
  • Express framework
  • Middleware
  • Dinamikus komponens az URL-ben
  • JSON encoded body kiolvasása a request-ből
  • Query paraméterek kiolvasása a request-ből

JavaScript Kurzus 18. óra (MongoDB)


Youtube Video Link

  • SQL vs. NoSQL adatbázisok
  • Mongo Atlas konfiguráció
  • Erőforrás mentése és listázása

JavaScript Kurzus 19. óra (MongoDB II.)


Youtube Video Link

  • JSON API befejezése
  • updateOne
  • Array push
  • Aggregálás

JavaScript Kurzus 20. óra (Kliens app)


Youtube Video Link

  • UI elemek felépítése
  • REST endpointok összekötése a kliens applikációval

JavaScript Kurzus 21. óra (Kliens app II.)


Youtube Video Link

UI elemek

  • delete
  • update

JavaScript Kurzus 22. óra (Node.js website)


Youtube Video Link

  • Szerver oldalon generált HTML tartalom
  • Ejs template engine
  • Kód: https://drive.google.com/open?id=152j6wZx2EjLMD5Hj1rC2jL2A09bKAu_c

JavaScript Kurzus 23. óra (Node.js website II.)


Youtube Video Link

  • szerver oldali validáció
  • redirectelés
  • renderelés query paraméterek alapján

JavaScript Kurzus 24. óra (Node.js website III.)


Youtube Video Link

  • pagination
  • limit
  • skip
  • mongodb query operátorok

JavaScript Kurzus 25. óra (Összefoglalás)


Youtube Video Link

  • vizsgamunka áttekintése
  • vizsga feladatok gyakorlása

A Back-end tanfolyam órái

Back-end Kurzus 1. óra

Youtube Video Link
  • Apache szerver telepítése
  • PHP nyelv alapvető szintaxisa
  • Egyszerűbb, kiíró utasítások PHP nyelvben
  • PHP beállításai
  • PHP ini fájl

Back-end Kurzus 2. óra

Youtube Video Link
  • Adattípusok:
    • Primitív típusok (string, integer, boolean, null)
    • Tömbök (numerikus, asszociatív)
    • Műveletek tömbökkel (egy/több dimenziós)
    • Példa összetett adatstruktúrára

Back-end Kurzus 3. óra (vezérlési szerkezetek)

Youtube Video Link

1. Vezérlési szerkezetek:

  • Ciklusok:
    • While
    • For
    • For-of
  • If/else, elseif statement
  • Switch statement

2. Iterálás példa adatseten

3. Dinamikus adat kiírása HTML tartalomba

Back-end Kurzus 4. óra (function, HTTP)

Youtube Video Link

1. Function

  • Control flow fogalma
  • Function, mint subroutine
  • Function, mint matematikai függvény

2. Tömb műveletek

  • Tömbhöz új elem hozzáadása
  • Szűrés

3. A HTTP protokoll működése és használata a PHP-ban

  • Request method, path, header, body
  • Response header, body, status
  • PHP szuperglobális változók
  • Single entrypoint fogalma

Back-end Kurzus 5. óra (útvonalválasztó, adattárolás)

Youtube Video Link

1. Router (útvonalválasztó)

2. Adattárolás JSON file-ban

  • Ciklusok:
  • Create (erőforrás létrehozása)
  • Read (erőforrás kiolvasása)

3. HTTP redirect végrehajtása

Back-end Kurzus 6. óra (projekt I.)

Youtube Video Link

1. Szöveg keresése szöveges tartalomban

2. Egyedi azonosító generálása

3. Erőforrás törlése

Back-end Kurzus 7. óra (projekt II.)

Youtube Video Link

1. Erőforrás

  • Kikeresése egyedi azonosító alapján
  • Felülírása

2. Refaktorálás

  • Gyakran előforduló műveletek kiszervezése függvényekbe

Back-end Kurzus 8. óra (Objektum orientált programozás I.)

Youtube Video Link

1. Programozási paradigmák

  • Procedurális
  • Funkcionális
  • Objektum orientált

2. Class deklaráció

  • Property
  • Method
  • Setter method

3. Class példányosítás

  • Object felpopulálása adattal

Back-end Kurzus 9. óra (Objektum orientált programozás II.)

Youtube Video Link

1. Class deklaráció

  • Konstrukor
  • Chainable setter method
  • Getter method

2. Objektum kompozíció

3. Objektumok tömbjének létrehozása

Back-end Kurzus 10. óra (MySQL I.)

Youtube Video Link

1. Relációs adatbázis kezelő rendszerek ismérvei

  1. Tábla
  2. Oszlop
  3. Sor

2. phpMyadmin

  1. Adatbázis és tábla létrehozása
  2. Adattípusok

3. MySQL statement-ek

  1. SELECT, INSERT, UPDATE, DELETE

Back-end Kurzus 11. óra (MySQL)

Youtube Video Link

Adatmodellek

  1. One-to-one
  2. One-to-many
  3. Many-to-many

Back-end Kurzus 12. óra (MySQL III.)

Youtube Video Link

MySQL

  • FOREIGN CONSTRAINT
  • INNER JOIN
  • LEFT JOIN

Back-end Kurzus 13. óra (MySQL IV.)

Youtube Video Link

PHP template újra felhasználása

MySQL clause-ok:

  • WHERE
  • GROUP BY
  • HAVING
  • ORDER BY
  • LIMIT, OFFSET

Back-end Kurzus 14. óra (MySQL V.)

Youtube Video Link

  • MySQL query-k
  • Pagination

Back-end Kurzus 15. óra (Session)

Youtube Video Link

  • User authentication
  • Session
  • Cookie

Back-end Kurzus 16. óra (Cookie)

Youtube Video Link

  • Kedvencnek jelölés

Back-end Kurzus 17. óra (File upload)

Youtube Video Link

  • Cookie unset
  • Kép feltöltése

Back-end Kurzus 18. óra (Jelszókezelés)

Youtube Video Link

  • Regisztráció
  • Felhasználó bizalmas adatainak tárolása

Back-end Kurzus 19. óra (Composer)

Youtube Video Link

  • Composer init, require, remove parancsok
  • Nikic/fast-route útvonalválasztó package
  • REST API

Back-end Kurzus 20. óra (Composer II.)

Youtube Video Link

  • namespace
  • autoloader
  • psr-4 szabvány

Back-end Kurzus 21. óra (OOP 2)

Youtube Video Link

  • extendelési hierarchia
  • kompozíció vs. öröklődés
  • interface
  • plugin architektúra

Back-end Kurzus 22. óra (OOP 2 II.)

Youtube Video Link

  • interface
  • closure
  • static method
  • globális változó

Back-end Kurzus 23. óra (Fastruktúrák)

Youtube Video Link

  • git kezelés alapjai
  • rekurzió
  • fa struktúra felépítése
  • műveletek fastruktúrákkal

Back-end Kurzus 24. óra (Twig template engine)

Youtube Video Link

  • filesystem loader
  • twig template szintaxis
  • dinamikus adat renderelése

Back-end Kurzus 25. óra (Array methods)

Youtube Video Link

  • MySQL view
  • array methodok
    • filter
    • map
    • reduce

A Front-end tanfolyam órái

Bevezetés a HTML-be I./1

Youtube Video Link
  • float
  • class
  • multi class
  • inline, outline , css használta
  • HTML skeleton
  • Bracket bővitményeket telepitettük
  • Hiba kereses
  • Boxmodel - személtetés
  • paddig - margin (ismerkedés)
  • Egyszerű feladattal lett személtetve ,hogyan müködnek a Divek

Bevezetés a HTML-be I./2.

Youtube Video Link
  • float
  • class
  • multi class
  • inline, outline , css használta
  • HTML skeleton
  • Bracket bővitményeket telepitettük
  • Hiba kereses
  • Boxmodel - személtetés
  • paddig - margin (ismerkedés)
  • Egyszerű feladattal lett személtetve ,hogyan müködnek a Divek

Bevezetés a HTML-be I./3.

Youtube Video Link
  • float
  • class
  • multi class
  • inline, outline , css használta
  • HTML skeleton
  • Bracket bővitményeket telepitettük
  • Hiba kereses
  • Boxmodel - személtetés
  • paddig - margin (ismerkedés)
  • Egyszerű feladattal lett személtetve ,hogyan müködnek a Divek

Bevezetés a HTML-be II./1.rész

Youtube Video Link
  • Szöveg Szerkesztés
  • Címsorok
  • Float

Bevezetés a HTML-be II./2.rész

Youtube Video Link
  • Szöveg Szerkesztés
  • Címsorok
  • Float

Bevezetés a HTML-be III./1.rész

Youtube Video Link
  • táblázatok
  • listák (rendezett , rendezetlen ,dl)
  • ul -li menü

Bevezetés a HTML-be III./2.rész

Youtube Video Link
  • táblázatok
  • listák (rendezett , rendezetlen ,dl)
  • ul -li menü

Bootstrap I./1.

Youtube Video Link
  • Carusel
  • card és card deck
  • gyors weblap felépités

Bootstrap I./2.

Youtube Video Link
  • Carusel
  • card és card deck
  • gyors weblap felépités

Bootstrap II./1.

Youtube Video Link
  • Grid -rendszer
  • átlagos kérdések
  • container + fluid
  • Homok óra w-100 / w-50
  • row + col

Bootstrap II./2.

Youtube Video Link
  • bracket bootstrap snipet
  • bootstrap IMG + Divek
  • bootstrap dropdown menü

Bootstrap II./3.

Youtube Video Link
  • bootstrap weblap felépitése
  • Card & card deck

Bootstrap III./1.

Youtube Video Link
  • bootstrap Modal&Alarm

Bootstrap III./2.

Youtube Video Link
  • bootstrap Modal&Alarm

Bootstrap III./3. - UTOLSÓ

Youtube Video Link
  • bootstrap Modal&Alarm

Sass

Youtube Video Link
  • Miért is kell ez nekünk? Egy weboldal növekedésével a fájlok karbantartásához egyre több energiára van szükségünk. Míg a hosszabb PHP, illetve JavaScript kódok kezelésére már számtalan eszközt, módszert használunk, addig a CSS fájlok karbantartásával sajnos a legtöbben egyáltalán nem foglalkoznak. A stíluslapok az évek múlásával csak növekednek, pedig ma már több kiváló segédeszköz is a rendelkezésünkre áll. Nagyobb weboldalak készítése esetén hatalmas segítséget nyújthatnak a CSS előfeldolgozók, illetve ahogy angolul nevezzük, a CSS preprocessor-ok. Ezek közül a három legnépszerűbb a Less, a Stylus, illetve a Sass. Feladatuk, hogy egy kibővített CSS közeli szintaxissal, jobban kezelhető kódból a program elkészíti nekünk a böngészők által is értelmezhető hagyományos CSS kódokat. Remélem sikerült ízelítőt adnom a Sass-ban rejlő lehetőségekről. Mindenképpen szeretném bátorítani azokat, akik eddig nem használtak semmilyen CSS preprocessor-t, hogy adjanak egy esélyt a Sass-nak. Biztos vagyok benne, hogy a befektetett energia nagyon hamar megtérül!

Javascript alapok I.

Youtube Video Link

  • A javascript alapvető vezérlési szerkezetei, változók típusai.
  • Változók elnevezése.
  • Szekvenciák, szelekciók, iterációk.

Javascript alapok II.

Youtube Video Link

  • Függvények
  • Tömbök
  • Objektumok

JavaScript alapok III.

Youtube Video Link

  • onChange
  • onClick

JavaScript alapok IV.

Youtube Video Link

Functions, EventListeners, gyakorlás

JavaScript alapok V.

Youtube Video Link

Egy komplexebb javascript feladat, Jquery alapok

JavaScript alapok VI. - UTOLSÓ

Youtube Video Link

  • Jquery szelektorok
  • jquery chaining
  • Scroll
  • gyakorlás

Komplett weboldal összerakása közösen

Youtube Video Link

  • Oldal struktúrájának kialakítás
  • H tagok használata élesben
  • Komplett oldal kialakítása közösen elejétől a végéig

A WordPress tanfolyam órái

WordPress 1. alkalom

Youtube Video Link

  • A domain vásárlás és beállítás, tárhely és cPanel beállítások lehetőségek. WordPress vezérlő pult alap funkciói és alapfoglamai. Sablon feltelepítés és plug-in importálás. Testreszabás menüpontjai.Menű elrendezés. Hf: menü magyarosítás.

WordPress 2. alkalom

Youtube Video Link

  • Weboldal szerkesztés: widget-ek segítségével
  • 3 különböző builder használata
  • Block alapú szerkesztés
  • HTML alapú szerkesztés
  • Szabad widget beszúrások
  • Footer és Sidebar
  • A képek helyes feltöltése Médiatárba.

WordPress 3. alkalom

Youtube Video Link

Contactform7 plug-in beállításai(űrlapkészítés)

Egyéb plug-in-ok:

  • SEO- ALL IN ONE SEO
  • Webhelytérkép
  • Open Graph Protocol

SEO analitikai eszközei és módszerek.

WordPress 4. alkalom

Youtube Video Link

  • Blog Post és egyéb aloldal generálás logikája.
  • URL beállítási, cél: szép és logikus URL
  • Egyéb szükséges Plug-In-ok feltelepítése és beállítása.
  • GDPR beállítás
  • Nyelvesítés kényszerítése plug.in segítségével
  • Ellenőrzés
  • PHP 7.2 verzió frissítés

WordPress 5. alkalom

Youtube Video Link

  • WooCommerce feltelepítése
  • WooCommerce alapbeállítás elvégzése
  • Létrehozunk egy terméket
  • Fizetési lehetőségek áttkeintése

SEO barát elnevezések az adott termékhez és ágazathoz - Célzás szavakkal

HF: Hozz létre 2db terméket

WordPress 6. alkalom

Youtube Video Link

  • Barion bankkártyás fizetés bekötése
  • Jetpack alapbeállításai
  • A Jetpack trükkös funkciói: szükséges és az azon túli
  • Kategória beállítások
  • Cimkék fontossága
  • WooCommerce termék specifikációk lehetőségei és korlátai
  • Kérdések és válaszok
  • Összefoglalás

Bónusz órák

SEO tanóra + web analitika

Youtube Video Link

  • Mi mindent vesz figyelembe a Google az organikus lista összeállításánál, és ebből mi az, amire egy weboldal elkészítésénél mindenképp figyelnünk kell? Kereső optimalizálás a gyakorlatban.