Frontend fejlesztő - tanfolyam 47 600 dörzsölje. Loft Schoolból, képzés 3 hónap, Időpont 2023. november 28.

Vue.js Advanced Web Development

1. hét – Munkafolyamat

— Találkozunk a mentorral és a csoporttal.
— Webpack összeállítással elkészítjük a kiválasztott elrendezést a végleges projekthez.
— Az eredményt közzétesszük a Githubon, és beküldjük a mentornak ellenőrzésre.

Tanfolyam megnyitó
1. Hogyan zajlik az edzés (01:09:37)

Vue. Főbb jellemzők
1. Elmélet (04:49)
2. Hello World (06:20)
3. Eseménykezelés (02:38)

4. Több esemény kezelése (01:19)
5. Dinamikus értékek (01:30)
6. Bevezetés az irányelvekbe (05:40)
7. Rövidített irányelvek (00:37)
8. Módszerek paraméterekkel (01:36)
9. Eseménymódosítók (08:52)
10. Számított tulajdonságok (10:50)
11. Figyelők (06:02)
12. Munka az osztályokkal (03:37)
13. Munka a CSS-tulajdonságokkal (02:49)
14. DOM-elemek elérése (03:50)
15. Feltételes renderelés (04:46)
16. Renderelési listák (05:12)
17. Komponens létrehozása (04:16)
18. Helyi összetevők (02:44)
19. Adatreaktivitás (04:35)
20. Alkatrész tulajdonságai (03:52)
21. Slots (04:37)
22. Slots hatótávolsággal (04:52)
23. Egyéni események (04:27)
24. Teleportok (02:53)

Vue. Egyfájlos komponensek
1. A projekt telepítése. VUE-CLI (09:22)
2. Egyfájlos komponens (03:18)
3. Stílusokkal való munka (07:02)
4. Attribútumok és kezelők átadása (02:53)
5. Egyedi fájlok (01:26)
6. A komponens tulajdonságainak ellenőrzése (07:35)
7. Felhasználói események ellenőrzése (02:01)
8. Kétirányú adatkommunikáció (04:11)
9. Egyedi v-modell (05:51)
10. Életciklus horgok (07:08)
11. Szennyeződések (04:40)

NPM
1. Mi az npm? (05:50)
2. npm telepítése és frissítése (02:33)
3. Segítség az npm-ben (01:28)
4. Csomagok keresése és telepítése (04:24)
5. Csomagfüggőségek (02:09)
6. Manifest fájl package.json (03:02)
7. Csomagok eltávolítása és frissítése (03:02)
8. függőségek és fejlesztői függőségek (01:51)
9. Webpack és npx (04:04)
10. npm szkriptek (04:02)
11. npm, git és github (02:40)

Fonal
1. Fonal (07:07)

Webpack. Alapok
1. Elmélet (01:09)
2. Minimális konfiguráció és indítás (04:41)
3. Fájl elnevezése (02:34)
4. Rakodók (04:28)
5. Fejlesztői szerver (02:43)
6. Beépülő modulok (02:34)
7. Modulok keresése (03:18)
8. Sorsmaps (03:17)
9. Dev et al (02:42)
10. Modulok típusai (03:00)
11. Minimális összeszerelés (05:30)

ESLint. Konfiguráció áttekintése
1. Bevezetés (01:26)
2. Telepítés és indítás (03:10)
3. Hibajavítások (02:04)
4. Konfiguráció (05:21)
5. Kimeneti formátum (00:52)

Figma az elrendezéstervezőnek
1. Figma. Interfész (04:37)
2. Figma. Projektszervezés (01:32)

Flexbox
1. Bevezetés (00:45)
2. Flex konténer (01:43)
3. Főtengely-igazítás (01:37)
4. Tengelyek közötti igazítás (01:50)
5. Egyetlen elem igazítása (01:09)
6. Flex elem – konténer (00:53)
7. Tengelyek iránya (03:18)
8. Többsoros konténer (02:54)
9. Többsoros tartalom igazítása (01:25)
10. Arányok (02:46)
11. Tömörítési arányok (01:24)
12. Alapméret (04:02)
13. Az elemek sorrendje (02:40)

GIT
1. Bevezetés (07:03)
2. A Git használatának első lépései (03:01)
3. Új tár létrehozása (01:09)
4. Fájlok hozzáadása a Git indexhez (figyelési terület) (06:49)
5. Kötelezettség létrehozása (07:17)
6. Végezze el a navigációt. Módosítások visszavonása (12:10)
7. Tipikus Git ciklus (03:34)
8. Elágazás Gitben (11:27)
9. Konfliktusok fiókok összevonásakor (06:06)
10. Ideiglenes (bejegyzés nélküli) adatmentés (05:25)
11. Távoli adattárak használata (20:04)
12. GitHub-oldalak használata projektek üzemeltetésére (04:31)

Vue. Workshop #1
1. A projekt kezdete (05:24)
2. Fejléc komponens (04:13)
3. Ikonkomponens (05:06)
4. Összetevők listájának megjelenítése (02:56)
5. Összetevő váltása (03:19)

2. hét – Vue.js

— Az elrendezést adaptívvá tesszük.
— A „Skills” blokkot megvalósítjuk a Vue.js-ben.
— A Vue.js-ben megvalósítjuk a „Saját projektek” blokkot.
— A „Slider for reviews” blokkot a Vue.js beépülő modul segítségével valósítjuk meg.

Mesekönyv
1. Telepítés (01:56) 
2. Első történet (04:35)
3. Összetevő csatlakoztatása (01:24)
4. Konfig bővítés (04:26)
5. Általános stílusok (02:08)
6. Az összetevő története (05:23)
7. CDD (04:16)
8. Összetevő létrehozása (02:28)
9. Összetevő alkalmazása (02:29)
10. Eseménynaplózás (03:29)
11. Háttér kiegészítő (01:41)
12. Addon Knobs (02:28)
13. Addon forrás (02:17)
14. Következtetés (01:11)

JavaScript - ES6
1. Karakterlánc interpoláció (07:39)
2. A módszerleírások egyszerűsítése (13:35)
3. Alapértelmezések (30:08)
4. Megsemmisítési feladat: Objektumok (07:30)
5. Új funkciók és régi böngészők (13:07)

Aszinkron a JavaScriptben
1. Időzítők (23:44)
2. Képek betöltése (22:21)
3. Ígéretek (36:29)
4. AJAX (32:28)

Axios. Lekérdezési könyvtár
1. Bevezetés (02:23)
2. Kérelem küldése (02:12)
3. Konfiguráció áttekintése (04:30)
4. Kérelem törzse (01:43)
5. Alapértelmezett beállítások (01:38)
6. Elfogók (02:11)
7. Szolgáltatások (02:33)
8. async-wait (01:18)

Vue. Workshop #2
1. Előkészület (02:39)
2. Összetevő csatlakoztatása (02:16)
3. Vezérlő kimenet (02:38)
4. Haladás komponens (05:09)
5. Kérés a szerverhez (06:38)
6. Adatkimenet (05:55)

3. hét – Natív JavaScript

– Létrehozzuk az adminisztrációs panelt.
— Tanulmányozzuk a Storybookot és alkalmazzuk projektünkben.
— Elvégezzük a projektnyomtatványok szükséges feldolgozását (validálását).

VueRouter. Útválasztás a böngészőben
1. Bevezetés (04:31)
2. Linképítés (02:41)
3. Szoftveres navigáció (02:35)
4. Útvonal paraméterei (04:42)
5. Paraméterek, mint tulajdonságok (00:49)
6. Speciális beállítások és 404 (03:29)
7. Beágyazott útvonalak (03:23)
8. Tevékenységi órák (02:37)
9. Különféle útválasztó-nézetek (01:08)
10. Dinamikus importálás (02:00)
11. Gyönyörű URL (02:16)

Vuex. Államvezető
1. Bevezetés (01:13)
2. Csatlakozás (02:30)
3. Akció (02:27)
4. Mutációk (02:16)
5. Getters (02:02)
6. Alkalmazás a gyakorlatban (08:07)
7. Asszisztensi funkciók (02:59)
8. Modulok (05:18)
9. Dinamikus modulok (01:38)
Kérdés válasz

Vue. Workshop #3
1. Elrendezés (04:33)
2. Adatkimenet (02:42)
3. Felkészülés az animációra (02:14)
4. Gomb kijelző (03:45)
5. További tartalom betöltése (11:38)
6. Dia megjelenítése átmenet után (02:17)

4. hét – Vue.js, SPA

— Az adminisztrációs panelen implementáljuk a SPA-t.
— Az adatokkal való munkavégzést az alkalmazástárolón keresztül tanulmányozzuk
— ajaxot használunk az API-val való kommunikációhoz, a kliens-szerver interakciók beállításához.

Engedélyezés. Tokenek
1. Engedélytípusok (04:20)
2. GitHub OAuth (01:42)
3. GitHub alkalmazás létrehozása (02:28)
4. Token fogadása (08:38)
5. Adatok tárolása kódban (01:46)
6. Útvonalvédelem (04:13)

Vue. Workshop #4
1. Előkészület (01:33)
2. Művelet létrehozása (02:30)
3. Letöltés állapota (04:01)
4. Kérés (02:27)
5. Ismétlődések eltávolítása (03:29)
6. Útvonalvédelem (03:23)
7. Kijelentkezés (00:51)

5. hét – Gyakorlat

— Az elmentett adatokat az adminisztrációs panelről a nyitóoldalra jelenítjük meg.
— Teszteljük az alkatrészeket.
— Csoportmunka egy projekten mentorral.

Vue.js. Összetétel API
1. Bevezetés (01:29)
2. Általános példa (03:57)
3. Dal funkció (01:51)
4. Reaktív funkció (00:55)
5. toRef függvény (01:35)
6. toRefs függvény (00:58)
7. Számított tulajdonságok (00:56)
8. óra funkció (01:41)
9. watchEffect funkció (03:14)
10. csak olvasható funkció (00:40)
11. Teszt funkciók (02:30)
12. unref függvény (01:27)
13. Életciklus horgok (00:58)
14. Példa. Projekt áttekintése (00:53)
15. Példa. Betöltési funkció (01:20)
16. Példa. Kategóriák (02:20)
17. Példa. Kezdeti szűrés (02:46)
18. Példa. Szűrőváltás (02:11)
19. Példa. Egyéb szűrési funkciók (02:03)
20. Példa. Rendezési mód (03:05)
JS kód tesztelése
1. Bevezetés (16:05)
2. Jest (15:47)
3. A tesztek előnyei (09:01)
4. Lefedettség (10:02)

Vue.js. Alkatrész tesztelés
1. Csomagok összeállítása (04:39)
2. Alkatrészcsomagolás (04:13)
3. Mit kell tesztelni (02:48)
4. Első teszt (05:25)
5. A kibocsátási esemény ellenőrzése (03:44)
6. Tulajdonságok átadása (02:58)
7. Munka űrlapelemekkel (05:42)
8. Általános beállítások (01:15)
9. Moki (05:04)
10. Könyvtárak összekapcsolása (02:32)
11. Akcióteszt (03:26)
12. Az üzlet tesztelése (02:53)
13. Tesztelés képekkel (03:08)

Tesztelés. Moki
1. Makett készítése (02:39)
2. Munka érvekkel (01:39)
3. Visszatérési érték (02:57)
4. Modulok (04:24)
5. Időzítők (02:05)

Vue. Workshop #5
1. Egyszerű komponens (03:03)
2. Alkatrész üzlettel (05:21)
3. Tesztelés. Előkészület (03:20)
4. Tesztelés. Toggler (02:38)
5. Tesztelés. Problémák (05:08)

6. hét – A projekt befejezése

– Véglegesítjük a projektet.
— A projektet mentorok általi felülvizsgálatra nyújtjuk be.
— Osztályozó oklevelek.

Hogyan szerezz munkát az informatikában: tippek és trükkök
1. Hogyan lehet IT területen elhelyezkedni? Keresés, interjú és próbaidő (42:21)
2. Hogyan találhat távmunkát és szabadúszó megrendeléseket? (20:12)
3. Első munkahely az informatikában – hogyan viselkedjünk? Gyakorlat, hivatalos foglalkoztatás és „étkezésért” munka (14:11)
4. Hogyan lehet letenni a próbaidőt? (27:10)
5. Hogyan készüljünk fel egy interjúra egy FAANG cégnél (08:52)
6. A weboldal betöltésének folyamata (25:19)
7. Programozói interjú – minden, amit tudnod kell (01:24:07)
8. Probléma megoldása egy programozói interjúból (19:36)
9. Interjú a frontend fejlesztőivel (01:37:17)

React.js webes alkalmazásfejlesztés

1. hét – A React.js bemutatása

— Megismerjük a tanfolyam csapatát és az osztálytársakat.
— JSX és virtuális DOM tanulása a Reactben.
— Az adatátvitel komponensszemléletét és módszereit mérlegeljük.

Ismerős
1. Pályanyitás (05:41)

I React.js
1. Mi az a React (07:05)
2. Virtuális DOM (02:46)
3. JSX (06:10)
4. Renderelés feltételekkel (05:11)
5. Munka a listákkal (02:45)
6. Összetevők (02:41)
7. Kellékek (01:45)
8. Állapot (06:45)
9. Események (02:26)
10. React Devtools (03:58)

II React.js
1. Életciklus-módszerek (05:19)
2. Összetevők – funkciók (01:29)
3. Pure Component (02:54)
4. Szintetikus események (01:42)
5. Munka űrlapokkal (02:51)
6. Hibakezelés (01:39)

1. feladatok elemzése
1. Workshop #1 (30:36)

2. hét - React.js minták, tesztelés

— Tanulmányozzuk az összetevő osztály komponenseit, elemeit és példányait.
— Figyelembe vesszük az Újrakompozíció könyvtárat, a magas sorrendű összetevőket és a Render Props mintákat.
— Megértjük a tesztek előnyeit, tanulmányozzuk a Jest, Enzyme, Snapshots alkalmazást.

III Reagálj
1. Bevezető (01:43)
2. PropTypes (10:18)
3. Kontextus (05:19)
4. Hivatkozások (05:18)
5. Portálok (05:02)
6. Horgok (10:42)

IV React.js
1. Magasrendű alkatrészek (HOC) – Magasabb rendű alkatrészek (10:33)
2. Átirányítás (HOC) (04:31)
3. Kellékminta renderelése (05:25)
4. HOK Library Recompose (10:32)
5. Profilalkotás (04:02)

Tesztelés
1. Bevezető (05:06)
2. Tesztfutó (02:51)
3. DSL tesztelése (08:41)
4. Enzim (06:57)
5. Pillanatképek (03:09)
6. Tesztelő saga (05:01)
7. React Testing Library (06:32)

2. feladatok elemzése
1. 2. workshop (27:54)

3. hét - Redux, útválasztás

— Tanulmányozzuk az útválasztást: Egyszerű útválasztás, Switch-es útválasztás, valamint beágyazott útválasztás.
— Ismerkedés a Redux könyvtárral: Store, Actions, Reduktorok, React-redux alapfogalmai és fogalmai.
— A köztes szoftver a Sideeffect kezelésének egyik módja.

Útválasztás a böngészőben
1. History API (02:48)
2. Egyszerű útválasztás (05:39)
3. Útválasztás a kapcsolóról (04:16)
4. Beágyazott útválasztás (05:32)
5. Privát útvonal (04:39)

Én Redux
1. Bevezető (04:07)
2. Áruház (05:03)
3. Akciók (02:17)
4. Reducers (07:56)
5. React-redux (03:26)

II Redux
1. Bevezető (03:11)
2. CreateActions (redux-actions) (09:13)
3. Köztes szoftver (07:54)
4. Műveletek kezelése (05:52)
5. Választók (06:17)
6. Újraválasztás (04:49)
7. Ducks (06:56)

3. feladatok elemzése
1. 3. workshop (39:13)

4. hét - Redux-saga

— A Redux-saga könyvtárát tanulmányozzuk. Ismételje meg a generátor* funkciókat. Tanuljuk meg, hogyan futtassuk őket párhuzamosan.
— Nézzük a Take módszert. Vizsgáljuk meg a kiválasztást, mint az Áruházból való adatok lekérésének módját.
— Keressük a React alkalmazás stílusának módjait. Tanulmányozzuk a ClassNames, StyledComponents, BrowserList, MaterialUI könyvtárakat.

Én Redux-saga
1. Bevezető (00:57)
2. Áttekintés (02:08)
3. Generátorok (04:11)
4. Saga hozzáadása (02:07)
5. Reakció akciókra (03:53)
6. Funkcióindítások (02:06)

II Redux-saga
1. Bevezető (00:27)
2. Effektusok párhuzamos előadása (03:41)
3. Hatálybalépés (02:45)
4. Hatás kiválasztása (02:04)
5. Effektusok törlése (04:05)

Stílusokkal való munka
1. Bevezető (01:34)
2. CRA stílusok (05:21)
3. Osztálynevek (06:32)
4. StyledComponents (07:11)
5. Böngészőlista (01:37)
6. Anyag UI (08:13)

4. feladatok elemzése
1. Workshop #4 (09:55)

5. hét – Űrlapok, CI & DI és ügyfélhibakezelés

— Megfontoljuk a Formik, Redux Forms, React Final Form könyvtárakat használó űrlapokkal való munkát.
— A gyártási kód minőségének biztosítására szolgáló módszereket mérlegelünk. Olyan eszközöket elemezünk, mint: Husky, TravisCI, HerokuNow.
— Egy sor hasznos könyvtárat tanulmányozunk a fejlesztéshez (Storybook, RamdaJS, Axios).
— A TypeScriptet fontolgatjuk.

Munka az űrlapokkal
1. Bevezető (05:07)
2. Formik (08:51)
3. Redux forma (06:22)
4. Végső reakcióforma (06:36)

CI & DI & Client hibakezelés
1. Bevezető (05:07)
2. Husky (02:32)
3. CI TravisCI használatával (03:32)
4. Telepítés a herokuba (04:57)
5. Rollbar (02:00)

Hasznos könyvtárkészlet a fejlesztéshez
1. Mesekönyv (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Gépirat (09:31)

5. feladatok elemzése
1. 5. workshop (13:17)

6. hét – Projektmunka

— A kérelmet kitöltjük és elküldjük felülvizsgálatra.

Hogyan szerezz munkát az informatikában: tippek és trükkök
1. Hogyan lehet IT területen elhelyezkedni? Keresés, interjú és próbaidő (42:21)
2. Hogyan találhat távmunkát és szabadúszó megrendeléseket? (20:12)
3. Első munkahely az informatikában – hogyan viselkedjünk? Gyakorlat, hivatalos foglalkoztatás és „étkezésért” munka (14:11)
4. Hogyan lehet letenni a próbaidőt? (27:10)
5. Hogyan készüljünk fel egy interjúra egy FAANG cégnél (08:52)
6. A weboldal betöltésének folyamata (25:19)
7. Programozói interjú – minden, amit tudnod kell (01:24:07)
8. Probléma megoldása egy programozói interjúból (19:36)
9. Interjú a frontend fejlesztőivel (01:37:17)