Pakkekos

Er det en ting som er koseligere enn å pakke inn julegaver, så er det å pakke inn bursdagsgaver! Jeg syns det er så gøy! Jeg pleier å sette på en koselig serie mens jeg pakker inn, eller hører på podcast eller musikk. I tillegg er jeg veldig glad i generelt det å gi gaver til noen.

Så nå er alle gavene for dette halvåret kjøpt og pakket inn! De blir så pen pynt og, syns jeg. Synd jeg skal gi fra meg de fleste av dem allerede nå til påsken. Siden tre av dem er til familie, så leverer jeg dem når jeg skal besøke dem neste uke. 

Men foreløpig er de pen pynt! Jeg fant papiret på Søstrene Grene, og måtte ha det. Så det blir vårlige pakker herfra framover!

dav

dav

 

Ha en superduper torsdag videre!

Lær å lage hjemmeside – Leksjon 4

Litt videre CSS

Siden forrige leksjon var så tørr og kjedelig, tenkte jeg at vi skulle ta for oss litt morsommere ting denne uka. Vi skal se på litt forskjellig bruk av farger, størrelser, bilder, og hvordan disse kan endre seg når man for eksempel holder musepekeren over et objekt. 

Vi begynner med å sette opp litt forskjellige knapper vi skal style. Følg instruksjonene fra forrige leksjon (her) om å lage ny mappe med nye filer (index.html og style.css). Pass på å opprette en ny mappe til dette prosjektet! Kall for eksempel mappen “styletesting” hvis du ikke kommer på noe eget navn. Kopier og lim inn denne teksten i et nytt HTML-ark:

<!DOCTYPE html>
<html>
<head>
    <title>Stiltesting</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,300' rel='stylesheet' type='text/css'>
</head>
<body>
    <a class="button button1" href="#">Knapp 1</a>
    <a class="button button2" href="#">Knapp 2</a>
    <a class="button button3" href="#">Knapp 3</a>
    <a class="button button4" href="#">Knapp 4</a>
</body>
</html>

Her ser vi eksempel på bruk av class-attributten. Den brukes for å sette en klasse på en tag. Klassen gjør av vi kan style denne tagen spesifikt. Man kan ha mange klasser ved å bare legge navnene etter hverandre med mellomrom slik jeg har gjort. Her kan man se at alle a-tagene har klassen “button”. I tillegg har hver enkelt tag en til klasse som er unik for hver enkelt knapp (“button1”, “button2” osv). I tillegg har a-tagen en attributt som er href. Det er her lenken til knappen skal ligge. Nå er det bare en hashtag. Det gjør at når man trykker på den, så skjer det ikke noe veldig spennende, annet enn at url’en legger på en # bakerst, og det gir ingen utslag. 

Lagre dokumentet og åpne siden i nettleseren. Nå skal resultatet se slik ut: 

 

Altså er de ikke veldig spennende enda. 

 

Margins, paddings og border

Noen veldig grunnleggende stylinger er padding og margins. Disse brukes hele tiden, men likevel er det mange som blander dem, selv etter å ha kodet med CSS i mange år. Begge brukes nemlig til å legge til luft på hver sin måte.

Opprett et style.css-ark, eller åpne det du har om du alt har opprettet det. Legg så til denne koden øverst: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
}

Legg merke til at jeg nå ikke lenger styler a-tagen i seg selv. Jeg styler klassen jeg har satt på a-tagen. Dette gjør jeg ved å sette et punktum og skrive klassenavnet etter. 

Ellers er egentlig dette veldig greit: 

  • Padding lager luft fra skriften og ut til rammen rundt elementet. Dette gjør den selv om du ikke har noen ramme, for det er alltid en “usynlig” ramme rundt alle elementer. Du kan også si at paddingen er lufta på innsiden av en boks eller en knapp.
    Her er paddingen satt til 10px opp og ned, og 20 px til høyre og venstre. Du kan sette padding til alle retninger. Skriver du “padding: 10px” vil det bli 10px luft til alle kanter. Skriver du “padding: 1px 2px 3px 4px” vil det bli 1px opp, 2px til høyre, 3px ned og 4 px sil høyre.
  • Border er rammen rundt elementet, i dette tilfelle knappen. Den settes med tykkelse først (her 1px), utseende (her solid) og farge (her black). 
  • Margin er luften som går utenfor elementet. Altså luft til andre elementer rundt objektet. Den kan settes på samme måte som padding. Her har jeg valgt at det skal være 20px avstand til alle kanter rundt elementet. 

Her har jeg prøvd å illustrere:

Legg deretter til disse linjene: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
    display: inline-block;
    text-decoration: none;
    color: black;

    font-family: Raleway,sans-serif;

}

Forklaring på stylingene: 

  • Vanligvis ligger a-tager på en linje i teksten, altså det er tekst som følger teksten “inline”. Du kan se for deg når du lager en link i ditt eget blogginnlegg, en mail eller i word. Dette gjør at vi ikke kan sette margin på denne uten at det blir rart og ser feil ut, fordi den skal oppføre seg som et vanlig tekst-element. 
    Vi kunne her ha satt “display: block”. Når noe er satt som block (slik som h1, h2 og h3 er) vil den ta hele bredden av siden med mindre noe annet er spesifisert, og altså være som en boks. 
    Her gjør vi en mellomting. Vi setter “display: inline-block”. Det betyr at vi ønsker at elementene skal være satt inline, men som blokker. Da legger de seg på rekke med teksten, men man kan fortsatt legge på stylinger som margin på dem. 
  • “Text-decoration: none” fjerner understreken som naturlig kommer under en a-tag. 
  • “color: black” setter tekstfargen til svart. 
  • “font-family: Raleway,sans-serif” setter skrifttypen til Raleway. 

 

Forskjellige knapper

Nå har vi fått på plass de generelle stilene. Dette har nå gitt alle a-tager som opprettes med klassen “button” dette utseende: 

Altså bitte litt mer spennende enn før. Men fortsatt litt kjedelig! Vi styler den første knappen. Lim inn denne teksten i CSS-arket: 

.button1
{
    background-color: #6c757d;
    border: 1px solid #5a6268;
    color: #ffffff;
    border-radius: 2px;
}

Noe som er nytt her er at fargene er skrevet i hex. Det vil si at de er en tallkombinasjon med # foran seg. Googler man “Colorpicker” får man opp en pen fargevelger. Velg da en farge, kopier tallet som står etter # og lim inn der du vil bruke en farge. 

En annen ny ting jeg har lagt til er “border-radius: 2px”. Dette gjør at hjørnene på kantene blir avrundet med 2 piksler. 

Nå stylet vi én spesifikk knapp. Dette gjorde vi ved å bruke knapp 1 sin andre klasse, altså ordet som var skrevet etter “button”. 

Vi kan style resten slik: 

.button2
{
    background-color: lightpink;
    border: 4px solid lightpink;
    border-radius: 20px;
}

.button3
{
    border: 2px solid #e88f8f;
    color: #e88f8f;
}

.button4
{
    background-color: #f8f8f8;
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #444
}

 

Her har jeg brukt forskjellig styling på alle knappene, med bare noen få linjer kode. Les nøye gjennom all koden for å forstå hva den gjør. Dette blir resultatet: 

 

Hover

Nå skal vi gjøre noe som er gøy! Vi skal bestemme hva som skal skje når vi holder musepekeren over knappene. Vi skal bruke noe som heter et psuedo-element. Enkelt og greit “hover”. 

Først legger vi på en linje kode i .button-stylingen: 

.button {
    padding: 10px 20px;
    border: 1px solid black;
    margin: 20px;
    display: inline-block;
    text-decoration: none;
    color: black;
    font-family: Raleway,sans-serif;
    transition: 0.5s;
}

 

Transition gjør at hover-effekten vil bruke 0,5 sekund. Dette skaper en kul effekt. 

Hover brukes ved å sette “:hover” etter klassenavnet på elementet man skal style. Kopier og lim inn denne teksten nederst i CSS-arket nå: 

 

.button1:hover
{
    background-color: #5a6268;
    box-shadow: 0px 0px 5px #5a6268;
}

.button2:hover
{
    border-color: #ffd5db;
    box-shadow: 0px 0px 8px lightpink;
}

.button3:hover
{
    background-color: #e88f8f;
    color: #ffffff;
}

.button4:hover
{
    background-color: #eee;
}

 

De nye stylingene her er border-color og box-shadow. Border-color er bare fargen på borderen. Man må altså ikke deklarere alt med borderen ved å ha “border: tykkelse, type, farge”. Man gå rett til “border-color”, slik som her. 
Box-shadow lager skygge på boksen. Den settes med “box-shadow: pixler til høyre, pixler ned, hvor langt ut den skal gå, farge”. Ønsker du at skyggen skal gå oppover, må du bruke negative pixler der du legger inn pixler ned. 

Lagre nå og se hvor forskjellige hover-effektene er!

 

Bilder

Som siste del av leksjonen må jeg vise hvordan man legger inn et bilde på hjemmesiden.

Da bruker du en html-tag som heter <img>. For at denne skal bli et bilde, må du legge inn en “src”-attributt. Du kan legge inn bilder som ligger i samme mappestruktur (altså lokalt på din datamaskin) eller fra internett. Det gjør du slik: 

1. Høyretrykk på bildet du ønsker og velg “Kopier bildeadresse”:

2: Lim inn bildeadressen som src:

 

img-tagen er rar på den måten at den ikke trengs å lukkes, slik de andre tagene må. 

For å endre størrelse på bildet, kan du legge inn dette i CSS’en:

img
{
    width: 500px;
    display: block;
}

 

Når jeg justerte på bredden, fulgte høyden etter, slik at bildet ble riktig skalert. I tillegg la jeg inn en “display: block” for å få bildet til å ligge på en egen linje. Nå er det “holdt av” plass til bildet på hele bredden av nettsiden. 

 

Det var litt mer CSS og litt nye tags. Håper du følger med neste uke og, da tenkte jeg å gå gjennom litt farger og skrifttyper!

Hvis du vil se all min kode for å sammenligen og se hvordan resultatet med hovereffekter ble, kan du trykke her

 

Alle leksjoner: 

 

#programming #html #css #webutvikling #web #leksjon “opplæring #webpublisering #hjemmeside #koding 

Outfit – Kjærestens skjorte

I går leste jeg blogger og kom over det innlegget her. Først tenkte jeg “Så sykt kult på henne! Det hadde jeg garantert ikke kledd selv”. Så tenkte jeg “Hehe, hadde jo vært gøy å prøve da”. Til slutt tenkte jeg “DET skal jeg bruke i morgen!”. 

Jeg ble rett og slett ordentlig inspirert. Jeg nærmest sprang til klesskapet og dro ut den kuleste skjorta jeg fant, en burgunderrød. Jeg ble faktisk fornøyd, og antrekket var veldig komfortabelt, i og med at skjorta var så baggy! 

dav

dav

dav

Ikke bare stjal jeg klærne til samboeren min, da jeg kom hjem fra jobb i dag måtte han også ta bilder 🙁 Og det var ikke så få bilder heller, for jeg ble aldri fornøyd med hår som må vaskes i dag og ni timer gammel sminke. 

dav

dav

dav

 

Håper jeg kan inspirere videre, slik jeg selv ble! Nå skal jeg lage middag til oss som takk for hjelpen i dag.

 

 

To do-list: Uke 11

dav

God mandag!

Denne uka har jeg som mål å komme ordentlig inn i trening, og har planlagt fire treninger denne uka. Neste uke skjer det så mye og så skal jeg til mamma og pappa for påskeferien, så da blir det lite trening. Jeg savner litt å ha fokus på trening, så da får jeg prøve på det for bare én uke i det minste, hehe. 

Utenom det er det dette jeg skal gjøre:

Jeg gleder meg så fryktelig til påske! Til helga er det bare en uke igjen, og siden jeg ikke skal være hjemme i ferien, har jeg lyst til å pynte litt tidligere. Da er det nødvendig med påskepynt! Jeg tenkte å kjøpe noen billige plastegg på Nille og male dem og pynte dem i mine farger! Det blir gøy. I tillegg må jeg kjøpe bursdagsgave til mamma. Så det får bli en handletur på lørdag.

Hva skal du denne uka? 

#todo #liste #listelykke #todolist #checklist #gjøreliste #mandagsliste #inspo #listeinspo

Uka som gikk – Uke 10

Ukas høydepunkt: 

Høydepunktet denne uka var det spontane møtet med noen venner jeg treffer altfor sjeldent! De flytter fra land til land, og nå som de endelig er hjemme for en lengre periode er det dumt at jeg ikke treffer de oftere. I går spurte de spontant om vi skulle finne på noe, så vi tok noen (mange) runder UNO på Retro. Det var kjempekoselig! Sett bort fra at jeg ikke vant en eneste av de sikkert 10 rundene vi spilte. Det må gjentas (slik at jeg kan få revansj)!

mde

Ukas stolteste øyeblikk: 

Da jeg publiserte endringene på en side jeg har jobbet med en god stund. Det var nok ingen andre som la merke til det, men det var en automatisk bildecrop-funksjon jeg hadde slitt med lenge som jeg endelig fikk til å fungere! Og så syns jeg designendringene jeg la inn var bra. De ble hvert fall godkjent av kunden, og da må det da være godt for noe. Det viktige er at kunden er fornøyd og jeg selv er stolt! 

Ukas høydepunkt på jobb: 

Jeg fikk holde brukerkurs med en kunde kunde alene for første gang. Det var veldig nytt og spennende. Selv om jeg sikkert stotret litt og var veldig usikker på noen av spørsmålene, så følte jeg at det gikk veldig bra! Det virket også som kunden var fornøyd. Det er gøy å få utfordret seg selv litt med litt nye ting innimellom. 

Ukas gave

Denne fikk jeg jo ikke egentlig denne uka, jeg fikk den i julegave. Men den ble endelig tatt i bruk, etter å ha godgjort seg litt i yttergangen først. Det er en wunderbaum med lukt av vaniljeis! Den lukter såå godt! Takk, Silje! 

Ukas mest leste innlegg: 

Ukas mest leste innlegg denne uka ble det innlegget her med min To Do-liste for denne uka. Da kan jeg samtidig si at jeg har fått fullført alle punktene, så vet dere det og!

Ukas oppskrift: 

Vi lagde en sunnere versjon av lørdagspizzaen med grov bunn, lettost og sunnere, hjemmelaget hvitløksdressing, laget på mager kesam og lett majones. Det ble kjempegodt! Jeg tenkte å lage et innlegg med full oppskrift senere. 

dav

 

Ukas treningsøkt: 

Jeg skrev om ukas beste treningsøkt i et innlegg her. Her er uansett det fulle programmet jeg kjørte: 

4 runder av: 
5 pullups (lov med strikk etterhvert) 
10 benhev
15 pushups
30 bokshopp
15 sek sideplanke hver side
20 situps
10 kettlebellswing

 

dav

Ukas serie

Altered Carbon slår faktisk veldig mye jeg noen gang har sett av serier. Det er en fantastisk bra drama/sci-fi serie som gir et samfunnskritisk perspektiv på hvor vi er på vei hen og om menneskers grådighet. I de første episodene syns jeg det var voldsomt mye tråder og mye rart som skjedde og komplisert plott. Men de klarte å nøste alt sammen til en fantastisk serie. Da siste episode var ferdig satt jeg og samboeren min helt stille en liten stund før en av oss bare “Shit. For en serie.”. Den setter en pekepinn på hva et virkelig klasseskille mellom fattig og rik er, i en verden der fattige er forbruksvare og rike kan leve i hundrevis av år, og ikke trenger å følge noen regler. Virkelig kvalitet! 

 

God søndag videre! 

Crossfit – Overkropp fokus

God lørdag! 

For en fantastisk fin lørdag det er her i Skien i dag. Jeg har sittet og solt med gjennom vinduet, siden vi ikke har noen veranda å sitte på. Det har blitt ordentlig godt og varmt plutselig, og det er så utrolig deilig. 

Det var nesten litt skamfullt å trene inne i dag, men det er jo litt mindre jobb å dra bort på treningssenteret, enn å finne et sted som har skiløype, klare å finne en måte å få skiene inn i bilen uten at noen dør i en eventuell krasj på, dra dit og stå på ski uten smøring. Men akkurat nå angrer jeg biiittelitt på at vi ikke gjorde det, hehe!

Men man skal aldri angre på en overstått trening, og i hvertfall ikke når den ble ordentlig bra, som i dag. Jeg har ikke trent crossfit på veldig lenge nå, så jeg hadde et ganske enkelt og greit program. Det var perfekt slitsomt.

dav

Slik så programmet ut: 

4 runder av: 
5 pullups (lov med strikk etterhvert) 
10 benhev
15 pushups
30 bokshopp
15 sek sideplanke hver side
20 situps
10 kettlebellswing

Til sammen, uten å inkludere pausene mellom hver runde, tok dette 22:07 minutter. Man blir så sliten mens man holder på, så man blir helt slått ut etter hver runde. Da er det lov med litt pause, før man starter på igjen. Det ble ikke en fryktelig lang treningsøkt, men jeg gjorde litt ekstra rygg- og mageøvelser etter crossfiten, for å få litt ekstra ut av treningen.  Det var veldig godt å bli ferdig!

dav

Nå er det bare kos som står på agendaen! Ha en god lørdag videre! 

 

#crossfit #trening #motivasjon #program #lørdag #pullups #mage #overkropp #pushups #situps

11 ting å gjøre før du dør

SAMSUNG

1. Dra til et eksotisk sted du alltid har villet besøke

Dra til Indonesia, Vietnam, Cuba eller et annet spennende sted med en helt annen kultur, og utforsk og opplev! 

2. Utfordre deg selv med noe skummelt og spennende

Strikkhopp, fallskjermhopp, eller noe så enkelt som å holde en slange eller dra i en spennende klatrepark. Du lever bare en gang! Opplev noe som får opp pulsen litt.

 

3. Dra på standfestival 

Lå håret flagre, beveg deg til musikken og nyt en festival med vennene dine! 

4. La fortid være fortid

Lær å glemme fortiden. Ikke nag ved ting i fortiden som gjør vondt å tenke på. Ikke angre. Gjort er gjort, lær deg å starte dagen med blanke ark. Gi slipp!

 

5. Ta surfekurs på Bali

Eller et annet varmt og godt sted med strender! Eller et annet kurs! Opplev og utforsk.

6. Sove på ishotell

Hvor kult hadde det ikke vært å fått sove en natt på ishotell? Eller bare dra på en isbar? Det virker så utrolig spennnede!

 

7. Dra på roadtrip – Se Norge!

Norge har så mye å by på, og så mye å se. Planlegg en ferie med opplevelser! Alle plasser har sine spennende kulturminner, museer eller andre ting å se. Og så mye flott natur vi har. 

 

8. Dra på storbyferie

En skikkelig storbyferie med vennene eller kjæresten med museer, shopping, restauranter og utesteder til New York, London, Amsterdam, Roma, Berlin.. Utvalget er stort! 

 

9. Dra på eventyr

Pakk bagen og dra på eventyr. Dra på backpacking eller bare sett opp et telt i nærmeste skog. Utforsk! Klar deg kanskje uten teknologiske hjelpemidler, om du vil! Eller bare pakk sammen bilen og kjør et sted. Uten noe planlegging. Slik som et skikkelig eventyr! 

10. Opplev en stor idrettsbegivenhet som OL, Tour de France eller VM-finale i fotball

En større folkefest skal man lete lenge etter! Det er spenning, det er varme, det er samhold. 

 

11. Dra på ølsmaking i Brussel

Dra til ølets hovedstad og smak deg til ditt favorittøl!

 

Det er så mye å gjøre, og tiden går så fort! Grip dagen!

Lær å lage hjemmeside – Leksjon 3

I tidligere leksjoner har vi vært gjennom grunnleggende “tags” og hvordan style dem. Nå skal vi gå litt videre og se på litt mer av logikken rundt. 

Tidligere har vi brukt et hjelpemiddelprogram for å få koden vår til å fungere som den skal. Nå skal vi klare det uten dette hjelpemiddelet, på skikkelig vis. “Nettsiden” kommer bare til å være tilgjengelig lokalt på din maskin, med mindre du laster den opp til en server. 

Bruke en ordentlig tekst-editor

En nettside består egentlig bare av bare tekstdokumenter. Nå som vi bare fokuserer på HTML og enkel CSS blir det også veldig lett å holde oversikt. Dersom du ikke har fått med deg noen tidligere leksjoner, kan du scrolle nederst i dette innlegget. Der har jeg linket til de tidligere leksjonene. 

Slik gjør du: 

  1. Først og fremst trenger du en ordentlig tekst-editor. Du KAN bruke Notepad (til de med windows), men jeg anbefaler på det sterkeste å bruke et program som heter Sublime. Det er kjempeenkelt og bra! Jeg brukte det da jeg først lærte meg koding for første gang, og jeg bruker det enda. Du laster det ned helt 100% gratis her (det er trygt og tar ikke stor plass på maskinen din). 
  2. Stå i en mappe du ønsker å samle alle prosjektene dine i. Du kan for eksempel ha en mappe som heter “Webutvikler kurs” eller lignende. I denne mappen oppretter du en ny mappe som heter “MyFirstWebsite” eller noe annet uten mellomrom eller æ, ø eller å. Du oppretter en ny mappe ved å høyretrykke og velge “Ny mappe”.
  3. Åpne Sublime (eller det tekstverktøyet du bruker)
  4. Velg “Ny fil”. 
  5. Viktig! Lagre den nye filen som “index.html” i mappen du opprettet. Det er viktig at navnet på filen slutter med .html, for hvis ikke skjønner ikke maskinen din at dette er html-kode. 

For å se om det hele fungerer, limer vi bare inn teksten vi har jobbet med i de forrige leksjonene: 

<!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width”>
  <title>JS Bin</title>
  <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”>
</head>
<body>
  <h1>Dette er en overskrift</h1>
  <h2>Dette er en mindre overskrift</h2>
  <h3>Dette er en liten overskrift</h3>
  <p>Dette er en paragraf</p>
  <a href=”http://frkfrontend.blogg.no”>Dette er linken til bloggen min</a>
  <p>Dette er en lenger tekst som inneholder <strong>tykk tekst</strong> og <i>kursiv</i> tekst.</p>
</body>
</html>

 

Det skal se ca. slik ut: 

Jeg har lastet ned et spesielt tema til Sublime, så helt likt blir det nok ikke. Men sjekk at koden fargekoder seg etter hva som er tager, attributter og tekst. Her kan dere se at tagene (feks a) blir røde, attributtene (feks href) blir gule, innholdet til attributtene (feks “http://frkfrontend.blogg.no”) blir grønt. Det er noe av det som er så praktisk med å bruke en ordentlig tekst-editor. 

 

Se nettsiden i nettleser

Nå skal vi endelig få opp nettsiden i nettleseren. Sånn til advarsel: Dette blir ikke en offentlig nettside, og linken til den kommer kun til å fungere lokalt på din datamaskin. 

Gå inn i mappen du lagde. Der skal index.html-filen ligge og se ca. slik ut: 

eller med bilde av nettleseren din som ikon. 

Høyreklikk på denne, hold over “Åpne med” og velg nettleseren du bruker (for eksempel Chrome eller Opera). Dersom dette åpner seg har du gjort riktig:

 

Legge til styling

Nå skal vi legge til styling, og dette har vi tidligere gjort veldig enkelt i jsbin.com. Når man skal gjøre det ordentlig er det ikke like enkelt, men noe av logikken har vi vært borte i før, da vi la til skrifttype fra Google. 

1. Opprett et nytt dokument i Sublime og kall det “style.css”. Pass på å lagre det i samme mappe som index.html.

2. Disse dokumentene er ikke automatisk knyttet sammen. For å få til dette må du legge til denne setningen i <head>-tagen:

<link href=”style.css” rel=”stylesheet”>

<head> skal altså nå se slik ut: 

<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width”>
  <title>JS Bin</title>
  <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”>
  <link href=”style.css” rel=”stylesheet”>
</head>

Dette lenker altså index.html opp mot style.css. Den forteller i tillegg at linken er av type “stylesheet” som er et CSS-ark. 

3. Legg til stylingen vi lagde forrige uke i CSS-arket. Dersom du har mistet det, så har jeg det jeg laget her: 

body
{
  background-color: white;
  font-family: Raleway,sans-serif;
}

h1
{
  color: #555;
  font-weight: 200;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 2px
}

h2
{
  color: yellowgreen;
}

h3
{
  color: hotpink;
}

a
{
  background-color: DarkCyan;
  color: white;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
}

4. Oppdater nettleseren din igjen. Nå skal stylingen også være oppdatert til å være likt som vi gjorde forrige gang! Dersom det nå ikke er stylet, så ta kontakt med meg, så skal jeg se hvor feilen har oppstått.

 

Når vi nå først har vært borti <head>-tagen, kan vi gjøre en annen justering først som sist. Nå som vi bruker nettleseren kan vi gjøre om på denne tagen: 

<title>JS Bin</title>

Det som står inne i denne tagen er nemlig det som dukker opp i fanen øverst i nettleseren. Endre den for eksempel til 

<title>Webdesignkurs</title>

eller det du vil. 

Resultatet skal nå se slik ut: 

 

Nå som det grunnleggende er på plass skal vi starte med litt morsommere ting neste kurs! Imens kan du selv lese deg opp på morsomme ting å gjøre med CSS her

 

Alle leksjoner: 

Tise it #2

Jeg hadde et innlegg forrige måned om akkurat det samme. Det slo godt an, og det var i tillegg gøy å lage. Jeg vil slå enda et slag for brukt-shopping med dette innlegget her. 

Selv elsker jeg å kjøpe brukt eller arve noe som kan passe inn i mitt hjem. Det er spesielt gøy med møbler man kan fikse litt på, så blir de plutselig til noe helt nytt! Og klær er jo samme greie. Man kan få nesten helt ubrukte klær til ekstreme rabatter.

Så her er Tise-wantsene jeg har funnet:

Løp og kjøp! 

Har du handlet på Tise før? 

To do-list: Uke 10

Tenk at vi allerede har kommet til uke 10 av året.. Jeg føler året nettopp startet! Og så er vi snart allerede ferdig med 1/5. Tiden går så utrolig fort, så det er viktig å ta vare på hverdagen, like mye som helga. Tiden går så fort når man konstant jobber for noe, og glemmer å se på hva man har, hvor man står nå i livet, hvor mye gleder man er gjennom, hvor mye man kan oppleve. Vi må passe på å ikke bare tenke “om bare noen år, så..”, vi må glede oss over

dav

Denne uka skal jeg sette hårkur på To Do-lista mi, bare så jeg faktisk får gjort det. Jeg syns det er litt styrete å kure håret ordentlig, slik at jeg lar kuren sitte i i flere timer. Da må man jo inn i dusjen, vaske håret, ta i kur, gå ut av dusjen, gå med hårkur i noen timer og så tilbake igjen inn i dusjen. Men det føles skikkelig godt ut etterpå, og det er jo veldig bra for håret. Så denne uka skal jeg gjøre det!

Dette er alt jeg  gjøre denne uka: 

Jeg har et par planter som fikk sitt å streve med i vinter. De skal få litt ekstra god behandling denne uka. Mens jeg kurer mitt hår, skal de få sin blomsterkur. Jeg skal kjøpe gjødsel og jord som er tilpasset den enkelte planten, så skal de få blomstre og gro i sommer! Det blir de nok “glade” for. 

Ellers er det på tide å vakse og rydde bilen igjen, og utenom det er alt bare vanlige ukesting! 

 

Hva har du på din liste denne uka? 

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top