Modern Web Development

Course Description

The web landscape changes weekly. If you are a web developer then it is an almost impossible task to keep up to date with changes in the language syntax, tools, frameworks and related tools. Frameworks come and go at an alarming rate and it can be risky to adopt new technologies before they are mature. This is a hands on course that will create real web applications / sites and deploy them using a free hosting service. It will also create - as an exercise - a progressive web application and an introductory mobile application using React Native.
5 Days
Contact us for pricing
 

Prerequisites

Programmers with some familiarity in web application development.

This course is a chance to get familiar with some of the radical changes that have happened in web development. It will give you the necessary information you need to review your technology stack and identify new tools and techniques that could help you be more productive.

ES6

JavaScript was updated in 2015 to include a lot of new features. These features are now supported by all major browsers but many developers are not making use of them. This module will cover the main features and how they can make you more productive.
ES6 Syntax
Fat arrow functions
Promises
async and await
Objects using class
Understanding "this"
Modules & imports
Push notifications to your website
Is jQuery still relevant?

Advanced CSS

Advanced CSS selectors
Flexbox layout
Grid layout
Animation
SVG

CSS Preprocessors

CSS Preprocessors such as SASS and LESS add programmatic features to CSS.

This module will cover the main features that are supported by these tools.

Server side JS (node.js)

Even if you have no intention of using server side javascript in your technology stack it is vital that you are familiar with node.js and npm as there is an incredibly rich ecosystem of tools based on them.
Node.js
npm and yarn
Creating a web server in <10 lines of code

Create a REST service using node.js

Use the techniques covered in the last module to create a RESTful web service with a MongoDB backend.

Introduction to GraphQL

What is GraphQL?
What are the pros and cons of GraphQL?
Create a GraphQL server using node.js

Webpack

Webpack is a command line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your javascript files and any other assets and transforms then into one huge file.

This module will cover the basics of what Webpack is and how it can be used.

Introducing Component Frameworks

Front end frameworks have evolved to the point where it is now possible to create custom html tags. This is proving to be very popular with developers. This module will give an overview of the competing component frameworks and do some basic examples.

Modern Native Mobile Development

React Native allows you to take the components that you created using React of Angular and compile them to create a native mobile application that will run on both Android and IOS.

This module will go through the basics of NativeScript and create a simple native mobile application.

Firebase Cloud Service

This module will cover some of the features of the firebase cloud service as these features will be required later on.
Hosting
Storage
Authentication
Notifications

Progressive Web Applications

A progressive web application allows you to create a website that will have features that make it appear like a mobile app. You can install a PWA on the homescreen of your device, you can have it display without a frame so it doesn't look like a browser. You can cache the resources for the site so that it will be available when the device is offline. You can also use some native device features like the camera or receive notifications.

This module will create a basic PWA.

Static site generators

Static site generators take the content of a site from various sources and generates a series of static html pages. This can have a number of advantages including very simple hosting, no requirement for a database, very fast rendering of the site.

This module will cover the basics of static site generators and the JAM (JavaScript APIs and Markdown) stack.

Automated Testing

Automated testing is a core feature of most of the modern web development frameworks and this module will cover some of these in detail. It will cover end-to-end testing using cypress.io.
Modern Web DevelopmentAngularAngular.jsReactReact NativeVue.jsGraphQLJAM StackMERN StackMEAN StackNode.jsPWAProgressive Web ApplicationAMPAccelerated Mobile PageWebpackTypescriptES6JavaScriptFront End Web DevelopmentWeb DevelopmentFullstack Web DevelopmentHTMLCSSHTML5CSS3CypressCypress.io