Modern JavaScript Project Tutorials

This Tutorials section of our Modern JavaScript Hub offers a range of lessons, tips and tricks for becoming a JavaScript expert. It contains modern JavaScript project materials for beginners, and more advanced tutorials and other learning resources for those wanting to push their expertise to the next level.

Getting Started

If you’re just getting your feet wet, we have a guide to retrofitting a website as a progressive web app, discussing what a PWA is and why you’d even want to do this. We also look at building a JavaScript Single Page App without a framework, which helps you evaluate what the various JavaScript frameworks and libraries actually do for you, and at what point it makes sense to use one. It also gives you an understanding of the pieces that make up a typical SPA and how they’re wired together.

If you’d rather be learn to do more with modern JavaScript through a video course, try out our guides to building your first React, ES6 and Node.js App and building a simple back-end project with Node.js.

If you’ve been using jQuery but want to try something a bit more modern and powerful, take a look at our tutorial on replacing jQuery with Vue, which shows how using Vue.js — even for relatively basic projects — doesn’t have to be a headache, and will help you write better code faster. It takes a simple example coded in jQuery and recreates it in Vue step by step.

Advanced Tutorials

Taking things up a level, we have an introduction to WebAssembly, which delves into solving performance problems on the Web, showing how WebAssembly overcomes bottleneck issues that traditional JavaScript wasn’t meant to solve.

We also step through how to build a to-do list with Hyperapp, the 1KB JS Micro-framework that allows you to build dynamic, single-page web apps by taking advantage of a virtual DOM to update the elements on a web page quickly and efficiently in a similar way to React.

We also take you through a practical demo of how to create a real-time app, working with WebRTC to build a video chat app with messaging features. You can also learn how to build a full-sphere 3D image gallery with React VR, and how to work with interactive data visualization using D3.

Some more of our tutorial-related books cover topics such as a collection of tutorials from this hub, as well as practical projects using React, Angular and Node.js, and our more advanced video topics include mastering JavaScript Closures, Data Structures and Map/Reduce and following functional JavaScript principles.

Further Learning

There’s an array of other article tutorials, books and courses listed below.

And don’t forget that this Modern JavaScript Hub also provides a Getting Started with Modern JavaScript section, and covers an extensive range of Tools and Resources that complement modern JavaScript as well.