Frontend udvikler - kursus 47.600 rub. fra Loftskolen, uddannelse 3 måneder, Dato 28. november 2023.

Vue.js Avanceret webudvikling

Uge 1 - Arbejdsgang

— Vi møder mentoren og gruppen.
— Ved hjælp af webpack-samling opretter vi det valgte layout til det endelige projekt.
— Vi poster resultatet på Github og sender det til mentoren til verifikation.

Kursusåbning
1. Sådan foregår træningen (01:09:37)

Vue. Nøglefunktioner
1. Teori (04:49)
2. Hej verden (06:20)
3. Hændelseshåndtering (02:38)

4. Håndtering af flere hændelser (01:19)
5. Dynamiske værdier (01:30)
6. Introduktion til direktiver (05:40)
7. Forkortede direktiver (00:37)
8. Metoder med parametre (01:36)
9. Hændelsesmodifikatorer (08:52)
10. Beregnede egenskaber (10:50)
11. Watchers (06:02)
12. Arbejde med klasser (03:37)
13. Arbejde med CSS-egenskaber (02:49)
14. Adgang til DOM-elementer (03:50)
15. Betinget gengivelse (04:46)
16. Gengivelseslister (05:12)
17. Oprettelse af en komponent (04:16)
18. Lokale komponenter (02:44)
19. Datareaktivitet (04:35)
20. Komponentegenskaber (03:52)
21. Slots (04:37)
22. Slots med scope (04:52)
23. Tilpassede begivenheder (04:27)
24. Teleporterer (02:53)

Vue. Enkelt-fil komponenter
1. Installation af projektet. VUE-CLI (09:22)
2. Enkelt fil komponent (03:18)
3. Arbejde med stilarter (07:02)
4. Beståede attributter og behandlere (02:53)
5. Individuelle filer (01:26)
6. Validering af komponentegenskaber (07:35)
7. Validering af brugerhændelser (02:01)
8. Tovejs datakommunikation (04:11)
9. Brugerdefineret v-model (05:51)
10. Livscykluskroge (07:08)
11. Urenheder (04:40)

NPM
1. Hvad er npm? (05:50)
2. Installation og opdatering af npm (02:33)
3. Hjælp med npm (01:28)
4. Finde og installere pakker (04:24)
5. Pakkeafhængigheder (02:09)
6. Manifestfil package.json (03:02)
7. Fjernelse og opdatering af pakker (03:02)
8. afhængigheder og devDependencies (01:51)
9. Webpack og npx (04:04)
10. npm-scripts (04:02)
11. npm, git og github (02:40)

Garn
1. Garn (07:07)

Webpack. Grundlæggende
1. Teori (01:09)
2. Minimal konfiguration og start (04:41)
3. Filnavngivning (02:34)
4. Læssemaskiner (04:28)
5. Dev-server (02:43)
6. Plugins (02:34)
7. Søg efter moduler (03:18)
8. Sorsmaps (03:17)
9. Dev et al (02:42)
10. Modultyper (03:00)
11. Minimal samling (05:30)

ESLint. Konfigurationsoversigt
1. Introduktion (01:26)
2. Installation og lancering (03:10)
3. Fejlrettelser (02:04)
4. Konfiguration (05:21)
5. Outputformat (00:52)

Figma for layoutdesigner
1. Figma. Interface (04:37)
2. Figma. Projektorganisation (01:32)

Flexbox
1. Introduktion (00:45)
2. Flexbeholder (01:43)
3. Hovedaksejustering (01:37)
4. Tværaksejustering (01:50)
5. Justering af et enkelt element (01:09)
6. Flexelement - beholder (00:53)
7. Akseretning (03:18)
8. Multiline container (02:54)
9. Justering af multiline-indhold (01:25)
10. Proportioner (02:46)
11. Kompressionsforhold (01:24)
12. Grundstørrelse (04:02)
13. Elementernes rækkefølge (02:40)

GIT
1. Introduktion (07:03)
2. Kom godt i gang med Git (03:01)
3. Oprettelse af et nyt lager (01:09)
4. Tilføjelse af filer til Git-indekset (overvågningsområde) (06:49)
5. Oprettelse af en forpligtelse (07:17)
6. Forpligte navigation. Annuller ændringer (12:10)
7. Typisk Git-cyklus (03:34)
8. Forgrening i Git (11:27)
9. Konflikter ved sammenlægning af filialer (06:06)
10. Midlertidig (uden forpligtelse) lagring af data (05:25)
11. Arbejde med fjernlager (20:04)
12. Brug af GitHub-sider til at være vært for projekter (04:31)

Vue. Workshop #1
1. Start af projektet (05:24)
2. Overskriftskomponent (04:13)
3. Ikonkomponent (05:06)
4. Viser en liste over komponenter (02:56)
5. Skift komponent (03:19)

Uge 2 - Vue.js

— Vi gør layoutet adaptivt.
— Vi implementerer "Skills"-blokken i Vue.js.
— Vi implementerer blokken "Mine projekter" i Vue.js.
— Vi implementerer "Slider til anmeldelser"-blokken ved hjælp af Vue.js-plugin.

Historiebog
1. Installation (01:56) 
2. Første historie (04:35)
3. Tilslutning af en komponent (01:24)
4. Konfigurationsudvidelse (04:26)
5. Generelle stilarter (02:08)
6. Historie for komponenten (05:23)
7. CDD (04:16)
8. Oprettelse af en komponent (02:28)
9. Anvendelse af en komponent (02:29)
10. Hændelseslogning (03:29)
11. Baggrunds-tilføjelse (01:41)
12. Tilføjelsesknapper (02:28)
13. Tilføjelseskilde (02:17)
14. Konklusion (01:11)

JavaScript - ES6
1. Strenginterpolation (07:39)
2. Forenkling af metodebeskrivelser (13:35)
3. Standarder (30:08)
4. Destructuring Assignment: Objects (07:30)
5. Nye funktioner og gamle browsere (13:07)

Asynkron i JavaScript
1. Timere (23:44)
2. Indlæser billeder (22:21)
3. Løfter (36:29)
4. AJAX (32:28)

Axios. Forespørgselsbibliotek
1. Introduktion (02:23)
2. Sender en anmodning (02:12)
3. Konfigurationsoversigt (04:30)
4. Anmodningstekst (01:43)
5. Standardindstillinger (01:38)
6. Interceptorer (02:11)
7. Tjenester (02:33)
8. asynkron-venter (01:18)

Vue. Workshop #2
1. Forberedelse (02:39)
2. Tilslutning af en komponent (02:16)
3. Kontroludgang (02:38)
4. Fremskridtskomponent (05:09)
5. Forespørgsel til serveren (06:38)
6. Dataoutput (05:55)

Uge 3 - Native JavaScript

— Vi er ved at oprette administrationspanelet.
— Vi studerer Storybook og anvender den i vores projekt.
— Vi udfører den nødvendige behandling (validering) af projektskemaer.

VueRouter. Routing i browseren
1. Introduktion (04:31)
2. Linkbuilding (02:41)
3. Softwarenavigation (02:35)
4. Stiparametre (04:42)
5. Parametre som egenskaber (00:49)
6. Avancerede muligheder og 404 (03:29)
7. Indlejrede ruter (03:23)
8. Aktivitetstimer (02:37)
9. Forskellige routervisninger (01:08)
10. Dynamisk import (02:00)
11. Smuk URL (02:16)

Vuex. Statsleder
1. Introduktion (01:13)
2. Forbindelse (02:30)
3. Action (02:27)
4. Mutationer (02:16)
5. Getters (02:02)
6. Anvendelse i praksis (08:07)
7. Assistentfunktioner (02:59)
8. Moduler (05:18)
9. Dynamiske moduler (01:38)
Spørgsmål svar

Vue. Workshop #3
1. Layout (04:33)
2. Dataoutput (02:42)
3. Forberedelse til animation (02:14)
4. Knapvisning (03:45)
5. Indlæsning af yderligere indhold (11:38)
6. Vis dias efter overgang (02:17)

Uge 4 - Vue.js, SPA

— Vi implementerer SPA i adminpanelet.
— Vi studerer arbejdet med data gennem applikationslagringen
— Vi bruger ajax til at kommunikere med api'en, opsætte klient-server-interaktioner.

Bemyndigelse. Poletter
1. Autorisationstyper (04:20)
2. GitHub OAuth (01:42)
3. Oprettelse af en GitHub-applikation (02:28)
4. Modtagelse af et token (08:38)
5. Lagring af data i kode (01:46)
6. Rutebeskyttelse (04:13)

Vue. Workshop #4
1. Forberedelse (01:33)
2. Oprettelse af en handling (02:30)
3. Downloadstatus (04:01)
4. Anmodning (02:27)
5. Fjerner dubletter (03:29)
6. Rutebeskyttelse (03:23)
7. Log ud (00:51)

Uge 5 - Øvelse

— Vi viser de gemte data fra administrationspanelet til landingssiden.
— Vi tester komponenterne.
— Gruppearbejde på et projekt med en mentor.

Vue.js. Sammensætning API
1. Introduktion (01:29)
2. Generelt eksempel (03:57)
3. Sangfunktion (01:51)
4. Reaktiv funktion (00:55)
5. toRef-funktion (01:35)
6. toRefs funktion (00:58)
7. Beregnede egenskaber (00:56)
8. urfunktion (01:41)
9. watchEffect funktion (03:14)
10. skrivebeskyttet funktion (00:40)
11. Testfunktioner (02:30)
12. unref funktion (01:27)
13. Livscykluskroge (00:58)
14. Eksempel. Projektoversigt (00:53)
15. Eksempel. Indlæsningsfunktionalitet (01:20)
16. Eksempel. Kategorier (02:20)
17. Eksempel. Indledende filtrering (02:46)
18. Eksempel. Filterskift (02:11)
19. Eksempel. Andre filtreringsfunktioner (02:03)
20. Eksempel. Sorteringsmetode (03:05)
JS kode test
1. Introduktion (16:05)
2. Spøg (15:47)
3. Fordelene ved tests (09:01)
4. Dækning (10:02)

Vue.js. Komponenttestning
1. Opsætning af pakker (04:39)
2. Komponentindpakning (04:13)
3. Hvad skal man teste (02:48)
4. Første test (05:25)
5. Kontrol af emissionshændelsen (03:44)
6. Overførsel af ejendomme (02:58)
7. Arbejde med formularelementer (05:42)
8. Generelle indstillinger (01:15)
9. Moki (05:04)
10. Forbindelse af biblioteker (02:32)
11. Handlingstest (03:26)
12. Test af butikken (02:53)
13. Test med billeder (03:08)

Afprøvning. Moki
1. Oprettelse af en mockup (02:39)
2. Arbejde med argumenter (01:39)
3. Returværdi (02:57)
4. Moduler (04:24)
5. Timere (02:05)

Vue. Workshop #5
1. Simpel komponent (03:03)
2. Komponent med butik (05:21)
3. Afprøvning. Forberedelse (03:20)
4. Afprøvning. Toggler (02:38)
5. Afprøvning. Udgaver (05:08)

Uge 6 - Afslutning af projektet

- Vi er ved at færdiggøre projektet.
— Vi sender projektet til gennemgang af mentorer.
— Bedømmelse af eksamensbeviser.

Sådan får du et job inden for IT: tips og tricks
1. Hvordan får man et job inden for IT? Eftersøgning, samtale og prøvetid (42:21)
2. Hvordan finder man fjernarbejde og freelanceordrer? (20:12)
3. Første job i IT - hvordan skal man opføre sig? Praktikpladser, officiel beskæftigelse og arbejde "for mad" (14:11)
4. Hvordan passerer man prøvetiden? (27:10)
5. Sådan forbereder du dig til et interview hos en FAANG-virksomhed (08:52)
6. Processen med at indlæse en webside (25:19)
7. Programmer interview - alt hvad du behøver at vide (01:24:07)
8. Løsning af et problem fra et programmørinterview (19:36)
9. Frontend-udviklerinterview (01:37:17)

React.js webapplikationsudvikling

Uge 1 - Introduktion til React.js

— Vi lærer kursusholdet og klassekammeraterne at kende.
— At lære JSX og Virtual DOM i React.
— Vi overvejer komponenttilgangen og metoderne til dataoverførsel.

Bekendtskab
1. Baneåbning (05:41)

Jeg React.js
1. Hvad er React (07:05)
2. Virtual DOM (02:46)
3. JSX (06:10)
4. Gengivelse med betingelser (05:11)
5. Arbejde med lister (02:45)
6. Komponenter (02:41)
7. Rekvisitter (01:45)
8. Stat (06:45)
9. Begivenheder (02:26)
10. React Devtools (03:58)

II React.js
1. Livscyklusmetoder (05:19)
2. Komponenter - funktioner (01:29)
3. Ren komponent (02:54)
4. Syntetiske begivenheder (01:42)
5. Arbejde med formularer (02:51)
6. Fejlhåndtering (01:39)

Analyse af opgave #1
1. Workshop #1 (30:36)

Uge 2 - React.js-mønstre, test

— Vi studerer komponenter, elementer og forekomster af komponentklassen.
— Vi overvejer Recompose-biblioteket, komponenter af høj orden og Render Props-mønstre.
— Vi forstår fordelene ved tests, studerer Jest, Enzyme, Snapshots.

III Reager
1. Intro (01:43)
2. PropTypes (10:18)
3. Kontekst (05:19)
4. Refs (05:18)
5. Portaler (05:02)
6. Hooks (10:42)

IV React.js
1. High Order Components (HOC'er) - Higher Order Components (10:33)
2. Ref-videresendelse (HOC'er) (04:31)
3. Gengiv rekvisittermønster (05:25)
4. HOK Library Recompose (10:32)
5. Profilering (04:02)

Afprøvning
1. Intro (05:06)
2. Testløber (02:51)
3. Test DSL (08:41)
4. Enzym (06:57)
5. Snapshots (03:09)
6. Testsagaer (05:01)
7. React Testing Library (06:32)

Analyse af opgave #2
1. Workshop #2 (27:54)

Uge 3 - Redux, routing

— Vi studerer routing: Simpel routing, routing med Switch, samt indlejret routing.
— At blive bekendt med Redux-biblioteket: grundlæggende koncepter og koncepter for Store, Actions, Reducers, React-redux.
— Middleware betragtes som en måde at arbejde med Sideeffect på.

Routing i browseren
1. History API (02:48)
2. Simpel routing (05:39)
3. Routing fra switch (04:16)
4. Indlejret routing (05:32)
5. Privat rute (04:39)

Jeg Redux
1. Intro (04:07)
2. Butik (05:03)
3. Handlinger (02:17)
4. Reducere (07:56)
5. React-redux (03:26)

II Redux
1. Intro (03:11)
2. CreateActions (redux-actions) (09:13)
3. Middleware (07:54)
4. Håndter handlinger (05:52)
5. Vælgere (06:17)
6. Vælg igen (04:49)
7. Ænder (06:56)

Analyse af opgaver #3
1. Workshop #3 (39:13)

Uge 4 - Redux-saga

— Vi studerer Redux-saga-biblioteket. Gentag generator* funktioner. Lad os lære at køre dem parallelt.
— Lad os se på Take-metoden. Lad os undersøge udvalg som en måde at få data fra butikken på.
— Vi ser på måder at style en React-applikation på. Vi studerer bibliotekerne ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-saga
1. Intro (00:57)
2. Oversigt (02:08)
3. Generatorer (04:11)
4. Tilføjer sagaer (02:07)
5. Reager på handlinger (03:53)
6. Funktionslanceringer (02:06)

II Redux-saga
1. Intro (00:27)
2. Udførelse af effekter parallelt (03:41)
3. Træder i kraft (02:45)
4. Vælg effekt (02:04)
5. Annuller effekter (04:05)

Arbejde med stilarter
1. Intro (01:34)
2. CRA Styles (05:21)
3. Klassenavne (06:32)
4. StyledComponents (07:11)
5. BrowserList (01:37)
6. Materiale UI (08:13)

Analyse af opgaver #4
1. Workshop #4 (09:55)

Uge 5 – Formularer, CI & DI & Client fejlhåndtering

— Vi overvejer at arbejde med formularer ved hjælp af Formik, Redux Forms, React Final Form bibliotekerne.
— Vi overvejer metoder til at sikre kvaliteten af ​​produktionskoden. Vi analyserer værktøjer som: Husky, TravisCI, HerokuNow.
— Vi studerer et sæt nyttige biblioteker til udvikling (Storybook, RamdaJS, Axios).
— Vi overvejer TypeScript.

Arbejde med formularer
1. Intro (05:07)
2. Formik (08:51)
3. Redux-formular (06:22)
4. Reager endelig formular (06:36)

CI & DI & Client fejlhåndtering
1. Intro (05:07)
2. Husky (02:32)
3. CI ved hjælp af TravisCI (03:32)
4. Udsend til heroku (04:57)
5. Rollbar (02:00)

Et sæt nyttige biblioteker til udvikling
1. Historiebog (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Maskinskrift (09:31)

Analyse af opgave #5
1. Workshop #5 (13:17)

Uge 6 - Projektarbejde

— Vi udfylder ansøgningen og sender den til gennemgang.

Sådan får du et job inden for IT: tips og tricks
1. Hvordan får man et job inden for IT? Eftersøgning, samtale og prøvetid (42:21)
2. Hvordan finder man fjernarbejde og freelanceordrer? (20:12)
3. Første job i IT - hvordan skal man opføre sig? Praktikpladser, officiel beskæftigelse og arbejde "for mad" (14:11)
4. Hvordan passerer man prøvetiden? (27:10)
5. Sådan forbereder du dig til et interview hos en FAANG-virksomhed (08:52)
6. Processen med at indlæse en webside (25:19)
7. Programmer interview - alt hvad du behøver at vide (01:24:07)
8. Løsning af et problem fra et programmørinterview (19:36)
9. Frontend-udviklerinterview (01:37:17)