Welcome to our demos repository for Modern Web Development Course from DevelopMentor.

If you are in one of our courses right now, start by selecting your course's branch and then just click 'Download ZIP' or clone this repo to your system. On the other hand, if you took the course awhile ago and want access to the demos, your course probably lives in another branch. Use the branches dropdown to find it or just contact us ([email protected]).

If you are not in one of our courses, enjoy the samples and please consider DevelopMentor for your Web Training!

What you will learn in this course

The Modern Web Development course teaches how to develop modern web applications using a combination of JavaScript, AngularJS, Ajax, ASP.NET Web API, HTML5 and CSS techniques. You will learn how to apply these various techniques to create modern client side web applications that use the power of the client via the rich document object model and the JavaScript runtime environment the browser provides.

• Understand the power of JavaScript and how it differs from languages like C# or Java.
• Learn the modern client-side framework AngularJS and see why it’s so powerful.
• Use Ajax and ASP.NET Web API to transport data between the client and server.
• Benefit from new HTML5 features such as web storage, offline and web sockets.
• Use CSS and LESS to style your web applications using the Bootstrap framework.

Course outline and topics

Day 1

The JavaScript Programming Language

This module introduces the JavaScript programming language. Its history, syntax, built-in data types, and control flows, will be covered. The parts of JavaScript that developers should avoid will also be discussed but still covered so that you'll know what to do when you encounter them. Even though this module doesn't assume any prior JavaScript knowledge, it doesn't treat you like you've never programmed before and even developers who've worked with the language should be able to walk away from this module with a much more solid understanding of JavaScript fundamentals.

Functions and Closures

JavaScript treats functions as first-class objects. What does that even mean? This module talks about the refreshing nature of functions in JavaScript and how closures enable a style of expressiveness that can seem completely alien to developers who have only worked with strictly imperative languages. By the end of this module, you'll be familiar with and confident in using functional programming techniques to take your JavaScript skills to the next level.

Objects and Prototypes

JavaScript is a language that's full of objects and yet, seemingly paradoxically, has no classes. Defining constructor functions, inheriting properties from prototypes, and how to manage the elusive "this" reference are covered in this module. We'll see how to simulate classes using prototypes, but will try to reinforce JavaScript's native object model so that those crutches won't be necessary.

Day 2

AngularJS Introduction

This module provides an overview of the AngularJS Model View Controller framework. After this module you will have a basic understanding of the different parts of the AngularJS architecture and how to use them.

Building custom AngularJS Directives

AngularJS ships with an impressive and very useful set of standard directives. In this module you will learn how to enhance and expand the HTML language by creating your own custom directives. These custom directives will let you add behavior to DOM elements as well as create reusable UI widgets. Using the techniques learned in this module you will be able to turn HTML into your own domain specific language (DSL).

AngularJS and Ajax

There are few applications that don’t need to communicate with the server using AJAX calls. In this module we will take a look at the $http and $resource services provided by AngularJS to perform AJAX requests.

Day 3

Single Page Applications using AngularJS

Traditional web applications perform full page loads when the user navigates from page to page. In this module you will learn how to use the routing features of AngularJS to create an application where this navigation is done only on the client’s machine. This allows us not only to navigate much faster but also to retain state on the client browser between the different parts of our application.

ASP.NET Web API

This module provides an introduction to ASP.NET WebAPI which is the .NET framework for building HTTP-based RESTful services. We will cover the motivation for HTTP oriented services as an alternative to SOAP-based services. We’ll examine the major tenets including the importance of URIs, HTTP methods and status codes, content negotiation and hypermedia all using ASP.NET Web API.

Securing ASP.NET Web API

ASP.NET WebAPI is the framework for building HTTP-based services and these services will need to be secured. This session introduces how security (confidentiality, integrity and authentication) is typically performed for HTTP-based services. We’ll also look at the modern approaches to authentication and authorization using OAuth and how to implement these approaches in your WebAPI application using Microsoft’s Katana authentication middleware. Once authentication has been established we'll then turn to authorization and how you can control access to the resources your WebAPI is exposing.

Day 4

HTML5 Networking

One of the most revolutionary features of HTML5 is the new WebSocket protocol which allows servers to push data to clients enabling almost “real time” notifications. This module looks at the client-side APIs you’ll need to be familiar with in order to use them and some different ways of setting up a server in order to handle the client requests.

HTML5 Offline As strange as it sounds, HTML5 allows you to take your web applications offline. This module looks at the ways you can do this, specifying the resources the browser will need to download in order to be able to do anything offline and what events and methods you’ll need to know about in order to provide a proper, offline experience.

HTML5 Storage Up until HTML5, the only way to store user-specific data has been to use cookies, but that’s extremely limited and pales in comparison to the features available in HTML5. This module looks at local storage, the embedded SQL database, and the alternative “IndexedDB”, how to detect them and how to use them.

Day 5

CSS3 Introduction

Cascading Style Sheets (CSS) is the presentation language of the web. This module introduces the latest version which isCSS3. We’ll also look at some of the new CSS properties that you can use to enhance the style of your documents.

Bootstrap

We'll examine Bootstrap, a popular CSS framework for building modern and responsive user interfaces.

CSS and LESS

While CSS is quite good at styling HTML, it’s not always very pleasant to work with. This module introduces LESS which provides reuse and a dynamic aspect to an application’s CSS.