Hvordan kan man designe en nettbasert læringsplattform for å

(1)

Presentasjon 1

PRESENTASJON

BACHELOROPPGAVE VÅREN 2018 HØYSKOLEN KRISTIANIA STUDENT 288509

(2)

2 Presentasjon

Hvordan kan man designe en nettbasert læringsplattform for å

hjelpe unge grafisk design studenter (18-30 år) som synes koding er vanskelig, å lære HTML5 og CSS3 på en enkel måte de forstår, synes er engasjerende og er relevant for faget grafisk design?

PROBLEMSTILLING

(3)

Presentasjon 3

VISUELL IDENTITET

(4)

4 Presentasjon

Logo

(5)

Presentasjon 5 Typografi

ROBOTO MONO

AaBbCcDdEe 1234567890

! « # % & / ( ) = ? + * , . ; : -

AaBbCcDdEe 1234567890

! « # % & / ( ) = ? + * , . ; : -

AaBbCcDdEe 1234567890

**! « # % & / ( ) = ? + * , . ; : -**

AaBbCcDdEe 1234567890

**! « # % & / ( ) = ? + * , . ; : -**

Regular Regular

Semibold

Bold

OPEN SANS

Open sans brukes på hovedteksten. Den humanistiske sans serif fonten har åpne former og et vennlig, men nøytralt utseende. Fonten har god

lesbarhet og er optimalisert for web. Jeg bruker regular, semibold og bold for å variere uttrykket slik at den kan bruke den på alle de

typografiske nivåene.

Roboto mono er fonten jeg bruker på koden på plattformen. Det er en monospaced font og den er optimalisert for å være godt lesbar på

skjerm. Den har kjennetegn som gjør den til en god font for koding.

(6)

6 Presentasjon Hovedfarger

Farger

Sekundærfarger

#5D9CFF

#7781C6

#FAFAFA

Bokser og bak- grunnsfarge

Kode område i

kurs Tekst område i

kurs Ramme rundt

kurs HTML og CSS

faner i kurs Rammer og

skygge Tekst

#87EF60

#00D2D8

#C7C7C7

#F07272

#AEE500

#555555

#FF8DED #6EEBE2

#101010

#F8E129

#E2E2E2

#FFB652

#333333 #7B7B7B

#BF80FF #D8C1A7

(7)

Presentasjon 7

5.designelement

(8)

8 Presentasjon Illustrasjonsstil

0.5

INTRODUKSJON!

(9)

Presentasjon 9

BRUKERGRENSESNITT

(10)

10 Presentasjon Innholdsplan - HTML

Introduksjon

Hvordan man jobber med kode Text editor

Nettlesere Hva er HTML? Hva er HTML?

Kom igang

HTML regler

Anatomi Anatomi Hierarki

Struktur

Hierarki Struktur

Head og body Head og body Dokumentmal Dokumentmal Utfordringsoppgave

Tagger og attributter

Andre

Utfordringsoppgave Class

ID Tagger for gruppering

Nye tagger for HTML5 Div

Span

Utfordringsoppgave

Attributter

Typograﬁ

Paragraf tagg Spesial tegn Spesial tegn Overskrift h1-h6 tagg

Paragraf

Lister

Nummerert liste Unummerert liste

Link/knapp

Link til en annen HTML side Link til annet sted på siden Utfordringsoppgave

Bilder graﬁske elementer, video og animasjon

Animasjon

Vektor vs raster

Legge til video

Eksportere fra after effects Eksportere fra premiere pro

SVG

Eksportering av assets i illustrator Filtyper og oppløsning

Bilder

Legge til bilde fra url Legge til bilde fra din PC

Ikoner og logoer

Video

Legge til animasjon

Utfordringsoppgave

Introduksjon

Hvordan man jobber med kode Text editor

Nettlesere Hva er HTML? Hva er HTML?

Kom igang

HTML regler

Anatomi Anatomi Hierarki

Struktur

Hierarki Struktur

Head og body Head og body Dokumentmal Dokumentmal Utfordringsoppgave

Tagger og attributter

Andre

Utfordringsoppgave Class

ID Tagger for gruppering

Nye tagger for HTML5 Div

Span

Utfordringsoppgave

Attributter

Typograﬁ

Paragraf tagg Spesial tegn Spesial tegn Overskrift h1-h6 tagg

Paragraf

Lister

Nummerert liste Unummerert liste

Link/knapp

Link til en annen HTML side Link til annet sted på siden Utfordringsoppgave

Bilder graﬁske elementer, video og animasjon

Animasjon

Vektor vs raster

Legge til video

Eksportere fra after effects Eksportere fra premiere pro

SVG

Eksportering av assets i illustrator Filtyper og oppløsning

Bilder

Legge til bilde fra url Legge til bilde fra din PC

Ikoner og logoer

Video

Legge til animasjon

Utfordringsoppgave

(11)

Presentasjon 11

Introduksjon

Farger

Effekter og animasjoner

Responsivt design CSS regler

Selectors

Typograﬁ

Layout

External style sheet

RGB HSL

Internal style sheet

HEX Inline style

CSS farge navn Struktur Struktur

Hva er CSS? Hva er CSS?

Forgrunn/bakgrunn Forgrunn/bakgrunn

Skygge Skygge

Introduksjon

Anatomi Anatomi

Grunnleggende

Skrifttype

Måleenheter

Mobile ﬁrst Navn på tagg

Hvordan endre skrifttype

Introduksjon

% Class

System fonter

Absolutte enheter

em

Kombinere selectorer ID

Web fonter

Relative enheter

rem

Nested elements Når skal jeg bruke disse?

vh og vw

Ta vekk overﬂødig kode Plassering av CSS

Legge til farger

Gradient Gradient

Gjør noe responsivt Media query Opacity

Animasjon

Skjermstørrelser Opacity

Hover

PC Tablet Mobil Utfordringsoppgave

Animer SVG ﬁler Animer SVG ﬁler

Design tips

Utfordringsoppgave

Endre designet fra PC til mobil Utfordringsoppgave

Utfordringsoppgave

Skriftstørrelse

Boksmodellen

Hvordan endre skriftstørrelse

Introduksjon Standarder Innhold

Border

Display Flex box vs grid

Skrifttykkelse

Introduksjon Bokstavmellomrom

Sette opp en ﬂex box Linjeavstand

Måleenheter for skriftstørrelse

Vekter

Ordmellomrom

Tekstjustering Avansert

Tykkelse og vekter

Posisjoneringer

Utfordringsoppgave

Utfordringsoppgave Mellomrom

Flex box Paragraf styling

Utfordringsoppgave

Størrelse Rekkefølge

Padding Margin

Hvordan regne ut total størrelse

La innholdet gå ned på neste linje Fra rader til kolonner

Mellomrom

Sette opp et grid

CSS grid

Sette opp kolonner Snarvei

Grid elementer Flere rader Mellomrom

Flere kolonner Grid area

Back up fonter

Introduksjon

Farger

Effekter og animasjoner

Responsivt design CSS regler

Selectors

Typograﬁ

Layout

External style sheet

RGB HSL

Internal style sheet

HEX Inline style

CSS farge navn Struktur Struktur

Hva er CSS? Hva er CSS?

Forgrunn/bakgrunn Forgrunn/bakgrunn

Skygge Skygge

Introduksjon Anatomi Anatomi

Grunnleggende

Skrifttype

Måleenheter

Mobile ﬁrst Navn på tagg

Hvordan endre skrifttype

Introduksjon

% Class

System fonter

Absolutte enheter

em

Kombinere selectorer ID

Web fonter

Relative enheter

rem

Nested elements Når skal jeg bruke disse?

vh og vw

Ta vekk overﬂødig kode Plassering av CSS

Legge til farger

Gradient Gradient

Gjør noe responsivt Media query Opacity

Animasjon

Skjermstørrelser Opacity

Hover

PC Tablet Mobil Utfordringsoppgave

Animer SVG ﬁler Animer SVG ﬁler

Design tips

Utfordringsoppgave

Endre designet fra PC til mobil Utfordringsoppgave

Utfordringsoppgave

Skriftstørrelse

Boksmodellen

Hvordan endre skriftstørrelse

Introduksjon Standarder Innhold

Border

Display Flex box vs grid

Skrifttykkelse

Introduksjon Bokstavmellomrom

Sette opp en ﬂex box Linjeavstand

Måleenheter for skriftstørrelse

Vekter

Ordmellomrom

Tekstjustering Avansert

Tykkelse og vekter

Posisjoneringer

Utfordringsoppgave

Utfordringsoppgave Mellomrom

Flex box Paragraf styling

Utfordringsoppgave

Størrelse Rekkefølge

Padding Margin

Hvordan regne ut total størrelse

La innholdet gå ned på neste linje Fra rader til kolonner

Mellomrom

Sette opp et grid

CSS grid

Sette opp kolonner Snarvei

Grid elementer Flere rader Mellomrom

Flere kolonner Grid area

Back up fonter

Introduksjon

Farger

Effekter og animasjoner

Responsivt design CSS regler

Selectors

Typograﬁ

Layout

External style sheet

RGB HSL

Internal style sheet

HEX Inline style

CSS farge navn Struktur Struktur

Hva er CSS? Hva er CSS?

Forgrunn/bakgrunn Forgrunn/bakgrunn

Skygge Skygge

Introduksjon

Anatomi Anatomi

Grunnleggende

Skrifttype

Måleenheter

Mobile ﬁrst Navn på tagg

Hvordan endre skrifttype

Introduksjon

% Class

System fonter

Absolutte enheter

em

Kombinere selectorer ID

Web fonter

Relative enheter

rem

Nested elements Når skal jeg bruke disse?

vh og vw

Ta vekk overﬂødig kode Plassering av CSS

Legge til farger

Gradient Gradient

Gjør noe responsivt Media query Opacity

Animasjon

Skjermstørrelser Opacity

Hover

PC Tablet Mobil Utfordringsoppgave

Animer SVG ﬁler Animer SVG ﬁler

Design tips

Utfordringsoppgave

Endre designet fra PC til mobil Utfordringsoppgave

Utfordringsoppgave

Skriftstørrelse

Boksmodellen

Hvordan endre skriftstørrelse

Introduksjon Standarder Innhold Border

Display Flex box vs grid

Skrifttykkelse

Introduksjon Bokstavmellomrom

Sette opp en ﬂex box Linjeavstand

Måleenheter for skriftstørrelse

Vekter

Ordmellomrom

Tekstjustering Avansert

Tykkelse og vekter

Posisjoneringer

Utfordringsoppgave

Utfordringsoppgave Mellomrom

Flex box Paragraf styling

Utfordringsoppgave

Størrelse Rekkefølge

Padding Margin

Hvordan regne ut total størrelse

La innholdet gå ned på neste linje Fra rader til kolonner

Mellomrom

Sette opp et grid

CSS grid

Sette opp kolonner Snarvei

Grid elementer Flere rader Mellomrom

Flere kolonner Grid area

Back up fonter

Innholdsplan - CSS

(12)

12 Presentasjon Index side

0.5

KLASSEROM HTML

CSS OM OSS

KONTAKT FAQ

HTML CSS

Våre kurs

Gå til kursoversikt Gå til kursoversikt

Spennende og variert innhold! Små feil i koden du ikke ﬁnner

og som ødelegger designet? Lurer du på hva du har gjort feil?

Er du en graﬁsk designer og vil lære å kode?

Da har du kommet til rett sted Lær å kode med Graphic code!

LOGG INN

Visualiseringer, videoer og

utfordringsoppgaver Vi ﬁnner de for deg, så du ikke trenger å bruke tid på å lete

Ikke beskymre deg, vi gir hjelp når det blir vanskelig

Opprett en konto nå!

Eller registrer deg med..

Jeg godtar vilkår for bruk og personvernregler REGISTRER DEG

Facebook

Opprett brukernavn Opprett passord

Email Gjenta passord

Google

0.5

KLASSEROM HTML

CSS OM OSS

KONTAKT FAQ

HTML CSS

Våre kurs

Gå til kursoversikt Gå til kursoversikt

Spennende og variert innhold! Små feil i koden du ikke ﬁnner og som ødelegger designet?

Lurer du på hva du har gjort feil?

Er du en graﬁsk designer og vil lære å kode?

Da har du kommet til rett sted Lær å kode med Graphic code!

LOGG INN

Visualiseringer, videoer og

utfordringsoppgaver Vi ﬁnner de for deg, så du ikke trenger å bruke tid på å lete

Ikke beskymre deg, vi gir hjelp når det blir vanskelig

Opprett en konto nå!

Eller registrer deg med..

Jeg godtar vilkår for bruk og personvernregler REGISTRER DEG

Facebook

Opprett brukernavn Opprett passord

Email Gjenta passord

Google

Index siden er den første brukeren møter. Den representerer kontrasten mellom koding (venstre side) og grafisk design (høyre side).

Man får en god forståelse for hva nettsiden handler om fra første stund. Det er lett å

kunne se hva kursene innholder, logge seg inn eller registrere seg.

(13)

Presentasjon 13 Innlogging

Glemt passord

Skriv inn email addressen din nedenfor så sender vi et nytt

passord til deg på mail

SEND Brukernavn/email

Logg inn

Eller logg inn med..

Har du ikke en bruker? Registrer deg HER

Husk meg Glemt passord?

LOGG INN

Facebook Google Brukernavn/email Passord

Skjekk innboksen din Mail sendt!

SEND

Innloggingen er enkel å forstå. Du kan logge inn med

brukernavn/email og passord, Facebook eller Google.

(14)

14 Presentasjon Klasserom

HTML CSS

Kurs i HTML tilrettelagt for nybegynnere. Kurset lærer deg reglene og strukturen for HTML, de viktigste taggene og hvordan man legger til innhold på en nettside.

Kurs i CSS tilrettelagt for nybegynnere. Kurset lærer deg reglene for CSS og typograﬁ, layout, farger, eﬀekter og animasjon.

FORTSETT START

rand0mUs3r S0ﬁe

LOGG UT FORUM

INNSTILLINGER

KURSOVERSIKT KURSOVERSIKT

I klasserommet finner du oversikt over

kursene og hvor langt du har kommet i

de. Herfra kan du gå til innstillingene for

å legge til et profilbilde og forsidebilde,

du kan gå til forum, se kursoversikten

og gå til bestemte deler av et kurs eller

fortsette kurset der du avsluttet sist.

(15)

Presentasjon 15 Kursoversikt - HTML

HTML

^FORTSETT

rand0mUs3r S0ﬁe

LOGG UT FORUM

KLASSEROM

INTRODUKSJON!

INTRODUKSJON

HTML REGLER

TAGGER OG ATTRIBUTTER

TEKST

BILDE, GRAFISKE ELEMENTER, VIDEO

OG ANIMASJON

<h1>Overskrift</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

<ul>

<li>Kaffe</li>

</ul>

<img src=«jente.jpg»

alt=«Jente»>

<div>

<span>

<header>

<footer>

<main>

<nav>

<section>

<aside>

class=«»

id=«»

Overskrift

Lorem ipsum dolor LINK, consectetur adipiscing elit. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Liste 1 Liste 2 Liste 3

Knapp

I denne delen får du en innledning i hva HTML er og hva det brukes til. I tillegg får du alle verktøyene du trenger for å komme igang å kode på egen hånd utenfor denne plattformen.

I denne delen lærer du hvordan vi skriver HTML. HTML kan sammenlignes med å lære et nytt språk, der man har grammatikkregler man må forholde seg til. Et HTML element må være

skrevet på en bestemt måte for å funke.

I denne delen lærer du om de vanligste taggene og attributtene vi bruker i HTML.

I denne delen lærer du om HTML taggene som handler om tekst og linker.

I denne delen lærer du om hvordan man legger til bilder, graﬁsk elementer, videoer og animasjoner til en nettside. I tillegg legges det vekt på hvordan du går fra design til kode.

1/5

3/5

5/5 4/5

2/5

HVA ER HTML?

KOM IGANG

ANATOMI HIERARKI STRUKTUR HEAD OG BODY DOKUMENTMAL UTFORDRINGSOPPGAVE

TAGGER FOR GRUPPERING ATTRIBUTTER

OVERSKRIFT PARAGRAF SPESIAL TEGN LISTER LINK/KNAPP UTFORDRINGSOPPGAVE

BILDE IKONER OG LOGOER VIDEO ANIMASJON UTFORDRINGSOPPGAVE

HTML ^FORTSETT

rand0mUs3r S0ﬁe

LOGG UT FORUM

KLASSEROM

INTRODUKSJON!

INTRODUKSJON

HTML REGLER

TAGGER OG ATTRIBUTTER

TEKST

BILDE, GRAFISKE

ELEMENTER, VIDEO OG ANIMASJON

<h1>Overskrift</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris.</p>

<ul>

<li>Kaffe</li>

<li>Te</li>

<li>Melk</li>

</ul>

<img src=«jente.jpg»

alt=«Jente»>

<div>

<span>

<header>

<footer>

<main>

<nav>

<section>

<aside>

class=«»

id=«»

Overskrift

Lorem ipsum dolor LINK, consectetur adipiscing elit. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Liste 1 Liste 2 Liste 3 Knapp

I denne delen får du en innledning i hva HTML er og hva det brukes til. I tillegg får du alle verktøyene du trenger for å komme igang å kode på egen hånd utenfor denne plattformen.

I denne delen lærer du hvordan vi skriver HTML. HTML kan sammenlignes med å lære et nytt språk, der man har grammatikkregler man må forholde seg til. Et HTML element må være

skrevet på en bestemt måte for å funke.

I denne delen lærer du om de vanligste taggene og attributtene vi bruker i HTML.

I denne delen lærer du om HTML taggene som handler om tekst og linker.

I denne delen lærer du om hvordan man legger til bilder, graﬁsk elementer, videoer og animasjoner til en nettside. I tillegg legges det vekt på hvordan du går fra design til kode.

1/5

3/5

5/5 4/5

2/5

HVA ER HTML?

KOM IGANG

ANATOMI HIERARKI STRUKTUR

HEAD OG BODY DOKUMENTMAL

UTFORDRINGSOPPGAVE

TAGGER FOR GRUPPERING ATTRIBUTTER

OVERSKRIFT PARAGRAF SPESIAL TEGN LISTER

LINK/KNAPP

UTFORDRINGSOPPGAVE

BILDE

IKONER OG LOGOER VIDEO

ANIMASJON

UTFORDRINGSOPPGAVE

HTML

^FORTSETT

rand0mUs3r S0ﬁe

KLASSEROM

INTRODUKSJON!

INTRODUKSJON

HTML REGLER

TAGGER OG ATTRIBUTTER

TEKST

BILDE, GRAFISKE ELEMENTER, VIDEO

OG ANIMASJON

<h1>Overskrift</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

<ul>

<li>Kaffe</li>

</ul>

<img src=«jente.jpg»

alt=«Jente»>

<div>

<span>

<header>

<footer>

<main>

<nav>

<section>

<aside>

class=«»

id=«»

Overskrift

Lorem ipsum dolor LINK, consectetur adipiscing elit. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Liste 1 Liste 2 Liste 3

Knapp

I denne delen får du en innledning i hva HTML er og hva det brukes til. I tillegg får du alle verktøyene du trenger for å komme igang å kode på egen hånd utenfor denne plattformen.

I denne delen lærer du hvordan vi skriver HTML. HTML kan sammenlignes med å lære et nytt språk, der man har grammatikkregler man må forholde seg til. Et HTML element må være

skrevet på en bestemt måte for å funke.

I denne delen lærer du om de vanligste taggene og attributtene vi bruker i HTML.

I denne delen lærer du om HTML taggene som handler om tekst og linker.

I denne delen lærer du om hvordan man legger til bilder, graﬁsk elementer, videoer og animasjoner til en nettside. I tillegg legges det vekt på hvordan du går fra design til kode.

1/5

3/5

5/5 4/5

2/5

HVA ER HTML?

KOM IGANG

ANATOMI HIERARKI STRUKTUR HEAD OG BODY DOKUMENTMAL UTFORDRINGSOPPGAVE

TAGGER FOR GRUPPERING ATTRIBUTTER

OVERSKRIFT PARAGRAF SPESIAL TEGN LISTER LINK/KNAPP UTFORDRINGSOPPGAVE

BILDE IKONER OG LOGOER VIDEO ANIMASJON UTFORDRINGSOPPGAVE

På kursoversikten til HTML er det fem deler.

Hver del har sin egen illustrasjon som beskriver temaet.

Når du åpner en del, ser du alle underdelene av kurset. Om du leter etter noe spesifikt kan du gå hit.

Når en del er ferdig, bli den huket av.

(16)

16 Presentasjon Kursoversikt - CSS

CSS

^START

rand0mUs3r S0ﬁe

KLASSEROM

INTRODUKSJON

CSS REGLER

SELECTORS

TYPOGRAFI

FARGER

RESPONSIVT DESIGN

EFFEKTER OG ANIMASJONER

LAYOUT

INTRODUKSJON!

.klasse-selector { }

p { }

<p>

Jeg er en tekst

</p>

</div>

#id-selector { }

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #91BF00;

} li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

} li a:hover {

background-color: #FF6955;

color: purple;

}

B C

A F

H ^I

I denne delen får du en innledning i hva CSS er og hva det brukes til.

I denne delen lærer du hvordan vi skriver CSS. CSS kan sammenlignes med å lære et nytt språk, der man har grammatikkregler man må forholde seg til. CSS må være skrevet på en

bestemt måte for å funke.

For å kunne style HTML elementer må vi velge hvilke HTML elementer vi vil style. Dette gjør vi ved hjelp av selectors

I denne delen går vi gjennom hvordan vi styler tekst i CSS.

For å kunne lage et layout i CSS må man først og fremst kunne boksmodellen. Deretter lærer du hvordan man posisjonerer elementer i CSS ved hjelp av Flex box og grid.

I denne delen går vi gjennom hvordan vi bruker farger i CSS.

I denne delen vil du ﬁnne kule eﬀekter og animasjoner du kan få bruk for når du koder kreative prosjekter.

Det er en selvfølge at nettsider i dag er responsive og kan se like bra ut på store skjermer som små skjermer. Dette vil du lære mer om i denne delen.

1/8

3/8

5/8

7/8 4/8

6/8

8/8 2/8

MÅLEENHETER BOKSMODELLEN POSISJONERING FLEX BOX CSS GRID HVA ER CSS?

PLASSERING AV CSS

ANATOMI STRUKTUR

GRUNNLEGGENDE AVANSERT

SKRIFTTYPE SKRIFTSTØRRELSE TYKKELSE OG VEKTER MELLOMROM PARAGRAF STYLING UTFORDRINGSOPPGAVE

FORGRUNN/BAKGRUNN

OPACITY LEGGE TIL FARGER

UTFORDRINGSOPPGAVE

SKYGGE GRADIENT ANIMASJON ANIMER SVG FILER UTFORDRINGSOPPGAVE

INTRODUKSJON GJØR NOE RESPONSIVT SKJERMSTØRRELSE DESIGN TIPS UTFORDRINGSOPPGAVE

CSS

^START

rand0mUs3r S0ﬁe

KLASSEROM

INTRODUKSJON

CSS REGLER

SELECTORS

TYPOGRAFI

FARGER

RESPONSIVT DESIGN

EFFEKTER OG ANIMASJONER

LAYOUT

INTRODUKSJON!

p { }

<p>

Jeg er en tekst

</p>

</div>

#id-selector { }

ul {

margin: 0;

padding: 0;

width: 200px;

} li a {

display: block;

color: #000;

padding: 8px 16px;

} li a:hover {

color: purple;

}

B C

A F

H ^I

1/8

3/8

5/8

7/8 4/8

6/8

8/8 2/8

CSS

^START

rand0mUs3r S0ﬁe

KLASSEROM

INTRODUKSJON

CSS REGLER

SELECTORS

TYPOGRAFI

FARGER

RESPONSIVT DESIGN

EFFEKTER OG ANIMASJONER

LAYOUT

INTRODUKSJON!

p { }

<p>

Jeg er en tekst

</p>

</div>

#id-selector { }

ul {

margin: 0;

padding: 0;

width: 200px;

} li a { display: block;

color: #000;

padding: 8px 16px;

} li a:hover {

color: purple;

}

B C

A F

H ^I

1/8

3/8

5/8

7/8 4/8

6/8

8/8 2/8

På kursoversikten til CSS er det åtte deler.

Hver del har sin egen illustrasjon som beskriver

temaet.

(17)

Presentasjon 17 Forum

Overskrift på forum Opprett et forum Søk etter forum

Sorter etter: Flest svar

Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum

45 43 12 10 9 5 5 5 2

Av mart3

Av Frooode

Av Ola007

Av Martine1

Av Oline95

Av S0ﬁe

Av andre67

Av qwert

Av Siljeee

HTML regler > Hierarki > Hierarki

HTML regler > Struktur > Struktur

HTML regler > Head og body > Head og body

HTML regler > Dokumentmal > Dokumentmal

LOGG UT KLASSEROM

12/05/18 - 14.56

14/05/18 - 13.06

17/05/18 - 10:20

17/05/18 - 11:05

06/04/18 - 11:05

06/04/18 - 09:05

06/02/18 - 21:05

21/04/18 - 21:05

21/04/18 - 21:30

Kategori: HTML introduksj..

Kategori: HTML regler Kategori: HTML tagger og..

Kategori: HTML tekst Kategori: HTML bilder, gr..

Kategori: CSS introduksjon Kategori: CSS regler Kategori: CSS selectors

Kategori: CSS layout

Kategori: CSS eﬀekter og a..

Kategori: CSS typograﬁ

Kategori: CSS farger

Kategori: CSS responsivt d..

Kategori: HTML regler

Overskrift på forum Opprett et forum Søk etter forum

Kategori: HTML regler Sorter etter: Flest svar

Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum

45 43 12 10 9 5 5 5 2

Av mart3

Av Frooode

Av Ola007

Av Martine1

Av Oline95

Av S0ﬁe

Av andre67

Av qwert

Av Siljeee

LOGG UT KLASSEROM

12/05/18 - 14.56

14/05/18 - 13.06

17/05/18 - 10:20

17/05/18 - 11:05

06/04/18 - 11:05

06/04/18 - 09:05

06/02/18 - 21:05

21/04/18 - 21:05

21/04/18 - 21:30

Overskrift på forum

Av mart3

Frooode

Martine1

andre67

qwert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum.

12/05/18 - 14.56

12/05/18 20:45

12/05/18 22:55

13/05/18 23:05

14/05/18 06:56

13

6

1

2

POST KOMMENTAR LOGG UT KLASSEROM

I forumet kan du finne svar på ting man lurer på. Du kan søke etter de forskjellige kursdelene/kategoriene for å finne spørsmål folk stiller om

den delen du holder på med.

Du kan også opprette et eget forum om du ikke finner svarene til spørsmålene du har.

Tittel

Tekst

Kategori Kategori:

LOGG UT

Sorter etter: Flest svar Kategori: HTML regler

PUBLISER

Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum Overskrift på forum

45 43 12 10 9 5 5 5 2 KLASSEROM

Av mart3

Av Frooode

Av Ola007

Av Martine1

Av Oline95

Av S0ﬁe

Av andre67

Av qwert

Av Siljeee

HTML regler > Hierarki > Hierarki 12/05/18 - 14.56

14/05/18 - 13.06

17/05/18 - 10:20

17/05/18 - 11:05

06/04/18 - 11:05

06/04/18 - 09:05

06/02/18 - 21:05

21/04/18 - 21:05

21/04/18 - 21:30 Søk etter forum

(18)

18 Presentasjon Kursdel - Visualisering, tekst og oppgaver

https://localhost/

index.html

index.css

Gå ut av kurs

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11 12 13

16

Neste Tilbake

Om vi ikke spesifiserer noe, vil flex box gjøre at elementene dine er på linje selv om skjermen blir så liten at alt går inn i hverandre. For å gjøre at elementene går ned på linjen under, bruker vi flex-wrap: wrap som legges i forelder elementet.

Standard:

La innholdet gå ned på neste linje

LAYOUT > FLEX BOX > LA INNHOLDET GÅ NED PÅ NESTE LINJE

.forelder { display: flex;

flex-wrap: wrap;

} .forelder { display: flex;

flex-wrap: nowrap;

}

.forelder { display: flex;

justify-content: space-between;

} .barn1 {

background-color: yellow;

flex-basis: 30%;

order: 2;

} .barn2 {

background-color: red;

flex-basis: 30%;

order: 3;

}

1 1

4 7 8 4

5 6 5678 2 2

3 3

</div>

</div>

<h1>Box three</h1>

</div>

Box one Box two Box three

LES KODE

Legg til ﬂex: wrap;

OPPGAVER

1

^HINT Gi en rekkefølge til boks en, to og tre

Gi en størrelse til boks en, to og tre OPPGAVER

3

HINT

Gi en rekkefølge til boks en, to og tre OPPGAVER

HINT Bruk order:

Gi en størrelse til boks en, to og tre HJELP HINT

1

https://localhost/

index.html

index.css

Gå ut av kurs

1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9

Neste Tilbake

Vi kan starte med å sette opp kolonner. For å gjøre dette legger vi inn grid- template-columns under forelder elementet grid.

Du lurer kanskje på hva 1fr betyr? fr står for fraction og er en ny relativ størrelsesenhet i CSS grid. 1fr er en del av det området vi har tilgjengelig. Ved å skrive 1fr tre ganger, lager vi tre kolonner som tar opp like mye plass hver.

Her ser du hvordan 1fr fungerer. Du har kanskje lagt merke til at fraction fungerer på samme måte som det du lærte i «Flex box > størrelse».

Sette opp kolonner

LAYOUT > CSS GRID > SETTE OPP KOLONNER

.grid {

grid-template-columns: 1fr 1fr 1fr;

}

0:04

</div>

.grid { display: grid;

}

.grid div:nth-child(even) { background-color: blue;

}

.grid div:nth-child(odd) { background-color: green;

}

A B C D E F G

LES KODE

Gi griddet to kolonner i hvilken som helst fr OPPGAVER

1

^HINT

https://localhost/

index.html

Gå ut av kurs

1 2 3 4 5 6 7 8 9 10 11 12 13

Neste Tilbake

Struktur

HTML REGLER > STRUKTUR > STRUKTUR

Når vi skriver HTML kode, er det viktig at vi har orden i alle taggene. For at vi skal oppnå dette, bruker vi innrykk og linjeskift.

Her ser vi samme kode som var visualisert på forrige side, et div element med to barn som er på samme nivå og derfor er søsken. Fordi h1 og p elementet er inni div elementet, har vi lagt til et innrykk på disse.

Vi kan også ha barn inne i andre barn også, for hvert barn vi lager legger vi til et innrykk:

<div>

<h1>Dette er en overskrift</h1>

<p>Dette er en paragraf</p>

</div>

<html>

<body>

<div>

</div>

</header>

</body>

</html>

<html>

<head>

</head>

<body>

<main>

<div>

</div>

</main>

</body>

</html>

Dette er en overskrift

Dette er en paragraf

Strukturer koden i index.html OPPGAVER

1

^HINT

LES KODE

Selve kursene er bygd opp av tre deler. Den første delen er der all informasjonen du skal lære står. Den andre delen er der du koder for å løse oppgaven(e) du har fått nederst på siden. Den tredje delen er der det du har kodet vises.

De fleste av sidene i kursene er bygd opp av korte tekster med visualiseringer og/eller korte videoer. På de fleste sidene er det oppgaver du fullfører før du går videre. Om du ikke vil lese teksten, er det et lyd ikon du kan klikke på for at teksten blir lest opp for deg.

Denne typen kursdel er

markert med dette ikonet

(19)

Presentasjon 19 Kursdel - Video

Gå ut av kurs

Standarder

LAYOUT > BOKSMODELLEN > STANDARDER

0:00

Neste Tilbake

Dette er en paragraf. Innholdet i en boks kan være hva som helst, inkludert tekst.

Gå ut av kurs

Hva er CSS?

INTRODUKSJON > HVA ER CSS? > HVA ER CSS?

0:00

Neste Neste Tilbake

Mesteparten av kursene er bygd opp på den måten du så på forrige side, det gir brukeren mulighet til å finne

informasjonen man trenger fort. Det er derimot noen deler av kurset der man bare trenger en forståelse for noe. Det kan være tilleggsinformasjon som ikke er så viktig eller en introduksjon for eksempel. Det er på disse delene det er videoer. Videoene er ment som en pause der man kan slappe av å høre på, før man går videre til neste del.

Denne typen kursdel er

markert med dette ikonet

(20)

20 Presentasjon Småfeil i koden

https://localhost/

index.html

index.css

Gå ut av kurs

1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Neste Tilbake

External style sheet er måten vi anbefaler deg å bruke når du skriver CSS.

External vil si at CSS koden ikke skrives i HTML filen, men i sitt egen CSS fil. Ved og ikke mikse HTML og CSS får man mer orden og kodene blir enklere å lese, dette er spesielt viktig når man begynner å skrive lengre koder. Du kan opprette en CSS fil på samme måte som du oppretter enn HTML fil, den eneste forskjellen er at du legger til .css i stedet for .html på slutten av filnavnet. En CSS fil kan for eksempel hete index.css

Ettersom CSS koden nå er i sin egen fil, må vi linke filen til HTML filen. Dette gjøres ved hjelp av et <link> element som legges i <head> delen av HTML dokumentet. <link> taggen er en selvlukkende tagg og trenger to attributter:

href - Dette er hvor urlen eller stien til CSS ﬁlen legges.

rel - Denne beskriver forholdet mellom HTML filen og CSS filen. Ettersom du linker til en CSS fil, skal denne verdien være satt til stylesheet.

External style sheet

INTRODUKSJON > PLASSERING AV CSS > EXTERNAL STYLE SHEET

<head>

</head>

LES KODE

Legg inn <link href=«index.css» rel=«stylesheet»> i index.html på riktig sted

OPPGAVER

1

^HINT

h1 {

color: #FFB652;

text-align: center;

margin-top: 20px;

} p {

color: #555555;

text-align: center;

margin-top: 1em;

}

Hallo

Ferdig

<head>

</head>

<body>

<h1>Hallo</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>

Du har ﬂere småfeil i koden din.

Rett disse og prøv igjen!

OK

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

https://localhost/

index.html

index.css

Gå ut av kurs

1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9

Neste Tilbake

External style sheet er måten vi anbefaler deg å bruke når du skriver CSS.

External vil si at CSS koden ikke skrives i HTML filen, men i sitt egen CSS fil. Ved og ikke mikse HTML og CSS får man mer orden og kodene blir enklere å lese, dette er spesielt viktig når man begynner å skrive lengre koder. Du kan opprette en CSS fil på samme måte som du oppretter enn HTML fil, den eneste forskjellen er at du legger til .css i stedet for .html på slutten av filnavnet. En CSS fil kan for eksempel hete index.css

Ettersom CSS koden nå er i sin egen fil, må vi linke filen til HTML filen. Dette gjøres ved hjelp av et <link> element som legges i <head> delen av HTML dokumentet. <link> taggen er en selvlukkende tagg og trenger to attributter:

href - Dette er hvor urlen eller stien til CSS ﬁlen legges.

rel - Denne beskriver forholdet mellom HTML filen og CSS filen. Ettersom du linker til en CSS fil, skal denne verdien være satt til stylesheet.

External style sheet

INTRODUKSJON > PLASSERING AV CSS > EXTERNAL STYLE SHEET

<head>

</head>

LES KODE

Legg inn <link href=«index.css» rel=«stylesheet»> i index.html på riktig sted

OPPGAVER

1

^HINT

h1 {

color: #FFB652;

text-align: center;

margin-top: 20px;

} p {

color: #555555;

text-align: center;

margin-top: 1em;

}

Hallo

<head>

</head>

<body>

<h1>Hallo</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ferdig

Om man har småfeil i koden når man trykker på “les kode”, får man en melding der man får beskjed om å rette feilene og prøve på nytt. Hvor feilen(e) er vil bli markert med et ikon som viser et rødt kryss, i tillegg vil ordet som er feil være markert med den samme rødfargen. Småfeil vil si at man har skrevet en bokstav/tegn feil, har glemt en bokstav/

tegn eller har en bokstav/tegn for mye. Småfeil er

vanskelige å oppdage og gjør mange frustrert. Derfor finner

plattformen de for deg.

(21)

Presentasjon 21 Større feil i koden

Tittel

Tekst

PUBLISER

Overskrift på forum

Av mart3

Frooode

Martine1

andre67

qwert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oﬃcia deserunt mollit anim id est laborum.

12/05/18 - 14.56

12/05/18 20:45

12/05/18 22:55

13/05/18 23:05

14/05/18 06:56

13

6

1

2

POST KOMMENTAR Overskrift på forum

Overskrift på forum

12 8

5

2

0 Opprett et forum

Av Frooode 14/05/18 - 13.06 Layout > Boksmodellen > Border

Av Ola007 17/05/18 - 10:20 Layout > Boksmodellen > Border

Av Martine1 17/05/18 - 11:05 Layout > Boksmodellen > Border

Av Siljeee 21/04/18 - 21:30 Layout > Boksmodellen > Border Av andre67 06/02/18 - 21:05 Layout > Boksmodellen > Border

Du mangler:

1

1 2 3 4 5 6 7 index.html

index.css

div { width: 145px;

height: 140px;

color: #F07272;

padding: 20px;

border: 10px solid #F8E129;

}

-Margin

PRØV IGJEN

SE HVA ANDRE HAR SPURT OM DENNE OPPGAVEN I FORUM

Om du har større feil i koden får du en melding der det

blir vist hvor feilen er og eventuelt hva du mangler for å

fullføre oppgaven. Du får mulighet til å prøve igjen etter

å ha sett feilen eller så kan du se hva andre personer har

spurt angående denne oppgaven i forumet. Om du velger

det siste, kommer det opp et forum som bare inneholder

forum om den spesifikke oppgaven du holder på med. På

denne måten er det lett å finne svar, men om du ikke finner

det, har du mulighet til å opprette et forum selv og spør om

akkurat det du lurer på.

(22)

22 Presentasjon Kursdel - Utfordringsoppgaver

https://localhost/

index.html

Gå ut av kurs

LES KODE LEVER OPPGAVE

index.css

1

Neste Tilbake

Lag en boks som ser ut som dette:

Utfordringsoppgave

LAYOUT > BOKSMODELLEN > UTFORDRINGSOPPGAVE

#F07272

#F8E129

30 10 10

10

10 40

110

37

95 35

5

140 145

140

Verdiene er i px

Helt riktig!

GÅ VIDERE

Det er dessverre ikke helt riktig

Du mangler:

1

1 2

2 3

3 4 5 6 7

index.html

index.css

div {

width: 145px;

height: 140px;

color: #F07272;

padding: 20px;

border: 10px solid #F8E129;

}

-Margin

PRØV IGJEN

SE HVA ANDRE HAR SPURT OM DENNE OPPGAVEN I FORUM

På slutten av en del av kurset er det ofte utfordringsoppgaver. Utfordringsoppgavene er vanskeligere enn oppgavene på de andre sidene. Utfordringsoppgaven er til for å teste om du har forstått det du har lært så langt i kurset. Når du jobber med en utfordringsoppgave kan du kode og lese koden underveis. Når du føler du er helt ferdig kan du levere oppgaven for å se om du har gjort riktig eller feil. Har du gjort feil, vil du få en melding lignende den på forrige side (Større feil i kode). Om man har gjort riktig får man en melding som sier at du har gjort riktig og at du kan gå videre. På begge meldingene er det en kule som er enten glad eller lei seg. Om meldingen er positiv, er kula grønn, om den er negativ, er kula blå.