---
# System prepended metadata

title: 'Webb2 Uppgift 3: Bootstrap'
tags: [bootstrap, uppgift]

---

# 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
![Skiss på layout](https://i.imgur.com/jcwjKxk.jpg)

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`