Grundläggande termer inom webbdesign – vad du bör känna till

Vibe-coding förändrar spelet – men grunderna är fortfarande guld

Med AI-verktyg som Lovable, Cursor och GitHub Copilot kan vem som helst bygga avancerade webbplatser utan att skriva en enda rad kod manuellt. Det är fantastiskt. Men det finns ett problem: om du inte förstår vad som byggs kan du inte felsöka, optimera eller kommunicera dina idéer effektivt.

Den här artikeln ger dig en snabb genomgång av de viktigaste termerna inom modern webbdesign – så att du förstår vad som händer under huven, oavsett om du vibe-codar eller skriver allt från scratch.

HTML – skelettet

HTML (HyperText Markup Language) är det språk som definierar strukturen på en webbsida. Tänk på det som byggets stomme – väggar, tak, dörrar. Utan HTML finns det ingenting att visa.

Viktiga begrepp:

• Element – en byggsten, t.ex. <h1>, <p>, <img>

• Attribut – extra information på ett element, t.ex. href på en länk

• Semantisk HTML – att använda rätt element för rätt syfte, t.ex. <article> istället för <div>. Viktigt för SEO och tillgänglighet.

CSS – utseendet

CSS (Cascading Style Sheets) styr hur HTML ser ut – färger, typsnitt, layout och animationer. Om HTML är stommen är CSS fasaden och inredningen.

Viktiga begrepp:

• Selektor – pekar ut vilket element som ska styas, t.ex. h1 eller .card

• Flexbox & Grid – moderna layoutsystem som gör det enkelt att placera element

• Responsiv design – att webbplatsen anpassar sig efter skärmstorlek via media queries

• CSS-variabler – återanvändbara värden som --primary-color för ett konsekvent designsystem

JavaScript – beteendet

JavaScript (JS) ger webbsidan liv. Det är programmeringsspråket som körs i webbläsaren och gör saker interaktiva – menyer som öppnas, formulär som valideras, data som laddas utan att sidan laddas om.

Viktiga begrepp:

• DOM (Document Object Model) – JS representation av HTML som kan manipuleras i realtid

• Event listeners – kod som körs när något händer, t.ex. ett klick

• Fetch / API-anrop – att hämta data från en server utan sidoladding

• Async/await – hur JS hanterar operationer som tar tid, som att hämta data

Ramverk och bibliotek

Istället för att skriva ren JavaScript bygger de flesta idag med ramverk. De löser repetitiva problem och skapar struktur.

• React – det mest populära biblioteket för att bygga UI. Komponenter, props och state är kärnbegrepp.

• Vue / Svelte – alternativ till React med lite andra filosofier

• Next.js – ett React-ramverk med inbyggd routing, SSR och API-routes

• Tailwind CSS – ett utility-first CSS-ramverk där du stylar direkt i HTML-klasser

Backend och databaser

Webbplatser som lagrar data – användare, artiklar, beställningar – behöver en backend. Det är servern som tar emot förfrågningar och pratar med databasen.

• API (Application Programming Interface) – ett gränssnitt som låter frontend och backend prata med varandra, oftast via HTTP och JSON

• REST vs GraphQL – två sätt att designa API:er

• SQL – språket för att fråga relationsdatabaser som PostgreSQL

• Supabase / Firebase – backend-as-a-service-lösningar som snabbar upp utvecklingen enormt

Hosting och deployment

När koden är klar måste den publiceras någonstans.

• Domän – adressen, t.ex. webbdesigna.se

• DNS – systemet som kopplar domänen till rätt server

• CDN (Content Delivery Network) – distribuerar din webbplats globalt för snabbare laddning

• CI/CD – automatiserad pipeline som testar och driftsätter kod vid varje ändring

• Vercel / Netlify / Cloudflare Pages – populära hostingtjänster optimerade för moderna webbramverk

SEO och prestanda

En snygg webbplats som ingen hittar är värdelös. Och en snabb webbplats rankar bättre.

• Meta-taggar – HTML-taggar som talar om för sökmotorer vad sidan handlar om

• Core Web Vitals – Googles prestandamått: LCP, FID, CLS

• Lazy loading – att ladda bilder och komponenter först när de syns på skärmen

• Schema.org / JSON-LD – strukturerad data som hjälper sökmotorer förstå innehållet

Versionskontroll

Git är det verktyg alla webbutvecklare använder för att spåra ändringar i kod. GitHub är plattformen där koden lagras och samarbete sker.

• Commit – en sparad ändring

• Branch – en parallell version av koden för ny feature

• Pull request – en förfrågan att slå ihop en branch med huvudkoden