Text Editors for Web Design

You don’t need special software to create a webpage – all you need is a text editor and a web browser.

Try this: open Notepad in Windows and paste the following text:

<head>
<style>
p {
    color: blue;
}
</style>
</head>
<body>
    <h1>Webpage Title</h1>
    <p>This is a paragraph.</p>
</body>

Now, save the file as “example.html”
(the html extension is important)

Double click the file, and it should open in a web browser as a web page.


You’ll probably want a nicer text editor than Windows Notepad.

Notepad++ has a variety of extra features.
(notepad-plus-plus.org)

  • Colored syntax highlighting
  • Code completion
  • Multiple tabs
  • Multiple cursors
  • Code folding

At our school, you can install Notepad++ from the Company Portal.


Sublime Text is a great free text editor. You can use it to write code in any language. Many professionals use it for web development and programming.

sublimetext.com/download

You will want the portable version if you don’t have admin rights to install software.

Steps:

1) Download the portable version of Sublime Text

2) Make a folder in your C:\Users\your_user_name folder, probably naming it “Sublime”

Click your user name folder from there. Inside that folder, create a new folder named “Sublime”

3) Find your zip file of the Sublime Text files, and click “Extract All” put them into your new Sublime folder.

Click “Browse…” after you clicked Extract All.

Then click “Windows C:”, then “Users” then your user name folder, then “Sublime.” Click “Select folder” and then click “Extract.”

Now, go to a file browser and navigate to
C:\Users\your_username\Sublime folder.

Open the sublime_text.exe file, which has an orange/black “S” icon.

You should also right-click that file and “Create Shortcut” and put that on your desktop.

When the program is open, you can also right-click the program icon and say “Pin to Taskbar” to make it easy to open.

You should also change your options to make file extensions visible.

In your Folder Options, go to “View” tab and uncheck “Hide extensions for known file types.”

The file extension is the last part of the filename after the dot.
In “mydata.txt” the extension is “txt” which means it’s a text file.

You need to see those extensions (html, css, js, json, etc) so you can see the full filenames and rename them as needed.