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.

Front-end

Back-end

Javascript

Wordpress

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.

Front-end: CSS transzformáció gyakorlati példa

A korábbi órákon elkezdtünk egy webshop design-t megvalósítani HTML és CSS technológiával. Megnéztünk pár CSS transzformációt is, amit itt használunk is, hogy megvalósítsunk egy egyedi design elemet.

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

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

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)

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)

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)

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)

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)

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

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

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

projekt II., HTTP

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

JavaScript Kurzus 9. óra (AJAX)

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.)

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

JavaScript Kurzus 11. óra (AJAX III.)

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)

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

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

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)

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)

Stream
Filerendszer műveletek

JavaScript Kurzus 16. óra (Node.js)

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)

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)

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

JavaScript Kurzus 19. óra (MongoDB II.)

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

JavaScript Kurzus 20. óra (Kliens app)

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

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

UI elemek

delete
update

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

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.)

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

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

pagination
limit
skip
mongodb query operátorok

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

vizsgamunka áttekintése
vizsga feladatok gyakorlása

A Back-end tanfolyam órái

Back-end Kurzus 1. óra

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

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)

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)

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)

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.)

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.)

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.)

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.)

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.)

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

Tábla
Oszlop
Sor

2. phpMyadmin

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

3. MySQL statement-ek

SELECT, INSERT, UPDATE, DELETE

Back-end Kurzus 11. óra (MySQL)

Adatmodellek

One-to-one
One-to-many
Many-to-many

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

MySQL

FOREIGN CONSTRAINT
INNER JOIN
LEFT JOIN

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

PHP template újra felhasználása

MySQL clause-ok:

WHERE
GROUP BY
HAVING
ORDER BY
LIMIT, OFFSET

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

MySQL query-k
Pagination

Back-end Kurzus 15. óra (Session)

User authentication
Session
Cookie

Back-end Kurzus 16. óra (Cookie)

Kedvencnek jelölés

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

Cookie unset
Kép feltöltése

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

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

Back-end Kurzus 19. óra (Composer)

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

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

namespace
autoloader
psr-4 szabvány

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

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

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

interface
closure
static method
globális változó

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

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)

filesystem loader
twig template szintaxis
dinamikus adat renderelése

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

MySQL view
array methodok

filter
map
reduce

A Front-end tanfolyam órái

Bevezetés a HTML-be I./1

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.

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.

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

Szöveg Szerkesztés
Címsorok
Float

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

Szöveg Szerkesztés
Címsorok
Float

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

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

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

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

Bootstrap I./1.

Carusel
card és card deck
gyors weblap felépités

Bootstrap I./2.

Carusel
card és card deck
gyors weblap felépités

Bootstrap II./1.

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

Bootstrap II./2.

bracket bootstrap snipet
bootstrap IMG + Divek
bootstrap dropdown menü

Bootstrap II./3.

bootstrap weblap felépitése
Card & card deck

Bootstrap III./1.

bootstrap Modal&Alarm

Bootstrap III./2.

bootstrap Modal&Alarm

Bootstrap III./3. - UTOLSÓ

bootstrap Modal&Alarm

Sass

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.

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.

Függvények
Tömbök
Objektumok

JavaScript alapok III.

onChange
onClick

JavaScript alapok IV.

Functions, EventListeners, gyakorlás

JavaScript alapok V.

Egy komplexebb javascript feladat, Jquery alapok

JavaScript alapok VI. - UTOLSÓ

Jquery szelektorok
jquery chaining
Scroll
gyakorlás

Komplett weboldal összerakása közösen

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

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

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

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

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

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

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

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.