# Brushup MG36

###### tags: `MG36` `GF2`

## :computer: WEB Brushup.

### Emner

- [x] Teori (kort) hvad skal I kunne tale om
- [x] wrapper + CSS fattigmands reset & Google Fonts - Øvelse
- [x] header & nav - Øvelse
- [x] section - Kolonner - Øvelse
- [x] section - produkter - figure tag - øvelse
- [x] section - en tabel - øvelse
- [x] section - formular - øvelse
- [x] section - tekst & billede
- [x] footer - ikoner - øvelse
- [x] sæt sammen øvelse
- [ ] links - smooth scroll - sticky header
- [ ] Sæt det sammen på en anden møde - kontrol
- [ ] feedback - upload til netlify

:rocket::walking:

## :clipboard: Teori (kort) hvad skal I kunne tale om

:::info
:bulb: **Semantisk HTML:** Semantiske elementer == Elementer med mening
:::

Eksempler på ikke sematiske elementer: `<div>` og `<span>` - fortæller ingenting om deres indhold.

Eksempler på sematiske elementer: `<form>`, `<table>`, og `<article>` - Fortæller meget ydeligt hvad de indeholder.

[W3Schools forklaring ](https://www.w3schools.com/html/html5_semantic_elements.asp)

Og så lidt om hvad man ville bruge de forskellige til. Og dem du har brugt i dit projekt.

:::info
:bulb: **CSS:** == Cascading Style Sheets
:::

De "kaskader" [Den Store Danske](https://denstoredanske.lex.dk/kaskade)
Så de tilføjer/overskriver elementer fra tidligere.

#### Regler

*{
    /*fattigmands reset*/
    margin: 0;
    padding: 0;
    font-size: 16px;
}
.products{
    display: grid;
}

Altid en selector herover
- `*` for alle elementer der bliver læst
- .products for class'en der er defineret i HTML elementet

Derefter i { } (Curly brackets - krølparenteser - tuborgklammer)
egenskaberne for reglen med en
- selector, her i *-reglen 3 styks == margin, padding og fontsize
- værdi, som altid står efter : og altid afsluttes med et ;

[W3Schools om CSS definition](https://www.w3schools.com/css/css_syntax.asp)

Og nogle af de forskellige i har brugt i jeres projekt.