START A COURSE

The HTML and CSS Blog:

What You’ll Learn in this HTML Lesson

what is a text editor bunnyIn this HTML lesson I’ll cover the very basic question of what program you’re going to be using to write all of this code, the text editor.  I’ll also touch on why you shouldn’t write your HTML code in MS Word, or other word processors.

What Is a Text Editor?

A Text Editor Is a Simple Program That People Use to Write Code

There are many fine free text editors available. You can download a free text editor for Mac or Windows, and then hand-code to build web pages. Downloading and using your text editor is the first step to learn HTML and follow the lessons on this site. The bottom of each lesson includes one easy activity for you to practice your new skills. All you need is a text editor and a web browser to preview your work.

text editor learn html success kidAll kinds of coders use text editors, not just HTML programmers. You can write HTML, CSS, PHP, JavaScript, or other languages with a text editor. If you are using the text editor to learn HTML by practicing these tutorial lessons, make sure you save the files you create with an extension of .html. The file extension helps the web browser know which programming language you are using.

Wait, now that you know what a text editor is, I know what you’re thinking: you’re thinking of writing your HTML in Word. Don’t do it!

Writing HTML in Word

The problem with writing HTML in Word is that Word is using all kinds of formatting behind the scenes. When you try to save that document, even if you save it as HTML, you get some messy code, with ugly errors.

Moreover, most text editors these days will highlight parts of your code. When it is written properly, the highlighting will make it much easier to read. When you have errors, it won’t highlight properly. This makes the errors much easier to spot.

Text editors are small programs that take up little space, and there are plenty of good ones for free. A good text editor will include options to help you code more comfortably, such as color coding, increasing font size (make sure you can see the code!), search, line numbers and other useful aids.

What makes Sublime the all-time best text editor?

Some things are worth paying for. Sublime is not free, but it’s such an excellent text editor for coding that it’s well worth the low cost. (It was $70 the last time I checked). You can download and try out Sublime for free to see if it’s worth the cost.

Sublime is a Sublime Text Editor

Sublime is a Sublime Text Editor

www.sublimetext.com

Fabulous color-coding

The color coding in Sublime is so outstanding, it makes it really easy to catch errors just because they are the wrong color. Sublime uses a dark grey background (most text editors use a white background), with bright colors for various parts of your code. As soon as you use Sublime you will realize how lame it is to have text editors with white backgrounds—it’s so much easier to see the code colors against dark grey.

Powerful code-hinting

Sublime also offers powerful code hinting that makes it super-fast to code, and helps when you can’t remember everything, or type poorly.

Which Free Text Editor Should I Use?

What if you want to try a free text editor? Maybe you’d like to test-pilot a free text editor, and consider buying the best test editor later on. There are many free text editors available. Here’s a pair of simple and free text editors that I’ve used, one for Mac and one for Windows, good for ease of entry.

Free Text Editors

Free Text Editor for Mac: TextWrangler

www.barebones.com/products/textwrangler/

TextWrangler is the “little brother” to BBEdit, one of the leading professional HTML and text editors for the Macintosh.

Free Text Editor for Windows: TextPad

www.textpad.com

Free Text Editor for Windows or Linux: Notepad++

NotePad++

Do you have a text editor that you prefer to use? Tell me all about it in the comments.

Brain Snack: You try it!

Learn HTML with this Activity: Download a text editor and try it out!

See if you can locate options in your text editor to help you code easily. Can you view line numbers, change the code view size, and preview in a browser? Try locating the find feature.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.