Now that you have registered a domain name and have it pointing to a web server with two directories setup, it’s time to create content to put on that web server. However, you are going to need some tools to help you along your way. While there are a lot of tools out there that you could use, or already may be using I preselected the ones I would like you to use to complete the exercises in this course.

Since there are a lot of other options available, I wanted to share with you the three main reasons I have chosen the ones that I did.

  1. All the tools are open source and free to use. Since the web is technically open, and the industry tends to openly share its knowledge, it’s only appropriate to use tools that embrace that philosophy.
  2. The tools that I have chosen work on both macOS and Windows. While the screencasts are conducted on a Mac, if you are using Windows you should notice very little difference between the tools. This will make it easy for just about anyone to complete the course.
  3. Perhaps the most important factor I look for is active development or a revenue stream. Open source tools tend to disappear after a while because the work done on them is by volunteers, in their spare time. If there is no way for someone to work on the project full time—make a living—the incentive to maintain the tools can quickly fade as other responsibilities creep into their day to day lives.

Of course you are free to choose your own tools, but I can’t help you if you have a problem. So, if you would like help if a problem should arise, I suggest using the tools that I have recommended.

Text Editor

To complete the exercises for this course you are going to write HTML and CSS. You could literally do this in a Word document, or Notepad. However, HTML and CSS can be very picky in what you type, or more specifically, don’t type. A good text editor will do a lot of different things to make writing HTML and CSS much easier that will be discussed in the screencasts throughout this course.

For this course, you will need to download and install the open source tool Brackets. Again, I decided on Brackets because it’s open source, so it’s free to use. It works on macOS, Windows, and Linux machines. Brackets is also the core of Adobe’s Dreamweaver. This suggests that regular maintenance and updates will be coming to Brackets for a long time.

If you know how to install software, you don’t need to follow along with the screencast. If you are unfamiliar with install software, or are confused on how to update Brackets, watch the short screencast.


In addition to Brackets you will need to install the Autoprefixer plugin. I’ll cover how to install the plugin in the screencast below, but before you begin, it’s necessary to cover what this plugin does so you understand its importance. New properties are constantly being added to the CSS specification. Anyone can suggest a new property through the W3 organization, but not everyone can immediately build support for it into a web browser. The proposed specification goes through a vetting process to make sure it’s a sound addition.

Just like you, a browser can make its own recommendation for a new CSS specification to the W3 with one big advantage. The browser developers can build support for the proposed spec into the browser to help demonstrate how it will work. However, it’s frowned upon when browser just randomly introduce new proprietary specifications that don’t work on all browsers. To avoid this, browser developers came up with Vendor Prefixes that would allow a browser to add support for an experimental specification without affecting existing specification.

The only downside to vendor prefixes, and the need for the Autoprefixer plugin, is not all CSS properties need a vendor prefix. Unfortunately, sometimes when an experimental property officially gets added to the CSS specification vendors are slow to add the finalized specification into the latest browser release. This means that sometime it’s necessary to write out a CSS property in its final accepted declaration and with a vendor prefix. It would take way too much time for developers to go through hundreds of lines of CSS to manually add vendor prefixes. The Autoprefixer plugin does this for us automatically by search the Can I Use database to see which vendor prefixes may need to be added. The following is a list of vendor prefixes used by each browser developer.

Show Whitespace VS

The Show Whitespace VS plugin is really more for me than for you. All this plugin does is literally mark white space in your HTML and CSS files with tiny dots. This helps me, and you, troubleshoot your code if something isn’t work. Being able to see if the code being typed during the screencasts have spaces between characters will make learning the medium of the web much easier.

FTP Client

Once you have created your HTML and CSS files in your text editor, you will need to upload them to your course web hosting account with a File Transfer Protocol client. Again, there are many options out there. For this course, I will be using CyberDuck in the screencasts. Unless you are already familiar with using another FTP client I strongly recommend that you also use CyberDuck. Students tend to have the most issues with this step in the process, and using something other than what I demonstrate will only end up causing you problems.

The reason I chose CyberDuck is first and foremost, ease of use! A lot of the other FTP client out there are difficult to use for people who aren’t familiar with FTP. The other reason I like CyberDuck is they openly look for donations, or you can buy it through the Mac App store. This means that the program, while free to use, generates enough income for someone to maintain it. As with everything else it’s dual operating system.

You will need to follow along with the screencast to learn how to setup CyberDuck so it can connect to your course web hosting account. In a separate screencast I will demonstrate how to use CyberDuck to manage your files including uploading, downloading, and deleting.

Interactive Design Software

You will need access to the Adobe Creative Cloud for three reasons. The first, you will need Photoshop to edit photos for use on the web. Second, you will also need Illustrator to prepare vector images for the web. Finally, you will need TypeKit to use web fonts in the exercises.

While I’ll be using the Creative Cloud in the screencasts, if you don’t have it, you can still manage. You can sign up for a free TypeKit account and that will be more than enough for you to follow along. You can also use Affinity Designer and Affinity Photo, the Illustrator and Photoshop competitors from Serif. The Affinity software is not free, but it’s much less expensive than the Creative Cloud and doesn’t require a subscription. They are also working on Affinity Publisher, a replacement InDesign.


This assignment will be worth 4 points.