Hva du må lære for å kunne lage nettsider

Å lage nettsider er veldig gøy, fordi du får brukt den kreative siden ved deg selv. Likevel er det en del man skal lære seg. Her er en introduksjon til hva du må kunne for å begynne å lage nettsider, og hvordan du kan utvikle deg videre.

HTML og CSS

Første steg til å lage nettsider består av å lage innhold via bruk av HTML (hyper text markup language) og style nettsiden ved bruk av CSS (cascade style sheets). Ved å lære deg disse to, har du kommet langt. Det finnes mange gode nettsider for å få en introduksjon til HTML og CSS, blant annet w3schools. I tillegg trenger du et program å kode i. De fleste bruker her tekstredigeringsprogram slik som VScode eller Atom, men dersom du ikke har anledning til å laste ned dette, finnes det andre muligheter, slik som JSfiddle eller Codepen, men det er her vanskeligere å få lagret prosjektene dine. Et siste alternativ er å opprette deg en bruker på Repl.it.

Struktur

HTML og CSS har sin egen struktur som man må sette seg inn i. Som allerede nevnt, så kan man finne gode ressurser til dette på internett. Når det gjelder CSS finnes det flere ulike layouts. Her er mitt tips å lese om og teste ut Box Model, Flexbox og CSS Grid. Her er det også lurt å finne fordeler og ulemper med bruk av disse stilene. Det er også viktig å vite at den ene utligner ikke den andre; de kan fint brukes sammen. En god ressurs når det gjelder å lære om Flexbox og CSS Grid er css-tricks. På disse sidene finner du en god introduksjon til CSS grid, og en introduksjon til CSS Flexbox.

Design

Det å lage nettsider handler også om å lage nettsider som er attraktive. Her er det viktig å tenke på å få frem innholdet på nettsiden på best mulig måte, samtidig som besøkende liker det de ser. Da er det spesielt viktig at nettsiden ikke blir overfylt og ikke virker overveldende.

Samtidig er det viktig å tenke utenom boksen, slik at man klarer å få en unik nettside. Å hente inspirasjon er lurt. Besøk derfor ulike nettsider og ta vare på det du liker ved nettsiden. Man kan også besøke nettsider slik som Awwwards.com for å hente inspirasjon, hvor man får oversikt over prisvinnende nettsider.

Å velge riktige farger er også viktig. Dersom dette ikke er helt din sterkeste side, finnes det alternative verktøy som kan hjelpe deg med dette. Mitt favoritt verktøy akkurat nå er coolors.co. Her kan man lage fargepaletter, finne paletter som er populære, finne fargenyanser og hvilke farger som komplementerer hverandre. Her er et eksempel du kan se på.

Dynamiske nettsider

For å kunne lage dynamiske nettsider, må man bruke feks Javascript, eller JS som er forkortelsen. Dette brukes blant annet for å få ting til å skje hvis man for eksempel trykker på knapper, ønsker å animere noe eller feks ønsker å gi feedback til dine besøkende. Javascript blir også brukt for å lagre cookies på hjemmesiden slik at tilbakevendende brukere får en bedre opplevelse. For å kunne lage dynamiske nettsider er det viktig å lære seg et godt kodegrunnlag for Javascript og lære seg hvordan JS jobber sammen med det som kalles HTML DOM. Ved å besøke se på w3schools sine Javascript eksempler kan du finne gode tips til hvordan du kan få HTML og JS til å være samarbeide.

Responsive nettsider

Å lage nettsider nå til dags betyr at du må få hjemmesidene til å fungere på alle slags mobile enheter. Før i tiden gjaldt dette kun datamaskiner, men nå skal nettsiden se fin ut på alle slags flater, slik som mobiler, tablets, bærbare PCer og stasjonære PCer. Disse har alle forskjellige type størrelser på skjermene, og du må derfor justere utseende. Dette gjør du ved bruk av @mediaqueries. Det finnes mange forskjellige tips og oppskrifter på hvordan du gjør dette, slik som denne guiden til hvordan du bruker CSS media queries. I tillegg må du tenke på om du skal designe først for mobil (mobile first), eller først for PC (desktop first). Det er delte meninger om dette og det handler rett og slett om smak og behag. Jeg har prøvd begge deler, og har funnet ut at for meg gjelder “mobile first” fordi jeg da kan jobbe meg oppover. Dette er noe man må eksperimentere med.

Webapper

Det er gøy å kunne mestre noe, og ved å bruke HTML og CSS får man raske resultater ved å plotte inn kode. Endelig har man laget noe, og det trenger ikke ta mye tid. Men ikke la deg stoppe ved å kun lære deg HTML, CSS og JS, for du kan alltids utvide kunnskapen din til flere JS rammeverk. Akkurat nå er Vue.js veldig populært til å lage webapper. Så hva i alle dager er en webapp?

Svært forenklet er en webapp en programvare som sender innhold en bruker ønsker å se. I stedet for å bytte fysiske sider når man klikker på ulike lenker, er det kun selve innholdet på nettsiden som endres. På denne måten lastes innholdet raskere enn ved å besøke statiske nettsider (kun HTML og CSS slik som er forklart helt i starten av dette innlegget). Man bruker fremdeles HTML og CSS i webapper også, men i tillegg koder man som oftest i ulike rammeverk, slik som Vue.js som er et Javascript rammeverk og Django som er et Python rammeverk. Her kan du lese mer om forskjellen mellom nettsider og webapper.

Rammeverk og biblioteker

I dette innlegget har jeg hovedsaklig fokusert på HTML, CSS og Javascript, men det finnes andre webspråk enn dette. Her kan også Python være aktuell, så fortvil ikke dersom du lærer Python i løpet av studiet. Både Javascript og Python har en del rammeverk og biblioteker som kan brukes for å lage webapper og for å forenkle kodingen. For Javascript har man rammeverkene Vue.js, Node.js, Angular.js, mens for Python har man blant annet Flask og Django. I tillegg har man biblioteker man kan importere slik at man kan øke funksjonaliteten til det man ønsker å oppnå. For Javascript har man feks React og og jQuery, mens for Python har man feks Tensorflow og Scipy, selv om disse har mer funksjon når det gjelder maskinlæring.

Når du har lært deg det grunnleggende innenfor Javascript, eller Python hvis det er det du lærer, er det ingen feil i å begynne å utforske disse rammeverkene. Det finnes også utallige gode ressurser her også.

For å få mer informasjon om hvordan du kan utvikle dine ferdigheter innenfor web, ta en liten titt på Andreas Mehlsens oversikt over webskills.