Frontend developer - kurz 47 600 rub. z Loft School, školení 3 měsíce, Datum 28. listopadu 2023.
Různé / / November 29, 2023
Znalosti a dovednosti
Všechny potřebné znalosti pro frontend vývojáře.
Portfolio
2 působivé moderní a technologické projekty ve vašem portfoliu.
Osvědčení
Se skóre, které odráží vaši úroveň znalostí a míru dopadu.
Začátek kariéry
Garantujeme zaměstnání všem dobrým a výborným studentům.
Dávají znalosti, ne odpovědi. Rádi vysvětlují a dokážou sdělit složité informace srozumitelným jazykem. Náročné na kvalitu vašeho kódu: úkol neprojdete, dokud nebude váš kód dokonalý. Dobře rozumí ostatním lidem a vědí, jak najít přístup ke každému studentovi. Vždy připraven pomoci.
Pokročilý vývoj webu Vue.js
1. týden - Pracovní postup
— Setkáváme se s mentorem a skupinou.
— Pomocí sestavy webpacku vytvoříme vybraný layout pro finální projekt.
— Výsledek zveřejníme na Github a předáme jej mentorovi k ověření.
Zahájení kurzu
1. Jak trénink probíhá (01:09:37)
Vue. Klíčové vlastnosti
1. Teorie (04:49)
2. Ahoj světe (06:20)
3. Zpracování událostí (02:38)
4. Zpracování více událostí (01:19)
5. Dynamické hodnoty (01:30)
6. Úvod do směrnic (05:40)
7. Zkrácené směrnice (00:37)
8. Metody s parametry (01:36)
9. Modifikátory událostí (08:52)
10. Vypočítané vlastnosti (10:50)
11. Diváci (06:02)
12. Práce s třídami (03:37)
13. Práce s vlastnostmi CSS (02:49)
14. Přístup k prvkům DOM (03:50)
15. Podmíněné vykreslování (04:46)
16. Vykreslování seznamů (05:12)
17. Vytvoření komponenty (04:16)
18. Místní komponenty (02:44)
19. Reaktivita dat (04:35)
20. Vlastnosti součásti (03:52)
21. Sloty (04:37)
22. Sloty s rozsahem (04:52)
23. Vlastní události (04:27)
24. Teleporty (02:53)
Vue. Jednosouborové komponenty
1. Instalace projektu. VUE-CLI (09:22)
2. Složka jednoho souboru (03:18)
3. Práce se styly (07:02)
4. Předávání atributů a manipulátorů (02:53)
5. Jednotlivé soubory (01:26)
6. Ověření vlastností komponent (07:35)
7. Ověření uživatelských událostí (02:01)
8. Obousměrná datová komunikace (04:11)
9. Vlastní model v (05:51)
10. Lifecycle Háčky (07:08)
11. Nečistoty (04:40)
NPM
1. Co je npm? (05:50)
2. Instalace a aktualizace npm (02:33)
3. Pomoc s npm (01:28)
4. Vyhledání a instalace balíčků (04:24)
5. Závislosti balíčků (02:09)
6. Soubor manifestu package.json (03:02)
7. Odebírání a aktualizace balíčků (03:02)
8. závislosti a devDependencies (01:51)
9. Webpack a npx (04:04)
10. npm skripty (04:02)
11. npm, git a github (02:40)
Příze
1. Příze (07:07)
Webpack. Základy
1. Teorie (01:09)
2. Minimální konfigurace a spuštění (04:41)
3. Pojmenování souboru (02:34)
4. Nakladače (04:28)
5. Dev-server (02:43)
6. Pluginy (02:34)
7. Hledat moduly (03:18)
8. Sorsmaps (03:17)
9. Dev a spol (02:42)
10. Typy modulů (03:00)
11. Minimální montáž (05:30)
ESLint. Přehled konfigurace
1. Úvod (01:26)
2. Instalace a spuštění (03:10)
3. Opravy chyb (02:04)
4. Konfigurace (05:21)
5. Výstupní formát (00:52)
Figma pro návrháře rozložení
1. Figma. Rozhraní (04:37)
2. Figma. Organizace projektu (01:32)
Flexbox
1. Úvod (00:45)
2. Flex kontejner (01:43)
3. Zarovnání hlavní osy (01:37)
4. Zarovnání napříč osou (01:50)
5. Zarovnání jednoho prvku (01:09)
6. Flex element – kontejner (00:53)
7. Směr os (03:18)
8. Víceřádkový kontejner (02:54)
9. Zarovnání víceřádkového obsahu (01:25)
10. Proporce (02:46)
11. Kompresní poměry (01:24)
12. Základní velikost (04:02)
13. Pořadí prvků (02:40)
GIT
1. Úvod (07:03)
2. Začínáme s Git (03:01)
3. Vytvoření nového úložiště (01:09)
4. Přidávání souborů do indexu Git (oblast sledování) (06:49)
5. Vytvoření potvrzení (07:17)
6. Potvrdit navigaci. Zrušit změny (12:10)
7. Typický cyklus Git (03:34)
8. Větvení v Gitu (11:27)
9. Konflikty při slučování poboček (06:06)
10. Dočasné (bez potvrzení) uložení dat (05:25)
11. Práce se vzdálenými repozitáři (20:04)
12. Hostování projektů pomocí stránek GitHub (04:31)
Vue. Workshop #1
1. Začátek projektu (05:24)
2. Komponenta záhlaví (04:13)
3. Ikona (05:06)
4. Zobrazení seznamu součástí (02:56)
5. Přepnout komponentu (03:19)
2. týden - Vue.js
— Rozvržení přizpůsobíme.
— Implementujeme blok „Skills“ ve Vue.js.
— Implementujeme blok „Moje projekty“ ve Vue.js.
— Implementujeme blok „Slider for reviews“ pomocí pluginu Vue.js.
Pohádková kniha
1. Instalace (01:56)
2. První příběh (04:35)
3. Připojení komponenty (01:24)
4. Rozšíření konfigurace (04:26)
5. Obecné styly (02:08)
6. Příběh komponenty (05:23)
7. CDD (04:16)
8. Vytvoření komponenty (02:28)
9. Použití komponenty (02:29)
10. Protokolování událostí (03:29)
11. Doplněk pozadí (01:41)
12. Addon Knobs (02:28)
13. Zdroj doplňku (02:17)
14. Závěr (01:11)
JavaScript - ES6
1. Interpolace řetězců (07:39)
2. Zjednodušení popisů metod (13:35)
3. Výchozí (30:08)
4. Destructuring Assignment: Objects (07:30)
5. Nové funkce a staré prohlížeče (13:07)
Asynchronie v JavaScriptu
1. Časovače (23:44)
2. Načítání obrázků (22:21)
3. Sliby (36:29)
4. AJAX (32:28)
Axios. Knihovna dotazů
1. Úvod (02:23)
2. Odesílání požadavku (02:12)
3. Přehled konfigurace (04:30)
4. Text požadavku (01:43)
5. Výchozí nastavení (01:38)
6. Interceptors (02:11)
7. Služby (02:33)
8. async-wait (01:18)
Vue. Workshop #2
1. Příprava (02:39)
2. Připojení komponentu (02:16)
3. Kontrolní výstup (02:38)
4. Progress Component (05:09)
5. Žádost na server (06:38)
6. Výstup dat (05:55)
3. týden - Nativní JavaScript
— Vytváříme admin panel.
— Studujeme Storybook a aplikujeme ho v našem projektu.
— Provádíme potřebné zpracování (validaci) projektových formulářů.
VueRouter. Směrování v prohlížeči
1. Úvod (04:31)
2. Budování odkazů (02:41)
3. Softwarová navigace (02:35)
4. Parametry cesty (04:42)
5. Parametry jako vlastnosti (00:49)
6. Pokročilé možnosti a 404 (03:29)
7. Vnořené trasy (03:23)
8. Třídy aktivity (02:37)
9. Různá zobrazení směrovače (01:08)
10. Dynamické importy (02:00)
11. Krásná URL (02:16)
Vuex. Státní manažer
1. Úvod (01:13)
2. Připojení (02:30)
3. Akce (02:27)
4. Mutace (02:16)
5. Getters (02:02)
6. Aplikace v praxi (08:07)
7. Funkce asistenta (02:59)
8. Moduly (05:18)
9. Dynamické moduly (01:38)
Otázka odpověď
Vue. Workshop #3
1. Rozvržení (04:33)
2. Výstup dat (02:42)
3. Příprava na animaci (02:14)
4. Displej tlačítka (03:45)
5. Načítání dalšího obsahu (11:38)
6. Zobrazit snímek po přechodu (02:17)
4. týden – Vue.js, SPA
— Implementujeme SPA v administračním panelu.
— Studujeme práci s daty prostřednictvím aplikačního úložiště
— Ke komunikaci s rozhraním API používáme ajax, nastavujeme interakce klient-server.
Oprávnění. Tokeny
1. Typy oprávnění (04:20)
2. GitHub OAuth (01:42)
3. Vytvoření aplikace GitHub (02:28)
4. Příjem tokenu (08:38)
5. Ukládání dat v kódu (01:46)
6. Ochrana trasy (04:13)
Vue. Workshop #4
1. Příprava (01:33)
2. Vytvoření akce (02:30)
3. Stav stahování (04:01)
4. Žádost (02:27)
5. Odstraňování duplikátů (03:29)
6. Ochrana trasy (03:23)
7. Odhlásit (00:51)
5. týden - Cvičení
— Zobrazíme uložená data z administračního panelu na vstupní stránku.
— Testujeme komponenty.
— Skupinová práce na projektu s mentorem.
Vue.js. Composition API
1. Úvod (01:29)
2. Obecný příklad (03:57)
3. Funkce písně (01:51)
4. Reaktivní funkce (00:55)
5. funkce toRef (01:35)
6. funkce toRefs (00:58)
7. Vypočtené vlastnosti (00:56)
8. funkce hodinek (01:41)
9. funkce watchEffect (03:14)
10. funkce pouze pro čtení (00:40)
11. Testovací funkce (02:30)
12. funkce unref (01:27)
13. Lifecycle Háčky (00:58)
14. Příklad. Přehled projektu (00:53)
15. Příklad. Funkce načítání (01:20)
16. Příklad. Kategorie (02:20)
17. Příklad. Počáteční filtrování (02:46)
18. Příklad. Přepínání filtru (02:11)
19. Příklad. Další funkce filtrování (02:03)
20. Příklad. Způsob řazení (03:05)
Testování JS kódu
1. Úvod (16:05)
2. Jest (15:47)
3. Výhody testů (09:01)
4. Pokrytí (10:02)
Vue.js. Testování komponent
1. Nastavení balíčků (04:39)
2. Obálka součásti (04:13)
3. Co testovat (02:48)
4. První test (05:25)
5. Kontrola emisní události (03:44)
6. Přenos vlastností (02:58)
7. Práce s prvky formuláře (05:42)
8. Obecná nastavení (01:15)
9. Moki (05:04)
10. Připojování knihoven (02:32)
11. Testování akce (03:26)
12. Testování obchodu (02:53)
13. Testování s obrázky (03:08)
Testování. Moki
1. Vytvoření makety (02:39)
2. Práce s argumenty (01:39)
3. Návratová hodnota (02:57)
4. Moduly (04:24)
5. Časovače (02:05)
Vue. Workshop #5
1. Jednoduchá součást (03:03)
2. Komponenta s obchodem (05:21)
3. Testování. Příprava (03:20)
4. Testování. Přepínač (02:38)
5. Testování. Vydání (05:08)
6. týden - Dokončení projektu
— Dokončujeme projekt.
— Projekt předkládáme k posouzení mentorům.
— Klasifikační diplomy.
Jak získat práci v IT: tipy a triky
1. Jak získat práci v IT? Hledání, pohovor a zkušební doba (42:21)
2. Jak najít práci na dálku a zakázky na volné noze? (20:12)
3. První práce v IT – jak se chovat? Stáže, oficiální zaměstnání a práce „na jídlo“ (14:11)
4. Jak projít zkušební dobou? (27:10)
5. Jak se připravit na pohovor ve společnosti FAANG (08:52)
6. Proces načítání webové stránky (25:19)
7. Programátorský rozhovor - vše, co potřebujete vědět (01:24:07)
8. Řešení problému z rozhovoru s programátorem (19:36)
9. Rozhovor s frontend vývojářem (01:37:17)
Vývoj webových aplikací React.js
1. týden - Úvod do React.js
— Poznáváme tým kurzu a spolužáky.
— Učení JSX a Virtual DOM v Reactu.
— Zvažujeme komponentní přístup a způsoby přenosu dat.
Známost
1. Zahájení kurzu (05:41)
I React.js
1. Co je React (07:05)
2. Virtuální DOM (02:46)
3. JSX (6:10)
4. Vykreslování s podmínkami (05:11)
5. Práce se seznamy (02:45)
6. Komponenty (02:41)
7. Rekvizity (01:45)
8. Stát (06:45)
9. Události (02:26)
10. Reagovat Devtools (03:58)
II React.js
1. Metody životního cyklu (05:19)
2. Komponenty – funkce (01:29)
3. Čistá složka (02:54)
4. Syntetické události (01:42)
5. Práce s formuláři (02:51)
6. Zpracování chyb (01:39)
Analýza úkolů #1
1. Workshop č. 1 (30:36)
2. týden - Vzory React.js, testování
— Studujeme komponenty, prvky a instance třídy komponent.
— Zvažujeme knihovnu Recompose, komponenty vyššího řádu a vzory Render Props.
— Chápeme výhody testů, studujeme Jest, Enzyme, Snapshots.
III Reagovat
1. Úvod (01:43)
2. PropTypes (10:18)
3. Kontext (05:19)
4. Doporučení (05:18)
5. Portály (05:02)
6. Háčky (10:42)
IV React.js
1. Komponenty vyššího řádu (HOC) – Komponenty vyššího řádu (10:33)
2. Přesměrování zpět (HOC) (04:31)
3. Vykreslit vzor rekvizit (05:25)
4. HOK Library Recompose (10:32)
5. Profilování (04:02)
Testování
1. Úvod (05:06)
2. Testovací běžec (02:51)
3. Testovat DSL (08:41)
4. Enzym (06:57)
5. Snímky (03:09)
6. Testování ság (05:01)
7. Reagovat Testovací knihovna (06:32)
Analýza úkolů #2
1. Workshop č. 2 (27:54)
3. týden - Redux, směrování
— Studujeme směrování: Jednoduché směrování, směrování pomocí přepínače a také vnořené směrování.
— Seznámení s knihovnou Redux: základní koncepty a koncepty Store, Actions, Reducers, React-redux.
— Middleware je považován za způsob práce s Sideeffectem.
Směrování v prohlížeči
1. History API (02:48)
2. Jednoduché směrování (05:39)
3. Směrování z přepínače (04:16)
4. Vnořené směrování (05:32)
5. Soukromá trasa (04:39)
Já Redux
1. Úvod (04:07)
2. Obchod (05:03)
3. Akce (02:17)
4. Reduktory (07:56)
5. React-redux (03:26)
II Redux
1. Úvod (03:11)
2. CreateActions (redux-actions) (09:13)
3. Middleware (07:54)
4. Zpracovat akce (05:52)
5. Voliči (06:17)
6. Znovu vybrat (04:49)
7. Kachny (06:56)
Analýza úkolů #3
1. Workshop #3 (39:13)
4. týden - Redux-saga
— Studujeme knihovnu Redux-saga. Funkce generátoru opakování*. Pojďme se naučit, jak je spustit paralelně.
— Podívejme se na metodu Take. Pojďme si prostudovat výběr jako způsob, jak získat data z obchodu.
— Hledáme způsoby, jak stylizovat aplikaci React. Studujeme knihovny ClassNames, StyledComponents, BrowserList, MaterialUI.
I Redux-sága
1. Úvod (00:57)
2. Přehled (02:08)
3. Generátory (04:11)
4. Přidávání ság (02:07)
5. Reagovat na akce (03:53)
6. Spuštění funkcí (02:06)
II Reduxní sága
1. Úvod (00:27)
2. Paralelní provádění efektů (03:41)
3. Vstoupit v platnost (02:45)
4. Vybrat efekt (02:04)
5. Zrušit efekty (04:05)
Práce se styly
1. Úvod (01:34)
2. Styly CRA (05:21)
3. ClassNames (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Material UI (08:13)
Analýza úkolů #4
1. Workshop #4 (09:55)
5. týden – Zpracování chyb formulářů, CI & DI a klienta
— Zvažujeme práci s formuláři pomocí knihoven Formik, Redux Forms, React Final Form.
— Zvažujeme metody pro zajištění kvality výrobního kódu. Analyzujeme takové nástroje jako: Husky, TravisCI, HerokuNow.
— Studujeme sadu užitečných knihoven pro vývoj (Storybook, RamdaJS, Axios).
— Zvažujeme TypeScript.
Práce s formuláři
1. Úvod (05:07)
2. Formik (08:51)
3. Redux forma (06:22)
4. Reagovat finální podoba (06:36)
Zpracování chyb CI & DI a klienta
1. Úvod (05:07)
2. Husky (02:32)
3. CI pomocí TravisCI (03:32)
4. Nasadit do heroku (04:57)
5. Rollbar (02:00)
Sada užitečných knihoven pro vývoj
1. Pohádková kniha (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Strojopis (09:31)
Analýza úkolů #5
1. Workshop č. 5 (13:17)
6. týden - Projektová práce
— Dokončíme žádost a odešleme ji ke kontrole.
Jak získat práci v IT: tipy a triky
1. Jak získat práci v IT? Hledání, pohovor a zkušební doba (42:21)
2. Jak najít práci na dálku a zakázky na volné noze? (20:12)
3. První práce v IT – jak se chovat? Stáže, oficiální zaměstnání a práce „na jídlo“ (14:11)
4. Jak projít zkušební dobou? (27:10)
5. Jak se připravit na pohovor ve společnosti FAANG (08:52)
6. Proces načítání webové stránky (25:19)
7. Programátorský rozhovor - vše, co potřebujete vědět (01:24:07)
8. Řešení problému z rozhovoru s programátorem (19:36)
9. Rozhovor s frontend vývojářem (01:37:17)