WebStorm 2016.2 Help

Create and Run Your First Web Project

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 | New Project on the main menu. The Create New Project dialog box that opens.
  2. In the left-hand pane, choose Empty Project.
  3. In the right-hand pane, specify the path to the folder to create the project in, for example, C:\MY_PROJECTS\JAVA_SCRIPT_PROJECTS\MyFirstWebProject, in the Location text box. 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
    Click Create, when ready.
  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>
  7. Save the file by choosing File | Save All or pressing Ctrl+S.
  8. Run your application. Do one of the following:
    • Choose View | Open in Browser, 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

See Also

Last modified: 15 November 2016