Distansakademin

Övningar

Här är en lista med 30 utmaningar och övningar som du kan prova för att fördjupa din förståelse av HTML och praktisera dina färdigheter:

Grundläggande HTML:

1. Skapa en enkel HTML-sida med en rubrik och en paragraf.
2. Infoga ett foto på din webbsida.
3. Skapa en lista med dina favoritböcker eller filmer.
4. Länka en rubrik till en annan webbsida.
5. Skapa en tabell med några personliga mål och deras tidsramar.

Semantisk HTML:

1. Använd semantiska element för att strukturera en bloggpost (rubrik, datum, innehåll).
2. Skapa en navigationsmeny med länkar till olika sidor på din webbplats.
3. Använd <article> och <section> för att organisera innehållet på en låtsassida om nyheter.
4. Bygg ett fotofolio med bildbeskrivningar för tillgänglighet.

Formulär och Interaktivitet:

1. Skapa ett enkelt kontaktformulär med namn, e-post och meddelande.
2. Lägg till rullgardinsmenyer med <select>-element för att välja ditt favoritland.
3. Implementera en kryssruta för prenumeration till nyhetsbrev.
4. Använd radio-knappar för att låta användaren välja sitt favoritdjur.

Multimedia och Inbäddning:

1. Bädda in en YouTube-video på din webbsida.
2. Infoga en ljudfil med en uppspelare och en kontroll för att justera volymen.
3. Skapa en bildgalleri med flera bilder som användaren kan bläddra igenom.
4. Använd Google Maps för att bädda in en interaktiv karta på din webbsida.

Struktur och Layout:

1. Skapa en enkel header med logotyp och navigationslänkar.
2. Bygg en sida med en kolumn för innehåll och en sidopanel för information.
3. Använd CSS för att centrera innehållet på sidan både horisontellt och vertikalt.
4. Skapa en footer som alltid är fastnålad längst ner på sidan.

Avancerad HTML:

1. Bygg en FAQ-sida med frågor och svar i en ordnad lista.
2. Skapa en sida med en tabell som visar försäljningsdata för olika produkter.
3. Använd <details> och <summary> för att skapa interaktiva avsnitt med fallande information.
4. Bygg ett webbformulär för att registrera deltagare till en workshop med olika sessioner.

Responsiv Design:

1. Skapa en responsiv webbsida som ändrar layout baserat på skärmstorlek.
2. Anpassa bilder så att de ändrar storlek och proportioner på mindre skärmar.
3. Göm vissa element på mindre skärmar och visa dem på större.

Avancerad Semantik:

1. Skapa en webbsida som använder <nav>, <main>, <article>, <aside> och <footer> för att strukturera innehållet.
2. Bygg en struktur för en onlinebutik med produkter, kategorier och produktinformation.

Dessa utmaningar och övningar kommer att ge dig en praktisk erfarenhet av att arbeta med olika aspekter av HTML. Du kan modifiera och anpassa varje uppgift för att matcha din egen kreativitet och lärande. Lycka till!