Productive coding with WebStorm
4.5 (72 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
259 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Productive coding with WebStorm to your Wishlist.

Add to Wishlist

Productive coding with WebStorm

Write code faster and achieve better productivity with this IDE for webdevelopers
Best Seller
4.5 (72 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
259 students enrolled
Created by Peter Kassenaar
Last updated 7/2016
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn how to best use WebStorm in your role as JavaScript and TypeScript developer.
  • Learn how to customize the IDE, discover the most valuable shortcuts and the quickest way to write your code.
  • It doesn't matter if you are working with Angular, React, Aurelia or vanilla JavaScript and TypeScript. Everybody benefits from knowing their IDE inside out.
View Curriculum
  • The training Productive coding with WebStorm is for web developers who spend most of their day working with JavaScript, TypeScript, HTML, CSS and many other web technologies. For this, WebStorm is one of the best editors. No specific prior knowledge is required, anyone can benefit from boosting their skills by making optimal use of WebStorm. The training takes less than two hours. You will earn your investment back within a week by being able to write your code (much!) faster

Productive coding with WebStorm

JetBrains WebStorm is the perfect editor for web developers. It is a full featured IDE that provides all the tools and features for developers in JavaScript, Typescript, NodeJS and of course HTML and CSS.

Learn WebStorm or any other JetBrains IDE in one afternoon!

This brief training will show you how to best use WebStorm to be as productive as possible. You will learn many useful tricks to work faster. You'll see all the possibilities to customize the user interface, using keyboard shortcuts and write your code superfast by creating and using Live Templates. Also you'll learn how WebStorm supports your workflow and lets you use tools like Gulp, NPM or Github, all without leaving your editor!

The course is specifically intended for WebStorm, but is also extremely valuable for users of other JetBrains editors like IntelliJ, PHPStorm, PyCharm and others.

This course covers the following topics:

  • Welcome and introduction
  • Downloading and installing WebStorm
  • Touring the IDE and setting up your working environment
  • Adapting the UI to meet your personal needs
  • Coding faster in JavaScript, TypeScript, HTML and CSS
  • Using build- and workflow tools right from the IDE
  • Git- and Github integration
  • Testing your RESTful Services with the REST Client
  • Adding and deleting plugins
  • Other tips and tricks
Who is the target audience?
  • This course is intended for web developers who are using JetBrains WebStorm as their IDE, or wanting to learn to make optimum use of WebStorm.
  • If you use another JetBrains IDE like IntelliJ or PHPStorm, you'll also benefit!
Students Who Viewed This Course Also Viewed
Curriculum For This Course
29 Lectures
3 Lectures 08:45

Getting to know the instructor and what this course is about.

Preview 01:48

A high level agenda of this course and a first free tip on how to get a handy reference map for all keyboard shortcuts of WebStorm!

Preview 02:43

Some thoughts on IDE's vs Editors and examples of both. A short introduction on the WebStorm IDE and why you would want to use it (if you already don't!).

Preview 04:14
Installation and setup
9 Lectures 34:39

A brief overview of the topics covered in Module 2 - Installation and setting up WebStorm


Learn where and how to download the latest version of WebStorm. You are also introduced to the WebStorm Early Access Program (EAP), so you'll be able to download a version of WebStorm with new and unreleased features.

Downloading and installing WebStorm

The Welcome Screen is the first screen you see when starting WebStorm. It has some nice little features that you'll learn about in this video.

Preview 02:25

You'll start an empty web project, and learn the basics of the IDE and how to quickly navigate through the various parts of the user interface.

Touring the User Interface

You'll learn how to organize the IDE and position the various tool windows.

Adapting the User Interface

To get comfortable in any editor you need to be able to change the theme, fonts and colors. Webstorm offers great opportunities here. You'll also learn how to download and install additional themes and Color Schemes from the internet

Preview 04:40

The command Find Action (Cmd-Shift-A) let's you change settings in WebStorm directly via a popup screen. It is the fastest way to set up and change user interface settings.

Ultra fast editing with Find Action

Maybe you come from a different IDE, like Eclipse or Visual Studio and you want to maintain these keymap bindings as much as possible. This video shows how to do so. You'll also learn how to define custom shortcuts for any action.

Keymaps and custom shortcuts

Often times you are working on multiple computers. WebStorm lets you easily export your settings (colors, themes, keymaps, etc) to a file. You can import them in any other installation and thus share your settings on Windows, Mac and Linux versions of WebStorm.

Export and Import your settings
Coding faster with WebStorm
8 Lectures 42:03

A brief overview of the topics covered in Module 3 - Coding faster with WebStorm.


Emmet (formerly known as Zen Coding) is a built in template language you use to speed up your web development. This video shows how to use Emmet to build complex HTML structures.

Preview 06:18

Emmet can also be used to speed up your CSS-development. There are not as many choices as there are for HTML, but it's still a very useful addition to your web development toolbox.

Faster CSS with Emmet

There are several shortcuts available for fast opening files, searching for classes and so on. This video shows you how to use Shift-Shift, Cmd-O, Cmd-Shift-O and many others.

Quick navigation through files, folders and classes

Live Templates are WebStorms implementation of code snippets. With a few keystrokes you can expand complete snippets of JavaScript, TypeScript and more. This video shows some default Live Templates and how to use Cmd-J for looking up Live Templates.

Using Live Templates

Using predefined Live Templates will definitely give your coding speed a boost. But how about creating your own Live Templates for coding snippets YOU use most often? In this video you'll learn how to do so.

Creating Live Templates

Learn how to use and adapt existing File Templates to create any type of file. If you need a specific type of file with some predefined code already filled in, creating your own File Template is the way to go. This video shows you how to do just that.

Using and creating File Templates

In this module, we've only scratched the surface of what is possible with WebStorm. This last video shows you four other tips to code and navigate faster. 

More tips and tricks
Build tools, Version Control and more
9 Lectures 42:44

A brief overview of the topics covered in Module 4 - Build tools, Version Control and more.


If you are using workflow tools like NPM (package.json) or Gulp (gulpfile.js), WebStorm gives you a convenient Tool Window to access Scripts or start Tasks right from the IDE. 

Running NPM and Gulp Scripts

WebStorm keeps a local history for every file you edit. While this is not exactly a replacement for a full Version Control System, it gives you the opportunity to experiment a bit and roll back (revert) unwanted changes in files; even over sessions!

Working with Local History

Git is the Version Control System (VCS) of choice for many web developers. With WebStorm you can integrate Git in your workflow at virtually no effort. You can initialize Git repositories from the menu or a Tool Window and commit changes to local Git repositories very easily.

Git integration

Apart from having very good local Git integration, WebStorm also enables you to create remote Github repositories and sync your local project with remote repo's. The Github log pane shows a nice overview of everything that happened to your project since initial commit.

Integration with Github

You don't always have to start from a local repository. It is as easy to Checkout, or Clone, a remote repository directly from Github and start working from there. This lession show you how to clone your own repos, or repositories from others.

Checkout/Clone from Github

Most likely your web application will communicate with Web Services of some kind, or you'll be developing your own Web Services. You can test these services directly from inside WebStorm via the handy REST Client Tool Window.

Testing and debugging RESTful Web Services

WebStorm (and other JetBrains IDE's) provide a very flexible architecture on which other developers can extend the capabilites of the program even further. This lesson shows you how to disable plugins you don't need (and hence upgrade the WebStorm performance) and how to download and install additional plugins.

Working with Plugins

Do you miss videos of certain WebStorm capabilities or do you know any other cool tricks? Let me know! I'll be happy to extend this course with new videos so we can all benefit. 

Thank you and Your Feedback
About the Instructor
Peter Kassenaar
4.3 Average rating
127 Reviews
403 Students
3 Courses
Pro level frontend trainer, author, developer

In ICT sinds 1996

Als pro-level trainer en schrijver van meer dan 100 ICT-boeken, talloze artikelen, blogposts en columns heb ik meer dan 20 jaar ervaring in het vakgebied. Ik ben ontwikkelaar van front-endtrainingen op het gebied van JavaScript, AngularJS 1.x en Angular 2, Node.js en andere frontend-technologieën (HTML, CSS, jQuery, PhoneGap, tooling en meer). 

Ik verspreid kennis via boeken, video's, en in klassikale of 1:1-trainingen. Je kunt altijd contact opnemen voor een live training of workshop in jouw bedrijf!