Introduktion
Det är imponerande vad du kan göra på webben idag. Du kan skapa webbupplevelser som körs på alla enheter, inkludera alla typer av medieinnehåll och utföra komplicerade beräkningar. Du kan till och med skapa appar som ser ut och känns som inbyggda program.
Om du är intresserad av att starta webbutveckling idag kan du stöta på en svindlande uppsättning alternativ. I den här modulen får du lära dig de grundläggande komponenterna i en webbplats och några verktyg som du kan använda för att starta webbutveckling. Du använder HTML, CSS och JavaScript tillsammans för att skapa en webbplats och sedan använda utvecklarverktyg i webbläsaren för att förstå vad som händer.
Med den här grundläggande kunskapen på plats får du ett bättre sammanhang för att fatta beslut i framtiden när du skapar webbplatser; Om du till exempel ska välja JavaScript-ramverk eller skapa egna JavaScript-funktioner för att skapa din webbplats.
Vi börjar med att titta på vart vi vill åka.
Scenarium
Anta att du är webbutvecklare och har blivit ombedd att göra företagets webbplats tilltalande för ett bredare utbud av kunder. För att dina kunder ska kunna anpassa sin upplevelse på din webbplats bestämmer du dig för att lägga till stöd för ljusa och mörka teman. Du skapar en liten webbplats för konceptbevis för att demonstrera stöd för teman med hjälp av CSS, och du skriver en JavaScript-funktion för att växla mellan dessa teman.
När det är klart ser webbplatsen ut som det här exemplet när det mörka temat har valts:
Vad finns på en webbsida?
Innehållet, formatet och den interaktiva logiken är uppdelade i HTML-, CSS- respektive JavaScript-filer. En designprincip i modern programmering är separation av problem. Bland de många anledningarna till att separera problem är två enkelhet och återanvändning. Genom att till exempel formatera HTML-element med hjälp av CSS kan du förenkla HTML-koden. I stället för att koda utseendet i varje element använder du CSS-format på alla element på en sida, oavsett sidkomplexitet. Dessutom kan du länka flera HTML-sidor till en enda CSS-fil, vilket kan förenkla ett konsekvent utseende på hela webbplatsen.