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
  • for ciklus
  • Többdimenzió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üggvé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)

• Vezérlési szerkezetek
  • Ciklusok
    • While
    • For
    • For-of
  • If / else / elseif statement
  • Switch statement
• 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)

• Kliens oldali alkalmazások felépítése
  • Action
  • State
  • Render
• Reagálás eseményekre
  • Click, submit, hover, mousemove
• Elementek kiválasztása a document object-bőle
  • getElementById, querySelector, querySelectorAll function-ök

JavaScript Kurzus 5. óra (event object)

• Adatok az event object-ben
  • preventDefault function
  • event.target
  • input mezők adatainak kinyerése
• Példa feladatok

JavaScript Kurzus 6. óra (array methodok)

• Higher order function fogalma
  • Map
  • Filter
  • Reduce
• Adatok
  • leképezése
  • szűrése
  • aggregálása procedurális és funkcionális módszerekkel

JavaScript Kurzus 7. óra (projekt)

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

• JSON fájlformátum célja, szintaktikája
• JS Engine működése:
  • Stack
  • Web api-k
  • Callback queue
  • Event loop
• Aszinkron JavaScript fogalma
• 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)

• Objektum orientált programozás
  • Function constructor
  • Class deklaráció
  • Switch statement
• Node.js
  • Telepítés
  • REPL
  • Szerver készítése

JavaScript Kurzus 14. óra (Node.js)

• Node js module wrapper function
  • A wrapper function paraméterei
  • Exportálás és importálás module-ból/module-ba
• Erőforrások kiszolgálása szerver oldalról
  • Statikus tartalom (HTML és JS content)
  • Dinamikus tartalom (Termékek listája)
• Full stack rendszer felépítése
  • User interface
  • State
  • API
  • Router
  • Controller
  • Adattároló réteg

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)

• Vezérlési szerkezetek
  • Ciklusok: While, For, For-of
  • If/else, elseif statement
  • Switch statement
• Iterálás példa adatseten
• Dinamikus adat kiírása HTML tartalomba

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

• Function
  • Control flow fogalma
  • Function, mint subroutine
  • Function, mint matematikai függvény
• Tömb műveletek
  • Tömbhöz új elem hozzáadása
  • Szűrés
• HTTP protokoll működése
  • 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)

• Router (útvonalválasztó)
• Adattárolás JSON file-ban
  • Ciklusok
  • Create (erőforrás létrehozása)
  • Read (erőforrás kiolvasása)
• HTTP redirect végrehajtása

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

• Szöveg keresése szöveges tartalomban
• Egyedi azonosító generálása
• Erőforrás törlése

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

• Erőforrás
  • Kikeresése egyedi azonosító alapján
  • Felülírása
• Refaktorálás
  • Gyakran előforduló műveletek kiszervezése függvényekbe

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

• Programozási paradigmák
  • Procedurális
  • Funkcionális
  • Objektum orientált
• Class deklaráció
  • Property
  • Method
  • Setter method
• Class példányosítás
  • Object felpopulálása adattal

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

• Class deklaráció
  • Konstruktor
  • Chainable setter method
  • Getter method
• Objektum kompozíció
• Objektumok tömbjének létrehozása

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

• Relációs adatbázis kezelő rendszerek ismérvei
  • Tábla
  • Oszlop
  • Sor
• phpMyadmin
  • Adatbázis és tábla létrehozása
  • Adattípusok
• 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
  • map
  • filter
  • reduce

Bevezetés a HTML-be I./1

• float
• class
• multi class
• PHP beállításai
• 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
• PHP beállításai
• 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
• PHP beállításai
• 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. Nagyobb weboldalak készítése esetén hatalmas segítséget nyújthatnak a CSS előfeldolgozók, illetve a CSS preprocessor-ok. A három legnépszerűbb: Less, Stylus, Sass Feladatuk: kibővített CSS közeli szintaxissal, jobban kezelhető kódot készíteni a böngészőknek Bátorítás: próbáld ki a Sass-t!

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 áttekinté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.