Web Development Tools

Web development is a wide area of study with many deep areas of specialty. My focus here is primarily front-end development, and web design. Here's a quick stab at tools I've used in that pursuit. This is a tiny distillation of the tools available in a field that evolves very quickly. There are many ways to do this so don't trap yourself in my preferred toolset only.

Browsers

Browsers are what people use to visit a web page. They used to be on computers only, but now appear on web-enabled phones, tablet computers, and more. Perhaps the best starting point is looking for current browser usage stats and resolving to cater to the browsers representing the primary user segments. Focusing on the main browsers, such as Firefox and IE currently, is time well spent. There are too many browser variations to list here, so I'm not going to even try. That said, here's the list that I've seen most frequently in various logs.
  • Chrome
  • Edge/IE
  • Firefox
  • Safari
  • Opera


Developing HTML, JavaScript, CSS

HTML, JavaScript, and CSS are plain-text--as such you can create them with tools as simple as Notepad (the editor that comes with Windows). If you want some help developing more complicated layouts, color schemes, and graphical interfaces you may want to consider a WYSIWYG such as Dreamweaver.

JavaScript libraries and frameworks can provide power ups ranging from shortcuts and visually appealing power ups like animations to complete departures from standards-based web development techniques. The "best" ones find a balance between trapping you in an ecosystem with no governance and a short shelf-life on one end and robbing you of long-term value in your web development journey by abstracting away valuable learning into config-based development cycles. This is an area of great power, and great responsibility--tread cautiously and watch out around folks who talk fast and loud about the framework they're being paid to hype. jQuery is one such library/framework (the distinction is an interesting debate if you arguably the most popular of these frameworks currently.

Developing graphics

Photoshop has been the standard graphics package at many of the companies I've worked for. However, it's pretty expensive. Personally I'm fond of Paint Shop Pro, which is another for-pay product, but which has served me well over the years. GIMP is another great graphics program, and it's free! (Thank you GIMP folks!!)

FTP, SSH, SCP

These help you get your HTML from the place where you are building, editing, and testing it into the place where your users will consume it (on the web). FileZilla and CuteFTP are FTP clients I've used in the past. SSH is more secure. I've used Putty as an SSH client, though there are many other clients developer friends swear by. WinSCP is a client I use for transferring files via a more intuitive drag and drop interface--something more like what you see in Windows environments.

Analytics, Monitoring

It's very important to be analyzing your efforts. If you don't implement and regularly investigate tracking you will be missing out on some very important information. Google Analytics is a great third party tracking product. I also love StatCounter. These two services use JavaScript and/or HTML to make requests to a remote server to collect basic information such as the name of the page and the browser user agent string to help your understand what is getting traffic and which browsers you need to be including in your testing process.

Another important aspect of web maintenance is monitoring. One I have used is Mon.itor.us which provides alerts and uptime reporting to help you keep track of your web host's availability and reliability.

There's More

This list is by no means exhaustive. If it's useful I'll work to keep it current and add additional resources over time.