Eksamen MG35 - GF2 - Web - Noter
===
###### tags: `MG` `GF2`
Emner vi ikke har arbejdet med
---
SEO Meta Data: Har vi ikke arbejdet med.
`<PICTURE>` tagget ville være det rigtige at bruge i "HERO" sektionen, med globus burgeren.
Information om de enkelte punkter
---
Jeg har kigget på følgende og her er lidt info om de enkelte punkter:
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ligger `<a>` tags i en NAV - der behgøver ikke mere være `<ul> & <li>` som bruges til navigation. Men W3Schools eksempler benytter dette så det kan være der er elever som har lænt sig op ad disse.
- Har eleven brugt flexbox:
en responsiv løsning af navigationen ville være at bruge flexbox og en god måde at vise eleven behersker flexbox.
- Sektioner
Bruger eleven `<section>` til at dele indholdet op
- Articles
Bruger eleven `<article>` til indhold som kan stå alene. Ofte med sin egen`<h1> / <h2>`, evt. op til flere `<p>` og `<img>`
- Fonte:
- Indsat ved hjælp af google fonts:
Er der indsat link i `<head>` til google fonts med de rigtige fonte
- CSS-definintion:
Ud nytter eleven `*`-reglen til at definere standard skriftype på hele siden
- CSS:
- Brug af class'er:
Bruger eleven den samme class til de samme elementer på siden
Mulige kommentarer: God brug - for mange gentagelser - ikke hensigtsmæssig
- Brug af Flexbox / CSS Grid:
Hvorledes har eleven brugt disse teknologier
- Navngivning:
Hvordan er elevens navngivning på css-class'er
- Effekter
Opnået / til dels / slet ikke
- Billeder:
- Filformater: God brug / ikke hensigtsmæssig
- Størrelser:
- Kommentarer
- Spørgsmål til eleven
- Eller ekstra info om løsningen
ELEVER
---
[Asger Samuel Kudsk Johannessen](#Asger-Samuel-Kudsk-Johannessen)
[Astrid Dybkjær](#Astrid-Dybkjær)
[Christoffer Seneka Bøgemose](#Christoffer-Seneka-Bøgemose)
[Emilie Lilly Kristine Marker](#Emilie-Lilly-Kristine-Marker)
[Jonas Vest Blichfeldt](#Jonas-Vest-Blichfeldt)
[Kathleen Bianca Arvedsen](#Kathleen-Bianca-Arvedsen)
[Laura Thor Møller Christensen](#Laura-Thor-Møller-Christensen)
[Laurits Juul Sørensen](#Laurits-Juul-Sørensen)
[Louise Rosenkilde Larsen](#Louise-Rosenkilde-Larsen)
[Maria Thisted-Pedersen](#Maria-Thisted-Pedersen)
[Martin Harders](#Martin-Harders)
[Mathias Sandbekk Olsen](#Mathias-Sandbekk-Olsen)
[Morten Pihl Dyreborg Nielsen](#Morten-Pihl-Dyreborg-Nielsen)
[Nanna Kjeldsmark Johansson](#Nanna-Kjeldsmark-Johansson)
[Sara Cecilie Steenberg Nielsen](#Sara-Cecilie-Steenberg-Nielsen)
[Sara Dèrsima Holst Celik](#Sara-Dèrsima-Holst-Celik)
[Søren Møller Heitmann](#Søren-Møller-Heitmann)
LISTE
---
### Asger Samuel Kudsk Johannessen
- Holder løsningen designoplægget:
Ja fin løsning - title tagget burde nok have heddet "Talks N burgers"
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: JA
- Har eleven brugt flexbox: JA fin løsning
- Sections
- JA god opdeling
- Articles
- JA - nogle steder kunne `img` have været med i `<article>`tagget
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: Fin brug og /font mappen er med
- CSS:
- Brug af class'er: God brug
- Brug af Flexbox / CSS Grid: Ja - Begge - ok løsninger og rigtig brug
- Navngivning: fullwidth1-4 kunne være bedre
- Effekter: Ja - fin løsning - kun top dog
- Billeder:
- Filformater: ok
- Størrelser: burgerverden.jpg - skal være mindre
- Kommentarer
- Spørg om følgende:
Hvordan virker `.nav-links a:after` og `.nav-links a:hover:after`? Linie 60 og 75 i stylesheet
Hvad gør dette: `class="full-width2 grid-columns1"`
[til toppen](#ELEVER)
### Astrid Dybkjær
- Holder løsningen designoplægget:
Ja
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox:
- Sections
- Ja god brug
- Articles
- God brug
- Fonte:
- Indsat ved hjælp af google fonts:
- Ja
- CSS-definintion:
- God brug af de finition af størrelser `h1` - `h4` og `p`
- CSS:
- Brug af class'er: Godt
- Brug af Flexbox / CSS Grid: Ja Begge
- Navngivning: jo - men bør bruge classer og ikke style på tags som eksempel: `<a>`.
- Effekter: God - kun top dog
- Billeder:
- Filformater: ok
- Størrelser: images/Sammenkopiring_AstridD.png 5.6MB er for stort
- Kommentarer
- Spørg om følgende:
Hvad er scroll-behavior: smooth;
Hvad betyder grid-template-columns: auto auto auto auto; (linie 115 i stylesheet)
Hvor for er `<p>` og `<a>` stylet som de er?
[til toppen](#ELEVER)
### Christoffer Seneka Bøgemose
- Holder løsningen designoplægget:
jo - på nær font til brødtekst
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: ja - men p-tags til links ikke `<a>`
- Har eleven brugt flexbox: ja
- Sections
- Ok løsning
- Articles
- For mange ekstra `<div` tags til at holde på indholdet, kunne bruge færre - ikke forkert - men kunne gøres anderledes
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: bruger `*`-reglen til at definere standard font, men har ikke inkluderet /font mappen
- CSS:
- Brug af class'er: ok
- Brug af Flexbox / CSS Grid: ja begge
- Navngivning: ok - gode prefix'es
- Effekter: Til dels - den går vist den forkerte retning - kun top dog
- Billeder:
- Filformater:
- Størrelser:
- Kommentarer
- Spørg om følgende:
Skrifttypen på brødtekst
Hvorfor de ekstra `div` tags i articles
Hvad er dette: grid-template-rows: 5fr 1fr 1.25fr 1fr; (linie 98 stylesheet)
Animationen på navigationen - skulle den ikke flytte sig sidelæns?
[til toppen](#ELEVER)
### Emilie Lilly Kristine Marker
- Holder løsningen designoplægget:
jo - der er noget størrelse i højden som kunne ændres
Brødtekst passer ikke
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej
- Sections
- Ja - men section i stedet for header til hero
- Articles
- Ja
- Fonte:
- Indsat ved hjælp af google fonts: ja, men ikke /fonts mappen med
- CSS-definintion: ikke brugt
- CSS:
- Brug af class'er: Fin brug til at give den samme type elementer 1 class
- Brug af Flexbox / CSS Grid: ja - men der er noget underligt i opdelingerne
- Navngivning: for meget xx1, xx2, xx3, etc
- Effekter: Ikke opnået
- Billeder:
- Filformater: ok
- Størrelser: Burgerbilledet er 2.4MB, og burde rent semantisk have heddet noget med burger ikke: BA0804199240.jpg
- Kommentarer
- Spørg om følgende:
hvad gør dette: grid-template-columns: 7fr 7fr 7fr 7fr;
**(Deler elementet i 4 dele som er 7 fractions stor - hvorfor 7?
Det ville give lige god mening at skrive 1fr)**
Hvad betyder .row3 p
**(Alle p-tags i elementer med classen row3)**
[til toppen](#ELEVER)
### Jonas Vest Blichfeldt
- Holder løsningen designoplægget:
Ja
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej
- Sections
- Ja
- Articles
- Ja
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: Nej . men /font mappe er med
- CSS:
- Brug af class'er: God brug
- Brug af Flexbox / CSS Grid: Ja fine løsninger
- Navngivning: ok
- Effekter: retningen passer vist ikke - kun top dog
- Billeder:
- Filformater: ok
- Størrelser: 9MB på kloden - av av av
- Kommentarer
- Spørg om følgende:
Hvorfor float: right; på text?
Havd gør flex-direction: column?
HVor mange `<main>` må der være?
**(1)**
Kunne han have brugt en anden løsning end float right på kloden?
### Kathleen Bianca Arvedsen
- Holder løsningen designoplægget:
Nej - midter bilederne er ikke centeret
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Jo - brugt ul/li ok løsning
- Har eleven brugt flexbox: Nej
- Sections
- Ikke god nok semantik - det er ikke svært at skrive section fremfor div
- Articles
- Ikke benyttet
- Fonte:
- Indsat ved hjælp af google fonts:
- Ja, men hvor ligger /font - mappen der henvises til i styles.css
- CSS-definintion:
- CSS:
- Brug af class'er: Ikke hensigtsmæssig brug
- Brug af Flexbox / CSS Grid: Nej
- Navngivning: For meget dobbelt konfekt - altså for mange box2 - box3 med de samme egenskaber.
- Effekter: Opnået - kun top dog
- Billeder:
- Filformater: OK
- Størrelser: Helt fine
- Kommentarer
- Spørg om følgende:
Hvorfor er index ikke navngivet index.html
Hvorfor er der ikke brugt semantiske tags
hvor ligger /font - mappen der henvises til i styles.css
Kunne hun have brugt andre løsninger end position:absolute
Og hvad er det der 'em'
### Laura Thor Møller Christensen
- Holder løsningen designoplægget:
Ja - god løsning
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Ja
- Sections
- Ja - god brug
- Articles
- Ja helt fint - måske for meget i tilmeld sektionen
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: ja - flot at font-size er defineret der
- CSS:
- Brug af class'er: Ja helt rigtigt
- Brug af Flexbox / CSS Grid: Ja
- Navngivning: God
- Effekter: Opnået - kun top dog
- Billeder:
- Filformater: ok
- Størrelser: 2MB til burgerbileldet - burde være mindre
- Kommentarer
- Spørg om følgende:
Hvad gør: justify-content: space-between;
Hvordan kan man loade et mindre billede hvis man ikke vil hive 2MB billede ned? (load et andet enten via JS eller i Media Queries)
Hvad gør det der `rem`?
[til toppen](#ELEVER)
### Laurits Juul Sørensen
- Holder løsningen designoplægget:
til dels - men meget mangelfuld. html.html som fil
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Nej
- Har eleven brugt flexbox: Nej
- Sections
- OK
- Articles
- OK
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: Nej
- CSS:
- Brug af class'er: OK brug af class'er
- Brug af Flexbox / CSS Grid: ja - meget mangelfuld
- Navngivning: God
- Effekter: Nej
- Billeder:
- Filformater: ok
- Størrelser: Burger 2MB
- Kommentarer
- Spørg om følgende:
Hvad gør : height: 100vh;
**(Sætter højden til full højde i forhold til skærmen der kigger - vh == viewheight)**
display: table-column; og grid-template-columns: 1fr 1fr; - kan ikke bruges med hinanden
Hvorfor virker fonten Eurostile ikke?
**(HTML delen er en rigtig god løsning, god opbygning. CSS delen og brugen af grid og flexbox er der hvor der ikke er viden nok)**
[til toppen](#ELEVER)
### Louise Rosenkilde Larsen
- Holder løsningen designoplægget:
jo.
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej
- Sections
- God brug
- Articles
- God brug
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: ja, men måske burde det være eurostile der var standard
- CSS:
- Brug af class'er: Ok brug
- Brug af Flexbox / CSS Grid: Ja - begge
- Navngivning: Skidt nogle steder: li1, li2, li3 alle med margin-top: 2%
- Effekter: Til dels - hover effekt men uden animation
- Billeder:
- Filformater: ok
- Størrelser: burgerjord er 5MB.
- Kommentarer
- Spørg om følgende:
Hvad er dette: class="mere1 w3-bar-item w3-button w3-hover-green"?
**(Brug af W3.CSS framework der kalder flere class'er og hendes egen class- mere1)**
Hvad betyder style="float:right"?
HVordan kunne man have optimeret - li1, li2, li3 alle med margin-top: 2%?
[til toppen](#ELEVER)
### Maria Thisted-Pedersen
- Holder løsningen designoplægget:
Nej - fejl i css og fejl i html'en gør at siden ikke virker.
Det er parenteserne den er galt med. Regler startes inde i andre hvor de ikke er lukkede endnu og det betyder de tolkes forkert.
HTML strukturen er som sådan god nok, men hun har fået skubbet head og body helt fra hinanden og head lukkes først helt i bunden.
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej
- Sections
- Ja de er brugt rigtigt
- Articles
- Jo
- Fonte:
- Indsat ved hjælp af google fonts: Nej
- CSS-definintion: Nej
- CSS:
- Brug af class'er: Ja
- Brug af Flexbox / CSS Grid:
- Navngivning: Nej for meget kasse1, kasse2, kasse3 med de samme egenskaber
- Effekter: Nej
- Billeder:
- Filformater: ok
- Størrelser: Burgerbillede er 6MB
- Kommentarer
- Spørg om følgende:
Hvordan er opbygningen af et HTML dokument? Hvad er der i toppen?
**(`<head>`)** Og det der vises hedder? **(`<body>`)**
Hvad skal dette gøre: display: inline-flexbox; og justify-content: space-between;
[til toppen](#ELEVER)
### Martin Harders
- Holder løsningen designoplægget:
Ja på nær brødtekst
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox:Ja
- Sections
- Godt
- Articles
- Godt
- Fonte:
- Indsat ved hjælp af google fonts: Ja dog ikke /font mappen
- CSS-definintion: jo, men sgutte REM i `*`reglen - det skulle havwe været i PX - og så rem for resten til `h1` etc.
- CSS:
- Brug af class'er: Fin brug
- Brug af Flexbox / CSS Grid: Kun flex - super løsning
- Navngivning: Fine
- Effekter: Alle sammen
- Billeder:
- Filformater: ok
- Størrelser: Burger 4MB??
- Kommentarer
- Spørg om følgende:
Hvad mangler du for at kunne få brødteksten til at vise Eurostile?
Hvad gør: position: fixed;
Hvordan loader du et mindre billede da 4MB er for meget for en mobilside? **(Javascript eller mediaquery)**
[til toppen](#ELEVER)
### Mathias Sandbekk Olsen
- Holder løsningen designoplægget:
Jo - magler dog logo på min pc
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Ja
- Sections
- Godt
- Articles
- Godt
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: Ikke i `*`regel. Men ellers ok
- CSS:
- Brug af class'er: Godt
- Brug af Flexbox / CSS Grid: ok
- Navngivning: ok
- Effekter: Kun toppen
- Billeder:
- Filformater: ok
- Størrelser: burger123 - navngivning skidt - 7.9MB
- Kommentarer
- Spørg om følgende:
Hvad gør dette: class="smaller-width grid-columns"?
**(Kalder 2 class'er)**
Hvorfor har han placeret @font-face i bunden i stylesheet?
**(Der er ikke nogen regler for hvor den skal være)**
Hvorfor har han lavet:
`.box1{
background-color: white;
}
.box2{
background-color:white;
}` (linie 77 - 82 i css)
**(Der burde kun være 1 af dem og den kunne hedde bg-white som navn)**
Forklar denne her:
`grid-column-start: 1;
grid-column-end: 3;` (linie 95 og 96 i css)
[til toppen](#ELEVER)
### Morten Pihl Dyreborg Nielsen
- Holder løsningen designoplægget:
Jo - forkert brødtekst.
Tror det er link til style sheet da han har placeret en "hjemmeside"mappe med index.html og stylesheet.css i. Det laver garenteret ballade for at vise den i browseren. kan være han har ændret det.
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: ja - og uden ul og li
- Har eleven brugt flexbox: Ja
- Sections
- Godt - helt rigtigt
- Articles
- Godt - helt fint
- Fonte:
- Indsat ved hjælp af google fonts: ja
- CSS-definintion: Nej og linket til /font mappen passer ikke
- CSS:
- Brug af class'er: God brug
- Brug af Flexbox / CSS Grid: ja begge
- Navngivning: fin
- Effekter: Ikke opnået
- Billeder:
- Filformater: ok
- Størrelser: Burger 1.6MB - ok men burde være endnu mindre
- Kommentarer
- Spørg om følgende:
Hvis han ikke selv har gjort det - så sæt en / foran fonts/eurostile linket i linierne 14-18
Hvad gør: grid-template-columns: 1fr 1fr 1fr 1fr; (linie 245)
[til toppen](#ELEVER)
### Nanna Kjeldsmark Johansson
- Holder løsningen designoplægget:
tjo - Hero er skidt med placerig af elementerne.
Forsøgt med noget inline styling
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: ja
- Har eleven brugt flexbox: det er W3.CSS der er brugt
- Sections
- Ok
- Articles
- Ok
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: nej
- CSS:
- Brug af class'er: ok
- Brug af Flexbox / CSS Grid: Det er forsøgt
- Navngivning: ok
- Effekter: Ikke opnået
- Billeder:
- Filformater: ok
- Størrelser:Burgerbilledet er 5.4MB og navnet: sammenkopier_nanna ikke godt
- Kommentarer
- Spørg om følgende:
Hvad er w3schools.com/w3css? Og hvordan/hvor bruger hun det?
Hvad gav udfordringen med placering af bruger og tekst og hvordan kunne hun løse det med mere tid?
Hvorfor giver hun width="250px" på billederne og kunne hun definere det et andet sted?
Bruger hun class="kasse 3" i html linie 60?
**(Nej :0D)**
[til toppen](#ELEVER)
### Sara Cecilie Steenberg Nielsen
- Holder løsningen designoplægget:
tjo ikke fuld bredde for den grønne. Placering af elementer i hero.
Footer ligger unden for body tagget
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej - W3.CSS
- Sections
- ok
- Articles
- ok
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: Ja forsøgt
- CSS:
- Brug af class'er: miundre godt
- Brug af Flexbox / CSS Grid: ja CSS grid
- Navngivning: ok
- Effekter: Kun hover ikke animation
- Billeder:
- Filformater: ok
- Størrelser: burgerglobel copy.png - ikke mellemrum i filnavne og 5MB
- Kommentarer
- Spørg om følgende:
Hvad gør denne her: class="smaller-width grid-columns"
Kan man style anderledes end: style="color:Green;" og hvorfor ligger det i html? (linie 58 i html) . Burde ligge i css
Hvad kunne hun evt gøre med tekst og billede under menuen?
Og hvordan kunne hun få menuen til venstre.
[til toppen](#ELEVER)
### Sara Dèrsima Holst Celik
- Holder løsningen designoplægget:
jo - Elementer i HERO ikke optimalt
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: nej
- Sections
- ok - men bruger `<flex>` som tag
- Articles
- ok
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: nej - forsøgt
- CSS:
- Brug af class'er: ok
- Brug af Flexbox / CSS Grid: ok
- Navngivning: ok
- Effekter: Kun Hover
- Billeder:
- Filformater: ok
- Størrelser: Burger 6MB
- Kommentarer
- Spørg om følgende:
Hvad er `<flex>` tagget til ? linie 27 i html. **(Ikke noget - det findes ikke - man kan godt skrive det og man kan også se det. Men det er ikke et semantisk tag. Så skal man skrive XML)**
Hvad skal der til for at få Eurostile til at virke?
Hvordan kunne hun få tilmeld-knappen til at ligge rigtigt i forhold til designoplægget?**(Benytte position: absolute på knappen og position: relative til den grønne box)**
[til toppen](#ELEVER)
### Søren Møller Heitmann
- Holder løsningen designoplægget:
Jo. men /font mappen mangler
- Semantisk HTML:
- Navigation:
- Har eleven brugt NAV: Ja
- Har eleven brugt flexbox: Nej
- Sections
- Godt, som det skal være
- Articles
- Godt, som det skal være
- Fonte:
- Indsat ved hjælp af google fonts: Ja
- CSS-definintion: nej, men brugt @font-face
- CSS:
- Brug af class'er: Helt fine
- Brug af Flexbox / CSS Grid: Ja
- Navngivning: God
- Effekter: Opnået
- Billeder:
- Filformater: ok
- Størrelser: Burgerworld - 4.2MB
- Kommentarer
- Spørg om følgende:
Hvordan kan Eurostile komme til at virke?
Hvorfor bruger han 14fr? - når 1fr kan gøre det samme? Test evt ved at skifte 14 ud med 1 i linie 183 i CSS. 14fr giver ikke nogen mening.
det kan godt være han ikke er enig.
Hvad gør: background-size: cover; ?
Hvad kunne han også have brugt til at lave © og @ tegnet med?
**(entity / unicode tegnene: `© ©
©
©` og `@
@
@`)
Hvordan ville han loade et mindre burgerbillede til en mobilversion af sitet? **(Javascript eller Media Queries)**
[til toppen](#ELEVER)
Sign in with Wallet
Connect another wallet