Skip main navigation

Writing your code: The tools for the job

Article discussing the tools for writing code.
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:

A screenshot of Notepad and some HTML code as an example of a text editor

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++:

A screenshot of the interface for Notepad++ and some HTML code with , an example of a code editor. 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:

A screenshot of the interface for IntelliJ IDEA, with some HTML code, an example of an integrated development environment (IDE) Click to enlarge

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

IDEs Code editors
Visual Studio (Community Edition) Visual Studio Code
Eclipse Atom
Android Studio (for Android development only) Notepad++
NetBeans Sublime
JetBrains IntelliJ IDEA (Community Edition) Vim
Apple Xcode (for iOS development and it supports MacOS only) Emacs

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.

The graphic is a screenshot of the web-based code editor JSFiddle with some basic HTML. The output reads “Why not try JSFiddle?”.

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

This article is from the free online

Software Development Basics

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education