Setting Up TextEdit for LIS 458

Using TextEdit is a classic way to start coding on a Mac, but there is one critical setting you must change before writing a single line of code.

01_critical_setup

1. The Critical TextEdit Setup

By default, TextEdit tries to be a word processor (like Microsoft Word). For web projects, we need it to be a Plain Text editor. Before you write or save any code, change these settings or your browser won't be able to read your files.

  1. Open TextEdit on your Mac.
  2. In the top menu bar, click TextEdit > Settings (or Preferences on older Macs).
  3. Under the New Document tab, select Plain text.
  4. Under the Open and Save tab, make sure the box "Add .txt extension to plain text files" is UNCHECKED.
    • Why? If this is checked, your file might end up named index.html.txt, and your subdomain won't recognize it.
02_saving_correctly

2. Saving Your Files Correctly

When you are ready to save your work:

  1. Go to File > Save.
  2. Name your file (e.g., index.html).
  3. If Mac asks "Use .html or .txt?", always choose Use .html.
03_live_edit_cyberduck

3. The "Live Edit" Trick with Cyberduck

One of the best things about Cyberduck is that you don't have to keep dragging and dropping files every time you fix a typo. You can edit your files "live" on the server.

  1. Connect to your server in Cyberduck.
  2. Right-click on your index.html file (or any file you want to change).
  3. Select Edit With > TextEdit.
  4. The file will open in TextEdit. Make your changes.
  5. Press Command + S to save.
  6. Cyberduck will detect the save and automatically upload the new version to your subdomain.
04_organizing_subdomain

4. Organizing Your Subdomain

Since you have multiple folders (like css and images), your TextEdit files need to know where to look.

  • In your HTML code: If your image is in the images folder, your code should look like: <img src="images/myphoto.jpg">
  • In FileZilla/Cyberduck: Ensure that the folder named images is in the same location as your index.html.
05_smart_quotes_warning

Watch Out: Smart Quotes

TextEdit will sometimes turn straight quotation marks (" ") into curly "book-style" quotes (" "). Web code only works with straight quotes. If your images aren't showing up, check your code for curly quotes and replace them.

Hot Tip: If you find TextEdit a bit frustrating as your project gets bigger, most students eventually switch to a free tool called VS Code or Sublime Text. They highlight your code in different colors so it's much easier to spot mistakes!