If you are a web developer then you must be aware that how fast the technology and tools are changing in web development field. As a full-stack web developer I am fully aware of it and always try best to accommodate myself with recent developments and changes.
With over 8+ years of extensive experience in web application development, I have seen many new tools being constantly adding to the workflow of web development. There are many tools we need to know in order to survive in this rapidly changing industry where the survival will be only for the best and smart people.
Following is a list of tools I use most of the time in order to speed up my development and for better code writings. I am sure you will have yours and it can be better than mine but the purpose is to just encourage every developer to see and check their list if there is anything need to be added.
For a website, there are two sides. One side is for back-end interaction which we call server side and I use PHP language for this purpose which is very popular and being used by many giant companies including Facebook and WordPress.
Although I have studied Visual Basic, ASP.Net, C++ and Java programming languages during my Master degree back in 2007 and all those are very powerful and have unique features, but I loved web development field and for that PHP was best choice at that time and even is now.
The second side of any web page is called front end which shows the front design where we see all the actions or result on the browser and this side is built using HTML, Javascript and CSS.
PHP
PHP is very popular server side scripting language, especially suitable for web development.
Frameworks: There are many frameworks in PHP which gives us some very fundamental features and functionalities and help us to work in a better and fast way. I use these two.
CodeIgniter 3x
Laravel 5x
Javascript
For client side, Javascript is used to communicate with HTML and server.
Libraries: Here is a list of some powerful javascript libraries I love to use.
jQuery: A fast, small, and feature-rich JavaScript library.
BackBoneJS: Give your JS app some backbone with models, views, collections, & events.
React JS: Facebook’s Javascript library developed for building user interfaces.
jQuery UI: A curated set of user interface interactions, effects, widgets, and themes.
jQuery Mobile: HTML5-based user interface system designed to make responsive web sites.
HTML5 & CSS
Bootstrap: HTML, CSS, and JS framework for developing responsive web applications.
Semantic UI: A development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Skeleton: A dead simple, responsive boilerplate.
Less: which stands for Leaner Style Sheets, is a backwards-compatible language extension for CSS.
Fonts and Icons
Font Awesome
Glyphicons
IconFinder
Fontello
Icons8
Text Editors
Text editors are used to edit and create code files. We can edit or create CSS, JS, JSON, XML, PHP, ASP or even any programming files using these editors. A simple text editor can be a notepad and Dreamweaver and Netbeans can be more advanced and rich featured text editors. It depends what you need at the moment.
For me, I have used many editors over the years but I feel more comfortable with Dreamweaver and sometimes use Netbeans and few others. These are few I like.
Sublime Text
Dreamweaver
NetBeans
Atom
Local Dev Environments
To run a PHP based website you need to install Apache, MySQL & PHPMyAdmin on your machine. So based on which OS you are using one of the following can be installed.
Web Browsers
Chrome
Internet Explorer
Firefox
Opera
Safari Mac
Collaboration Tools
Project management tools are essential for bigger projects which helps developers to collaborate and work easily on a project. It helps to meet the deadline and monitor the status of a project.
There are many famous tools out there and each has their own benefits and features.
Module Bundler & TDD
Webpack: A module bundler for modern JavaScript applications.
PHPUnit is for Test Driven Development.
There are many more tools and browsers extensions & resources which I use while working on web projects and will definitely update this post time to time.
Please feel free to add yours toolkit in comments to let me know what you are using. :)