Frontend-utvikler - kurs 47 600 gni. fra Loft skole, opplæring 3 måneder, Dato 28. november 2023.
Miscellanea / / November 29, 2023
Kunnskap og ferdigheter
All nødvendig kunnskap for en frontend-utvikler.
Portefølje
2 imponerende moderne og teknologiske prosjekter i porteføljen din.
Sertifikat
Med en poengsum som gjenspeiler kunnskapsnivået ditt og graden av innvirkning.
Carier start
Vi garanterer ansettelse til alle gode og fremragende studenter.
De gir kunnskap, ikke svar. De elsker å forklare og er i stand til å formidle kompleks informasjon på et forståelig språk. Krav til kvaliteten på koden din: du vil ikke bestå oppgaven før koden din er perfekt. De forstår andre mennesker godt og vet hvordan de skal finne en tilnærming til alle studenter. Alltid klar til å hjelpe.
Vue.js avansert webutvikling
Uke 1 - Arbeidsflyt
— Vi møter mentoren og gruppen.
— Ved hjelp av webpack-montering lager vi den valgte layouten for det endelige prosjektet.
— Vi legger ut resultatet på Github og sender det til mentoren for verifisering.
Kursåpning
1. Slik går treningen (01:09:37)
Vue. Nøkkelegenskaper
1. Teori (04:49)
2. Hello World (06:20)
3. Begivenhetshåndtering (02:38)
4. Håndtere flere hendelser (01:19)
5. Dynamiske verdier (01:30)
6. Introduksjon til direktiver (05:40)
7. Forkortede direktiver (00:37)
8. Metoder med parametere (01:36)
9. Hendelsesmodifikatorer (08:52)
10. Beregnede egenskaper (10:50)
11. Watchers (06:02)
12. Arbeide med klasser (03:37)
13. Arbeide med CSS-egenskaper (02:49)
14. Tilgang til DOM-elementer (03:50)
15. Betinget gjengivelse (04:46)
16. Gjengivelseslister (05:12)
17. Opprette en komponent (04:16)
18. Lokale komponenter (02:44)
19. Datareaktivitet (04:35)
20. Komponentegenskaper (03:52)
21. Spilleautomater (04:37)
22. Spor med scope (04:52)
23. Egendefinerte hendelser (04:27)
24. Teleporterer (02:53)
Vue. Enkeltfilkomponenter
1. Installere prosjektet. VUE-CLI (09:22)
2. Enkel filkomponent (03:18)
3. Arbeid med stiler (07:02)
4. Bestått attributter og behandlere (02:53)
5. Individuelle filer (01:26)
6. Validering av komponentegenskaper (07:35)
7. Validering av brukerhendelser (02:01)
8. Toveis datakommunikasjon (04:11)
9. Egendefinert v-modell (05:51)
10. Livssykluskroker (07:08)
11. Urenheter (04:40)
NPM
1. Hva er npm? (05:50)
2. Installere og oppdatere npm (02:33)
3. Hjelp med npm (01:28)
4. Finne og installere pakker (04:24)
5. Pakkeavhengigheter (02:09)
6. Manifestfil package.json (03:02)
7. Fjerning og oppdatering av pakker (03:02)
8. avhengigheter og devDependencies (01:51)
9. Webpack og npx (04:04)
10. npm-skript (04:02)
11. npm, git og github (02:40)
Garn
1. Garn (07:07)
Webpack. Grunnleggende
1. Teori (01:09)
2. Minimal konfigurasjon og start (04:41)
3. Filnavn (02:34)
4. Lastere (04:28)
5. Dev-server (02:43)
6. Plugins (02:34)
7. Søk etter moduler (03:18)
8. Sorsmaps (03:17)
9. Dev et al (02:42)
10. Modultyper (03:00)
11. Minimal montering (05:30)
ESLint. Konfigurasjonsoversikt
1. Introduksjon (01:26)
2. Installasjon og lansering (03:10)
3. Feilrettinger (02:04)
4. Konfigurasjon (05:21)
5. Utdataformat (00:52)
Figma for layoutdesigner
1. Figma. Grensesnitt (04:37)
2. Figma. Prosjektorganisasjon (01:32)
Flexbox
1. Introduksjon (00:45)
2. Fleksibeholder (01:43)
3. Hovedaksejustering (01:37)
4. Tverraksejustering (01:50)
5. Justere et enkelt element (01:09)
6. Flex element - container (00:53)
7. Aksretning (03:18)
8. Flerlinjebeholder (02:54)
9. Justere innhold med flere linjer (01:25)
10. Proporsjoner (02:46)
11. Kompresjonsforhold (01:24)
12. Grunnstørrelse (04:02)
13. Rekkefølge av elementer (02:40)
GIT
1. Introduksjon (07:03)
2. Komme i gang med Git (03:01)
3. Opprette et nytt depot (01:09)
4. Legge til filer til Git-indeksen (overvåkningsområde) (06:49)
5. Opprette en forpliktelse (07:17)
6. Forplikte navigering. Avbryt endringer (12:10)
7. Typisk Git-syklus (03:34)
8. Forgrening i Git (11:27)
9. Konflikter ved sammenslåing av grener (06:06)
10. Midlertidig (uten forpliktelse) lagring av data (05:25)
11. Arbeide med eksterne depoter (20:04)
12. Bruke GitHub-sider til å være vert for prosjekter (04:31)
Vue. Workshop #1
1. Start av prosjektet (05:24)
2. Overskriftskomponent (04:13)
3. Ikonkomponent (05:06)
4. Viser en liste over komponenter (02:56)
5. Slå av/på komponent (03:19)
Uke 2 – Vue.js
— Vi gjør oppsettet tilpasset.
— Vi vil implementere «Skills»-blokken i Vue.js.
— Vi vil implementere «Mine prosjekter»-blokken i Vue.js.
— Vi implementerer «Slider for reviews»-blokken ved å bruke Vue.js-plugin.
Historiebok
1. Installasjon (01:56)
2. Første historie (04:35)
3. Koble til en komponent (01:24)
4. Konfigurasjonsutvidelse (04:26)
5. Generelle stiler (02:08)
6. Historie for komponenten (05:23)
7. CDD (04:16)
8. Opprette en komponent (02:28)
9. Bruke en komponent (02:29)
10. Hendelseslogging (03:29)
11. Bakgrunnstillegg (01:41)
12. Addon Knobs (02:28)
13. Tilleggskilde (02:17)
14. Konklusjon (01:11)
JavaScript - ES6
1. Strenginterpolasjon (07:39)
2. Forenkling av metodebeskrivelser (13:35)
3. Standarder (30:08)
4. Destructuring Assignment: Objects (07:30)
5. Nye funksjoner og gamle nettlesere (13:07)
Asynkroni i JavaScript
1. Tidtakere (23:44)
2. Laster inn bilder (22:21)
3. Løfter (36:29)
4. AJAX (32:28)
Axios. Spørringsbibliotek
1. Introduksjon (02:23)
2. Sender en forespørsel (02:12)
3. Konfigurasjonsoversikt (04:30)
4. Forespørselstekst (01:43)
5. Standardinnstillinger (01:38)
6. Interceptorer (02:11)
7. Tjenester (02:33)
8. asynkron-venter (01:18)
Vue. Workshop #2
1. Forberedelse (02:39)
2. Koble til en komponent (02:16)
3. Kontrollutgang (02:38)
4. Fremdriftskomponent (05:09)
5. Forespørsel til serveren (06:38)
6. Datautgang (05:55)
Uke 3 – Native JavaScript
— Vi lager administrasjonspanelet.
— Vi studerer Storybook og bruker den i prosjektet vårt.
— Vi foretar nødvendig behandling (validering) av prosjektskjemaer.
VueRouter. Ruting i nettleseren
1. Introduksjon (04:31)
2. Link building (02:41)
3. Programvarenavigering (02:35)
4. Baneparametere (04:42)
5. Parametere som egenskaper (00:49)
6. Avanserte alternativer og 404 (03:29)
7. Nestede ruter (03:23)
8. Aktivitetsklasser (02:37)
9. Ulike rutervisninger (01:08)
10. Dynamisk import (02:00)
11. Vakker URL (02:16)
Vuex. Statssjef
1. Introduksjon (01:13)
2. Tilkobling (02:30)
3. Action (02:27)
4. Mutasjoner (02:16)
5. Getters (02:02)
6. Søknad i praksis (08:07)
7. Assistentfunksjoner (02:59)
8. Moduler (05:18)
9. Dynamiske moduler (01:38)
Spørsmål svar
Vue. Workshop #3
1. Layout (04:33)
2. Datautgang (02:42)
3. Forbereder for animasjon (02:14)
4. Knappevisning (03:45)
5. Ytterligere innhold lastes inn (11:38)
6. Vis lysbilde etter overgang (02:17)
Uke 4 – Vue.js, SPA
— Vi implementerer SPA i adminpanelet.
— Vi studerer arbeid med data gjennom applikasjonslagringen
— Vi bruker ajax for å kommunisere med api, sette opp klient-server-interaksjoner.
Autorisasjon. Tokens
1. Autorisasjonstyper (04:20)
2. GitHub OAuth (01:42)
3. Opprette en GitHub-applikasjon (02:28)
4. Motta et token (08:38)
5. Lagre data i kode (01:46)
6. Rutebeskyttelse (04:13)
Vue. Workshop #4
1. Forberedelse (01:33)
2. Opprette en handling (02:30)
3. Nedlastingsstatus (04:01)
4. Forespørsel (02:27)
5. Fjerner duplikater (03:29)
6. Rutebeskyttelse (03:23)
7. Logg ut (00:51)
Uke 5 - Øvelse
— Vi viser de lagrede dataene fra administrasjonspanelet til landingssiden.
— Vi tester komponentene.
— Gruppearbeid på et prosjekt med en mentor.
Vue.js. Komposisjon API
1. Introduksjon (01:29)
2. Generelt eksempel (03:57)
3. Sangfunksjon (01:51)
4. Reaktiv funksjon (00:55)
5. toRef-funksjon (01:35)
6. toRefs-funksjon (00:58)
7. Beregnede egenskaper (00:56)
8. klokkefunksjon (01:41)
9. watchEffect-funksjon (03:14)
10. skrivebeskyttet funksjon (00:40)
11. Testfunksjoner (02:30)
12. unref funksjon (01:27)
13. Livssykluskroker (00:58)
14. Eksempel. Prosjektoversikt (00:53)
15. Eksempel. Lastefunksjonalitet (01:20)
16. Eksempel. Kategorier (02:20)
17. Eksempel. Innledende filtrering (02:46)
18. Eksempel. Filterbytte (02:11)
19. Eksempel. Andre filtreringsfunksjoner (02:03)
20. Eksempel. Sorteringsmetode (03:05)
JS-kodetesting
1. Introduksjon (16:05)
2. Spøk (15:47)
3. Fordelene med tester (09:01)
4. Dekning (10:02)
Vue.js. Komponenttesting
1. Sette opp pakker (04:39)
2. Komponentomslag (04:13)
3. Hva du skal teste (02:48)
4. Første test (05:25)
5. Sjekker utslippshendelsen (03:44)
6. Overføre eiendommer (02:58)
7. Arbeide med skjemaelementer (05:42)
8. Generelle innstillinger (01:15)
9. Moki (05:04)
10. Koble til biblioteker (02:32)
11. Handlingstesting (03:26)
12. Tester butikken (02:53)
13. Testing med bilder (03:08)
Testing. Moki
1. Opprette en mockup (02:39)
2. Arbeide med argumenter (01:39)
3. Returverdi (02:57)
4. Moduler (04:24)
5. Tidtakere (02:05)
Vue. Workshop #5
1. Enkel komponent (03:03)
2. Komponent med butikk (05:21)
3. Testing. Forberedelse (03:20)
4. Testing. Toggler (02:38)
5. Testing. Utgaver (05:08)
Uke 6 - Gjennomføring av prosjektet
— Vi sluttfører prosjektet.
— Vi sender prosjektet inn til gjennomgang av mentorer.
— Gradering av vitnemål.
Hvordan få jobb innen IT: tips og triks
1. Hvordan få jobb innen IT? Søk, intervju og prøvetid (42:21)
2. Hvordan finne eksternt arbeid og frilansordrer? (20:12)
3. Første jobb i IT - hvordan oppføre seg? Praksisplasser, offisiell ansettelse og arbeid "for mat" (14:11)
4. Hvordan passere prøvetiden? (27:10)
5. Hvordan forberede seg til et intervju hos et FAANG-selskap (08:52)
6. Prosessen med å laste inn en nettside (25:19)
7. Programmererintervju - alt du trenger å vite (01:24:07)
8. Løse et problem fra et programmererintervju (19:36)
9. Frontend-utviklerintervju (01:37:17)
React.js webapplikasjonsutvikling
Uke 1 – Introduksjon til React.js
— Vi blir kjent med kursteamet og klassekameratene.
— Lære JSX og Virtual DOM i React.
— Vi vurderer komponenttilnærmingen og metodene for dataoverføring.
Bekjent
1. Kursåpning (05:41)
Jeg React.js
1. Hva er React (07:05)
2. Virtual DOM (02:46)
3. JSX (06:10)
4. Gjengivelse med betingelser (05:11)
5. Arbeid med lister (02:45)
6. Komponenter (02:41)
7. Rekvisitter (01:45)
8. State (06:45)
9. Hendelser (02:26)
10. React Devtools (03:58)
II React.js
1. Livssyklusmetoder (05:19)
2. Komponenter - funksjoner (01:29)
3. Ren komponent (02:54)
4. Syntetiske hendelser (01:42)
5. Arbeide med skjemaer (02:51)
6. Feilhåndtering (01:39)
Analyse av oppgaver #1
1. Workshop #1 (30:36)
Uke 2 - React.js-mønstre, testing
— Vi studerer komponenter, elementer og forekomster av komponentklassen.
— Vi vurderer Recompose-biblioteket, høyordenskomponenter og Render Props-mønstre.
— Vi forstår fordelene med tester, studerer Jest, Enzyme, Snapshots.
III Reager
1. Intro (01:43)
2. PropTypes (10:18)
3. Kontekst (05:19)
4. Refs (05:18)
5. Portals (05:02)
6. Hooks (10:42)
IV React.js
1. High Order Components (HOCs) – Higher Order Components (10:33)
2. Referansevideresending (HOCs) (04:31)
3. Gjengi rekvisittermønster (05:25)
4. HOK Library Recompose (10:32)
5. Profilering (04:02)
Testing
1. Intro (05:06)
2. Testløper (02:51)
3. Test DSL (08:41)
4. Enzym (06:57)
5. Øyeblikksbilder (03:09)
6. Testsagaer (05:01)
7. React Testing Library (06:32)
Analyse av oppgaver #2
1. Workshop #2 (27:54)
Uke 3 - Redux, ruting
— Vi studerer ruting: Enkel ruting, ruting med Switch, samt nestet ruting.
— Bli kjent med Redux-biblioteket: grunnleggende konsepter og konsepter for Store, Actions, Reducers, React-redux.
— Mellomvare anses som en måte å jobbe med Sideeffect på.
Ruting i nettleseren
1. History API (02:48)
2. Enkel ruting (05:39)
3. Ruting fra Switch (04:16)
4. Nestet ruting (05:32)
5. Privat rute (04:39)
Jeg Redux
1. Intro (04:07)
2. Butikk (05:03)
3. Handlinger (02:17)
4. Redusere (07:56)
5. React-redux (03:26)
II Redux
1. Intro (03:11)
2. CreateActions (redux-actions) (09:13)
3. Mellomvare (07:54)
4. Håndter handlinger (05:52)
5. Velgere (06:17)
6. Velg på nytt (04:49)
7. Ducks (06:56)
Analyse av oppgaver #3
1. Workshop #3 (39:13)
Uke 4 - Redux-saga
— Vi studerer Redux-saga-biblioteket. Gjenta generator*-funksjoner. La oss lære hvordan du kjører dem parallelt.
— La oss se på Take-metoden. La oss studere valg som en måte å få data fra butikken på.
— Vi ser på måter å style en React-applikasjon på. Vi studerer bibliotekene ClassNames, StyledComponents, BrowserList, MaterialUI.
I Redux-saga
1. Intro (00:57)
2. Oversikt (02:08)
3. Generatorer (04:11)
4. Legger til sagaer (02:07)
5. Reager på handlinger (03:53)
6. Funksjonslanseringer (02:06)
II Redux-saga
1. Intro (00:27)
2. Utfører effekter parallelt (03:41)
3. Tre i kraft (02:45)
4. Velg effekt (02:04)
5. Avbryt effekter (04:05)
Arbeid med stiler
1. Intro (01:34)
2. CRA Styles (05:21)
3. Klassenavn (06:32)
4. StyledComponents (07:11)
5. Nettleserliste (01:37)
6. Materialgrensesnitt (08:13)
Analyse av oppgaver #4
1. Workshop #4 (09:55)
Uke 5 – Skjemaer, CI & DI & Client feilhåndtering
— Vi vurderer å jobbe med skjemaer ved å bruke Formik, Redux Forms, React Final Form-bibliotekene.
— Vi vurderer metoder for å kvalitetssikre produksjonskoden. Vi analyserer verktøy som: Husky, TravisCI, HerokuNow.
— Vi studerer et sett med nyttige biblioteker for utvikling (Storybook, RamdaJS, Axios).
— Vi vurderer TypeScript.
Arbeid med skjemaer
1. Intro (05:07)
2. Formik (08:51)
3. Redux-skjema (06:22)
4. Reager endelig skjema (06:36)
CI & DI & Client feilhåndtering
1. Intro (05:07)
2. Husky (02:32)
3. CI bruker TravisCI (03:32)
4. Utplassert til heroku (04:57)
5. Rollbar (02:00)
Et sett med nyttige biblioteker for utvikling
1. Historiebok (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Typeskrift (09:31)
Analyse av oppgaver #5
1. Workshop #5 (13:17)
Uke 6 - Prosjektarbeid
— Vi fullfører søknaden og sender den til vurdering.
Hvordan få jobb innen IT: tips og triks
1. Hvordan få jobb innen IT? Søk, intervju og prøvetid (42:21)
2. Hvordan finne eksternt arbeid og frilansordrer? (20:12)
3. Første jobb i IT - hvordan oppføre seg? Praksisplasser, offisiell ansettelse og arbeid "for mat" (14:11)
4. Hvordan passere prøvetiden? (27:10)
5. Hvordan forberede seg til et intervju hos et FAANG-selskap (08:52)
6. Prosessen med å laste inn en nettside (25:19)
7. Programmererintervju - alt du trenger å vite (01:24:07)
8. Løse et problem fra et programmererintervju (19:36)
9. Frontend-utviklerintervju (01:37:17)