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ömb mű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

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

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)

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

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

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

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

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)

Adatmodellek

1. One-to-one
2. One-to-many
3. 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

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

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

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.