AS
← Til fagoversikten

IT2810

Webutvikling

Et prosjektbasert emne i moderne webapplikasjonsutvikling. Faget går fra webplattformens grunnlag med HTML, CSS og JavaScript til komponentbasert frontend med TypeScript og React, tilstandshåndtering, kommunikasjon med backend, kvalitetssikring og samarbeid.

  • Høst 2026
  • Prosjektbasert undervisning
  • Gruppearbeid
  • Mappeevaluering
  • Prosjekt 1 + Prosjekt 2
Se emnet hos NTNU

Kompetanse

Hva skal jeg lære?

Emnet kombinerer webteknologi, programmering og samarbeid i prosjekter der løsningene skal fungere, kunne forstås og kunne forbedres.

  1. Webplattform og grensesnitt

    Strukturere innhold med semantisk HTML og bygge responsive, tilgjengelige grensesnitt med moderne CSS.

    HTML · CSS · Grid · Flexbox · responsive design · WCAG

  2. Programmering og frontend

    Bruke JavaScript og TypeScript til applikasjonslogikk og utvikle komponentbaserte brukergrensesnitt med React.

    JavaScript · TypeScript · functional programming · React · props · state · hooks

  3. Data og applikasjonsarkitektur

    Organisere lokal og delt tilstand, lagre data i klienten og kommunisere med backend gjennom web-API-er og asynkrone operasjoner.

    Context · Web Storage · HTTP · REST · fetch · GraphQL

  4. Profesjonell utvikling

    Samarbeide med Git, videreutvikle andres kode og forbedre løsninger gjennom testing, code review, dokumentasjon og kritisk bruk av utviklingsverktøy.

    Git · testing · code review · accessibility · deployment · KI-assistanse

Webstack og dataflyt

Hvordan en moderne webapplikasjon henger sammen

React står ikke alene. Grensesnittet bygger på webplattformen og programmeringsspråkene, håndterer data i klienten og kommuniserer med tjenester gjennom API-er.

  1. Webplattform

    HTML gir innholdet struktur og mening, mens CSS former layout og presentasjon i nettleseren.

    HTML · CSS · Browser APIs

  2. Programmering

    JavaScript gir applikasjonen oppførsel, mens TypeScript gjør datatyper og grensesnitt tydeligere.

    JavaScript · TypeScript · ES modules · functional programming

  3. Brukergrensesnitt

    React bygger grensesnittet av JSX og funksjonelle komponenter, med props, events og callbacks som del av dataflyten.

    React · JSX · components · props

  4. Data i klienten

    State og hooks styrer hva grensesnittet viser. Context og Web Storage blir relevante når data skal deles eller bevares.

    state · hooks · Context · localStorage · sessionStorage

  5. Kommunikasjon

    Frontend henter og sender asynkrone data over HTTP, blant annet gjennom REST-baserte API-er.

    HTTP · REST · JSON · Promise · fetch

  6. Backend og data

    Backend gjør data og funksjonalitet tilgjengelig for klienten gjennom API-er. GraphQL introduseres senere som en annen måte å arbeide med slike data på.

    REST API · GraphQL senere i emnet

Prosjektbasert læring

Fra grunnlag til større webapplikasjon

Prosjekt 1 etablerer teknologiene og arbeidsformen. Prosjekt 2 kombinerer fundamentet i en større applikasjon med backend og mer omfattende håndtering av data og tilstand.

  1. Prosjekt 1 · Fundament

    Bli kjent med teknologiene

    Et treningsprosjekt for å forstå mekanismene og arbeidsformen i en moderne webapplikasjon.

    TypeScript · Node.js · Vite · React · components · props · state · hooks · responsive design · accessibility · Git · REST API · testing · installasjon og kjøring

  2. Prosjekt 2 · Sammenheng

    Kombinere konseptene

    En større React-applikasjon der fundamentet brukes sammen med backend og mer avanserte konsepter.

    backend · mer state management · GraphQL · accessibility · bærekraft og energieffektivt design · testing

Kunnskapsgrunnlag

Sentrale temaer

Fra struktur og presentasjon i nettleseren til komponenter som deler data og reagerer på brukerhandlinger.

Webplattform og grensesnitt

HTML beskriver struktur og mening, CSS styrer presentasjon, og JavaScript gir dynamisk oppførsel. Nettleseren kobler dette til webplattformen med HTTP, URL-er og browser APIs.

  • Semantikk og accessibility: Bruk riktige HTML-elementer, tydelige overskrifter, labels og alternativ tekst. Native knapper og lenker gir et bedre utgangspunkt for tastaturbruk enn generiske elementer; WCAG støtter vurderingen av tilgjengelighet.
  • Layout: CSS-selectors knytter regler til elementer. Flexbox organiserer primært én dimensjon, mens Grid organiserer rader og kolonner.
  • Responsivt design: Viewport, media queries, breakpoints og fleksible bilder tilpasser layouten til plassen som finnes – ikke bare ved å krympe innholdet.

JavaScript og TypeScript

JavaScript er dynamisk typet: typen følger verdien ved runtime. TypeScript legger til statisk typekontroll under utvikling og blir til JavaScript før kjøring.

  • Kodelesing: Arrow functions brukes til callbacks og datatransformasjoner. ES modules deler kode med import/export, og destructuring henter felt fra objekter.
  • Data: Interfaces og union types beskriver forventede verdier; type inference kan utlede typen. map transformerer, filter velger og reduce samler verdier.
  • Immutability: Lag nye verdier fremfor å mutere eksisterende data. Dette gjør datatransformasjoner tydeligere og er relevant når React-state oppdateres.

Verktøy: Node.js kjører utviklingsverktøyene · npm/pnpm håndterer pakker · Vite gir development server og build · ESLint analyserer kode.

React og komponenter

React er et JavaScript-bibliotek som bygger UI av gjenbrukbare komponenter. Utvikleren beskriver resultatet for gitte data fremfor å styre hvert enkelt DOM-steg.

  • JSX: HTML-lignende syntaks beskriver React-elementer inne i JavaScript eller TypeScript. Funksjonelle komponenter deler grensesnittet i tydelige ansvarsområder.
  • Props: Data sendes fra parent til child og behandles som read-only av mottakeren. Samme komponent kan gjenbrukes med ulike data.
  • Events og callbacks: Brukerhandlinger utløser funksjoner. En child kan kalle en callback fra parent slik at dataenes eier oppdaterer state.

Data ned gjennom props → handlinger tilbake gjennom callbacks → state endres → UI rendres.

State og dataflyt

State er data som kan endres og påvirker UI. useState gir lokal state; en oppdatering får React til å evaluere grensesnittet på nytt, uten at hele DOM-en nødvendigvis erstattes.

  • Eierskap: Løft delt state til nærmeste felles parent og unngå flere kopier av samme verdi. Context og useContext deler data i et subtree når prop drilling blir upraktisk.
  • Effects: useEffect håndterer side effects og synkronisering utenfor ren rendering. Verdier som kan beregnes direkte fra props eller state trenger normalt ikke en effect.
  • Web Storage: localStorage bevarer data mellom besøk, mens sessionStorage gjelder tabben eller sesjonen. Lagring er ikke React-state og erstatter ikke tydelig dataeierskap.

Gjennomføring

Arbeidsform og vurdering

Prosjektene er hovedarenaen for å utforske teknologiene, samarbeide om kode og vise hva som er forstått gjennom semesteret.

Arbeidsform

Arbeidet skjer normalt i grupper på 3–4, med veiledning, prøving og feiling og dokumentasjon av utviklingsprosessen.

  • Git og issues som del av arbeidsflyten
  • Testing og forbedring underveis
  • Medstudentvurdering av løsninger og kode
  • Dokumentasjon av arbeidet

Mappeevaluering

Prosjekt 1 · godkjent innlevering og medstudentvurdering
10 %
Prosjekt 1 · sluttvurdering
5 %
Prosjekt 2 · fire innleveringer og medstudentvurderinger
4 × 10 %
Prosjekt 2 · sluttvurdering
45 %