Overblik over grundlæggende webudvikling

Info om site

Dette micro site er oprettet af Michell Cronberg for at understøtte kurset Overblik over grundlæggende webudvikling. Her vil du kunne finde henvisninger til materiale der benyttes på kurset, en liste over ressourcer samt diverse informationer. Sitet vil holdes kørende i mindst en måned efter sidste kursusdag.

Sitet kan ses på https://mcronberg.github.io/hkweb2017/ og source koden kan findes på GitHub på https://github.com/mcronberg/hkweb2017.

Kalender

5. september: Grundlæggende web

Nyheder

04-09 Site er nu live
Site er oprettet
14-09 HTTP
Gennemgået HTTP - prøv evt.:
  • Hente Fiddler (se links) eller brug F12-tool i Chrome/Firefox
  • Gå på http://fdemo2.cronberg.dk og prøv at hente de forskellige sider i det første afsnit (den første simple side, siden med billede, css og javascript, siden der poster data til severen, samt siden der opretter/sletter cookies).
  • Find request/response i Fiddler (højre side under Inspectors (vælg Raw-visning)
19-09 HTML
Gennemgået HTML - prøv evt.:
  • Installér node.js (se links)
  • Hent (evt) VS Code (se links)
  • Hent dette site som en zip på https://github.com/mcronberg/hkweb2017 ved at klikke på den grønne knap.
  • Pak filer ud til en mappe
  • Start en kommandoprompt i mappen (cmd på Windows)
  • Skriv "npm install" for at installere node pakker (web server mv)
  • Start web server ved at skrive "npm start". Prøv at rette i index.html eller side1.html - browser(e) skulle gerne opdateres
  • Prøv minificering ved at skrive "npm run mini" og se i index.min.html
  • Næste gang prøve ved at skabe et "mini build script" som kopierer alt til en /dist mappe mv
28-09 CSS
Gennemgået CSS - prøv evt.:
  • Installér node.js (se links)
  • Hent (evt) VS Code (se links)
  • Hent dette site som en zip på https://github.com/mcronberg/hkweb2017 ved at klikke på den grønne knap.
  • Pak filer ud til en mappe
  • Start en kommandoprompt i mappen (cmd på Windows)
  • Skriv "npm install" for at installere node pakker (web server mv)
  • Start web server ved at skrive "npm start".
  • Gå til http://localhost:3000/side2.html og prøv at rette i den css vi arbejdede på (/style/side2a.css og side2.css)
  • Prøv fra kommandopromt at skrive npm run minicss (eksempel på minificering)
  • Prøv fra kommandopromt at skrive npm run scss (eksempel på konvertering af scss til css)
09-10 JavaScript
Gennemgået JavaScript - prøv evt
  • Leg med side3.html og side3.js
  • installer TypeScript (npm install -g typescript)
  • Transpiler test.ts til test.js (kommandoprompt tsc test.ts)

Slides og andet materiale

Hvis du vil vide mere...

Weaving the web - bog af Tim Berners-Lee om historien bag www
HTML and CSS: Design and Build Websites - god bog af Jon Duckett om HTML og CSS
Pluralsight kursus - HTML Fundamentals
Pluralsight kursus - CSS 3 From Scratch
JavaScript and JQuery: Interactive Front-End Web Development af Jon Duckett.

Om instruktøren

Michell Cronberg er en erfaren instruktør, der har leveret kurser til SAMDATA\HK, Teknologisk Institut og Microsoft Danmark. Han underviser inden for forskellige former for webudvikling, og underviser blandt andet i HTML, CSS, JavaScript (herunder forskellige JavaScript-biblioteker og frameworks) samt forskellige ASP.NET-kurser. Han er desuden forfatter til flere udgivelser om programmering, herunder ASP.NET - og en kendt foredragsholder om forskellige former for .NET udvikling. Endeligt arbejder han løbende som IT-konsulent og programmør.

Han kan kontaktes på michell@cronberg.dk eller 40103242. Læs eventuelt mere på http://om.cronberg.dk eller på LinkedIn.