Lær å lage hjemmeside – Leksjon 2

Dersom du ikke har fått med deg leksjon 1 av dette kurset kan du finne den her

Forrige uke gikk jeg gjennom litt grunnleggende tags og oppsett av et HTML-dokument. Nå tenkte jeg at vi skulle fortsette der vi slapp, og legge på litt styling! Vi bruker fortsatt denne siden for å skrive koden og se hvordan det blir. Trykker du på linken jeg la inn nå, ser du at det er en til fane som er åpnet. Den har tittelen CSS. CSS beskriver hvordan HTML-koden skal bli fremstilt. Å lære seg CSS er veldig nyttig for å kunne gjøre endringer på bloggen din!

Dersom du har mistet koden fra forrige leksjon, så kopier og lim inn det her: 

<!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>
 

Introduksjon til CSS

Mens HTML er språket som beskriver innholdet på siden, er det CSS som beskriver hvordan det skal se ut. Det er veldig enkelt sammensatt: 
Du styler <body> med body {}. Altså dersom du skriver 

body {
  background-color: white;
}

vil bakgrunnsfargen på siden din bli hvit! Prøv selv! Kopier teksten og lim inn i CSS-fanen. Som jeg skrev i forrige innlegg, er body “kroppen” til nettsiden. Derfor blir hele siden påvirket av det du legger inn i body { }. Det er viktig å avslutte hver linje med ; for å ikke få feilmelding. Du kan legge inn så mange linjer med styling du vil mellom { }, så lenge du skiller dem med ;. 

Nå skal vi legge til skrifttype, for den standard skrifttypen er litt kjedelig. En veldig fin en er Raleway, men den er litt komplisert å legge til. Den er ikke standard i nettleseren, så den må importeres. Legg først inn font-family i CSS slik: 

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

I tillegg til dette trenger du å legge til importering av skriften i HTML-koden din. Gå inn i HTML-fanen og skriv inn <link href=”https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600″ rel=”stylesheet”> slik: 

<!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>

link-tagen definerer en link mellom et dokument og en ekstern ressurs. Her er den eksterne ressursen hentet fra Googles apier. rel=”stylesheet” forteller at den er et stylesheet, altså et CSS-ark. 

Har du gjort riktig nå skal resultatet se slik ut: 

Så nå kan vi begynne å gjøre overskriften ordentlig fin! Som jeg gikk gjennom i forrige leksjon er den største overskriften en h1-tag. Kopier og lim inn dette i CSS-arket ditt: 

h1 {
  color: #555;
  font-weight: 200;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
  • “color” er skriftfargen og her setter jeg den til fargen #555. Det er en mørk grå farge. Du kan også i starten skrive “gray”, men da får du ikke nøyaktig den nyansen du vil ha.
  • “font-weight” definerer vekta på skriften. Det vil si hvor tynn eller tykk skriften skal være. Standard tykkelse er 400, så når jeg setter 200 vil skriften bli veldig tynn. Når du bruker fet skrift i blogginnlegg eller i et skriveprogram (bold), tilsvarer det som oftest font-weight: 600. 
  • “font-size” forteller hvor stor skriften skal være. 40px tilsvarer det samme som om du skulle valgt 40 i skriftstørrelse på et skriveprogram.
  • “text-transform” kan brukes til å endre på om bokstavene skal være store eller små. Her har jeg satt at bokstavene alltid automatisk skal gjøres store med uppercase. Noen bloggere har dette, og noen har at alle bokstavene automatisk skal være små. Da bruker man lowercase. 
  • “letter-spacing” setter luft mellom hver bokstav i overskriften. Her har jeg satt 2 px mellom hver av bokstavene. 

Personlig syns jeg denne overskriften er veldig kul og kan brukes som tittel på blogginnlegg for eksempel. 

Etter styling av h1 legger vi bare på litt farger på h2 og h3, slik: 

h2 {
  color: yellowgreen;
}

h3 {
  color: hotpink;
}

 

Nå skal vi prøve å gjøre linken om til en knapp, for akkurat nå er den jo litt kjedelig. Linken er en a-tag, så da legger vi inn denne koden: 

a {
  background-color: DarkCyan;
  color: white;
  text-decoration: none;
  padding: 10px;
  border-radius: 4px;
}
  • Igjen bruker vi background-color for å sette bakgrunnsfargen til knappen.
  • “color: white” gjør skriftfargen hvit
  • Så kommer det en litt mer komplisert igjen. Som standard legger nettleseren på en understrek under alle a-tager (altså alle linker). Til vanlig er gjerne dette ønskelig for å tydeliggjøre at det er en link, men i en knapp vil vi ikke ha understreken der. Da legger vi på text-decoration: none; for å fjerne “dekorasjon”. 
  • Jeg skal ha et helt eget kurs som inneholder padding men kort fortalt er det luften mellom skriften og rammen(borderen) til a-tagen. Her gjør den at knappen blir større.
  • Selv om vi ikke har lagt ramme på et element vil den alltid ha en form for ramme likevel. Og denne kan vi justere på slik som her. Det “border-radius” gjør er å runde av hjørnene på knappen, slik at den blir rundere. 

Resultatet av alt vi har lagt inn nå blir slik: 

Til sammenligning var det slik det så ut forrige uke:

 

Prøv deg fram mer farger for eksempel herfra og test ut bakgrunner og skriftfarger. Øk størrelser på ting, mer og mindre border-radius, legg til og fjern stylinger. Test og prøv, øvelse gjør mester! 

I neste leksjon skal vi gå vekk fra det enkle programmet vi bruker nå og begynne å lage nettsider i filstrukturen istedenfor! Så følg med!

 

Alle leksjoner: 

Hurra for meg!

Jeg har en fantastisk, strålende nyhet! I går fikk jeg tilbud om fast ansettelse i jobben min! Tidligere har jeg bare vært midlertidig ansatt på prøve, men nå har jeg fått det bekreftet at jeg har en 100% fast stilling. Hurra! Jeg er så lykkelig over dette, og det bekrefter jo at jobben jeg gjør er bra. Jeg elsker jobben min, og arbeidsplassen er den beste! De fokuserer masse på godt arbeidsmiljø, og alle de ansatte er så bra. 

I tillegg til at jeg er glad jeg får fortsette i jobben, åpner jo dette også for alt som krever fast arbeidsplass, som huslån, store billån, trygghet for framtiden og generelt alt som en sikker kontrakt fører med seg. 

Så i går bakte jeg en kake jeg tok med på jobb i dag. Det er så koselig med kake og kaffe på jobb! Alle er med på å ta en skikkelig pause og bare kose oss litt. Så hadde vi jo også litt å feire, for én hadde bursdag og to hadde fått fast jobb. Kaken ble supergod, og jeg brukte den oppskriften her av Ida Gran-Jansen. Det var i hvertfall veldig god stemning å stille med kake, så det kommer jeg sikkert til å gjøre igjen!

Etter jobb hadde jeg invitert til teparty med venninner, så da ble det enda mer kake og kanelboller. Det har rett og slett vært en svært sukkerholdig dag, og jeg klager virkelig ikke! Det må være lov til å feire litt.

To do-list: Uke 9

God mandag, alle sammen!

Det virker ikke som at leserne av denne bloggen blir lei av de ukentlige listene jeg lager over hva jeg skal gjøre av husarbeid, så her kommer da denne ukas To Do-list!

Denne uka må vi virkelig få fikset viftereimen på bilen. Problemet er at ingen av oss vet hvordan man gjør det, hahah! Så vi får se litt YouTube-videoer og samarbeide om det, så får vi det nok til. Jeg har ikke lyst til å få noen andre til å gjøre det, for jeg har lyst til å lære meg det selv. Det er jo litt irriterende for min samboer, som blir tvunget med, selv om han personlig ville spurt noen flinkere folk om hjelp. Men prøver man ikke, lærer man seg det aldri heller! Det er mitt motto. I tillegg må vi teipe antennen, for den knakk da all snøen kom. Vi glemmer det alltid, men nå skal vi ta med litt gaffateip ut og få den “fikset”, hehe.

Utenom det er det vel bare vanlige punkter på lista for denne uka. Jeg har en del på agendaen Jeg skal på kaffe med noen venninner, holde kodekurs for barn, drikke pils med noen fra jobb og hjelpe en venn med kjøring. Så denne uka kommer til gå fort! Det blir nok bra. 

Ha en strålende mandag videre!

Uka som gikk – Uke 8

Ukas høydepunkt

Høydepunktet denne uka var nok å klare og pusse opp bordet mitt. Jeg er altså så utrolig fornøyd med resultatet, og det var så gøy å holde på! Bare dra fram malekosten og begynne. Jeg syns det ble et helt nytt bord rett og slett. Jeg må kaste blikket bort på det hele tiden, for jeg syns det er så fint. Nå må jeg bare holde meg i skinnet for å ikke male alt vi eier av møbler, haha!

Ukas høydepunkt på jobb

Da vi fikk beskjed av sjefen om å “Få den Eurosporten opp på fullskjerm!” for å se finalen av lagsprinten! Det var så koselig. Vi traktet kaffe og okkuperte møterommet, alle vi som var interessert i få med oss resultatet. Det varte jo så kort tid, så da kunne vi like godt ta oss en liten pause i jobbtiden for å se på sport, det var det bred enighet om! 

 

Ukas mest leste innlegg

Ukas mest leste innlegg ble det innlegget jeg har jobbet mest med denne uka, altså det her om hvordan man lager egen hjemmeside! Det var veldig gøy å få vist fram litt av hva som ligger bak en blogg/nettside, og at alle kan lære seg å bygge opp det samme!

 

Ukas serie

Dette er skikkelig guilty pleasure, men jeg har fått skikkelig dilla på Gift ved første blikk, haha! Jeg lar det bare rulle og gå på skjermen mens jeg gjør andre ting. Det er veldig lett underholdning, og man lærer mye om hvordan menneskehjernen fungerer når det kommer til forelskelse og kjærlighet. Akkurat det er faktisk ganske spennende!

 

Ukas tanke

Jeg må bli flinkere til å ta vare på de jeg er glad i, så i dag skal jeg besøke farmoren min. Hun bor bare en time unna, så det er helt tåpelig at jeg besøker henne så sjeldent. Så jeg sendte en melding på fredag og sa i fra at jeg kom i dag. Jeg er jo så glad i å treffe henne, så jeg gleder meg veldig! I samme slengen skal jeg også innom en tur hos min tante og onkel i Larvik og ta en kaffe, og det blir veldig koselig.

 

Ukas antrekk

Mønstret og behagelig fredagsantrekk:

 

Ukas oppskrift 

I går lagde jeg en veldig god, grov pizza! Vi har alltid så lyst på noe ekstra godt på lørdager, og da er det så enkelt å bare lage en enkel pizza. For å ikke være altfor usunne lagde jeg en grov pizzabunn denne gangen. Man blander sammen 400 gram sammalt hvetemel, 2,3 dl vann, litt olivenolje, en halv pakke gjær og litt salt. Så elter man deigen litt og lar den heve en liten time. Og voila! Du har en pizzadeig du bare kan kjevle ut og putte i ovnen.

 

God søndag videre!

DIY – Fargerikt kjøkkenbord

Jeg har lenge hatt lyst til å pusse opp et gammel kjøkkenbord vi kjøpte brukt for en stund siden. Grunnen til at jeg har utsatt det er fordi jeg egentlig har shoppestopp, og maling og lignende er jo “unødvendig”. Derfor måtte jeg i dag rett og slett endre litt på reglene mine. Shopping som bidrar til å reparere ting jeg allerede har er herved godkjent!

Og merk: Jeg er INGEN profesjonell, så tips her er bare hva jeg har gjort, og ikke nødvendigvis hva som er best. 

Dette bordet var nemlig veldig lite flatterende. Før vi kjøpte det for over et år siden var det blitt brukt som utebord på en veranda. Det var egghvitt, hadde permanente skittmerker og malingen flasset. Så oppussing trengte det jo uansett, og hvorfor ikke da gå all in med en sprek farge? Jeg dro i dag på Panduro og Jernia, og fikk kjøpt inn det jeg trengte: 

Det du trenger: 

  • Maling (jeg kjøpte den her på Panduro)
  • Malingkoster (jeg kjøpte disse fra Jernia)
  • Sandpapir, som ikke er for grovt (da må du sparkle)
  • Gammelt bord

Slik gjør du: 

  1. Vask over bordet.
  2. Begynn å pusse alle deler av bordet grundig. Godt forarbeid gjør resultatet myye bedre! 
  3. Vask bordet med vann for å få vekk puss.
  4. Vask bordet med salmiakk for å få vekk den siste møkka som kanskje er igjen på bordet.
  5. Når bordet har tørka er det klart for første strøk med maling. Rør i malingen først og så maler du et grundig strøk. Pass på å gjevne ut malingsstrekene og følge samme retning hele tiden. 
  6. Gjenta en gang til etter 1-2 timer. 
  7. La tørke til neste dag

Ferdig pusset og tørket. Klart for maling.

Før: 

Etter: 

Jeg ble dritfornøyd! Jeg gleder meg masse til i morgen når jeg skal style bordet med pynt! Og det er veldig gøy å ha gjort det helt selv. 

Ha en god lørdag videre!

Fredagshumor #6

God helg!

Outfit – Mønstret

God fredag!

Dagens antrekk er behagelig, mønstret, kult (etter min mening) og helt perfekt for en fredag! Buksa fikk jeg i bursdagsgave, og enten syns man den er veldig rar og med mye mønster, eller så elsker man den. Jeg elsker den! Jeg syns rett og slett den er dritkul. Jeg bruker den både på jobb og på fest. Skjorta er kjøpt på salg på Nelly

Det har vært en rolig dag på jobb, der dagens lyspunkt har vært varmmat i kantina. Hver fredag er det varmmat, og det har blitt noe jeg går og gleder meg til hele uka.

I dag skal vi trene og spise taco, og bare kose oss resten av kvelden! Det lover til å bli en veldig bra dag, egentlig veldig typisk og forutsigbar. Tenk at jeg har blitt en sånn kjedelig person som gleder meg til å spise taco og se film hver eneste fredag. Men sånn er det nå, og så lenge man trives er jo det viktigere enn å være “spennende”!

Lær å lage hjemmeside – Leksjon 1!

Jeg tenkte jeg skulle lage en ny spalte: Lær å lage hjemmeside!

Jeg vil med korte leksjoner lære bort hvordan man bygger opp en hjemmeside, bit for bit! I starten kommer jeg til å gå veldig grunnleggende til verks. Denne kunnskapen kan du bruke til å endre på ditt eget bloggdesign. Og kanskje til og med bygge opp et helt eget, nytt bloggdesign?

I dette kurset kommer jeg til å gå gjennom:

  • HTML
  • CSS
  • JavaScript
  • Bruk av rammeverk

Så da setter jeg bare i gang med første leksjon!

Leksjon 1: Grunnleggende HTML

I de første leksjonene kan du bruke denne liken her for å prøve deg fram. Etterhvert skal jeg gå gjennom mappestruktur og filer, men akkurat nå holder det å bare teste ut på verktøyet jeg linker til. Den har en fane som heter HTML og en som heter Output. Det du skriver i HTML vil automatisk gi utslag på hvordan Output ser ut. 

Oppbygging av dokumentet

Før vi gjør noen ting kan vi gå gjennom hva vi alltid skal starte et HTML-dokument med: 

<!DOCTYPE html> 
<html>
<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width”>
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

  • Et HTML-dokument starter alltid med <!DOCTYPE html>. Dette definerer at dokumentet skal være HTML5.
  • <html> Definerer rota av HTML-siden.
  • <head> Inneholder meta-informasjon om nettsiden. Det du skriver her blir ikke synlig på nettsiden, utenom det du skriver inne i <title>. Dette blir teksten du kommer til å se i fanen til nettleseren din. I dette eksempelet er det to meta-setninger:
    • <meta charset=”utf-8″> Sier at vi skal kunne bruke et unicode-tegnsett, som blant annet inneholder æ, ø og å. Uten denne linjen kan du ikke skrive disse bokstavene. 
    • <meta name=”viewport” content=”width=device-width”> Gjør at du kan kontrollere hvordan nettsiden ser ut på mobil og tablet. Vi kommer inn på dette i en senere leksjon. 
  • Så dukker det opp en </head>. Dette betyr at <head> er over. Det er en lukke-tag. Alle tags må alltid lukkes, hvis ikke kan du få veldig morsomme resultater. 
  • <body> Definerer at “kroppen” til nettsiden skal begynne. Det er det du skriver her som vil påvirke hvordan nettsiden din vil se ut. 
  • Til slutt lukkes </body> og </html>, og dokumentet er slutt. 

Du trenger ikke å huske alt dette, du må bare ha det med hver gang du skal lage en ny nettside. I hvertfall bruk dette i starten. Kopier denne teksten og lagre den i et dokument på PC’en din.

Grunnleggende tags

De aller mest grunnleggende tagsene har jeg allerede gått gjennom, altså <html>, <head> og <body>. Men vi vil jo få noe på nettsiden til å skje! 

Mellom <body> og </body> skriver du:

<h1>Dette er en overskrift</h1>

Her ser du <h1>-tag i bruk. Du ser den starter, du ser innholdet og du ser at den slutter. Dette er en header-tag. For alle dere bloggere er det den samme tagen som brukes når du putter inn en “Overskrift 1” i blogginnlegget ditt. Skriver du inn denne setningen i mellom <body>-tagsene (i programmet jeg linket i starten av leksjonen) vil du få dette resultatet:

 

 

 

 

 

 

Nå skal vi tilføye litt mer, slik at teksten inne i <body>-tagene er slik ut:

  <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>
  • <h1> er som sagt Overskrift 1.
  • Kanskje noen da skjønner at <h2> også er en type header? Det som kanskje ikke er like logisk er at dette er en mindre overskrift enn h1. 
  • <h3> er dermed en enda mindre overskrift enn denne igjen.
  • For vanlige paragrafer bruker man <p>, slik som her
  • <a> er link-tag. Men det blir ikke en link bare av å sette tekst inne i <a> og </a>. Her introduserer jeg for første gang en attributt. href=”http://frkfrontend.blogg.no” forteller oss at nettsiden <a>-tagen skal linke til er http://frkfrontend.blogg.no. Attributter brukes altså til å fortelle ekstra informasjon utover det faktum at dette er en link. På denne tagen er attributten href.
  • I denne paragrafen har jeg dratt inn <strong> og <i>. Spørsmålet mitt til alle dere nå er: Hva skjer med teksten som er inne i disse tagene?

Resultatet blir slik: 

 

 

 

 

 

 

 

 

Nå kan du jo selv prøve deg litt fram med de tagsene du har fått! 

I neste leksjon skal vi lære å style dette med farger, størrelser og skrifttype. Så følg med!

 

Alle leksjoner: 

Lær kidsa koding!

God kveld!

Jeg er jo (som bloggnavnet tilsier) frontendutvikler. Det betyr at jeg koder websider. Da jeg skulle velge studieretning visste jeg ikke at det var en vei å gå. Det ble sett litt på som en nerdete greie, og det var folk som spurte om jeg skulle lage dataspill da jeg sa jeg skulle studere informatikk. Jeg skulle ønske jeg hadde lært litt før hva utvikleryrket gikk ut på, for det er en veldig trygg, morsom og smart vei å gå! Jeg tenkte å skrive et innlegg om dette senere.

Det at jeg selv visste så veldig lite om det, gjør at jeg ønsker å lære bort det jeg kan til andre “kids”. “Lær kidsa koding” er en frivillig bevegelse som jobber for å lære barn og unge koding landet over. Man kan lese om de her. Med deres verdier i bakhodet har jeg og noen andre damer bestemt oss for å lage et webdesignkurs for ungdommer i alderen 12-16 år her i Grenland. Vi møttes for første gang i dag og la opp et opplegg for fire leksjoner. Dette er noe vi gjør på fritiden vår, og jeg gleder meg veldig! Jeg håper det vil motivere flere unge til å se på webutvikling som en mulig vei å gå karrieremessig. 

Og til alle dere bloggspirer der ute: Hadde dere vært på noen webutviklerkurs hadde dere lært dere hvordan dere endrer på designet deres her på bloggen! Det vi lærer bort er oppsettet av alle tekstfilene dere finner under HTML i venstremenyen under blogsoft.no (for alle som bruker blogg.no som plattform). Det er veldig kult å kunne endre på alt dette selv! Du vil altså kunne endre alt av farger, rammer, linkfarger, tekster og annet.

Jeg gleder meg skikkelig til å sette i gang med disse kursene, og dersom det er noen ungdommer i alderen 12-16 år i Grenlands-området, så kan dere melde dere på kurset her

Har du satt deg inn i koden til bloggen din? 

#webutvikling #blogg #code #lærkidsakoding #webdesign #programmering #koding #bloggdesign #html #css

To do-list: Uke 8

God vinterferie for alle som har det!

Denne mandagen har vært fin. Det er rolig på jobb, i og med at de fleste har vinterferie, så man får tid til å fokusere på hver oppgave uten avbrytelser. Det gir gode resultater! I tillegg har det vært perfekt temperatur og. Det er kaldt nok til at snøen ikke smelter og blir slaps, men ikke så kaldt at man ikke kan gå uten lue og hansker. Nå skal vi straks på trening, for å toppe denne fine dagen!

Her er ukas to dos: 

Rydde i kjøkken- og kjøleskap er et typisk punk som jeg trenger å ha på lista i blant, for hvis ikke tenker jeg ikke på å gjøre det. Men det blir plutselig så mye bedre plass med en gang man får ryddet litt.

Hva har du på din To Do-list denne uka?

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

Back To Top