Differences

This shows you the differences between two versions of the page.

--- mattias_guestbook [2019-12-17 10:20]
Mattias Hamberg [Studera dokumentationen]
+++ mattias_guestbook [2022-07-18 13:20]
@@ Line 1: / Line 1: @@
-====== Bygg en gästbok ======
-==== CSS-ramverk ====
-Ute i verkligheten blir det allt mer sällsynt att man skriver all css själv idag. Det är idag vanligare att man använder sig av något css-ramverk. De vanligaste idag är nog:
-  - **Bootstrap** - https://getbootstrap.com/
-  - **Materialize CSS** - https://materializecss.com/
-  - **Foundation** - https://get.foundation/
-  - **Semantic UI** - https://semantic-ui.com/
-  - **Bulma** - https://bulma.io/
-Av dessa är Bootstrap det överlägset största.
-==== Lägg till Bootstrap ====
-I denna uppgift ska du få testa att använda dig av Bootstrap. Detta gör du genom att i head-sektionen lägga till följande css-filer:
-<code html>
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css">
-</code>
-Lägg också till dessa script alldeles innan `</body>`-taggen i slutet av dokumentet
-<code html>
-<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-</code>
-==== Studera dokumentationen ====
-Nästa steg är att kolla igenom och försöka förstå dokumentationen. Den hittar du på: https://getbootstrap.com/ och bör användas under hela uppgiften. Poängen är att du ska lära dig att söka, hitta och använda dig av dokumentationer. För att komma igång får du gärna titta på denna video:
-<html>
-<iframe style="max-width: 100%" width="560" height="315" src="https://www.youtube.com/embed/7g8Gg2QVdeU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</html>
-==== Regler & tips ====
-  - Ditt slutresultat ska se exakt ut som facitbilderna.
-  - Du får använda dig av Bootstrap och Bootstraps dokumentation.
-  - Du får inte skriva någon egen css.
-  - Inga class- och for-attribut ska vara tomma.
-==== Ladda ner ====
-Den zip-fil du ska utgå ifrån är denna:
-{{mattias_guestbook.zip}}