Productive coding with WebStorm

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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 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.

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.

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. 

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. 

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!

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.

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.

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.

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.

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.

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.