Setting Up Notepad for LIS 458

Notepad is the built-in plain-text editor on Windows and a classic way to start coding. There is one critical step you must follow when saving files so your browser can read them correctly.

01_critical_setup

1. The Critical Notepad Setup

The good news: unlike TextEdit, Notepad is already a plain-text editor — no settings to change before you start. The bad news: Windows will try to add a .txt extension to every file you save, which will break your web pages. You must tell Notepad to save as All Files every time.

  1. Open Notepad on your Windows PC (search for it in the Start menu).
  2. Write your HTML code.
  3. When saving, go to File > Save As.
  4. In the Save as type dropdown at the bottom of the dialog, change it from Text Documents (*.txt) to All Files (*.*).
    • Why? If you leave it on "Text Documents," your file will be saved as index.html.txt and your subdomain won't recognize it.
  5. Type your filename including the extension (e.g., index.html) in the File name field.
  6. Click Save.
02_saving_correctly

2. Saving Your Files Correctly

Every time you save an HTML or CSS file in Notepad, follow these steps:

  1. Go to File > Save As (not just Save, the first time).
  2. Set Save as type to All Files (*.*).
  3. Type your filename with the correct extension (e.g., index.html or style.css).
  4. Once the file already has the right extension, you can use Ctrl + S for subsequent saves.
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 > Notepad (or whichever editor you prefer).
  4. The file will open in Notepad. Make your changes.
  5. Press Ctrl + 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 Notepad 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_encoding_warning

Watch Out: File Encoding

Older versions of Notepad default to saving files in a format called ANSI instead of UTF-8, which can cause strange characters to appear in your browser. When you do File > Save As, check the Encoding dropdown and make sure it is set to UTF-8.

Hot Tip: If you find Notepad a bit frustrating as your project gets bigger, most students eventually switch to a free tool called VS Code or Notepad++. They highlight your code in different colors so it's much easier to spot mistakes — and they handle the file-extension problem for you automatically!