I dette kurset skal vi lære de grunnleggende kunnskapene for å kunne lage vår egen nettside!
Husk å skrive logg underveis i kurset. Noter deg ting du har lært, ting du lurer på, hvilke utfordringer du har hatt osv; og legg jevnlig inn skjermbilder fra både kode og nettside. Alltid gøy (og nyttig) og se progresjonen sin!
Setup
Lag en ny mappe et fornuftig sted og gi den navnet "webutvikling". Åpne mappen i VSCode ved å klikke file -> open folder.
Inne i Visual Studio Code skal vi installere en liten plugin. Trykk på de knappen med de fire boksene i menyen på venstresiden. 
Deretter søker du på "Live Server" og installerer den øverste av søkeresultatene som burde se slik ut: 
og voila! Vi er klare for å begynne å kode litt.
Din første nettside
Inne i VSCode lager vi først en ny fil ved å klikke file->new file. Du burde du få opp en tom fil: 
Klikk cmd+s (ctrl+s på windows) eller file->save for å lagre filen, og gi den navnet index.html. De fleste nettside-filer kan du kalle hva du vil, men forsiden din må alltid hete index.html.
For å komme litt raskt igang kan vi få hjelp av VSCode til å lage grunnstrukturen til HTML-filen vår. Lag et utropstegn og trykk enter. Da skal følgende kode dukke opp automagisk; eventuelt kan du bare kopiere den herfra.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Her var det mye rart på en gang! Det viktigste å legge merke til enn så lenge er at koden er delt opp i en head og en body. head innholder litt forskjellig metadata for nettsiden din, men body er hovedattraksjonen. Alt innhold som skal vises på nettsiden skal legges mellom <body> og </body>.
La oss prøve å legge til litt tekst i bodyen vår. Skriv <p>Hei, verden!</p> mellom body-tagene. p står for paragraph og forteller nettleseren at vi skal legge inn vanlig tekst.
<body>
<p>Hei, verden!</p>
</body>Forhåndsvisning
For å se hvordan nettsiden blir seende ut, klikker du på Go Live nede til høyre i VSCode.
Da åpner nettleseren seg og viser oss hvordan nettsiden egentlig ser ut.
Wow! Gratulerer med å ha laget din første nettside! Den er ikke så veldig innholdsrik enda, så la oss se litt nærmere på hvordan vi kan legge til litt mer innhold.
HTML Basics
Datamaskiner er dumme dyr, og trenger at vi skriver ting på helt spesielle måter for at de skal forstå hva vi mener. HTML står for HyperText Markup Language, og er et markeringsspråk vi bruker for å lage den grunnleggende strukturen for en nettside.
La oss ta en rask titt på koden vi lagde i stad. Den første linja, <!DOCTYPE html> , forteller nettleseren at dette er en HTML-fil. De forskjellige kodene vi bruker i HTML kaller vi for tags. For eksempel da vi skrev <p>Hei, verden!</p> brukte vi p-taggen. Legg merke til at vi nesten alltid har både en start-tag og en slutt-tag; disse ser nesten like ut bortsett fra at en slutt-tag har en skråstrek i seg.
Selv om vi stort sett kommer til å skrive all koden vår i body, så er det enkelt ting vi gjør i head, f.eks. å bestemme teksten som skal stå på fanen til nettsiden i browseren din. Det gjør vi med <title> tag`n. Prøv å endre tittelen på siden din til f.eks. <title> Min første nettside </title> og observer at teksten i fanen endrer seg. 
La oss gå tilbake til <body> for å legge inn litt mer innhold. I tillegg til å ha vanlig tekst med p-tagen, la oss lage en overskrift.
<body>
<h1>Min første overskrift</h1>
<p>Hei, verden!</p>
</body>Forhåndsvisning
For å legge inn et bilde bruker vi img tag`n. Img er litt spesiell fordi man trenger ikke både start-tag og slutt-tag. La oss teste det med et stoisk bilde av Ned Stark.For at du skal kunne bruke dette bildet på din side må du laste ned bildet og legge det i samme mappe som html-filen.
Merk at vi har lagt inn en src inne i img-tagen der vi setter URL-en til bildet.
<img src="ned_stark.jpg" />Forhåndsvisning
Attributt En attributt er en egenskap som kan legges til en HTML-tag for å endre hvordan den oppfører seg. For eksempel kan vi legge til en src-attributt på img-taggen for å fortelle nettleseren hvor den skal hente bildet fra.
Du kan endre størrelse på bilde ved å legge til en width-attributt og en height-attributt som bestemmer bredde og høyde på bildet i antall piksler.
<img width="200" src="ned_stark.jpg" />Forhåndsvisning
Det finnes veldig mange html-tags man kan lære seg å bruke. Så på tide med en liten utforskningsoppgave!
Bruk Internett og egen testing for å finne ut av hva følgende html-tags gjør:
<a><br><b><i><ul><ol>
W3Schools er en fin ressurs å bruke for å lære mer om HTML.
CSS Basics
Enn så lenge er ikke nettsiden vår veldig fargerik. For å å kunne gi nettsiden vår litt mer styling må vi innføre enda et markeringsspråk; CSS (Cascading Style Sheet).
Lag en ny fil i prosjektet ditt i VSCode og gi den navnet style.css. Deretter kopierer du følgende linje med kode og limer inn i <head> delen av html-filen din:
<link rel="stylesheet" href="style.css">CSS har litt annen syntaks enn HTML. I CSS har ikke rekkefølgen i koden noe å si, og kodene skrives på en litt annen måte.
Syntaks Syntaks betyr måten man skriver koden på. F.eks. at man bruker < and > tegn i HTML. Forskjellige kodespråk har ofte forskjellig syntaks.
CSS handler om å beskrive de HTML-elementene vi allerede har lagt inn på nettsiden. La oss ta utgangspunkt i at jeg har en p-tag med tekst som jeg ønsker å gi litt farge. Da skriver jeg følgende i CSS-filen min:
p {
color: red;
}Hvis jeg også skal gi styling til overskriden min, starter jeg bare en ny linje i CSS-filen og skriver:
p {
color: red;
}
h1 {
color: blue;
}Hvis du ikke har en p-tag eller en h1-tag i HTML-filen, vil ikke CSS-koden gjøre noe. Det er fordi CSS handler om å beskrive HTML-elementer.
Et annet eksempel på noe vi kan gjøre med CSS, er å endre bakgrunnsfargen på nettsiden sin. Da kan vi gi følgende styling til body-taggen vår:
body {
background-color: black;
}I tillegg til å skrive farger med navn, som f.eks. red eller blue, kan vi bruke hex-koder. Hex-koder er en måte å beskrive farger på som datamaskiner forstår. De består av 6 tegn, der de to første beskriver hvor mye rødt det er i fargen, de to neste hvor mye grønt det er i fargen, og de to siste hvor mye blått det er i fargen. Hvis vi ønsker å lage en mørk bakgrunnsfarge kan vi f.eks. bruke #000000, som er en farge uten noe rødt, grønt eller blått i seg. Hvis vi ønsker en hvit bakgrunnsfarge kan vi bruke #ffffff, som er en farge med fullt rødt, grønt og blått.
Bruk Internett og egen testing for å finne ut av hva følgende css-properties gjør:
marginborderfont-sizefont-familyfont-weight
Id og class
class er to attributter vi kan legge til HTML-elementer for å kunne referere til dem i CSS. Id er unikt for hvert element, mens class kan brukes på flere elementer.
La oss si et jeg har tre p-tag`er som jeg ønsker å gi litt forskjellig styling. Da kan jeg legge til en id-attributt på hver av dem, og gi dem hver sin farge i CSS. Prøv å skrive inn følgende HTML på nettsiden din:
<p id="p1">Dette er en p-tag med id="p1"</p>
<p id="p2">Dette er en p-tag med id="p2"</p>
<p id="p3">Dette er en p-tag med id="p3"</p>Og denne CSS-en:
#p1 {
color: red;
}
#p2 {
color: blue;
}
#p3 {
color: green;
}Legg merke til at vi må sette en # foran id-en i CSS-koden vår. Det er for å fortelle CSS at vi refererer til en id. Hvis vi skal referere til en class, må vi sette en . foran.
Class kan være nyttig for å gi samme styling til flere elementer. La oss si at jeg har fire p-tager og ønsker at annenhver skal være rød og blå. Da kan jeg skrive følgende i HTML:
<p class="red">Rød tekst</p>
<p class="blue">Blå tekst</p>
<p class="red">Rød tekst</p>
<p class="blue">Blå tekst</p>Og følgende i CSS:
.red {
color: red;
}
.blue {
color: blue;
}Div-elementet
<div> -tagen er en av de mest brukte HTML-tagene. Div brukes til å dele inn nettsider i mindre deler, og blir veldig viktig når vi etterhvert har lyst til å plassere innholdet vårt på spesifikke steder på nettsiden.
Hvis du prøver å legge inn en div-tag i HTML-filen din, vil du se at den ikke gjør noe. Det er fordi div ikke har noen spesiell styling i seg. Det er bare en tom boks som vi kan legge innhold i. Som et eksempel kan vi lage en div med en rød bakgrunn og hvit tekst.
<div class="redBox">
<p>Hvit tekst med rød bakgrunn</p>
</div>.redBox {
background-color: red;
color: white;
}Flexbox
Når vi legger inn forskjellige tags i HTML-koden vår, så legger de seg under hverandre på nettsiden vår. Men hva hvis jeg ønsker å plassere noen divs ved siden av hverandre slik som dette:
Eller hva med denne nettsiden? Den har en litt smalere seksjon på venstresiden for menyen, og en større seksjon til høyre for selve innholdet.
Lær deg å bruke Flex! Jobb deg gjennom Flexbox Froggy
Når du har gjort deg ferdig med flexbox froggy, kan du prøve å gjenskape disse layoutene (og gjerne legge inn noe innhold også).
Layout 1
Layout 2
Layout 3