Programming with JavaScript, HTML and CSS

Introduction to the Web

You can't start developing for the web without knowing the fundamentals of the web. In this module, we explore the details and intricacies of the HTTP protocol that makes client-server communication possible on the web. Furthermore, we take a look at the REST architectural since it is a fundamental concept to be aware of when transferring data over HTTP.

• Http Methods
• Headers
• Status Codes
• RESTful Architecture

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

Advanced Elements

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. Also do we look at how to display grahics and media on screen.

• Giving Meaning to Elements with Semantics
• Displaying Graphics on Screen
• Getting a Video on Screen
• Displaying a Site inside a Site with IFrame
• LAB - Advanced Elements

CSS Fundamentals

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
• LAB - CSS Fundamentals

Principles of Web Design

Web design isn't just about knowing CSS, it's about creating good looking, easy to use applications. In this chapter, we'll take a look at some of the fundamental principles designers use to turn a good design into a great one.

• Layout and Composition
• Color
• Graphics
• Typography
• User Experience

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

CSS Positioning Advanced

Your website needs to look fabulous on any device; meaning that you need to support a lot of screensizes. This chapter will look at some more advanced ways to position elements while supporting different screen sizes and their limitations.

• Responsive Design
• Flex Box
• Grid
• Using Mediaqueries
• LAB - CSS Positioning Advanced

CSS Frameworks

Styling things yourself can be hard and frustrating. On top of that, keeping consistent styling when multiple people work on the project can be interesting. To help you out, a bunch of CSS frameworks exist. In this chapter we will look at two widely used CSS framworks: Bootstrap and Tailwind.

• Building Responsive Sites with Bootstrap
• Making Modern Websites with Tailwind
• LAB - CSS Frameworks

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
• Strict Mode
• LAB - JavaScript 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

DOM Interaction with JavaScript

In this module, we will learn how to add client-side interactivity to our applications with JavaScript. We will learn how the DOM works, and how we can manipulate it, as well as handling user events in the browser.

• Introduction to JavaScript
• Understanding the DOM
• DOM Selection and Manipulation
• Event Handling
• LAB: DOM Interaction with JavaScript

Object Oriented JavaScript

Since ECMAScript 2015 we have native classes in JavaScript. Classes can be seen as templates for JavaScript Objects, encapsulating data and code to work on that data. We'll take a closer look in this module.

• Class syntax
• Prototypes
• Using Properties to encapsulate your fields
• The 'this' keyword explained
• LAB - Object Oriented JavaScript

Advanced JavaScript Techniques

Now that you know the basics, we can look at some more advanced JavaScript techniques. In this chapter we will look at some more advanced operators and functions in JavaScript. We are also going to look at the other paradigm aside from OOP in JavaScript: functional programming.

• Deconstructiong Objects
• The Spread Operator
• How to Copy Objects
• Optional Parameters in Functions
• Functional Programming
• LAB - Advanced JavaScript Techniques

Dealing with Async Code in JavaScript

Asynchronous code is really handy in JavaScript, since it allows us to keep the UI responsive while running a lot of code. In this module we'll see how to make our code run asynchronously.

• Threading in JavaScript
• Using Callbacks
• Event Handling
• Working with Promises
• Async and Await
• LAB - Dealing with Async Code

Structuring JavaScript Applications and Tooling

Hey new JavaScript developer! You are using WebPack right? WebPack? Yes, and Gulp and npm, you need those. And definitely use TypeScript. It's soo good... If your face looks like a big question mark right now, that's quite normal. Setting up a JavaScript project can be quite the challenge. It's easy to get lost in the overwhelming amount of tools and best practices. In this module we'll create some clarity about these tools and teach you how to set up a modern JavaScript project.

• Using Libraries
• Content Delivery Networks
• Getting Libraries with npm
• Modules versus the Global Object
• Bundling and Minification
• PolyFills and Transpilers
• Typescript
• Using Task Runners
• Tools for Code Quality
• LAB - Structuring an Application

Working with Frameworks

Yes you can do DOM interaction yourself, but ... yeah maybe let a framework do it? In this chapter we will look at how frontend development changed over time and how we came to using component-based frameworks. Which framework? Good (highly debated) question. We will talk shortly about the big three: Angular, React and Vue; but stay unopinionated.

• The Evolution of Web Development
• Framework Overview
• LAB - Building a Frontend with a Framework

Talking to the Server

JavaScript runs on the client, data is stored on servers. At some point JavaScript needs to talk to the server to get, update, ... some data. In this chapter we will see how to talk to a REST service using the fetch API. We will briefly show how you can make that REST service using server-side JavaScript, a.k.a. nodejs.

• Rest Service
• Server-Side JavaScript
• Fetching Data with the Fetch API
• Syncing the Data
• LAB - Consuming a Web API

Using Browser APIs

DOM interaction, fetch API, setTimout, ... all calls JavaScipt makes to the browser: "hey borwser, can you do this for me?". The browser gives a lot more APIs to JavaScript developers. In this chapter we look at some commonly used browser APIs.

• The Window Object
• Storing Data on the Client
• Dynamic Graphics
• Accessing the File System
• Device APIs
• Check Compatiblity