Writing your code: The tools for the job

In software development, picking a language is a bit like selecting the raw materials for a construction project. These raw materials have a great deal of potential, but it’s not until you break out your toolbox that you can unleash it.

In this course, we’ll be looking at HTML specifically, but before we suggest we start writing your code, let’s take a quick look at the kind of environments developers work in.

Programming environments

Text editors

Text editors, as the name suggests, are basic editors used to edit text files (including extensions such as .txt, .xml, .html, etc.). The most common text editor is Notepad, which comes pre-installed on most Windows machines:

Any text editor can be used to edit code. However, text editors are extremely basic, and there are advantages to using a code editor over a simple text editor.

Code editors

Code editors, on the other hand, are the supercharged siblings of text editors. They have been specifically designed to edit code and include features that provide visual cues such as auto indenting, bracket matching, or syntax highlighting (so you can easily identify variables, keywords, comments, strings, etc.) to make coding easier. Here is an example of a code editor, Notepad++:

Click to enlarge

While there are a few standalone code editors such as Notepad++, most are integrated with an integrated development environment (IDE).

Integrated development environments (IDEs)

If code editors are the supercharged siblings of text editors, IDEs are even more powerful.

IDEs are typically a collection of tools that you would use to code a code editor, text editor, folder structure, build automation tool, and debugger into a single program. If you’re using all these features, it makes navigation much easier: instead of having to open multiple programs, they’re all bundled together.

Here is an example of an IDE for web development, IntelliJ IDEA:

Click to enlarge

The following table includes some of the more popular code editors and IDEs:

You might think that it’s an obvious choice to use an IDE rather than a code editor, but code editors have their uses too. They tend to be easier to learn than IDEs and the smaller range of features and tools can be an advantage if you just need to focus on writing. Code editors are also usually less demanding in terms of resources, which is helpful if you don’t have the latest hardware or much space on your computer. As such, code editors are often ideal for small, simple projects and people who are learning to code.

Web-based development tools and environments

From a development perspective, HTML can be written in either a text editor or an integrated development environment (IDE) and then previewed in a web browser, which can be done locally or by using a server.

There are a number of great options if you are looking for a free online editor. For example, CodePen is a community-based web application founded by full-stack developers in 2015. It allows developers to test, demo, troubleshoot, and share their HTML, CSS, and JavaScript creations with others. It’s essentially an open-source online code editor and learning environment.

JSFiddle

You may already have your own preferred editor, but if you don’t, we suggest using JSFiddle for this course. You can use it online for free immediately and create an account for extra functionality at JSFiddle.net.

Spend some time exploring and experimenting with JSFiddle. And as any high-performing developer will tell you, make it a professional habit to ‘read the docs’.

Read: JSFiddle Docs [2]

Now that you know where you’re going to be writing your code, remember to work through all the examples and snippets that you will encounter throughout this course.

References

Robbins JN. Learning Web Design: A beginner’s guide to HTML, CSS, Javascript, and web graphics. 5th ed. Canada: O’Reilly Media Inc. 2018. JSFiddle Docs & Help [Internet]. JSFiddle; 2018. Available from: https://docs.jsfiddle.net