Setting Up an IDE

What is an IDE? Why use? How use?

In my last thing (what coding is and how to start learning), I said I was going to write about how to use HTML next, but then I realised that people might not know how to set up an environment to code in. So I figured I’d cover that first and do the HTML stuff after. Gotta have a place to put your HTML before you can use it!

Here are some links to online and offline IDEs you can try:

ONLINE:

• glitch
• codepen (projects are called “pens”, so to start a new project you need to start a new pen).
• jsbin (projects are called “bins, so to start a project you need to start a new bin. haha)

OFFLINE:

• visual studio code (aka VScode)
• atom (the favourite before vscode took over)

As always, thanks for reading! I hope it was helpful for you in some way :)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Transcript for anyone using screen readers :)

Setting Up an IDE

IDE stands for “integrated development environment”. It’s a term for an application that is specifically designed to making coding a more efficient process, unlike “normal” text editors, which are more for general word processing and documents.

Types and Workflow

There are online and offline IDEs. Online IDEs tend to look like this:

Alt text: Diagram of computer screen showing an IDE.

Image Description: A diagram showing an IDE. A computer window is split up into three panels horizontally. The left panel is labeled “nav bar” and has a list of options (HTML, CSS, JS, assets and help). The second panel is labeled “section for writing code/editor” and shows some HTML which will display “hello world!” to the browser screen. The third panel is labeled “section where code result is displayed” and shows “hello world!”.

Everything you need is on the same page and most can auto-update/auto-run your code, which means you can see the effect of the changes you’re making in real time.

Alt text: An animated diagram showing that when “hello world!” is typed into the middle panel, “hello world!” shows up on the right panel a few moments later.

Image Description: A short animation showing a screen split horizontally into three panels. The first panel is a navigation bar showing HTML, CSS, JS, assets and help. The second panel shows “hello world” being typed into a HTML tag. Once “hello world” has been typed into the second panel, it appears a moment later in the third panel.

Offline IDEs are different in that they’re for “coding only” — to see what the code “looks like” (in other words, the result of what you’ve coded), you have the open the file in a browser.

Alt text: A diagram showing an offline IDE workflow.

Image Description: A computer screen showing two windows side by side. The window on the left is an IDE, while the window on the right is a browser showing a coding file.

So rather than typing and having changes instantly updated, you have to save your file in the IDE then refresh your browser. It might seem like offline IDEs are more cumbersome to use than online IDEs, but that’s not necessarily true. Offline IDEs tend to have way more features than online ones, like:

Syntax Autocomplete: Just like normal autocomplete, but with syntax instead of every day words.

Syntax Highlighting: Where any syntax that matches what you’ve selected is highlighted too.

Debugging: A tool that helps you isolate parts of your code in order to figure out where it isn’t working and why.

Multiple Code Windows: The ability to have multiple coding windows open at the same time. Nice for comparing different project versions, or if you’re learning from another project.

It’s unlikely that you’ll use just one type of IDE throughout your entire coding journey. Different IDEs are nice for different things, and what you want in an IDE might change from project to project. Try a few out, play around, and don’t feel like you need to commit to an IDE or workflow.

Great, how do I set up an IDE?

For online IDEs:

• Go to the IDE’s website
• Start a new project (all IDEs have different navigation but the same options, so there will be a button for this somewhere.)
• Start coding! (Don’t forget to save! Some online IDEs will need you to sign up to be able to save.)

For offline IDEs:

• Go to the IDE site
• Download and install IDE
• Open and start a new project
• Save your project as a .html file
• Open a browser window and drag the file into it (or copy the path from the IDE and paste it into the browser).
• Don’t forget to save the file (in the IDE) and refresh your broswer after you make changes! If you don’t, the changes won’t show.

Here are some links to online and offline IDEs you can try:

Online:

• glitch
• codepen (projects are called “pens”, so to start a new project you need to start a new pen).
• jsbin (projects are called “bins”, so to start a project you need to start a new bin. haha)

Offline:

• visual studio code (aka vscode)
• atom (the favourite before vscode took over)

Note: before deciding on an offline IDE, don’t forget to check that it’s compatible with your operating system. The ones listed here are compatible with any OS except for Chrome OS (for Chrome you can use things like Caret).

As always, thanks for reading! I hope it was helpful for you in some way :)