VS Code och projektmappar

Mål

Efter kapitlet ska du kunna...

• installera VS Code, Chrome och användbara tillägg
• skapa och öppna en tydlig projektmapp
• använda lämpliga filnamn och filändelser
• koppla ihop filer med relativa sökvägar
• söka hjälp och kontrollera förslag ansvarsfullt

Verktyg

Vad behöver du?

Använd den senaste versionen av Chrome.

Installation

Installera VS Code

1. Gå till code.visualstudio.com.
2. Ladda ner versionen för ditt operativsystem.
3. Öppna installationsfilen och följ stegen.
4. Starta VS Code.

Utseendet kan skilja sig lite från äldre filmer och bilder.

Operativsystem

Installationsfilen skiljer sig

Extensions

Tillägg hjälper dig arbeta

Öppna Extensions i vänsterspalten, sök efter namnet och välj Install.

• Live Server: visar projektet lokalt och laddar om när du sparar.
• W3C Web Validator: hjälper dig hitta HTML-fel.
• Color Highlight: visar CSS-färger i koden.
• Image Preview: förhandsvisar bilder.

Emmet

Skapa grundkoden snabbt

Emmet är redan inbyggt i VS Code.

Snabbtest · del 1

Skapa projektet

1. Skapa mappen test-webb.
2. Dra mappen till VS Code eller välj File → Open Folder.
3. Skapa index.html och styles.css.
4. Skriv ! i HTML-filen och tryck Tab.

Snabbtest · del 2

Koppla ihop filerna

<link rel="stylesheet" href="styles.css">

<p>Hello World!</p>

Snabbtest · del 3

Ändra sidans utseende

body {
  background-color: aqua;
}

p {
  color: darkblue;
}

Spara filerna och starta Live Server.

Lokal webbserver

Vad betyder adressen?

http://127.0.0.1:5500/index.html

• 127.0.0.1 betyder din egen dator.
• 5500 är porten som Live Server använder.
• index.html är filen som visas.

En port är som en numrerad ingång till ett program eller en tjänst på datorn.

localhost:5500 betyder i praktiken samma sak.

Projektmapp

En webbplats samlar sina filer

profil-sida/
  index.html
  styles.css
  images/
    profilbild.jpg

Öppna hela projektmappen i VS Code – inte bara en enskild fil.

Arbeta med en projektmapp i taget i VS Code.

Ordning

Samla kursens projekt

Skapa en gemensam mapp, exempelvis Dokument/webbutveckling.

Ge sedan varje uppgift en egen projektmapp.

Filnamn

Namn som fungerar på webben

Använd små bokstäver, siffror och bindestreck. Undvik mellanslag, å, ä, ö och specialtecken.

Startsidan

Varför heter den index.html?

Många webbservrar letar automatiskt efter filen index.html.

Relativa sökvägar

Utgå från filens plats

<link rel="stylesheet" href="styles.css">

<img src="images/profilbild.jpg" alt="Porträttbild">

Kontrollfråga

Vilken sökväg är rätt?

HTML-filen ligger bredvid mappen images. Bilden heter logo.png.

Tänk efter innan du går vidare.

Svar: images/logo.png

Hitta hjälp

Engelska är en del av arbetet

Lär dig ord som element, attribute, browser, inspect, error och warning.

• Läs dokumentation hos MDN och WHATWG/W3C.
• Kontrollera webbläsarstöd med Can I Use.
• Jämför lösningar från forum med dokumentationen.

AI som hjälpmedel

Du ansvarar för koden

1. Be om en förklaring eller ett förslag.
2. Läs och förstå koden.
3. Testa den i ditt eget projekt.
4. Kontrollera resultat och felmeddelanden.

Ett svar är inte korrekt förrän du har kontrollerat att det fungerar.

Prova själv

Förbered ditt första projekt

1. Installera VS Code, Chrome, Live Server och W3C Web Validator.
2. Skapa och öppna mappen profil-sida.
3. Skapa index.html, styles.css och images.
4. Skapa HTML-mallen med ! och Tab.
5. Starta Live Server och kontrollera rätt fil.

Sammanfattning

Kom ihåg

• VS Code är kodredigeraren och Chrome används för testning.
• Tillägg som Live Server och W3C Web Validator förenklar arbetet.
• Varje webbplats ska ha en tydlig projektmapp.
• index.html är standardnamnet för startsidan.
• Relativa sökvägar kopplar ihop projektets filer.
• Testa och förstå alltid kod du får från andra eller från AI.