Programmering nivå 2 med HTML, CSS och JavaScript

Kapitel 1: Repetition av HTML, CSS och webbarbetsflöde

Det här kapitlet repeterar grunderna i HTML och CSS, kopplar ihop dem med JavaScript och visar hur ett enkelt webprojekt publiceras via GitHub.

Innehåll

Hoppa direkt till det avsnitt som ska tränas.

Kapitelöversikt

I det här kapitlet repeteras HTML och CSS som grund för webbutveckling. Därefter kopplas en JavaScript-fil till sidan, och arbetsflödet avslutas med att projektet läggs upp på GitHub. Kapitlet ska ge en tydlig start för resten av kursen och förbereda för senare kapitel om analys, objektorientering och API-anrop.

HTML CSS JavaScript GitHub webbprojekt arbetsflöde

Kap 1.1 Repetera HTML

HTML används för att skapa struktur och innehåll på en webbsida. När grunderna redan är kända handlar repetitionen om att se hur sidan byggs upp på ett tydligt och semantiskt sätt.

Mål

  • förstå hur en webbsida delas upp i tydliga delar
  • använda rubriker, paragrafer, listor och knappar på rätt sätt
  • känna igen enkel, semantisk struktur

Övning

Skapa en ny mapp på din dator, öppna mappen i Visual Studio Code och skapa en fil index.html med följande kod: 

<!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>
    <main>
        <h1>Hej webben</h1>
        <p>Det här är en enkel webbsida.</p>
        <button id="minKnapp">Klicka här</button>
        <p id="output"></p>
    </main>
    <script src="main.js" defer></script>
</body>
</html>

Öppna mappen i Visual Studio Code och starta Live Server (högerklicka på index.html och välj Open with Live Server).

Kap 1.2 Repetera CSS

CSS används för utseende, layout och läsbarhet. Repetition här handlar om att göra sidan tydlig och konsekvent, inte bara snygg.

Mål

  • förstå hur färg, typografi och spacing påverkar läsbarheten
  • använda klassnamn för att styra utseendet
  • kunna göra en enkel responsiv layout

Övning

Skapa en CSS-fil som heter style.css i samma mapp som din index.html och använd följande kod:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f7f7fb;
    color: #1f2937;
}

main {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem;
}

button {
    border: 0;
    border-radius: 999px;
    padding: 0.9rem 1.2rem;
    background: #14532d;
    color: white;
    font-weight: 700;
}

Kap 1.3 Koppla JavaScript till webbsidan

Här visar vi enkelt hur du kommer igång med ren JavaScript i din webbsida — steg för steg, utan krångel.

Vad du behöver

  • En HTML-fil (sidan)
  • En JavaScript-fil (main.js)
  • En enkel lokal server för att testa sidan (valfritt)

Övning

Spara index.html och main.js i projektmappen och inkludera skriptet i HTML.

Filsstruktur (exempel):

/projekt
    index.html
    style.css
    main.js

main.js (enkelt exempel)

const button = document.getElementById('minKnapp');
let output = document.getElementById('output');

if (!output && button) {
    output = document.createElement('p');
    output.id = 'output';
    button.insertAdjacentElement('afterend', output);
}

if (button) {
    button.addEventListener('click', () => {
        if (output) output.textContent = 'Knappen har klickats.';
    });
}

Så kör du

  1. Spara main.js och index.html i projektroten.
  2. Öppna mappen i Visual Studio Code och starta Live Server (högerklicka på index.html och välj Open with Live Server).

Kap 1.4 Lägg upp projektet på GitHub

Ett snabbt sätt att publicera ditt projekt är att använda GitHub:s webbgränssnitt och dra in filerna i ett nytt repository.

Mål

  • förstå hur du snabbt laddar upp en statisk webbplats till GitHub
  • lägga upp HTML, CSS och JavaScript via webbläsaren

Steg (drag & drop)

  1. Gå till github.com och logga in.
  2. Klicka på New repository, ge det ett namn och skapa repot (välj Public eller Private som du önskar).
  3. I det nya repot, klicka på Add file → Upload files.
  4. Dra dina projektfiler (t.ex. index.html, style.css, main.js och eventuella mappar) från din dator till uppladdningsytan.
  5. När uppladdningen är klar, skriv en commit-meddelande och klicka Commit changes.

Publicera (valfritt)

Om du vill publicera sidan som en statisk site med GitHub Pages: gå till Settings → Pages, välj huvudgrenen (main) och rotmappen (/ (root)), spara inställningen och öppna den angivna webbadressen.

Övning

Skapa ett nytt repository på GitHub och använd drag & drop för att ladda upp projektfilerna, precis som i webbutvecklingskursen. Bekräfta att sidan öppnas via GitHub Pages om du valde att publicera den.

Kap 1.5 Sammanfattning

Efter kapitlet ska det vara tydligt hur HTML skapar struktur, hur CSS styr utseendet, hur JavaScript kopplas in för interaktivitet och hur projektet läggs upp på GitHub.

  • HTML är sidan som innehåll och struktur.
  • CSS är sidan som utseende och layout.
  • JavaScript gör sidan interaktiv.
  • GitHub används för versionshantering och delning.

Quiz

Välj ett svar per fråga. När alla frågor är besvarade kan du rätta quizet och se både resultat och förklaringar.

1. Vilken del av webbsidan ansvarar främst för struktur och innehåll?

2. Vilken rad kopplar normalt in ett skript på en webbsida?

3. Vad är ett rimligt skäl att använda GitHub i ett webprojekt?

4. Vad gör CSS främst?