Designar
& Frontend-utviklar

Design og utvikling av nettside

Informasjonsportal for alt innan romfart

SpaceX

Oppgåva

Eksamensoppgåva etter første år av Frontend-studiet.

Sentrale tema

JavascriptFetch APIHTMLCSSGitUX DesignUI Design

Om prosjektet

Dette eksamensprosjektet hadde som mål å vise all samla kunnskap eg hadde lært gjennom det første året mitt på Frontend-studiet hos Noroff School of technology and digital media.

GÃ¥ til nettsida

Last ned prosjektrapport (eng)

Prosjektet handla om å bygge ei microside for SpaceX – med sterk forkus på romfart og -teknologi, og for å auke merksemda rundt dei ulike romprogramma som pågår rundt om i verda.

spacex_phone_002.png Oppgåva gjekk ut på å lage ei microside for SpaceX

Det skal vise min evne til å planlegge, designe og utvikle ei «microsite». Dette inkluderer planlegging av prosjektet si gjennomføring og tidsramme, samt vise tillært evne og kunnskap rundt god bruk av HTML, CSS og Javascript for å kunne bygge ei så bra side som mogleg.

spacex_desktop_001.jpg Framsida til microsida i desktop-format

Sida er bygga med HTML, CSS og vanilla Javascript. Ingen rammeverk er nytta, men nokre animasjonar er laga med hjelp av GSAP.

spacex_astronaut_001.jpg Ei av sidene henter data om kor mange menneske som er i verdsrommet til ei kvar tid, frå ein API.

Prosjektet var svært spennande og lærerikt. Eg fekk møte realisike hindringar i arbeidet med å hente inn uforutsigbar data frå ulike APIar, utfordringar rundt responsive layout, og optimalisering av innhald. Eg møtte utfordringane med å gjere mitt beste, og lærte svært mykje undervegs. Lærdom eg gler meg til å ta med inn i arbeidslivet.

spacex_mars_001.jpg Ei av sidene henter data frå NASA sin vêr-sonde på overflata av Mars, og visar dei vêrdata frå den siste veka.

Hovudmålet mitt gjennom dette prosjektet var å øve på varierte layout-teknikkar, og samstundes tvinge meg sjølv til å gjere mykje meir med Javascript enn det eg hadde gjort tidlegare.

spacex_skissebok_002.jpg

spacex_skissebok_001.jpg Skisseboka var mykje brukt i starten av prosjeketet.

Idéar blei noterte ned, og små skisser viser tankar om korleis innhaldet kan presenterast.

Eg fokuserte ein del på å kombinere ulike CSS layout-teknikkar som grid, flexbox, tilpassa scroll-bars, clamp(), scroll-snap-type, animasjonar med meir.

spacex_solarsystem_001.jpg Ei side viser ein oversikt over alle planetane i solsystemet vårt. På mobil viser dei som kort ein swipar mellom med hjelp av css-funksjonen scroll-snap-type.

For å utfordre meg meir når det kom Javascript, så valde eg å hente data frå eit større antall ulike APIar enn det som var minstekravet i oppgåva, for så å vise dette på nettsida (DOM-manipulation).

Eg er alt i alt nøgd med kva eg fekk utretta i løpet av dei fem vekene eksamen pågjekk. Sjølv om eg alltid ser tilbake på slike prosjekt og tenker «skulle ønske eg gjorde slik og slik». Men det ser eg på som eit godt teikn på at eg har lært noko. Og det er noko eg verdset.

spacex_macbook_001.png

Sjå alle prosjekt