Webbutveckling 1 · område 1

Kom igång

Den här guiden tar dig från ingenting till en inlämnad uppgift. Du behöver inte ha varit på lektionen för att följa den. Fastnar du finns felsökningen i avsnitt 7 – den täcker det som brukar gå fel.

4 sept Områdets inlämning kl 23:59 Kom igång-uppgiften lämnas in redan efter lektion 3.

1. Tre verktyg, tre jobb

Kursen använder tre verktyg. De gör olika saker, och blandar du ihop dem är det lätt att tro att du lämnat in när du inte har det.

Verktyg	Vad ligger där
itslearning	Uppgifterna, guiderna, planeringen, deadlines och din återkoppling. Här lämnar du in.
GitHub	Din kod. Ditt repo, dina commits och senare din publicerade sajt.
Codespaces	Där du skriver koden. VS Code som körs i webbläsaren.

Meningen att komma ihåg

Koden till GitHub, länken till itslearning.

Inlämningen är alltså inte en fil. Den är en adress. Det betyder att adressen måste fungera för någon annan än dig – annars finns det ingenting att sätta betyg på.

2. Konto och eget repo

Kontot

Gå till github.com och välj Sign up. Har du redan ett konto: Sign in.
Välj ett användarnamn du kan säga högt. Det kommer synas i adressen till din sajt under hela kursen.
Verifiera mejladressen. GitHub skickar ett mejl – klicka på länken i det.

Utan verifierad mejladress går Codespaces inte att starta. Hittar du inte mejlet, titta i skräpposten.

Repot

Ett repo (kortform för repository) är mappen med ditt projekt, som GitHub håller reda på åt dig. Du gör din egen kopia av kursens startmapp:

Öppna github.com/AndreNLindhe/webbutveckling1-start.
Klicka på knappen Use this template och välj Create a new repository.
Skriv webbutveckling1 som namn.
Under Choose visibility: kontrollera att det står Public. Det är förvalt – rör det bara om det står något annat.
Klicka Create repository.

Låt reglaget Include all branches stå kvar på Off. Du behöver bara huvudgrenen.

Varför publikt?

Ett privat repo syns bara för dig. Länken du lämnar in ger 404 för alla andra. Det ser rätt ut från din sida, eftersom du är inloggad – och därför är det så lätt att missa.

Valde du Private av misstag: Settings → General → skrolla längst ned till Danger Zone → Change repository visibility → Make public. GitHub ber dig skriva repots namn för att bekräfta.

Prova själv

Öppna din repo-länk i ett privat fönster, där du inte är inloggad. Syns sidan är repot publikt. Får du 404 är det fortfarande privat.

3. Öppna ditt Codespace

Ett Codespace är en färdig utvecklingsmiljö som körs på GitHubs datorer. Du får VS Code i webbläsaren, kopplat till ditt repo. Ingenting behöver installeras.

Gå till ditt repo på github.com.
Klicka på knappen Code.
Välj fliken Codespaces.
Klicka Create codespace on main.

Första gången tar det en till två minuter. Det ser ut som att ingenting händer. Klicka inte igen – då startar du två Codespaces och kan hamna i fel miljö nästa gång.

När det öppnat ser du filerna i listan till vänster. Klicka på index.html för att öppna den.

Nästa gång du ska arbeta

Samma väg: Code → Codespaces → klicka på det Codespace som redan finns i listan. Skapa inte ett nytt varje gång, då ligger dina ändringar kvar i det gamla.

4. Ändra och spara

Öppna index.html och leta upp rubriken:

<h1>Din rubrik här</h1>

Byt ut texten mellan taggarna mot ditt eget namn:

<h1>Ada Lovelace</h1>

Du behöver inte förstå HTML än – det kommer i område 2. Just nu ska ändringen bara bevisa att hela kedjan fungerar, från din webbläsare till GitHub. Spara med Ctrl + S.

Commit och push

En commit är en sparad punkt i historiken, med ett meddelande om vad du gjorde. En push skickar dina commits upp till GitHub.

Klicka på ikonen med tre grenar i vänsterkanten – Source Control.
index.html står under Changes. Håll muspekaren över filen och klicka +.
Skriv ett meddelande i rutan högst upp, till exempel Bytte rubrik till mitt namn.
Klicka Commit.
Klicka Sync Changes.

Utan meddelande vägrar VS Code att committa. Det är med flit. Meddelandet ska säga vad du gjorde – update säger ingenting, och begripliga commit-meddelanden är ett krav i alla inlämningar i kursen.

Steg 5 är det som faktiskt skickar upp ändringen. Hoppar du över det ser allt klart ut i VS Code medan GitHub fortfarande är tomt.

Prova själv

Gå tillbaka till ditt repo på github.com och ladda om sidan. Står ditt namn där? Då har hela kedjan fungerat.

5. Lämna in

Stå på ditt repos sida på github.com och ladda om, så du ser att ändringen finns.
Kopiera adressen ur adressfältet. Den ska se ut så här:

https://github.com/dittanvandarnamn/webbutveckling1

Gå till itslearning → kursen Webbutveckling 1 → uppgiften Kom igång.
Klistra in länken och lämna in.

Kolla adressen

Den ska börja med github.com/. Innehåller den github.dev, codespaces eller ett slumpmässigt namn med bindestreck har du kopierat länken till ditt Codespace – och den fungerar bara för dig.

Så här går varje inlämning till resten av kursen. Samma två steg, varje gång: din kod ligger uppdaterad och pushad på GitHub, och länken till ditt publika repo lämnas i itslearning-uppgiften senast fredag 23:59.

6. Checklista

Kryssen sparas i din webbläsare, så du kan stänga sidan och komma tillbaka.

Ska-krav — nivå E

Jag har ett GitHub-konto med verifierad mejladress.
Jag har skapat ett eget repo från kursens template-repo.
Det står Public under repots namn.
Jag har öppnat mitt Codespace och ändrat rubriken i index.html.
Jag har gjort en commit med ett meddelande som säger vad jag ändrade.
Ändringen syns på github.com när jag laddar om sidan.
Jag har lämnat repo-länken i itslearning-uppgiften.

Bör-krav — mot nivå C

Jag har testat min länk i ett privat fönster och sett att den fungerar utan inloggning.
Mitt commit-meddelande beskriver ändringen – det står inte update.
Jag har bara ett Codespace i listan, inte flera.
Jag kan förklara skillnaden mellan commit och push för en klasskamrat.

Utmaning — mot nivå A

Jag har gjort minst tre commits och läst historiken under Commits.
Jag har skrivit en README.md som beskriver projektet.
Jag har klonat repot till min egen dator med git clone.

7. Felsökning

Sök på symptomet du ser, inte på vad du tror att felet är.

Sök bland felen

10 rader

Symptom	Trolig orsak	Åtgärd
Länken ger 404 för andra	Repot är privat	Settings → General → Change repository visibility → Make public
Codespaces-knappen gör ingenting	Mejladressen är inte verifierad	Kolla inkorgen och skräpposten, klicka på länken i mejlet från GitHub
Inget händer när Codespacet startar	Första starten tar en till två minuter	Vänta. Klicka inte igen
Ändringen syns inte på github.com	Du committade men glömde Sync Changes	Source Control → Sync Changes, ladda sedan om GitHub-sidan
Commit-knappen gör ingenting	Meddelanderutan är tom	Skriv vad du ändrade och klicka Commit igen
Filen står inte under Changes	Du har inte sparat filen	Ctrl + S, kolla Source Control igen
Repot heter samma sak som kursens	Du klickade Fork i stället för Use this template	Radera repot och gör om från avsnitt 2
Läraren ser en tom sida på min länk	Du lämnade Codespace-adressen	Länken ska börja github.com/dittnamn/
Två Codespaces i listan	Du klickade Create två gånger	Öppna det du arbetat i. Radera det andra under github.com/codespaces
Ändringen försvann	Du arbetade i fel Codespace	Öppna det andra i listan, ändringen ligger kvar där

8. Ord du ska kunna

Ordträning

Ord	Betyder
repo	Repository. Mappen med ditt projekt, som GitHub håller reda på
template-repo	En färdig startmapp du gör din egen kopia av
publikt	Synligt för alla som har adressen. Motsatsen är privat
commit	En sparad punkt i historiken, med ett meddelande om vad du gjorde
push	Att skicka dina commits upp till GitHub
Sync Changes	VS Codes knapp för att hämta och skicka ändringar mot GitHub
Codespace	En färdig utvecklingsmiljö som körs i webbläsaren
VS Code	Programmet du skriver kod i. Här kör det i webbläsaren
main	Huvudgrenen i ditt repo. Den du arbetar i den här kursen
404	Webbserverns svar när adressen inte leder till något som går att visa
GitHub Pages	GitHubs tjänst som gör ditt repo till en publik webbplats. Vi använder den i lektion 9

9. Ta det längre

För dig som är klar och vill fortsätta. Ingenting av det här krävs för uppgiften.

Läs historiken. På ditt repo, klicka på Commits. Varje commit går att öppna och visar exakt vilka rader som ändrades, i grönt och rött. Gör ytterligare två ändringar och titta på hur historiken byggs upp.
Skriv en README.md. Filen med det namnet visas automatiskt på repots framsida. Skriv vad projektet är. Den är din sajts anslagstavla resten av kursen.
Arbeta lokalt. Codespaces är inte enda vägen. Installera VS Code och Git på din egen dator och klona repot med git clone. Samma repo, samma commits, men utan att vara beroende av nätet.