Welcome

Introduction to the Course

HTML5/CSS3
Semantic tags:
<nav>, <section>, <article>, <footer>

Flexible box model
(-webkit)
More CSS3 Features
Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions

Intro.ppt

Goal for this Course?

Prerequisites survey

Visual Studio Code (VSCode)
Links (VSCode):
Download: https://code.visualstudio.com/
Beginner's Guide: https://channel9.msdn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code

HTML
http://www.w3schools.com/htmL/

CSS(Cascading Style Sheets)
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp

HTML DOM
http://www.w3schools.com/js/js_htmldom.asp

Video:
Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html
http://www.lynda.com/JavaScript-training-tutorials/244-0.html

Lynda.com is also a good site for you to lean more at home (if Web programming has your interest - and of course is has, otherwise you have chosen a wrong elective! ^^)

Note:
If Basic Html and CSS is new for you - take a turn with the exercises at codecademy.

Codecademy:
https://www.codecademy.com/learn/learn-html-css

Alternativ or suplement to Codecademy:
https://www.w3schools.com/

If you allready know some HTML/CSS - look at Lynda.com and find som tutorial that gets your interest.

More Notes:

If JavaScript is new for you, start watching JavaScript Esential Training with Simon Allardice (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Welcome/81266/87513-4.html

If you need a very basic introduction you could also watch: Introducing the JavaScript Language with Joe Chellman (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Introducing-JavaScript-Language/123563-2.html

Later you should watch: JavaScript: Functions with Ray Villalobos (Lynda.com): http://www.lynda.com/JavaScript-tutorials/JavaScript-Functions/148137-2.html

If JS allready is well know for you -watch: Up and Running with ECMAScript 6 with Eve Porcello (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Up-Running-ECMAScript-6/424003-2.html

Examples (Code demonstated in the class):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

HTML5Stuff.zip (HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)

Exercise:
MyFirstMovies - HTML/CSS

Responsive Web Design (RWD)
Ethan Marcotte: A List Apart
In this article, from May 2010, Ethan Marcotte define the term “Responsive Web Design” for the first time – he cited fluid grids, flexible images, and media queries as three “technical ingredients” of RWD.

Kezz Bracey: The State of Responsive Web Design
In this article, from Jan 2015, Kezz Bracey give an up-to-date description of “Responsive Web Design”.

More to read about RWD:
This Is Responsive There you can find responsive design patterns, more responsive resources, and responsive news.

Mediaqueri  There you’ll find a huge showcase of responsive websites (perfect if you need some inspiration).

Bootstrap
Links (Bootstrap):
Bootstrap: http://getbootstrap.com/
How to add a Navigation bar to your app:
https://www.youtube.com/watch?v=23bpce-5s8I ( Bootstrap 4 Navbar Concepts ) NEW!

Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html

Google
Test tool: Mobile-friendly Test

Examples (Code demonstated in the class):
BootstrapTest.zip (Bootstrap 3 - VSCode)
Bootstrap4Test.zip (Bootstrap 4 - VSCode)
BootstrapLynda.zip(VSCode)

Examples(Responsive and not Responsive):
A good responsive website (New York Times)
https://www.youtube.com/watch?v=YRZqSKp71mI

Exercise: (Lynda.com)
Bootstrap 4: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

JavaScript (JS Basic)
HTML DOM(Document Object Model)

ES2015 (ES6)

ECMAscript, ES2015 (ES6), ES20XX

Video
JavaScript - Understanding the Weird Parts (the first 3.5 hours)
What is ECMAScript 6? (ES6, Transpiling, BabelJS, new features ...)
Anjana Vakil: Learning Functional Programming with JavaScript

Recommendation:
Udemy: JavaScript - Understanding the Weird Parts (Price ~ 11 euro, for the full 11 hours course)

New in ES2015 (ES6):
let
class
const
Arrow function "=>"
Template Literals (Template Strings) back-tick (` `) and String interpolation

ECMAscript 6 compability table

Note: ArrayHelperMethods.zip (Henrik H)

Examples (Code demonstated in the class):

HTML-Calulator.zip (VSCode)
JavaScriptObjects (VSCode)
ES2015Test (VSCode)

JavaScriptBasic (VSCode)
JavaScriptSamples (VSCode)

Exercise:
ArrayHelperMethods.zip

Do the exercises in Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript

JavaScript (JS Advanced)

Callbacks
Closures
Promise

Concurrency and event loop
Asynchronius callbacks

ES2017
Async/Await

NodeJS
NPM

Video (YouTube)
Techsith: JavaScript callback functions
Philip Roberts: What the heck is the event loop anyway? (Understanding CallBacks)
Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains
Kyle Simpson: Advanced Async and Concurrency Patterns in JavaScript (Promises / Generators) (Skip the first 7 min. ;))

W3Shools: JavaScript Closures
Techsith: JavaScript promises*
MDN web docs: Concurrency model and Event Loop

Note: Closures&Callbacs.zip (Henrik H)

Async JS: From Callbacks, to Promises, to Async/Await (Blog, by Tyler McGinnis) NEW!
https://tylermcginnis.com/async-javascript-from-callbacks-to-promises-to-async-await/

NPM (Node Package Manager)
Video (Lynda.com)
Up and Running with NPM with Ray Villalobos

Kennedy, Hugh; DeVay, Paul
"Understanding npm". Nsight. Retrieved 22 July 2016

Examples (Code demonstated in the class):
JavaScriptAdvanced.zip (VSCode)

Exercise:
ClosuresOpgaver.zip
PromiseOpgaver.zip

React

Up and running
Components
JSX
Props
States
LifeCycle methods
EventHandlers
Request Handling async/await

Recommendation:
Udemy: Modern React with Redux [2019 update] (Price ~ 12 euro, for the full 47.5 hours course)
Dette kursus kan klart anbefales. Gennemfør de første 6 af 34 sections, gerne inden tirsdag!!

Desværre er prisen pr 01.03 2019 34 euro (den falder nok igen snart :)), i mellemtiden kan du evt se en af følgende tutorials (ps jeg har ikke selv set dem alle endnu, men gode anmeldelser :)):
Mosh: Learn React - React Crash Course 2019
Techsith: React
freeCodeCamp: Lean React.js - Full Course for Beginners - Totorials 2019

React
Links (React):
https://reactjs.org/
JSX In Depth
How to pass props to components in React

Examples (Code demonstated in the class):

jsx-src.zip
component-test-src.zip
season-src.zip
pics-src.zip

Notice:
zip-filerne indeholder kun src og public folders, dvs for at kunne køre projekterne skal du først oprette nye React-projekter i VSCode (med samme navn som filerne) og erstatte de auto genererede folders med src og public

Exercise:
ReactBasicOpgave.zip
ReactMovieInputOutputOpgave.zip (movie-input-output-src.zip)

Solutions:
React-movie-input-output-solved.zip

Redux

Actions / Action Creators
Reducers
Store
Dispatching Actions

React-Redux
Provider
Connections

Note:
How to share React projects: ReactAppFiles

Redux
https://redux.js.org/introduction/getting-started

• Core Concepts
• Three Principles
• Actions
• Reducers
• Store

Meget interessant artikel der forklare sammenhængen mellem Redux reducers og Array-metoden .reduce( ):
https://medium.com/@thejasonfile/the-redux-reducers-and-reduce-puzzle-ecc935191fbf

React Redux
https://react-redux.js.org/introduction/quick-start

Examples (Code demonstated in the class):
counter.zip (Redux)
songs.zip (React-Redux)

Exercise:
ReduxExercise
ReactReduxExercise1
ReactReduxExercise2

Solutions:
color.zip (ReduxExercise)
react-redux-counter-solved.zip (ReactReduxExercise1)
react-redux-movie-input-output-solved.zip (ReactReduxExercise2)

React Router v4
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/
https://reacttraining.com/react-router/web/guides/quick-start

React-Router v4 - Dynamic Routing (Philosophy): NEW!
https://reacttraining.com/react-router/core/guides/philosophy
Super! - Gode forklaringer der uddyber ovenstående:
https://tylermcginnis.com/react-router-philosophy-introduction/

URL Rarameters with React Router (Blog, by Tyler McGinnis) NEW!
https://tylermcginnis.com/react-router-url-parameters/

Pass props to React Router's Link component (Blog, by Tyler McGinnis) NEW!
https://tylermcginnis.com/react-router-pass-props-to-link/

Examples (Code demonstated in the class):
react-router.zip

Exercise:
ReactRouterExercise1

Solutions:
ReactRouterExercise.zip (movie-router)

Examples (Code demonstated in the class):
blog.zip

Exercise:
ReduxThunkExercise1

Solutions:
ReduxThunkExercise.zip (formular1 - under construction)

Mandatory Assignment

Angular

Component interaction (Input/Output)

Routing & Navigating

Angular
Henrik Høltzer: Angular - the PIXI Book (draft - under construction)
Slides:
Introduction to Angular.ppt
Angular-Input&Output.ppt
Angular-Routing.ppt

Video (Youtube Links):
Mosh: Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch Mindspace: Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, ...
JavaBrains: Angular 6

Links (Angular):
angular.io: Learning Angular
angular.io: Angular Architecture overwiew

angular.io: Component interaction
angular.io: Routing&Navigation
Victor Sakin: Angular Routing

The Ultimate Angular-cli Reference

Todd Motto: https://toddmotto.com/
Victor Sakin: https://vsavkin.com/

Exercise: (Angular)
AngularExercise1-FirstApp.html
AngularExercise2-SimpleCalculator.html
AngularExercise3-SimpleCalculator-refactor.html
AngularExercise4-Movie-InputOutput.html
AngularExercise5-Routing.html

Solutions:
AngularExercise1-FirstApp.zip (MyFirstAngularApp)
AngularExercise3-SimpleCalculator-refactor.zip (SimpleCalculator.zip)
AngularExercise4-MovieInputOutput.zip (MovieInputOutput-Solved.zip)
AngularExercise5-Routing.zip (MovieRouter-Solved..zip)

Notice:
The solution zip-file don't contain the node_modules. If you want to try the solution:
1) Just unzip the file in your VSCode/Angular folder
2) Open VSCode an navigate to the new folder
3) Run: npm install in the integrated terminal window
(don't foget it takes some minuttes to generate the project).
4) Start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )

Examples (Code demonstated in the class):
MovieHttpServiceRxJS.zip

Exercise: (Angular)
AngularExercise6-HttpService.html

Solutions:
AngularExercise6-HttpService.zip (F1SimpleHTTPServicel.zip)

Notice:
If you are using Crome and have your webservice on your localhost, the "same origin policy" prohibits you accessing your data. You can disable the same origin policy on Google's Chrome browser by closing Chrome an open it from the cmd with: --disable-web-security (C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security - on my computer)
see: stackoverflow: disable same origin policy in chrome

or install: Allow-Control-Allow-Origin: *

Notice:
The Assignment has to be approved by me in the class, no later than Tuesday, April 23, 2019 at 14.45.