Setting up the environment

Go back to HTML and CSS Index

To get started with web development, there are a couple of things we need to download and/or set up:

Tools

First of all, we need a code editor. We could just use Nodepad (Windows) or TextEdit (Mac) but since debugging is a bit easier with a 'real' code editor, I suggest we work with one of the following:

In my personal opinion, all of these code editors are great as they come with functionalities and packages that make coding much easier.

Next up, we need at least one browser. You already have one installed on your computer - otherwise you wouldn't be able to visit this page but when working with web development, one is rarely enough. When developing websites, we need to test the pages in multiple browsers - and on multiple devices - to make sure that our website looks as it should. Why? Because browsers don't always treat the markup or understand the style instructions in the same way.

Here is a list of the browsers I suggest you download and install:

To get the files online, we need a domaine and web hosting. We don't need it right now as we're just getting started but we will once we want our website to come online. There are several options out there, but I suggest you choose one of the following as they are easy to work with:

And last but not least, we will need a file transfer tool to upload our webpages to the server. We don't necessarily need it right now but we will once we want our website to come online. Some code editors actually have this "feature" while others don't - in any case, it is good to know at least one, so the one we will be using is:

When working in groups, it is nice for everyone to have access to all files at all times but keeping track of files can be difficult if you don't use a git repository hosting service. We are not going to dive into the sea of git repository hosting services at this point but feel free to look into it yourself:

Next up

We now have all the things we need, but before we start coding, let's have a look at what goes on behind the scenes when we're browsing on the Internet. Next up: How the Internet Works