Getting started with web development can seem overwhelming at first, as there are so many choices, for everything. This article is the first of a series that I plan to write on getting started with web development on Windows. The topics covered will be:
- Choosing an editor
- Tooling: node, bower, yeoman, etc.
- Useful libraries
- CSS preprocessors: LESS/SASS
Through these articles, I will try to share my experience with web development so far, show different options and explain the choices I made.
The big jump
Through this article I will try to give some paths to help you set up a convenient environment to start developing web sites.
The focus of this article is not to give training on the technologies. There are a lot of excellent resources on the web; if you wish to get a structured training, I strongly suggest that you visit Pluralsight.
Where do I put my code?
As you will have to type your code, you will need some kind of a text editor. This editor can take many forms, from the simplest to the most complex, online or offline.
One of the great things about web development is that a lot of things are available directly online. If you just want to try yourself out, an online editor can do the job. As for everything related to web development, you will soon discover that you have options. Here are some online editors:
- plnkr: quickly get started, reference external libraries, add files, etc. My favourite.
- jsfiddle: very practical user interface.
- jsbin: quickly get started. Also allows you to actually create sites outside of an iframe.
- CodePen: front-end oriented. Great for browsing exisitng projects.
- tributary: data visualization oriented, with embeded reference to d3js
Online editors offer the great advantage that you do not need to install anything on your computer. You just get there and BAM! you’re good to go.
Once you will get into more complex scenarii, you will most likely want to have your files at hand, structure things, or you will want to be able to work while offline. Here again, you have the choice between different interfaces:
- Notepad: as all files are pure text, an editor as simple as Notepad can do the job. Embedded directly in Windows. This is just to mention, don’t even.
- Notepad++: for a more advanced experience, Notepad++ provides syntax highlighting, code completion and IntelliSense. It also allows you to work with projects. It is not a web-specific interface, and does thus not provide all functionalities that other offer.
- Brackets: Lightweight, free, open-source IDE (Integrated development environment) for the web. Depends on node.js. Has a very wide library of plugins. Can be extended at will. My second favourite.
- Atom: free, open-source IDE for the web. Tried it for a while, but was not convinced
- Sublime Text: IDE for the web. Pretty popular in the community. Never used it myself. Free for testing, $70 for continued use.
- WebStorm: IDE for the web. Very popular in the community (I mean, I must be the only one not using it). Never used it myself. Free 30-day trial period, €49 for continued use for individual developer
- Visual Studio: global IDE. Provides tools for web development, but also C/C++/C#/VB.NET and many more support. Has a wide library of plugins. Heavy due to the fact that it does a lot of things, but very powerful. Free editions (go for community) as well as purchasing one. My favourite despite its weight *sigh*. Only available for Windows
- Visual Studio Code: brand new cross-platform editor from Microsoft. Just installed it, I will elaborate on it after testing.
You can find an explanation about editors and IDEs on John Papa’s blog.
As can be seen, selecting an editor is a first hard choice. Whether you want to quickly get started or want to invest more time, all kinds of possibilities are offered, and there is always a match to suit your needs. Your choice can also be guided by the amount of money you want to invest. This vast choice is a constant in the world of web development, as you will discover.
My personal favourites are:
- plnkr for online editing/interaction with stack overflow
- Brackets for quick code review/reading code pulled from github/contributing to external projects (check John Papa’s blog article for a list of useful Bracket extensions)
- Visual Studio for my personal work/projects
My best advice would be that you take a look at those different options and choose the one that suits you better. Also, try to learn as much as you can from the editor you choose, so that you can improve your productivity. Whatever the editor, mastering it will matter more than the editor itself.
In the next article of this series, I will talk about the surrounding tooling for web development (node, bower, yeoman, etc.).