Full Stack Web Developer Environment Setup For Windows
Here’s the complete setup guide for beginner web developers. I will cover the following things:
- Tools &
N.B. :- I am not forcing you to use these software if you have an alternative you can use it.
Browser: Windows comes up with the preinstalled browser like Microsoft Edge. But speaking honestly, we don’t care it enough. So we install an alternative browser. So my recommendation is Google Chrome.
Editor: There are several text editors/code editors. But some of them only can satisfy the workflow. A good code editor according to me will have following features: autocomplete code, a sidebar of project files, split layouts, various language support.
I have been using sublime text for code editing for long, but sublime text sometimes can’t meet my requirements. In the sublime text, it fails to detect language from the file extension, autocomplete doesn’t work when you write HTML code in a PHP file.
So I will recommend Visual Studio Code as it’s open source. And you can write code in almost all language. The code editor can be extended by installing plugins available in the store inside the editor itself.
Download: Visual Studio Code
IDE: To develop a website in JAVA or PHP using object & class you need an IDE for that. I know beginners will skip it but, the approach of object-oriented programming is good enough to tackle security issues. So, I mostly use NetBeans IDE for Java development.
Download: Latest NetBeans IDE
Tools: We will divide tools section into 3 parts:
- Backend Tools
- Frontend Tools
- Other Tools
Backend Tools: Backend tools are must to develop a dynamic website. For PHP developers, to create a localhost in your system, you need to install apache server, PHP & MySQL. Don’t panic, the process is easy. Just install Xampp(recommended) in your system and install it. After installation, run start Apache & MySQL.
For JAVA developers, Apache Tomcat is popular for the database connection. Tomcat installation process: http://tomcat.apache.org/
Fronted Tools: There is a large number of frontend tools to design a website. But most of them don’t work just like the way you want. Drag n Drop website design tools are available for free, but soon you will start hating them. I will recommend a very popular framework, most of you may familiar with it, is Bootstrap.
It’s not a software to install, but you can install a software called Bootstrap Studio by spending $25. But, is that really worth it? If you can use bootstrap FREE by gaining some knowledge of it, you shouldn’t bother about, isn’t it?
A sample website designed in bootstrap:
Other Tools: Other tools includes FTP client, color picker, SVG designer etc.
- FTP client: FileZilla is best for file transferring to the remote host. Download here.
- Color Picker: For Windows, ColorPic is a good solution. Download and install it.
- SVG design tool: Inkscape is the best solution for designing SVG in windows.
Tips & Tricks:
- To speed up my web development process I use Bootstrap. This really helps me to design web pages not only attractive but also boosts my speed.
- I use Browser Sync Gulp. That helps me to save my time. When I save a file in the code editor, it does automatically sync with the browser, so that I don’t have click on the refresh button manually.
Softwares at a glance:
Enough for today. Still have doubt? Let me know in the comments. Signing out.