lecture-2-dec

MÅNDAG 2 DECEMBER

Intro till variabler, enheter och typografi. Genomgång av Google fonts. Börja med Get Coding, deadline på fredag.

Mål för dagen:

• Förstå vad CSS-variabler är och hur de används.
• Känna till olika CSS-enheter (px, em, rem, %, vh, vw) och när de ska användas.
• (Flyttas till tisdag) Lära sig grunderna i typografi inom webbutveckling.
• (Flyttas till tisdag) Kunna implementera Google Fonts i ett projekt.
• Påbörja "Get Coding"-projektet.

Dagens schema:

• Samling i klassrummet 09:00. Går igenom dagens agenda och mål samt checka in närvaro

• 09:15 – 10:30 – Code Along:

  • CSS-variabler:
  • Introducera konceptet med CSS-variabler (Custom Properties).
  • Förklara syntax och användningsområden.
  • Visa exempel på hur variabler kan effektivisera kodhantering.
  • Resurser: Guide om CSS-variabler:.

10:30 – 10:45 – Paus

• 10:45 – 11:45 – Fortsatt Code Along: CSS-enheter och Whatunit.com

• Presentation:

  • Gå igenom olika enheter i CSS: absoluta (px) och relativa (em, rem, %, vh, vw).
  • Diskutera fördelar och nackdelar med varje enhet.

• Interaktiv genomgång:

  • Använd Whatunit.com för att välja rätt enhet baserat på scenario.

• Videoresurs:

  • Titta på “CSS Units Explained” och diskutera innehållet.
  • Titta på Förklaring och genomgång av Flow chart

• 11:45 – 12:00 – Starta "Get Coding"-projektet

  • Introduktion:
  • Presentera projektet och dess mål.
  • Gå igenom skissen och kravspecifikationer.

LUNCH 12.00 till 13.00.

• 13:00 – 16:00 – Fortsättning med "Get Coding"-projektet

• Projektarbete:

  • Studenterna börjar arbeta individuellt eller i par.
  • Fokus på att tillämpa dagens lärdomar i projektet.

• Lärarstöd:

  • Finns tillgänglig för frågor och vägledning.

• 16:00 – 16:15 – Sammanfattning och Frågestund

  • Diskutera dagens lärdomar.
  • Öppen frågestund för att klargöra eventuella oklarheter.
  • Påminnelse om projektets deadline på fredag.

• 16:15 – 16:30 – Checka ut

  • Avsluta dagen och checka ut närvaro.
  • Ge en kort överblick över morgondagens planering.

• Dagsavslut 17:00

( Detta kommer flyttas till tisdagen den 3 december:

• Typografi och Google Fonts
• Power Point:
  • Grundläggande typografi i webbutveckling (font-family, font-size, font-weight, line-height).
  • Betydelsen av läsbarhet och estetisk design.
• Genomgång av Google Fonts:
  • Hur man hittar och implementerar typsnitt från Google Fonts.
• Videoresurs:
  • Titta på “How to use Google Fonts”.
• Praktisk övning:
  • Implementera ett Google Font i en HTML/CSS-fil. )

Material:

Utvalda för denna dag:

• Kort genomgång och övning om font och animeringar (del 5 - Fonts & Interactions)

Länkar/Läsning

• Whatunit.com
• Förklaring och genomgång av Flow chart
• “CSS Units Explained”

( Detta kommer flyttas till tisdagen den 3 december:

• “How to use Google Fonts” )

• CSS reset

• CSS Reset++

( Detta kommer flyttas till tisdagen den 3 december:

Slides:

• Typografi )

Övningar:

• Code Along och övningar i denna branch

Projektmaterial:

• Get Coding, följ skiss