In the last video, we wrote our first HTML code using the standard text editor installed on our computers. Although this worked ok, it was not a comfortable experience and writing hundreds lines of code might become a nightmare. Why? Because these “normal” text editors are not specifically tailored to meet a web developer’s needs, these are just plain editors.

As a programmer, we work with multiple files in different folders with a lot of elements, classes and more. Again, don’t be afraid, we’ll dive into coding step-by-step, but as we already saw on apple.com, it’s probably not a secret that writing code can become complex.

The good news is: We have tools which make our lives a lot easier - Integrated Development Environments or IDEs. But how do they help us?

A quick note before we take a closer look at IDEs. In case we would be picky (which we aren’t), we would have to differentiate between two editor types - text editors and IDEs.

Even if a text editor was specifically made for developers and therefore offers features which help us to write code in a more convenient way, it still remains a text editor. A real IDE offers more, it comes with a lot of integrated features, for example to compile, debug or deploy code.

In the end, both text editor and IDE make the coder’s life easier and that’s currently the most important goal for us. Especially as there is kind of an hybrid solution available on the market: Visual Studio Code, which is a text editor with some IDE-like features already implemented (so actually a code editor, at least that’s what it’s called on the official website).

We will use Visual Studio Code for this series as it is easy to use, has a nice interface and is for free. And although it is actually not an IDE, let’s refer to it as such, just for simplicity reasons.

As the slide indicates, although an IDE offers a lot more, the core advantages are a better presentation of the code structure, an improved visibility of different code parts by automatically adding colors to the code and a comfortable file management.

With that, it’s time to download and install Visual Studio Code together.

Visual Studio Code is for free, so we can download it from the official website. After downloading and opening Visual Studio Code, the starting screen appears and should look something like this:

This is nice, but how can we now open our initial project from the last video (the index.html file) in our IDE? Hitting “Open Folder” and selecting the folder we saved the file to will do exactly that - display the content of the index.html file in the IDE.

And even at this stage, we can already see some of the advantages our IDE offers:
In the left part of the IDE, we can see the folder structure. In my case the project is located in a folder named “how-the-web-works” and inside this folder the index.html file is saved. With that, we immediately see in which folder we currently are, which files we added and we are additionally able to quickly navigate to other folders or to open other files (once we have more than one).

The actual code is also displayed differently, the content has a white font color, whereas the tags are indicated by the blue font. Although we did not write a lot of code as of now, this already looks a lot more organised when comparing it to the code in the “normal” text editor.

With that, we got our tools set and we are ready to start our first web development project. Let’s do that in the next part of this series!

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.