Before we can begin work on the development of our website we need to select a piece of software that we can use to write our code. Using Textedit or Notepad is really a bad practice, and doesn’t provide the benefits that a code editor, specifically made for writing code, provides. So for this series we’re going to be using Sublime Text 2, and to get started, you’ll want to navigate to the Sublime Text website to download and install the program.
With Sublime Text 2 installed, we’re going to take a few moments to leverage some extensions that will greatly improve our workflow.
Now to install plugins for other programs you may be familiar with having to download a zip and then extract the contents into some impossible-to-find folder, but with Sublime Text, we’re able to take advantage of a neat little thing called Package Control that greatly simplifies the plugin installation process.
Developed by Will Bond, Package Control essentially serves as a package manager, where any package created by the community can be added to this repository and then installed directly from Sublime Text.
So to install Package Control, we’ll first navigate to the installation page of the Package Control website. Next, all we need to do is copy the appropriate block of code, and in Sublime Text, we’ll open up the console using CTRL + ~ and then paste our code and hit return.
With that, we just need to restart Sublime Text, and Package Control is installed. So how do we access this, well, we can either go to Sublime Text >> Preferences >> Package Control, or by simply searching for it using CTRL + SHFT + P.
Now, we can demonstrate just how easy it is to install a plugin and further our work environment.
The first extension we’re going to install is Emmet, a plugin which greatly improves writing HTML & CSS. So using CTRL + SHFT + P we’ll search Package Control: Install and search For Emmet. Click the link, and there you have it, we now have Emmet installed, and this is a plugin that we’re going to take a deeper look at later in the series.
Next, we’re also going to install LiveReload. This plugin will automatically refresh the browser when changes are made to our HTML & CSS and lets us preview our updates in real time. So using CTRL + SHFT + P we’ll search Install, and search for LiveReload. Click the link, and LiveReload is installed.
Now for this particular plugin, we also need to install a browser extension, and for the purposes of this tutorial, I’m using Google Chrome, so we’ll head to the Web store, and search for LiveReload.
Adding the plugin to Chrome, we’ll next go to Window >> Extensions, and we’ll want to make sure that we allow access to file URLs.
With that set, we’ll take a moment to do a quick demonstration. Let’s create a new file, and save it to the Desktop as index.html. We’ll also open our file in the browser, and we can now activate LiveReload by clicking the icon next to the address bar, noting the status has changed indicating that the plugin is active.
Positioning the preview side-by-side with that of our editor, let’s next type in “Hello Word!” and hitting save, you’ll note that the page updates, providing us with a live preview of our edits.
With Sublime Text, and our plugins, up and running, our work environment is now in a great state to begin the development of our website.