Käyttöliittymäkehittäjä - kurssi 47 600 hieroa. Loft Schoolista, koulutus 3 kuukautta, päivämäärä 28.11.2023.
Miscellanea / / November 29, 2023
Tietoa ja taitoja
Kaikki tarvittava tieto käyttöliittymäkehittäjälle.
Portfolio
2 vaikuttavaa modernia ja teknologista projektia portfoliossasi.
Todistus
Pisteet, jotka kuvastavat tietotasoasi ja vaikuttavuuttasi.
Carier aloitus
Takaamme työpaikan kaikille hyville ja erinomaisille opiskelijoille.
Ne antavat tietoa, eivät vastauksia. He rakastavat selittää ja pystyvät välittämään monimutkaista tietoa ymmärrettävällä kielellä. Vaativa koodisi laadusta: et läpäise tehtävää ennen kuin koodisi on täydellinen. He ymmärtävät muita ihmisiä hyvin ja osaavat löytää lähestymistavan jokaiseen opiskelijaan. Aina valmis auttamaan.
Vue.js Advanced Web Development
Viikko 1 - Työnkulku
– Tapaamme mentorin ja ryhmän.
— Webpack-kokoonpanon avulla luomme valitun ulkoasun lopputyötä varten.
— Julkaisemme tuloksen Githubissa ja lähetämme sen mentorille tarkistettavaksi.
Kurssin avaus
1. Kuinka koulutus sujuu (01:09:37)
Vue. Avainominaisuudet
1. Teoria (04:49)
2. Hei maailma (06:20)
3. Tapahtumankäsittely (02:38)
4. Useiden tapahtumien käsittely (01:19)
5. Dynaamiset arvot (01:30)
6. Johdatus direktiiveihin (05:40)
7. Lyhennetyt käskyt (00:37)
8. Menetelmät parametreilla (01:36)
9. Tapahtuman muokkaajat (08:52)
10. Lasketut ominaisuudet (10:50)
11. Watchers (06:02)
12. Työskentely luokkien kanssa (03:37)
13. Työskentely CSS-ominaisuuksien kanssa (02:49)
14. DOM-elementtien käyttö (03:50)
15. Ehdollinen renderöinti (04:46)
16. Renderöintilistat (05:12)
17. Komponentin luominen (04:16)
18. Paikalliset komponentit (02:44)
19. Tietojen reaktiivisuus (04:35)
20. Komponenttien ominaisuudet (03:52)
21. Slots (04:37)
22. Slots-soittimella (04:52)
23. Mukautetut tapahtumat (04:27)
24. Teleportit (02:53)
Vue. Yksitiedostoiset komponentit
1. Projektin asentaminen. VUE-CLI (09:22)
2. Yhden tiedoston komponentti (03:18)
3. Työskentely tyylien kanssa (07:02)
4. Attribuutit ja käsittelijät (02:53)
5. Yksittäiset tiedostot (01:26)
6. Komponenttien ominaisuuksien validointi (07:35)
7. Käyttäjätapahtumien validointi (02:01)
8. Kaksisuuntainen tiedonsiirto (04:11)
9. Mukautettu v-malli (05:51)
10. Lifecycle Hooks (07:08)
11. Epäpuhtaudet (04:40)
NPM
1. Mikä on npm? (05:50)
2. Asennus ja päivitys npm (02:33)
3. Apua numeroon npm (01:28)
4. Pakettien etsiminen ja asentaminen (04:24)
5. Pakettiriippuvuudet (02:09)
6. Luettelotiedosto package.json (03:02)
7. Pakettien poistaminen ja päivitys (03:02)
8. riippuvuudet ja devDependencies (01:51)
9. Webpack ja npx (04:04)
10. npm-skriptit (04:02)
11. npm, git ja github (02:40)
Lanka
1. Lanka (07:07)
Verkkopaketti. Perusasiat
1. Teoria (01:09)
2. Minimaalinen konfigurointi ja käynnistys (04:41)
3. Tiedoston nimeäminen (02:34)
4. Kuormaajat (04:28)
5. Kehittäjäpalvelin (02:43)
6. Plugins (02:34)
7. Etsi moduuleja (03:18)
8. Sorsmaps (03:17)
9. Dev et al (02:42)
10. Moduulityypit (03:00)
11. Minimaalinen kokoonpano (05:30)
ESLint. Kokoonpanon yleiskatsaus
1. Johdanto (01:26)
2. Asennus ja käynnistys (03:10)
3. Virheenkorjauksia (02:04)
4. Kokoonpano (05:21)
5. Tulostusmuoto (00:52)
Figma taittosuunnittelijalle
1. Figma. Käyttöliittymä (04:37)
2. Figma. Projektiorganisaatio (01:32)
Flexbox
1. Johdanto (00:45)
2. Flex container (01:43)
3. Pääakselin kohdistus (01:37)
4. Poikkiakselin kohdistus (01:50)
5. Yhden elementin kohdistaminen (01:09)
6. Joustoelementti – kontti (00:53)
7. Akselien suunta (03:18)
8. Multiline-säiliö (02:54)
9. Tasaista monirivistä sisältöä (01:25)
10. Mittasuhteet (02:46)
11. Pakkaussuhteet (01:24)
12. Peruskoko (04:02)
13. Elementtien järjestys (02:40)
GIT
1. Johdanto (07:03)
2. Gitin käytön aloittaminen (03:01)
3. Uuden arkiston luominen (01:09)
4. Tiedostojen lisääminen Git-hakemistoon (katselualue) (06:49)
5. Luodaan sitoumusta (07:17)
6. Suorita navigointi. Peruuta muutokset (12:10)
7. Tyypillinen Git-sykli (03:34)
8. Haaroittuminen Gitissä (11:27)
9. Ristiriidat sivukonttoreiden yhdistämisessä (06:06)
10. Väliaikainen (ilman sitoutumista) tietojen tallennus (05:25)
11. Työskentely etätietovarastojen kanssa (20:04)
12. GitHub-sivujen käyttö projektien isännöimiseen (04:31)
Vue. Työpaja nro 1
1. Projektin alku (05:24)
2. Otsikkokomponentti (04:13)
3. Kuvakekomponentti (05:06)
4. Komponenttiluettelon näyttäminen (02:56)
5. Vaihda komponenttia (03:19)
Viikko 2 – Vue.js
– Teemme ulkoasusta mukautuvan.
— Toteutamme Vue.js: n "Skills"-lohkon.
— Toteutamme "Omat projektit" -lohkon Vue.js: ssä.
— Toteutamme "Slider for reviews" -lohkon Vue.js-laajennuksella.
Satukirja
1. Asennus (01:56)
2. Ensimmäinen tarina (04:35)
3. Komponentin liittäminen (01:24)
4. Kokoonpanon laajennus (04:26)
5. Yleiset tyylit (02:08)
6. Komponentin tarina (05:23)
7. CDD (04:16)
8. Komponentin luominen (02:28)
9. Komponentin käyttäminen (02:29)
10. Tapahtumaloki (03:29)
11. Taustalisäys (01:41)
12. Addon Knobs (02:28)
13. Lisäyksen lähde (02:17)
14. Johtopäätös (01:11)
JavaScript - ES6
1. Merkkijonojen interpolointi (07:39)
2. Yksinkertaistavat menetelmäkuvaukset (13:35)
3. Oletukset (30:08)
4. Rakennemuutos: Objektit (07:30)
5. Uudet ominaisuudet ja vanhat selaimet (13:07)
Asynkronisuus JavaScriptissä
1. Ajastimet (23:44)
2. Ladataan kuvia (22:21)
3. Lupaukset (36:29)
4. AJAX (32:28)
Axios. Kyselykirjasto
1. Johdanto (02:23)
2. Pyynnön lähettäminen (02:12)
3. Määritysten yleiskatsaus (04:30)
4. Pyynnön teksti (01:43)
5. Oletusasetukset (01:38)
6. Sieppaajat (02:11)
7. Palvelut (02:33)
8. async-wait (01:18)
Vue. Työpaja nro 2
1. Valmistautuminen (02:39)
2. Komponentin liittäminen (02:16)
3. Ohjauslähtö (02:38)
4. Edistymiskomponentti (05:09)
5. Pyyntö palvelimelle (06:38)
6. Datatulostus (05:55)
Viikko 3 - Alkuperäinen JavaScript
– Olemme luomassa hallintapaneelia.
— Tutkimme Storybookia ja käytämme sitä projektissamme.
— Suoritamme projektilomakkeiden tarvittavan käsittelyn (validoinnin).
VueRouter. Reititys selaimessa
1. Johdanto (04:31)
2. Linkin rakentaminen (02:41)
3. Ohjelmistonavigointi (02:35)
4. Polkuparametrit (04:42)
5. Parametrit ominaisuuksina (00:49)
6. Lisäasetukset ja 404 (03:29)
7. Sisäkkäiset reitit (03:23)
8. Aktiviteettitunnit (02:37)
9. Erilaiset reitittimen näkymät (01:08)
10. Dynaamiset tuonnit (02:00)
11. Kaunis URL-osoite (02:16)
Vuex. Valtionjohtaja
1. Johdanto (01:13)
2. Yhteys (02:30)
3. Toiminta (02:27)
4. Mutaatiot (02:16)
5. Getters (02:02)
6. Sovellus käytännössä (08:07)
7. Avustajatoiminnot (02:59)
8. Moduulit (05:18)
9. Dynaamiset moduulit (01:38)
Kysymys Vastaus
Vue. Työpaja nro 3
1. Asettelu (04:33)
2. Tiedonanto (02:42)
3. Animaatioon valmistautuminen (02:14)
4. Painikkeiden näyttö (03:45)
5. Lisäsisällön lataus (11:38)
6. Näytä dia siirtymän jälkeen (02:17)
Viikko 4 – Vue.js, SPA
— Otamme SPA käyttöön hallintapaneelissa.
— Tutkimme tietojen kanssa työskentelyä sovellustallenteen kautta
— Käytämme ajaxia kommunikointiin API: n kanssa, asiakas-palvelin-vuorovaikutusten määrittämiseen.
Valtuutus. Tokenit
1. Valtuutustyypit (04:20)
2. GitHub OAuth (01:42)
3. GitHub-sovelluksen luominen (02:28)
4. Tokenin vastaanottaminen (08:38)
5. Tietojen tallennus koodiin (01:46)
6. Reitin suojaus (04:13)
Vue. Työpaja nro 4
1. Valmistautuminen (01:33)
2. Toiminnon luominen (02:30)
3. Latauksen tila (04:01)
4. Pyyntö (02:27)
5. Kaksoiskappaleiden poistaminen (03:29)
6. Reitin suojaus (03:23)
7. Kirjaudu ulos (00:51)
Viikko 5 - Harjoittelu
— Näytämme tallennetut tiedot hallintapaneelista aloitussivulle.
– Testaamme komponentteja.
— Ryhmätyö projektin parissa mentorin kanssa.
Vue.js. Koostumus API
1. Johdanto (01:29)
2. Yleinen esimerkki (03:57)
3. Laulutoiminto (01:51)
4. Reaktiivinen toiminto (00:55)
5. toRef-toiminto (01:35)
6. toRefs-funktio (00:58)
7. Lasketut ominaisuudet (00:56)
8. kellotoiminto (01:41)
9. watchEffect-toiminto (03:14)
10. vain luku -toiminto (00:40)
11. Testitoiminnot (02:30)
12. unref-funktio (01:27)
13. Lifecycle Hooks (00:58)
14. Esimerkki. Hankkeen yleiskatsaus (00:53)
15. Esimerkki. Ladataan toimintoja (01:20)
16. Esimerkki. Luokat (02:20)
17. Esimerkki. Ensimmäinen suodatus (02:46)
18. Esimerkki. Suodattimen vaihto (02:11)
19. Esimerkki. Muut suodatustoiminnot (02:03)
20. Esimerkki. Lajittelutapa (03:05)
JS-koodin testaus
1. Esittely (16:05)
2. Jest (15:47)
3. Testien edut (09:01)
4. Kattaus (10:02)
Vue.js. Komponenttien testaus
1. Pakettien asettaminen (04:39)
2. Komponenttikääre (04:13)
3. Mitä testata (02:48)
4. Ensimmäinen testi (05:25)
5. Tarkistetaan päästötapahtumaa (03:44)
6. Kiinteistöjen siirto (02:58)
7. Työskentely lomakeelementtien kanssa (05:42)
8. Yleiset asetukset (01:15)
9. Moki (05:04)
10. Kirjastojen yhdistäminen (02:32)
11. Toimintatestaus (03:26)
12. Kaupan testaus (02:53)
13. Testaus kuvilla (03:08)
Testaus. Moki
1. Mallin luominen (02:39)
2. Työskentely argumenttien kanssa (01:39)
3. Palautusarvo (02:57)
4. Moduulit (04:24)
5. Ajastimet (02:05)
Vue. Työpaja nro 5
1. Yksinkertainen komponentti (03:03)
2. Komponentti myymälän kanssa (05:21)
3. Testaus. Valmistautuminen (03:20)
4. Testaus. Toggler (02:38)
5. Testaus. Ongelmat (05:08)
Viikko 6 - Projektin valmistuminen
– Olemme viimeistelemässä projektia.
— Lähetämme hankkeen mentoreiden tarkastettavaksi.
- Arviointitutkinnot.
IT-alan työpaikan saaminen: vinkkejä ja temppuja
1. Kuinka saada töitä IT-alalta? Haku, haastattelu ja koeaika (42:21)
2. Kuinka löytää etätyötä ja freelance-tilauksia? (20:12)
3. Ensimmäinen työpaikka IT-alalla – miten käyttäytyä? Työharjoittelu, virkatyö ja työ "ruokaa varten" (14:11)
4. Miten koeaika kestää? (27:10)
5. Kuinka valmistautua haastatteluun FAANG-yrityksessä (08:52)
6. Verkkosivun latausprosessi (25:19)
7. Ohjelmoijahaastattelu – kaikki mitä sinun tulee tietää (01:24:07)
8. Ongelman ratkaiseminen ohjelmoijan haastattelusta (19:36)
9. Käyttöliittymän kehittäjän haastattelu (01:37:17)
React.js-verkkosovelluskehitys
Viikko 1 – React.js: n esittely
– Tutustumme kurssiryhmään ja luokkatovereihin.
— JSX: n ja virtuaalisen DOM: n oppiminen Reactissa.
— Harkitsemme komponenttilähestymistapaa ja tiedonsiirtomenetelmiä.
Tuttavuus
1. Kurssin avaus (05:41)
I React.js
1. Mikä on React (07:05)
2. Virtuaalinen DOM (02:46)
3. JSX (06:10)
4. Renderöinti ehdoilla (05:11)
5. Työskentely listojen kanssa (02:45)
6. Komponentit (02:41)
7. Rekvisiitta (01:45)
8. Osavaltio (06:45)
9. Tapahtumat (02:26)
10. React Devtools (03:58)
II React.js
1. Elinkaarimenetelmät (05:19)
2. Komponentit - toiminnot (01:29)
3. Puhdas komponentti (02:54)
4. Synteettiset tapahtumat (01:42)
5. Lomakkeiden kanssa työskentely (02:51)
6. Virheiden käsittely (01:39)
Tehtävien #1 analyysi
1. Workshop #1 (30:36)
Viikko 2 - React.js-mallit, testaus
— Tutkimme komponenttiluokan komponentteja, elementtejä ja esiintymiä.
— Otamme huomioon Recompose-kirjaston, korkealuokkaiset komponentit ja Render Props -mallit.
— Ymmärrämme testien edut, opimme Jestiä, Entsyymiä, Snapshotsia.
III Reagoi
1. Johdanto (01:43)
2. PropTypes (10:18)
3. Konteksti (05:19)
4. Viitteet (05:18)
5. Portaalit (05:02)
6. Koukut (10:42)
IV React.js
1. Korkealuokkaiset komponentit (HOC) – korkeamman asteen komponentit (10:33)
2. Uudelleenlähetys (HOC) (04:31)
3. Renderöi rekvisiittakuvio (05:25)
4. HOK Library Recompose (10:32)
5. Profilointi (04:02)
Testaus
1. Johdanto (05:06)
2. Test Runner (02:51)
3. Testaa DSL: ää (08:41)
4. Entsyymi (06:57)
5. Tilannekuvat (03:09)
6. Testaussaagat (05:01)
7. React Testing Library (06:32)
Tehtävien #2 analyysi
1. Workshop #2 (27:54)
Viikko 3 - Redux, reititys
— Tutkimme reititystä: Yksinkertaista reititystä, reititystä Switchillä sekä sisäkkäistä reititystä.
— Redux-kirjastoon tutustuminen: Store, Actions, Reducers, React-redux peruskäsitteet ja käsitteet.
— Middlewarea pidetään keinona työskennellä Sideeffectin kanssa.
Reititys selaimessa
1. History API (02:48)
2. Yksinkertainen reititys (05:39)
3. Reititys kytkimestä (04:16)
4. Sisäkkäinen reititys (05:32)
5. Yksityinen reitti (04:39)
Minä Redux
1. Johdanto (04:07)
2. Kauppa (05:03)
3. Toiminnot (02:17)
4. Reducers (07:56)
5. React-redux (03:26)
II Redux
1. Johdanto (03:11)
2. CreateActions (redux-actions) (09:13)
3. Väliohjelmisto (07:54)
4. Käsittele toiminnot (05:52)
5. Valitsijat (06:17)
6. Valitse uudelleen (04:49)
7. Ducks (06:56)
Tehtävien #3 analyysi
1. Workshop #3 (39:13)
Viikko 4 - Redux-saga
– Tutkimme Redux-sagan kirjastoa. Toista generaattorin* toiminnot. Opitaan ajamaan niitä rinnakkain.
– Katsotaanpa Take-menetelmää. Tutkitaan valintaa tapana saada tietoja Storesta.
— Etsimme tapoja muotoilla React-sovellusta. Tutkimme kirjastoja ClassNames, StyledComponents, BrowserList, MaterialUI.
Olen Redux-saaga
1. Johdanto (00:57)
2. Yleiskatsaus (02:08)
3. Generaattorit (04:11)
4. Saagan lisääminen (02:07)
5. Reagoi toimiin (03:53)
6. Ominaisuuden julkaisut (02:06)
II Redux-saaga
1. Johdanto (00:27)
2. Tehosteet rinnakkain (03:41)
3. Tule voimaan (02:45)
4. Valitse tehoste (02:04)
5. Peruuta tehosteet (04:05)
Työskentely tyylien kanssa
1. Johdanto (01:34)
2. CRA Styles (05:21)
3. ClassNames (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Materiaalin käyttöliittymä (08:13)
Tehtävien #4 analyysi
1. Workshop #4 (09:55)
Viikko 5 – Lomakkeet, CI & DI ja asiakasvirheiden käsittely
— Harkitsemme Formik-, Redux Forms- ja React Final Form -kirjastojen käyttöä lomakkeiden kanssa.
— Harkitsemme menetelmiä tuotantokoodin laadun varmistamiseksi. Analysoimme sellaisia työkaluja kuin: Husky, TravisCI, HerokuNow.
— Tutkimme joukkoa hyödyllisiä kehittämiskirjastoja (Storybook, RamdaJS, Axios).
– Harkitsemme TypeScriptiä.
Lomakkeiden kanssa työskentely
1. Johdanto (05:07)
2. Formik (08:51)
3. Redux-lomake (06:22)
4. Reagoi lopullinen muoto (06:36)
CI & DI & Client -virheiden käsittely
1. Johdanto (05:07)
2. Husky (02:32)
3. CI TravisCI: llä (03:32)
4. Ota käyttöön herokussa (04:57)
5. Rollbar (02:00)
Joukko hyödyllisiä kirjastoja kehittämistä varten
1. Satukirja (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Konekirjoitus (09:31)
Tehtävien #5 analyysi
1. Workshop #5 (13:17)
Viikko 6 - Projektityö
– Täytämme hakemuksen ja lähetämme sen tarkistettavaksi.
IT-alan työpaikan saaminen: vinkkejä ja temppuja
1. Kuinka saada töitä IT-alalta? Haku, haastattelu ja koeaika (42:21)
2. Kuinka löytää etätyötä ja freelance-tilauksia? (20:12)
3. Ensimmäinen työpaikka IT-alalla – miten käyttäytyä? Työharjoittelu, virkatyö ja työ "ruokaa varten" (14:11)
4. Miten koeaika kestää? (27:10)
5. Kuinka valmistautua haastatteluun FAANG-yrityksessä (08:52)
6. Verkkosivun latausprosessi (25:19)
7. Ohjelmoijahaastattelu – kaikki mitä sinun tulee tietää (01:24:07)
8. Ongelman ratkaiseminen ohjelmoijan haastattelusta (19:36)
9. Käyttöliittymän kehittäjän haastattelu (01:37:17)