Introduction to IDEs
Before diving into HTML, CSS, and the other languages in this book, it helps to know about the tools developers actually write code with. You could write code in the simplest program on your computer, a plain text editor, like Notepad. That works perfectly fine for a small file. But this lesson introduces the tool most real developers reach for once their projects start growing bigger.
What IDE stands for
IDE stands for Integrated Development Environment. That is a long, formal name, so let's break it into plain words.
An IDE is really just a fancier, smarter version of a plain text editor, built specifically for writing code. It is "integrated" because it bundles many helpful tools into one single program, instead of you needing separate ones.
Think of the difference like this. A plain text editor is like a blank sheet of paper and a pen. An IDE is like a fully organized desk, with labeled drawers, good lighting, and tools already laid out exactly where you need them.
What a typical IDE window looks like
Below is a simple illustration of what most IDEs generally look like. It is not a real screenshot of any specific program, just a plain drawing to show the common parts.
- The strip on the left is the file explorer, showing every file in your project, like a table of contents you can click through.
- The colored lines on the right are your actual code, shown in different colors depending on what each part means. This is called syntax highlighting, and you will see it throughout this book's own built-in editor once you reach the hands-on lessons.
- Most IDEs also include a terminal, a small text-based control panel usually shown near the bottom, for typing commands directly to your computer.
What an IDE actually helps with
- Coloring your code. As shown above, different parts of your code get different colors, so it is easier to read at a glance.
- Pointing out mistakes. Many IDEs notice small errors, like a missing closing tag, and quietly point them out before you even run the page.
- Organizing many files at once. A real website is usually made of many files working together, like several HTML pages, a CSS file, and a JavaScript file. An IDE shows them all together in one place, like a filing cabinet you can browse through.
Try it for real, on your own computer
You do not need to do this to continue the book. Every lesson's built-in editor still lets you practice fully in your browser. But whenever you are ready, here is how you would get started with a real IDE.
- Download and install an IDE.
- Open it, and create a new file.
- Save the file with a name ending in
.html, which is what the HTML section of this book will teach you to write. - Write some HTML in it.
- Find the saved file on your computer, and double click it, so it opens in your browser.
The next lesson looks at exactly why that extra bundle of tools is worth using in the first place.
Check your understanding
What you learned
- An IDE is a program built specifically for writing code, more powerful than a plain text editor.
- IDE stands for Integrated Development Environment.
- A typical IDE window has a file explorer, colored syntax highlighting, and often a built-in terminal.
- An IDE helps by coloring code, pointing out mistakes, and organizing many files at once.