WebStorm 8.0.0 Web Help

To get familiar with WebStorm it is recommended that you create your first project from scratch and implement the very basic functionality in it.

To create and run your first web project
  1. Create a project. For that, choose File | Create New Project on the main menu.
  2. In the Create New Project dialog box that opens specify the name of the project in the Name text box, for example, type MyFirstWebProject.
  3. In the Location text box, specify the folder to create the new project folder in. Type the path manually or click the Browse button browseButton.png next to the text box. Then select the desired folder in the dialog that opens. WebStorm composes the path to the project folder as follows:

    webstdcreateNewProject.png

  4. Create an HTML file. To do that, right-click the project directory in the Project tool window, point to New on the context menu, and choose HTML File.

    webstdcreateHtmlFile.png

  5. In the New HTML dialog box that opens type MyFile and click OK. WebStorm will create the stub file for you and open it in the dedicated editor tab.
  6. Type this sample code inside the <html /> tag:
    <html>
    <head>
        <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
        <title>Your first Web project</title>
    </head>
    <body>
    <div id="map" style="width: 400px; height: 300px"></div>
    <label for="latitude">Latitude:</label>
    <input type="text" id="latitude" value="59.942402"/><br/>
    <label for="longitude">Longitude:</label>
    <input type="text" id="longitude" value="30.293661"/><br/>
    <input type="submit" value="Show map" onclick=" showMap(document.getElementById('latitude').value,document.getElementById('longitude').value);"/>
        <script type="text/javascript">
            function showMap (latitude, longitude) {
                var myMap = new ymaps.Map('map'{
                            center:[latitude, longitude],
                            zoom:16
                        });
                     }
        </script>
    </body>
    </html>
                    

    Tip

    It is recommended that you type this code manually to experience coding assistance provided by WebStorm.

  7. Save the file by choosing File | Save All or pressing Ctrl+SCtrl+SCtrl+SCtrl+SCtrl+X, Ctrl+SCtrl+SCtrl+S or Ctrl+Shift+SCtrl+SCommand SCommand SCommand S.
  8. Run your application. Do one of the following:
    • Choose View | Web Preview, then select the desired browser from the list.
    • Click the desired browser on the browser toolbar:

      browserIcons.png

  9. In the page that opens in the browser, click the Show Map button. The Yandex map, that is displayed, shows the location of the IntelliJLabs office in Saint-Petersburg.

    web_storm_first_project_output.png
    Click thumbnail to view larger image.

See Also

Procedures:

Reference:

Getting Started:

Web Resources: