- Mac computer. Windows should work but I wrote my tutorial on a Mac.
- Patience. Quiet place. Comfortable working environment.
Download source code
**You can manage example source code with either SmartGit or simply Finder. Follow Option 1 if you are using SmartGit. If you are NOT using SmartGit, follow Option 2.
Option 1: If you have followed my previous post on setting up SmartGit/WebStorm/bitbucket
- So you have set up SmartGit/Webstorm/bitbucket by following the 1st part. You’ve created a text file for test and checked it into bitbucket.org with SmartGit successfully.
- Switch to SmartGit and you will see the folder.
- Stage and then commit the files.
- Skip to View, run, tweak and run an example source code.
Option 2: If you are NOT going to use SmartGit/WebStorm but manage the files as regular files on your Mac’s HD.
- You do not have directory ~/code/ yet. This was created earlier in my previous post on setting up SmartGit/WebStorm/bitbucket. So create directory ~/code/. You do not have to use the same name or path but I recommend doing so to make it easy for following the rest of the tutorial.
- Now you are going to create a project in WebStorm. Open WebStorm.
- File -> New Project from Existing Files
- For this scenario, I picked Source files are in a local directory…. This has not been a problem for me yet and I don’t think it will. And it is the easiest method.
- Click on Finish.
- After a minute, WebStorm will finish creating the project.
- Move on to View, run, tweak and run an example source code.
View, run, tweak and run an example source code
- Move your cursor to top right corner of the editor window (about 1 inch from top edge and 2 inches from right edge of editor window) and keep it still for a second or so.
- You will then see a row of small icons representing some web browsers. The options are Chrome, Firefox, Safari, and Chrome. Click on the icon representing Firefox.
- If above doesn’t work, go to View > Web Preview. Click on one of the icons representing the different web browsers.
- In WebStorm, edit an alert with something else. Save the file.
- You can refresh the Firefox to see the result. However I prefer staying in WebStorm and clicking on the browser icon to test in a web browser.
- Again, move your cursor to near top right corner of the editor, and keep it still for a second or so. You will see a row of small icons representing web browsers present on your Mac. Click the icon representing Firefox. FireFox should open TypeofExample01.htm with the change you added just now.
- Close out TypeofExample01.htm.
Create a new HTM file with js code
- At this point you may think you know how to create an htm file with js code. If you are new to web development, I can tell you with confidence that you probably don’t yet. I certainly didn’t. Let’s test it.
- Try to create a new htm file that does similar task as TypeofExample01.htm. It don’t have to open all 3 alert windows. Just one will do. It’s important that you try to do it from memory.
- Go to New -> File. Don’t pick HTML File yet. You can certainly use it when you are more experienced but if you are new to web development, pick File. You need to feel the pain of coding from scratch at least initially. No pain, no gain.
- Give TypeofExample01-my.htm for file name. Important to use the file name as shown. When asked to add file to Git, click No. Remember to check ‘Remember, don’t ask again’. If you are accessing Git repo in my tutorial, you should do so with SmartGit, NOT WebStorm. And if you are not using any Git repo, than no reason to try to add the file to Git.
- Double click TypeofExample01-my.htm to open it.
- If you are new to web dev, I’m pretty sure you won’t be able to type out a complete code.
- Don’t simply go and copy/paste the code. Try to TYPE in the code manually as much as possible. At this point you will realize you can’t do it. Don’t despair. We were all rookies at one point.
- You will reopen TypeofExample01.htm and have it side by side with TypeofExample01-my.htm.
- To view 2 files simultaneously easily, you can split Editor Tab vertically. Here’s how. Double click TypeofExample01.htm to open it.
- In WebStorm, go to Window > Editor Tabs > Split Vertically.
- Now you will see 2 Editor windows. In the left side, you will see TypeofExample01-my.htm and TypeofExample01.htm. In right side, you will see TypeofExample01.htm.
- You can close TypeofExample01.htm in the left side.
- In TypeofExample01-my.htm, start typing in the code that will do similar tasks that TypeofExample01.htm does. Try to look at the example code in TypeofExample01.htm just a line or 2 at a time. This exercise will help you learn how to actually create the code manually.
- Remember to open the completed TypeofExample01-my.htm by opening it in a web browser. Remember about hovering the mouse cursor in the top right corner of the editor window to open TypeofExample01-my.htm with one of the web browsers on your Mac.
- In my case, when I see an example code, I try to create another copy from scratch and save it with -my at end. Thus I have TypeofExample01-my.htm, next to TypeofExample01.htm.
Don’t feel discouraged