I'm a designer and self-taught web developer who has been working professionally in the field since June, 2014. I'm going to write about the programs, and tools I use on a daily basis with some brief descriptions and alternate options. I'll try and update this post as my setup changes.
It doesn't really matter what you use: Mac or Windows. Vim or Emacs. Tabs or spaces. PHP or Python. If all the options didn't have merit, there wouldn't be an argument. This list is not meant to be an endorsement for or against anything, just one person's web development workflow. Learn. Be open minded. Try new things. Research. Discover what works best for you. This is not an extensive list; this is my list.
"The program used to write code and edit text files."
I use: Visual Studio Code / VS Code
Starting with the default text editors on Mac and Windows (TextEdit and Notepad respectively) I briefly used TextMate on Mac where I discovered the benfits of syntax-highlighting for the first time. After that I used Sublime Text on both platforms for several years and enjoyed plugins and extensions through Package Control.
Then it seemed as though Atom and VS Code came along at the same time and offered a sleek modern experience focused on writing code. Both are well-loved by the web development communities but I opted for VS Code and haven't looked back. I don't currently use an Integrated Development Environment (IDE) but I've been itching to try Coda for years (I hear the developers are working on a successor called Nova.)
All extensions are installed by going to
File > Preferences > Extensions.
- Beautify - formatting and indentation for files.
- Dank Neon - a neon-inspired theme I enjoy.
"The Git repository hosting service used for keeping track of revisions and collaboration."
I use: GitHub
GitHub is easily the most well-known place to host public and private Git repositories. Depending on what you want to do with private repositories, other options might be better or cheaper. GitHub doubles as a web development portfolio and resume and industry-specific social media.
"Extends the features of CSS and compiles it back into CSS."
I use: Sass
A preprocessor is a program that takes a bit of code and compiles it into a different bit of code. In the case of CSS preprocessors, we’re compiling the Sass language into regular old CSS that the browser can interpret. I like having the ability to define variables, nest, create loops, and organize my project into multiple files, all of which and more I can do with Sass, specifically the
.scss extension. I started with LESS, but as Sass grew in popularity, I switched over and now prefer it.