Gör en snygg hemsida utan att vara designer

Om du vill göra en enkel och snygg hemsida men inte själv vill designa så kan du använda Bootstrap och en av deras färdiga mallar. Bootstrap är ett ramverk för enkel, responsiv webbutveckling. Att en sida är responsiv innebär att den anpassar sig efter vad för typ av enhet användaren har, dvs dator, telefon eller surfplatta. En responsiv sida ser alltså bra ut både i telefonen och datorn.

Bootstrap bygger på ett rutnätsystem, där skärmen delas in i tolv rutor (eller kolumner, eftersom det är bredden som delas). Utvecklaren får ange i koden hur den vill fördela de tolv rutorna till de olika elementen på sidan.

Om man tex bygger en sida för ett event i tre städer och vill ha en kolumn för varje stad, så kan man tilldela varje kolumn fyra rutor var. Tittar man sedan på sidan på en dator så är kolumnerna fint uppradade bredvid varann. Tittar man på telefonen istället, så har kolumnerna placerats under varann.

Jag kommer här att gå igenom de viktigaste stegen för att skapa en snygg hemsida i HTML och CSS med hjälp av en Bootstrap-mall. Som exempel kommer jag berätta hur jag använde Bootstrap när jag skapade sidan till vårt senaste event, Pepparkakskodning.

Gör såhär:

1. Gå till Start Bootstrap och välj en snygg mall att utgå ifrån. Till Pepparkakskodning använde jag jag mallen Creative.
   
2. Ladda ned koden till mallen du valt
   
3. Öppna index.html genom att dubbelklicka på den i mappen med koden du precis laddat ner. Hemsidan visas nu i din webbläsare men i adressfältet ser du att koden finns lokalt på din dator.
   
4. Ändra i koden
   a) Öppna nu index.html i en text editor, jag brukar använda Sublime.
   b) Gör en liten ändring i koden, t.ex. i den stora texten i headern på sidan.
   c) Spara
   d) Öppna nu filen igen i din webbläsare och se att texten har ändrats.
   
5. Hämta en snygg bakgrundsbild till headern. Det kan vara värt att lägga lite tid på en att hitta en snygg bild som passar ditt ändamål. Det finns många bilder gratis på nätet, men dubbelkolla så att licensen tillåter dig att använda bilden och om du ska namnge upphovsmannen. Jag brukar börja med att leta på Unsplash. Bilderna där är gratis och fritt fram att modifiera och använda.
   
6. Ändra med hjälp av Developer Tools
   a) Om du vet vad du vill ändra, men inte vet exakt var i koden du ska ändra, prova att högerklicka på elementet på sidan och välj ”Inspect Element”.
   b) Du kan ändra i koden direkt i Developer Consolen för att se hur sidan ser ut med dina ändringar. Ändringarna sparas dock inte därifrån, men du kan använda verktyget för att testa ändringar. När du är nöjd, ändra i koden (index.html i detta fallet), spara och öppna sidan igen.
   
7. Ändra stylingen genom en egen CSS-fil
   a) I mappen med koden finns en undermapp, css. Där ligger de css-filer som innehåller styling från bootstrap och från den mall du valt.
   b) Skapa en ny fil där du kan lägga dina egna styling-ändringar. Jag kallade min förpepparkakskodning.css
   c) Se till att din hemsida, index.html läser in din egen .css-fil genom att lägga till en referens i index.html. <link href="css/pepparkakskodning.css" rel="stylesheet"> Det är viktigt att raden för din egen css-fil ligger sist, för att dina ändringar ska ta kraft om samma element har en anan styling i någon av de andra filerna.
   d) Du kan även prova dina styling-ändringar först i developer consolen. Om du vill ändra färg på knappen kan det tex se ut som på bild nummer 7.
   e) Lägg sedan motsvarande css i din egen fil, spara och ladda om sidan.
   .btn-default {
   background-color: cornflowerblue;
   }
   
8. Låt fantasin flöda! Du är inte begränsad av den mall du använt som start. Titta tex på W3Schools för att lära dig mer och ändra utöver mallen. Nu har du iallafall en grund att stå på.
   
9. Om du inte är klar med din kod än och vill jobba vidare en annan dag, eller kanske ta hjälp av en kompis för att göra klart sidan, skapa ett repo på Github där koden och alla ändringar sparas i molnet. Vill du lära dig mer om Github finns det en gratis kurs på Udacity.
   
10. När du är klar behöver du ett domännamn och ett webhotell om du vill lägga ut sidan så att vem som helst kommer åt den. Loopia är en av de vanligaste leverantörerna av domän och hosting i Sverige.

Om du vill se hur hela koden till Pepparkakskodning ser ut så finns den att ladda ner på Github, där vi även har som mål att lägga ut mer kod i framtiden.

Stort lycka till och hör gärna av dig om du har synpunkter eller vill ha hjälp. Om du lägger upp en sida får du gärna också ge oss länken så att vi kan se den.

Happy Coding!