Gå till innehållet

1.4 Övning & självstudier – din första riktiga hemsida

Illustration: profil/hemsida om dig själv

Nu är det dags att sätta ihop det du gjort i 1.1, 1.2 och 1.3 till en enkel men personlig hemsida.

Du väljer själv fokus:

  • om dig själv (personlig presentation / CV-light)
  • om en förening (t.ex. Friskvårdsklubben, Bottennappet i Väst eller annan förening)
  • om en hobby (t.ex. musik, spel, natur, träning)

Målet är att du efter Paket 1 har:

  • en sida du vågar visa upp
  • en GitHub Pages-adress du kan fortsätta bygga vidare på
  • grundläggande vana att:
  • öppna, ändra och spara filer
  • se resultatet på webben

Grundstruktur – förslag

Din sida behöver inte vara avancerad, men försök få med:

  1. En toppsektion med titel
  2. <h1> med namn på dig/föreningen/hobbyn

  3. kort text som förklarar vad sidan handlar om

  4. Minst två sektioner till

  5. t.ex. “Om mig/oss”, “Aktiviteter”, “Kontakt”, “Mina projekt”

  6. En meny överst

  7. med länkar (anchor-länkar) till de olika sektionerna

  8. Minst en länk utåt

  9. t.ex. till en annan webbplats, sociala medier eller resurser

  10. Lite egen stil

  11. ändrad bakgrundsfärg eller textfärg
  12. valt typsnitt (font-family)

  13. ev. centrerad rubrik eller annan enkel layout

  14. Minst en liten interaktiv detalj (om du orkar)

  15. t.ex. en knapp som visar/döljer extra info
  16. eller en “Till toppen”-knapp

Förslag på arbetssteg

  1. Skissa på innehållet
  2. Vad ska stå i huvudrubriken?
  3. Vilka 2–3 sektioner vill du ha? (skriv korta rubriker)

  4. Vilken grundfärg/stil vill du ha? (ljus/mörk, färgaccent osv.)

  5. Bygg upp HTML-strukturen

  6. Lägg in <h1> och sektioner med <h2>

  7. Fyll på med <p>, listor och länkar

  8. Lägg på CSS

  9. börja i body { ... } för helsidan
  10. ändra bakgrund, textfärg, typsnitt

  11. fixa rubrik(er) så de ser ut som du vill

  12. Lägg till meny och ev. JavaScript

  13. meny med <nav> länkar till id på sektionerna

  14. ev. knapp för “extra info” eller “Till toppen”

  15. Finputs och test

  16. läs igenom texterna – känns de som “du” eller “er förening”?
  17. testa länkar och knappar
  18. kolla sidan i både mobil och dator om möjligt

Vad du kan lämna in / visa upp

Om du vill ha feedback kan du:

  • dela länken till din GitHub Pages-sida i kursens chatt (t.ex. Zulip)
  • kort beskriva:
  • vad du är nöjd med
  • vad du vill förbättra framöver

Kursledaren kan också hjälpa till att: - föreslå små förbättringar - hjälpa till att hitta och rätta enkla fel

Självstudier och vidare steg

Om du vill fortsätta på egen hand efter Paket 1 kan du t.ex.:

  • lägga till fler sidor (t.ex. projekt.html, kontakt.html) och länka mellan dem
  • testa fler HTML-element (bilder, tabeller, formulär)
  • se fler videor om HTML/CSS och prova nya layout-idéer

I senare paket kommer du få:

  • koppla sidorna mer mot JavaScript och API:er
  • bygga mer avancerade appar med t.ex. SvelteKit

Men allt börjar här – med att du har din egen lilla plats på webben.