-
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)
- Graceful degradation, progressive enhancement
- Normalisering / reset av CSS
-
Oppgave:
- Intro til oppgavesett, nedlasting av filer, forklaring av struktur
- Style utlevert HTML, tilpasset desktop
- 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.
- Presentasjon:
- Web fonts, icon fonts
- CSS transitions, transform
- CSS transforms
- Eksempler på hva man kan få til med CSS
- Semantisk markup
- Oppgave:
- Legge til webfonts på siden
- Bruke en icon-font på siden
- Bruke transitions/transforms på siden
- 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
- 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
-
Presentasjon:
-
jquery element triks
- Attributes
- attr
- val
- prop
- data
- element bubling (on - off)
- event objekt
- Attributes
-
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
* God struktur for metoder og eller view
* Vise at det finnes noe som heter Backbone, Require
* undescore.js