HTML5 Dev Gal

Messing with HTML5, CSS3 and JavaScript.

Give Your App Some Style

Table of Contents

Using The Sublime Text Program

Run The Sublime Text Program

  1. Click on the Start button in the bottem left corner of your desktop.

    Start MenuStart Menu

  2. Type Sublime in the Search Programs and files box

  3. Double click on Sublime Text 2 to launch it. You might have to wait a minute or two for Sublime Text to launch.

    Launch Sublime TextLaunch Sublime Text

Editing Your App In The Sublime Text Program

  1. In the Sublime Text program’s top menu choose Project -> Add Folder to Project....

    Add Folder To ProjectAdd Folder To Project

  2. In the Browse For Folder window that just came up, find your User folder.

    The User FolderThe User Folder

  3. Navigate to and select the app folder in the My Documents folder. Click the OK button.

    Select and add app folderSelect and add app folder

Don’t be too intimitated with all of the files and folders. For those of you who are interested in learning more about this application structure, I’d be happy to explain it afterwords.

Making Your Site Pretty With A Bootstrap Template

Layout Page

  1. In the Sublime Text program, on the left side, click the left arrow next to views to expand the folder.

    Expand views folderExpand views folder

  2. Double click on the layout.jade file shown beneath the views folder on the left side.

    layout.jadelayout.jade

  3. Delete the exsisting code in the file.
  4. Copy and paste the code below into that file. If you have problems copying and pasting the code below, click on to open up a webpage with the raw code. It’s easier to copy and paste the code from that seperate page.

Save the code by pressing Control + S.

Home Page

  1. In the Sublime Text program double click on the index.jade file shown beneath the views folder on the left side.

    index.jadeindex.jade

  2. Delete the exsisting code in the file.
  3. Copy and paste the code below into that file. You can use the raw code by clicking on if you found it easier.

Save the code by pressing Control + S.

A Note About Jade vs. HTML for HTML developers

I know jade looks like weirded out HTML for those of you that are familiar with HTML. It’s an HTML template engine that the node.js server compiles into regular HTML using the express node module. We could have just as well used regular HTML. The express module app creator automatically defaults to jade so I kept it to keep this simple.

There are a TON of similar template engines that are designed to make HTML coding quicker with less markup. If you want to take a look at some, check out the Template Chooser.

How Does Jade Look When Converted To HTML?

If you want to see what the index.jade or layout.jade file will look like when compiled into an HTML file, you’ll have to do the following:

  1. Open up your app directory in the Command Window. You can go back to the directions if you need to.
  2. Run the following commands in the Command Window to convert the index.jade file:
      npm install -g jade
      cd views
      jade index.jade

You can then find an index.html file in the Sublime Text program where the index.jade file is.

How Does HTML Look When Converted To Jade?

If you’ve got some HTML code and you want to know what it would look like as jade code you can use this handy HTML to Jade converter.

Admiring The Fruits Of Your Labor

Now go back to http://localhost:3000/. If you don’t see your changes, you might have to refresh the cache. Here are instructions to refresh cache for all different types of browsers.

Let’s Embed Some Video . .