Bygg responsiva webbplatser med HTML5 och CSS3 - eLearning

4.950,00 SEK

  • 20 hours
eLearning
Nästa omgång:May 11, 2026
+ 7 dagar kvar

Bygg en stark grund i modern webbutveckling med HTML5 och CSS3 – kärnteknikerna bakom varje webbplats på internet. Den här kursen är utformad för att hjälpa dig skapa visuellt tilltalande, responsiva och användarvänliga webbsidor från grunden. Du börjar med grunderna i HTML-struktur och går stegvis vidare till avancerade stilmöjligheter med CSS3, inklusive Flexbox, Grid, animationer och principer för responsiv design. Genom praktiska övningar och verkliga projekt lär du dig att designa och bygga professionella webbplatser som fungerar sömlöst på alla enheter.

Viktiga funktioner

Språk

Kurs och material på engelska

Nivå

Nybörjar- till mellannivå

Åtkomst

1 års tillgång till utbildningsplattformen

Över 7 timmars videokurser på begäran

med 20+ timmars rekommenderad studietid

34 guidade praktiska övningar

8 automatiskt rättade prov

3 uppgifter

med 60 repetitionsquiz

Certifiering

Intyg om genomförd utbildning ingår

Lärandemål

I slutet av den här kursen kommer du att kunna:

Typer

Förstå olika typer av HTML-inmatningselement och hur du använder dem för att bygga interaktiva webbformulär

Validera

Lär dig hur du validerar formulärfält med HTML för att förbättra datakvalitet och användarupplevelse

Taggar

Strukturera webbinnehåll effektivt med semantiska HTML-taggar för bättre läsbarhet och tillgänglighet

CSS

Tillämpa CSS-stilar på ett kaskaderande sätt för att styra hur regler prioriteras och visas på en webbsida

Pseudo

Använd CSS-pseudo-element för att förbättra designen och lägga till stileffekter utan extra HTML-markup

Flexbox

Arbeta med Flexbox för att skapa flexibla, responsiva layouter och effektivt hantera justering och avstånd mellan element

Hero

Kursöversikt

  1. Introduktion till webbutveckling

    Lektion 01

    • Vad är HTML
    • Vad är CSS
    • Konfigurera miljön
    • Hej världen!
    • Använda VS Code med Live Reload
    • Använda Emmet och onlinetjänster
    • Använda Chrome Developer Tools
  2. Introduktion till HTML

    Lektion 02

    • HTML-element och taggar
    • Enkla och parade taggar
    • Strukturen för en HTML-sida
    • Rubrik- och stycketaggar
    • Attribut i HTML
    • Bilder
    • Länkar – interna och externa
    • Listor
    • Tabeller
    • Attributet style
    • Färger i HTML
    • Semantiska HTML5-taggar
    • HTML5-ljud- och videotaggar
    • Grundläggande HTML-taggar och attribut
    • Bildtagg och attribut
    • Länkar – interna och externa
    • Listor – numrerade och punktlistor
    • Tabeller i HTML
    • Attributet style
    • Färger i HTML
    • Semantiska HTML5-element
    • HTML-ljud- och videoelement
  3. Formulär och inmatningar

    Lektion 03

    • Form-taggen
    • Använda label-taggen
    • HTML input-tagg
    • Select och TextArea
    • Knappar
    • Datalista
    • Skapa ett kontaktformulär
    • Enkelt formulärelement
    • Etiketter och inmatningar
    • Grundläggande HTML-taggar och attribut
    • Val och alternativ
    • E-post-, lösenordsfält och knappar
    • Datalistor i HTML
  4. Introduktion till CSS

    Lektion 04

    • Använda style-taggen
    • Målinriktning mot HTML-element
    • Målinriktning av nästlade HTML-element
    • Använda externa stilmallar
    • Åsidosätta CSS-stilar
    • Vanliga CSS-egenskaper
    • CSS-enheter
    • CSS-boxmodellen
    • Fler CSS-egenskaper
    • CSS-pseudoklasser
    • Använda stilelementet
    • Målinriktning av HTML-element i CSS
    • Målinriktning av nästlade HTML-element
    • Använda externa stilmallar
    • Formatering med externa stilmallar
  5. Avancerad CSS

    Lektion 05

    • CSS-positionering – statisk, relativ och absolut
    • CSS-positionering – fixed och sticky
    • CSS-pseudo-elementen ::before och ::after
    • CSS-variabler
    • Anpassade typsnitt i CSS
    • Importera externa stilmallar
  6. Övergångar och animationer

    Lektion 06

    • Vad är CSS-övergångar
    • Grundläggande övergångar och CSS-egenskaper
    • CSS-animationer och egenskaper
    • Definiera keyframes
  7. Responsiv webbdesign

    Lektion 07

    • Media Queries
    • Vad är CSS Flexbox
    • Skapa rader och kolumner
    • Fler flexbox-egenskaper
    • Vad är CSS Grid Layout
    • Rader och kolumner i rutnät
    • Allokera celler
    • Rutnätsmallområden
    • Bygga ett responsivt bildgalleri
    • Media Queries
    • CSS Flexbox-egenskaper
    • Avancerade Flexbox-egenskaper
    • CSS Grid
    • CSS Grid-egenskaper
    • Rutnätsområden i CSS Grid
Webbplatser med HTML5 och CSS3

Vem bör anmäla sig till det här programmet?

Förutsättningar

Ingen tidigare programmeringsvana krävs. Intresse för webbdesign och webbutveckling behövs.

Blivande webbutvecklare

Nybörjare inom front-end-utveckling

UI/UX-designers som vill koda sina designer

Alla som är intresserade av att bygga webbplatser från grunden

Starta kursen nu

Uttalanden

Licensiering och ackreditering

Denna kurs erbjuds i enlighet med Partnerprogramavtalet och uppfyller kraven i licensavtalet

Likabehandlingspolicy

Kandidater uppmuntras att kontakta AVC för vägledning och stöd under hela processen för att ordna anpassningar.


Vanliga frågor

Contact background

Behöver du företagslösningar eller LMS-integration?

Hittade du inte kursen eller programmet som skulle passa för ditt företag? Behöver du LMS-integration? Skriv till oss! Vi löser det!