Dag 1

Del 1: [Lars] Intro

• Presentasjon:

  • HTML-intro (DOM, tags, classes, IDs, structure, doctype)
  • CSS-intro (selectors, propreties, values, sizes, colors box-model, positioning, floats)
  • Developer tools intro (element selector, HTML editing, CSS editing, console)
  • Dropper: Graceful degradation, progressive enhancement
  • Dropper: Normalisering / reset av CSS

• Oppgave:

  • Intro til oppgavesett, nedlasting av filer, forklaring av struktur
  • Style utlevert HTML, tilpasset desktop

Del 2: [Sebastian] Responsive

• Presentasjon:
  • Responsive design (mobile first, practices)
  • Responsive CSS (media queries, break points)
  • Responsive menyer, tabeller, etc.
• Oppgave:
  • Responsive tilpassing av siden for desktop + tablets + mobile.

Del 3: [Mads] Detaljer

• Presentasjon:
  • Web fonts, icon fonts
  • CSS transitions, transform, animations
  • Eksempler på hva man kan få til med CSS
• Oppgave:
  • Legge til webfonts på siden
  • Bruke en icon-font på siden
  • Bruke transitions/transforms på siden

Dag 2

Del 1: [Erik] Enkel Introduksjon

• Presentasjon:
  • Intro jQuery
  • Enkel DOM
• Oppgave:
  • Vise MENY ved breakpoint, sette høyde på meny-wrapper
  • Sette click-event på meny-element som setter større høyde på wrapper
  • Sette CSS-transition på høyden
  • Sette ”open”-klasse på ikon for å rotere pil
  • Sette absolutt posisjonering på menyknappen

Del 2: [Helge] Api

• Presentasjon:
  • jquery ajax
  • Same origin policy
  • Array
  • Callbacks
  • JSON
  • JS-syntak
  • Objektera
  • Funksjon
  • Ajax
  • Json-callback
• Oppgave:
  • Hente fra Flickr, logge respons
  • Bygge ut success-callbacket med:
    • Array
    • Objekter
    • Legge det i DOM

Del 3: [Kent] Bygge videre på bildegalleriet

• Presentasjon:

  • jquery element triks

    • Attributes
      • attr
      • val
      • prop
      • data
    • element bubling (on - off)
      • event objekt

  • setTimeout

  • setInterval

• Oppgave:

  • Vise stort bilde ved klikk
  • Forhåndslasting
  • Søkefelt. Søk ved submit-event
  • Søke ved keyup-event
  • Hente ut title-attributt og vise det som label

Del 4:

* God struktur for metoder og eller view
* Vise at det finnes noe som heter Backbone, Require
* undescore.js