Ditt arbetsflöde
Det finns en sak som skiljer webbutveckling från nästan all annan programmering: du behöver inte installera ett tolkningsprogram för att din kod ska kunna köras. Det finns redan ett på varje dator, telefon, tv och surfplatta.
Det kallas webbläsaren.
Det betyder att du kan skriva en HTML-fil just nu, öppna den i Chrome och se resultatet direkt, utan pakethanterare, utan konfigurationsfiler, utan att något behöver kompileras.
Men ett professionellt arbetsflöde är mer än att öppna en fil. Det är en loop som du kommer att köra om och om igen under den här kursen, och det är värt att förstå den ordentligt från dag ett.
Loopen
Webbens arbetsflöde består av tre delar som arbetar tillsammans.
Du skriver i en kodeditor. Du ser resultatet i webbläsaren. Du förstår vad som händer i DevTools. Sedan skriver du igen.
Dessa tre är inte separata verktyg du plockar fram och lägger undan. De är öppna samtidigt, hela tiden. En professionell webbutvecklare har vanligtvis kodredigeraren i hälften av skärmen och webbläsaren i den andra. DevTools är ett tangentbordskommando bort (testa genom att trycka F12).
VS Code, där du skriver
VS Code är den kodeditor du använder i kursen. Ladda ner och installera den från code.visualstudio.com om du inte redan har den.
En editor är mer än ett textprogram. VS Code färgkodar din HTML och CSS så att strukturen syns direkt, flaggar uppenbara syntaxfel, fyller i taggnamn och egenskaper automatiskt och låter dig öppna en hel projektmapp som ett träd i sidopanelen.
Emmet
VS Code har ett inbyggt tillägg som heter Emmet. Emmet ger dig förkortningar för att snabbt generera HTML och CSS-kod. Du kommer att använda ! + Tab för att generera hela HTML-grundstrukturen på en sekund, och p*3>lorem + Tab för att fylla en sida med testtext utan att skriva ett ord.
Live server
För att se dina sidor är det praktiskt att installera Live Server. Det är ett tillägg som startar en lokal webbserver och automatiskt laddar om sidan när du sparar en fil. Öppna Extensions-panelen med Ctrl+Shift+X / Mac: Cmd+Shift+X, sök på Live Server, det ska vara skapat av Ritwick Dey, installera det.
Live Server startar en lokal webbserver och laddar automatiskt om webbläsaren varje gång du sparar en fil. Det gör att loopen (skriv, spara, se) går på under en sekund i stället för att du manuellt ska växla fönster och trycka F5.
Webbläsaren, dina ögon
Använd den webbläsare du föredrar. Chrome, Firefox och Edge fungerar alla utmärkt som utvecklingsmiljö. Safari fungerar också, men har några egenheter som gör det lite krångligare att jobba i som primär utvecklingswebbläsare, även om du kommer att testa i den senare. Det som är bra att veta är att de flesta webbläsare i grunden är byggda på samma motor, så det du lär dig i Chrome gäller i princip för alla webbläsare.
Det som spelar roll är att webbläsaren har bra DevTools. Chrome och Firefox har de mest kompletta, och kursens exempel utgår vanligtvis från Chrome.
Webbläsaren gör mer än att visa din sida. Den är den faktiske tolken av din kod. Den läser din HTML, bygger en intern trädstruktur av elementen, applicerar CSS-reglerna, löser konflikter och ritar upp resultatet. Det du ser på skärmen är inte din kod. Det är webbläsarens tolkning av din kod. Den skillnaden blir viktig, och det är precis vad DevTools visar dig.
DevTools, där du förstår
Tryck F12 i webbläsaren. Det är det viktigaste tangentbordskommandot i kursen.
DevTools är inte ett felsökningsverktyg du öppnar när något gått fel. Det är din direktlinje in i webbläsarens inre. Under fliken Elements ser du HTML-trädet precis som webbläsaren tolkat det, inte nödvändigtvis som du skrivit det, och under Styles ser du exakt vilka CSS-regler som gäller för varje element, varifrån de kommer och om något överskrivits. Under Computed ser du den faktiska beräknade boxmodellen, ritad som ett färgkodat diagram.
Hovra över ett element i Elements-panelen och webbläsaren markerar det på sidan. Klicka på ett färgprov i Styles och du får en färgväljare. Aktivera mobilläget med ikonen längst upp till vänster och du kan dra i sidkanten och se exakt när din layout beter sig annorlunda på smal skärm.
Du kan också ändra CSS-värden direkt i DevTools och se resultatet live, utan att spara filen. Det är det snabbaste sättet att förstå hur ett värde påverkar layouten innan du skriver in det i koden.
DevTools dyker upp i nästan varje del av kursen. Varje gång det nämns är det för att visa dig något som text inte kan förmedla, något som bara syns när du själv öppnar panelen och tittar.
Prova loopen
Skapa en mapp på din dator. Öppna mappen i VS Code med File -> Open Folder. Skapa en ny fil och döp den till index.html. Skriv ! och tryck Tab. Spara genom att trycka Ctrl+S eller ⌘+S på Mac.
Högerklicka på filen i VS Code och välj Open with Live Server. Webbläsaren öppnas med en tom sida.
Gå tillbaka till VS Code. Hitta <body>-taggen och skriv en rubrik inuti den: <h1>Hej, världen!</h1>. Spara och titta i webbläsaren. Din rubrik syns direkt.
Det är loopen. Resten av kursen är variationer på den.
Det finns ett verktyg till som du kommer att använda, men det introduceras i Tema 2 när du är redo att publicera din webbplats, GitHub. Det kräver ett konto och lite orientering för att förstå vad det faktiskt gör, och det är värt att förstå ordentligt när det är dags, inte som ett steg i en installationslista.