Set Up Your Work Environment

Before we move on to much more I think it is important now to go over the different programs you will use to code with.

The Projects Folder

It is best to create a folder on your computer where you will store all your projects in for easy access. If you are working with a Mac or Linux, the most common directory to create is under “Username/Sites”, next to your picture, video, document etc. folders. If you are on windows, either also create a folder under “Username/Sites”, or create one under “Username/Documents/Sites”. If you are still unsure of where to place the Sites folder, the desktop is a perfectly fine temporary location.

The Text Editor

If you have ventured into the world of HTML before then you might be familiar with a program called Dreamweaver made by Adobe. While there are some benefits to using this program it will not be useful at all to what we are creating. The reason being is that Dreamweaver tries too much to help you therefore you use it as a crutch and produce worse quality code and learn very little from the process. From now on I will be using Sublime Text 2 and it will be required for some of the future steps. It is freely available for all operating systems and has recently become one of the most popular editors available.

To get started, go to the Sublime Text 2 website and download the program.

A quick note about Keyboard Shortcuts

Keyboard shortcuts are used in almost every program on your computer. The most basic of these that we have all used is saving a document, which is commonly done by pressing ctrl and the letter S on a windows computer, or cmd and the letter S on a Mac. Keyboard Shortcuts are something that you have to memorize because they will make coding go by a lot faster if you aren’t fumbling around in the top menu. You don’t have to sit down and look at a sheet of shortcuts to memorize them though, most will stay in your memory after using them a lot. I will be providing some useful shortcuts along the way in our lessons and I wanted to show what it will look like when I do so. The format of displaying a shortcut is as such:

ctrl+s (windows), cmd+s (mac)

I am showing you this because there could be confusion if you have never seen a written shortcut before. More specifically the confusion will arise when looking at the + button. You may be thinking that it would mean that you physically have to press the + button on your keyboard, but when dealing with shortcuts the + character is only there to show that you have to press both the ctrl and S buttons at the same time and save time from writing it like this:

“hold ctrl and press S” (windows), “hold cmd and press S”

Which is quite lengthy and almost more confusing. Another thing to note is that the capitalization of the shortcut key does not matter. For example, ctrl+s is the exact same shortcut as  CTRL+S. You may also get to see commands that have more than two buttons you hold down. The ctrl+shift+p command is one you will see in the future, and reads as “hold ctrl, then hold shift, and finally press the letter P”. I will be including both Mac and Windows shortcuts in all the instances that I can since they do not share the same commands. If you can’t remember a shortcut then don’t be afraid to use Google, it is your best friend in web development!

Setting up Sublime Text 2

After installing Sublime Text 2, open up the program.

Tab Indentation

First, at the top menu go to “Preferences -> Settings – Default”. This will open up a document. On or near line 46 should be “tab_size”: 4. Change that tab size number to be 2.

Right below it is “translate_tabs_to_spaces”: false. Change the false to be true.

Save the file and close it.

Install Package Manager

The package manager is an extension on Sublime Text which makes it easier to install other plugins from within the program. While in Sublime Text, use the shortcut ctrl+(windows), cmd+` (mac) – (NOT a regular apostrophe, it is the same button as the ~, top left of keyboard). This will open up the console in the bottom of sublime text. When it is open, paste this into the bottom input area and then press enter

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


Once Sublime has been restarted, to test if it has use the shortcut ctrl+shift+p (windows), cmd+shift+(mac). This will open a text box in the top middle of the editor. Start typing “install”, if you see “Package Control: Install Package” then all is well!

Color Scheme

While it may not seem important now, a good color scheme is invaluable in the long run. You must have something that distinguishes between tags and attributes in an eye pleasing manner if you are going to spend hours coding. For now the default one is fine, but I would suggest going over them and finding one that suits you. To change the color scheme, go to “Preferences -> Color Scheme”.

Web Browsers

Lastly we need a web browser. While all developers should have every major browser available to test on, the general way of doing things is you choose one browser to start out on, then solve the rendering difficulties in the other browsers. I have to recommend Google Chrome as the best browser for web developers. I will be referencing things within Chrome for the future lessons so please download it.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s