WebStorm 9.0.2 Web 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 | 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>
  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: 11 December 2014
comments powered by Disqus