Web Development Setup for Beginners

 by Robin Wieruch
 - Edit this Post

A question that comes to mind for every web development beginner: How to set up my web development environment as a web developer? The following guides have you covered, because they will teach you how to set up a minimal web development environment for MacOS or Windows. Even though you will start out with HTML, CSS, and JavaScript as a web development beginner, learning React mostly comes right after these technologies. Hence both guides come with instructions for React as well, however, if you don't care about React, just leave it out.

Setting up your development environment all by yourself is your first challenge as an aspiring web developer these days. It's challenging, with lots of searching on the internet involved, however it will stress you which forces you to improve your core skills and grow as a developer. While many people find setting up tiresome, I hope it sparks some joy for you, because web development is all about tooling and coding. There are many web developers out there, me included, who refine their tooling all the time. So I hope you get excited about this process as well.

Essentially, there are two different philosophies that define your setup as a web developer. While there are developers who prefer to have all their tooling in one Integrated Development Environment (IDE), there are developers who prefer to use multiple lightweight tools (e.g. editor/IDE, standalone terminal) and combine them for their purposes.

Personally, I follow the latter philosophy (see guide above), because it gives me more flexibility. However, for beginners to web development, I recommend using one tool (IDE) to rule them all. The IDE (e.g. VS Code) combines everything that is needed for coding (editor) and executing the code (integrated terminal).

Below you will find both guides for MacOS and Windows to set up a minimal web development environment. As I said, if you are not interested in React (yet), just skip these sections. However, even if you start out with just JavaScript, I encourage you to check out React on the side:

Continue Reading:
Continue Reading:

Both setups show you how to install the following tools. Here comes the gist of what's needed and why it's needed:

  • Node.js and NPM
    • executing JavaScript code
    • installing JavaScript libraries
  • VS Code
    • editor to write code
    • integrated terminal to execute code

That's everything you need: Node/NPM + editor/IDE + terminal (also called "the command line"). I hope these guides help you to get started!

Keep reading about 

The previous tutorials have shown you how to set up a basic web application with Webpack 5. So far, Webpack is only used to bundle all your JavaScript files, to transpile new JavaScript features via…

In this article, you will find a step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.