VELKOMMEN TIL GOKSTAD!

— Camilla Larsen, front-end utvikler

Teamet

Egil Skjeldbred

Dawood Ahmad

Camilla Larsen

Agenda

Introduksjon

  • Teamet
  • Studenter
  • Studieplan
  • Arbeidskrav og eksamen

1.

HTML

  • Syntax
  • Elementer
  • Tagger
  • Attributter

2.

Oppgaver

VI kjører oppgaver hvor dere får tester ut hva dere har lært

3.

Om meg

  • 27 år fra Drammen
  • Har både samboer og hund
  • Fra Larvik, bor nå i Drammen.
  • Elsker fagfeltet front-end utvkling

Utdanning

  • Bachelorgrad i økonomi og administrasjon
  • Fagskolegrad i front-end utvikling

1.

Butikkmedarbeider

2.

Apotektekniker

3.

Trainee

5.

Kursholder og

faglærer for GA

4.

Assisterende butikksjef

6.

Front-end utvikler 

og team-lead for tietoevry

7.

Produkt sjef og

Produkt eier

Hvem er dere?

Vi tar rask introduksjon

Faget HTML / CSS

Forklarer faget

#1

Arbeidskrav

#2

Eksamen

#3

Arbeidsform

#4

Hvordan få best mulig utnytte av undervisningen

  • Følg med i undervisningen, legg andre distraksjoner til side.
  • Vær aktiv i timen, da er det lettere å følge med
  • Ingen spørsmål er for dumme, mest sannsynlig lurer flere på det samme.
  • Sliter du med et tema, ta tak i meg eller en annen lærer. Vi er her for å hjelpe

Pensum vi skal igjennom

Dato Tema
24.08 HTML - Syntax, elementer, tagger og attributter
29.08 HTML - Oppgaver med veiledning
31.08 HTML - Struktur og oppbygning av dokumenter
07.09 HTML - Skjemaer og inputs
12.09 HTML - Oppgaver med veiledning
14.09 CSS - intro, Syntax og spesifisitet
21.09 CSS - Layout og boksmodellen
26.09 CSS - oppgaver med veiledning
28.09  CSS - hierarki og position
05.10 CSS - position
12.10 Ferie
19.10 Ingen forelesning
26.10 Units og pseudo classes
31.10 Oppgaver med veiledning
02.11 CSS - Layout (flexbox)
09.11 CSS - Layout (grid)
14.11 Arbeidsdag med veiledning
16.11 CSS - Responsivt design
23.11 Forbredelse til eksamen
Uke 48 Eksamen

Viktige datoer

Arbeidskrav 1.
Utlevert 7.september - leveres 13.september

Arbeidskrav 2.
Utlevert 5.oktober - leveres 11.oktober

Eksamen

Uke 47 fra mandag til fredag. 

10-15 minutter presentasjon i uke 48.

 

Vær obs på at endringer kan forekomme

  • Pensumbok
  • Linkedin Learning
  • Individuelle oppgaver og innleveringer
  • Framføringer

Undervisningsmateriale

SELVSTUDIE

For å bli en god front-end utvikler er det viktig at dere legger inn godt med selvstudie og trener på å skrive koder.

 

Dette er ikke et studie hvor det er nok å bare se på forelesningen.

 

Er det et tema du sliter med? Legg inn ekstra tid til å trene på akkurat det temaet.

HVA ER HTML?

〞

HyperText Markup Language er et markeringsspråk for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser

HTML - HyperText Markup Language

Et markeringspråk betyr å legge det fundementale grunnlaget for hva som skal vises på nettsiden.

 

Det vil for eksempel si tekst, bilder, tabeller, skjemaer og videoer.

  • For å skrive HTML koder, så må vi definere et dokument som et html dokument. 
  • Når dokumentet er laget og lagret det, så kan vi begynne å skrive html koder i dokumentet.

Hvordan koder man HTML?

  1. Lag en mappe på skrivebordet / valgfritt sted som heter HTML og CSS
  2. Åpne notatblokk på pc / tekstredigering på mac
  3. Velg nytt notat eller nytt dokument
  4. Inne i notatet så skriver dere
    <h1>Dette er min første html kode</h1>
  5. Lagre dokumentet som index.html i mappen som heter html og css.
  6. Høyre klikk på dokumentet og åpne den i en nettleser. Se hva som skjer!

Oppgave: vi lager et HTML dokument

Har alle fått lastet ned

Visual Studio Code?

Vi fortsetter...

HTML tagger

  • En html tag er en del av markeringsspråket som forteller hvordan det skal bli lest av.
  • Det finnes opp mot 132 forskjellige tagger.
  • Hver tag har forskjellige egenskaper og blir lest av forskjellig

HTML Empty tags

  • Ikke alle tagger har closing tag, men de kan omtales som empty tags.
  • Selv om de ikke inneholder content del, så har de en funksjon
  • Tagger som lukker seg inne i opening tag.
  • Vi benytter oss av samme oppsett hver gang vi skal jobbe med et nytt html dokument
  • Dokumentet kommer til å bli mer avansert jo mer dere lærer.

Det grunnleggende HTML oppsettet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
    <p>Velkommen til Gokstad Akademiet</p>
</body>
</html>

Det grunnleggende HTML oppsettet

Document type - HTML

  • Forteller og definerer at dokumentet som blir lest av er et HTML dokument.
<!DOCTYPE html>

HTML tag

<html> </html>
  • Brukes som et root element hvor alt av innholdet til dokumentet blir plassert.

Head

  • Her skal alt av viktig tillegs informasjonen som ikke skal synes på siden, plasseres
<head> </head>

Meta charset = utf 8

<meta charset="UTF-8">
  • Setter dokumentet til å lese de aller fleste bokstavene fra ulike språk.

Meta data

  • Forteller nettleseren å sjekke om det blir lest av hos internet explorer. Her gjelder den nyeste versjonen.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Meta data

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • width=device-width forteller at nettleseren skal gjøre seg responsiv, mens intitial-scale=1.0 tar utgangspunkt i en størrelse som hjelper siden med å bli responsiv.

Title

  • Setter tittelen på nettsiden, synes også i tabbaren på toppen av nettleseren.
<title>Gokstad akademiet</title>

Body

<body> <p>Velkommen til Gokstad akademiet</p> </body>
  • Delen av nettsiden dere ønsker skal synes, plasserer mellom body taggen.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
    <p>Velkommen til Gokstad Akademiet</p>
</body>
</html>

Det grunnleggende HTML oppsettet

  • Vi tester ut det grunnleggende HTML oppsettet.
  • Benytt forklaringen dere har fått, og før det opp i et HTML dokument. 
  • Sjekk at det fungerer i nettleseren

Oppgave

  • Ofte trenger utviklerne å legge igjen kommentarer i koden.
  • Det er god praksis å forklare hva som skjer i koden, men vi vil heller ikke overdrive kommenteringen.
  • Kan også fungere som et hjelpemiddel for dere selv.

Kommentarer i HTML koden

<!-- Dette er en kommentar -->
  • Img tag brukes for å vise fram valgte bilder på applikasjonen din.

Img tag

<img src="https://cdn.pixabay.com/photo/2022/05/09/11/20/flower-7184366_1280.jpg" 
alt="This is a grumpy cat">
  • Lag et nytt dokument som inneholder det grunnleggende html oppsettet.
  • Legg til en paragraf, bilde, link, kommentar og tekst. 
  • Bildet er kan være hentet fra pixabay.com og linken kan føre videre til en valgfri side.

 

  • Ekstra: Søk deg litt fram og velg ut 3 nye tagger du har lyst til å teste ut.

Oppgave

Les dere opp på disse taggene:

  • <div> </div>
  • <span> </span>
  • <ol> </ol>
  • <ul> </ul>
  • <li> </li>
  • <h1> til <h6>
  • <br />
  • <hr />

Oppgaver Torsdag

  • <nav> </nav>
  • <header></header>
  • <main> </main>
  • <footer> </footer>
  • <b> </b>

Benytt taggene fra forrige slide til å lage en nettside som ser slik ut.
OBS: ikke bry dere om utseende, så lenge dere forstår hvordan taggene fungerer

Oppgaver Torsdag

For de som ønsker det, kan begynne å lese seg opp på hvordan man kobler sammen ulike html filer, slik at man kan navigere seg rundt på siden.

https://www.youtube.com/watch?v=lkDrG7G77Fg

Ekstra oppgave

Trenger du hjelp?

Dere kan ta kontakt med meg eller Egil via teams når som helst, så vil vi svare dere så fort vi kan :)