https://github.com/mediacomem/comem-masrad-dfa
MAS-RAD DFA course
https://github.com/mediacomem/comem-masrad-dfa
Last synced: 9 months ago
JSON representation
MAS-RAD DFA course
- Host: GitHub
- URL: https://github.com/mediacomem/comem-masrad-dfa
- Owner: MediaComem
- License: mit
- Created: 2017-01-16T10:46:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-07T17:58:45.000Z (over 2 years ago)
- Last Synced: 2025-03-20T16:52:19.052Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://mediacomem.github.io/comem-masrad-dfa/latest/
- Size: 23.3 MB
- Stars: 2
- Watchers: 6
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# MAS-RAD | CAS-DAR | Advanced Front-end Development (DFA)
- [Prerequisite](#prerequisite)
- [Plan](#plan)
- [Additional concepts and tools](#additional-concepts-and-tools)
- [Documentation](#documentation)
- [Useful links](#useful-links)
The goal of this course is to discover concepts and tools to organize the front-end side of a web application and enrich the user interface/experience according to current good practices.
You will:
- learn how to make good use of a CSS framework to build a responsive HTML user interface
- learn (or review) how to manipulate the DOM API with or without a library
- learn how to manage asynchronous communications with a Web API on the back end
- learn how the use of a framework does help to organize the front-end code of a single page application
- be introduced to frameworks that help you develop and build your web application for multiple devices
_This course uses subjects from or based on [COMEM+][comem] [architecture & deployment][comem-archidep], [web-oriented architecture][comem-archioweb] and [mobile development][comem-devmobil] courses taught to students of [Media Engineering][im] at [HEIG-VD][heig]._
## Prerequisite
- Basics of HTML, CSS and JavaScript
- Use of [command line][cli]
- Use of [Git][git], [Git branching][git-b] and [Collaborating with Git on GitHub][collab]
## Plan
- ✔ [Introduction][dfa]
- ✔ [Setting up your environment][setup]
- Bootstrap
- ✔ [Getting started][bb]
- ✔ [Layout management][blm] ([practice][bex])
- JavaScript
- ✔ [Basics and more][js-bas]
- DOM Manipulation
- ✔ [With JavaScript][js-dom]
- ✔ [With jQuery][jq-dom]
- Web Service and asynchronous operations
- ✔ [RESTful APIs][rest]
- ✔ [Basic Promises][js-prom-basic]
- ✔ [Observables with Rxjs][rxjs]
- ✔ [Modular JavaScript][js-modules] (✔ [practice][js-mod-practice])
- ✔ [TypeScript][ts]
- Angular
- ✔ [Angular CLI][ng-cli]
- ✔ [Getting started][ng]
- [Angular Forms][ng-forms]
- ✔ [Hands-On exercise][ng-exercise]
- ✔ [Navigation & Routing][ng-router]
- ✔ [Project Starter][project-starter]
- Geolocation & map features
- ✔ [Geolocation][geo-api]
- ✔ [Angular Leaflet][ng-leaflet]
## Additional concepts and tools
- ✔ [Code and architecture principles][code-principles]
- ✔ [Node Package Manager (npm)][npm]
- ✔ [JavaScript Closures][js-clos]
- ✔ [JavaScript Prototypes][js-prot]
- ✔ [JavaScript ES6 Classes][js-classes]
- ✔ [Advanced Promises][js-prom]
- ✔ [SOP & CORS][sop-cors]
## Documentation
- ✔ [Travel Log API][travel-log-api-docs]
## Useful links
- ✔ [REST demonstration API][rest-demo] (implementation & docs source) used in the RESTful APIs exercise
[angular-leafet]: https://mediacomem.github.io/comem-archidep/latest/subjects/angular-leaflet/
[api-call]: ./subjects/api-call
[bb]: ./subjects/bootstrap
[blm]: ./subjects/bootstrap-layout-management
[bex]: ./subjects/bootstrap-practice
[cli]: https://mediacomem.github.io/comem-archidep/latest/subjects/cli/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[code-principles]: https://tazaf.github.io/heig-mdt-gio1/latest/subjects/basic-principles/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[comem]: http://www.heig-vd.ch/comem
[comem-archioweb]: https://mediacomem.github.io/comem-archioweb/latest/
[comem-archidep]: https://mediacomem.github.io/comem-archidep/latest/
[comem-devmobil]: https://mediacomem.github.io/comem-devmobil/latest/
[collab]: https://mediacomem.github.io/comem-archidep/latest/subjects/git-collaborating?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[dfa]: ./subjects/intro
[git]: https://mediacomem.github.io/comem-archidep/latest/subjects/git/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[git-b]: https://mediacomem.github.io/comem-archidep/latest/subjects/git-branching?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[geo-api]: ./subjects/geolocation/
[heig]: http://www.heig-vd.ch
[im]: https://heig-vd.ch/formations/bachelor/filieres/ingenierie-des-medias
[jq-dom]: ./subjects/jquery-dom
[js-ajax]: ./subjects/js-ajax
[js-bas]: ./subjects/js
[js-classes]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-classes/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[js-clos]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-closures/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[js-dom]: ./subjects/js-dom
[js-mod-practice]: https://github.com/Tazaf/masrad-dfa-js-module-practice
[js-modules]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-modules?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[js-prom]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-promises/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[js-prom-basic]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-promises-basics/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[js-prot]: https://mediacomem.github.io/comem-devmobil/latest/subjects/js-prototypes/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[mapbox]: https://www.mapbox.com/mapbox.js/api/v3.0.1/
[ng]: ./subjects/angular
[ng-cli]: ./subjects/angular-cli
[ng-bootstrap]: ./subjects/angular-ui-bootstrap
[ng-exercise]: https://github.com/Tazaf/masrad-dfa-angular-starter-practice
[ng-forms]: ./subjects/angular-forms
[ng-leaflet]: ./subjects/angular-leaflet
[ng-router]: ./subjects/angular-routing
[ng-starter]: ./subjects/angular-auth-starter/
[ng-ui-router]: ./subjects/angular-ui-router
[ng-ui-router-exercise]: https://github.com/MediaComem/comem-webdev-angular-ui-router-exercise
[npm]: https://mediacomem.github.io/comem-archioweb/latest/subjects/npm/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[project-starter]: https://github.com/Tazaf/masrad-project-starter
[rest]: https://mediacomem.github.io/comem-archioweb/latest/subjects/rest/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[rest-demo]: https://github.com/MediaComem/comem-webdev-express-rest-demo
[rxjs]: https://mediacomem.github.io/comem-devmobil/latest/subjects/rxjs/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest
[setup]: ./subjects/setup
[sop-cors]: ./subjects/sop-cors
[travel-log-api-docs]: https://demo-travel-log-api.onrender.com/
[ts]: https://mediacomem.github.io/comem-devmobil/latest/subjects/ts/?home=https%3A%2F%2Fmediacomem.github.io%2Fcomem-masrad-dfa%2Flatest