Kmom01: Kom igång med HTML, CSS och JavaScript

Vi börjar med att bygga en enkel webbplats med grunderna i HTML, CSS och JavaScript. Vi skapar en god struktur och uppdelning av filer och kataloger som förbereder oss för större projekt. Vi lär oss grundeläggande begrepp som används när man bygger en webbplats.

Vi tar hjälp av validatorer för att kontrollera att vi skriver koden på ett korrekt sätt.

Samtidigt som vi bygger webbplatsen bekantar vi oss med en resurser som är bra för att lära sig mer om de tekniker vi använder.

Läs & Studera

Här kan du på egen hand studera och förbereda dig inför övningar och uppgifter.

Föreläsning

Titta på följande inspelade föreläsningar. Föreläsningarna kan innehålla tips om läsanvisningar.

Litteratur

Studera litteratur och resurser enligt följande.

Kika snabbt igenom de resurser som finns om HTML HyperText Markup Language på webbplatsen MDN.
Kika snabbt igenom de resurser som finns om CSS Cascading Style Sheets på webbplatsen MDN.
Kika snabbt igenom de resurser som finns om JavaScript på webbplatsen MDN.

Ovan webbsidor är vår referensmanual när det gäller dessa tekniker. Försök gärna landa på någon av dessa webbplatser när du googlar efter information. Börja din googling med “mdn” eller inkludera tekniken “mdn html” och därefter lägger du til det du söker på.

Vill du ha enklare material att komma igång med så finns det tutorials på W3Schools.

Video för orientering

Titta på följande videor/filmer. Filmerna är tänkta att ge dig en allmän orientering i det område som behandlas i kursmomentet.

Vad är webben (14 min)
A brief history of the World Wide Web (3 min)

Videorna ovan finner du även i spellistan “Om webbteknologier (HTML, CSS, JavaScript)”.

Ai som lärare (instuderingsfrågor)

Här finns ett antal instuderingsfrågor som hjälper dig att finna information på egen hand via din Ai-kompis, för att på egen hand träna på de koncept som är relevanta för detta kmom.

Instuderingsfrågor om HTML

Vad står HTML för?
Ge mig en kort historik över hur HTML har vuxit fram.
Vilken är ställningen och status för HTML idag?
Var är den eller de viktiga källorna för referensinformation om HTML?
Vilka är de allra vanligaste HTML elementen som man bör lära sig?
Kan du visa grundstrukturen för en HTML-sida?

Här är en summering av hur en sådan dialog kan se ut, sen är det bara att fylla på med egna funderingar.

Instuderingsfrågor om CSS

Vad står CSS för?
Ge mig en kort historik över hur CSS har vuxit fram.
Vilken är ställningen och status för CSS idag?
Var är den eller de viktiga källorna för referensinformation om CSS?
Vilka är de allra vanligaste CSS-konstruktioner som man bör lära sig?
Vill du göra en kommenterad enkel stylesheet för att visa hur det kan se ut?

Här är en summering av hur en sådan dialog kan se ut, glöm inte att fylla på med egna följdfrågor.

Instuderingsfrågor om JavaScript

Ge en kort historik över programmeringsspråket JavaScript.
Vilken är ställningen och status för JavaScript idag?
Var är den eller de viktiga källorna för referensinformation om JavaScript?
Vilka är de grundläggande konstruktionerna man behöver lära sig om man vill bli duktig på javascript?
Vill du visa ett enkelt programexempel i javascript, på säg 20 rader?

Här är en summering av hur en sådan dialog kan se ut.

Skapa en ny session med din Ai-lärare för varje teknik och fyll sedan på med egna frågor för en fortsatt dialog.

Glöm inte att vara kritisk till informationen du får, precis som man vanligen är mot alla olika källor av information. Svaren kan skifta beroende av vilken Ai-kompis du väljer.

Övningar & Uppgifter

Övningar är träning inför uppgifterna, det är ofta klokt att jobba igenom övningarna då de förbereder dig inför uppgifterna. Uppgifter skall utföras och redovisas.

Övningar

Jobba igenom övningarna, de förbereder dig inför uppgifterna.

Jobba igenom övningen “Skapa en webbsida med HTML, CSS och JavaScript” som hjälper dig att komma igång och stegvis bygga en webbplats med HTML, CSS och JavaScript.
Gå igenom artikeln om inbyggda typer i JavaScript.

Uppgifter

Följande uppgifter skall utföras och resultatet skall redovisas.

Utför laborationen “Lab 1: Grunderna i JavaScript”.
Gör uppgiften “Bygg webbsidor med HTML, CSS och JavaScript”.

Resultat & Redovisning

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i din redovisningstext i din rapportsida.

Berätta hur din utvecklingsmiljö ser ut (när du jobbar med kursen) och om du anpassat den på något särskilt sätt?
Gick det bra att installera kursens utvecklingsmiljö eller var det något som krånglade?
Är du bekant med terminalen och Unix-kommandon sedan tidigare?
Är du bekant med HTML, CSS och JavaScript sedan tidigare eller har du jobbat med liknande tekniker?
Gick det bra att komma i gång med kursmomentet rent allmänt eller var det något som var lurigt, svårt eller utmanande?
Vilken är din TIL för detta kmom?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.