Webbutveckling

HTML & CSS

Strukturera och styla webbsidor: HTML5-element, CSS-layout med Flexbox och Grid, och responsiv design.

01 · Mönster

Kodexempel

Semantisk HTML5-struktur

Semantiska element ger tydligare struktur och bättre SEO.

HTML

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Webbsida</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Hem</a></li>
                <li><a href="#about">Om oss</a></li>
                <li><a href="#contact">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h1>Välkommen</h1>
            <section>
                <h2>Om oss</h2>
                <p>Vi är ett företag som...</p>
            </section>
        </article>
        
        <aside>
            <h3>Relaterat innehåll</h3>
            <ul>
                <li>Länk 1</li>
                <li>Länk 2</li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 Mitt Företag</p>
    </footer>
</body>
</html>

Element som header, nav, main, article, section, aside och footer beskriver innehållets roll i stället för att bara gruppera det.

CSS Grid-layout

Responsiva layouter för mer komplexa sidstrukturer.

CSS

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.header {
    grid-column: 1 / -1;
    background: #333;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-row: span 2;
}

.main-content {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
    
    .sidebar,
    .main-content {
        grid-column: auto;
    }
}

auto-fit och minmax gör att kolumnerna anpassar sig efter skärmstorleken utan fasta brytpunkter.

Flexbox-navigation

Navigeringsmeny som kollapsar till en hamburgarmeny på mobil.

CSS

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #2c3e50;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #3498db;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: #2c3e50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .nav-links.active {
        transform: translateX(0);
    }
    
    .hamburger {
        display: flex;
    }
}

Länkarna ligger på rad i desktop och fälls ut vertikalt när .active sätts på mobil.

CSS Custom Properties

Variabler för theming och enklare underhåll.

CSS

:root {
    /* Färger */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --bg-color: #f4f4f4;
    
    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    
    /* Typography */
    --font-primary: 'Arial', sans-serif;
    --font-size-base: 16px;
    --line-height: 1.6;
}

/* Dark theme */
[data-theme="dark"] {
    --text-color: #f4f4f4;
    --bg-color: #333;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--text-color);
    background-color: var(--bg-color);
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-medium) var(--spacing-large);
    border-radius: 5px;
    color: white;
    transition: opacity 0.3s ease;
}

.button:hover {
    opacity: 0.8;
}

Definiera värden en gång i :root och byt tema genom att skriva över variablerna, t.ex. via [data-theme="dark"].

02 · Kvalitet

Best practices

Tillgänglighet

Använd semantisk HTML för bättre skärmläsarstöd
Inkludera alt-text för alla bilder
Säkerställ tillräcklig färgkontrast (WCAG 2.1)
Gör sidan navigerbar med tangentbord

Prestanda

Minimera CSS och ta bort oanvänd kod
Använd lazy loading för bilder
Optimera bilder för webben (WebP, avif)
Använd CSS containment för bättre rendering

Responsiv design

Mobile-first approach
Använd relativa enheter (rem, em, %)
Testa på verkliga enheter
Använd CSS Grid och Flexbox för layouts

SEO-optimering

Använd beskrivande meta-taggar
Strukturera innehåll med heading-hierarki
Optimera sidans laddningstid
Implementera structured data

03 · Nyheter

Moderna CSS-funktioner

Container Queries

Anpassa element efter containerns bredd i stället för viewportens.

CSS Cascade Layers

Styr specificiteten med @layer.

CSS Logical Properties

Skrivriktningsoberoende properties för internationalisering.

04 · Resurser

Verktyg & ramverk

Verktyg

CSS ValidatorValidera din CSS-kod
Can I UseKontrollera browser-stöd
PostCSSTransformera CSS med JavaScript
PurgeCSSTa bort oanvänd CSS

Ramverk

Tailwind CSSUtility-first CSS
BootstrapKomponentbibliotek
BulmaModernt CSS-ramverk
Sass/SCSSCSS-preprocessor