# Webb2 Uppgift 3: Bootstrap

Den här uppgiften går ut på att lära sig undersöka ett färdigbyggt css bibbliotek.

### Innan projektets början

Sidan skall:
- Se professionell ut
- Använda bootstrap
- Använda komponenter
- Ha rätt mappstruktur

## Betygskrav:

#### Kommentarer
+ Det skall framgå att du tagit in information på egen hand

#### Bedömning:
- 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
- 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

## Tekniska krav:

### **Accepterade standarder**
- **Flexbox**
- **Grid**
- **BS Komponenter**

#### HTML

- All HTML skall vara korrekt indenterad
- Det finns hemsidor som gör detta automatiskt

#### 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)
- Kopiera istället från en hemsida om ni behöver info

#### Bootstrap krav

För E måste man ha med:
+ **minst** 9 stycken unika code snippets / komponents
+ Kommenterad kod

För C måste man kunna ta in egen information från dokumentation och implementera detta. Samt ha med allt för E. Krävs goda kommentarer.
+ visa förståelse för hur bootstrap är uppbyggt

För A måste man:
+ Visa förståelse för hur bootstrap är uppbyggt
+ Ha med inst 9 stycken unika, får ej upprepas! **'code snippets' / komponenter**
+ Väl kommenterad kod och kunna visa på förståelse efter egen undersökning
+ Komponenter
+ Komponenterna är anpassade till sidan

För A behöver man både förstå bootstraps uppbyggnad. Någon form av javascript krävs, men inte att man skriver den själv.

#### Länkar
- Länkar som leder till andra delar av sidan (Använd # i href)
- Ej krav att ha externa länkar
- Alla länkar till bilder skall vara lokala (interna, på er hårddisk)

#### Färger
- Max 3 färger som tema, man kan ha bilder som har fler färger

#### Bilder
- Max storlek på bilderna 5Mb
- Namnen skall vara beskrivande
- Bild på en katt => cat.png

## Mappstruktur
HTML sidor som skall vara med i projektet:
+ index.html
+ Endast engelska filnamn
- **bootstrap**
- **css**
- style.css
- bootstrap.css
- **img**
- example_image.png
- index.html

###
+ Exempel struktur, där # är ett alternativ i en dropdown.
+ Hem/produkter - index.html
+ Hoovers - #
+ Dyson - #
+ Fläktar - #
+ Tjänster - services.html
+ Rengöring - #
+ Tvätt - #
+ Lagring - #
+ Kontakt - contact.html

### Följande krävs för att uppgiften skall rättas:
+ Uppladdad på Github på ett eget repository
- Namn på repo: förnamn-efternamn-bootstrap (endast småbokstäver och minustecken)
+ Kommenterad kod

## Elev exempel:
+ https://i.imgur.com/9fkusIN.png

## Länkar till egen research

+ [Containers](https://https://getbootstrap.com/docs/5.0/layout/containers/)
+ [Grid system](https://getbootstrap.com/docs/5.0/layout/grid/)

###### tags:`uppgift` `bootstrap`