GETTING STARTED WITH HTML5 USING CHROME AND SUBLIME

INTRODUCTION

HTML5 technologies

HTML5 technologies refer to collections of languages that are used for structuring and presenting content for web pages.

Thanks to the Web Kit component, HTML5 documents can be developed to resemble the look and feel of mobile apps.  

This subsequently makes them the most economical and efficient way of building cross platform mobile apps.

Chrome Web Browser

Chrome is a Web Browser that comes with tools to help developers build apps that is based on HTML5 technologies.  Developers may use Chrome as an emulation platform to see how their HTML5 projects work on mobile devices.

Sublime Editor

Sublime Text Editor is a multi-platform Text Editor available in Windows, Linux and Macintosh. Developer who seldom switches between these platforms may find it convenient to have a common application to work with their projects.

STEPS

1) Install Chrome and Sublime

Download Chrome from here, https://www.google.com/chrome/browser/ 

Install Chrome.

Download Sublime from here, http://www.sublimetext.com/download 

Install Sublime.

2) Arranging application windows

You can arrange Sublime and Chrome application windows in whatever ways that are convenient to you.

I found the following arrangement the best for editing codes and viewing their output.

3) Setting up project folder

3.1) Create a project folder, example, myprojects.

E.g.

(in Windows XP, 7, 8 etc.) c:\myprojects

(in Mac) {your username}\documents\myprojects

3.2) Try browsing your project folder using Chrome

Type the physical path in your Chrome Address Box

E.g.

(in Windows) file:///C:/myprojects

(in Mac) file://localhost/Users/{your username}/Documents/myprojects/ 

3.3) Create a new subfolder, html5basics

You should see this in Chrome

4) Create HTML5 Test File

4.1) Using Sublime, create test.html in that folder (html5basics)

If you browse the folder html5basics, you should see the file name

4.2) Type the following codes

(further reading, http://www.w3schools.com/html/html5_intro.asp )

4.3) Check the output

5) Creating Project Folder in SubLime

By defining a project folder in Sublime, you would be able to manage your files efficiently.

5.1) Go to menu Project/Add Folder to Project…

5.2) Choose the folder html5basics

5.3) Go to menu View/Side Bar/Show Side Bar

You get a Side Bar that displays your project folder and its contents.

From now onwards, you can manage your files by right-clicking the folder name and selecting options in the pop up menu.