Programming with HTML, CSS, TypeScript and Angular

The HTTP Protocol

You can't start developing for the web without knowing the fundamentals. This module talks about the HTTP protocol used to request resources from the server. We'll explore the details of what is used for a browser and for a server to make sure the communication is legitimate.

• Http Verbs and their Meaning
• Request and Response Headers
• Interpreting Status Codes
• Cookies
• Redirection
• Caching Resources

HTML Fundamentals

The structure of a web page is created on HTML. We'll have a look at basic elements like input fields, divs,... to make sure the content is structured in the way we want.

• Anatomy of a page
• How a page is parsed
• Some important HTML elements
• Styling and Behavior
• LAB - HTML Fundamentals

Forms

Working with forms is one of the most important aspects in HTML development. It makes it possible for the user to send data to the server

• Form Elements
• How Forms Work
• Useful Attributes and Functions
• Validation
• LAB - HTML Forms

HTML Semantics

Modern HTML includes a variety of semantic tags that make it easier for things like screen readers and search engine to understand our webpages. In this module we take a look at those elements and their benefits.

• The need for meaningful elements
• Headers, content and footers
• Articles and sections
• Navigation elements
• Meaningful figures
• Dates and time
• LAB - HTML Semantics

CSS Essentials

A web page only looks nice when we start styling it. HTML is great to get all of our content on the page, but when we want to change the font, the colors, the location of everything we need some way to target these properties. CSS is the language we'll use to make sure the browser renders the page in the way we want to. We'll start with some basic selectors and learn how to use them efficiently.

• Styling websites using CSS
• CSS Selectors
• Understanding Inheritance & Cascading behavior
• Choosing the right unit

CSS Positioning

One of the hardest parts of CSS is making sure that every element is located at the correct position. This chapter will explain the layout flow and basic options.

• Understanding the Box Model
• Flow
• Display
• Position
• LAB - CSS Positioning

JavaScript Introduction

JavaScript is THE programming language for the web, and it's becoming more and more important in other areas as well. In this module we'll take a first look at the language and how to make our lives easier by using it efficiently.

• Why is JavaScript Important?
• What is ECMAScript?
• Performance
• Picking the right Libraries
• Developer Tools

JavaScript Language Fundamentals

In this module, we'll talk about the very basics of JavaScript. JavaScript can be a very tricky language, so we'll try to explain a couple of its quirks as well. This way, we can avoid surprises later.

• Using Variables
• Primitives and Objects
• Functions: more powerful than you'd expect
• Understanding Scope
• Error Handling
• Best Practices
• LAB - Language Fundamentals

JavaScript Collections

Collections are a big part of OO programming, they allow you to map one-to-many or many-to-many relationships, as well as let you work with sets of data. In this module, we'll take a look at the different types of collections in JavaScript, and their uses.

• Storing multiple values in Arrays
• Useful Functions and Operators
• Using Objects as Maps
• Sets, Maps and Others
• LAB - Collections

Strongly Typed JavaScript with TypeScript

Let's face it: JavaScript was never designed for big applications. Many constructs to tame complex code like interfaces and strong typing are completely absent. And many of the new cool JS features are not implemented in current browsers. TypeScript is the solution to both problems; allowing you to write modern, application-scale JavaScript.

• Writing Application-Scale JavaScript
• Type-Safe JavaScript Development with TypeScript
• Typescript configuration
• Implementing Types, Classes and Inheritance
• Namespaces and Modules
• LAB - Building a Web Shop with TypeScript

Introduction to Angular

In this module you'll see what Angular is all about and why it is so important in modern web development.

• Evolution in Web App Development
• Basic Node.js and Angular project structure
• Angular Core and Modules
• TypeScript, Dart, Plain Old JavaScript

Core Concepts

In this module you'll get acquainted with the most important building blocks for any Angular application. This is the foundation of all following chapters.

• Components
• Modules
• Services
• Angular CLI and other Tools
• LAB - Creating an Angular Application

Data Binding

Data binding allows you to forget about the HTML while writing JavaScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.

• The Importance of Binding
• Component to View
• Structural Directives
• Local Template Variables
• Value Conversion
• View to Component
• LAB - Data Binding

Components

In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to communicate between them. You'll also take a look at some component libraries like Angular Material and how they can make you more productive

• Using Multiple Components
• Input and Output
• ViewChild and ContentChild
• EventEmitter
• Directive Life Cycle
• Component Libraries
• LAB - Building components

Attribute and Structural Directives

A component always has a view. But what if you just want to add custom behavior to an existing element? In this module you'll explore existing directives like NgIf, NgFor, NgClasses, ... And learn how to build your own.

• Attribute Directives
• Structural Directives
• Built-in Directives
• Custom

Dependency Injection and Providers

Dependency Injection (DI) is the art of taking two strongly coupled objects and tearing them apart. This helps you write understandable, maintainable and testable code. It's not really a choice in Angular either: you have to do it. Angular has an entire mechanism based on Providers to support DI which you will explore in this module.

• Terminology
• Dependency Injection Basics
• Services
• Providers
• Factories
• Injection Tokens
• LAB - Building Services and using Dependency Injection

Pipes

Pipes are a convenient way to make little changes to values in a view. This includes formatting and filtering of data. It's easy to use and to extend the possibilities of pipes.

• Using a Pipe
• Built-in Pipes
• Custom Pipes
• Pure versus Impure
• LAB - Build your own Conversion Pipe

Working with Forms

Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You need validation, automatic formatting, respond to data changes a so on. Angular provides two different approaches to dealing with this: Template-driven forms and Model-driven forms. This module will explore both.

• What's in a Form
• Responding to Changes
• FormBuilder
• Data Validation
• LAB - Capturing and Validating Input with Forms

Talking to the Server

This module will teach you how to retrieve and send data to your backend. We will focus on REST and use RxJS Observables to get the job done.

• Sending and Receiving Data
• HTTPClient Module
• HTTP Interceptors
• Observables versus Promises
• LAB - Communication with REST Web Services

Building a Single Page Application

Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages, but are usually difficult to implement. This module will teach about the constructs available in Angular to build a SPA.

• What is a SPA
• Router Module
• Route Configuration
• Parent-Child Navigation
• Route Guards
• LAB - RECAP - Setting up a Complete Single Page Application with Routing

Reactive Extensions for JavaScript

Reactive programming is a world on its own and is not necessarily tied to Angular. However Angular uses RxJS in many of its APIs, so we must have a proper understanding of what it means to write reactive code. RxJS has a steep learning curve. But once you master it, there is no going back.

• What are Reactive Extensions
• Observable and Observer
• Subjects
• Cold versus Hot Observables
• Making Async Calls
• Combining Observables
• Error Handling
• Dealing with Back Pressure
• LAB - Spotify Search with Observables

Testing

How can we test Angular components, replace services as dependencies, build stubs and mocks? Here we look at building component specifications using Jasmine and Karma.

• Writing Unit Tests with Jasmine
• Setting Up a Productive Testing Environment with Karma
• Writing Testable Angular Code
• Testing your Models, Services, Pipes, and Component Logic with Isolated Tests
• Angular Testing Utility APIs: Testing with the DOM in Mind
• LAB - Unit Testing in Angular