Modern Web Development with JavaScript and TypeScript in WebStorm

Build interactive web pages and a small Node.js back end with JavaScript and TypeScript, then test and debug them in WebStorm.

Beginner · Software Development · about 12 hours · 4 modules · certificate on completion

Taught by Sebastiàn Vargàs, Luís Ferreiràs, AI Learning Companions.

About this course

Learn to build for the web the way professional developers do: in WebStorm, an IDE that understands JavaScript and TypeScript. Each lesson teaches an idea and then shows it in WebStorm, step by step, with the keyboard shortcuts for macOS, Windows and Linux. You'll start with the core of JavaScript, run it with Node.js and organise it into modules. Then you'll make pages that respond to clicks and forms and load data with fetch, and add TypeScript so that mistakes show up as you type rather than when your users find them. Finally you'll build a small JSON API with Node.js and Express, test it with Vitest and debug it with breakpoints. Every module ends with a hands-on lab that you submit for your instructor's feedback, and the course ends with a small web app, front end and back end, that you build yourself.

What you'll learn

  • Set up JavaScript and TypeScript projects with Node.js and npm in WebStorm, and run, test and debug them there
  • Write modern JavaScript with values, functions, arrays, objects and modules
  • Make web pages interactive with the DOM and events, and load data with fetch and async/await
  • Add types with TypeScript, from interfaces and union types to generics, checked as you type
  • Build a small JSON API with Node.js and Express, and test it with Vitest

Skills you'll gain

JavaScript, TypeScript, WebStorm, DOM and events, Asynchronous JavaScript, Node.js, REST APIs, Testing with Vitest, Debugging

Tools

WebStorm, Node.js, TypeScript, npm

Before you start

None: this course starts from zero, though it helps to have seen a little HTML. You need a Windows, macOS or Linux computer with Node.js (the LTS version from nodejs.org), a modern browser such as Chrome, Edge or Firefox, and WebStorm, which is free for non-commercial use such as learning.

Modules

  1. JavaScript fundamentals with Node.js

    Set up WebStorm and Node.js, then learn the core of JavaScript, from values and functions to arrays, objects and modules, by writing and running small programs.

    • JavaScript, Node.js and your first project (11 min)
    • Values, variables and functions (12 min)
    • Arrays, objects and modules (13 min)
    • Hands-on lab: Analyse a playlist

  2. The DOM, events and fetch

    Make web pages interactive: find and change elements in the DOM, respond to clicks and forms, and load data with fetch and async/await without freezing the page.

    • HTML, the DOM and changing a page (12 min)
    • Events and forms (12 min)
    • Asynchronous JavaScript and fetch (13 min)
    • Hands-on lab: Build a tips page that loads its data

  3. TypeScript

    Add types to JavaScript with TypeScript: set up the compiler, describe data with interfaces and union types, use generics, and let WebStorm catch mistakes before the code ever runs.

    • Why TypeScript, and setting it up (12 min)
    • Types, interfaces and unions (12 min)
    • Generics and typing real code (12 min)
    • Hands-on lab: Convert the playlist analyser to TypeScript

  4. A Node.js back end, testing and debugging

    Build a small JSON API with Node.js and Express in TypeScript, try it with WebStorm's HTTP Client, test its rules with Vitest and debug it with breakpoints.

    • A JSON API with Node.js and Express (13 min)
    • Testing with Vitest in WebStorm (12 min)
    • Debugging Node.js and TypeScript in WebStorm (12 min)
    • Hands-on lab: Build, test and debug a tasks API

Project: Build a small web app: an event sign-up board

Build a small web app for a community group's events, with a TypeScript back end and a page that uses it. The server, built with Node.js and Express, keeps a list of events (a title, a date and a number of places) and answers JSON: it lists the events, shows one, and signs someone up with a name and an email address. It rejects bad input, a full event and an email that has already signed up, with the right status codes and clear messages, and keeps its data in a JSON file so it survives a restart. The page, served by the same server, lists the events with the places left, lets visitors sign up with a form, and shows success and error messages without reloading, using fetch and async/await. Keep the rules in plain TypeScript functions or classes tested with Vitest, try the API with WebStorm's HTTP Client, and use the debugger to fix whatever doesn't work.

Part of

WebStorm is a trademark of JetBrains s.r.o. This course is independent: JetBrains hasn't made or endorsed it.

Start the course free