The best thing about web design, at least in my humble opinion, is that unlike other design ventures, you don’t need to purchase expensive software to create it. All you really need is a simple code editor which is basically just a text editor on steroids. There are many options out there that are open-source (free to use) so as long as you know where to look. If you are a Windows person, a good option is Notepad++ which boasts to be Notepad’s more powerful, code editing big brother.
The following will show you the steps for downloading, installing, and configuring Notepad++. If you are following along in my Web Design for Graphic Designers lessons, this tutorial will make Notepad++ as much like the TextMate application I will be using during the course of the class.
I’ve broken this tutorial into three short sections:
Getting and Installing the Software
Step 1: Vist the Notepad++ website and click download from the site navigation on the left side of the screen. It’ll look something like (fig. 1).
Step 2: From the download screen you’ll need to click the large green download button. (fig. 2).
This will launch a pop-up that will ask if you would like to save the file. Click Save File. (fig 4)
Step 3: You’ll need to locate the file you just downloaded and double-click it to begin the installation. (fig. 5)
Another pop-up will appear letting you know that this is a program that has been downloaded from a publisher your computer doesn’t recognize. Don’t be concerned, this is often the case when you download software from the internet. Your computer is just trying to protect you from any viruses so it’s best to make sure you know the program you downloaded is from a valid source (which this one is).
You’ll need to click Yes. (fig. 6)
The program installation will begin. You’ll be asked what language you’d like to use. This is up to you, but I’d recommend leaving it in English and clicking OK. (fig. 7)
Step 4: The Notepad++ Setup will appear. It’s letting you know that it’s best to close down any running applications before you continue. If you are ready to go, go ahead and click Next. (fig. 7)
Next, you’ll see the licenses agreement letting you know what the terms and policies involved with using the software are. Read though this if you choose, and when you are ready, click I Agree to move on.
You’ll be asked where you would like to put the new application. It’s best to just use the default setting and unless you have a really good reason not to, let it live in your C:/Program Files with the rest of your applications.
Click Next. (fig. 9)
In the next screen, you’ll be asked to check which components you want to install. I’d recommend not messing with this and just leaving the default stuff checked. Click Next. (fig 10)
You’re almost there! The next screen will ask about a few more components. Don’t worry about any of these, leave them all unchecked and simply click Install. (fig 11)
A screen with a progress bar will appear letting you know that your computer is doing it’s thing. Sit back and wait till everything is finished. (fig 12)
Once your computer finishes the install, a new window will appear letting you know that the install is finished. Double check that the checkbox for Run Notepadd++ is checked.
You’ll need to click Finish to complete the process and close the setup. (fig. 13)
You’ve done it! The program is installed on your computer and ready to use. It should have opened up automatically if you remembered the checkbox in the last step. It’ll look like (fig. 14).
You probably noticed that when the program launched it also opened a file called change.log which lists a bunch of fixes and enhancements. We can ignore this and simply close this file by clicking the red x in the top left. (fig. 15)
Once the change.log file is closed out, it should have been replaced by a blank document. (fig. 16)
This is exactly where we want to start. Now let’s take a look at customizing it for a good coding experience.
Configuring for Coding – Settings
We can just use the default setup and begin coding if we wanted to. However, I like to adjust the settings to make my coding a little easier on my eyes and also to feel a little less like word processing.
Step 1: We’ll begin by selecting Settings from the top menu and choosing Style Configurator… from the dropdown menu. (fig. 17)
Step 2: In the Style Configurator panel, click the dropdown labeled: Select theme to show our options. (fig. 18)
Step 3: From the dropdown, select Twilight. (fig. 19)
Step 4: Double check that Twilight was selected by checking that it appears next to Select theme. You’ll notice that the background color on your document is now black.
Click Save & Close. (fig. 20)
You should now be left with a new blank document. (fig. 21)
I prefer to use the Twilight theme, but everyone is different. Try it out for a while and see if it works as well for you as it does me. Feel free to experiment with other themes and settings as well. Many people like to make adjustments to the font color and size after they have had a little experience in the software.
Saving as HTML
In order to have your browser recognize your file as an HTML file, we’ll need to make sure that the file gets saved correctly. Notepad++ makes it pretty easy, but I’ll walk you through it to make sure to point out the things that need to happen to ensure success.
Step 1: To save the file, click File from the top menu. From the dropdown, select Save As. (fig. 22)
Step 2: Name your file, and from the dropdown below the file name, choose
Hyper Text Markup File Language file. (fig. 23)
Step 3: Make sure to navigate to the folder you want to save your file to. This should be the root folder of your website. 
Step 4: Double-check that your file name has the file extension “.html” and then when you are read, click Save. (fig. 25)
That’s it, you’re solid. You now have a blank HTML file ready for HTML code. From here on out, just always make sure that you select Hyper Text Markup Language file from the dropdown in the save panel and you should be set.
If you reached this post while working through Lesson 1 of Web Design for Graphic Designers , this is exactly where you want to be to begin the work in Lesson 1: File Management & HTML Boilerplate.
For those of you who landed here because you are interested in learning web design and writing code, you might want to check out my book, Web Design for Graphic Designers, where I walk you through the steps for creating a modern, responsive website!
Best of luck!
1…2…3…Go!
Web Design for Graphic Designers
A Step-by-Step Guide for creating a modern, responsive website from scratch
Co-authored by Jillian Noble and Ryan Krug
Published by EMSPACE
Leave a Reply