Working with WebStorm

6.1 Exploring the IDE Layout

Let's figure out what you're seeing here.

1. Project's folder and file tree:

This displays the contents of our project folder — web-storm-10.

I intentionally created one file to make it clearer how everything is set up. You'll be doing all this in the next lecture too.

2. The currently opened file:

This is just the content of the index.html file, with code syntax highlighted.

3. The top menu:

Useful buttons on the top right:

• “Green triangle” — start project button
• “Bug” — debug mode button
• “Magnifying glass” — project search
• “Gear” — settings

4. The left sidebar:

There are several useful buttons here. We're specifically interested in the Terminal button.

5. Status bar:

On the left, the status bar shows the path of the currently open file. On the right, its encoding: CRLF, UTF-8. You'll soon be a pro at understanding all of this.

6.2 Project Breakdown

1. HTML files.

These files have a .html extension, and WebStorm marks them with a green icon of two arrows. There's just one such file here — index.html

2. JS files.

These files have a .js extension, and WebStorm marks them with a yellow icon. There aren't any such files in the screenshot right now.

3. CSS files for styles.

These files have a .css extension, and WebStorm marks them with a blue icon. There aren't any such files in the screenshot right now.

4. Static media files. These are files that contain data but not code. They can be text files, images, media files, etc. We don't have any in our project right now.

5. External libraries. We don't have any in our project right now, but when you download them, WebStorm will definitely show them here.

6.3 Working with the Terminal

In WebStorm, you can work with the OS command line directly. On Linux and MacOS, the command line is commonly referred to as the Terminal, so it's called the same in WebStorm. This isn't a whim of WebStorm but a standard naming among developers.

To open the Terminal, you need to click on the terminal button in the sidebar:

You should see a window like this:

In this window, you can type commands for your operating system. We're interested in one of them.

Let's find out the current version of Windows. To do this, type:

    
      ver
    
  

Here's what I got:

If you encountered an error, first type the command “cmd” and then the command “ver”.

6.4 What is the CodeGym Plugin and Why is it Useful?

This is an application, a special software module that integrates into the Intellij IDEA or WebStorm development environment and allows you to work within it on CodeGym course tasks. For instance, you can write code solutions, submit them for review, compare your solution with the "default" one, and much more. Progress in solving tasks in the plugin is synced with your account on CodeGym, so it'll appear the same on both the site and the development environment.

You can download the CodeGym plugin from the Jetbrains marketplace right in your development environment. We'll demonstrate the steps using WebStorm, but the same steps apply to Intellij IDEA.

1. Go to the "Settings" section, Windows/Linux File - Settings, MacOS WebStorm - Preferences. If there's no settings section, open any project or create a new one.

2. In the window that appears, choose the Plugins section from the sidebar and open the Marketplace tab. In the search bar, type codegym

3. Select the plugin and click on the Install button.
4. Restart WebStorm (Restart IDE) to start working with the plugin.
5. You will see a slightly modified interface and a Login button on the top-horizontal panel.

When clicked, a login window will open where you need to enter your secret key:

Remember that you can find the secret key in the “Settings” → “Security and Login” section.

After logging in, the project and Codegym SDK download will start (no need to change to a different version).

6. To open a new task, click on Tasks in the left vertical panel, then on the task card in the left sidebar, and in the pop-up window, click Open:

7. The window with two tabs will open. One is with the condition, and the other is for entering code.
8. Now write the solution for the task and hit the Velidate button

The plugin is now installed! You can start solving tasks.

Task Site-Plugin Sync

The list of tasks and their statuses automatically updates every five minutes or after submitting any task for review (codegym server).

So if you've solved a task on the site, it will also appear in the list of solved tasks in the plugin. If you need to refresh the task statuses right now, click on your avatar (top-right), and in the dropdown menu, choose Sync Tasks:

Beginner Mode in the Plugin

This is a simplified version for those users who have no (or little) experience working with WebStorm and other development environments. Some WebStorm features are hidden in it. To disable this mode, click on your avatar (top-right), and in the dropdown menu, choose Settings:

How to Hide the Plugin's Navigation Panel in PRO Mode

Click on the Settings (⚙️) and uncheck "Display plugin navigation panel":