Agenda

( Show Subtopics Hide Subtopics )

1. Introduction2

   1. About the course and the online resources being used.
   2. What happens with the Web, and the technologies behind it during the past years?

2. Practical introduction to git and GitHub/GitLab6

   1. What is a VCS and how it makes life easier?
   2. Installing and configuring git.
   3. Create and configure a git repository.
   4. Adding files to repository and committing changes.
   5. Working with branches.
   6. Overview of GitHub/GitLab and setting-up an account.
   7. Connect your local git repository to your GitHub/GitLab repository.
   8. Using GitHub/GitLab pages as free hosting for your project.

3. JavaScript Overview2

   1. Historical overview in 10 minutes (or how the history repeats itself)
   2. JavaScript standards: ES5, ES6,ES2018, ... ES.Next?
   3. The difference between JavaScript and other OOP languages
   4. The object oriented nature of JavaScript: "everything is an object"?!?

4. Advanced JavaScript Functions8

   1. Function Declaration vs. Function Expression vs. Function Constructor
   2. The Arrow function syntax.
   3. Higher-Order Functions (Functions as first-class citizens)
   4. Closures.
   5. Recursion

5. Other ES6 features4

   1. Default parameter values
   2. The spread operator
   3. The rest parameter
   4. De-structuring assignments

6. References vs Values2

   1. Copy/pass by value
   2. Copy/pass by reference

7. Objects in JavaScript - the basics4

   1. JavaScript objects in a nutshell. New ES2015 features.

8. The "this" context4

   1. "this" in global context
   2. "this" in function invocation context (strict or non-strict)
   3. "this" in method invocation context
   4. "this" in constructor invocation context
   5. "this" in call(), apply() and bind() methods
   6. "this" in static methods

9. OOP Intro. Prototypal Inheritance in JavaScript6

   1. Classical (class-based) Inheritance vs. Prototypal Inheritance
   2. Object prototype
   3. The Object.create() method
   4. Let's got deep - what's in a object?
   5. Classical (class-based) Inheritance in JavaScript?
   6. Prototypal Inheritance - How it works?

10. Regular Expressions in JavaScript6

    1. The syntax
    2. Create Regex in JavaScript
    3. The match() String method
    4. The replace() String method

11. jQuery4

    1. Introduction to jQuery. When to use it?
    2. Traversing and Manipulating the DOM.
    3. DOM Events and Event Delegation.
    4. Useful JQuery plugins.

12. Bring Semantic to the Web4

    1. HTML5 Semantic elements - the right usage and SEO considerations.
    2. Data Attributes in HTML5.

13. Master the Browser's WebDevelopers Tools and be productive2

    1. Page and loading time optimizations.
    2. Profile and Analyze.
    3. Debugging JavaScript.

14. CSS pre-processors and native CSS Custom properties4

    1. Why to pre-process CSS?
    2. Yes, LESS is more.
    3. How about Sass/SCSS? Or Stylus?
    4. CSS Custom properties and CSS variables

15. Responsive Web design essential concepts4

    1. Modern design strategies - why 'Progressive Enhancement' is better than 'Graceful Degradation'?
    2. Manage the viewport.
    3. CSS media queries - apply different styles for different viewports.

16. Responsive Layouts with CSS Grid and Flexboxes6

    1. The Flexbox Layout model.
    2. The Grid Layout model.
    3. Create Responsive Layouts.

17. Bootstrap4

    1. Responsive Design Frameworks - Overview
    2. Introduction to Bootstrap
    3. Bootstrap Components.
    4. The Bootstrap Grid System.
    5. Bootstrap Plugins.

18. AJAX and RESTFull APIs. JSON Format.4

    1. Preamble: HTTP protocol overview
    2. Preamble: Asynchronous vs Synchronous Communications
    3. What is AJAX?
    4. Understand the basics: implement AJAX requests with XMLHttpRequest (XHR) object
    5. Preamble: Data exchange formats: XML, JSON
    6. What is a RESTful web API and why we use it?
    7. Create a simple RESTful API endpoint with nodejs.
    8. Consume RESTful API data with JS and JQuery.

19. Introduction to Node.js and NPM1

    1. Simple explanation of node.js principles.
    2. NPM - the node Package Manager.
    3. Live Demo - simple Express app

20. Hands on todo app with local fake JSON server3

    1. Understand the API endpoints
    2. Setup fake REST API json-server and DB on local machine
    3. Start the server
    4. JSON-Server usage notes

21. React - the Facebook's library for building user interfaces.1

    1. React overview and basic concepts.
    2. Build a ToDo App with React from scratch.

22. Angular - the Google's platform for building apps1

    1. Angular overview.
    2. Why AngularJS ≠ Angular?
    3. Build a ToDo App with Angular from scratch.

23. Web Graphics and Animations with PixiJS.2

    1. What is WebGL?
    2. PixiJS:introduction and setup.
    3. Understanding the Pixi Application. Create the Renderer and Stage container
    4. Pixi sprites. How to make scene out of sprites
    5. Loading a sprite sheet.
    6. Creating an animation from a sprite sheet
    7. Animation effects with pixijs - demo
    8. Create a Memory Game (Matching Pairs) with PixiJS.

24. Instead of conclusion0

    1. Web Components?
    2. JavaScript-based polyfills?