Step 1 in Web Design: Setting up your file system

Website files must be kept in an organized file system to make sure servers and browsers can read them correctly. It's easy to set up your file system: just watch the short video above to see what to do. (Maximize the screen to view).

Step 2 in Web Design: Get your software

You don't need super fancy (and expensive) code programs to write code. All you need is:

  • Notepad (Windows)
  • ...whatever the version of Windows Notepad is on a Mac (sorry, don't have a Mac)
At home: on a Windows computer, Notepad comes already installed, so search for it and you should be able to find it.

I like to use a program called Notepad ++.

This is free, open-source software, and it's especially helpful to people new to web design. It provides a few more features than the standard Windows Notepad, such as color coding and error checking.

Here's a screenshot of HTML in Windows Notepad:

Pretty basic. Check out the same code in Notepad ++:

As you can see, Notepad ++ provides a more user-friendly interface. So, that's what we're going to use in this course.

To find Notepad ++, just go to the Web Design 35S icon on your desktop, and find the Notepad ++ folder. Open it and find the Notepad ++ icon, and open that. Done!

Step 3 in Web Design: Naming & Saving it Right

Website files must be named and saved properly in order to function correctly. We are going to create the first HTML page for your site.

For every single website in existence: the first page (home page) must be named index. Any other name will cause your website to break.

Also: do NOT capitalize the names of your pages! Some browsers have a hard time reading capital letters.

Check out the short video to see how to save your first HTML file. (Maximize the screen to view).

Step 4 in Web Design: Make your first HTML page

In your website folder, you now have a document named index. We are going to add some HTML to it.

Check out the short video to see how to add your first lines of HTML to the index file. (Maximize the screen to view).