Code Editors 101 with Sublime Text

code-editors-101-with-sublime-text-400-200

Post Tags

In the following post we’re going to dig into the essentials of working with a code editor. We’ll be using this post as a reference source for anyone jumping into one of our courses who many not already be familiar with code editors.

Building websites requires working with lots of code, so your first step is to find the best tools for writing and wrangling that code. Technically, you can write HTML in a bare-bones text editing program like Notepad for Windows or TextEdit for Mac, but it’s much easier to work in a real code editor.

The following are some features a code editor provides that a regular text editor won’t.

Feature 1: Syntax Highlighting

Code editors are programmed to detect various terms and symbols used in coding languages and color-code them accordingly. This magic is called syntax highlighting.

Feature 2: Line Numbers html-line-numbers-in-sublime

Code files can grow to be hundreds or even thousands of lines long, making line numbers a useful feature of code editors. Line numbers especially come in handy when you are working with other people (e.g., “Hey Grace, I think I found the problem! Try putting a closing div tag on line 124.”). Also, some browser-based developer tools reference line numbers when pointing out errors.

Feature 3: Editing Multiple Files

A website is rarely made of just one single file so code editors allow you to open multiple files in tabs, making it easier to switch between various aspects of your project.

Syntax highlighting, line numbers and managing multiple files are just a few of what we think of as necessary features that every good code editor has, but as you explore you’ll discover lots of other built-in goodies.

Picking a Code Editor

There are many code editors to choose from, but our current favorite is Sublime Text. Sublime is snappy, full of features and available for both Mac and PCs.

To grab a copy, head over to the download page: Download Sublime Text

Window users: On the Sublime download page you’ll see two options: regular (34-bit) and 64-bit. If you’re not sure which version you have you can follow the instructions here to find out…

Once you’ve got your editor up and running, let’s do a walk-through of the features we mentioned above: line numbers, syntax highlighting, and a few other tricks.

Your first webpage

Now that you’re situated with your code editor, let’s look at creating, saving and viewing a webpage.

Summary

  1. Create a new file in your code editor.
  2. Type “Hello World” into that blank file.
  3. Save your file to your computer:
    • End your file with the extension .html.
    • Your file name should start with a letter.
    • Your file name should contain only letters, digits, hypens and underscores; no spaces, other punctuation, or special characters.
  4. Open the file in your browser by finding it in the folder you saved it in and dragging it to the browser window.

Working Locally

By saving your file to your computer and running it from there, you are doing what is called working locally. The benefit of working this way is that your work-in-progress is hidden from public view. The downside, for right now, is that once you’re done, only you can see the site. Given this, as you progress, you’ll eventually want to move your files to a web host where it will be publicly acessible.

Conclusion

You’ll be spending lots of hours in your code editor, so being familiar with its features and customizing the interface to your liking is time well spent.

If you want to dig even deeper into Sublime Text, we reccomend the following guide: Sublime Text Unofficial Documentation.

Comments are closed.