Webbutveckling

Hur är hemsidor uppbyggda?
Bygg en egen hemsida!
Hur gör jag för att publicera min hemsida?

Skapa din första hemsida

  1. Öppna din editor
  2. Nytt dokument
  3. Skriv hej!
  4. Spara som website.html på skrivbordet
  5. Öppna (dubbelklicka) på website.html som du nu har på skrivbordet
  6. TADA!!! :D

Javascript

** Interaktiva hemsidor ** Med javascript kan du anpassa hemsidan utifrån besökaren och en hel del annat häftigt.

Om du vill att något ska hända på hemsidan när en besökare gör något.. Ex: Bunko.se använder javascript för att se ifall användaren har varit inne på hemsidan tidigare, och om personen har varit där fler än 3 gånger förut, då döljs information som är tänkt att den endast är intressant för nya besökare. Kodkurs.se kommer använda javascript för att låta dig välja ut vilket slags innehåll du vill ska visas på hemsidan. Du kommer kunna ställa in vilket operativsystem du använder, vilken webbläsare du använder och vilken editor du har, vilken nivå du befinner dig på, och vad du vill prioritera att lära dig “just nu”, och sedan anpassar sig innehållet och alla exempel, i den mån det är rimligt, utifrån vad du har valt för inställningar. Med localstorage kan allt detta sparas i din webbläsare, och hemsidan fungerar olika för varje besökare men på samma domän! :) T.ex. kommer hemsidan kunna spara vad du är klar med och vad du har kvar att läsa om för varje avsnitt.. o.s.v.

Såhär gör du för att börja använda javascript. Precis som med CSS så behöver du ropa på filen (.js) för att använda javascript på hemsidan. … …

Ja, du kan använda script-taggen direkt i html-filen, men detta vill vi ju inte uppmuntra nybörjare till! och när du skriver i en .js-fil så anpassar sig ofta ditt textredigeringsprogram utifrån att det är javascriptkod du vill skriva och det är kanon!

För dig som vill utforska javascript så rekommenderar jag eloquent javascript . En fantastisk resurs, också en bra introduktion till programmering generellt. Den är på engelska, men du kommer få vänja dig vid engelska ändå, så varför inte börja redan nu?! :)

Inspektera

Med inspect (visa källkod, view source) kan du kika på hur andra hemsidor är uppbyggda! Såhär gör du för att visa HTML för kodkurs.se… eller pinkprogramming.se o.s.v. :) Beroende på vad du ser.. så är det ofta en hint om hur hemsidan har byggts upp. :)

Annat som är bra och viktigt att tänka på relaterat till webbutveckling:

  • Tillgänglighet (alt taggar, nav o.s.v.)
  • SEO(?) - Några grundläggande saker att tänka på (men egentligen handlar det om att göra sidan tillgänglig och att du faktiskt skapar intressant och relevant innehåll! :))
  • Hur snabbt laddar hemsidan?
  • Vanliga misstag
  • Tips & trick
  • Static site generators ( Jekyll, cloudcannon )
  • Wordpress

Vem ligger bakom denna kurs?

Victoria Wagman som har arbetat som lärare i webbutveckling, och idag arbetar som programmerare hos 46elks.

Detta material byggs upp lite i taget.