Gå til hovedinnhold

Frontend

Introduksjon​

Hvordan kan massevis av tekst bli til et nydelig brukergrensesnitt?

Frontend utvikling omfatter alt som har med brukergrensesnittet å gjøre. Det vil si alt som brukeren ser og interagerer med. Dette inkluderer blant annet:

  • Tekst
  • Media (bilder, video, lyd)
  • Knapper, linker og andre interaktive elementer
  • Animasjoner

Som en frontend utvikler er det din jobb å ta designet fra en designer og gjøre det om til kode som kan kjøres i en nettleser. Dette gjøres ved hjelp av HTML, CSS og JavaScript.

Hva er HTML, CSS og JavaScript?​

HTML, CSS og JavaScript er de tre kodespråkene som brukes til å lage nettsider. HTML brukes til å strukturere innholdet på siden, CSS brukes til å style innholdet og JavaScript brukes til å legge til interaktivitet.

Hvordan laster nettleseren inn en nettside?​

Dette er nyttig å forstå for å unngå forvirring når du skal lære deg HTML, CSS og JavaScript.

Grunnleggende HTML​

HTML står for HyperText Markup Language. Dette er selve skjelettet til en standard nettside.

Elementer​

I all hovedsak består HTML av elementer som forklarer hvordan innholdet skal formateres av nettleseren. Elementer som åpnes <p> skal som regel lukkes </p>, med noen unntak.

Elementer kan ha attributter som kan gi mer info til nettleseren, f.eks. href="" som viser hvor en lenke leder til (se eksempel under). Ofte blir class="" og id="" brukt i sammenheng med CSS og JavaScript.

Eksempel

<h1>Overskrift</h1>
<p>
  En paragraf med en
  <a href="https://eksempel.no">lenke</a>
</p>
<button id="knapp" onclick="pressed()">En knapp</button>

Prosjekt​

Tada ✨! Din første nettside.

Du skal lage din første lokale nettside! Lag en HTML fil som inneholder

  • En overskrift
  • En paragraf
  • En liste med tre elementer
  • Et bilde
  • En link til en annen side på internett

Og åpne den i nettleseren din. Kanskje ikke verdens peneste side, men selv Picasso måtte starte et sted!

Hvis du lager noe gøy, del det gjerne med oss på Discord!

Kompetansetest​

Det har kanskje vært mye informasjon å ta inn. Ta en pause og test deg selv på det du har lært så langt, etterpå har vi et lite prosjekt du kan prøve deg på.

Frontend introduksjon - Kompetansetest (1/5)

Hva er jobben til HTML?