# Webb1 - Uppgift 2: Flexbox
###### tags: `webbutveckling`

Under denna uppgiften är jag kunden till erat projekt. Uppgiften går ut på att ni skall skapa en hemsida där ni med hjälp av flexbox visar upp en produkt.

Exempel:
Ett företag som säljer frukter. Företaget behöver en logo, bilder på produkter,

## Betygskrav:

#### Generella Bedömning

<details>
<summary> <b>Se krav</b> </summary>
Dokumentering

- Lagom kommenterad kod (inte varje rad men inte heller för få)
- Skriv ned de problem du stött på i en punktlista

- Självständighet
- E: Du genomför ditt projekt i samråd med utbildaren
- A: Du genomför, efter en introduktion, självständigt ditt projekt

- HTML
- E: Du skriver HTML-kod som med tillfredsställande resultat följer standarder och riktlinjer
- A:Som för E, men med gott resultat, och av mer komplex karaktär

- CSS
- E: Du skriver CSS-kod som med tillfredsställande resultat följer standarder och riktlinjer
- A: Som för E, men med gott resultat, och av mer komplex karaktär

- Slutprodukt
- E: Det färdiga projektet är av tillfredsställande kvalitet
- A: Som för E, men av god kvalitet

</details>

## Tekniska krav:

#### HTML

- All HTML skall vara korrekt indenterad
- Det skall finnas en bakgrundsfärg
- Bra classnamn
- Det vill säga:
- container-img och ej container-1
- Använd små bokstäver och på engelska
- Exempel: container-img, item-img,

#### Element
Element som skall vara inkluderade:
- container
- Samma men fler än ett element av: item.

#### ID
+ Använd endast detta vid rätt tillfälle

#### Text

- Texten skall fylla de utrymmen så sidan ej ser tom ut
- Det är ej tillåtet att fylla i med lorem ipsum (genererad text)

#### Länkar
- länkar till varje HTML dokument
- Alla länkar ska ha en länk tillbaka till sidan de kom ifrån

#### Accepterade standarder

+ **Flexbox**

#### Krav på standarder

+ För E
+ Anpassa innehållet på ett rimligt sätt
+ Centrering av bilder och text
+ Centrering av båda axlarna

+ För C
+ Som för E samt:
+ Kunna ändra layout vid behov inom rimlig tid till något av det nedan:
+ Kunna använda flex
+ direction
+ wrap
+ flow
+ space-around
+ space-between
+ align-items
+ column-gap
+ För A
+ Som för C samt:
- Minst 2 utbyggnader
- Kunna på beställning ändra din layout.
- Perfekt indentering av kod
- Var konsekvent (ändra dig inte med hur du namnger saker)
- Bra namn givelser:
- Använd class="container" istället för class="ctn"
- Använd class="wrapper" istället för class="wrp"

- Rätt mängd kommentarer

#### Bilder
- Max storlek på bilderna 5Mb
- Namnen skall vara beskrivande
- En bild på en häst => horse.png

#### Filstruktur

- HTML sidor som skall vara med i projektet:
- Hem (index.html)
- Produkter (products.html)
- Om oss (about.html)
- Kontakt (contact.html)
- Dokumentation (documentation.html)

- **produkterna**
- **css**
- style.css
- **img**
- exempel_bild.png
- index.html
- products.html
- contacts.html
- about.html
- documentation.html

## Github
+ herman-n-produkterna
+ Lämna in https://github.com/themangokid/herman-n-produkterna.git

Kom ihåg att texten skall vara på svenska och filnamen på engelska.
- Stor och liten bokstav spelar roll
- Endast engelska filnamn
- Fil och mappstrukturen skall vara följande:
- Det i bold är mappar

## Utbyggnader, välj 2 för A:
+ Animationer i CSS3, unika och avancerade (ej kopierade)
+ En shopping cart med javascript (ingen databas)
+ Ett bildspel på produkterna i javascript (endast delvis kopiering tillåten)
+ Drop down menyer på alla val i menyerna (hem, produkter, kontakt, om oss)

#### Skiss
- Ni behöver ingen egen skiss på denna uppgiften.


###### tags: `uppgift` `html` `css`

##### Länkar

https://tobiasahlin.com/blog/common-flexbox-patterns/

---

## Lärar notes, uppdatera:
+ Lägg till exempel på tidigare uppgifter
+ Ta bort vissa märkliga krav
- stor och lite bokstav
+ Lägg in en tutorial hur man använder github desktop länka i uppgiften
+ Att eleven skall lämna in en printscreen på hur hemsidan ser ut för dem, så du kan jämnnföra med hur det ser ut för dig