Moment 5: Webbens värld - HTML, CSS & JavaScript

Lästid: ca 12 min

Du har nu en fullständigt konfigurerad, professionell utvecklingsmiljö i VS Code. Du kan hantera filer, köra kommandon och spåra ändringar med Git. Det är dags att applicera dessa färdigheter på ett av de vanligaste och mest kreativa områdena inom utveckling: att bygga för webben.

Nästan allting vi interagerar med på internet är byggt med tre grundläggande teknologier som arbetar tillsammans. I detta moment ska vi avmystifiera dessa tre - HTML, CSS och JavaScript - och använda vår nya utvecklingsmiljö för att bygga en enkel, interaktiv webbsida från grunden.

Vad du lär dig

Efter detta moment kommer du att kunna:

Förklara de distinkta rollerna som HTML, CSS och JavaScript har.
Skapa en grundläggande webbsida med en standard HTML5-struktur.
Länka en extern CSS-fil för att styla din sida och en JavaScript-fil för att lägga till funktionalitet.
Använda det oumbärliga VS Code-tillägget "Live Server" för att omedelbart se dina ändringar i webbläsaren.

Grunderna: Webbens tre byggstenar

Ett enkelt sätt att förstå hur teknologierna samverkar är att tänka på en webbsida som ett hus:

HTML (HyperText Markup Language): Detta är husets stomme och struktur. HTML definierar alla delar och deras syfte: här är ett tak (<header>), här är ett rum (<div>), här är ett fönster (<img>), och här är texten på väggen (<p>).
CSS (Cascading Style Sheets): Detta är husets färg, form och inredning. CSS bestämmer hur allting ser ut: väggarna ska vara blå (color: blue;), texten ska ha ett visst typsnitt (font-family: ...;) och rummen ska ligga bredvid varandra (display: flex;).
JavaScript: Detta är husets elektricitet, VVS och funktion. JavaScript gör huset levande och interaktivt. När du trycker på en knapp (<button>) tänds en lampa (en animation startar), eller när du öppnar dörren spelas en melodi (data hämtas från en annan plats).

Praktiska exempel: Bygg din första webbsida

Nu bygger vi ett minimalt "hus".

1. Förbered projektet Skapa en ny mapp för projektet och öppna den i VS Code.

mkdir min-webbsida
cd min-webbsida
code .

2. Skapa filerna I VS Codes filutforskare (vyn längst till vänster), skapa tre nya filer:

index.html
style.css
script.js

3. Skapa HTML-skelettet (index.html) Skriv ett utropstecken ! i den tomma index.html-filen och tryck sedan på Tab. VS Code kommer automatiskt att generera en HTML5-grundstruktur åt dig!

Gör sedan två ändringar: länka till dina CSS- och JS-filer och lägg till lite innehåll i <body>. Din fil ska se ut så här:

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min Första Webbsida</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hej Världen!</h1>
  <p>Detta är min allra första webbsida, skapad i Ubuntu.</p>

  <script src="script.js"></script>
</body>
</html>

4. Stilsätt med CSS (style.css) Lägg till lite enkel CSS för att ge sidan lite färg och form.

body {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-family: sans-serif;
  text-align: center;
  padding-top: 50px;
}

h1 {
  color: #3498db;
}

5. Lägg till interaktivitet med JavaScript (script.js) Vi lägger till en enkel funktion som visar ett meddelande när man klickar på rubriken.

const rubrik = document.querySelector('h1');

rubrik.addEventListener('click', function() {
  alert('Du klickade på rubriken!');
});

Se magin hända: Live Server i VS Code

Att ständigt spara och manuellt uppdatera webbläsaren är ineffektivt. Vi använder ett tillägg för att lösa detta.

Installera: Gå till Tilläggs-vyn i VS Code och sök efter Live Server. Installera det.
Kör: När det är installerat, högerklicka på din index.html-fil i filutforskaren och välj Open with Live Server.
Ett nytt webbläsarfönster öppnas med din sida.
Testa: Gå tillbaka till VS Code. Ändra texten i din <h1>-tagg och spara filen (Ctrl + S). Växla till webbläsaren - den har uppdaterats automatiskt! Detta fungerar för alla tre filerna.

Övning: Gör sidan till din egen

Nu är det din tur att experimentera.

Ändra texten i index.html så att den handlar om dig.
Lägg till en knapp (<button id="min-knapp">Klicka här</button>) under paragrafen i index.html.
I style.css, lägg till stilregler för din knapp. Ge den t.ex. en bakgrundsfärg, vit text och lite padding.
I script.js, lägg till kod som lyssnar efter klick på din nya knapp och ändrar texten i paragrafen <p>.
Använd Live Server för att se alla dina ändringar direkt.

Nästa steg

Grymt jobbat! Du har byggt din första interaktiva webbsida från grunden. Du har nu sett hur man sätter upp miljöer för både Python och webbutveckling. Men hur ser man till att en applikation fungerar likadant på din dator som på din elevs, eller på en server i molnet?

I det avslutande momentet, Isolerade miljöer med Docker, introducerar vi "containrar" - ett revolutionerande sätt att paketera och köra applikationer.

Sätt upp din utvecklingsmiljö i Ubuntu